658 lines
16 KiB
Vue
658 lines
16 KiB
Vue
<template>
|
||
<view class="centenr">
|
||
<!-- 储值卡 -->
|
||
<view class="vip-top" v-if="type=='balance'">
|
||
<view class="t-right">储值卡 <u-icon name="arrow-down-fill" color="#fff" size="12"></u-icon> </view>
|
||
<view class="t-title">当前余额（元）</view>
|
||
<view class="t-num">{{cardBalance.cardBalance || 0}}</view>
|
||
</view>
|
||
<!-- 囤油卡 -->
|
||
<view class="vip-top" v-if="type=='oilCard'">
|
||
<view class="t-right">囤油卡 <u-icon name="arrow-down-fill" color="#fff" size="12"></u-icon> </view>
|
||
<view class="t-title">剩余油量（L）</view>
|
||
<view class="t-num">{{cardBalance.cardBalance || 0}}</view>
|
||
</view>
|
||
|
||
<view class="vip-title">
|
||
<view class="">{{storeName || "--"}}</view>
|
||
<!-- <image src="../../static/new/qh.png" style="width: 18px; height: 18px;" @click="show = true"></image> -->
|
||
</view>
|
||
<!-- 储值卡 -->
|
||
<view v-if="type=='balance'">
|
||
<view class="input-box">
|
||
<view class="i-title">充值金额</view>
|
||
<view class="n_input">
|
||
<input type="text" v-model="rechargeOrder.balance" :disabled="isEdit">
|
||
<view class="r-title">
|
||
{{staff.realName || "--"}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="wrap_box">
|
||
<view class="w_box" v-for="(item,index) in rechargeList" :key="index" @click="setIndex(index,item)"
|
||
:class="{ 'acvit' :windex == index}">
|
||
<view class="">充{{item.rechargeBalance}}元</view>
|
||
<view class="">赠{{item.giftBalance}}元</view>
|
||
</view>
|
||
<view class="w_box" @click="setIndex(rechargeList.length)"
|
||
:class="{ 'acvit' :windex == rechargeList.length}">
|
||
<view class="" style="line-height: 40px;">自定义金额</view>
|
||
</view>
|
||
</view>
|
||
<view class="input-box">
|
||
<view class="i-title">赠送金额</view>
|
||
<view class="n_input">
|
||
<input type="text" v-model="rechargeOrder.giftBalance" disabled>
|
||
</view>
|
||
</view>
|
||
<view class="input-box">
|
||
<view class="i-title">充值备注</view>
|
||
<view class="b_input">
|
||
<input type="text" v-model="rechargeOrder.remark">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 囤油卡 -->
|
||
<view v-if="type=='oilCard'">
|
||
<view class="input-box">
|
||
<view class="i-title">充值金额</view>
|
||
<view class="n_input">
|
||
<input type="text" v-model="rechargeCardOrder.rechargeBalance" :disabled="isEdit">
|
||
<view class="r-title">
|
||
{{staff.realName || "--"}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="wrap_box">
|
||
<view class="w_box1" v-for="(item,index) in oilRechargeList" :key="index" @click="setIndex(index,item)"
|
||
:class="{ 'acvit' :windex == index}">
|
||
<view class="">充值{{item.rechargeBalance}}元，囤油{{item.incomeLitres}}升</view>
|
||
<view class="">锁定单价{{item.lockPrice}}元/L</view>
|
||
</view>
|
||
</view>
|
||
<view class="input-box">
|
||
<view class="i-title">充值备注</view>
|
||
<view class="b_input">
|
||
<input type="text" v-model="rechargeOrder.remark">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="title-box">
|
||
<view class="i-title">充值有礼</view>
|
||
<view class="i-text" v-for="(item,index) in describe" :key="index">{{item.discountActiveDescribe}}</view>
|
||
</view>
|
||
<view class="k-box">
|
||
<view class="i-title">充值规则</view>
|
||
<view class="i-text" v-if="describe.length>0">活动时间：{{describe[0].time}}</view>
|
||
<view class="i-text" v-else>暂无规则</view>
|
||
</view>
|
||
|
||
<view style="width: 100%; height: 88px; "></view>
|
||
<view class="bottom_">
|
||
<view class="anniu_" v-if="type=='balance'" @click="goRecharge()">
|
||
立即充值{{rechargeOrder.balance}}元
|
||
</view>
|
||
<view class="anniu_" v-if="type=='oilCard'" @click="addFuleCarRecords()">
|
||
立即充值{{rechargeCardOrder.rechargeBalance}}元
|
||
</view>
|
||
</view>
|
||
<u-popup :show="show" :closeable="true" :round="10" mode="bottom" @close="close">
|
||
<view class="_tbox">
|
||
<view class="_btop">选择油站</view>
|
||
<view class="input_sou">
|
||
<input type="text" placeholder="请输入油站" />
|
||
<u-icon name="search" size="18px"></u-icon>
|
||
</view>
|
||
<view class="h_box" v-for="(item,index) in 4" :key="index">
|
||
<view class="">测试A店</view>
|
||
<view class="">129.9km</view>
|
||
</view>
|
||
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '../../utils/request'
|
||
export default {
|
||
data() {
|
||
return {
|
||
type: 'oilCard',
|
||
show: false,
|
||
windex: 0,
|
||
storeId: uni.getStorageSync("storeId"),
|
||
storeName: "",
|
||
// 充值信息列表
|
||
rechargeList: [],
|
||
// 囤油卡充值列表信息
|
||
oilRechargeList: [],
|
||
// 员工列表
|
||
staffList: [],
|
||
staff: {},
|
||
query: {
|
||
chainStoreId: uni.getStorageSync("chainStoreId"),
|
||
couponType: '',
|
||
useStatus: 0,
|
||
pageNo: 1,
|
||
pageSize: 10
|
||
},
|
||
cardBalance: {},
|
||
rechargeOrder: {
|
||
payType: uni.getStorageSync("appltType"),
|
||
mtStaffId: '',
|
||
id: '',
|
||
storeId: uni.getStorageSync("storeId"),
|
||
chainStoreId: uni.getStorageSync("chainStoreId"),
|
||
cardRecordId: '',
|
||
balance: 0,
|
||
types: 0
|
||
},
|
||
rechargeCardOrder: {
|
||
payType: uni.getStorageSync("appltType"),
|
||
mtStaffId: '',
|
||
id: '',
|
||
storeId: uni.getStorageSync("storeId"),
|
||
chainStoreId: uni.getStorageSync("chainStoreId"),
|
||
cardFavorableId: '',
|
||
cardRecordId: '',
|
||
},
|
||
isEdit: true,
|
||
describe: [],
|
||
// 小程序类型 微信 WECHAT 支付宝 ALIPAY
|
||
appltType: uni.getStorageSync("appltType"),
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getList()
|
||
this.getList1()
|
||
this.getUserBalance()
|
||
this.getDescribe()
|
||
},
|
||
methods: {
|
||
//囤油卡充值
|
||
addFuleCarRecords() {
|
||
this.rechargeCardOrder.mtStaffId = this.staff.id
|
||
let _this = this
|
||
request({
|
||
url: 'business/marketingActivity/cardFuelRecord/addFuleCarRecords',
|
||
method: 'post',
|
||
data: _this.rechargeCardOrder,
|
||
}).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/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);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 调用储值卡充值接口
|
||
goRecharge() {
|
||
this.rechargeOrder.mtStaffId = this.staff.id
|
||
let _this = this
|
||
request({
|
||
url: 'business/marketingActivity/cardValueRecord',
|
||
method: 'post',
|
||
data: this.rechargeOrder,
|
||
}).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"
|
||
})
|
||
}
|
||
});
|
||
}
|
||
}
|
||
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);
|
||
}
|
||
});
|
||
}
|
||
})
|
||
},
|
||
// 获取充值活动描述信息
|
||
getDescribe() {
|
||
request({
|
||
url: "/business/marketingActivity/cardValue/appletList",
|
||
method: 'get',
|
||
params: {
|
||
storeId: this.storeId,
|
||
isonline: '0',
|
||
activeStatus: "1"
|
||
},
|
||
}).then((res) => {
|
||
this.describe = res.data
|
||
})
|
||
},
|
||
// 获取列表信息
|
||
getList() {
|
||
request({
|
||
url: "/business/marketingActivity/cardValue/appletL",
|
||
method: 'get',
|
||
params: {
|
||
storeId: this.storeId
|
||
},
|
||
}).then((res) => {
|
||
this.storeName = res.data.storeName
|
||
this.rechargeList = res.data.cardValueList
|
||
if (res.data.cardValueList && res.data.cardValueList.length > 0) {
|
||
this.rechargeOrder.balance = res.data.cardValueList[0].rechargeBalance
|
||
this.rechargeOrder.payAmount = res.data.cardValueList[0].rechargeBalance
|
||
this.rechargeOrder.bidBalance = res.data.cardValueList[0].bidBalance
|
||
this.rechargeOrder.rechargeBalance = res.data.cardValueList[0].rechargeBalance
|
||
this.rechargeOrder.giftBalance = res.data.cardValueList[0].giftBalance
|
||
this.rechargeOrder.id = res.data.cardValueList[0].id
|
||
}
|
||
this.staffList = res.data.staffList
|
||
this.staff = res.data.staff
|
||
})
|
||
},
|
||
// 获取列表信息
|
||
getList1() {
|
||
request({
|
||
url: "business/marketingActivity/cardFuelDiesel/selectAllApplet",
|
||
method: 'get',
|
||
params: {
|
||
storeId: this.storeId,
|
||
activeStatus: 1
|
||
},
|
||
}).then((res) => {
|
||
this.oilRechargeList = res.data.records
|
||
if (res.data.records.length>0){
|
||
this.rechargeCardOrder.rechargeBalance = res.data.records[0].rechargeBalance
|
||
this.rechargeCardOrder.id = res.data.records[0].id
|
||
}
|
||
|
||
})
|
||
},
|
||
getUserBalance() {
|
||
request({
|
||
url: '/business/userManager/user/getUserBalanceApplet',
|
||
method: 'get',
|
||
params: this.query
|
||
}).then(res => {
|
||
if (res.code == 200) {
|
||
this.cardBalance = res.data
|
||
}
|
||
})
|
||
},
|
||
close() {
|
||
this.show = false
|
||
},
|
||
setIndex(index, data) {
|
||
this.windex = index
|
||
this.isEdit = true
|
||
if (this.type == 'balance') {
|
||
if (index != this.rechargeList.length) {
|
||
this.rechargeOrder.balance = data.rechargeBalance
|
||
this.rechargeOrder.payAmount = data.rechargeBalance
|
||
this.rechargeOrder.bidBalance = data.bidBalance
|
||
this.rechargeOrder.rechargeBalance = data.rechargeBalance
|
||
this.rechargeOrder.giftBalance = data.giftBalance
|
||
this.rechargeOrder.id = data.id
|
||
} else {
|
||
this.rechargeOrder.balance = 0
|
||
this.rechargeOrder.payAmount = 0
|
||
this.rechargeOrder.bidBalance = 0
|
||
this.rechargeOrder.rechargeBalance = 0
|
||
this.rechargeOrder.giftBalance = 0
|
||
this.isEdit = false
|
||
}
|
||
}
|
||
if (this.type == 'oilCard') {
|
||
this.rechargeCardOrder.rechargeBalance = data.rechargeBalance
|
||
this.rechargeCardOrder.id =data.id
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.centenr {}
|
||
|
||
.vip-top {
|
||
width: 95%;
|
||
height: 90px;
|
||
background: url('../../static/imgs/topback.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
margin: 15px auto;
|
||
overflow: hidden;
|
||
border-radius: 4px;
|
||
color: #fff;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
}
|
||
|
||
.t-right {
|
||
display: flex;
|
||
width: 100%;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.t-title {
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.t-num {
|
||
font-size: 20px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.vip-title {
|
||
width: 95%;
|
||
margin: 15px auto;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 16px;
|
||
color: #333333;
|
||
}
|
||
|
||
.n_input {
|
||
width: 95%;
|
||
height: 40px;
|
||
background: #FAFAFA;
|
||
border-radius: 4px;
|
||
border: 1px solid #EEEEEE;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding-left: 10px;
|
||
}
|
||
|
||
.b_input {
|
||
width: 95%;
|
||
height: 40px;
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
border: 1px solid #EEEEEE;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.input-box {
|
||
width: 95%;
|
||
margin: 15px auto;
|
||
}
|
||
|
||
.title-box {
|
||
border-top: 1px solid #EEEEEE;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
box-sizing: border-box;
|
||
padding: 15px 10px;
|
||
}
|
||
|
||
.bottom_ {
|
||
width: 100%;
|
||
position: fixed;
|
||
bottom: 0px;
|
||
left: 0px;
|
||
background: #fff;
|
||
height: 80px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.wrap_box {
|
||
width: 95%;
|
||
margin: 15px auto;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
}
|
||
|
||
.w_box {
|
||
width: 31%;
|
||
border: 1px solid #EEEEEE;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
color: #333333;
|
||
box-sizing: border-box;
|
||
padding: 5px;
|
||
font-size: 14px;
|
||
margin-bottom: 15px;
|
||
margin-right: 1%;
|
||
}
|
||
|
||
.w_box1 {
|
||
width: 48%;
|
||
border: 1px solid #EEEEEE;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
color: #333333;
|
||
box-sizing: border-box;
|
||
padding: 5px;
|
||
font-size: 14px;
|
||
margin-bottom: 15px;
|
||
margin-right: 1%;
|
||
}
|
||
|
||
.anniu_ {
|
||
width: 80%;
|
||
height: 35px;
|
||
background: #FF9655;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
border-radius: 50px;
|
||
color: #fff;
|
||
}
|
||
|
||
.i-title {
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.k-box {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 15px 10px;
|
||
}
|
||
|
||
.acvit {
|
||
background: #FF9655 !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.r-title {
|
||
border-left: 1px solid #eee;
|
||
width: 60px;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
|
||
}
|
||
|
||
._tbox {
|
||
border-radius: 10px;
|
||
background: #fff;
|
||
width: 100%;
|
||
|
||
|
||
}
|
||
|
||
._btop {
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
|
||
.input_sou {
|
||
width: 95%;
|
||
border: 1px solid #EEEEEE;
|
||
border-radius: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 5px 10px;
|
||
margin: 15px auto;
|
||
}
|
||
|
||
.h_box {
|
||
border-bottom: 1px solid #EEEEEE;
|
||
box-sizing: border-box;
|
||
padding: 5px 15px;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
</style> |