<template>
<view class="content">
<view class="container">
<view class="my-header">
<view class="my-text">个人中心</view>
</view>
<!-- 顶部区域 -->
<view class="my-top">
<view class="dis-box">
<view class="dis">
<view class="touxiang" @click="goSetup">
<image v-if="user.avatar!='' && user.avatar!=null && user.avatar!=undefined"
:src="baseUrl + user.avatar" mode="aspectFit"></image>
<image v-else src="../../static/imgs/myx.png" mode="aspectFit"></image>
</view>
<view class="">
<view class="user-tel" @click="goSetup">{{user.mobile?user.mobile:"点击登录"}}</view>
<view class="user-name" @click="gorefuel">
{{store.name}}{{store.description ? "("+store.description+")" : ""}}<uni-icons
type="right" color="#c1c1ff" size="12"></uni-icons>
</view>
</view>
</view>
<view class="vipnber" @click="govip()">会员等级 <uni-icons type="right" color="#ffffff"
size="16"></uni-icons></view>
</view>
<view class="my-top-box">
<view class="jg-box" @click="goMony()">
<view class="jg-box-title">储值余额</view>
<view class="jg-box-nmb">{{cardBalance || 0 }}元</view>
</view>
<text style="color: #999999;">|</text>
<view class="jg-box" @click="goOil()">
<view class="jg-box-title">锁价次数</view>
<view class="jg-box-nmb">{{countList.length || 0 }}次</view>
</view>
<text style="color: #999999;">|</text>
<view class="jg-box" @click="toCoupons">
<view class="jg-box-title">卡券</view>
<view class="jg-box-nmb">{{cardsList.length || 0 }}</view>
</view>
<text style="color: #999999;">|</text>
<view class="jg-box" style="border: none;" @click="goIntegral()">
<view class="jg-box-title">我的积分</view>
<view class="jg-box-nmb">{{myPoints || 0 }}</view>
</view>
</view>
</view>
<view class="my-top-box" style="margin-top: 45px;">
<view class="centenr-sx" @click="goMyOrder(0)">
<view class="centenr-img">
<image src="../../static/my/dingdan.png" mode="aspectFit"></image>
</view>
<view class="centenr-size">
我的订单
</view>
</view>
<view class="centenr-sx" @click="goMyOrder(1)">
<view class="centenr-img">
<image src="../../static/my/dsy.png" mode="aspectFit"></image>
</view>
<view class="centenr-size">
待支付
</view>
</view>
<view class="centenr-sx" @click="goMyOrder(2)">
<view class="centenr-img">
<image src="../../static/my/ywc.png" mode="aspectFit"></image>
</view>
<view class="centenr-size">
已完成
</view>
</view>
<view class="centenr-sx" @click="goMyOrder(3)">
<view class="centenr-img">
<image src="../../static/my/dpj.png" mode="aspectFit"></image>
</view>
<view class="centenr-size">
待评价
</view>
</view>
</view>
<view class="box-centenr">
<view class="box-centenr-title">我的服务</view>
<view class="wrap-box">
<view class="centenr-sx" @click="goReder">
<view class="centenr-img">
<image src="../../static/my/lpk.png"></image>
</view>
<view class="centenr-size">
礼品卡
</view>
</view>
<view class="centenr-sx" @click="goToDaby">
<view class="centenr-img">
<image src="../../static/my/jryj.png" mode="aspectFit"></image>
</view>
<view class="centenr-size">
今日油价
</view>
</view>
<view class="centenr-sx" @click="goWriteoff()">
<view class="centenr-img">
<image src="../../static/my/jl.png" mode="aspectFit"></image>
</view>
<view class="centenr-size">
核销记录
</view>
</view>
<view class="centenr-sx" @click="goRecharge()">
<view class="centenr-img">
<image src="../../static/my/chongzhi.png" style="width: 30px;height: 30px; "></image>
</view>
<view class="centenr-size">
充值记录
</view>
</view>
<view class="centenr-sx" @click="goInvte()">
<view class="centenr-img">
<image src="../../static/my/lp.png" style="width: 30px;height: 30px; "></image>
</view>
<view class="centenr-size">
邀请有礼
</view>
</view>
<view class="centenr-sx" @click="goPoints()">
<view class="centenr-img">
<image src="../../static/my/jfsc.png" style="width: 30px;height: 30px; "></image>
</view>
<view class="centenr-size">
积分商城
</view>
</view>
<view class="centenr-sx" @click="goCard()">
<view class="centenr-img">
<image src="../../static/my/kb.png"></image>
</view>
<view class="centenr-size">
子卡管理
</view>
</view>
<view class="centenr-sx" @click="goFeedback()">
<view class="centenr-img">
<image src="../../static/my/yj.png"></image>
</view>
<view class="centenr-size">
意见反馈
</view>
</view>
</view>
</view>
<u-divider text="来个油惠" :hairline="true"></u-divider>
<tabbar :msg="msg"></tabbar>
</view>
</view>
</template>
<script>
import request from "../../utils/request";
import tabbar from "../../components/tabbar/tabbar.vue"
export default {
data() {
return {
query: {
storeId: '',
chainStoreId: '',
couponType: '',
useStatus: 0,
pageNo: 1,
pageSize: 10
},
querys: {
mtUserId: '',
storeId: '',
chainStoreId: '',
recordName: '囤油卡',
pageNo: 1,
pageSize: 100
},
countList: [],
myPoints: 0,
cardsList: [],
refuelMoney: [],
cardBalance: 0.00,
title: '',
AppToken: uni.getStorageSync("App-Token"),
msg: "3",
// url信息
baseUrl: this.$baseUrl,
user: {},
store: {},
}
},
components: {
tabbar
},
onShow() {
this.getUser()
this.query.storeId = uni.getStorageSync("storeId")
this.query.chainStoreId = uni.getStorageSync('chainStoreId')
this.querys.storeId = uni.getStorageSync("storeId")
this.querys.chainStoreId = uni.getStorageSync('chainStoreId')
this.getUserBalance();
this.getGiftRecords();
this.getStore(uni.getStorageSync("storeId"));
this.getAllOrderList();
},
methods: {
// 查询全部充值订单
getAllOrderList() {
request({
url: 'business/marketingActivity/cardValueRecord/selectAllRecord',
method: 'get',
params: this.querys
}).then((res) => {
if (res.code == 200) {
this.countList = res.data.records
this.totalDetail = res.data.total
this.show = false
uni.hideLoading();
}
})
},
// 获取门店信息
getStore(id) {
let _this = this;
request({
url: "business/storeInformation/store/queryStoreById",
method: 'post',
data: {
"storeId": id
},
}).then((res) => {
_this.store = res.data;
})
},
// 查询当前登录用户信息
getUser() {
console.log(this.AppToken, 2343);
if (!this.AppToken) {
return;
}
request({
url: 'business/userManager/user/getUser',
method: 'get',
}).then(res => {
console.log(res, 1541);
if (res.data) {
this.user = res.data
uni.setStorageSync('userId', res.data.id)
this.user.mobile = res.data.mobile.slice(0, 3) + "****" + res.data.mobile.slice(res.data
.mobile.length - 4, res.data.mobile.length)
}
})
},
goMyOrder(id) {
uni.navigateTo({
url: '/pagesMy/myorder/myorder?id=' + id
})
},
goReder() {
uni.navigateTo({
url: '/pagesHome/RechargeRecords/RechargeRecords'
})
},
goToDaby() {
uni.navigateTo({
url: '/pagesMy/today/today'
})
},
goIntegral() {
uni.navigateTo({
url: '/pagesMy/integral/integral'
})
},
goOil() {
uni.navigateTo({
url: '/pagesMy/oilBalance/oilBalance'
})
},
goMony() {
uni.navigateTo({
url: '/pagesMy/moneyBalance/moneyBalance'
})
},
goSetup() {
if (!this.user.mobile) {
uni.navigateTo({
url: '/pagesLogin/login/login'
})
return;
}
uni.navigateTo({
url: '/pagesMy/setup/index'
})
},
gorefuel() {
uni.navigateTo({
url: '/pagesRefuel/pagesRefuel/index'
})
},
goWriteoff() {
uni.navigateTo({
url: '/pagesMy/writeOff/writeOff'
})
},
goRecharge() {
uni.navigateTo({
url: '/pagesMy/Recharge/Recharge'
})
},
goPoints() {
uni.navigateTo({
url: '/pagesHome/PointsMall/PointsMall'
})
},
goInvte() {
uni.navigateTo({
url: '/pagesMy/invite/invite'
})
},
goCard() {
uni.navigateTo({
url: '/pagesMy/CardManagement/CardManagement'
})
},
govip() {
uni.navigateTo({
url: '/pagesMy/VIP/vip'
})
},
goFeedback() {
uni.navigateTo({
url: '/pagesMy/feedback/feedback'
})
},
getUserBalance() {
if (!this.AppToken) {
return;
}
request({
url: '/business/userManager/user/getUserBalanceApplet',
method: 'get',
params: this.query
}).then(res => {
if (res.data) {
this.cardBalance = res.data.cardBalance,
this.myPoints = res.data.points,
/* if (res.data.refuelMoney!=null && res.data.refuelMoney!=""){
this.refuelMoney = JSON.parse(res.data.refuelMoney);
} */
this.refuelMoney = JSON.parse(res.data.refuelMoney);
console.log("333333333333333", this.refuelMoney);
}
})
},
getGiftRecords() {
if (!this.AppToken) {
return;
}
request({
url: 'business/marketingActivity/cardFavorable/applet',
method: 'get',
params: this.query
}).then(res => {
if (res.code == 200) {
this.cardsList = res.data.records
}
})
},
// 查询我的积分
toCoupons() {
uni.navigateTo({
url: '/pagesMy/Coupons/Coupons'
})
}
}
}
</script>
<style scoped lang="scss">
.content {
background: #f4f5f6;
}
.container {
width: 100%;
height: 100vh;
box-sizing: border-box;
padding-top: 88px;
}
.my-header {
width: 100%;
height: 88px;
background: #304fff;
display: flex;
align-items: center;
justify-content: center;
color: white;
.my-text {
margin-top: 40px
}
position: fixed;
top: 0px;
}
.my-top {
height: 150px;
width: 100%;
background: #304fff;
box-sizing: border-box;
padding-top: 1px;
}
.dis {
display: flex;
align-items: center;
}
.dis-box {
width: 90%;
margin: 20px auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.touxiang {
width: 65px;
height: 65px;
border-radius: 50%;
background-color: #ebf5ff;
overflow: hidden;
margin-right: 5px;
image {
width: 100%;
height: 100%;
}
}
.user-tel {
font-weight: bold;
font-size: 20px;
color: white;
margin-bottom: 5px;
}
.user-name {
font-size: 12px;
color: #c1c1ff;
}
.vipnber {
color: white;
}
.my-top-box {
width: 90%;
height: 80px;
background-color: white;
border-radius: 8px;
box-sizing: border-box;
padding: 15px;
display: flex;
align-items: center;
margin: 0 auto;
}
.jg-box {
width: 33%;
// border-right: 1px solid #999999;
text-align: center;
}
.jg-box-title {
font-size: 16px;
color: #999999;
margin-bottom: 5px;
}
.jg-box-nmb {
font-size: 12px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.box-centenr {
width: 90%;
box-sizing: border-box;
padding: 10px;
background: white;
margin: 15px auto;
margin-top: 10px;
border-radius: 8px;
}
.box-gang {
border-bottom: 1px solid #f4f5f6;
width: 100%;
box-sizing: border-box;
padding: 10px 0px;
display: flex;
align-items: center;
justify-content: space-between;
color: #404041;
}
.wrap-box {
display: flex;
flex-wrap: wrap;
}
.centenr-sx {
width: 25%;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.box-centenr-title {
font-weight: bold;
font-size: 18px;
}
.centenr-img {
margin: 2px auto;
image {
width: 32px;
height: 32px;
}
}
.centenr-size {
font-size: 14px;
}
</style>