407 lines
13 KiB
Vue
407 lines
13 KiB
Vue
|
<template>
|
||
|
|
<view class="pad-x170" v-if="isLoading">
|
||
|
|
<!-- 滚动顶部 -->
|
||
|
|
<view class="scrool-top background-white" :style="{height:statusHeight+50+'px'}" v-if="scroolTop"></view>
|
||
|
|
<view class="my-top">
|
||
|
|
<view class="my-bg">
|
||
|
|
<image src="/static/img/my-bg.jpg" mode="widthFix"></image>
|
||
|
|
</view>
|
||
|
|
<!-- 头部 -->
|
||
|
|
<view class="my-herder pad-zy20 border-box">
|
||
|
|
<view class="my-message color-ff flex">
|
||
|
|
<!-- 头像 -->
|
||
|
|
<view class="my-portrait radius100">
|
||
|
|
<image :src="headPortrait" mode="widthFix"></image>
|
||
|
|
</view>
|
||
|
|
<!-- 用户名 -->
|
||
|
|
<view class="my-txt flex">
|
||
|
|
<view class="my-nickname font36 flex">
|
||
|
|
<text>{{nickName}}</text>
|
||
|
|
<image :src="vip_info.ico" mode="widthFix" v-if="vip_info.ico!==''"></image>
|
||
|
|
</view>
|
||
|
|
<view class="my-vip-txt font24 background-orange radius25 pad-zy40 mar-s20 flex">{{vip_info.name}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="my-money color-ff flex">
|
||
|
|
<view class="item">
|
||
|
|
<view class="font48">{{userInfo.score}}</view>
|
||
|
|
<text class="font24">我的积分</text>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<view class="font48">{{userInfo.coupon_count}}</view>
|
||
|
|
<text class="font24">我的优惠券</text>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<view class="font48">{{userInfo.balance}}</view>
|
||
|
|
<text class="font24">我的余额</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 订单量 -->
|
||
|
|
<view class="my-order background-grey border-box flex">
|
||
|
|
<view class="item" v-for="(item,index) in myOrder" :key="index" @tap="changeOrder(index)">
|
||
|
|
<view class="img flex">
|
||
|
|
<image :src="item.imgSrc" mode="widthFix" :style="{width:item.iconWidth+'rpx',height:item.iconHeight+'rpx'}"></image>
|
||
|
|
<view class="point radius100" v-if="orderObj.indexOf(index.toString())!=-1 && myOrder[index].num>0"></view>
|
||
|
|
</view>
|
||
|
|
<view class="txt font24 color-ff">{{item.title}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 其他资料 -->
|
||
|
|
<view class="my-content pad-all40">
|
||
|
|
<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="title 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 font28">{{item.titele}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="more">
|
||
|
|
<image src="/static/icon/icon-join.png" mode="widthFix" style="width: 14rpx;height: 26rpx;"></image>
|
||
|
|
</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>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 会员注册 -->
|
||
|
|
<view class="pull-bg" style="background-color: rgba(0,0,0,.3);" v-if="isVip || isShow"></view>
|
||
|
|
<view class="vip-box-bg border-box" v-if="isVip">
|
||
|
|
<view class="vip-box radius20 background-white font30">
|
||
|
|
<view class="title">会员注册</view>
|
||
|
|
<view class="vip-list">
|
||
|
|
<view class="vip-item mar-s20">
|
||
|
|
<view class="tips color-99">姓名</view>
|
||
|
|
<input class="input" type="text" v-model="myName" placeholder="请输入姓名" placeholder-style="color:#000000">
|
||
|
|
</view>
|
||
|
|
<view class="vip-item mar-s40">
|
||
|
|
<view class="tips color-99">电话</view>
|
||
|
|
<input class="input" type="number" v-model="myPhone" placeholder="请输入电话" placeholder-style="color:#000000">
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="submit-btn font36 background-orange radius30 mar-s60 flex" @tap="submitEv">注册会员</view>
|
||
|
|
<view class="close-btn" @tap="closeEv">
|
||
|
|
<image src="/static/icon/close-btn.png" mode="widthFix"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 分销码 -->
|
||
|
|
<view class="vip-box-bg border-box" v-if="isShow">
|
||
|
|
<view class="vip-box radius20 background-white font30">
|
||
|
|
<view class="title">分销二维码</view>
|
||
|
|
<view class="vip-code flex" style="padding: 40rpx 0 20rpx;">
|
||
|
|
<image :src="codeImg" mode="widthFix"></image>
|
||
|
|
</view>
|
||
|
|
<view class="submit-btn font36 radius30 color-ff mar-s60 flex" style="background-color: #00b809;position: relative;" @tap="submitEv">
|
||
|
|
<image src="/static/icon/icon-wechat.png" mode="widthFix"></image>
|
||
|
|
<text>分享给朋友</text>
|
||
|
|
<button class="shear-btn" type="primary" open-type="share"></button>
|
||
|
|
</view>
|
||
|
|
<view class="close-btn" @tap="closeEv">
|
||
|
|
<image src="/static/icon/close-btn.png" mode="widthFix"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 底部tab -->
|
||
|
|
<tabbar current="0" v-if="isLoading"></tabbar>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import tabbar from '@/components/tabbar/tabbar.vue';
|
||
|
|
import {getCarInfo} from '@/jsFile/public-api.js';
|
||
|
|
import {mapState} from 'vuex'//引入mapState
|
||
|
|
export default {
|
||
|
|
components:{
|
||
|
|
tabbar,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
statusHeight:uni.getSystemInfoSync().statusBarHeight,
|
||
|
|
scroolTop:false, //是否显示顶部
|
||
|
|
headPortrait:'', //头像
|
||
|
|
nickName:'', //用户名
|
||
|
|
businessCode:'', //是否会员
|
||
|
|
customerSrc:'', //商家客服二维码
|
||
|
|
vip_info:{}, //会员信息
|
||
|
|
myOrder:[
|
||
|
|
{title:'全部',tag:'all',imgSrc:'/static/icon/icon-order-01.png',num:0,iconWidth:42,iconHeight:44},
|
||
|
|
{title:'待付款',tag:'waiting',imgSrc:'/static/icon/icon-order-02.png',num:0,iconWidth:46,iconHeight:40},
|
||
|
|
{title:'已下单',tag:'paid',imgSrc:'/static/icon/icon-order-03.png',num:0,iconWidth:50,iconHeight:44},
|
||
|
|
{title:'已发货',tag:'shipped',imgSrc:'/static/icon/icon-order-04.png',num:0,iconWidth:48,iconHeight:42},
|
||
|
|
{title:'已完成',tag:'completed',imgSrc:'/static/icon/icon-order-05.png',num:0,iconWidth:49,iconHeight:44}
|
||
|
|
],//订单
|
||
|
|
listData:[
|
||
|
|
{titele:'个人资料',imgSrc:'/static/icon/icon-my-01.png',iconWidth:35,iconHeight:36},
|
||
|
|
{titele:'注册会员',imgSrc:'/static/icon/icon-my-02.png',iconWidth:40,iconHeight:34},
|
||
|
|
{titele:'地址管理',imgSrc:'/static/icon/icon-my-03.png',iconWidth:32,iconHeight:40},
|
||
|
|
{titele:'余额充值',imgSrc:'/static/icon/icon-my-04.png',iconWidth:34,iconHeight:28},
|
||
|
|
{titele:'积分管理',imgSrc:'/static/icon/icon-my-05.png',iconWidth:32,iconHeight:30},
|
||
|
|
{titele:'分销管理',imgSrc:'/static/icon/icon-my-06.png',iconWidth:35,iconHeight:35},
|
||
|
|
{titele:'优惠券管理',imgSrc:'/static/icon/icon-my-07.png',iconWidth:38,iconHeight:27},
|
||
|
|
{titele:'我的分享码',imgSrc:'/static/icon/icon-my-08.png',iconWidth:34,iconHeight:40},
|
||
|
|
{titele:'免责声明',imgSrc:'/static/icon/icon-my-09.png',iconWidth:40,iconHeight:40}
|
||
|
|
],//列表数据
|
||
|
|
vip_level:0,// 是否会员
|
||
|
|
isVip:false, //会员申请弹窗
|
||
|
|
myName:'', //姓名
|
||
|
|
myPhone:'', //电话
|
||
|
|
flag:true,
|
||
|
|
vipCode:'', //会员码
|
||
|
|
showObj:'012345678', //显示列表
|
||
|
|
mobile:'', //联系方式
|
||
|
|
orderObj:'123', //订单显示
|
||
|
|
userInfo:'',//用户信息
|
||
|
|
isLoading:false,
|
||
|
|
shareFlag:true, //是否可分享
|
||
|
|
isShow:false,
|
||
|
|
codeImg:'', //分销码
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onPageScroll(object){
|
||
|
|
if(object.scrollTop>50){
|
||
|
|
this.scroolTop = true;
|
||
|
|
}else{
|
||
|
|
this.scroolTop = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onHide() {
|
||
|
|
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
this.getUserInfo();
|
||
|
|
if(uni.getStorageSync('showVip')){
|
||
|
|
this.showVip = uni.getStorageSync('showVip');
|
||
|
|
}else{
|
||
|
|
uni.setStorageSync('showVip','true');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 分享到微信
|
||
|
|
onShareAppMessage(res) {
|
||
|
|
if(res.from==='button'){//分享按钮
|
||
|
|
this.isShow = false;
|
||
|
|
return {
|
||
|
|
title:'分销二维码',
|
||
|
|
imageUrl:this.codeImg,
|
||
|
|
success: function (res) {
|
||
|
|
if(res.errMsg == 'shareAppMessage:ok'){
|
||
|
|
console.log("成功",res)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fail:function(res){
|
||
|
|
console.log("失败",res)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 获取用户信息
|
||
|
|
getUserInfo(){
|
||
|
|
uni.showLoading({
|
||
|
|
title:'加载中'
|
||
|
|
});
|
||
|
|
this.$requst.get('/api/user/info').then(res=>{
|
||
|
|
console.log(res,'用户信息')
|
||
|
|
if(res.code==0) {
|
||
|
|
this.userInfo = res.data;
|
||
|
|
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.mobile = res.data.mobile,
|
||
|
|
this.myPhone = this.mobile,
|
||
|
|
this.businessCode = res.data.business_code;
|
||
|
|
this.vip_level = res.data.vip_level;
|
||
|
|
this.vip_info = res.data.vip_info;
|
||
|
|
this.myOrder[0].num = newArr.all;
|
||
|
|
this.myOrder[1].num = newArr.waiting;
|
||
|
|
this.myOrder[2].num = newArr.paid;
|
||
|
|
this.myOrder[3].num = newArr.shipped;
|
||
|
|
this.myOrder[4].num = newArr.completed;
|
||
|
|
if(this.vip_level!==0){
|
||
|
|
this.showObj='02345678'
|
||
|
|
}
|
||
|
|
// 获取分销码
|
||
|
|
this.getCodeEv();
|
||
|
|
}
|
||
|
|
uni.hideLoading();
|
||
|
|
this.isLoading = true;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 获取分销码
|
||
|
|
getCodeEv(){
|
||
|
|
this.$requst.post('/api/user/my-distribution-code').then(res=>{
|
||
|
|
if(res.code == 0){
|
||
|
|
console.log(res,'分销码');
|
||
|
|
this.codeImg = this.$hostHttp + res.data.qr;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 跳转方式
|
||
|
|
toMore(index){
|
||
|
|
if(index == 0){
|
||
|
|
if(this.mobile!==''){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:`/pagesB/ucenter/ucenter`
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}else if(index == 1){
|
||
|
|
if(this.vip_level == 0 && this.mobile!==''){
|
||
|
|
this.isVip = true;
|
||
|
|
}
|
||
|
|
}else if(index == 2){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:`/pagesA/address/address`
|
||
|
|
})
|
||
|
|
}else if(index == 3){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:`/pagesA/recharge/recharge`
|
||
|
|
})
|
||
|
|
}else if(index == 4){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:`/pagesA/integral/integral`
|
||
|
|
})
|
||
|
|
}else if(index == 5){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:`/pagesA/distribution/distribution`
|
||
|
|
})
|
||
|
|
}else if(index == 6){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:`/pagesA/coupon/coupon`
|
||
|
|
})
|
||
|
|
}else if(index == 7){
|
||
|
|
this.isShow = true;
|
||
|
|
}else if(index == 8){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:`/pagesB/disclaimers/disclaimers`
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 获取授权信息
|
||
|
|
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.getUserInfo();
|
||
|
|
this.isVip =true;
|
||
|
|
}else{
|
||
|
|
this.$toolAll.tools.showToast(res.msg);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 提交会员申请
|
||
|
|
submitEv(){
|
||
|
|
if(this.checkEmpty() && this.flag){
|
||
|
|
this.flag = false;
|
||
|
|
let params = {
|
||
|
|
real_name:this.myName,
|
||
|
|
mobile:this.myPhone,
|
||
|
|
}
|
||
|
|
this.$requst.post('/api/user/register-vip',params).then(res=>{
|
||
|
|
if(res.code==0) {
|
||
|
|
this.closeEv(); //关闭会员申请
|
||
|
|
this.getUserInfo(); // 刷新信息
|
||
|
|
}else{
|
||
|
|
this.$toolAll.tools.showToast(res.msg);
|
||
|
|
}
|
||
|
|
setTimeout(()=>{
|
||
|
|
this.flag = true;
|
||
|
|
},2000)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 验证表单
|
||
|
|
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.flag = true;
|
||
|
|
this.isShow = false;
|
||
|
|
},
|
||
|
|
|
||
|
|
// 跳转订单管理
|
||
|
|
changeOrder(index){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:`/pagesA/order/order?tag=${this.myOrder[index].tag}&index=${index}`
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 保存二维码
|
||
|
|
saveImg(){
|
||
|
|
this.$toolAll.tools.saveImg(this.customerSrc);
|
||
|
|
},
|
||
|
|
// 分享到微信
|
||
|
|
shareImgEv(id){
|
||
|
|
this.$toolAll.tools.showToast('分享图生成中...','none',10000);
|
||
|
|
if(this.shareFlag){
|
||
|
|
this.shareFlag = false;
|
||
|
|
this.$requst.post('/api/spu/share-img',{spu_id:id}).then(res=>{
|
||
|
|
console.log(base64ToPath(res.data.poster),'分享图片')
|
||
|
|
base64ToPath(res.data.poster).then(path=>{
|
||
|
|
uni.hideToast();
|
||
|
|
this.$toolAll.tools.showToast('正在调起分享...');
|
||
|
|
wx.showShareImageMenu({
|
||
|
|
path: path,
|
||
|
|
success:(res=>{
|
||
|
|
this.shareFlag = true;
|
||
|
|
}),
|
||
|
|
fail:(err=>{
|
||
|
|
this.shareFlag = true;
|
||
|
|
})
|
||
|
|
})
|
||
|
|
})
|
||
|
|
})
|
||
|
|
} else {this.$toolAll.tools.showToast('请勿重复点击');}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
</style>
|