IntroductionFundingApplicationAgreement.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
  1. <template>
  2. <div style="position: relative;" class="Agreenment">
  3. <div style="width: 30%;margin: auto;color: #666;font-size: 20px;font-weight: 700;text-align: center;margin-top: 50px;margin-bottom: 20px;">
  4. {{$t('common.Applicationinstructions')}}
  5. </div>
  6. <div style="width: 70%;margin: auto;" class="initData">
  7. <div class="div">一、 {{$t('common.Requirements')}}</div>
  8. <p>{{$t('common.EnterRequirementsFirst')}}</p>
  9. <p>{{$t('common.EnterRequirementsSecond')}}</p>
  10. <p>{{$t('common.EnterRequirementsThird')}}</p>
  11. <div class="div">二、{{$t('common.RightsandObligations')}}</div>
  12. <p>{{$t('common.EnterRequirementsFourth')}}</p>
  13. <p>{{$t('common.EnterRequirementsFifth')}}</p>
  14. <div class="MemberServices div" >三、{{$t('common.DescriptionofMembershipService')}}
  15. <p style="margin-left: 36px;">{{$t('common.InformationService')}}</p>
  16. <p style="margin-left: 36px;">{{$t('common.PublicityService')}}</p>
  17. <p style="margin-left: 36px;">{{$t('common.ExchangeatConferences')}}</p>
  18. <p style="margin-left: 36px;">{{$t('common.TrainingandSeminars')}}</p>
  19. <p style="margin-left: 36px;">{{$t('common.ResourceSharing')}}</p>
  20. <p style="margin-left: 36px;">{{$t('common.BusinessDevelopment')}}</p>
  21. <p style="margin-left: 36px;">{{$t('common.ProfessionalAlliancesactivities')}}</p>
  22. <p style="margin-left: 36px;">{{$t('common.CustomizedService')}}</p>
  23. </div >
  24. <p style="color: #6cbafa;">
  25. <i class="el-icon-document"></i>
  26. <a href="javaScript:;"
  27. style="color: #6cbafa;"
  28. @click="menbership"
  29. >
  30. {{$t('common.EnterprisesMembers')}}
  31. </a>
  32. </p>
  33. <p style="color: #6cbafa;"><i class="el-icon-document"></i> <a href="javaScript:;"
  34. style="color: #6cbafa;" @click="toPDFView">
  35. {{$t('common.2020MembershipServiceGuide')}}</a>
  36. </p>
  37. <div
  38. style="position: absolute;left:655px;top:311px;width: 400px;
  39. height: 505px;border: 1px solid #ececec;background: #fff;box-shadow:#e2e2e2 10px 10px 10px;text-align: center;"
  40. v-show="Membership"
  41. >
  42. <div style="width: 100%;height: 50px;line-height: 50px;background: #f0f7ff;
  43. text-align: center;border-bottom: 2px solid #e2e2e2;">
  44. <span style="float: left;width: 65%;border-right: 1px solid #e2e2e2;">{{$t('common.Membertype')}}</span>
  45. <span style="float: left;width: 34%;" :style="$i18n.locale=='en'?'font-size:14px;line-height:18px':''">{{$t('common.Membershipfeestandard')}}</span>
  46. </div>
  47. <div style="height: 298px;font-size: 14px;">
  48. <div style="float: left;width: 65%;height: 100%;border-right: 1px solid #e2e2e2;">
  49. <div style="float: left;width: 50%;height: 100%;border-right: 1px solid #e2e2e2;line-height: 298px;"
  50. class="weight">{{$t('common.Domestic')}}</div>
  51. <div style="float: left;width: 49%;height: 100%;" class="domesticList">
  52. <div style="height: 50px;line-height: 50px;border-bottom: 1px solid #e2e2e2;">{{$t('common.Councilmembers')}}</div>
  53. <div style="border-bottom: 1px solid #e2e2e2;" :style="$i18n.locale=='zh'?
  54. 'padding: 20px 0':'padding: 2px 0;'">
  55. <div>{{$t('common.FortuneGlobal500enterprises')}}</div>
  56. <div style="font-size: 12px;margin-top: 10px;">({{$i18n.locale=='zh'?'或相应规模企业':'or
  57. enterprises of similar size'}})</div>
  58. </div>
  59. <div style="border-bottom: 1px solid #e2e2e2;" :style="$i18n.locale=='zh'?
  60. 'padding: 20px 0':'padding: 5px 0;'">
  61. <div>{{$i18n.locale=='zh'?'大型企业':"Large enterprises"}}</div>
  62. <div style="font-size: 12px;margin-top: 10px;">({{$i18n.locale=='zh'?'中国500强或相应规模企业':'Top 500 Enterprises of China or
  63. enterprises of similar size'}})</div>
  64. </div>
  65. <div style="height: 50px;line-height: 50px;">{{$i18n.locale=='zh'?'其他企业':"Other enterprises"}}</div>
  66. </div>
  67. </div>
  68. <div style="float: left;width: 34%;height: 100%;font-size: 14px;">
  69. <div style="float: left;width: 100%;height: 100%;" class="domesticList">
  70. <div style="height: 50px;line-height: 50px;border-bottom: 1px solid #e2e2e2;">{{$t('common.RMB800000')}} / {{$t('common.year')}}</div>
  71. <div style="border-bottom: 1px solid #e2e2e2;padding: 33px 0;">
  72. <div>{{$t('common.RMB500000')}} / {{$t('common.year')}}</div>
  73. </div>
  74. <div style="border-bottom: 1px solid #e2e2e2;padding: 41px 0;">
  75. <div>{{$t('common.RMB300000')}} / {{$t('common.year')}}</div>
  76. </div>
  77. <div style="height: 50px;line-height: 50px;">{{$t('common.RMB100000')}} / {{$t('common.year')}}</div>
  78. </div>
  79. </div>
  80. </div>
  81. <div style="width: 100%;height: 98px;border: 2px solid #e2e2e2;border-left: 0;border-right: 0;font-size: 14px;">
  82. <div style="float: left;width: 65%;height: 100%;border-right: 1px solid #e2e2e2;">
  83. <div style="float: left;width: 50%;height: 100%;border-right: 1px solid #e2e2e2;line-height: 98px;">
  84. {{$i18n.locale=='zh'?
  85. '国际':'International'}}</div>
  86. <div style="float: left;width: 49%;height: 100%;">
  87. <div style="height: 50px;line-height: 50px;border-bottom: 1px solid #e2e2e2;">
  88. {{$i18n.locale=='zh'?
  89. '企业理事':'Council members'}}</div>
  90. <div style="height: 50px;line-height: 50px;">{{$i18n.locale=='zh'?
  91. '其他企业':'Other enterprises'}}</div>
  92. </div>
  93. </div>
  94. <div style="float: left;width: 34%;height: 100%;">
  95. <div style="height: 50px;line-height: 50px;border-bottom: 1px solid #e2e2e2;">{{$t('common.$30000')}} / {{$t('common.year')}}</div>
  96. <div style="height: 50px;line-height: 50px;">{{$t('common.$10000')}} / {{$t('common.year')}}</div>
  97. </div>
  98. </div>
  99. <div style="height: 50px;line-height: 50px;font-size: 14px;">
  100. <div style="float: left;width: 65%;height: 100%;border-right: 1px solid #e2e2e2;" :style="$i18n.locale=='zh'?
  101. '':'line-height:25px'">
  102. {{$i18n.locale=='zh'?'个人及非盈利机构':'Individuals and non-profit organizations'}}
  103. </div>
  104. <div style="float: left;width: 34%;height: 100%;">
  105. {{$i18n.locale=='zh'?'免费':'Free'}}
  106. </div>
  107. </div>
  108. </div>
  109. <div style="margin-top: 65px;">
  110. <el-checkbox v-model="checked" >{{$t('common.Ihavereadandagree')}}</el-checkbox>
  111. <!-- <span style="float: right;color: #666;font-weight: 700;font-size: 18px;">全球能源互联网展合作组织</span> -->
  112. </div>
  113. <div style="margin: auto;position: relative;height: 100px;">
  114. <el-button type="primary"
  115. style="width: 200px;position: absolute;top: 50px;left: 50%; transform: translate(-50%,-50%);"
  116. :disabled="!checked"
  117. @click="activeChange"
  118. >
  119. {{$t('common.Next')}}
  120. </el-button>
  121. </div>
  122. </div>
  123. <el-dialog
  124. :title="$i18n.locale=='zh'?'提示':'Reminder'"
  125. :visible.sync="toViewLogin"
  126. :width="$i18n.locale=='zh'?'500px':'750px'"
  127. :height="$i18n.locale=='zh'?'300px':'386px'"
  128. :before-close="toViewLoginChange"
  129. >
  130. <div style="width: 100%;height: 100%;">
  131. <img src="@/assets/img/loginTips.png" alt="" style="width: 180px;height: 180px;margin-left: 20px;">
  132. <div style="float: right;margin-right: 20px;" :style="$i18n.locale=='zh'?'width: 49%;margin-top: 10px;':'width: 453px;margin-top: -25px;'">
  133. <div style="font-size: 20px;font-weight: normal;color: #333333;
  134. font-family: HiraginoSansGB-W3, HiraginoSansGB;
  135. line-height: 40px;">
  136. {{$t('common.ReminderFirst')}}
  137. </div>
  138. <div style="font-size: 16px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
  139. font-weight: normal;color: #666666;line-height: 30px;">
  140. {{$t('common.ReminderSecond')}} <span style="color: #0091FF;font-size: 18px;">{{num}}</span> {{$t('common.ReminderThird')}}
  141. </div>
  142. <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
  143. font-weight: normal;color: #666666;line-height: 30px;">
  144. {{$t('common.ReminderForth')}}
  145. </div>
  146. <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
  147. height:33px;line-height:60px;font-weight: normal;color: #0091FF;">
  148. <span style="margin-left: 40px;" class="cursor" @click="toView('login')">
  149. {{$t('common.ReminderFifth')}}
  150. </span>
  151. <span style="margin-left: 10px;" class="cursor" @click="toView('Register')">
  152. {{$t('common.ReminderSixth')}}
  153. </span>
  154. </div>
  155. </div>
  156. </div>
  157. </el-dialog>
  158. <el-dialog
  159. :title="$i18n.locale=='zh'?'2023会员服务指南':'2023 Membership Service Guide'"
  160. :visible.sync="toPDFViewList"
  161. style=" margin:25px auto;"
  162. width="50%"
  163. >
  164. <iframe :src="src" page="1" frameborder="0" style="width:100%;height: 500px;"></iframe>
  165. </el-dialog>
  166. </div>
  167. </template>
  168. <script>
  169. export default {
  170. name: 'IntroductionFundingApplicationAgreement',
  171. data () {
  172. return {
  173. initData:"",
  174. checked: false,
  175. Membership:false,
  176. toViewLogin:false,
  177. timer:'',
  178. num:5,
  179. toPDFViewList:false,
  180. src:null
  181. }
  182. },
  183. mounted(){
  184. this.src = this.$i18n.locale.toUpperCase() == "ZH" ? '/api/file/pub/def/toPDFViewList.pdf' : '/api/file/pub/def/toPDFViewListEN.pdf';
  185. document.all.iframeid.src = this.src?this.src:'';
  186. debugger
  187. this.$forceUpdate();
  188. },
  189. watch:{
  190. "toViewLogin"(){
  191. if(this.toViewLogin==true){
  192. this.loginTipsChange();
  193. }
  194. }
  195. },
  196. methods:{
  197. toPDFView(){
  198. this.toPDFViewList=true;
  199. },
  200. // 未登录跳转
  201. toView(router,json){
  202. if(router=='login'){
  203. let rpath = { name: 'IntroductionFundingApplication', query: {}};
  204. sessionStorage.setItem('pathReminder', JSON.stringify(rpath));
  205. this.$router.push({name:router,params:json})
  206. }else {
  207. this.$router.push({name:router,params:json})
  208. }
  209. },
  210. loginTipsChange(){
  211. const that=this;
  212. this.num =5;
  213. clearInterval(timer_interval);
  214. this.timer = setInterval(function() {
  215. if (that.num > 0) {
  216. that.num--;
  217. } else {
  218. if(that.toViewLogin==true){
  219. clearInterval(that.timer);
  220. that.toView('login');
  221. }else {
  222. clearInterval(that.timer);
  223. }
  224. }
  225. }, 1000)
  226. },
  227. // 判断未登录跳转是否关闭
  228. toViewLoginChange(done){
  229. this.toViewLogin=false;
  230. this.num=5;
  231. clearInterval(this.timer);
  232. },
  233. activeChange(){
  234. if (!this.$Cookies.get('token')) {
  235. // this.$message.warning("请先登录");
  236. // this.$confirm('检测到您未登录,是否登录')
  237. // .then(_ => {
  238. // this.toView('login');
  239. // })
  240. // .catch(_ => {});
  241. this.toViewLogin=true;
  242. } else {
  243. this.$emit('agreementChange',1)
  244. }
  245. },
  246. menbership(){
  247. this.Membership =!this.Membership;
  248. }
  249. },
  250. }
  251. </script>
  252. <style scoped>
  253. .initData .div{
  254. color: #666;
  255. font-weight: 700;
  256. }
  257. .initData .weight{
  258. font-weight: 400;
  259. }
  260. .initData p{
  261. margin-left: 18px;
  262. font-size: 14px;
  263. color: #aeaeae;
  264. }
  265. .MemberServices {
  266. margin-top: 50px;
  267. }
  268. .MemberServices p {
  269. display:list-item;
  270. list-style-type:disc;
  271. margin-left:2em;
  272. color: #325a8e;
  273. }
  274. .domesticList div {
  275. width: 100%;
  276. }
  277. html {
  278. height: 500px;
  279. }
  280. .Agreenment >>>.el-dialog__body {
  281. padding:0 20px 30px 20px;
  282. }
  283. </style>