331 lines
6.7 KiB
Vue
331 lines
6.7 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 || actinput == 1 ">
|
|
<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-if="fringeBenefit">{{1}}.{{fringeBenefit}}</view>
|
|
<view class="huisize" v-if="giftBalance">{{2}}.赠送金额{{giftBalance}}</view>
|
|
<view class="huisize" v-if="points">{{3}}.赠送积分{{points}}</view>
|
|
<view class="huisize" v-if="growthValue">{{4}}.赠送成长值{{growthValue}}</view>
|
|
<!-- <view class="huisize" v-if="fringeBenefit">{{index + 1}}.{{fringeBenefit}}</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>
|
|
<!-- 囤油充值 -->
|
|
<!-- 礼品充值 -->
|
|
<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>
|
|
<!-- 底部 -->
|
|
<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'
|
|
export default {
|
|
data() {
|
|
return {
|
|
title: '',
|
|
actindex: 0,
|
|
actInput: 0,
|
|
index: 0,
|
|
text: "",
|
|
fringeBenefit: "",
|
|
giftBalance: "",
|
|
points: "",
|
|
growthValue: "",
|
|
show: false,
|
|
columns: [
|
|
['员工一', '员工二', '员工三']
|
|
],
|
|
taplist: [{
|
|
title: '储值充值'
|
|
},
|
|
{
|
|
title: '囤油充值'
|
|
},
|
|
{
|
|
title: '礼品卡充值'
|
|
},
|
|
|
|
],
|
|
cardValueList: [],
|
|
|
|
actinput: 0,
|
|
}
|
|
},
|
|
components: {
|
|
|
|
},
|
|
onShow() {
|
|
this.getValueCars();
|
|
},
|
|
methods: {
|
|
confirm(e) {
|
|
this.show = false
|
|
},
|
|
cancel() {
|
|
this.show = false
|
|
},
|
|
xzindex(index, text, fringeBenefit, giftBalance, points, growthValue) {
|
|
this.actindex = index
|
|
this.text = text
|
|
this.fringeBenefit = fringeBenefit
|
|
this.giftBalance = giftBalance
|
|
this.points = points
|
|
this.growthValue = growthValue
|
|
},
|
|
getindex(index) {
|
|
this.actinput = index
|
|
},
|
|
goback() {
|
|
uni.navigateBack()
|
|
},
|
|
getValueCars() {
|
|
request({
|
|
url: '/business/marketingActivity/cardValue',
|
|
method: 'get',
|
|
data: {
|
|
activeStatus: '1'
|
|
},
|
|
}).then(res => {
|
|
this.cardValueList = res.data.records
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
|
|
.min-size {
|
|
width: 100%;
|
|
font-size: 12px;
|
|
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> |