480 lines
12 KiB
Vue
480 lines
12 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="tap-box">
|
||
<view class="box-tap" :class="{ 'act' :actinput == index }" v-for="(item,index) in taplist" :key="index"
|
||
@click="getindex(index)">
|
||
<view class="title">{{item.title}}</view>
|
||
<view class="gang" :class="{ 'actgang' : actinput == index }"></view>
|
||
</view>
|
||
</view>
|
||
<!-- 储值充值 -->
|
||
<view class="boxback" v-if="actinput == 0">
|
||
<view class="box-cz">
|
||
<view class="box-jg" :class="{ 'actbox' : actindex == index }" v-for="(item,index) in cardValueList"
|
||
:key="index"
|
||
@click="xzindex(index,item.rechargeBalance,item.fringeBenefit,item.giftBalance,item.points,item.growthValue)">
|
||
<view class="s-title" :class="{ 'actsize' : actindex == index }">￥ <text
|
||
style="font-weight: bold;"></text>{{item.rechargeBalance}}</view>
|
||
<view class="min-size" :class="{ 'actsize' : actindex == index }">售价￥{{item.rechargeBalance}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="box-hui">
|
||
<view style="margin-bottom: 15px;">充值{{text}}元权益</view>
|
||
<view class="huisize" v-for="(item,index) in shuomingList" :key="index">
|
||
{{index+1}}.{{item || "" }}
|
||
</view>
|
||
</view>
|
||
<view class="box-gang">
|
||
<view class="">推荐员工</view>
|
||
<view class=""></view>
|
||
<view class="" @click="show = true">
|
||
<uni-icons type="right" size="14"></uni-icons>
|
||
</view>
|
||
|
||
<!-- 底部 -->
|
||
<view class="bottom-box">
|
||
<view class="anniu">
|
||
<text>立即充值</text>
|
||
</view>
|
||
<view class="dibu">
|
||
<view class="">充值记录</view>
|
||
<uni-icons type="right" color="#1678ff" size="14"></uni-icons>
|
||
</view>
|
||
|
||
<view class="box-hui">
|
||
<view style="margin-bottom: 15px;">服务说明</view>
|
||
<view class="huisize">1.该服务为储蓄卡直充服务，仅限本站使用</view>
|
||
<view class="huisize">2.请确认充值类型正确后再付款，一经充值不支持退款； </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<!-- 囤油充值 -->
|
||
<view class="boxback" v-if="actinput == 1">
|
||
<view class="box-cz">
|
||
<view class="box-jg" :class="{ 'actbox' : actindex == index }" v-for="(item,index) in cardFuleList"
|
||
:key="index"
|
||
@click="fuleindex(index,item.rechargeBalance,item.points)">
|
||
<view class="s-title" :class="{ 'actsize' : actindex == index }">油品:{{item.type}}
|
||
</view>
|
||
<view class="s-title" :class="{ 'actsize' : actindex == index }">油号:{{item.oilType}}
|
||
</view>
|
||
<view class="min-size" :class="{ 'actsize' : actindex == index }">单价￥<text
|
||
style="font-weight: bold;"></text>{{item.incomeLitres}}元/升</view>
|
||
<view class="min-size" :class="{ 'actsize' : actindex == index }">总价￥{{item.rechargeBalance}}元
|
||
</view>
|
||
<view class="min-size" :class="{ 'actsize' : actindex == index }">升数:{{item.incomeLitres}}L
|
||
</view>
|
||
|
||
|
||
</view>
|
||
</view>
|
||
<view class="box-hui">
|
||
<view style="margin-bottom: 15px;">充值{{text}}元权益</view>
|
||
<view class="huisize" v-for="(item,index) in shuomingFList" :key="index">
|
||
{{index+1}}.{{item || "" }}
|
||
</view>
|
||
</view>
|
||
<view class="box-gang">
|
||
<view class="">推荐员工</view>
|
||
<view class=""></view>
|
||
<view class="" @click="show = true">
|
||
<uni-icons type="right" size="14"></uni-icons>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<!-- 底部 -->
|
||
<view class="bottom-box">
|
||
<view class="anniu">
|
||
<text>立即充值</text>
|
||
</view>
|
||
<view class="dibu">
|
||
<view class="">充值记录</view>
|
||
<uni-icons type="right" color="#1678ff" size="14"></uni-icons>
|
||
</view>
|
||
|
||
<view class="box-hui">
|
||
<view style="margin-bottom: 15px;">服务说明</view>
|
||
<view class="huisize">1.该服务为储蓄卡直充服务，仅限本站使用</view>
|
||
<view class="huisize">2.请确认充值类型正确后再付款，一经充值不支持退款； </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 礼品充值 -->
|
||
<view class="boxback" style="box-sizing: border-box; padding: 1px; " v-if="actinput == 2 ">
|
||
<view class="inputbox">
|
||
<view class="cadname">卡号</view>
|
||
<input type="text" placeholder="请输入礼品卡卡号" />
|
||
</view>
|
||
<view class="inputbox">
|
||
<view class="cadname">卡密</view>
|
||
<input type="text" placeholder="请输入礼品卡卡密" />
|
||
</view>
|
||
<view class="bottom-box">
|
||
<view class="anniu">
|
||
<text>立即兑换</text>
|
||
</view>
|
||
<view class="dibu">
|
||
<view class="">兑换记录</view>
|
||
<uni-icons type="right" color="#1678ff" size="14"></uni-icons>
|
||
</view>
|
||
|
||
<view class="box-hui">
|
||
<view style="margin-bottom: 15px;">服务说明</view>
|
||
<view class="huisize">1.该服务为储蓄卡直充服务，仅限本站使用</view>
|
||
<view class="huisize">2.请确认充值类型正确后再付款，一经充值不支持退款； </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 底部 -->
|
||
<!-- <view class="bottom-box">
|
||
<view class="anniu">
|
||
<text>立即充值</text>
|
||
</view>
|
||
<view class="dibu">
|
||
<view class="">充值记录</view>
|
||
<uni-icons type="right" color="#1678ff" size="14"></uni-icons>
|
||
</view>
|
||
|
||
<view class="box-hui">
|
||
<view style="margin-bottom: 15px;">服务说明</view>
|
||
<view class="huisize">1.该服务为储蓄卡直充服务，仅限本站使用</view>
|
||
<view class="huisize">2.请确认充值类型正确后再付款，一经充值不支持退款； </view>
|
||
</view>
|
||
</view>-->
|
||
|
||
<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '../../utils/request'
|
||
import {getValue} from "@dcloudio/uni-ui/lib/uni-forms/utils";
|
||
export default {
|
||
data() {
|
||
return {
|
||
title: '',
|
||
actindex: 0,
|
||
actInput: 0,
|
||
index: 0,
|
||
text: "",
|
||
fringeBenefit: "",
|
||
giftBalance: "",
|
||
rechargeBalance: "",
|
||
incomeLitres: "",
|
||
lockupPrice: "",
|
||
type: "",
|
||
oilType: "",
|
||
points: "",
|
||
growthValue: "",
|
||
show: false,
|
||
shuomingList: [],
|
||
shuomingFList: [],
|
||
columns: [
|
||
['员工一', '员工二', '员工三']
|
||
],
|
||
taplist: [{
|
||
title: '储值充值'
|
||
},
|
||
{
|
||
title: '囤油充值'
|
||
},
|
||
{
|
||
title: '礼品卡充值'
|
||
},
|
||
|
||
],
|
||
cardValueList: [],
|
||
cardFuleList: [],
|
||
|
||
actinput: 0,
|
||
}
|
||
},
|
||
components: {
|
||
|
||
},
|
||
onShow() {
|
||
this.getValueCars();
|
||
//this.getFuelCars();
|
||
},
|
||
methods: {
|
||
confirm(e) {
|
||
this.show = false
|
||
},
|
||
cancel() {
|
||
this.show = false
|
||
},
|
||
xzindex(index, text, fringeBenefit, giftBalance, points, growthValue) {
|
||
this.shuomingList = []
|
||
console.log(this.shuomingList);
|
||
if (text) {
|
||
this.text = text
|
||
}
|
||
if (fringeBenefit) {
|
||
this.shuomingList.push(fringeBenefit)
|
||
}
|
||
if (giftBalance) {
|
||
this.shuomingList.push('赠送' + giftBalance + '金额')
|
||
}
|
||
if (points) {
|
||
this.shuomingList.push('赠送' + points + '积分')
|
||
}
|
||
if (growthValue) {
|
||
this.shuomingList.push('赠送' + growthValue + '成长值')
|
||
}
|
||
this.actindex = index
|
||
},
|
||
fuleindex(index, text, points,) {
|
||
this.shuomingFList = []
|
||
console.log(this.shuomingFList);
|
||
if (text) {
|
||
this.text = text
|
||
}
|
||
if (points) {
|
||
this.shuomingFList.push('赠送' + points + '积分')
|
||
}
|
||
this.actindex = index
|
||
},
|
||
getindex(index) {
|
||
this.actinput = index
|
||
if (index==0){
|
||
this.getValueCars();
|
||
}
|
||
if (index==1){
|
||
this.getFuelCars();
|
||
}
|
||
},
|
||
goback() {
|
||
uni.navigateBack()
|
||
},
|
||
//储值卡
|
||
getValueCars() {
|
||
request({
|
||
url: 'business/marketingActivity/cardValue',
|
||
method: 'get',
|
||
data: {
|
||
activeStatus: '1'
|
||
},
|
||
}).then(res => {
|
||
this.cardValueList = []
|
||
if (res.code == 200) {
|
||
this.cardValueList = res.data.records
|
||
this.xzindex(0, this.cardValueList[0].rechargeBalance, this.cardValueList[0].fringeBenefit,
|
||
this.cardValueList[0].giftBalance, this.cardValueList[0].points, this
|
||
.cardValueList[0].growthValue)
|
||
}
|
||
|
||
})
|
||
},
|
||
//囤油卡
|
||
getFuelCars() {
|
||
request({
|
||
url: 'business/marketingActivity/cardFuelDiesel',
|
||
method: 'get',
|
||
data: {
|
||
activeStatus: '1'
|
||
},
|
||
}).then(res => {
|
||
this.cardValueList = []
|
||
if (res.code == 200) {
|
||
this.cardFuleList = res.data.records
|
||
this.fuleindex(0, this.cardValueList[0].rechargeBalance, this.cardValueList[0].fringeBenefit,
|
||
this.cardFuleList[0].rechargeBalance, this.cardFuleList[0].points, this
|
||
.cardFuleList[0].lockupPrice, this
|
||
.cardFuleList[0].incomeLitres)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
|
||
.tap-box {
|
||
width: 100%;
|
||
height: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #ffffff;
|
||
|
||
}
|
||
|
||
.box-tap {
|
||
width: 33%;
|
||
text-align: center;
|
||
|
||
}
|
||
|
||
.act {
|
||
color: #2979ff;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.gang {
|
||
width: 25px;
|
||
height: 5px;
|
||
// background-color: #2979ff;
|
||
border-radius: 8px;
|
||
margin: 2px auto;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.actgang {
|
||
background-color: #2979ff;
|
||
}
|
||
|
||
.bottom-box {
|
||
width: 100%;
|
||
background-color: #ffffff;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.anniu {
|
||
width: 95%;
|
||
height: 40px;
|
||
border-radius: 50px;
|
||
background: #1678ff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
margin: 15px auto;
|
||
}
|
||
|
||
.dibu {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
color: #1678ff;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.box-hui {
|
||
width: 95%;
|
||
border-radius: 8px;
|
||
background: #f4f5f6;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
|
||
margin: 15px auto;
|
||
}
|
||
|
||
.huisize {
|
||
color: #a8a8a8;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.box-cz {
|
||
flex-wrap: wrap;
|
||
display: flex;
|
||
width: 100%;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.box-jg {
|
||
width: 30%;
|
||
border-radius: 8px;
|
||
border: 1px solid #e2e2e2;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
margin: 5px;
|
||
}
|
||
|
||
.s-title {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.min-size {
|
||
width: 100%;
|
||
font-size: 10px;
|
||
//color: #e2e2e2;
|
||
text-align: center;
|
||
}
|
||
|
||
.actbox {
|
||
border: 1px solid #1678ff;
|
||
background: #e7f1ff;
|
||
}
|
||
|
||
.actsize {
|
||
color: #1678ff !important;
|
||
}
|
||
|
||
.boxback {
|
||
width: 100%;
|
||
background: #ffffff;
|
||
box-sizing: border-box;
|
||
padding-bottom: 1px;
|
||
}
|
||
|
||
.box-gang {
|
||
width: 95%;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.inputbox {
|
||
width: 95%;
|
||
margin: 10px auto;
|
||
display: flex;
|
||
// align-items: center;
|
||
|
||
}
|
||
|
||
.cadname {
|
||
width: 20%;
|
||
|
||
}
|
||
</style>
|