322 lines
8.3 KiB
Vue
322 lines
8.3 KiB
Vue
<template>
|
||
<view class="centenr">
|
||
<view class="top-box">
|
||
<view class="t-db">
|
||
<view class="d-s">
|
||
<view style="margin-right: 10px;">储值卡</view>
|
||
<view class="icon_">主卡</view>
|
||
</view>
|
||
<image src="../../static/new/rwm.png" style="width: 25px; height: 25px; "></image>
|
||
</view>
|
||
<view class="on-title">可用余额</view>
|
||
<view class="on-num">¥{{cardBalance.cardBalance || 0}}</view>
|
||
<view class="d-a">
|
||
<view class="_dj">
|
||
<view class="" v-if="cardBalance.giveAmount">¥{{cardBalance.cardBalance - cardBalance.giveAmount}}</view>
|
||
<view class="" v-else>¥{{cardBalance.cardBalance || 0}}</view>
|
||
<view style="font-size: 14px;">本金金额</view>
|
||
</view>
|
||
<view class="_dj">
|
||
<view class="">¥{{cardBalance.giveAmount || 0}}</view>
|
||
<view style="font-size: 14px;">赠送金额</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom-box">
|
||
<view class="or-aniu" @click="goMemberRecharge()">立即充值</view>
|
||
</view>
|
||
<view class="b_box">
|
||
<view class="g-box" @click="godetail()">
|
||
<view class="d-s">
|
||
<image src="../../static/new/k1.png" style="width: 20px; height: 20px;margin-right: 5px; "></image>
|
||
<view class="">余额明细</view>
|
||
</view>
|
||
<u-icon name="arrow-right" color="#333"></u-icon>
|
||
</view>
|
||
<view class="g-box" @click="equityShow= true">
|
||
<view class="d-s">
|
||
<image src="../../static/new/k2.png" style="width: 20px; height: 20px;margin-right: 5px; "></image>
|
||
<view class="">权益说明</view>
|
||
</view>
|
||
<u-icon name="arrow-right" color="#333"></u-icon>
|
||
</view>
|
||
<view class="g-box" @click="ruleShow = true">
|
||
<view class="d-s">
|
||
<image src="../../static/new/k3.png" style="width: 20px; height: 20px;margin-right: 5px; "></image>
|
||
<view class="">规则说明</view>
|
||
</view>
|
||
<u-icon name="arrow-right" color="#333"></u-icon>
|
||
</view>
|
||
</view>
|
||
<u-popup :show="ruleShow" :closeable="true" :round="10" mode="bottom" @close="ruleclose">
|
||
<view class="_tbox">
|
||
<view class="_btop">规则说明</view>
|
||
<view class="_bbox">
|
||
<!-- <view class="b_title">获取您的位置信息</view> -->
|
||
<view class="">1、开卡与充值：
|
||
①开卡通常需要携带本人身份证原件到油站办理，并支付一定的
|
||
工本费（如15元左右）。部分站点首次充值达到一定金额（如50
|
||
0元或1000元）可以免除开卡费用。
|
||
②充值可以通过线上APP或到加油站进行，充值金额可自由选择，
|
||
但一般会有一定的优惠活动，如充值100元赠送3元等。
|
||
2、使用与管理：
|
||
①储值卡按适用对象分为记名卡和不记名卡两种。记名卡可以享
|
||
受积分回馈和其他增值服务，不记名卡则不能。
|
||
②加油时需将储值卡插入加油卡槽内，按照提示选择加油金额并
|
||
输入密码（如有设置）即可完成加油。加油后需妥善保管好加油
|
||
卡和加油小票。
|
||
③储值卡应妥善保管，如有丢失应及时挂失，挂失前造成的经济
|
||
损失由持卡人承担。
|
||
3、积分管理：
|
||
①积分累积和回馈政策根据油站的具体规定执行，持卡人可通过
|
||
油站官网、APP或客服热线查询积分情况。
|
||
②积分有效期和兑换规则需根据油站的具体规定执行，一般会有
|
||
一定的限制条件。
|
||
4、其他规定：
|
||
①部分油站可能对储值卡的使用范围进行限制，如仅限本油站或
|
||
特定品牌油站使用。
|
||
②持卡人应遵守油站的相关规定和制度，如不得使用储值卡进行
|
||
套现、购买非油品等违规行为。</view>
|
||
</view>
|
||
|
||
</view>
|
||
</u-popup>
|
||
<u-popup :show="equityShow" :closeable="true" :round="10" mode="bottom" @close="equityclose">
|
||
<view class="_tbox">
|
||
<view class="_btop">权益说明</view>
|
||
<view class="_bbox">
|
||
<!-- <view class="b_title">获取您的位置信息</view> -->
|
||
<view class="">1、优惠加油：
|
||
①使用储值卡在加油站加油通常可以享受一定的优惠，如每升油
|
||
便宜0.1-0.8元不等，具体优惠幅度根据地区、时间段的促销活动
|
||
而定。
|
||
②充值达到一定金额（如1000元、2000元、5000元）后，还可
|
||
以享受一定期限（如3到6个月）的额外加油优惠，如1%到2%
|
||
的优惠。
|
||
2、积分回馈：
|
||
①使用储值卡加油可以累积积分，积分可用于兑换不同面值的电
|
||
子充值卡、视频网站的会员或日常生活用品等。
|
||
②根据客户加油卡累计积分数值设置客户级别（如标准卡、金
|
||
卡、铂金卡、钻石卡），不同级别的客户享受不同的积分回馈政
|
||
策，积分积累速度更快，回馈更多。
|
||
3、增值服务：
|
||
②支持线上充值和查询，方便持卡人随时掌握余额和积分
|
||
情况。
|
||
4、便利性：
|
||
①储值卡具有极高的便利性，可以实现无现金加油，减少携带现
|
||
金的麻烦和风险。
|
||
②支持线上充值和查询，方便持卡人随时掌握余额和积分情况。</view>
|
||
</view>
|
||
|
||
</view>
|
||
</u-popup>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from "../../utils/request";
|
||
export default {
|
||
data() {
|
||
return {
|
||
query: {
|
||
chainStoreId: '',
|
||
couponType: '',
|
||
useStatus: 0,
|
||
pageNo: 1,
|
||
pageSize: 10
|
||
},
|
||
ruleShow: false,
|
||
equityShow: false,
|
||
windex: 0,
|
||
cardBalance:{}
|
||
}
|
||
},
|
||
onShow() {
|
||
this.query.chainStoreId = uni.getStorageSync('chainStoreId');
|
||
this.getUserBalance()
|
||
},
|
||
methods: {
|
||
// 跳转会员充值
|
||
goMemberRecharge() {
|
||
uni.navigateTo({
|
||
url: '/pagesHome/memberRecharge/index'
|
||
})
|
||
},
|
||
getUserBalance() {
|
||
request({
|
||
url: '/business/userManager/user/getUserBalanceApplet',
|
||
method: 'get',
|
||
params: this.query
|
||
}).then(res => {
|
||
if (res.code == 200) {
|
||
this.cardBalance = res.data
|
||
}
|
||
})
|
||
},
|
||
ruleclose() {
|
||
this.ruleShow = false
|
||
},
|
||
equityclose() {
|
||
this.equityShow = false
|
||
},
|
||
setIndex(index) {
|
||
this.windex = index
|
||
},
|
||
godetail() {
|
||
uni.navigateTo({
|
||
url: '/pagesHome/cardDetails/detailed'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.centenr {
|
||
background: #F9F9F9;
|
||
width: 100%;
|
||
height: 100vh;
|
||
}
|
||
|
||
.top-box {
|
||
width: 95%;
|
||
height: 150px;
|
||
background: linear-gradient(135deg, #F77955 0%, #FFA360 100%, #F9C58C 100%);
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
margin: 0 auto;
|
||
color: #fff;
|
||
}
|
||
|
||
.bottom-box {
|
||
width: 95%;
|
||
height: 70px;
|
||
background: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.t-db {
|
||
width: 100%;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.b_box {
|
||
width: 95%;
|
||
margin: 15px auto;
|
||
background: #fff;
|
||
|
||
}
|
||
|
||
.g-box {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 15px 10px;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.d-s {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.or-aniu {
|
||
font-size: 14px;
|
||
color: #FA6400;
|
||
width: 195px;
|
||
height: 30px;
|
||
border: 1px solid #FA6400;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.icon_ {
|
||
width: 30px;
|
||
height: 16px;
|
||
background: rgba(255, 255, 255, 0.48);
|
||
border-radius: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-weight: 500;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.d-a {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.on-title {
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
width: 100%;
|
||
text-align: center;
|
||
|
||
}
|
||
|
||
.on-num {
|
||
font-size: 24px;
|
||
color: #FFFFFF;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin: 10px auto;
|
||
}
|
||
|
||
._dj {
|
||
font-size: 14px;
|
||
}
|
||
|
||
._tbox {
|
||
border-radius: 10px;
|
||
background: #fff;
|
||
width: 100%;
|
||
|
||
|
||
}
|
||
|
||
._btop {
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
|
||
._bbox {
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
line-height: 18px;
|
||
}
|
||
|
||
.b_title {
|
||
font-weight: bold;
|
||
}
|
||
|
||
|
||
.b-cen {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
}
|
||
</style> |