351 lines
8.5 KiB
Vue
351 lines
8.5 KiB
Vue
<template>
|
||
<view class="bg-white page-content">
|
||
<view class="bg-img padding-bottom-lg flex align-center"
|
||
:style="'background-image: url('+yellowURL+'wd-sz-bg.png);height: 600upx;'">
|
||
<view class="padding-xl margin-top bg-tm text-white top-part">
|
||
<view class="padding-xs padding-top-lg text-sm padding-top">
|
||
Hi，{{(user.name?user.name:wxInfo.nickName)|nameKong}}师傅，愿你开心每一天!
|
||
</view>
|
||
<view class="padding-xs padding-bottom-lg">
|
||
<view class="cu-list menu-avatar padding-bottom-lg">
|
||
<view class="cu-item bg-tm no-mr-border">
|
||
<view v-if="wxInfo.avatarUrl" class="cu-avatar round xl" @tap="getUserInfo"
|
||
:style="'background-image:url('+wxInfo.avatarUrl+')'">
|
||
</view>
|
||
<view v-else class="cu-avatar round xl" @tap="getUserInfo"
|
||
:style="'background-image:url('+yellowURL+'default-avator.png)'">
|
||
</view>
|
||
<view class="content padding padding-top-sm" @tap="onTapUserInfo">
|
||
<view class="text-cut text-xl padding-bottom-xs">
|
||
{{(user.name?user.name:wxInfo.nickName)|nameKong}}
|
||
</view>
|
||
<view class="text-sm">
|
||
<view class="text-cut zh-label">ID:{{user.userCode?user.userCode:'未登录'}}</view>
|
||
<view class="text-cut zh-label">{{user.userPhone?user.userPhone:'点击登录'}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="action" @tap="onTapUserInfo">
|
||
<text class="cuIcon-right text-lg"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="xu-content margin">
|
||
<view class="bg-white self-card person-card radius my-shadow" v-if="isCompany">
|
||
<view class="flex solid-bottom padding-xs justify-between company-vip">
|
||
<view class="radius padding-xs text-xs">
|
||
<!-- <text class="icon-company cuIcon-crownfill padding-right-xs"></text> -->
|
||
<my-icon iconName="wd-qy-hy.png" class="padding-right-xs"></my-icon>
|
||
<text class="icon-company text-xs">企业会员</text>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="padding-sm margin-bottom" @tap="toCards">
|
||
<view class="color-666 text-sm">
|
||
</view>
|
||
<view class=" padding-sm text-center">
|
||
<view class="text-sl text-bold text-black">
|
||
{{userTotal.oilCardTotalPrice|moneyFormat}}
|
||
</view>
|
||
<view class="text-sm">
|
||
钱包余额（元）
|
||
</view>
|
||
</view>
|
||
|
||
<view class="text-center">
|
||
<text class="text-sm">您一共有
|
||
<text
|
||
class="oil-main-color padding-left-xs padding-right-xs">{{userTotal.oilCardNumber}}</text>
|
||
张油卡</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="xu-content card-menu margin margin-bottom-xs radius my-shadow">
|
||
<view class=" cu-list sm-border grid col-4 no-border ">
|
||
<view class="cu-item">
|
||
<view class=" padding-tb-0">
|
||
<view class="image-self-view">
|
||
<img :src="yellowURL+'wd-ic-1.png'" lazy-load class="png" mode="widthFix"></img>
|
||
</view>
|
||
</view>
|
||
<text>红包卡券</text>
|
||
</view>
|
||
<view class="cu-item">
|
||
<view class=" padding-tb-0">
|
||
<view class="image-self-view">
|
||
<img :src="yellowURL+'wd-ic-2.png'" lazy-load class="png" mode="widthFix"></img>
|
||
</view>
|
||
</view>
|
||
<text>活动通知</text>
|
||
</view>
|
||
<view class="cu-item">
|
||
<view class=" padding-tb-0">
|
||
<view class="image-self-view">
|
||
<img :src="yellowURL+'wd-ic-3.png'" lazy-load class="png" mode="widthFix"></img>
|
||
</view>
|
||
</view>
|
||
<text>推荐有礼</text>
|
||
</view>
|
||
<view class="cu-item" @tap="goToPage('/BagAuth/pages/agreeMent/OperationGuide')">
|
||
<view class=" padding-tb-0">
|
||
<view class="image-self-view">
|
||
<img :src="yellowURL+'wd-ic-4.png'" lazy-load class="png" mode="widthFix"></img>
|
||
</view>
|
||
</view>
|
||
<text>操作说明</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="xu-content padding-sm">
|
||
<view class="cu-list menu">
|
||
<view class="cu-item hidden-cu-item">
|
||
</view>
|
||
<view class="cu-item arrow">
|
||
<view class="content">
|
||
<image :src="starUrl+'zskf.png'" class="png" mode="aspectFit"></image>
|
||
<text class="text-grey padding-left-sm">专属客服</text>
|
||
</view>
|
||
<view class="action">
|
||
<!-- <button class="cu-btn oil-main-btn-color" open-type="contact" @contact="onContact"> -->
|
||
<!-- <text class="text-grey text-sm">打开会话</text> -->
|
||
<!-- </button> -->
|
||
<view class="cu-btn oil-main-btn-color" @click="makeCall">
|
||
<text class="text-grey text-sm">联系客服</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="cu-item arrow">
|
||
<view class="content">
|
||
<image :src="starUrl+'gywm.png'" class="png" mode="aspectFit"></image>
|
||
<text class="text-grey padding-left-sm">关于我们</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import oilSiteApi from '@/api/oil-site.js'
|
||
import accountApi from '@/api/account.js'
|
||
export default {
|
||
props: {
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
yellowURL: this.global.yellowURL,
|
||
imgURL: this.global.imgURL,
|
||
starUrl: this.global.starUrl,
|
||
isCompany: uni.getStorageSync('accountStatus'),
|
||
user: uni.getStorageSync('user'),
|
||
wxInfo: uni.getStorageSync('wxInfo'),
|
||
userTotal: {}
|
||
};
|
||
},
|
||
onShow() {
|
||
this.getAuthInfo()
|
||
this.getAmount()
|
||
},
|
||
methods: {
|
||
goToPage(url) {
|
||
if (!url) return;
|
||
uni.navigateTo({
|
||
url
|
||
});
|
||
},
|
||
getAuthInfo() {
|
||
oilSiteApi.getUserAuthInfo().then(res => {
|
||
if (res.code === 20000) {
|
||
// realStatus: 0 vehicleStatus: 0
|
||
if (this.showAuthFrzen <= new Date().getTime()) {
|
||
this.showAuthFrror = res.data.realStatus && res.data.vehicleStatus ? false : true
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getUserInfo() {
|
||
uni.getUserProfile({
|
||
desc: '获取您的头像昵称',
|
||
success: (res) => {
|
||
console.log(res)
|
||
this.wxInfo = JSON.parse(res.rawData)
|
||
uni.setStorageSync('wxInfo', JSON.parse(res.rawData))
|
||
},
|
||
complete: (msg) => {
|
||
console.log(msg)
|
||
}
|
||
})
|
||
},
|
||
onTapUserInfo(){
|
||
if(uni.getStorageSync('user')){
|
||
this.routerTo('/BagSetup/setup/setup')
|
||
}else{
|
||
uni.reLaunch({
|
||
url:'../../../BagAuth/pages/login/login'
|
||
})
|
||
}
|
||
},
|
||
|
||
toCards() {
|
||
if(Number(this.userTotal.oilCardNumber)<=0) return
|
||
uni.navigateTo({
|
||
url: '/BagMoney/pages/oilCards/oilCards'
|
||
})
|
||
},
|
||
getAmount() {
|
||
accountApi.getTotalOilCardInfo().then(res => {
|
||
if (res.code == 20000) {
|
||
this.userTotal = res.data
|
||
}
|
||
})
|
||
},
|
||
copy() {
|
||
uni.setClipboardData({
|
||
data: 'lallalala',
|
||
success() {
|
||
uni.showToast({
|
||
title: '复制成功',
|
||
position: 'bottom',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
toAuth() {
|
||
uni.navigateTo({
|
||
url: '/pages/authentication/authForm/authForm'
|
||
})
|
||
},
|
||
toQrcode() {
|
||
uni.navigateTo({
|
||
url: '/pages/qrcode/qrcodeList/qrcodeList'
|
||
});
|
||
},
|
||
routerTo(url) {
|
||
uni.navigateTo({
|
||
url: url
|
||
});
|
||
},
|
||
toLogin() {
|
||
uni.navigateTo({
|
||
url: 'pages/login/login'
|
||
});
|
||
},
|
||
// 拨打电话
|
||
makeCall() {
|
||
uni.makePhoneCall({
|
||
phoneNumber: '4008-56-5355' //仅为示例
|
||
})
|
||
},
|
||
onContact(e) {
|
||
// console.log(e)
|
||
}
|
||
},
|
||
filters: {
|
||
moneyFormat(value) {
|
||
if (value) {
|
||
return value.toFixed(2)
|
||
} else {
|
||
return '0.00'
|
||
}
|
||
},
|
||
|
||
nameKong(value) {
|
||
if (value) {
|
||
return value
|
||
} else {
|
||
return ''
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.content {
|
||
height: 100%;
|
||
}
|
||
|
||
.bottom-bar {
|
||
position: relative;
|
||
padding-top: 50px;
|
||
margin-bottom: 0;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.main-topbar>>>.cu-bar {
|
||
height: 380rpx !important;
|
||
z-index: 0 !important;
|
||
}
|
||
|
||
.main-topbar>>>.cu-bar .content {
|
||
padding-bottom: 300rpx;
|
||
}
|
||
|
||
.bottom-bar-fixed {
|
||
position: fixed;
|
||
bottom: 0;
|
||
padding-top: 70rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.main-money {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.van-tag {
|
||
display: inline-block;
|
||
padding: 0.3rem 0.4rem;
|
||
position: absolute;
|
||
right: 1px;
|
||
font-size: 12px;
|
||
top: 25%;
|
||
background-color: #b9ffca;
|
||
border-radius: 10rem 0 0 10rem;
|
||
border-color: transparent;
|
||
}
|
||
|
||
.top-part {
|
||
min-width: 100%;
|
||
position: relative;
|
||
z-index: 0;
|
||
}
|
||
|
||
.zh-label {
|
||
line-height: 1.1rem;
|
||
}
|
||
|
||
.xu-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
top: -160upx;
|
||
}
|
||
|
||
|
||
|
||
.hidden-cu-item {
|
||
min-height: 1upx !important;
|
||
}
|
||
|
||
.card-menu>>>image.png.user-png {
|
||
max-height: 100upx;
|
||
}
|
||
|
||
.image-self-view>>>img {
|
||
width: 3.5rem !important;
|
||
height: 3.5rem !important;
|
||
display: inline-block;
|
||
}
|
||
|
||
.cu-avatar {
|
||
background-color: transparent !important;
|
||
}
|
||
</style>
|