hengmei-one/pages/tabbar/my/my.vue

417 lines
15 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view>
<!-- 状态栏 -->
<navigator open-type="navigateBack"/>
<status-nav :backgroudColor="publicColor" :tabcolor="publicColor" :statusTitle="true" :statusBack="false"></status-nav>
<view class="mar-zy32 posir pad-x260" :style="{paddingTop:statusHNH+'px'}">
<view class="bacf radius20 posir gao" style="box-shadow: 0px 16rpx 30rpx rgba(141, 141, 141, 0.26);">
<view class="posia" :style="{top:`-${gaoh*0.4}px`,height:gaoh+'px',background:publicColor}" style="left: -32rpx;right: -32rpx;z-index: -1;"></view>
<view class="disjbac">
<view class="disac">
<!-- 头像 -->
<image class="mar-sx30" :src="userInfo.headimgurl || ''" style="width:120rpx;height: 120rpx;border-radius: 100%;margin-left: 15rpx;z-index: 1;" mode="aspectFill"></image>
<view class="mar-z30">
<!-- 昵称 -->
<view class="fon36 bold">{{userInfo.nickname || ''}}</view>
<view class="disac mar-s10" v-if="userInfo.mobile!==''">
<image src="/static/public/phone.png" style="width: 14rpx;height: 20rpx;" mode=""></image>
<!-- 手机号 -->
<view class="fon24 col3 mar-z10">{{userInfo.mobile}}</view>
</view>
</view>
</view>
<view class="mar-y25 disac">
<!-- 二维码 -->
<image @tap="tuneUpqr" src="/static/public/eqr.png" style="width: 43rpx;height: 43rpx;z-index: 1;" mode=""></image>
<!-- 前进键 -->
<view @tap="goNodifyData" style="width: 50rpx;position: relative;z-index: 1;justify-content: flex-end;" class="disac">
<image class="" src="/static/public/nextM.png" style="width: 35rpx;height: 35rpx;z-index: 1;" mode="aspectFill"></image>
</view>
</view>
</view>
<view class="disja posir" style="z-index: 1;">
<view @tap="choosesjf(indext)" class="disac fc flexs" style="width: 33%;" v-for="(itemt,indext) in tongList" :key="indext">
<view class="fon28 bold mar-sx20 clips1">{{itemt.num}}<text v-if="indext==2">人</text></view>
<view class="fon28 mar-x25">{{itemt.title}}</view>
</view>
</view>
<image class="posia" style="top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;z-index: 0;" src="/static/public/mybt.png" mode=""></image>
</view>
<!-- 员工功能 v-if="userInfo.is_staff && yuanList.length!=0" -->
<view v-if="userInfo.is_staff==1" class="bacf radius20 mar-s20 pad20">
<view class="mar-x30 fon28 bold col3">员工功能</view>
<view class="disja yuan-box">
<view @tap="chooseYitem(indexy)" style="display: flex;justify-content: center;align-items: center;position: relative;" v-for="(itemy,indexy) in yuanList" :key="indexy">
<view class="disac fc">
<image :src="itemy.src" style="width: 54rpx;height: 54rpx;" mode="aspectFill"></image>
<view class="fon28 mar-s20 mar-x10">{{itemy.title}}</view>
</view>
<view v-if="yuanList.length>=3" :style="{right:yuanList.length==3?'-60rpx':'-30rpx'}" style="position: absolute;">
<view v-if="indexy<(yuanList.length-1)" style="height: 58rpx;width: 2rpx;background: #E6E6E6;"></view>
</view>
</view>
</view>
</view>
<!-- 广告 -->
<image @tap="goPage" class="width100 radius20 mar-sx20" :src="guangImg" style="height: 160rpx;" mode="aspectFill"></image>
<!-- 功能列表 -->
<view class="bacf radius20 pad-zy30">
<view @tap="chooseItem(indexl)" class="disjbac pad-sx30 borbot" v-for="(iteml,indexl) in toolsList" :key="indexl">
<view class="icon-box disac">
<image class="mar-y20" :src="iteml.src" mode=""></image>
<view class="fon26">{{iteml.title}}</view>
</view>
<view class="disac">
<view v-if="iteml.num!='' && iteml.num!=0" style="width: 40rpx;height: 40rpx;border-radius: 100%;background-color: #F96969;font-size: 18rpx;text-align: center;line-height: 40rpx;color: #FFFFFF;">{{iteml.num}}</view>
<image class="mar-z10" src="/static/public/nexth.png" style="width: 18rpx;height: 18rpx;" mode=""></image>
</view>
</view>
</view>
</view>
<!-- 我的二维码弹框 -->
<view v-if="isQrcode" class="posAll disjcac">
<view>
<view class="bacf radius20" style="margin: 0 130rpx;">
<view class="fon28 col3 tc pad-s40">我的二维码</view>
<image :src="myqr" style="width: 325rpx;height: 325rpx;margin: 30rpx 86rpx 68rpx 86rpx;" mode="aspectFill"></image>
</view>
<view class="disjcac">
<image @tap="closeqr" class="mar-s50" src="/static/public/qrcodec.png" style="width: 96rpx;height: 96rpx;border-radius: 100%;" mode="aspectFill"></image>
</view>
</view>
</view>
<!-- 底部tab -->
<foot-tab :titleList="titleList" :imgList="imgList" :newcurrent='4'></foot-tab>
<view v-if="isQian" style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);">
<view style="padding: 20rpx 40rpx;background-color: rgba(0,0,0,.6);color: #FFFFFF;border-radius: 6rpx;">签到成功</view>
</view>
<!-- 弹框授权 -->
<empower :vision="vision"></empower>
<!-- -->
<auth-phone v-if="isShowP"></auth-phone>
</view>
</template>
<script>
import {base64ToPath} from '@/jsFile/base64-src.js';
import {checkBanner} from '@/jsFile/publicAPI.js';
export default {
data() {
return {
statusHNH:uni.getStorageSync('statusHNH'),
publicColor:uni.getStorageSync('publicColor'),
tongList:[
{num:'0',title:'文章收藏'},
{num:'0',title:'积分'},
{num:'0',title:'我的分享'}
],
yuanList:[], //'customer-list','footmarks','scan'
zanCyuanList:[
{src:'/static/public/keh.png',title:'客户列表',rule:'customer-list'},
{src:'/static/public/zu.png',title:'用户足迹',rule:'footmarks'},
{src:'/static/public/scan.png',title:'扫码签到',rule:'scan'},
{src:'/static/public/customer-check.png',title:'客服查询',rule:'customer-list'},
],
toolsList:[
{src:'/static/public/zyuy.png',title:'自助预约',num:''},
{src:'/static/public/hb.png',title:'个人海报',num:''},
{src:'/static/public/wsc.png',title:'文章收藏',num:''},
{src:'/static/public/fx.png',title:'分享中心',num:''},
{src:'/static/public/message.png',title:'消息通知',num:''},
{src:'/static/public/ts.png',title:'投诉与建议',num:''},
{src:'/static/public/aboutus.png',title:'关于我们',num:''},
],
isQrcode:false,//是否显示我的二维码
userInfo:{},//用户信息
gaoh:uni.getStorageSync('gao'),
myqr:'/static/public/qrcode.png',
is_worker:'',//是否为职工账号0否客户 1是
is_doctor:'',//是否为医生0否1是
is_servicer:'',//是否为客服0否1是
is_staff:'',//是否为普通员工0否1是
titleList:[],
imgList:[],
isQian:false,
bannerList:[],
guangImg:'',
isAuth:'',
guanggao:'',
timer:null,
nonce_str:'',
vision:false,
isShowP:false,
}
},
onUnload: function() {
//相当于监听返回按钮
let pages = getCurrentPages();
// console.log('pages:',pages);
},
onShow() {
uni.removeStorageSync('uinfo')//清空用户缓存信息
this.$toolAll.tools.isLogin()
this.checkInfo()
uni.removeStorageSync('shareAll')//清空分享中心里的统计信息
this.$requst.post('index/mini-program-setting').then(res=>{
// log('数据:',res);
if(res.code==0){
if(res.data.length!=0){
if(res.data.footBar.length!=0){//底部导航
res.data.footBar.forEach(item=>{
let newName = item.name
let newObj = {
iconPath:this.$http + item.icon[0],
selectedIconPath:this.$http + item.icon[1],
}
if(item.key=="home"){
this.imgList[0] = newObj
this.titleList[0] = newName
}
if(item.key=="category"){
this.imgList[1] = newObj
this.titleList[1] = newName
}
if(item.key=="service"){
this.imgList[2] = newObj
this.titleList[2] = newName
}
if(item.key=="shop"){
this.imgList[3] = newObj
this.titleList[3] = newName
}
if(item.key=="my"){
this.imgList[4] = newObj
this.titleList[4] = newName
}
})
uni.setStorageSync('footTitle',this.titleList)
uni.setStorageSync('footimg',this.imgList)
this.titleList = uni.getStorageSync('footTitle')
this.imgList = uni.getStorageSync('footimg')
}
}
}
},error=>{})
},
onLoad(options) {
if(uni.getStorageSync('is_active')!=1){this.vision = true;}
if(options.invite_code!='' && options.invite_code!=undefined){
this.loginEv(options.invite_code);
} else if(options.source_code!='' && options.source_code!=undefined){
this.loginEv('',options.source_code,options.channel);
}
if(uni.getStorageSync('gao')==''){
const query = wx.createSelectorQuery()
query.select('.gao').boundingClientRect((rect) => {
uni.setStorageSync('gao',rect.height)
this.gaoh = rect.height
}).exec()
}
this.checkSwi()
},
methods: {
loginEv(invite_code='',source='',channel=''){
uni.login({
provider: 'weixin',
success: (res)=> {
if (res.code) {
var params = {
code:res.code,
invite_code:invite_code,//用户邀请码
source_code:source,
channel:channel
}
this.$requst.post('user/login',params).then(res => {
if(res.data.token!=''){
if(res.data.is_active==0) {
this.vision = true;
}
}
},error => {})
}
},
});
},
buttonH(e){//授权成功
if(e) {
this.vision = false;
this.isShowP = true;
}
},
tuneUpqr(){//调起二维码弹框
this.isQrcode = true;
this.checkGM();
this.timer = setInterval(()=>{
this.$requst.post('user/check-scan',{nonce_str:this.nonce_str}).then(res=>{
if(res.code==0){
if(res.data.result==1){
this.$toolAll.tools.showToast('已签到');
this.isQrcode = false;
clearInterval(this.timer);
}
}
})
},1000)
},
closeqr(){
this.isQrcode = false;
clearInterval(this.timer);
},
goPage(){
uni.navigateTo({
url:this.guanggao
})
},
checkSwi(){
checkBanner({position:'personal-center-banner'}).then(res=>{
// console.log('res',res);
if(res.code==0){
if(res.data.length!=0){
this.guangImg = this.$http + res.data[0].src
this.guanggao = res.data[0].url
// res.data.forEach(item=>{
// let isVideo = false
// if(item.type!='img') isVideo = true
// let banObj = {
// imgSrc:this.$http + item.src,
// url:item.url,
// isVideo:isVideo,
// poster:this.$http + item.src,
// }
// this.bannerList.push(banObj)
// })
}
}
})
},
checkGM(){//查询个人二维码事件
this.$requst.post('user/personal-qr').then(res=>{
// console.log('个人二维码:',res);
if(res.code==0){
this.nonce_str = res.data.nonce_str;
console.log(this.nonce_str);
base64ToPath(res.data.qr).then(path => {
this.myqr = path
uni.setStorageSync('imgSrc',path)
}).catch(error => {})
}
},error=>{})
},
checkInfo(){
this.$requst.post('user/info').then(res=>{
// console.log('用户信息:',res);
if(res.code==0 && res.data.length!=0) {
this.userInfo = res.data;
this.tongList[1].num = res.data.score//个人积分
this.tongList[0].num = res.data.collects//收藏总数
this.tongList[2].num = res.data.share_users.total//分享人总数
this.toolsList[4].num = res.data.unread_messages//分享人总数
this.is_worker = res.data.is_worker//是否为职工账号0否客户 1是
this.is_doctor = res.data.is_doctor//是否为医生0否1是
this.is_servicer = res.data.is_servicer//是否为客服0否1是
this.is_staff = res.data.is_staff//是否为普通员工0否1是
let num = res.data.rules.indexOf('customer-allot');
if(num!=-1){
uni.setStorageSync('customer-allot',true);
} else uni.setStorageSync('customer-allot','');
if(res.data.is_staff==1){
if(this.toolsList.length!=8){
this.toolsList.push({src:'/static/public/aboutus.png',title:'客服二维码',num:''})
}
}
uni.setStorageSync('shareAll',res.data)
if(res.data.rules.length!=0){
let result = this.zanCyuanList.filter(item => res.data.rules.some(itemt => itemt===item.rule))
this.yuanList = result
uni.setStorageSync('rules',res.data.rules)
} else this.yuanList = []
}
},error=>{})
},
chooseItem(index){//列表事件
// console.log('当前选项:',this.toolsList[index].title);
let newUrl = ''
if(index==0) newUrl = '/pagesA/makeAnPppointment/makeAnPppointment'
if(index==1) newUrl = '/pagesB/personalPoster/personalPoster'
if(index==2) newUrl = '/pagesB/myCollection/myCollection'
if(index==3) newUrl = '/pagesB/sharingCenter/sharingCenter'
if(index==4) newUrl = '/pagesB/messagecenter/messagecenter'
if(index==5) newUrl = '/pagesA/suggestions/suggestions'
if(index==6) newUrl = '/pagesB/aboutUs/aboutUs'
if(index==7) newUrl = '/pagesB/customer/customer'
uni.navigateTo({
url:newUrl
})
},
chooseYitem(index){//员工功能事件
// console.log('当前选项:',this.yuanList[index].title);
if(this.yuanList[index].title=='客户列表') {
uni.navigateTo({
url:'/pagesB/customerList/customerList'
})
}
if(this.yuanList[index].title=='用户足迹') {
uni.navigateTo({
url:'/pagesB/userFootprint/userFootprint'
})
}
if(this.yuanList[index].title=='扫码签到') {
wx.scanCode({ // 微信扫码 调起客户端扫码界面进行扫码
complete: (res) => {}, //接口调用结束的回调函数(调用成功、失败都会执行)
fail: (res) => {}, //接口调用失败的回调函数
onlyFromCamera: false, //是否只能从相机扫码,不允许从相册选择图片,这里是只允许相机扫码
scanType: ['qrCode'], // scanType扫码类型 : 二维码
success: (rt) => { // 接口调用成功的回调函数
let uc = JSON.parse(rt.result).user_coding;
let ns = JSON.parse(rt.result).nonce_str;//随机码
console.log(rt);
this.$requst.post('user/sign-in',{user_coding:uc,nonce_str:ns}).then(res=>{
// console.log('执行扫码事件:',res);
if(res.code==0){
this.isQian = true
setTimeout(()=>{
this.isQian = false
},2000)
}
},error=>{})
}
})
}
if( this.yuanList[index].title=='客服查询') {
uni.navigateTo({
url:'/pagesB/customerCheck/customerCheck'
})
}
},
choosesjf(index){//文章收藏事件、积分、我的分享
// console.log('当前选项:',this.tongList[index].title);
switch (index){
case 0:
uni.navigateTo({//我的收藏
url:'/pagesB/myCollection/myCollection'
})
break;
case 1:
break;
case 2:
uni.navigateTo({//客户列表
url:'/pagesB/mysharer/mysharer'
})
break;
}
},
goNodifyData(){//去修改资料页面
uni.setStorageSync('uinfo',this.userInfo)
uni.navigateTo({
url:'/pagesA/nodifyData/nodifyData'
})
},
}
}
</script>
<style>
</style>