This commit is contained in:
cun-nan 2024-09-21 17:35:37 +08:00
parent 1f6b51ae20
commit 774f328ea6
5 changed files with 857 additions and 768 deletions

View File

@ -100,7 +100,7 @@
<img src="@/assets/menu_icon/chedui.png" v-if="!activeMenu.includes('/fleet')" style="width: 21px;height: 21px;"/>
<img src="@/assets/menu_icon/chedui_b.png" v-else style="width: 21px;height: 21px;"/>
</span>
<span style="margin-right: 10px;" v-if="item.meta.title=='便利店'">
<span style="margin-right: 10px;" v-if="item.meta.title=='便利店管理'">
<img src="@/assets/menu_icon/car.png" v-if="!activeMenu.includes('/convenience')" style="width: 25px;height: 25px;"/>
<img src="@/assets/menu_icon/car_b.png" v-else style="width: 25px;height: 25px;"/>
</span>

View File

@ -1,6 +1,6 @@
<template>
<view class="content">
<view class="card_" @click="goDetails()">
<view class="card_" @click="goDetails('balance')">
<view class="top_card">
<view class="">储值卡</view>
<view class="" @click="goCode()">
@ -17,10 +17,10 @@
NO.xxxxxxxxxxxxxxxxxx
</view> -->
</view>
<view class="card_1">
<view class="card_1" @click="goDetails('oilCard')">
<view class="top_card">
<view class="">囤油卡</view>
<view style="display: flex;">
<view style="display: flex;" @click="goCode()">
<view style="margin-right: 5px;">汽油92# 7.28/L</view>
<image src="../../static/new/rwm.png" style="width: 25px; height: 25px; "></image>
</view>
@ -94,9 +94,9 @@
url: '/pagesHome/oilRecharge/oilRecharge?id=' + id
})
},
goDetails() {
goDetails(val) {
uni.navigateTo({
url: '/pagesHome/cardDetails/index'
url: '/pagesHome/cardDetails/index?type='+val
})
},
s_() {

View File

@ -1,60 +1,78 @@
<template>
<view class="centenr">
<view class="Candywrapper">
<view class="card_box">
<view class="card_box" v-if="type=='balance'">
<view class="r-size">储值卡</view>
<view style="margin-bottom: 10px;">当前余额</view>
<view class="r-num">{{cardBalance.cardBalance || 0}}</view>
</view>
<view class="card_box" v-if="type=='oilCard'">
<view class="r-size">囤油卡</view>
<view style="margin-bottom: 10px;">剩余升数L</view>
<view class="r-num">{{cardBalance.cardBalance || 0}}</view>
</view>
<view class="tab-bs">
<view class="w_box" @click="show1 = true">类型筛选 <u-icon name="arrow-down-fill"></u-icon> </view>
<view class="w_box" @click="show = true">全部时间 <u-icon name="arrow-down-fill"></u-icon> </view>
</view>
<view class="bai_box" v-for="(item,index) in orderList" :key="index">
<view class="left-img">
<image src="../../static/icon/hyxf.png" mode="" v-if="item.changeType==0"></image>
<image src="../../static/icon/hycz.png" mode="" v-if="item.changeType==1"></image>
</view>
<view style="width: 85%;">
<view class="right-box">
<view class="l-text" v-if="item.changeType==0">会员消费</view>
<view class="l-text" v-if="item.changeType==1">会员充值</view>
<view class="r-text">{{item.giveBalance ? (item.balance + item.giveBalance) : item.balance}}
<!-- 储值卡 -->
<view v-if="type=='balance'">
<view class="bai_box" v-for="(item,index) in orderList" :key="index">
<view class="left-img">
<image src="../../static/icon/hyxf.png" mode="" v-if="item.changeType==0"></image>
<image src="../../static/icon/hycz.png" mode="" v-if="item.changeType==1"></image>
</view>
<view style="width: 85%;">
<view class="right-box">
<view class="l-text" v-if="item.changeType==0">会员消费</view>
<view class="l-text" v-if="item.changeType==1">会员充值</view>
<view class="r-text">{{item.giveBalance ? (item.balance + item.giveBalance) : item.balance}}
</view>
</view>
<view class="right-box">
<view class="">储值卡</view>
<view class="">余额{{item.afterTheChange || 0}}</view>
</view>
<view class="right-box">
<view class="">{{item.storeName}}</view>
<view class="">{{item.createTime}}</view>
</view>
</view>
<view class="right-box">
<view class="">储值卡</view>
<view class="">余额{{item.afterTheChange}}</view>
</view>
<view class="right-box">
<view class="">{{item.storeName}}</view>
<view class="">{{item.createTime}}</view>
</view>
</view>
<view v-if="!orderList || orderList.length==0">
<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
</u-empty>
</view>
</view>
<view v-if="!orderList || orderList.length==0">
<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
</u-empty>
<!-- 囤油卡 -->
<view v-if="type=='oilCard'">
<view class="bai_box" v-for="(item,index) in oilCardList" :key="index">
<view class="left-img">
<image src="../../static/icon/hyxf.png" mode="" v-if="item.changeType==0"></image>
<image src="../../static/icon/hycz.png" mode="" v-if="item.changeType==1"></image>
</view>
<view style="width: 85%;">
<view class="right-box">
<view class="l-text" v-if="item.changeType==0">会员消费</view>
<view class="l-text" v-if="item.changeType==1">会员充值</view>
<view class="r-text">{{item.balance || 0}}
</view>
</view>
<view class="right-box">
<view class="">囤油卡</view>
<view class="">余额{{item.afterTheChange || 0}}</view>
</view>
<view class="right-box">
<view class="">{{item.storeName}}</view>
<view class="">{{item.createTime}}</view>
</view>
</view>
</view>
<view v-if="!oilCardList || oilCardList.length==0">
<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
</u-empty>
</view>
</view>
<!-- <view class="bai_box">
<view class="left-img">
<image src="../../static/icon/hycz.png" mode=""></image>
</view>
<view style="width: 85%;">
<view class="right-box">
<view class="l-text">会员充值</view>
<view class="r-text">-199.00</view>
</view>
<view class="right-box">
<view class="">储值卡</view>
<view class="">余额123456.98</view>
</view>
<view class="right-box">
<view class="">中建锦绣二期站</view>
<view class="">2024-09-09 16:45:09</view>
</view>
</view>
</view> -->
<u-datetime-picker :show="show" v-model="value1" mode="year-month" @cancel="cancel1"
@confirm="confirm1"></u-datetime-picker>
<u-picker :show="show1" :columns="columns" @cancel="cancel" @confirm="confirm"></u-picker>
@ -67,6 +85,7 @@
export default {
data() {
return {
type: "balance",
query: {
chainStoreId: '',
couponType: '',
@ -86,37 +105,72 @@
pageSize: 30,
storeId: uni.getStorageSync('storeId'),
changeType: '',
startTime: ''
startTime: '',
createTime: ''
},
orderList: [],
total: 0
total: 0,
oilCardList: []
}
},
onLoad(e) {
this.type = e.type
if (this.type == 'oilCard') {
this.getOilCardList()
} else {
this.getOrderList()
}
},
onShow() {
this.query.chainStoreId = uni.getStorageSync('chainStoreId');
this.getUserBalance()
this.getOrderList()
},
onPullDownRefresh() {
console.log("刷新");
this.orderList = []
this.oilCardList = []
this.queryParams = {
pageNo: 1,
pageSize: 30,
storeId: uni.getStorageSync('storeId'),
changeType: '',
startTime: ''
startTime: '',
createTime: ''
}
this.getOrderList()
},
onReachBottom() {
//
if (this.orderList.length < this.total) {
this.queryParams.pageNo++
if (this.type == 'oilCard') {
this.getOilCardList()
} else {
this.getOrderList()
}
},
onReachBottom() {
//
if (this.type == 'oilCard') {
if (this.oilCardList.length < this.total) {
this.queryParams.pageNo++
this.getOilCardList()
}
} else {
if (this.orderList.length < this.total) {
this.queryParams.pageNo++
this.getOrderList()
}
}
},
methods: {
getOilCardList() {
request({
url: '/business/marketingActivity/cardFuelChange/queryByPageUni',
method: 'get',
params: this.queryParams
}).then(res => {
if (res.code == 200) {
this.oilCardList = res.data.records
this.total = res.data.total
console.log(res, 130);
}
})
},
//
getOrderList() {
request({
@ -127,7 +181,6 @@
if (res.code == 200) {
this.orderList = res.data.records
this.total = res.data.total
console.log(res,130);
}
})
},
@ -152,7 +205,11 @@
} else {
this.queryParams.changeType = ""
}
this.getOrderList()
if (this.type == 'oilCard') {
this.getOilCardList()
} else {
this.getOrderList()
}
this.show1 = false
},
cancel() {
@ -165,12 +222,16 @@
const dateString = date.toLocaleDateString()
const timeString = date.toLocaleTimeString();
//
return date.getFullYear() + '-' + (date.getMonth()+1);
return date.getFullYear() + '-' + (date.getMonth() + 1);
},
confirm1(e) {
this.queryParams.startTime = this.timestampToString(e.value)
this.queryParams.pageNo = 1
this.getOrderList()
if (this.type == 'oilCard') {
this.getOilCardList()
} else {
this.getOrderList()
}
this.show = false
},
cancel1() {

View File

@ -1,61 +1,63 @@
<template>
<view class="centenr">
<view class="top-box">
<view class="t-db">
<view class="d-s">
<view style="margin-right: 10px;">储值卡</view>
<view class="icon_">主卡</view>
</view>
<image src="../../static/new/rwm.png" style="width: 25px; height: 25px; "></image>
</view>
<view class="on-title">可用余额</view>
<view class="on-num">¥{{cardBalance.cardBalance || 0}}</view>
<view class="d-a">
<view class="_dj">
<view class="" v-if="cardBalance.giveAmount">¥{{cardBalance.cardBalance - cardBalance.giveAmount}}</view>
<view class="" v-else>¥{{cardBalance.cardBalance || 0}}</view>
<view style="font-size: 14px;">本金金额</view>
</view>
<view class="_dj">
<view class="">¥{{cardBalance.giveAmount || 0}}</view>
<view style="font-size: 14px;">赠送金额</view>
</view>
</view>
</view>
<view class="bottom-box">
<view class="or-aniu" @click="goMemberRecharge()">立即充值</view>
</view>
<view class="b_box">
<view class="g-box" @click="godetail()">
<view class="d-s">
<image src="../../static/new/k1.png" style="width: 20px; height: 20px;margin-right: 5px; "></image>
<view class="">余额明细</view>
</view>
<u-icon name="arrow-right" color="#333"></u-icon>
</view>
<view class="g-box" @click="equityShow= true">
<view class="d-s">
<image src="../../static/new/k2.png" style="width: 20px; height: 20px;margin-right: 5px; "></image>
<view class="">权益说明</view>
</view>
<u-icon name="arrow-right" color="#333"></u-icon>
</view>
<view class="g-box" @click="ruleShow = true">
<view class="d-s">
<image src="../../static/new/k3.png" style="width: 20px; height: 20px;margin-right: 5px; "></image>
<view class="">规则说明</view>
</view>
<u-icon name="arrow-right" color="#333"></u-icon>
</view>
</view>
<u-popup :show="ruleShow" :closeable="true" :round="10" mode="bottom" @close="ruleclose">
<view class="_tbox">
<view class="_btop">规则说明</view>
<view class="_bbox">
<!-- <view class="b_title">获取您的位置信息</view> -->
<view class="">
{{equity.gzDetail}}
<!-- 1开卡与充值
<view class="centenr">
<view class="top-box">
<view class="t-db">
<view class="d-s">
<view style="margin-right: 10px;" v-if="type=='balance'">储值卡</view>
<view style="margin-right: 10px;" v-if="type=='oilCard'">囤油卡</view>
<view class="icon_" v-if="type=='balance'">主卡</view>
</view>
<image src="../../static/new/rwm.png" style="width: 25px; height: 25px; " @click="goCode()"></image>
</view>
<view class="on-title">可用余额</view>
<view class="on-num">¥{{cardBalance.cardBalance || 0}}</view>
<view class="d-a" v-if="type=='balance'">
<view class="_dj">
<view class="" v-if="cardBalance.giveAmount">¥{{cardBalance.cardBalance - cardBalance.giveAmount}}
</view>
<view class="" v-else>¥{{cardBalance.cardBalance || 0}}</view>
<view style="font-size: 14px;">本金金额</view>
</view>
<view class="_dj">
<view class="">¥{{cardBalance.giveAmount || 0}}</view>
<view style="font-size: 14px;">赠送金额</view>
</view>
</view>
</view>
<view class="bottom-box">
<view class="or-aniu" @click="goMemberRecharge()">立即充值</view>
</view>
<view class="b_box">
<view class="g-box" @click="godetail()">
<view class="d-s">
<image src="../../static/new/k1.png" style="width: 20px; height: 20px;margin-right: 5px; "></image>
<view class="">余额明细</view>
</view>
<u-icon name="arrow-right" color="#333"></u-icon>
</view>
<view class="g-box" @click="equityShow= true">
<view class="d-s">
<image src="../../static/new/k2.png" style="width: 20px; height: 20px;margin-right: 5px; "></image>
<view class="">权益说明</view>
</view>
<u-icon name="arrow-right" color="#333"></u-icon>
</view>
<view class="g-box" @click="ruleShow = true">
<view class="d-s">
<image src="../../static/new/k3.png" style="width: 20px; height: 20px;margin-right: 5px; "></image>
<view class="">规则说明</view>
</view>
<u-icon name="arrow-right" color="#333"></u-icon>
</view>
</view>
<u-popup :show="ruleShow" :closeable="true" :round="10" mode="bottom" @close="ruleclose">
<view class="_tbox">
<view class="_btop">规则说明</view>
<view class="_bbox">
<!-- <view class="b_title">获取您的位置信息</view> -->
<view class="">
{{equity.gzDetail}}
<!-- 1开卡与充值
①开卡通常需要携带本人身份证原件到油站办理并支付一定的
工本费如15元左右部分站点首次充值达到一定金额如50
0元或1000元可以免除开卡费用
@ -79,19 +81,19 @@
特定品牌油站使用
②持卡人应遵守油站的相关规定和制度如不得使用储值卡进行
套现购买非油品等违规行为 -->
</view>
</view>
</view>
</view>
</view>
</u-popup>
<u-popup :show="equityShow" :closeable="true" :round="10" mode="bottom" @close="equityclose">
<view class="_tbox">
<view class="_btop">权益说明</view>
<view class="_bbox">
<!-- <view class="b_title">获取您的位置信息</view> -->
<view class="">
{{equity.qyDetail}}
<!-- 1优惠加油
</view>
</u-popup>
<u-popup :show="equityShow" :closeable="true" :round="10" mode="bottom" @close="equityclose">
<view class="_tbox">
<view class="_btop">权益说明</view>
<view class="_bbox">
<!-- <view class="b_title">获取您的位置信息</view> -->
<view class="">
{{equity.qyDetail}}
<!-- 1优惠加油
①使用储值卡在加油站加油通常可以享受一定的优惠如每升油
便宜0.1-0.8元不等具体优惠幅度根据地区时间段的促销活动
而定
@ -111,233 +113,246 @@
①储值卡具有极高的便利性可以实现无现金加油减少携带现
金的麻烦和风险
②支持线上充值和查询方便持卡人随时掌握余额和积分情况 -->
</view>
</view>
</view>
</view>
</view>
</u-popup>
</view>
</u-popup>
</view>
</view>
</template>
<script>
import request from "../../utils/request";
export default {
data() {
return {
query: {
chainStoreId: '',
couponType: '',
useStatus: 0,
pageNo: 1,
pageSize: 10
},
ruleShow: false,
equityShow: false,
windex: 0,
cardBalance:{},
equity:{}
}
},
onShow() {
this.query.chainStoreId = uni.getStorageSync('chainStoreId');
this.getUserBalance()
this.getEquity()
},
methods: {
//
getEquity(){
request({
url: '/cardValueRule/getQyAndGz',
method: 'get',
params: {storeId:uni.getStorageSync("storeId")}
}).then(res => {
if (res.code == 200) {
this.equity = res.data
console.log(res,'151');
}
})
},
//
goMemberRecharge() {
uni.navigateTo({
url: '/pagesHome/memberRecharge/index'
})
},
getUserBalance() {
request({
url: '/business/userManager/user/getUserBalanceApplet',
method: 'get',
params: this.query
}).then(res => {
if (res.code == 200) {
this.cardBalance = res.data
}
})
},
ruleclose() {
this.ruleShow = false
},
equityclose() {
this.equityShow = false
},
setIndex(index) {
this.windex = index
},
godetail() {
uni.navigateTo({
url: '/pagesHome/cardDetails/detailed'
})
}
}
}
import request from "../../utils/request";
export default {
data() {
return {
type: "balance",
query: {
chainStoreId: '',
couponType: '',
useStatus: 0,
pageNo: 1,
pageSize: 10
},
ruleShow: false,
equityShow: false,
windex: 0,
cardBalance: {},
equity: {}
}
},
onLoad(e) {
this.type = e.type
},
onShow() {
this.query.chainStoreId = uni.getStorageSync('chainStoreId');
this.getUserBalance()
this.getEquity()
},
methods: {
goCode() {
uni.navigateTo({
url: '/pagesHome/QRcode/QRcode'
})
},
//
getEquity() {
let type = this.type == 'oilCard' ? 1 : 0
request({
url: '/cardValueRule/getQyAndGz',
method: 'get',
params: {
storeId: uni.getStorageSync("storeId"),
type: type
}
}).then(res => {
if (res.code == 200) {
this.equity = res.data
console.log(res, '151');
}
})
},
//
goMemberRecharge() {
uni.navigateTo({
url: '/pagesHome/memberRecharge/index?type=' + this.type
})
},
getUserBalance() {
request({
url: '/business/userManager/user/getUserBalanceApplet',
method: 'get',
params: this.query
}).then(res => {
if (res.code == 200) {
this.cardBalance = res.data
}
})
},
ruleclose() {
this.ruleShow = false
},
equityclose() {
this.equityShow = false
},
setIndex(index) {
this.windex = index
},
godetail() {
uni.navigateTo({
url: '/pagesHome/cardDetails/detailed?type=' + this.type
})
}
}
}
</script>
<style scoped lang="scss">
.centenr {
background: #F9F9F9;
width: 100%;
height: 100vh;
}
.centenr {
background: #F9F9F9;
width: 100%;
height: 100vh;
}
.top-box {
width: 95%;
height: 150px;
background: linear-gradient(135deg, #F77955 0%, #FFA360 100%, #F9C58C 100%);
box-sizing: border-box;
padding: 10px;
margin: 0 auto;
color: #fff;
}
.top-box {
width: 95%;
height: 150px;
background: linear-gradient(135deg, #F77955 0%, #FFA360 100%, #F9C58C 100%);
box-sizing: border-box;
padding: 10px;
margin: 0 auto;
color: #fff;
}
.bottom-box {
width: 95%;
height: 70px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.bottom-box {
width: 95%;
height: 70px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.t-db {
width: 100%;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
}
.t-db {
width: 100%;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
}
.b_box {
width: 95%;
margin: 15px auto;
background: #fff;
.b_box {
width: 95%;
margin: 15px auto;
background: #fff;
}
}
.g-box {
width: 100%;
box-sizing: border-box;
padding: 15px 10px;
border-bottom: 1px solid #EEEEEE;
display: flex;
align-items: center;
justify-content: space-between;
}
.g-box {
width: 100%;
box-sizing: border-box;
padding: 15px 10px;
border-bottom: 1px solid #EEEEEE;
display: flex;
align-items: center;
justify-content: space-between;
}
.d-s {
display: flex;
align-items: center;
}
.d-s {
display: flex;
align-items: center;
}
.or-aniu {
font-size: 14px;
color: #FA6400;
width: 195px;
height: 30px;
border: 1px solid #FA6400;
display: flex;
align-items: center;
justify-content: center;
}
.or-aniu {
font-size: 14px;
color: #FA6400;
width: 195px;
height: 30px;
border: 1px solid #FA6400;
display: flex;
align-items: center;
justify-content: center;
}
.icon_ {
width: 30px;
height: 16px;
background: rgba(255, 255, 255, 0.48);
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 500;
font-size: 10px;
}
.icon_ {
width: 30px;
height: 16px;
background: rgba(255, 255, 255, 0.48);
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 500;
font-size: 10px;
}
.d-a {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
.d-a {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
.on-title {
font-size: 14px;
color: #FFFFFF;
width: 100%;
text-align: center;
.on-title {
font-size: 14px;
color: #FFFFFF;
width: 100%;
text-align: center;
}
}
.on-num {
font-size: 24px;
color: #FFFFFF;
width: 100%;
text-align: center;
margin: 10px auto;
}
.on-num {
font-size: 24px;
color: #FFFFFF;
width: 100%;
text-align: center;
margin: 10px auto;
}
._dj {
font-size: 14px;
}
._dj {
font-size: 14px;
}
._tbox {
border-radius: 10px;
background: #fff;
width: 100%;
._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;
}
._btop {
box-sizing: border-box;
padding: 15px;
border-bottom: 1px solid #EEEEEE;
text-align: center;
font-weight: 600;
font-size: 14px;
color: #333333;
}
._bbox {
box-sizing: border-box;
padding: 15px;
font-weight: 400;
font-size: 14px;
color: #333333;
line-height: 18px;
}
._bbox {
box-sizing: border-box;
padding: 15px;
font-weight: 400;
font-size: 14px;
color: #333333;
line-height: 18px;
}
.b_title {
font-weight: bold;
}
.b_title {
font-weight: bold;
}
.b-cen {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.b-cen {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
</style>

View File

@ -1,475 +1,488 @@
<template>
<view class="centenr">
<view class="vip-top">
<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-title">
<view class="">{{storeName || "--"}}</view>
<!-- <image src="../../static/new/qh.png" style="width: 18px; height: 18px;" @click="show = true"></image> -->
</view>
<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 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 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 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 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_" @click="goRecharge()">
立即充值{{rechargeOrder.balance}}
</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 style="width: 100%; height: 88px; "></view>
<view class="bottom_">
<view class="anniu_" @click="goRecharge()">
立即充值{{rechargeOrder.balance}}
</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>
</view>
</u-popup>
</view>
</template>
<script>
import request from '../../utils/request'
export default {
data() {
return {
show: false,
windex: 0,
storeId: uni.getStorageSync("storeId"),
storeName: "",
//
rechargeList: [],
//
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
},
isEdit: true,
describe: [],
// WECHAT ALIPAY
appltType: uni.getStorageSync("appltType"),
}
},
onShow() {
this.getList()
this.getUserBalance()
this.getDescribe()
},
methods: {
//
goRecharge() {
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"
})
// 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);
}
});
}
})
},
//
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
})
},
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
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
}
}
}
}
import request from '../../utils/request'
export default {
data() {
return {
type: 'balance',
show: false,
windex: 0,
storeId: uni.getStorageSync("storeId"),
storeName: "",
//
rechargeList: [],
//
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
},
isEdit: true,
describe: [],
// WECHAT ALIPAY
appltType: uni.getStorageSync("appltType"),
}
},
onShow() {
this.getList()
this.getUserBalance()
this.getDescribe()
},
methods: {
//
goRecharge() {
if (this.type=='oilCard'){
uni.showToast({
icon:'error',
title:"暂未开发!"
})
return;
}
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"
})
// 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);
}
});
}
})
},
//
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
})
},
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
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
}
}
}
}
</script>
<style scoped lang="scss">
.centenr {}
.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;
}
.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-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-title {
font-size: 14px;
color: #FFFFFF;
margin-bottom: 5px;
}
.t-num {
font-size: 20px;
color: #FFFFFF;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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;
.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_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%;
}
.anniu_ {
width: 80%;
height: 35px;
background: #FF9655;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: 50px;
color: #fff;
}
.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;
}
.i-title {
font-weight: 600;
font-size: 14px;
color: #333333;
margin-bottom: 15px;
}
.k-box {
width: 100%;
box-sizing: border-box;
padding: 15px 10px;
}
.k-box {
width: 100%;
box-sizing: border-box;
padding: 15px 10px;
}
.acvit {
background: #FF9655 !important;
color: #fff !important;
}
.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;
.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%;
._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;
}
._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;
}
.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;
}
.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>