729 lines
18 KiB
Vue
729 lines
18 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,item.count,item.id)">
|
|
<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" @click="show = true">
|
|
<view class="">推荐员工</view>
|
|
|
|
<view style="display: flex;align-items: center;">
|
|
<view class="">{{yname}}</view>
|
|
<uni-icons type="right" size="14"></uni-icons>
|
|
</view>
|
|
|
|
<!-- 底部 -->
|
|
|
|
</view>
|
|
|
|
<view class="bottom-box">
|
|
<view class="anniu" @click="addValueCarRecords()">
|
|
<text>立即充值</text>
|
|
</view>
|
|
<view class="dibu" @click="goRechargeRecords()">
|
|
<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" 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,item.id)">
|
|
<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" @click="addFuleCarRecords()">
|
|
<text>立即充值</text>
|
|
</view>
|
|
<view class="dibu" @click="goRechargeRecords()">
|
|
<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" v-model="number" placeholder="请输入礼品卡卡号" />
|
|
</view>
|
|
<view class="inputbox">
|
|
<view class="cadname">卡密</view>
|
|
<input type="text" v-model="cardPassword" placeholder="请输入礼品卡卡密" />
|
|
</view>
|
|
<view class="bottom-box">
|
|
<view class="anniu" @click="exchangeGift()">
|
|
<text>立即兑换</text>
|
|
</view>
|
|
<view class="dibu" @click="golpk()">
|
|
<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>
|
|
|
|
<!-- <u-picker :show="show" :columns="columns" keyName="realName" @confirm="confirm" @cancel="cancel"></u-picker> -->
|
|
<u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
|
|
<view class="bottom-bb">
|
|
<view class="" v-for="(item,index) in columns" :key="index" style="margin-bottom: 10px;">
|
|
<u-button @click="confirm(item)" type="primary" :plain="true" :text="item.realName"></u-button>
|
|
</view>
|
|
<!-- <view class="" v-for="(item,index) in columns" :key="index">
|
|
{{item.realName}}
|
|
</view> -->
|
|
</view>
|
|
</u-popup>
|
|
<u-modal :show="shows" :title="message" :content='money' @confirm="confirms()"></u-modal>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '../../utils/request'
|
|
import {
|
|
getValue
|
|
} from "@dcloudio/uni-ui/lib/uni-forms/utils";
|
|
export default {
|
|
data() {
|
|
return {
|
|
query: {
|
|
storeId: ''
|
|
},
|
|
yname: '',
|
|
chainStoreId: '',
|
|
cardRecordId: '',
|
|
cardFavorableId: '',
|
|
storeId: '',
|
|
staffId: '',
|
|
carValueId: '',
|
|
cardFuleId: '',
|
|
shows: false,
|
|
money: '',
|
|
message: '',
|
|
number: '',
|
|
cardPassword: '',
|
|
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: {},
|
|
onLoad(option) {
|
|
this.storeId = uni.getStorageSync("storeId");
|
|
console.log("5555555555555", this.storeId);
|
|
this.chainStoreId = uni.getStorageSync('chainStoreId');
|
|
console.log("66666666666", this.chainStoreId);
|
|
this.actinput = option.id
|
|
this.cardFavorableId = option.cardFavorableId
|
|
this.cardRecordId = option.cardRecordId
|
|
console.log('11111111111111', this.cardRecordId);
|
|
if (option.id == 0) {
|
|
this.getValueCars();
|
|
}
|
|
if (option.id == 1) {
|
|
console.log("囤油");
|
|
this.getFuelCars();
|
|
}
|
|
|
|
},
|
|
onShow() {
|
|
this.getStaffList()
|
|
},
|
|
methods: {
|
|
open() {
|
|
console.log();
|
|
},
|
|
close() {
|
|
this.show = false
|
|
},
|
|
//囤油卡充值
|
|
addFuleCarRecords() {
|
|
if (this.staffId == '') {
|
|
uni.showToast({
|
|
title: "员工为必填项",
|
|
icon: Error
|
|
})
|
|
return
|
|
}
|
|
if (this.carValueId == '') {
|
|
uni.showToast({
|
|
title: "囤油卡为必填项",
|
|
icon: Error
|
|
})
|
|
return
|
|
}
|
|
|
|
|
|
request({
|
|
url: 'business/marketingActivity/cardFuelRecord/addFuleCarRecords',
|
|
method: 'post',
|
|
data: {
|
|
payType: 'WECHAT',
|
|
mtStaffId: this.staffId,
|
|
id: this.carValueId,
|
|
storeId: this.storeId,
|
|
chainStoreId: this.chainStoreId,
|
|
cardFavorableId: this.cardFavorableId,
|
|
cardRecordId: this.cardRecordId
|
|
},
|
|
}).then(res => {
|
|
if (res.code === 200) {
|
|
let _this = this
|
|
console.log(res)
|
|
let payProvider = "wxpay"
|
|
_this.orderInfo = JSON.parse(res.data.reservedPayInfo);
|
|
uni.requestPayment({
|
|
// 微信支付provider: 'wxpay' 支付宝支付 'alipay'
|
|
provider: payProvider,
|
|
timeStamp: _this.orderInfo.timeStamp,
|
|
nonceStr: _this.orderInfo.nonceStr,
|
|
package: _this.orderInfo.package,
|
|
signType: 'MD5',
|
|
paySign: _this.orderInfo.paySign,
|
|
success: function(res) {
|
|
console.log('success:', res);
|
|
uni.reLaunch({
|
|
url: '/pagesRefuel/orderSuccess/index'
|
|
})
|
|
},
|
|
fail: function(err) {
|
|
request({
|
|
url: "/business/marketingActivity/activeExchange/cardValueOrders",
|
|
method: 'put',
|
|
data: {
|
|
"orderNo": res.data.data.orderNo,
|
|
"status": "payFail"
|
|
},
|
|
}).then((res) => {
|
|
uni.showToast({
|
|
title: "支付失败!",
|
|
icon: "error"
|
|
})
|
|
})
|
|
console.log('fail:', err);
|
|
}
|
|
});
|
|
}
|
|
|
|
})
|
|
},
|
|
//储值卡充值
|
|
addValueCarRecords() {
|
|
if (this.staffId == '') {
|
|
uni.showToast({
|
|
title: "员工为必填项",
|
|
icon: "error"
|
|
})
|
|
return
|
|
}
|
|
if (this.carValueId == '') {
|
|
uni.showToast({
|
|
title: "储值卡为必填项",
|
|
icon: "error"
|
|
})
|
|
return
|
|
}
|
|
request({
|
|
url: 'business/marketingActivity/cardValueRecord',
|
|
method: 'post',
|
|
data: {
|
|
payType: 'WECHAT',
|
|
mtStaffId: this.staffId,
|
|
id: this.carValueId,
|
|
storeId: this.storeId,
|
|
chainStoreId: this.chainStoreId,
|
|
cardFavorableId: this.cardFavorableId,
|
|
cardRecordId: this.cardRecordId
|
|
},
|
|
}).then(res => {
|
|
if (res.code === 200) {
|
|
let _this = this
|
|
console.log(res)
|
|
let payProvider = "wxpay"
|
|
_this.orderInfo = JSON.parse(res.data.reservedPayInfo);
|
|
uni.requestPayment({
|
|
// 微信支付provider: 'wxpay' 支付宝支付 'alipay'
|
|
provider: payProvider,
|
|
timeStamp: _this.orderInfo.timeStamp,
|
|
nonceStr: _this.orderInfo.nonceStr,
|
|
package: _this.orderInfo.package,
|
|
signType: 'MD5',
|
|
paySign: _this.orderInfo.paySign,
|
|
success: function(res) {
|
|
console.log('success:', res);
|
|
uni.reLaunch({
|
|
url: '/pagesRefuel/orderSuccess/index'
|
|
})
|
|
},
|
|
fail: function(err) {
|
|
// request({
|
|
// url: "business/oilOrder/orderStatus",
|
|
// method: 'post',
|
|
// data: {
|
|
// "orderNo": res.data.data.orderNo,
|
|
// "status": "payFail"
|
|
// },
|
|
// }).then((res) => {
|
|
// uni.showToast({
|
|
// title: "支付失败!",
|
|
// icon: "error"
|
|
// })
|
|
// })
|
|
// console.log('fail:', err);
|
|
}
|
|
});
|
|
}
|
|
|
|
})
|
|
},
|
|
confirms() {
|
|
this.shows = false
|
|
},
|
|
confirm(e) {
|
|
console.log(e);
|
|
this.staffId = e.id
|
|
this.yname = e.realName
|
|
this.show = false
|
|
},
|
|
cancel() {
|
|
this.show = false
|
|
},
|
|
xzindex(index, text, fringeBenefit, giftBalance, points, growthValue, count, id) {
|
|
console.log(text);
|
|
this.shuomingList = []
|
|
this.carValueId = id
|
|
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 + '成长值')
|
|
}
|
|
if (count) {
|
|
this.shuomingList.push('赠送卡券：' + count + '张')
|
|
}
|
|
this.actindex = index
|
|
},
|
|
fuleindex(index, text, points, id) {
|
|
this.shuomingFList = [];
|
|
this.carValueId = id;
|
|
console.log("1111111111", this.carValueId)
|
|
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/appletL',
|
|
method: 'get',
|
|
data: {
|
|
activeStatus: '1',
|
|
storeId: this.storeId,
|
|
},
|
|
}).then(res => {
|
|
this.cardValueList = []
|
|
if (res.code == 200) {
|
|
this.cardValueList = res.data.records
|
|
console.log(res.data.records);
|
|
this.xzindex(0, res.data.records[0].rechargeBalance, res.data.records[0].fringeBenefit,
|
|
res.data.records[0].giftBalance, res.data.records[0].points, res.data.records[0]
|
|
.growthValue, res.data.records[0]
|
|
.count, res.data.records[0].id)
|
|
}
|
|
})
|
|
},
|
|
//囤油卡
|
|
getFuelCars() {
|
|
request({
|
|
url: 'business/marketingActivity/cardFuelDiesel/selectAllApplet',
|
|
method: 'get',
|
|
data: {
|
|
activeStatus: '1',
|
|
storeId: this.storeId,
|
|
},
|
|
}).then(res => {
|
|
this.cardValueList = []
|
|
if (res.code == 200) {
|
|
this.cardFuleList = res.data.records
|
|
this.fuleindex(0, res.data.records[0].rechargeBalance, res.data.records[0].points, res.data
|
|
.records[0].id)
|
|
}
|
|
})
|
|
},
|
|
//礼品卡兑换
|
|
exchangeGift() {
|
|
request({
|
|
url: '/business/marketingActivity/cardGift/exchange?number=' + this.number + "&cardPassword=" +
|
|
this.cardPassword,
|
|
method: 'get',
|
|
}).then(res => {
|
|
if (res.data.id == '' || res.data.id == null) {
|
|
this.shows = true
|
|
this.message = '兑换失败！',
|
|
this.money = ''
|
|
} else {
|
|
this.shows = true
|
|
this.message = '兑换成功！',
|
|
this.money = res.data.cardAmount + '元'
|
|
}
|
|
})
|
|
},
|
|
//礼品卡兑换记录
|
|
getGiftRecords() {
|
|
request({
|
|
url: '/business/marketingActivity/cardGift/selectAllRecords',
|
|
method: 'get',
|
|
}).then(res => {
|
|
console.log(res)
|
|
})
|
|
},
|
|
goRechargeRecords() {
|
|
uni.navigateTo({
|
|
url: '/pagesMy/Recharge/Recharge'
|
|
})
|
|
},
|
|
//获取本店员工列表
|
|
getStaffList() {
|
|
request({
|
|
url: '/business/member/staff/list',
|
|
method: 'get',
|
|
params: {
|
|
storeId: uni.getStorageSync("storeId")
|
|
}
|
|
}).then(res => {
|
|
this.columns = res.data.records
|
|
// this.columns.push(res.data.records)
|
|
console.log("columns", this.columns);
|
|
|
|
})
|
|
},
|
|
golpk() {
|
|
uni.navigateTo({
|
|
url: '/pagesHome/RechargeRecords/RechargeRecords'
|
|
})
|
|
|
|
}
|
|
}
|
|
}
|
|
</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%;
|
|
|
|
}
|
|
|
|
.bottom-bb {
|
|
width: 100%;
|
|
height: 200px;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
background: white;
|
|
overflow: scroll;
|
|
}
|
|
</style> |