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