luban-mall/pages/tabbar/my/my.vue

444 lines
13 KiB
Vue

<template>
<view class="pad-b150">
<status-nav :ifReturn="false" navBarTitle="我的" :marginBottom="0"></status-nav>
<!-- 头部 -->
<view class="my-herder">
<!-- 头像 -->
<view class="my-portrait">
<view class="my-portrait-img">
<image :src="headPortrait" mode="widthFix"></image>
</view>
<view class="my-vip flex" v-if="businessCode!==''"><image src="/static/public/icon-vip.png" mode="widthFix"></image></view>
</view>
<!-- 用户名 -->
<view class="my-nick-name">{{nickName}}</view>
<!-- 订单量 -->
<view class="my-order flex">
<view class="item" v-for="(item,index) in myOrder" :key="index" @tap="changeOrder(index)">
<text v-if="item.num < 100">{{item.num}}</text>
<text v-if="item.num >= 100">99+</text>
<view>{{item.title}}</view>
</view>
</view>
</view>
<!-- 其他资料 -->
<view class="my-content">
<view class="item flex" v-for="(item,index) in listData" :key="index" @tap.stop="toMore(index)" v-if="showObj.indexOf(index.toString())!=-1">
<view class="left flex">
<view class="flex">
<view class="img flex">
<image :src="item.imgSrc" :style="{width:item.iconWidth+'rpx',height:item.iconHeight+'rpx'}" mode="widthFix"></image>
</view>
<view class="title">{{businessCode!==''&&index==1?'会员码':item.titele}}</view>
</view>
<view class="tips" v-if="index==1">{{businessCode!==''?businessCode:'输入会员码成为会员'}}</view>
<view class="tips" v-if="index==2">申请成为会员可查看低价</view>
</view>
<view class="right">
<view class="btn flex" :class="showVip=='true'?'show':''" v-if="index == 6" @tap.stop="changeShowVip">
<view class="circular"></view>
</view>
<view class="more" :style="{opacity:index==1&&businessCode!==''?0:1}" v-else>
<image src="/static/public/icon-my-more.png" mode="widthFix"></image>
</view>
</view>
<button class="get-phone-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumberA" v-if="index==0&&mobile==''"></button>
<button class="get-phone-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumberB" v-if="index==1&&mobile==''"></button>
<button class="get-phone-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumberC" v-if="index==2&&mobile==''"></button>
</view>
</view>
<!-- 商家客服 -->
<view class="customer-all-bg" :style="{'padding-top':newTop+'px'}" v-if="isCustomer" @tap.stop="closeCustomer">
<view class="customer-txt">
<image :src="customerSrc" mode="widthFix"></image>
<text>请保存相册扫码添加客服</text>
<view class="btn" @tap.stop="saveImg">保存二维码</view>
</view>
</view>
<!-- 申请会员 -->
<view class="pull-all-bg" v-show="isVip||isChecked"></view>
<view class="vip-box-bg" v-if="isVip">
<view class="vip-box">
<view class="vip-close" @tap="closeEv"><text>X</text></view>
<view class="title">会员申请</view>
<view class="vip-list">
<view class="vip-item">
<view class="tips">姓名<text>*</text></view>
<input class="input" type="text" v-model="myName" placeholder="请输入姓名" placeholder-style="color:#000000">
</view>
<view class="vip-item">
<view class="tips">电话<text>*</text></view>
<input class="input" type="number" v-model="myPhone" placeholder="请输入电话" placeholder-style="color:#000000" disabled="true">
</view>
<view class="vip-item">
<view class="tips">邀请人姓名</view>
<input class="input" type="text" v-model="inviteeName" placeholder="请输入邀请人姓名" placeholder-style="color:#000000">
</view>
<view class="vip-item">
<view class="tips">邀请人会员码</view>
<input class="input" type="text" v-model="inviteeCode" placeholder="请输入邀请人会员码" placeholder-style="color:#000000">
</view>
</view>
<view class="btn" @tap="submitEv">提交验证</view>
</view>
</view>
<!-- 验证会员码 -->
<view class="edit-box-bg" v-if="isChecked">
<view class="edit-box">
<view class="edit-close" @tap="closeCheck()"><text>X</text></view>
<view class="title">验证会员码</view>
<view class="subtitle">会员码<text>*</text></view>
<input class="input" type="text" v-model="vipCode" placeholder="请输入会员邀请码" placeholder-style="color:#000000">
<view class="btn" @tap="checkCode">提交验证</view>
</view>
</view>
<!-- 购物车btn -->
<enter-cart :bottom="150"></enter-cart>
<!-- 底部tab -->
<foot-tab current="4"></foot-tab>
</view>
</template>
<script>
import statusNav from '@/components/status-navs/status-nav';
import enterCart from '@/components/enter-cart/enter-cart.vue';
import footTab from '@/components/foot-tab/foot-tab.vue';
import {userInfoEv,getCartNum} from '@/jsFile/public-api.js';
export default {
components:{
statusNav,
enterCart,
footTab,
},
data() {
return {
newTop:uni.getSystemInfoSync().statusBarHeight + 50,
headPortrait:'', //头像
nickName:'', //用户名
businessCode:'', //是否会员
customerSrc:'', //商家客服二维码
myOrder:[
{title:'全部订单',tag:'all',num:0},
{title:'已下单',tag:'ordered',num:0},
{title:'已完成',tag:'completed',num:0},
{title:'已取消',tag:'closed',num:0},
],//订单
listData:[
{titele:'个人资料',imgSrc:'/static/public/icon-my-01.png',iconWidth:43,iconHeight:43},
{titele:'会员码输入',imgSrc:'/static/public/icon-my-02.png',iconWidth:41,iconHeight:35},
{titele:'会员申请',imgSrc:'/static/public/icon-my-03.png',iconWidth:40,iconHeight:40},
{titele:'我的收藏',imgSrc:'/static/public/icon-my-04.png',iconWidth:49,iconHeight:47},
{titele:'关于我们',imgSrc:'/static/public/icon-my-05.png',iconWidth:33,iconHeight:31},
{titele:'免责申明',imgSrc:'/static/public/icon-my-06.png',iconWidth:38,iconHeight:38},
{titele:'是否显示会员价',imgSrc:'/static/public/icon-my-07.png',iconWidth:39,iconHeight:26},
{titele:'商家客服',imgSrc:'/static/public/icon-my-08.png',iconWidth:35,iconHeight:37}
],//列表数据
showVip:'true', //是否显示会员价
isCustomer:false, //商家客服
isVip:false, //会员申请弹窗
myName:'', //姓名
myPhone:'', //电话
inviteeName:'', //邀请人
inviteeCode:'', //会员码
flag:true,
vipCode:'', //会员码
isChecked:false, //验证会员码
cacheBusinessId:-1, //商户id
showObj:'0123457', //隐藏Index
mobile:'',// 联系电话
}
},
onReachBottom() {
},
onHide() {
},
onLoad(op) {
if(op.business_id){
this.cacheBusinessId = op.business_id;
}
},
onShow() {
if(this.cacheBusinessId !== -1){
this.$requst.post('/api/index/change-business',{business_id:this.cacheBusinessId}).then(res=>{
if(res.code == 0){
this.getUserInfo();
this.getCustomer();
userInfoEv();
}
})
}else{
this.getUserInfo();
this.getCustomer();
userInfoEv();
}
getCartNum();
if(uni.getStorageSync('showVip')){
this.showVip = uni.getStorageSync('showVip');
}else{
uni.setStorageSync('showVip','true');
}
},
methods: {
// 获取用户信息
getUserInfo(){
uni.showLoading({
title: '加载中'
});
this.$requst.get('/api/user/info').then(res=>{
console.log(res,'用户信息')
if(res.code==0) {
uni.setStorageSync('business_id',res.data.business_id);
let newArr = res.data.order_count;
this.headPortrait = res.data.headimgurl,
this.nickName = res.data.nickname
this.businessCode = res.data.business_code
this.mobile = res.data.mobile,
this.myPhone = this.mobile,
this.myOrder[0].num = newArr.all,
this.myOrder[1].num = newArr.ordered,
this.myOrder[2].num = newArr.completed,
this.myOrder[3].num = newArr.closed
if(this.businessCode!==''){
this.showObj='0134567'
}
}
uni.hideLoading();
})
},
// 获取商家客服
getCustomer(){
this.$requst.post('/api/user/business-qr').then(res=>{
console.log(res,'商家客服')
if(res.code==0) {
this.customerSrc = res.data.qr;
}
})
},
// 是否显示会员价
changeShowVip(){
if(this.showVip=='true'){
this.showVip='false';
}else{
this.showVip='true';
}
setTimeout(()=>{
if(this.showVip=='true'){
uni.setStorageSync('showVip','true');
}else{
uni.setStorageSync('showVip','false');
}
},200)
},
// 跳转方式
toMore(index){
if(index == 6){
return false;
}else{
if(index == 0){
if(this.mobile!==''){
uni.navigateTo({
url:`/pagesB/ucenter/ucenter`
})
}
}
if(index == 1){
if(this.businessCode == '' && this.mobile!==''){
this.isChecked = true;
}
}
if(index == 2){
if(this.businessCode == '' && this.mobile!==''){
this.isVip =true;
}
}
if(index == 3){
uni.navigateTo({
url:`/pages/tabbar/news/collection`
})
}
if(index == 4){
uni.navigateTo({
url:`/pagesB/about/about`
})
}
if(index == 5){
uni.navigateTo({
url:`/pagesB/disclaimers/disclaimers`
})
}
if(index == 7){
this.isCustomer = true;
}
}
},
// 获取授权信息
onGetPhoneNumberA(e){
if(e.detail.errMsg=="getPhoneNumber:fail user deny"){ //用户决绝授权
this.$toolAll.tools.showToast('您已拒绝授权');
}else{ //允许授权
let params={
iv:e.detail.iv,
encryptedData:e.detail.encryptedData
}
this.$requst.post('/api/user/bind-phone',params).then(res=>{
if(res.code==0) {
this.$toolAll.tools.showToast('绑定成功');
this.getUserInfo();
uni.navigateTo({
url:`/pagesB/ucenter/ucenter`
})
}else{
this.$toolAll.tools.showToast(res.msg);
}
})
}
},
onGetPhoneNumberB(e){
if(e.detail.errMsg=="getPhoneNumber:fail user deny"){ //用户决绝授权
this.$toolAll.tools.showToast('您已拒绝授权');
}else{ //允许授权
let params={
iv:e.detail.iv,
encryptedData:e.detail.encryptedData
}
this.$requst.post('/api/user/bind-phone',params).then(res=>{
if(res.code==0) {
this.$toolAll.tools.showToast('绑定成功');
this.isChecked = true;
}else{
this.$toolAll.tools.showToast(res.msg);
}
})
}
},
onGetPhoneNumberC(e){
if(e.detail.errMsg=="getPhoneNumber:fail user deny"){ //用户决绝授权
this.$toolAll.tools.showToast('您已拒绝授权');
}else{ //允许授权
let params={
iv:e.detail.iv,
encryptedData:e.detail.encryptedData
}
this.$requst.post('/api/user/bind-phone',params).then(res=>{
if(res.code==0) {
this.$toolAll.tools.showToast('绑定成功');
this.getUserInfo();
this.isVip =true;
}else{
this.$toolAll.tools.showToast(res.msg);
}
})
}
},
// 提交会员申请
submitEv(){
if(this.checkEmpty() && this.flag){
this.flag = false;
let params = {
name:this.myName,
phone:this.myPhone,
invite_name:this.inviteeName,
invite_code:this.inviteeCode,
}
this.$requst.post('/api/user/vip',params).then(res=>{
if(res.code==0) {
this.closeEv(); //关闭会员申请
this.getUserInfo(); // 刷新信息
}else{
this.$toolAll.tools.showToast(res.msg);
this.flag = true;
}
})
}
},
// 验证表单
checkEmpty(){
let result = false;
if(!this.myName) {
this.$toolAll.tools.showToast('请填写姓名');
} else if(this.$toolAll.tools.isPhone(this.myPhone)) {
this.$toolAll.tools.showToast('请正确填写联系电话');
} else {
result = true;
}
return result;
},
//关闭会员申请
closeEv(){
this.isVip = false;
this.myName = '';
this.inviteeName = '';
this.inviteeCode = '';
this.flag = true;
},
// 验证会员码
checkCode(){
if(this.vipCode !== ''){
this.$requst.post('/api/user/check-code',{code:this.vipCode}).then(res=>{
if(res.code==0) {
this.$toolAll.tools.showToast('验证成功');
this.getUserInfo(); //刷新个人信息
this.closeCheck(); //清除验证信息
}else{
this.$toolAll.tools.showToast(res.msg);
}
})
}else{
this.$toolAll.tools.showToast('会员码不能为空');
}
},
// 取消验证会员码
closeCheck(){
this.isChecked = false;
this.vipCode = '';
},
// 跳转订单管理
changeOrder(index){
uni.navigateTo({
url:`/pagesA/order/order?tag=${this.myOrder[index].tag}&index=${index}`
})
},
// 选择
chooseEv(obj) {
if(obj.url) {
uni.navigateTo({
url:obj.url
})
} else {
// 添加微信
this.ifWx = true;
}
},
// 我的订单点击事件
chooseGe(obj){
uni.navigateTo({
url:`/pagesA/order-list/order-list?index=${[1,2,3,4][obj.index]}`
})
},
// 关闭商家客服
closeCustomer(){
this.isCustomer = false;
},
// 保存二维码
saveImg(){
this.$toolAll.tools.saveImg(this.customerSrc);
}
}
}
</script>
<style>
</style>