362 lines
6.5 KiB
Vue
362 lines
6.5 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="card_" @click="goDetails()">
|
||
<view class="top_card">
|
||
<view class="">储值卡</view>
|
||
<view class="" @click="goCode()">
|
||
<image src="../../static/new/rwm.png" style="width: 25px; height: 25px; "></image>
|
||
</view>
|
||
</view>
|
||
<view class="card-b">
|
||
储值卡余额
|
||
</view>
|
||
<view class="card-num">
|
||
¥123456.98
|
||
</view>
|
||
<view class="r-box">
|
||
NO.xxxxxxxxxxxxxxxxxx
|
||
</view>
|
||
</view>
|
||
<view class="card_1">
|
||
<view class="top_card">
|
||
<view class="">囤油卡</view>
|
||
<view style="display: flex;">
|
||
<view style="margin-right: 5px;">汽油92# 7.28元/L</view>
|
||
<image src="../../static/new/rwm.png" style="width: 25px; height: 25px; "></image>
|
||
</view>
|
||
</view>
|
||
<view class="card-b">
|
||
剩余油量
|
||
</view>
|
||
<view class="card-num">
|
||
123.98L
|
||
</view>
|
||
<view class="r-box">
|
||
NO.xxxxxxxxxxxxxxxxxx
|
||
</view>
|
||
</view>
|
||
<view class="card_2">
|
||
<view class="top_card">
|
||
<view class="">礼品卡</view>
|
||
<view class="">
|
||
面值 1000元
|
||
</view>
|
||
</view>
|
||
<view class="card-b">
|
||
卡号：xxxxxxxxxxxxxxxxx
|
||
</view>
|
||
<view class="card-b">
|
||
卡密：xxxxxxxxxxxxxxxxx
|
||
</view>
|
||
<view class="r-box">
|
||
NO.xxxxxxxxxxxxxxxxxx
|
||
</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: {
|
||
goCode() {
|
||
uni.navigateTo({
|
||
url: '/pagesHome/QRcode/QRcode'
|
||
})
|
||
},
|
||
gocard(id) {
|
||
uni.navigateTo({
|
||
url: '/pagesHome/oilRecharge/oilRecharge?id=' + id
|
||
})
|
||
},
|
||
goDetails() {
|
||
uni.navigateTo({
|
||
url: '/pagesHome/cardDetails/index'
|
||
})
|
||
},
|
||
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, 111, res);
|
||
}
|
||
})
|
||
},
|
||
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;
|
||
height: 100vh;
|
||
box-sizing: border-box;
|
||
padding-top: 1px;
|
||
|
||
}
|
||
|
||
|
||
.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;
|
||
}
|
||
|
||
.card_ {
|
||
width: 95%;
|
||
margin: 15px auto;
|
||
height: 135px;
|
||
background: url('../../static/new/czk.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
color: #fff;
|
||
}
|
||
|
||
.top_card {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 16px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.card-b {
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.card_1 {
|
||
width: 95%;
|
||
margin: 15px auto;
|
||
height: 135px;
|
||
background: url('../../static/new/tyk.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
color: #fff;
|
||
}
|
||
|
||
.card_2 {
|
||
width: 95%;
|
||
margin: 15px auto;
|
||
height: 135px;
|
||
background: url('../../static/new/lpk.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
color: #fff;
|
||
}
|
||
|
||
.card_1 {
|
||
width: 95%;
|
||
margin: 15px auto;
|
||
height: 135px;
|
||
background: url('http://47.94.122.58:83/oilBg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
color: #fff;
|
||
}
|
||
|
||
.card-num {
|
||
font-size: 20px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.r-box {
|
||
width: 100%;
|
||
|
||
text-align: right;
|
||
}
|
||
</style>
|