oil-station/gasStation-uni/pagesHome/oilRecharge/oilRecharge.vue

963 lines
25 KiB
Vue
Raw Normal View History

2024-08-16 18:26:19 +08:00
<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" v-if="actinput == 0">电子储值卡</view>
<view class="my-text" v-if="actinput == 1">电子囤油卡</view>
<view class="my-text" v-if="actinput == 2">电子礼品卡</view>
<view class="my-icons"></view>
</view>
<!-- 顶部区域 -->
<view class="tap-box" v-if="actinput == 0">
<view class="box-tap" :class="{ 'act' :types == index }" v-for="(item,index) in taplist" :key="index"
@click="getindex(index)">
<view class="title">{{item.title}}</view>
<view class="gang" :class="{ 'actgang' : types == index }"></view>
</view>
</view>
<!-- 储值充值 -->
<view class="boxback" v-if="actinput == 0">
<swiper class="swiper" style="width: 100%;height: 70px;" circular :autoplay="autoplay"
:interval="interval" :vertical="true" :duration="duration">
<swiper-item class="conttainer-box" v-for="(item,index) in actList" :key="index">
<view class="box_s">
{{item.discountActiveDescribe || ''}}
</view>
</swiper-item>
</swiper>
<!-- <view class="box_s" v-for="(item,index) in actList" :key="index">
{{item.discountActiveDescribe || ''}}
</view> -->
<!-- <view style="display: flex; align-items: center; justify-content: space-around;">
<view class="" @click="types = 0"> <u-button type="primary" text="自定义金额"></u-button></view>
<view class="" @click="types = 1"> <u-button type="primary" :plain="true" text="金额选项"></u-button>
</view>
</view> -->
<view class="inputbox"
style="border-bottom: 1px solid #e7f1ff; box-sizing: border-box; padding-bottom: 15px;"
v-if="types == 1">
<view class="cadname" style="width: 38%;">自定义金额</view>
<input type="text" v-model="balance" @input="changeBalance" placeholder="请输入自定义金额" />
</view>
<view class="box-cz" v-if="types == 0">
<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(1)">
<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">
<swiper class="swiper" style="width: 100%;height: 70px;" circular :autoplay="autoplay"
:interval="interval" :vertical="true" :duration="duration">
<swiper-item class="conttainer-box" v-for="(item,index) in cardList" :key="index">
<view class="box_s">
{{item.discountActiveDescribe || ''}}
</view>
</swiper-item>
</swiper>
<view class="box-cz" style="margin-top: 20px;">
<view :class="{ 'actbox' : actindex == index }" v-for="(item,index) in cardFuleList" style="display: flex;justify-content: space-around;width: 98%;border-radius: 8px;border: 1px solid #e2e2e2;
box-sizing: border-box;padding: 10px;margin: 5px;height: 60px;line-height: 18px;" :key="index"
@click="fuleindex(index,item.rechargeBalance,item.points,item.id)">
<view style="font-size: 16px;font-weight: bold;line-height: 40px;"
:class="{ 'actsize' : actindex == index }">{{item.oilType}}</view>
<!-- <view style="font-size: 12px;font-weight: bold;margin: 0 5px;" :class="{ 'actsize' : actindex == index }">:</view> -->
<view class="min-size1" :class="{ 'actsize' : actindex == index }">
<view>国标油价</view>
<view>{{item.gbPrice}}/L</view>
</view>
<view class="min-size1" :class="{ 'actsize' : actindex == index }">
<view>本站油价</view>
<view>{{item.oilPrice}}/L</view>
</view>
<view class="min-size1" :class="{ 'actsize' : actindex == index }">
<view>锁价活动价</view>
<view>{{item.lockPrice}}/L</view>
</view>
<view class="min-size1" :class="{ 'actsize' : actindex == index }">
<view>锁价满足金额</view>
<view>{{item.rechargeBalance}}</view>
</view>
<!-- <view class="min-size1" :class="{ 'actsize' : actindex == index }"><view>总升数</view><view>{{item.incomeLitres || 0}}L</view></view> -->
<!-- <view class="min-size1" style="color: red;" :class="{ 'actsize' : actindex == index }">
<view>总价</view>
<view>{{item.rechargeBalance}}</view>
</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" @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="addFuleCarRecords()">
<text>立即充值</text>
</view>
<view class="dibu" @click="goRechargeRecords(2)">
<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 {
types: 0,
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: "",
balance: '',
rechargeBalance: "",
incomeLitres: "",
lockupPrice: "",
type: "",
oilType: "",
points: "",
growthValue: "",
show: false,
shuomingList: [],
shuomingFList: [],
columns: [],
actList: [],
cardList: [],
autoplay: true,
interval: 3000,
duration: 500,
taplist: [{
title: '金额选项'
},
{
title: '自定义金额'
},
],
cardValueList: [],
cardFuleList: [],
actinput: 0,
// 小程序类型 微信 WECHAT 支付宝 ALIPAY
appltType: uni.getStorageSync("appltType"),
}
},
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();
this.activen()
}
if (option.id == 1) {
console.log("囤油");
this.getFuelCars();
this.getFuelCarList()
}
},
onShow() {
this.getStaffList()
},
methods: {
changeBalance() {
if (this.cardValueList.length > 0) {
this.cardValueList.forEach((item, index) => {
console.log(this.balance >= item.rechargeBalance, 111);
if (this.balance >= item.rechargeBalance) {
this.xzindex(index, this.balance, item.fringeBenefit, item.giftBalance, item.points,
item.growthValue, item.count, item.id);
}
})
if (this.balance < this.cardValueList[0].rechargeBalance) {
this.text = ""
this.shuomingList = []
}
}
},
activen() {
request({
url: 'business/marketingActivity/cardValue/appletList?storeId=' + uni.getStorageSync(
"storeId") + "&&activeStatus=1",
method: 'get',
}).then(res => {
if (res.code == 200) {
console.log(res, 111);
this.actList = res.data
}
})
},
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
}
let _this = this
request({
url: 'business/marketingActivity/cardFuelRecord/addFuleCarRecords',
method: 'post',
data: {
payType: this.appltType,
mtStaffId: this.staffId,
id: this.carValueId,
storeId: this.storeId,
chainStoreId: this.chainStoreId,
cardFavorableId: this.cardFavorableId,
cardRecordId: this.cardRecordId
},
}).then(res => {
if (res.code == 200) {
console.log(res, _this.appltType)
if (_this.appltType == "WECHAT") {
if (!res.data.reservedPayInfo) {
uni.showToast({
title: '支付失败,请联系商家',
icon: "none"
})
return;
}
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/cardFuleOrders/updateOrderStatus",
method: 'post',
data: {
"orderNo": res.data.orderNo,
"status": "payFail"
},
}).then((res) => {
uni.showToast({
title: "支付失败!",
icon: "error"
})
})
console.log('fail:', err);
}
});
}
if (_this.appltType == "ALIPAY") {
if (!res.data.reservedTransactionId) {
uni.showToast({
title: '支付失败,请联系商家',
icon: "none"
})
return;
}
my.tradePay({
tradeNO: res.data.reservedTransactionId
}, function(resp) {
if (resp.resultCode == '9000') {
console.log("支付成功")
uni.reLaunch({
url: '/pagesRefuel/orderSuccess/index'
})
} else {
request({
url: "/business/marketingActivity/cardFuleOrders/updateOrderStatus",
method: 'post',
data: {
"orderNo": res.data.orderNo,
"status": "payFail"
},
}).then((res) => {
uni.showToast({
title: "支付失败!",
icon: "error"
})
})
console.log('支付失败,' + resp.resultCode);
}
});
}
}
})
},
//储值卡充值
addValueCarRecords() {
if (this.types == 0) {
if (this.carValueId == '') {
uni.showToast({
title: "当前店铺暂未设置电子囤油卡储值优惠,请先联系商家",
icon: "error"
})
return
}
} else {
if (!this.balance || this.balance <= 0) {
uni.showToast({
title: "请填写充值金额并确保充值金额大于0",
icon: "error"
})
return
}
}
let _this = this
request({
url: 'business/marketingActivity/cardValueRecord',
method: 'post',
data: {
payType: this.appltType,
mtStaffId: this.staffId,
id: this.carValueId,
storeId: this.storeId,
chainStoreId: this.chainStoreId,
cardFavorableId: this.cardFavorableId,
cardRecordId: this.cardRecordId,
balance: this.balance,
types: this.types
},
}).then(res => {
if (res.code === 200) {
if (_this.appltType == "WECHAT") {
if (!res.data.reservedPayInfo) {
uni.showToast({
title: '支付失败,请联系商家',
icon: "none"
})
return;
}
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/cardValueRecord/changeOrderPayStatus",
method: 'post',
data: {
"orderNo": res.data.orderNo,
"status": "payFail"
},
}).then((res) => {})
uni.showToast({
title: "支付失败!",
icon: "error"
})
// console.log('fail:', err);
}
});
}
}
if (_this.appltType == "ALIPAY") {
if (!res.data.reservedTransactionId) {
uni.showToast({
title: '支付失败,请联系商家',
icon: "none"
})
return;
}
my.tradePay({
tradeNO: res.data.reservedTransactionId
}, function(resp) {
if (resp.resultCode == '9000') {
console.log("支付成功")
uni.reLaunch({
url: '/pagesRefuel/orderSuccess/index'
})
} else {
request({
url: "/business/marketingActivity/cardValueRecord/changeOrderPayStatus",
method: 'post',
data: {
"orderNo": res.data.orderNo,
"status": "payFail"
},
}).then((res) => {})
uni.showToast({
title: "支付失败!",
icon: "error"
})
console.log('支付失败,' + resp.resultCode);
}
});
}
})
},
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
this.types = index
if (index == 0) {
// this.getValueCars();
if (this.cardValueList.length > 0)
this.xzindex(0, this.cardValueList[0].rechargeBalance, this.cardValueList[0].fringeBenefit, this
.cardValueList[0].giftBalance, this.cardValueList[0].points, this.cardValueList[0].growthValue,
this.cardValueList[0].count, this.cardValueList[0].id)
}
if (index == 1) {
// this.getFuelCars();
this.text = ""
this.shuomingList = []
}
console.log(index);
},
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,22);
// 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)
this.cardValueList = res.data
console.log(res.data, 22);
this.xzindex(0, res.data[0].rechargeBalance, res.data[0].fringeBenefit,
res.data[0].giftBalance, res.data[0].points, res.data[0]
.growthValue, res.data[0]
.count, res.data[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)
}
})
},
//囤油卡
getFuelCarList() {
request({
url: 'business/marketingActivity/cardFuelDiesel/appletList?storeId=' + uni.getStorageSync(
"storeId"),
method: 'get',
}).then(res => {
if (res.code == 200) {
console.log(res, 111);
this.cardList = res.data
}
})
},
//礼品卡兑换
exchangeGift() {
request({
url: '/business/marketingActivity/cardGift/exchange?number=' + this.number + "&cardPassword=" +
this.cardPassword + "&storeId=" + uni.getStorageSync("storeId"),
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 + '元'
this.number = ""
this.cardPassword = ""
}
})
},
//礼品卡兑换记录
getGiftRecords() {
request({
url: '/business/marketingActivity/cardGift/selectAllRecords',
method: 'get',
}).then(res => {
console.log(res)
})
},
goRechargeRecords(val) {
uni.navigateTo({
url: '/pagesMy/Recharge/Recharge?index=' + val
})
},
//获取本店员工列表
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: 50%;
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;
}
.min-size1 {
font-size: 12px;
//color: #e2e2e2;
text-align: center;
margin: 0 5px;
}
.actbox {
border: 1px solid #1678ff;
background: #e7f1ff;
}
.actsize {
color: #1678ff !important;
}
.boxback {
width: 100%;
background: #ffffff;
box-sizing: border-box;
padding-bottom: 1px;
padding-top: 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;
}
.box_s {
width: 90%;
display: flex;
margin: 10px auto;
font-size: 14px;
color: #f40000;
box-sizing: border-box;
padding: 5px;
border-radius: 6px;
background: #f4f5f6;
}
</style>