<template> <view class="page"> <u-navbar title="客户服务" :border-bottom="false" :background="bgc" title-color='#fff' title-size='36' height='45'></u-navbar> <image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/uWCOkHl7HYqjZUVUOzxy" mode=""></image> <view class="tit"> Hi 您好,我们为您提供更多帮助哦~ </view> <view class="qscard"> <view class="card_top"> <view class="li" v-for="(item,index) in classlist" :key="index" @click="changeitx(item,index)"> <view class="txt"> {{item.classifyName}} </view> <view class="bot_bor" v-if="tabindex==index"></view> <view class="bot_bor" v-if="tabindex!=index" style="background: #fff;"></view> </view> </view> <view class="qs_li" v-for="(item,index) in wordlist" :key="index" @click="topage(item)"> <view class="qs_li_txt"> {{item.title}} </view> <view class="iconfont icon-xiangyou1"></view> </view> </view> <view class="btn" @click="callPhone"> <image src="https://lxnapi.ccttiot.com/bike/img/static/uEM1RpP3J0K51qTjtnA5" mode=""></image> 电话咨询:{{areaInfo.servicePhone}} </view> </view> </template> <script> export default { data() { return { bgc: { backgroundColor: "#4C97E7", }, areaInfo: {}, tabindex:0, classlist:[], wordlist:[] } }, onShow() { this.getarea() this.getclass() }, methods: { getuserInfo(){ uni.showLoading({ title:'加载中' }) this.$u.get("/getAppInfo").then((res) => { if (res.code == 200) { uni.hideLoading() this.getarea() // if( res.user.role==2){ // uni.navigateTo({ // url:'/page_fix/fix_index' // }) // } } else { let areaId=uni.getStorageSync('areaId'); if(areaId){ let that =this wx.login({ success(res) { if (res.code) { console.log('登录!', res); let data = { wxOpenId: res.code, }; let areaId = uni.getStorageSync('areaId'); that.$u.post('/loginByopenid?jsCode=' + res.code + '&areaId=' + areaId).then( res => { uni.hideLoading(); if (res.code == 200) { uni.setStorageSync('token', res.token); that.getuserInfo() } else if (res.code == 501) { uni.showToast({ title: res.msg, icon: 'none', duration: 2000 }); } else { // console.log("老用户登录",res.data) uni.redirectTo({ url: '/pages/login/login' }) } }); } }, }); }else{ uni.showToast({ title: '请授权位置信息后再尝试', icon: 'none', duration: 4000 }); } } }); }, getarea() { let id = uni.getStorageSync('areaId'); this.$u.get("/app/area/" + id).then((res) => { if (res.code == 200) { this.areaInfo = res.data } else { // uni.showToast({ // title: res.msg, // icon: 'none', // duration: 2000 // }); } }); }, topage(item) { // 编码 title 和 content const encodedTitle = encodeURIComponent(item.title); const encodedContent = encodeURIComponent(JSON.stringify(item.content)); // 跳转到新页面并传递编码后的 title 和 content uni.navigateTo({ url: `/page_user/word?title=${encodedTitle}&content=${encodedContent}` }); }, changeitx(itme,index){ this.tabindex=index this.getword(itme.classifyId) }, getclass() { this.$u.get("/app/classify/list?deptId=101&parentId=111" ).then((res) => { if (res.code == 200) { this.classlist = res.data let id =this.classlist[0].classifyId this.getword(id) } else { // uni.showToast({ // title: res.msg, // icon: 'none', // duration: 2000 // }); } }); }, getword(id) { this.$u.get("/app/article/list??classifyId="+id ).then((res) => { if (res.code == 200) { this.wordlist = res.rows } else { // uni.showToast({ // title: res.msg, // icon: 'none', // duration: 2000 // }); } }); }, callPhone(){ uni.makePhoneCall({ phoneNumber:this.areaInfo.servicePhone }) } } } </script> <style lang="scss"> page { background-color: #fff; } .page { width: 750rpx; .backimg{ position: fixed; width: 750rpx; height: 384rpx; z-index: -1; } .tit{ margin-top: 56rpx; margin-left: 56rpx; font-weight: 400; font-size: 30rpx; color: #FFFFFF; } .qscard{ width: 680rpx; margin: 40rpx auto ; background: #FFFFFF; border-radius: 40rpx; padding: 28rpx 30rpx; box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1); .card_top{ display: flex; align-items: center; flex-wrap: nowrap; justify-content: space-around; .li{ width: 112rpx; display: flex; flex-wrap: wrap; justify-content: center; .txt{ font-weight: 500; font-size: 28rpx; color: #3D3D3D; } .bot_bor{ margin-top: 16rpx; width: 66rpx; height: 6rpx; background: #4C97E7; border-radius: 3rpx 3rpx 3rpx 3rpx; } } } .qs_li{ margin-top: 10rpx; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; border-bottom: 2rpx solid #D8D8D8; padding-bottom: 26rpx; .qs_li_txt{ font-weight: 400; font-size: 28rpx; color: #3D3D3D; } .icon-xiangyou1{ font-size: 32rpx; color: #3D3D3D; } } } .btn { position: fixed; left: 36rpx; bottom: 44rpx; display: flex; align-items: center; justify-content: center; width: 680rpx; height: 118rpx; background: #4C97E7; border-radius: 59rpx 59rpx 59rpx 59rpx; image { margin-right: 18rpx; width: 34.5rpx; height: 33rpx; } font-weight: 600; font-size: 40rpx; color: #FFFFFF; } } </style>