<template>
<view class="box">
<view class="top">
<view class="customerMes">
<image @click="updateUserInfo" v-if="headImg" :src="headImg" mode="" style="width: 88rpx;height: 88rpx;border-radius: 44rpx;"></image>
<image @click="updateUserInfo" v-else src="../../static/img/icon_me.png" mode="" style="width: 88rpx;height: 88rpx;border-radius: 44rpx;"></image>
<view class="mes">
<view class="nick">
<view class="nickName" v-if="nickName">{{nickName}}</view>
<view class="grade" v-if="numList.levelName">{{numList.levelName}}</view>
</view>
<view class="phone">{{phone}}</view>
</view>
</view>
<view class="headerBox">
<view class="quan" @click="gonavigateTo('../index/discountCard')">
<view class="numStr">{{numList.count?numList.count:0}}</view>
<view class="nameStr">优惠券</view>
</view>
<view class="quan">
<view class="numStr">{{numList.totalIntegral?numList.totalIntegral:0}}</view>
<view class="nameStr">积分</view>
</view>
<view class="quan" @click="gonavigateTo('../index/vipCard')">
<view class="numStr">{{numList.cardNum?numList.cardNum:0}}</view>
<view class="nameStr">会员卡</view>
</view>
</view>
</view>
<!-- 我的订单 -->
<view class="orderBox">
<view class="orderTitle">我的订单</view>
<view class="orderLIneBox">
<view class="orderLine" @click="goorder(1)">
<view class="orderImgBox">
<view class="orderNum" v-show="numList.waitPurchaseSize>0">{{numList.waitPurchaseSize>99?'99+':numList.waitPurchaseSize}}</view>
<image src="../../static/img/icon_daifukuan.png" mode="" class="orderLineImg"></image>
</view>
<view class="orderLineTxt">待付款</view>
</view>
<view class="orderLine" @click="goorder(2)">
<view class="orderImgBox">
<view class="orderNum" v-show="numList.waitServiceSize>0">{{numList.waitServiceSize>99?'99+':numList.waitServiceSize}}</view>
<image src="../../static/img/icon_daifuwu.png" mode="" class="orderLineImg"></image>
</view>
<view class="orderLineTxt">待服务</view>
</view>
<view class="orderLine" @click="goorder(3)">
<view class="orderImgBox">
<view class="orderNum" v-show="numList.hasOverSize>0">{{numList.hasOverSize>99?'99+':numList.hasOverSize}}</view>
<image src="../../static/img/icon_yiwancheng.png" mode="" class="orderLineImg"></image>
</view>
<view class="orderLineTxt">已完成</view>
</view>
<view class="orderLine" @click="goorder(0)">
<view class="orderImgBox">
<view class="orderNum" v-show="numList.allSize>0">{{numList.allSize>99?'99+':numList.allSize}}</view>
<image src="../../static/img/icon_allorder.png" mode="" class="orderLineImg"></image>
</view>
<view class="orderLineTxt">全部</view>
</view>
</view>
</view>
<!-- 店铺信息 -->
<view class="shopBox">
<view class="shopCont">
<view class="shopName">{{numList.shopInfo.shopName}}</view>
<view class="shopRightBox">
<image src="../../static/img/icon_ditu.png" mode="" class="shopRightImg"
style="margin-right: 67rpx;" @click="map"></image>
<image src="../../static/img/icon_phone.png" mode="" class="shopRightImg" @click="call"></image>
</view>
</view>
<view class="shopTime" v-if="numList.shopInfo.startTime && numList.shopInfo.endTime">
{{numList.shopInfo.startTime}}-{{numList.shopInfo.endTime}}</view>
<view class="address">
<view class="Address">
{{numList.shopInfo.provinceName}}{{numList.shopInfo.cityName}}{{numList.shopInfo.areaName}}{{numList.shopInfo.address}}
</view>
<!-- <view class="distance" v-if="numList.shopInfo.distance&&numList.shopInfo.distance!= '0.00'">{{numList.shopInfo.distance}}km</view> -->
</view>
</view>
<!-- 我的 相关 -->
<view class="rowBoxBg">
<view class="rowBox" @click="gonavigateTo('../index/shopList')">
<view class="leftView">
<image src="../../static/img/icon_me1.png" mode="" class="liftIcon"></image>
<view class="rowTitle">服务专家</view>
</view>
<image src="../../static/img/big_rightArrow.png" mode="" class="big_rightArrow"></image>
</view>
<view class="rowBox" @click="gonavigateTo('./addCar/cailist')">
<view class="leftView">
<image src="../../static/img/icon_me2.png" mode="" class="liftIcon"></image>
<view class="rowTitle">我的车库</view>
</view>
<image src="../../static/img/big_rightArrow.png" mode="" class="big_rightArrow"></image>
</view>
<view class="rowBox" @click="gonavigateTo('myBespeak')">
<view class="leftView">
<image src="../../static/img/icon_me3.png" mode="" class="liftIcon"></image>
<view class="rowTitle">我的预约</view>
</view>
<image src="../../static/img/big_rightArrow.png" mode="" class="big_rightArrow"></image>
</view>
<view class="rowBox" @click="gonavigateTo('historySpend')">
<view class="leftView">
<image src="../../static/img/icon_me4.png" mode="" class="liftIcon"></image>
<view class="rowTitle">历史消费</view>
</view>
<image src="../../static/img/big_rightArrow.png" mode="" class="big_rightArrow"></image>
</view>
<view class="rowBox" @click="gonavigateTo('checkReport')">
<view class="leftView">
<image src="../../static/img/icon_me5.png" mode="" class="liftIcon"></image>
<view class="rowTitle">车检报告</view>
</view>
<image src="../../static/img/big_rightArrow.png" mode="" class="big_rightArrow"></image>
</view>
<!-- <view class="rowBox" @click="gonavigateTo('invite')">
<view class="leftView">
<image src="../../static/img/icon_me6.png" mode="" class="liftIcon"></image>
<view class="rowTitle">分享给好友</view>
</view>
<image src="../../static/img/big_rightArrow.png" mode="" class="big_rightArrow"></image>
</view> -->
<button open-type="share" class="rowBox" >
<view class="leftView">
<image src="../../static/img/icon_me6.png" mode="" class="liftIcon"></image>
<view class="rowTitle">分享给好友</view>
</view>
<image src="../../static/img/big_rightArrow.png" mode="" class="big_rightArrow"></image>
</button>
<view class="rowBox" @click="gonavigateTo('invite')">
<view class="leftView">
<image src="../../static/img/icon_me7.png" mode="" class="liftIcon"></image>
<view class="rowTitle">意见反馈</view>
</view>
<image src="../../static/img/big_rightArrow.png" mode="" class="big_rightArrow"></image>
</view>
<view class="rowBox" @click="gonavigateTo('')">
<view class="leftView">
<image src="../../static/img/icon_me8.png" mode="" class="liftIcon"></image>
<view class="rowTitle">清除缓存</view>
</view>
<image src="../../static/img/big_rightArrow.png" mode="" class="big_rightArrow"></image>
</view>
</view>
<!-- <view class="signOut" @click="signOut">退出登录</view> -->
<!-- 手机号授权 -->
<view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
<view class="authorizCont" @click.stop="">
<view class="authorizName">{{wxOpenData.miniAppName}}</view>
<view class="authorizMs">您好，欢迎访问本店，授权手机号登录能获取我们最新的促销活动哦~</view>
<button class="authorizContbutton" type="default" open-type="getPhoneNumber"
@getphonenumber="decryptPhoneNumber">授权</button>
</view>
<view style="text-align: center;padding-top: 56rpx;">
<image src="../../static/timg/icon_guanbi@2x.png" mode="" class="authorizCloseImg"></image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
iStatusBarHeight: '',
userInfo: '',
shopData: '',
numList: '',
uid: '',
headImg: '',
location: {
lng: '',
lat: '',
},
authorizShow: false,
code: '',
wxOpenData: '',
nickName:'',
phone:'',
ext:'',
}
},
onLoad(opt) {
var that = this;
// uni.getLocation({
// type: 'gcj02',
// success: function(res) {
// console.log(res)
// that.location.lat = res.latitude
// that.location.lng = res.longitude
// that.queryMyDetail()
// },
// fail(err) {
// }
// });
this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
//const wxOpenData = uni.getStorageSync("wxOpenData");
const wxOpenData = this.$store.state.wxOpenData;
this.wxOpenData=wxOpenData
//console.log()
if (wxOpenData) {
this.headImg = wxOpenData.loginInfo.customerInfo.headImgurl;
this.nickName = wxOpenData.loginInfo.customerInfo.wxNickName;
this.phone = wxOpenData.loginInfo.customerInfo.mobilePhone;
this.uid = wxOpenData.loginInfo.uid;
}
//this.userInfo = uni.getStorageSync("userInfo")
this.ext=this.$common.getExtStoreId();
},
onShow() {
this.userInfo = this.$store.state.userInfo;
if (this.userInfo) {
this.queryMyDetail();
} else {
this.authorizShow = true;
}
},
methods: {
updateUserInfo(){
var that=this;
uni.getUserProfile({
lang:'zh_CN',
desc:'登录',
success:(res)=>{
console.log(res);
that.headImg=res.userInfo.avatarUrl;
that.nickName=res.userInfo.nickName;
that.$http('miniApp2/sys/updateUserInfo', {
nickName:res.userInfo.nickName,
unionId:that.ext.unionId,
headImg: res.userInfo.avatarUrl,
openId: that.wxOpenData.openid
}, 'POST').then(res => {
})
},
fail:(res)=>{
console.log(res)
}
});
},
decryptPhoneNumber: function(e) {
console.log(e);
this.code = e.detail.code
this.wxPhoneLogin()
this.authorizShow = false;
},
wxPhoneLogin() {
var that = this;
this.$http('miniApp2/sys/wxPhoneLogin', {
appId:this.ext.appId,
unionId:this.ext.unionId,
code: this.code,
openId: this.wxOpenData.openid
}, 'POST').then(res => {
var data = res.data;
if (data.loginInfo) {
this.userInfo = data.loginInfo.openUser;
this.wxOpenData = data.loginInfo;
this.$store.commit('mutationswxOpenData', data.loginInfo)
this.$store.commit('mutationsuserInfo', this.userInfo)
this.queryMyDetail()
}
})
},
map() {
console.log("打开地图")
var that = this;
if (!that.numList.shopInfo.lat || !that.numList.shopInfo.lng) {
uni.showToast({
title: '该店铺未设置定位',
icon: 'none',
duration: 3000
});
} else {
uni.openLocation({
latitude: Number(that.numList.shopInfo.lat),
longitude: Number(that.numList.shopInfo.lng),
name: that.numList.shopInfo.shopName,
address: that.numList.shopInfo.provinceName + that.numList.shopInfo.cityName + that.numList
.shopInfo.areaName + that.numList.shopInfo.address,
success: function() {
console.log('success');
},
fail(err) {
console.log(err)
}
});
}
},
call() {
uni.makePhoneCall({
phoneNumber: this.numList.shopInfo.contactorPhone
});
},
goorder(num) {
uni.navigateTo({
url: './myOrder/myOrder?num=' + num
})
},
queryMyDetail() {
uni.showLoading({
title: '加载中'
})
this.$http('openreservation/getInfo', {
lat: this.location.lat ? this.location.lat : '',
lng: this.location.lng ? this.location.lng : '',
}, 'GET').then(res => {
uni.hideLoading();
this.numList = res.data
})
},
gonavigateTo(url) {
uni.navigateTo({
url: url
})
},
signOut() {
//uni.clearStorageSync();
uni.removeStorageSync('logodata');
// uni.navigateTo({
// url: '../login/login'
// })
},
},
onShareAppMessage(res) {
return {
title: this.wxOpenData.miniAppName,
//imageUrl:img,
path: 'pages/index/index',
success(res){
uni.showToast({
title:'分享成功'
})
},
fail(res){
uni.showToast({
title:'分享失败',
icon:'none',
duration: 3000
})
}
}
},
// 下拉刷新
onPullDownRefresh() {
this.queryMyDetail()
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},
}
</script>
<style scoped>
button::after{
border: none;
}
button{
position: relative;
display: block;
margin-left: 0;
margin-right: 0;
padding-left: 0px;
padding-right: 0px;
box-sizing: border-box;
// font-size: 18px;
text-align: center;
text-decoration: none;
// line-height: 1;
line-height: 1.35;
// border-radius: 5px;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
color: #000000;
background-color: #fff;
height: 100%;
}
.box {
width: 100vw;
min-height: 100vh;
background: #F4F5F7;
padding-bottom: 60rpx;
}
.top {
height: 350rpx;
padding: 20rpx 24rpx 0;
background-color: #D53533;
border-radius: 0 0 5% 5%;
}
.customerMes {
display: flex;
}
.mes {
margin-left: 20rpx;
}
.nick {
margin-bottom: 5rpx;
display: flex;
justify-content: flex-start;
align-items: center;
}
.nickName {
font-size: 34rpx;
color: #FFFFFF;
font-weight: bold;
line-height: 48rpx;
height: 48rpx;
}
.grade {
margin-left: 15rpx;
font-size: 24rpx;
color: #FFFFFF;
padding: 0rpx 10rpx;
border: 1rpx solid #FFFFFF;
border-radius: 4rpx;
height: 36rpx;
}
.phone {
font-size: 24rpx;
color: #FFFFFF;
}
.headerBox {
padding: 30rpx 24rpx;
display: flex;
justify-content: space-around;
}
.quan {
display: flex;
flex-direction: column;
align-items: center;
height: 120rpx;
}
.numStr {
font-size: 40rpx;
font-weight: bold;
color: #FFFFFF;
line-height: 56rpx;
}
.nameStr {
font-size: 24rpx;
color: #FFFFFF;
}
.orderBox {
margin: 0rpx 24rpx;
background: #FFFFFF;
padding: 30rpx 20rpx;
border-radius: 10rpx;
margin-top: -100rpx;
}
.orderTitle {
font-size: 30rpx;
color: #333333;
font-weight: bold;
}
.orderAll {
display: flex;
justify-content: space-between;
align-items: center;
}
.orderLine {
width: 25%;
text-align: center;
}
.orderLineImg {
width: 60rpx;
height: 60rpx;
}
.orderLineTxt {
font-size: 24rpx;
color: #333333;
}
.orderImgBox {
text-align: center;
position: relative;
}
.orderLIneBox {
display: flex;
justify-content: space-between;
padding-top: 30rpx;
}
.orderNum {
height: 26rpx;
line-height: 26rpx;
background: #FF0000;
padding: 0 8rpx;
border-radius: 13rpx;
color: #FFFFFF;
font-size: 20rpx;
position: absolute;
left: 90rpx;
z-index: 11;
}
.big_rightArrow {
margin-right: 20rpx;
width: 30rpx;
height: 30rpx;
}
.rowBoxBg {
margin: 20rpx 24rpx;
background: #FFFFFF;
border-radius: 10rpx;
}
.rowBox {
display: flex;
justify-content: space-between;
background: #FFFFFF;
padding: 35rpx 0rpx;
border-radius: 10rpx;
align-items: center;
}
.leftView {
display: flex;
align-items: center;
}
.rightView {
display: flex;
align-items: center;
}
.liftIcon {
width: 34rpx;
height: 34rpx;
margin: 0rpx 20rpx;
}
.rowTitle {
color: #3C3C3C;
font-size: 28rpx;
}
.signOut {
width: 702rpx;
height: 98rpx;
background: #FFFFFF;
border-radius: 10rpx;
font-size: 30rpx;
color: #FF3B30;
line-height: 98rpx;
text-align: center;
margin: 40rpx 24rpx;
}
.shopBox {
padding: 20rpx;
margin: 20rpx 24rpx;
background-color: #FFFFFF;
border-radius: 10rpx;
}
.shopCont {
display: flex;
justify-content: space-between;
align-items: center;
}
.shopName {
font-size: 30rpx;
font-weight: bold;
color: #3C3C3C;
line-height: 42rpx;
}
.shopRightBox {
display: flex;
justify-content: space-between;
}
.address {
display: flex;
justify-content: space-between;
align-items: center;
}
.Address,
.shopTime,
.distance {
color: #999999;
font-size: 24rpx;
padding-top: 15rpx;
/* 隐藏文字显示 ...不换行 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.shopRightBox {}
.shopRightImg {
width: 44rpx;
height: 45rpx;
}
.authorizBox {
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
}
.authorizCont {
margin-top: 30vh;
width: 564rpx;
height: 408rpx;
background: #FFFFFF;
border-radius: 24rpx;
margin-left: 93rpx;
position: relative;
}
.authorizCloseImg {
width: 62rpx;
height: 62rpx;
}
.sqLogoBox {
width: 180rpx;
height: 180rpx;
background: #FFFFFF;
border-radius: 90rpx;
text-align: center;
position: absolute;
top: -50rpx;
left: 192rpx;
}
.authorizName {
color: #333333;
line-height: 42rpx;
font-size: 30rpx;
text-align: center;
padding-top: 58rpx;
}
.authorizMs {
color: #999999;
line-height: 36rpx;
font-size: 26rpx;
width: 452rpx;
padding-top: 24rpx;
text-align: center;
margin-left: 56rpx;
}
.authorizContbutton {
width: 422rpx;
height: 88rpx;
background: #D53533;
border-radius: 44rpx;
line-height: 88rpx;
text-align: center;
font-size: 30rpx;
color: #FFFFFF;
margin-top: 62rpx;
margin-left: 71rpx;
}
</style>