522 lines
13 KiB
Vue
522 lines
13 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar :is-back="false" title="个人中心" :border-bottom="false" back-icon-color="000" :background="bgc" title-color='#000' title-size='36'
|
|
height='40' id="navbar">
|
|
</u-navbar>
|
|
<view class="top" v-if="false">
|
|
<view class="name">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uXS4EUkAFWcBXE4WJFSL" mode=""></image> 账户余额
|
|
</view>
|
|
<view class="chongzhi">
|
|
<view class=""></view><view class="cz" @click="btncz">立即充值</view>
|
|
</view>
|
|
<view class="chakan">
|
|
<text class="price">{{user.balance == null ? '0.00' : user.balance}}</text>
|
|
<view class="" @click="btncha">
|
|
（查看可用门店）<image src="https://api.ccttiot.com/smartmeter/img/static/upPch6htDedjB6rREtdV" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="top" style="padding: 0;">
|
|
<image style="" src="https://api.ccttiot.com/smartmeter/img/static/unOSDXbaM4kbZH0gElDy" mode=""></image>
|
|
</view>
|
|
|
|
<view class="bd">
|
|
<view class="name">
|
|
常用功能
|
|
</view>
|
|
<view class="gongneng" @click="btnpage(1)">
|
|
<view class="lt">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uagSCuoY0LglNeH4SJWW" mode=""></image> 全部门店
|
|
</view>
|
|
<view class="rt">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/u76gy7cgZARhNXV3b91k" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="gongneng" @click="btnpage(2)">
|
|
<view class="lt">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uUa7yevmLyiGkiKO13iy" mode=""></image> 扫一扫
|
|
</view>
|
|
<view class="rt">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/u76gy7cgZARhNXV3b91k" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="gongneng" @click="btnpage(3)">
|
|
<view class="lt">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uXhCHFfh3D0GL0mLf7DP" mode=""></image> 客服电话
|
|
</view>
|
|
<view class="rt">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/u76gy7cgZARhNXV3b91k" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="gongneng" @click="btnpage(4)">
|
|
<view class="lt">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/u0PuPY00UK9n11mCd9yQ" mode=""></image> 常见问题
|
|
</view>
|
|
<view class="rt">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/u76gy7cgZARhNXV3b91k" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="gongneng" @click="btnpage(6)">
|
|
<view class="lt">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uOCSSTWTBdtVooHEElwD" mode=""></image> 意见反馈
|
|
</view>
|
|
<view class="rt">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/u76gy7cgZARhNXV3b91k" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="gongneng" @click="btnluru">
|
|
<view class="lt">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uXtWTZ3ETnC7w23VxEWs" mode=""></image> 设备录入
|
|
</view>
|
|
<view class="rt">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/u76gy7cgZARhNXV3b91k" mode=""></image>
|
|
</view>
|
|
</view> -->
|
|
<view class="gongneng" @click="btnpage(7)">
|
|
<view class="lt">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ueYTUVgfbibGCeLgLcMc" mode=""></image> 退出登录
|
|
</view>
|
|
<view class="rt">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/u76gy7cgZARhNXV3b91k" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="jiameng" @click="btnjiameng">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/usIK790XacHJ1pXUbbfW" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="luru" @click="btnluru">
|
|
录入
|
|
</view>
|
|
<view class="kfimg" v-if="flag">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uc8dAVNneEshmNJjPW3w" mode=""></image>
|
|
<view class="boda">
|
|
<view class="btntel" @click="call(1)">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uvq3hTmgx4aK8lkhzvf3" mode=""></image> 商家电话
|
|
</view>
|
|
<view class="btntel" @click="call(2)">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ulZS2x5zQDrBPjWiH8Gn" mode=""></image> 平台电话
|
|
</view>
|
|
</view>
|
|
<image class="yic" @click="flag = false" src="https://api.ccttiot.com/smartmeter/img/static/uPhDN73dFXTe31yvnHhP" mode=""></image>
|
|
</view>
|
|
<view class="mask" v-if="flag"></view>
|
|
<view class="chadianp" v-if="mendianflag">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uQ9Lap86n7hzNGtzAVIV" mode=""></image>
|
|
<view class="name">
|
|
余额适用门店
|
|
</view>
|
|
<view class="list">
|
|
<view class="list_item" v-for="(item,inde) in 10" :key="index">
|
|
【宁德-某某路店】
|
|
</view>
|
|
</view>
|
|
<view class="anniu" @click="mendianflag = false">
|
|
我知道了
|
|
</view>
|
|
</view>
|
|
<view class="mask" v-if="mendianflag"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "",
|
|
},
|
|
flag:false,
|
|
mendianflag:false,
|
|
user:{},
|
|
telobj:{}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getinfo()
|
|
this.getkefutel()
|
|
},
|
|
methods: {
|
|
// 点击进行设备录入
|
|
btnluru(){
|
|
uni.navigateTo({
|
|
url:'/page_user/luru'
|
|
})
|
|
},
|
|
// 点击拨打电话
|
|
call(num){
|
|
if(num == 1){
|
|
uni.makePhoneCall({
|
|
phoneNumber: this.telobj.storePhone,
|
|
success: function(res) {
|
|
console.log('拨打电话成功', res)
|
|
},
|
|
fail: function(err) {
|
|
console.error('拨打电话失败', err)
|
|
uni.showToast({
|
|
title: '取消拨打电话',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
}else if(num == 2){
|
|
uni.makePhoneCall({
|
|
phoneNumber: this.telobj.platformPhone,
|
|
success: function(res) {
|
|
console.log('拨打电话成功', res)
|
|
},
|
|
fail: function(err) {
|
|
console.error('拨打电话失败', err)
|
|
uni.showToast({
|
|
title: '取消拨打电话',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
},
|
|
// 查询客服电话
|
|
getkefutel(){
|
|
this.$u.get(`/app/store/getServicePhone?storeId=1`).then(res => {
|
|
if (res.code == 200) {
|
|
this.telobj = res.data
|
|
}
|
|
})
|
|
},
|
|
// 查询个人信息
|
|
getinfo(){
|
|
this.$u.get(`/getAppInfo`).then(res => {
|
|
if (res.code == 200) {
|
|
this.user = res.user
|
|
}
|
|
})
|
|
},
|
|
// 点击跳转到加盟合作页
|
|
btnjiameng(){
|
|
uni.navigateTo({
|
|
url:'/page_user/zhaoshang'
|
|
})
|
|
},
|
|
// 点击立即充值跳转到充值页
|
|
btncz(){
|
|
uni.navigateTo({
|
|
url:'/page_user/chongzhi'
|
|
})
|
|
},
|
|
// 点击查看可用门店
|
|
btncha(){
|
|
this.mendianflag = true
|
|
},
|
|
// 功能列表点击事件
|
|
btnpage(num){
|
|
if(num == 3){
|
|
this.flag = true
|
|
}else if(num == 6){
|
|
uni.navigateTo({
|
|
url:'/page_user/yijian'
|
|
})
|
|
}else if(num == 4){
|
|
uni.navigateTo({
|
|
url:'/page_user/changjian'
|
|
})
|
|
}else if(num == 1){
|
|
uni.reLaunch({
|
|
url:'/pages/nearbystores/index'
|
|
})
|
|
}else if(num == 2){
|
|
uni.navigateTo({
|
|
url:'/page_user/huogui'
|
|
})
|
|
// uni.scanCode({
|
|
// onlyFromCamera: true,
|
|
// scanType: ['qrCode'],
|
|
// success: res => {
|
|
// console.log(res);
|
|
// },
|
|
// fail: err => {
|
|
// console.error('扫描失败：', err)
|
|
// uni.showToast({
|
|
// title: '扫描失败',
|
|
// icon: 'none'
|
|
// })
|
|
// }
|
|
// })
|
|
}else if(num == 7){
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '您确定要退出登录吗?',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
uni.clearStorage({
|
|
success: function () {
|
|
uni.showToast({
|
|
title: '退出成功',
|
|
icon: 'success',
|
|
duration:2000
|
|
})
|
|
setTimeout(()=>{
|
|
uni.reLaunch({
|
|
url:'/pages/login/index'
|
|
})
|
|
},1000)
|
|
},
|
|
fail: function (err) {
|
|
console.error('清除本地存储失败：', err)
|
|
}
|
|
})
|
|
} else if (res.cancel) {
|
|
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #fff;
|
|
.luru{
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
background-color: #48893B;
|
|
color: #fff;
|
|
border-radius: 50%;
|
|
position: fixed;
|
|
bottom: 230rpx;
|
|
right: 30rpx;
|
|
text-align: center;
|
|
line-height: 100rpx;
|
|
}
|
|
.chadianp{
|
|
width: 674rpx;
|
|
height: 880rpx;
|
|
background: linear-gradient( 180deg, #DEF1DA 18%, #FFFFFF 20%, #FFFFFF 100%);
|
|
border-radius: 36rpx 36rpx 36rpx 36rpx;
|
|
position: fixed;
|
|
top: 352rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 9;
|
|
padding: 0 40rpx;
|
|
box-sizing: border-box;
|
|
.name{
|
|
font-weight: 600;
|
|
font-size: 48rpx;
|
|
color: #48893B;
|
|
height: 164rpx;
|
|
line-height: 164rpx;
|
|
}
|
|
.anniu{
|
|
width: 406rpx;
|
|
height: 86rpx;
|
|
line-height: 86rpx;
|
|
background: #48893B;
|
|
border-radius: 43rpx 43rpx 43rpx 43rpx;
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 54rpx;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
font-size: 40rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
image{
|
|
width: 166rpx;
|
|
height: 164rpx;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
.list{
|
|
width: 100%;
|
|
height: 520rpx;
|
|
overflow: scroll;
|
|
.list_item{
|
|
margin-top: 40rpx;
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
}
|
|
}
|
|
.kfimg{
|
|
width: 590rpx;
|
|
height: 706rpx;
|
|
position: fixed;
|
|
top: 380rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 1;
|
|
.yic{
|
|
position: fixed;
|
|
top: 750rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 1;
|
|
width: 60rpx !important;
|
|
height: 60rpx !important;
|
|
}
|
|
.boda{
|
|
text-align: center;
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom:60rpx;
|
|
.tel{
|
|
font-size: 36rpx;
|
|
color: #3D3D3D;
|
|
font-weight: 600;
|
|
margin-bottom: 62rpx;
|
|
}
|
|
.btntel{
|
|
margin: auto;
|
|
width: 436rpx;
|
|
height: 68rpx;
|
|
background: #48893B;
|
|
border-radius: 40rpx 40rpx 40rpx 40rpx;
|
|
border-radius: 50rpx;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
line-height: 68rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 40rpx;
|
|
image{
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.mask{
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: #000;
|
|
opacity: .5;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.bd{
|
|
height: 970rpx;
|
|
padding: 0 40rpx;
|
|
box-sizing: border-box;
|
|
padding-top: 42rpx;
|
|
box-shadow: 0rpx -6rpx 20rpx 0rpx rgba(0,0,0,0.3);
|
|
.jiameng{
|
|
width: 100%;
|
|
text-align: center;
|
|
background-color: #fff;
|
|
margin: auto;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
image{
|
|
width: 710rpx;
|
|
height: 220rpx;
|
|
}
|
|
}
|
|
.name{
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #3D3D3D;
|
|
border-left: 8rpx solid #48893B;
|
|
padding-left: 12rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.gongneng{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 44rpx;
|
|
.rt{
|
|
image{
|
|
width: 20rpx;
|
|
height: 46rpx;
|
|
}
|
|
}
|
|
.lt{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 36rpx;
|
|
color: #3D3D3D;
|
|
image{
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
margin-right: 18rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.top{
|
|
width: 674rpx;
|
|
height: 252rpx;
|
|
background: #3D3D3D;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
margin: auto;
|
|
margin-top: 60rpx;
|
|
padding: 26rpx 18rpx;
|
|
box-sizing: border-box;
|
|
.chakan{
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 10rpx;
|
|
box-sizing: border-box;
|
|
view{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.price{
|
|
font-weight: 600;
|
|
font-size: 48rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
font-size: 24rpx;
|
|
color: #D8D8D8;
|
|
image{
|
|
width: 14rpx;
|
|
height: 36rpx;
|
|
margin-left: 10rpx;
|
|
margin-top: 4rpx;
|
|
}
|
|
}
|
|
.name{
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #FFDB24;
|
|
image{
|
|
width: 78rpx;
|
|
height: 78rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
.chongzhi{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.cz{
|
|
width: 218rpx;
|
|
height: 62rpx;
|
|
background: linear-gradient( 90deg, #FFDB24 0%, #FFF7CD 100%);
|
|
border-radius: 38rpx 38rpx 38rpx 38rpx;
|
|
font-size: 32rpx;
|
|
color: #5D5320;
|
|
text-align: center;
|
|
line-height: 62rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</style> |