361 lines
7.6 KiB
Vue
361 lines
7.6 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="container">
|
||
<view class="my-header">
|
||
<view class="my-icons" @click="goback"> <uni-icons type="left" size="16"></uni-icons> </view>
|
||
<view class="my-text">卡包</view>
|
||
<view class="my-icons"></view>
|
||
</view>
|
||
<!-- 顶部区域 -->
|
||
|
||
<!-- 储值卡 -->
|
||
<view class="xyihang">
|
||
<view class="title-hei">储值卡</view>
|
||
</view>
|
||
<view class="card-cz">
|
||
<view class="card-top">
|
||
<view class="cardimg">
|
||
<image src="../../static/imgs/jyz.png" mode="aspectFit"></image>
|
||
</view>
|
||
<!-- <text>油站名称</text> -->
|
||
</view>
|
||
<view class="dis-but">
|
||
<view class="bai-box">
|
||
<view class="">通用余额</view>
|
||
<view class="">￥ <text style="font-weight: bold;font-size: 26px;">{{cardBalance || '0'}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="anniu-cz" @click="gocard(0)">
|
||
<text>立即充值</text>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<!-- 囤油卡 -->
|
||
<view class="xyihang">
|
||
<view class="title-hei">囤油卡</view>
|
||
<view class="d_dis">
|
||
<view class="" @click="s_()">
|
||
<text>上一张</text>
|
||
<uni-icons type="reload" color="#2979ff" size="20"></uni-icons>
|
||
</view>
|
||
<view class="" @click="x_()">
|
||
<text>下一张</text>
|
||
<uni-icons type="refreshempty" color="#2979ff" size="20"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card-ty">
|
||
<view class="card-top">
|
||
<view class="cardimg">
|
||
<image src="../../static/imgs/jyzb.png" mode="aspectFit"></image>
|
||
</view>
|
||
<!-- <text style="color: #ffffff;">油站名称</text> -->
|
||
</view>
|
||
|
||
<view style="width: 100%;display: flex;align-items: center;justify-content: space-between; ">
|
||
<view class="bai-box">
|
||
<view class="title-card">囤油卡</view>
|
||
<view class="">{{cardsList[cardsIndex].type || '暂无囤油'}}:{{cardsList[cardsIndex].oilName || '0'}}
|
||
</view>
|
||
<view>剩余油量：{{cardsList[cardsIndex].refuelMoney || '0'}}L</view>
|
||
<!-- <view style="lins"> **** **** **** 970 </view> -->
|
||
</view>
|
||
<!-- <view class="">
|
||
<uni-icons type="eye-slash-filled" color="#ffffff" size="30"
|
||
style="margin-right: 15px;"></uni-icons>
|
||
</view> -->
|
||
</view>
|
||
<view class="z_yw">
|
||
<view class="anniu-cz" @click="gocard(1)">
|
||
<text>立即充值</text>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<!-- 礼品卡 -->
|
||
<view class="xyihang">
|
||
<view class="title-hei">礼品卡</view>
|
||
<!-- <view class="">
|
||
<text>下一张</text>
|
||
<uni-icons type="refreshempty" color="#2979ff" size="20"></uni-icons>
|
||
</view> -->
|
||
</view>
|
||
<view class="card-lp">
|
||
<view class="card-top">
|
||
<view class="cardimg">
|
||
<image src="../../static/imgs/jyzb.png" mode="aspectFit"></image>
|
||
</view>
|
||
<!-- <text style="color: #ffffff;">油站名称</text> -->
|
||
</view>
|
||
|
||
<view style="width: 100%;display: flex;align-items: center;justify-content: space-between; ">
|
||
<view class="bai-box">
|
||
<view class="title-card">礼品卡</view>
|
||
<view class="">卡号: **** **** **** ****</view>
|
||
<view style="lins"> 卡密: **** **** **** **** </view>
|
||
</view>
|
||
<view class="">
|
||
<uni-icons type="eye-slash-filled" color="#ffffff" size="30"
|
||
style="margin-right: 15px;"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="z_yw">
|
||
<view class="anniu-cz" @click="gocard(2)">
|
||
<text>立即兑换</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from "../../utils/request";
|
||
export default {
|
||
data() {
|
||
return {
|
||
query: {
|
||
chainStoreId: '',
|
||
couponType: '',
|
||
useStatus: 0,
|
||
pageNo: 1,
|
||
pageSize: 10
|
||
},
|
||
cardBalance: 0.00,
|
||
cardsList: [],
|
||
cardsIndex: 0,
|
||
title: '',
|
||
}
|
||
},
|
||
|
||
components: {
|
||
|
||
},
|
||
onShow() {
|
||
this.query.chainStoreId = uni.getStorageSync('chainStoreId');
|
||
// this.getCardFuleRecords();
|
||
this.getUserBalance()
|
||
},
|
||
methods: {
|
||
gocard(id) {
|
||
uni.navigateTo({
|
||
url: '/pagesHome/oilRecharge/oilRecharge?id=' + id
|
||
})
|
||
},
|
||
s_() {
|
||
if (this.cardsIndex == 0) {
|
||
uni.showToast({
|
||
title: '没有上一张了',
|
||
icon: 'error'
|
||
})
|
||
return
|
||
}
|
||
this.cardsIndex--
|
||
|
||
},
|
||
x_() {
|
||
if (this.cardsIndex < this.toil) {
|
||
this.cardsIndex++
|
||
} else {
|
||
uni.showToast({
|
||
title: '没有下一张了哦',
|
||
icon: 'error'
|
||
})
|
||
|
||
}
|
||
|
||
},
|
||
getCardFuleRecords() {
|
||
request({
|
||
url: 'business/marketingActivity/cardFuelRecord/queryByPageApplet',
|
||
method: 'get',
|
||
}).then(res => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
this.cardsList = res.data.records
|
||
console.log(this.toil);
|
||
}
|
||
})
|
||
},
|
||
getUserBalance() {
|
||
this.cardsList = []
|
||
request({
|
||
url: '/business/userManager/user/getUserBalanceApplet',
|
||
method: 'get',
|
||
params: this.query
|
||
}).then(res => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
this.cardBalance = res.data.cardBalance
|
||
this.cardsList = JSON.parse(res.data.refuelMoney)
|
||
if (this.cardsList.length != 0) {
|
||
this.toil = this.cardsList.length - 1
|
||
|
||
} else {
|
||
this.toil = this.cardsList.length
|
||
}
|
||
}
|
||
})
|
||
},
|
||
goback() {
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
}
|
||
</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: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: #000;
|
||
box-sizing: border-box;
|
||
padding: 0px 15px;
|
||
padding-top: 40px;
|
||
|
||
.my-icons {
|
||
width: 20px;
|
||
|
||
}
|
||
|
||
position: fixed;
|
||
top: 0px;
|
||
}
|
||
|
||
.d_dis {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.card-cz {
|
||
width: 90%;
|
||
border-radius: 8px;
|
||
background-color: #9ea1ad;
|
||
height: 180px;
|
||
margin: 10px auto;
|
||
background: url('http://47.95.206.185:83/card.png')center no-repeat;
|
||
background-size: 100% 100%;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
}
|
||
|
||
.card-ty {
|
||
width: 90%;
|
||
border-radius: 8px;
|
||
background-color: #9ea1ad;
|
||
height: 180px;
|
||
margin: 10px auto;
|
||
background: url('http://47.95.206.185:83/dhq.png')center no-repeat;
|
||
background-size: 100% 100%;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
}
|
||
|
||
.card-lp {
|
||
width: 90%;
|
||
border-radius: 8px;
|
||
background-color: #9ea1ad;
|
||
height: 180px;
|
||
margin: 10px auto;
|
||
background: url('http://47.95.206.185:83/lpk.png')center no-repeat;
|
||
background-size: 100% 100%;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
}
|
||
|
||
.dis-but {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.anniu-cz {
|
||
width: 100px;
|
||
height: 30px;
|
||
border-radius: 50px;
|
||
background-color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
}
|
||
|
||
.bai-box {
|
||
color: white;
|
||
}
|
||
|
||
.card-top {
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
}
|
||
|
||
.cardimg {
|
||
width: 18px;
|
||
height: 18px;
|
||
// background: linear-gradient(90deg, #FFD57C 0%, #F8A82F 100%);
|
||
background: #3d4141;
|
||
border-radius: 6px 1px 6px 1px;
|
||
margin-right: 5px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
image {
|
||
width: 50%;
|
||
height: 50%;
|
||
}
|
||
}
|
||
|
||
.title-card {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.xyihang {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 16px;
|
||
color: #2979ff;
|
||
}
|
||
|
||
.title-hei {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #000;
|
||
}
|
||
|
||
.z_yw {
|
||
width: 100%;
|
||
margin: 5px auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
</style> |