350 lines
7.2 KiB
Vue
350 lines
7.2 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=""></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 || ''}}</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=""></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].oilType || ''}}
|
|
</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=""></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="">卡号:454545578545</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(2)">
|
|
<text>立即兑换</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from "../../utils/request";
|
|
export default {
|
|
data() {
|
|
return {
|
|
cardBalance: 0.00,
|
|
cardsList: [],
|
|
cardsIndex: 0,
|
|
title: '',
|
|
}
|
|
},
|
|
|
|
components: {
|
|
|
|
},
|
|
onShow() {
|
|
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
|
|
|
|
if (this.cardsList.length != 0) {
|
|
this.toil = this.cardsList.length - 1
|
|
|
|
} else {
|
|
this.toil = this.cardsList.length
|
|
}
|
|
console.log(this.toil);
|
|
}
|
|
})
|
|
},
|
|
getUserBalance() {
|
|
request({
|
|
url: '/business/userManager/user/getUserBalance',
|
|
method: 'get',
|
|
}).then(res => {
|
|
console.log(res)
|
|
if (res.code == 200) {
|
|
this.cardBalance = res.data.cardBalance
|
|
}
|
|
})
|
|
},
|
|
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> |