You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
407 lines
11 KiB
407 lines
11 KiB
<template> |
|
<view class="bg-white page-content"> |
|
<view class="bg-img padding-bottom-lg flex align-center" |
|
style="background-image: url(https://xoil-public.oss-cn-beijing.aliyuncs.com/baichuan_MP/bg-wg@ZP.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('+imgURL+'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 style="margin-bottom: 10rpx;" class="xu-content margin"> |
|
<view style="border-radius: 6px 6px 0px 0px !important;" class="bg-white self-card person-card radius my-shadow" v-if="!isCompany"> |
|
<view class="flex solid-bottom padding-xs justify-between person-vip"> |
|
<view class="radius padding-xs text-xs"> |
|
<!-- <text class="icon-person cuIcon-crownfill padding-right-xs"></text> --> |
|
<my-icon iconName="wd-ge-hy.png" class="padding-right-xs"></my-icon> |
|
<text class="icon-person ">个人会员</text> |
|
</view> |
|
<!-- <view class="radius padding-xs text-xs" @tap="changeAccount('1')"> |
|
<my-icon iconName="wd-qh.png" class="padding-right-xs"></my-icon> |
|
<text class="text-white "> |
|
<image :src="starUrl+'wd-qh.png'" class="van-icon__image van-icon"></image> |
|
切换企业会员 |
|
</text> |
|
</view> --> |
|
</view> |
|
<!-- <view class="padding-xl text-center padding-top padding-bottom"> |
|
<view class="text-sl text-bold text-black"> |
|
{{userTotal.oilCardTotalPrice|moneyFormat}} |
|
</view> |
|
<view class="text-sm"> |
|
星油豆 |
|
</view> |
|
<view class="flex padding-xs margin-top-sm justify-around "> |
|
<view class="radius padding-xs"> |
|
<button class="cu-btn mr-btn mr-back-btn" @tap="toCards">消费明细</button> |
|
</view> |
|
<view class="radius padding-xs"> |
|
<button class="cu-btn mr-btn" @tap="routerTo('/BagMoney/pages/reCharge/reCharge')"> |
|
<text class=" padding-left padding-right">充值</text> |
|
</button> |
|
</view> |
|
</view> |
|
</view> --> |
|
</view> |
|
<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 class="radius padding-xs text-xs" @tap="changeAccount('0')">> |
|
<my-icon iconName="wd-qh.png" class="padding-right-xs"></my-icon> |
|
<text class="text-white"> |
|
<image :src="starUrl+'wd-qh.png'" class="van-icon__image van-icon"></image> |
|
切换个人会员 |
|
</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="grid col-2 cu-list text-center margin-top-sm margin-bottom-sm "> |
|
<view class="cu-item no-mr-border"> |
|
<view class="text-xxl text-bold text-black"> |
|
{{userTotal.oilCardTotalPrice|moneyFormat}} |
|
</view> |
|
<view class="text-sm"> |
|
钱包余额（元） |
|
</view> |
|
</view> |
|
<view class="cu-item no-mr-border"> |
|
<view class="text-xxl text-bold text-black"> |
|
{{userTotal.oilCardTotalPrice|moneyFormat}} |
|
</view> |
|
<view class="text-sm"> |
|
钱包余额（元） |
|
</view> |
|
</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 style="margin-top: 10rpx;border-radius: 0 0 6px 6px;" 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="otherImgURL+'hb@ZP.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="otherImgURL+'hd@ZP.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="otherImgURL+'tj@ZP.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="otherImgURL+'sm@ZP.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> |
|
</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 { |
|
otherImgURL: this.global.otherImgURL, |
|
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 |
|
} |
|
} |
|
}) |
|
}, |
|
onTapUserInfo(){ |
|
if(uni.getStorageSync('user')){ |
|
this.routerTo('/BagSetup/setup/setup') |
|
}else{ |
|
uni.reLaunch({ |
|
url:'../../../BagAuth/pages/login/login' |
|
}) |
|
} |
|
}, |
|
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) |
|
} |
|
}) |
|
}, |
|
changeAccount(type) { |
|
// 切换账户类型为 |
|
// this.$emit('switchType',type) |
|
|
|
}, |
|
toCards() { |
|
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>
|
|
|