ExhibitorDirectory

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,viewport-fit=cover,user-scalable=0"> <title>ExhibitorDirectory</title> <script src="js/vue.js"></script>  <link rel="stylesheet" href="css/elementUI.css" /> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/public.css"> <link rel="stylesheet" href="css/media.css"> <style> .bannerrich p { margin: 0; } #app { display: none; } </style> </head> <body> <div id="app" :style="{fontFamily:languageRadio==1?' AlibabaPuHuiTi':'opensans-b9k8'}"> <div v-html="banner" class="bannerrich"></div> <el-container> <el-main style="position: relative;"> <div>  <div class="m_b15_auto fw fs30 ta_c lh40">{{languageRadio==1?'参展商名录':'Exhibitor List'}} </div> <div class="fl_r va_c h768"> <el-badge :value="mylist.length" :hidden="mylist.length==0" :max="999" class="item"> <ed_btn :content="languageRadio==1?'我的收藏':'My Favorite'" icon="el-icon-star-off" :color="button_color" @btn-click="mycollect"></ed_btn> </el-badge> </div> <div class="language_select" v-if="title_en">  <div class="btn_list"> <div class="lanBtn" :style="{background:languageRadio==1?button_color||'#004386':'#FFF',color:languageRadio==1?'#FFF':''}" @click="languageRadio=1"> 中文 </div> <div class="lanBtn" :style="{background:languageRadio==2?button_color||'#004386':'#FFF',color:languageRadio==2?'#FFF':''}" @click="languageRadio=2"> English </div> </div> </div> <div class="m_auto fw fs18 ta_c lh28" v-if="windowScreen>=800"> <div v-if="languageRadio==2" class=" ta_c lh28 flx_jc_center" style="padding-left: 116px;"> {{title_en}} </div> <div v-if="languageRadio==1" class=" ta_c lh28" style="padding-left: 116px;">{{title}}</div> </div> </div> <div class="flx_spaceBetween mt50 mb30 flx_wrip search768">  <div class="flx_box-center flx_wrip" v-if="windowScreen>=950"> <el-badge :is-dot="cate_id.length!=0" class="mr15" v-if="category.length>0"> <classify_btn :content="languageRadio==1?'所有产品分类':'Product Categories'" @btn-click="btnclick(0)"></classify_btn> </el-badge> <el-badge :is-dot="hall_id.length!=0" class="mr15"> <classify_btn :content="languageRadio==1?'所有展馆':'Hall'" @btn-click="btnclick(1)"> </classify_btn> </el-badge> <el-badge :is-dot="area_id.length!=0" class="mr15" v-if="area.length>0"> <classify_btn :content="languageRadio==1?'所有国家及地区':'Countries & Regions'" @btn-click="btnclick(2)"></classify_btn> </el-badge> </div>  <div class="d_il"> <search_input class="d_il" :color="button_color" :placeholder="languageRadio==1?'输入关键词':'Please Enter'" ref="inputref" @input-blur="init(1)" @input-enter="init(1)" @input-clear="init(1)"> </search_input> <ed_btn :content="languageRadio==1?'查询':'Search'" color="#ffffff" :backcolor="button_color" @btn-click="init(1)"></ed_btn> </div> </div>  <div class="mb40" :key="keyindex" v-if="windowScreen>=950"> <classify_list class="mb10" :title="languageRadio==1?'产品类别':'Category'" type="category" :nowselect="cate_id[0]" :list="category" @select-btn="selectbtn" v-show="select[0]" :isenglish="languageRadio==2" :color="button_color"> </classify_list> <classify_list class="mb10" :title="languageRadio==1?'展会展馆':'ExhibitionHall'" type="hall" :nowselect="hall_id[0]" :list="hall" @select-btn="selectbtn" :isenglish="languageRadio==2" v-show="select[1]" :color="button_color"> </classify_list> <classify_list :title="languageRadio==1?'国家及地区':'Countries&Regions'" type="area" :nowselect="area_id[0]" :list="area" @select-btn="selectbtn" :isenglish="languageRadio==2" v-show="select[2]" :color="button_color"> </classify_list> </div> <el-table :data="formData" style="width: 100%" size="small" :key="key"> <el-table-column :label="languageRadio==1?'操作':'Operate'" align="center" v-if="windowScreen<600"> <template slot-scope="scope"> <div class="pt10 pb10"> <collect_btn :icon="formData[scope.$index].show?'':'el-icon-star-off'" @btn-click="colectbtn(formData[scope.$index],scope.$index)" :showcolor="formData[scope.$index].show"></collect_btn> </div> </template> </el-table-column> <el-table-column :label="languageRadio==1?'参展商名称':'Name'" width="330"> <template slot-scope="scope"> <div class="va_c flx_box-center"> <span class="d_il minw_5 h5 br5 mr5" :style="{background: button_color || '#004098'}"></span> {{languageRadio==1?formData[scope.$index].title : formData[scope.$index].title_en}} </div> </template> </el-table-column> <el-table-column :label="languageRadio==1?'展位号':'Booth No.'" prop="pos_no"></el-table-column> <el-table-column :label="languageRadio==1?'国家及地区':'Countries & Regions'" :prop="languageRadio==1?'area':'area_en'" v-if="area.length>0"> </el-table-column> <el-table-column :label="languageRadio==1?'产品分类':'Product Categories'" :prop="languageRadio==1?'cur_category_name':'cur_category_name_en'" v-if="category.length>0"> </el-table-column> <el-table-column :label="languageRadio==1?'展品':'exhibit'" v-if="has_product"> <template slot-scope="scope"> <div class="df f_jc_sb" @click="mousedown(formData[scope.$index])"> <div class="exhibit_word"> <span v-for="(item,index) in formData[scope.$index].product_info" :key="index" v-show="index<=1"> <span v-if="languageRadio==1">{{item}}</span> </span> <span v-for="(item,index) in formData[scope.$index].product_info_en" :key="index" v-show="index<=1"> <span v-if="languageRadio==2">{{item}}</span> </span> </div> <i v-if="formData[scope.$index].product_info.length>0 && languageRadio==1" class="el-icon-thumb fs18" :style="{color:button_color || '#004098'}"></i> <i v-if="formData[scope.$index].product_info_en.length>0 && languageRadio==2" class="el-icon-thumb fs18" :style="{color:button_color || '#004098'}"></i> </div> </template> </el-table-column> <el-table-column :label="languageRadio==1?'操作':'Operate'" align="center" v-if="windowScreen>=600"> <template slot-scope="scope"> <div class="pt10 pb10" v-if="languageRadio==1" :key="key"> <ed_btn size="small" :icon="formData[scope.$index].show?'':'el-icon-star-off'" :content="formData[scope.$index].show?'已收藏':'收藏'" :color="formData[scope.$index].show?'#ffffff':button_color" :backcolor="formData[scope.$index].show?button_color:''" @btn-click="colectbtn(formData[scope.$index],scope.$index)"></ed_btn> </div> <div class="pt10 pb10" v-if="languageRadio==2" :key="key"> <ed_btn size="small" :icon="formData[scope.$index].show?'':'el-icon-star-off'" :content="formData[scope.$index].show?'Favorite':'Collect'" :color="formData[scope.$index].show?'#ffffff':button_color" :backcolor="formData[scope.$index].show?button_color:''" @btn-click="colectbtn(formData[scope.$index],scope.$index)"></ed_btn> </div> </template> </el-table-column> </el-table> <div class="mt50 pl20"> <el-pagination background :layout="windowScreen<690?'pager':'total, sizes, prev, pager, next, jumper'" :pager-count="5" :page-sizes="[10, 20, 30, 40]" :page-size="formPage.per_page" :current-page="formPage.page" :total="formPage.total" @size-change="sizechange" @current-change="init" :key="key"> </el-pagination> </div> </el-main> </el-container> <div v-html="bottombanner"> </div> <el-dialog :title="languageRadio==1?popitem.title+'(展品)':popitem.title_en+'(exhibit)'" :visible.sync="popshow"> <div class="pb10 pl10 pr10 pt10">  <div> <span v-for="(item,index) in popitem.product_info" :key="index"> <span style="overflow: hidden;word-break: break-all;" v-if="languageRadio==1">{{item}}；</span> </span> <span v-for="(item,index) in popitem.product_info_en" :key="index"> <span style="overflow: hidden;word-break: break-all;" v-if="languageRadio==2">{{item}}；</span> </span> </div> </div> </el-dialog>  </div> </body>  <script src="js/elementUI.js"></script> <script src="js/dist/axios.min.js"></script> <script src="js/component.js"></script>   <script src="js/zh-CN.js"></script> <script src="js/en.js"></script> <script src="js/httpVueLoader.js"></script> <script> let vue = new Vue({ el: '#app', data() { return { key: 1, windowScreen: 1920, typelist: typelist, banner: '', bottombanner: '', keyword: '', //搜索框 cate_id: [], // 产品分类 category: [], hall_id: [], // 展馆号 hall: [], area_id: [], // 国家及地区 area: [], select: [false, false, false], keyindex: 0, mylist: [], formData: [], formPage: { page: 1, total: 0, per_page: 10, }, title: '', title_en: '', languageRadio: '1', bannerList: '', button_color: '', fristInit: true, has_product: 0, popitem: {}, popshow: false, fristIn: true, } }, components: { collect_btn: collect_btn, collect_btn_h: collect_btn_h, classify_btn: classify_btn, classify_list: classify_list, search_input: search_input, ed_btn: httpVueLoader('js/ed_button.vue'), ed_pop: httpVueLoader('js/ed_pop.vue'), }, created() { this.languageRadio = geturl().lan == 'EN' ? 2 : 1 this.windowScreen = window.screen.width // console.log(this.windowScreen) // PCor移动1080是屏幕分界线 if (this.windowScreen <= 1080) { window.location.href = './index_m.html?uri=' + geturl().uri + '&session=' + geturl().session } this.mylist = JSON.parse(sessionStorage.getItem('mylist')) || [] }, mounted() { this.init(1) window.onresize = () => { return (() => { this.windowScreen = document.body.offsetWidth console.log(this.windowScreen) })() } }, watch: { languageRadio(n, o) { if (n == 2) { if (!this.fristIn) { window.location.href = './index.html?uri=' + geturl().uri + '&session=' + geturl() .session + '&lan=EN' } ELEMENT.locale(ELEMENT.lang.en) document.title = this.title_en } else { if (!this.fristIn) { window.location.href = './index.html?uri=' + geturl().uri + '&session=' + geturl() .session + '&lan=CN' } ELEMENT.locale(ELEMENT.lang.zhCN) document.title = this.title } this.fristIn = false for (let i of this.bannerList) { if (this.windowScreen >= 950) { if (i.position == 'top') { this.banner = this.languageRadio == 1 ? i.content : i.content_en } else if (i.position == 'bottom') { this.bottombanner = this.languageRadio == 1 ? i.content : i.content_en } } else { if (i.position == 'top_mobile') { this.banner = this.languageRadio == 1 ? i.content : i.content_en } else if (i.position == 'bottom_mobile') { this.bottombanner = this.languageRadio == 1 ? i.content : i.content_en } } } this.init() this.key++ }, }, methods: { async init(page) { let params = { uri: geturl().uri, //'gilf' session: geturl().session, keyword: this.$refs.inputref.value ? this.$refs.inputref.value : '', cate_id: this.cate_id, hall_id: this.hall_id, area: this.area_id, page: page ? page : this.formPage.page, per_page: this.formPage.per_page, lang: this.languageRadio, } document.getElementById('app').style.display = 'block' let indexUrl = await indexurl(params) if (indexUrl) { this.key++ this.formPage.total = indexUrl.list.total this.formPage.page = indexUrl.list.current_page this.title = indexUrl.config.title this.title_en = indexUrl.config.title_en document.title = this.title this.button_color = indexUrl.config.button_color this.has_product = indexUrl.config.has_product let bton = document.getElementsByClassName('.el-radio-button__inner') for (let i of bton) { i.style.background = this.button_color + '!important' } this.bannerList = indexUrl.config.banner for (let i of indexUrl.config.banner) { if (this.windowScreen >= 950) { if (i.position == 'top') { this.banner = this.languageRadio == 1 ? i.content : i.content_en } else if (i.position == 'bottom') { this.bottombanner = this.languageRadio == 1 ? i.content : i.content_en } } else { if (i.position == 'top_mobile') { this.banner = this.languageRadio == 1 ? i.content : i.content_en } else if (i.position == 'bottom_mobile') { this.bottombanner = this.languageRadio == 1 ? i.content : i.content_en } } } sessionStorage.setItem('bannerList', JSON.stringify(this.bannerList)) sessionStorage.setItem('button_color', JSON.stringify(this.button_color)) sessionStorage.setItem('has_product', JSON.stringify(this.has_product)) for (let i of indexUrl.list.data) { for (let i2 of this.mylist) { if (i.id == i2.id) { i.show = true } } } this.formData = indexUrl.list.data this.category = indexUrl.config.category this.hall = indexUrl.config.hall this.area = indexUrl.config.area for (let i of this.area) { i.id = i.title } if (this.fristInit) { this.fristInit = false for (let i of indexUrl.config.script) { let script = document.createElement('script') let text1 = i.content script.innerHTML = text1 //下面为必要操作否则将不能使用script标签中的内容 script.onload = script.onreadystatechange = function() {} document.head.appendChild(script) } } } }, selectbtn(item, index, ad, type) { //点击筛选 if (type == 'category') { if (ad) { this.cate_id = [item.id] } else { this.cate_id = [] } } if (type == 'hall') { if (ad) { this.hall_id = [item.id] } else { this.hall_id = [] } } if (type == 'area') { if (ad) { this.area_id = [item.id] } else { this.area_id = [] } } this.init(1) }, colectbtn(item, index) { // this.formData = sessionStorage.setItem('mylist',JSON.stringify(this.formData)) this.formData[index].show = !this.formData[index].show if (this.formData[index].show) { this.mylist.push(this.formData[index]) } else { for (let i = 0; i < this.mylist.length; i++) { if (item.id == this.mylist[i].id) { this.mylist.splice(i, 1) break } } } sessionStorage.setItem('mylist', JSON.stringify(this.mylist)) this.key++ }, mycollect() { sessionStorage.setItem('mylist', JSON.stringify(this.mylist)) // sessionStorage.setItem('mylist',JSON.stringify(this.mylist)) sessionStorage.setItem('optionlist', JSON.stringify({ category: this.category, hall: this.hall, area: this.area, })) sessionStorage.setItem('banner', this.banner) sessionStorage.setItem('bottombanner', this.bottombanner) window.open('./mycollect.html'); // window.location.href='./mycollect.html' }, btnclick(n) { //展开筛选 this.select[n] = !this.select[n] this.keyindex++ }, sizechange(res) { //改变每页数量 this.formPage.per_page = res this.init(1) }, mousedown(item) { this.popitem = item this.popshow = true }, handleClose() { this.popshow = false } } }) </script> </html>

CINXE.COM

ExhibitorDirectory