hengmei-two/pages/tabbar/my/staffDuan.vue

604 lines
23 KiB
Vue
Raw 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>
<!-- 状态栏 -->
<status-nav :backgroudColor="publicColor" :tabcolor="publicColor" :statusTitle="true" :statusBack="false"></status-nav>
<image src="/static/public/staff-head.png" class="blue-img"></image>
<view class="mar-zy32 posir pad-x260" :style="{paddingTop:statusHNH+'px'}">
<view class="radius20 posir gao">
<view class="posia" :style="{top:`-${gaoh*0.4}px`,height:gaoh+'px'}"></view>
<view class="disjbac">
<view class="disac colf">
<!-- 头像 -->
<image @tap="openXiao" class="mar-sx30" :src="userInfo.headimgurl || ''" mode="aspectFill"></image>
<view class="mar-z30">
<!-- 昵称 -->
<view class="disac">
<view class="fon36 bold clips1" style="max-width: 260rpx;">{{userInfo.nickname || ''}}</view>
<view class="gao-name">{{userInfo.level.name}}</view>
</view>
<view class="disac mar-s10" v-if="userPhone!==''">
<image src="/static/public/phone-02.png" class="gao-phone" mode=""></image>
<!-- 手机号 -->
<view class="fon24 mar-z10">{{userPhone}}</view>
</view>
</view>
</view>
<view class="mar-y25 disac">
<!-- 二维码 -->
<image @tap="tuneUpqr" src="/static/public/staff-qro.png" class="gao-m" mode=""></image>
<!-- 前进键 -->
<view @tap="goNodifyData" class="disac gao-next-box">
<!-- <image class="" src="/static/public/next-white.png" mode="aspectFill"></image> -->
<image class="" src="/static/public/set-icon.png" mode="aspectFill"></image>
</view>
</view>
</view>
<view class="disjbac posir mar-s40 fon24 pad-zy50" style="z-index: 1;color: #F8CE59;">
<view>
<view class="disac"><span class="bold mar-y20">VIP</span>{{userInfo.level.name}}</view>
</view>
<navigator url="/pagesA/member/member" hover-class="none">
<view class="disac">
<view>更多权益</view>
<image src="/static/public/next-yellow.png" class="white-next" mode=""></image>
</view>
</navigator>
</view>
</view>
<view class="disja posir" style="z-index: 1;margin-top: 75rpx;">
<view @tap="chooseone(indext)" class="disac fc flexs width25" v-for="(itemt,indext) in tongList" :key="indext">
<view class="fon28 bold mar-sx20 clips1">{{itemt.num}}<text v-if="indext==2">天</text><text v-if="indext==3">人</text></view>
<view class="fon28 mar-x25">{{itemt.title}}</view>
</view>
</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)" v-for="(itemy,indexy) in yuanList" :key="indexy">
<view class="disac fc">
<image :src="itemy.src" mode="aspectFill"></image>
<view class="fon28 mar-s20 mar-x10">{{itemy.title}}</view>
</view>
<block v-if="indexy<yuanList.length-1">
<view class="xian-right"></view>
</block>
</view>
</view>
</view>
<!-- 我的订单 -->
<view class="bacf radius20 mar-s20 pad20">
<view class="mar-x30 fon28 col3 disjbac">
<view>我的订单</view>
<navigator url="/pagesA/myOrder/myOrder?index=0" hover-class="none">
<view class="disac">
<view class="fon24 col9">全部</view>
<image src="/static/public/nextM.png" class="white-next" mode=""></image>
</view>
</navigator>
</view>
<view class="disja fon28 col3">
<view @tap="chooseOrderStatus(indexo)" v-for="(itemo,indexo) in myOrderList" :key="indexo">
<view class="disac fc posir">
<image :src="itemo.src" class="icon-img" mode="aspectFill"></image>
<view class="mar-s20 mar-x10">{{itemo.title}}</view>
<view class="posia red-num" style="right: 0;top: 0;" v-if="itemo.num!=0">{{itemo.num}}</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">
<view class="disjbac fon28 col3 fw">
<view @tap="goPageNew(indexm)" v-for="(itemm,indexm) in moneyList" :key="indexm" class="mar-s20 mar-x20 width25">
<view class="disac fc">
<image :src="itemm.src" class="icon-img" mode="aspectFill"></image>
<view class="mar-s20 mar-x10">{{itemm.title}}</view>
</view>
</view>
</view>
</view>
<!-- 功能列表② -->
<view class="bacf radius20 mar-s20">
<view class="disac fon28 col3 fw">
<view @tap="goPageTwo(indexf)" v-for="(itemf,indexf) in toolsList" :key="indexf" class="mar-s20 mar-x20 width25">
<view class="disac fc posir">
<image :src="itemf.src" class="icon-img" mode="aspectFill"></image>
<view class="mar-s20 mar-x10">{{itemf.title}}</view>
<view v-if="itemf.title=='消息通知' && itemf.num!=0" class="posia red-num">{{itemf.num}}</view>
</view>
</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" class="person-m" mode="aspectFill"></image>
</view>
<view class="disjcac">
<image @tap="closeqr" class="mar-s50 close-m" src="/static/public/qrcodec.png" mode="aspectFill"></image>
</view>
</view>
</view>
<!-- 专属客服 -->
<view v-if="zCustomer" class="posAll disjcac">
<view style="width: 80%;">
<view class="bacf radius20 pad-sx40" style="">
<view class="fon32 bold col3 tc pad-x40" v-if="customerInfo.service_name!=''">我的专属客服</view>
<view class="fon28 col3 disjb mar20" v-if="customerInfo.service_name!=''">客服名称:{{customerInfo.service_name}}</view>
<view class="fon28 col3 disjb mar20" v-if="customerInfo.service_phone!=''">客服手机号:{{customerInfo.service_phone}}<span @tap="countCustomer(customerInfo.service_phone)" class="pcol">联系客服</span></view>
<view class="fon28 col3 disjb mar20" v-if="customerInfo.service_wechat!=''">客服微信号:{{customerInfo.service_wechat}}<span @tap="copyWechat" class="pcol">复制</span></view>
<view style="display: flex;align-items: center;flex-direction: column;width: 100%;">
<image v-if="customerImg!=''" :src="customerImg" class="person-m" style="margin-bottom: 40rpx;" mode="aspectFill"></image>
<view class="fon28 colf tc radius10" @tap="saveImg" style="width: 200rpx; padding: 16rpx;background-color: #38CE51;margin: 0 auto;">保存</view>
</view>
<view class="fon28 col9 tc pad-s40" v-if="customerInfo.service_phone==''">暂无专属客服</view>
</view>
<view class="disjcac">
<image @tap="closeCustomer" class="mar-s50 close-m" src="/static/public/qrcodec.png" mode="aspectFill"></image>
</view>
</view>
</view>
<!-- 底部tab -->
<foot-tab :titleList="titleList" :imgList="imgList" :newcurrent='4'></foot-tab>
<!-- 签到弹框 -->
<view v-if="isQian" class="sigin-box">
<view>{{contentVal}}</view>
</view>
<!-- 用户信息授权手机号授权 -->
<auth-userInfo-mobileInfo></auth-userInfo-mobileInfo>
</view>
</template>
<script>
import {base64ToPath} from '@/jsFile/base64-src.js';
import {checkBanner,themeEv} from '@/jsFile/publicAPI.js';
export default {
data() {
return {
statusHNH:uni.getSystemInfoSync().statusBarHeight + 54,
tongList:[
{num:'0',title:'我的积分'},
{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'},
{src:'/static/public/scan.png',title:'核销扫码',rule:'check-scan'},
],
myOrderList:[//我的订单状态
{src:'/static/public/dai-fu60.png',title:'待付款',num:0},
{src:'/static/public/dai-fa60.png',title:'待发货',num:0},
{src:'/static/public/dai-shou60.png',title:'待收货',num:0},
{src:'/static/public/wan-60.png',title:'已完成',num:0},
],
moneyList:[
{src:'/static/public/integral60.png',title:'积分商城'},
{src:'/static/public/address60.png',title:'地址管理'},
{src:'/static/public/day60.png',title:'日程提醒'},
{src:'/static/public/ren60.png',title:'活动任务'},
{src:'/static/public/quan60.png',title:'优惠券'},
{src:'/static/public/kong60.png',title:'孔雀币'},
{src:'/static/public/scor60.png',title:'积分管理'},
{src:'/static/public/signIn.png',title:'积分签到'},
],
toolsList:[
{src:'/static/public/staff-yue60.png',title:'自助预约',num:''},
{src:'/static/public/staff-hai60.png',title:'个人海报',num:''},
{src:'/static/public/staff-collection60.png',title:'收藏',num:''},
{src:'/static/public/staff-share.png',title:'分享中心',num:''},
{src:'/static/public/staff-msg60.png',title:'消息通知',num:''},
{src:'/static/public/diary.png',title:'我的日记',num:''},
{src:'/static/public/staff-about60.png',title:'关于我们',num:''},
{src:'/static/public/staff-tou60.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是
isQian:false,
bannerList:[],
guangImg:'',
guanggao:'',
userToken:'',
contentVal:'',//扫码后的提示内容
userPhone:'',
timer:null,
nonce_str:'',
zCustomer:false,
customerImg:'',
customerInfo:'',
times:0,
openSettingBtnHidden: true,//是否授权
}
},
onUnload: function() {
//相当于监听返回按钮
let pages = getCurrentPages();
// console.log('pages:',pages);
},
computed: {
// 底部标题
titleList() {
return this.$store.state.titleList
},
// 底部图标
imgList() {
return this.$store.state.imgList
},
// 主题颜色
publicColor() {
return this.$store.state.publicColor
}
},
onShow() {
uni.removeStorageSync('uinfo')//清空用户缓存信息
this.$toolAll.tools.isLogin();
uni.removeStorageSync('shareAll')//清空分享中心里的统计信息
if(uni.getStorageSync('phone_active')!=0 && uni.getStorageSync('is_active')!=0){
this.checkInfo();
}
},
onUnload() {
// 关闭我的二维码弹框
this.closeqr();
},
onLoad(options) {
uni.setStorageSync('channel',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: {
countCustomer(phone){//拨打电话
const res = uni.getSystemInfoSync();
if(res.platform=='ios'){
uni.makePhoneCall({
phoneNumber:phone,
success: () => {},
fail: () => {}
})
} else {
uni.showActionSheet({
itemList:[phone,'呼叫'],
itemColor:'#3875F6',
success: (res) => {
if(res.tapIndex==1){
uni.makePhoneCall({
phoneNumber:phone
})
}
}
})
}
},
copyWechat(){//复制微信号
if(this.times==0){
this.times++;
this.$toolAll.tools.clickCopy(this.customerInfo.service_wechat);
this.$toolAll.tools.showToast('复制成功');
setTimeout(()=>{
this.times = 0;
},2000)
}
},
saveImg(e){//保存二维码
//获取相册授权
uni.getSetting({
success:(res)=> {
if (!res.authSetting['scope.writePhotosAlbum']) {
uni.authorize({
scope: 'scope.writePhotosAlbum',
success:()=> {
//这里是用户同意授权后的回调
this.saveImgToLocal();
},
fail:()=> {//这里是用户拒绝授权后的回调
this.openSettingBtnHidden=false
}
})
} else {//用户已经授权过了
this.saveImgToLocal();
}
}
})
},
saveImgToLocal(){//保存图片
this.$toolAll.tools.showToast('正在保存','loading');
uni.downloadFile({
url: this.customerImg,//图片地址
success: (res) =>{
if (res.statusCode === 200){
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: ()=> {
this.$toolAll.tools.showToast('保存成功');
},
fail: ()=> {
this.$toolAll.tools.showToast('保存失败');
}
});
}
}
})
},
tuneUpqr(){//调起二维码弹框
this.isQrcode = true;
clearInterval(this.timer);
this.myqr = '';
this.nonce_str='';
this.checkGM();
this.timer = setInterval(()=>{
if(this.nonce_str!=''){
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);
}
}
})
}
},3000)
setTimeout(()=>{
this.isQrcode = false;
clearInterval(this.timer);
},60000)
},
// 关闭我的二维码弹框
closeqr(){
this.isQrcode = false;
clearInterval(this.timer);
},
chooseone(index){
if(index==2){uni.navigateTo({url:'/pagesA/signIn/signIn'})}
if(index==3){uni.navigateTo({url:'/pagesB/mysharer/mysharer'})}
},
goPageNew(index){
if(index==0){uni.navigateTo({url:'/pagesA/pointsMall/pointsMall'})}
if(index==1){uni.navigateTo({url:'/pagesA/myAddress/myAddress'})}
if(index==2){uni.navigateTo({url:'/pagesB/messagecenter/messagecenter?index=true&comeNum=0'})}
if(index==3){uni.navigateTo({url:'/pagesA/activityTask/activityTask'})}
if(index==4){uni.navigateTo({url:'/pagesA/coupon/coupon'})}
if(index==5){uni.navigateTo({url:'/pagesA/peacockCoin/peacockCoin'})}
if(index==6){uni.navigateTo({url:'/pagesA/integralManage/integralManage'})}
if(index==7){uni.navigateTo({url:'/pagesA/signIn/signIn'})}
},
goPageTwo(index){//自助预约、个人海报、收藏、分享中心、消息通知、我的日记、投诉与建议、关于我们、专属客服
let newUrl = ''
if(this.toolsList[index].title=='自助预约') newUrl = '/pagesA/makeAnPppointment/makeAnPppointment'
if(this.toolsList[index].title=='个人海报') newUrl = '/pagesB/personalPoster/personalPoster'
if(this.toolsList[index].title=='收藏') newUrl = '/pagesB/myCollection/myCollection'
if(this.toolsList[index].title=='分享中心') newUrl = '/pagesB/sharingCenter/sharingCenter'
if(this.toolsList[index].title=='消息通知') newUrl = '/pagesB/messagecenter/messagecenter?comeNum=0'
if(this.toolsList[index].title=='我的日记') newUrl = '/pagesA/my-diary/my-diary'
if(this.toolsList[index].title=='关于我们') newUrl = '/pagesB/aboutUs/aboutUs'
if(this.toolsList[index].title=='投诉与建议') newUrl = '/pagesA/suggestions/suggestions'
if(this.toolsList[index].title=='专属客服'){
this.$requst.post('user/my-service').then(res=>{
if(res.code==0){
this.customerInfo = res.data;
if(this.customerInfo.service_qr!=''){
this.customerImg = this.$http + this.customerInfo.service_qr;
}
this.zCustomer = true;
}
})
} else {
uni.navigateTo({
url:newUrl
})
}
},
closeCustomer(){
this.zCustomer = false;
},
chooseOrderStatus(index){
let statusIndex = ''
if(index==0) statusIndex = 1;
if(index==1) statusIndex = 2;
if(index==2) statusIndex = 4;
if(index==3) statusIndex = 5;
uni.navigateTo({
url:'/pagesA/myOrder/myOrder?index='+statusIndex
})
},
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(){//查询个人二维码事件
uni.showToast({
title:'正在生成二维码',
icon:'none',
duration:100000
})
this.$requst.post('user/personal-qr').then(res=>{
// console.log('个人二维码:',res);
if(res.code==0){
this.nonce_str = res.data.nonce_str;
base64ToPath(res.data.qr).then(path => {
this.myqr = path
uni.hideToast();
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;
console.log(this.userInfo,513);
uni.setStorageSync('userId',res.data.id);
uni.setStorageSync('phone',this.userInfo.mobile);
this.userPhone = this.$toolAll.tools.hideMPhone(this.userInfo.mobile)
this.tongList[0].num = res.data.score;//个人积分
this.tongList[1].num = res.data.coin;//个人孔雀币
this.tongList[2].num = res.data.continuity_sign;//个人连续签到
this.tongList[3].num = res.data.share_users.total;//分享人总数
this.toolsList[4].num = res.data.unread_messages;//消息总数
this.toolsList[5].num = res.data.unread_messages;//消息总数
this.myOrderList[0].num = res.data.order_count.waiting;//待支付总数
this.myOrderList[1].num = res.data.order_count.paid;//待发货总数
this.myOrderList[2].num = res.data.order_count.shipped;//待收货总数
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是
if(res.data.customer_service!=0 && this.toolsList.length==8){
this.toolsList.unshift({src:'/static/public/customer-check.png',title:'专属客服',num:''})
}
uni.setStorageSync('shareAll',res.data)
if(res.data.rules.length!=0){
// 判断是否有分配客服的权限
let isFen = res.data.rules.indexOf('customer-allot');
if(isFen!=-1){
uni.setStorageSync('isFen',true);
} else {
uni.setStorageSync('isFen',false);
}
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=>{})
},
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) => { // 接口调用成功的回调函数
if(rt.result.slice(0,1)=='{'){
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;
this.contentVal = "签到成功";
setTimeout(()=>{
this.isQian = false
},2000)
}
},error=>{})
} else this.$toolAll.tools.showToast('请出示正确的码');
}
})
}
if(this.yuanList[index].title=='核销扫码') {
wx.scanCode({ // 微信扫码 调起客户端扫码界面进行扫码
complete: (res) => {}, //接口调用结束的回调函数(调用成功、失败都会执行)
fail: (res) => {}, //接口调用失败的回调函数
onlyFromCamera: false, //是否只能从相机扫码,不允许从相册选择图片,这里是只允许相机扫码
scanType: ['qrCode'], // scanType扫码类型 : 二维码
success: (rt) => { // 接口调用成功的回调函数
let narr = rt.result.split('H');
if(narr[1]=='true'){//体验券核销
this.$requst.post('staff/coupon/write-off-experience-coupon',{coupon_id:narr[0],secret:narr[2],account_id:narr[3]}).then(res=>{
this.isQian = true
if(res.code==0){
this.contentVal = "核销成功";
} else {
this.contentVal = res.msg;
}
setTimeout(()=>{
this.isQian = false
},2000)
},error=>{})
} else {//订单核销
this.$requst.post('order/check',{order_coding:narr[0],id:narr[1],check_user:this.userInfo.id}).then(res=>{
this.isQian = true
if(res.code==0){
this.contentVal = "核销成功";
} else {
this.contentVal = res.msg;
}
setTimeout(()=>{
this.isQian = false
},2000)
},error=>{})
}
}
})
}
if( this.yuanList[index].title=='客服查询') {
uni.navigateTo({
url:'/pagesB/customerCheck/customerCheck'
})
}
},
goNodifyData(){//去修改资料页面
uni.setStorageSync('uinfo',this.userInfo)
uni.navigateTo({
url:'/pagesA/nodifyData/nodifyData'
})
},
}
}
</script>
<style>
</style>