374 lines
7.4 KiB
Vue
374 lines
7.4 KiB
Vue
<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 src="../../static/imgs/myx.png" mode=""></image>
|
||
</view>
|
||
<view class="">
|
||
<view class="user-tel">135****7106</view>
|
||
<view class="user-name" @click="gorefuel">蓝鲸加油站（总站）<uni-icons type="right" color="#c1c1ff"
|
||
size="12"></uni-icons> </view>
|
||
</view>
|
||
</view>
|
||
<view class="vipnber">会员等级 <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">0.00</view>
|
||
</view>
|
||
<text style="color: #999999;">|</text>
|
||
<view class="jg-box" @click="gooil()">
|
||
<view class="jg-box-title">囤油升数</view>
|
||
<view class="jg-box-nmb">0.00</view>
|
||
</view>
|
||
|
||
<text style="color: #999999;">|</text>
|
||
<view class="jg-box">
|
||
<view class="jg-box-title">卡券</view>
|
||
<view class="jg-box-nmb">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">0</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="my-top-box" style="margin-top: 45px;">
|
||
<view class="centenr-sx" @click="gomyorder()">
|
||
<view class="centenr-img">
|
||
<image src="../../static/my/dingdan.png" mode=""></image>
|
||
</view>
|
||
<view class="centenr-size">
|
||
我的订单
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="centenr-sx">
|
||
<view class="centenr-img">
|
||
<image src="../../static/my/dsy.png" mode=""></image>
|
||
</view>
|
||
<view class="centenr-size">
|
||
待使用
|
||
</view>
|
||
</view>
|
||
|
||
<view class="centenr-sx">
|
||
<view class="centenr-img">
|
||
<image src="../../static/my/ywc.png" mode=""></image>
|
||
</view>
|
||
<view class="centenr-size">
|
||
已完成
|
||
</view>
|
||
</view>
|
||
<view class="centenr-sx">
|
||
<view class="centenr-img">
|
||
<image src="../../static/my/dpj.png" mode=""></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">
|
||
<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=""></image>
|
||
</view>
|
||
<view class="centenr-size">
|
||
今日油价
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="centenr-sx">
|
||
<view class="centenr-img">
|
||
<image src="../../static/my/jl.png" mode=""></image>
|
||
</view>
|
||
<view class="centenr-size">
|
||
核销记录
|
||
</view>
|
||
|
||
</view>
|
||
<view class="centenr-sx">
|
||
<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">
|
||
<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">
|
||
<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">
|
||
<view class="centenr-img">
|
||
<image src="../../static/my/kb.png"></image>
|
||
</view>
|
||
<view class="centenr-size">
|
||
子卡管理
|
||
</view>
|
||
</view>
|
||
<view class="centenr-sx">
|
||
<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 tabbar from "../../components/tabbar/tabbar.vue"
|
||
export default {
|
||
data() {
|
||
return {
|
||
title: '',
|
||
msg: "3",
|
||
|
||
}
|
||
},
|
||
|
||
components: {
|
||
tabbar
|
||
},
|
||
methods: {
|
||
gomyorder() {
|
||
uni.navigateTo({
|
||
url: '/pagesMy/myorder/myorder'
|
||
})
|
||
},
|
||
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() {
|
||
uni.navigateTo({
|
||
url: '/pagesMy/setup/index'
|
||
})
|
||
},
|
||
gorefuel() {
|
||
uni.navigateTo({
|
||
url: '/pagesRefuel/pagesRefuel/index'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
|
||
.jg-box-nmb {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.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> |