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.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;"/> <img src="@/assets/menu_icon/chedui_b.png" v-else style="width: 21px;height: 21px;"/>
</span> </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.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;"/> <img src="@/assets/menu_icon/car_b.png" v-else style="width: 25px;height: 25px;"/>
</span> </span>

View File

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

View File

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

View File

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

View File

@ -1,475 +1,488 @@
<template> <template>
<view class="centenr"> <view class="centenr">
<view class="vip-top"> <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-right">储值卡 <u-icon name="arrow-down-fill" color="#fff" size="12"></u-icon> </view>
<view class="t-title">当前余额</view> <view class="t-title">当前余额</view>
<view class="t-num">{{cardBalance.cardBalance || 0}}</view> <view class="t-num">{{cardBalance.cardBalance || 0}}</view>
</view> </view>
<view class="vip-title"> <view class="vip-top" v-if="type=='oilCard'">
<view class="">{{storeName || "--"}}</view> <view class="t-right">囤油卡 <u-icon name="arrow-down-fill" color="#fff" size="12"></u-icon> </view>
<!-- <image src="../../static/new/qh.png" style="width: 18px; height: 18px;" @click="show = true"></image> --> <view class="t-title">剩余油量L</view>
</view> <view class="t-num">{{cardBalance.cardBalance || 0}}</view>
<view class="input-box"> </view>
<view class="i-title">充值金额</view> <view class="vip-title">
<view class="n_input"> <view class="">{{storeName || "--"}}</view>
<input type="text" v-model="rechargeOrder.balance" :disabled="isEdit"> <!-- <image src="../../static/new/qh.png" style="width: 18px; height: 18px;" @click="show = true"></image> -->
<view class="r-title"> </view>
{{staff.realName || "--"}} <view class="input-box">
</view> <view class="i-title">充值金额</view>
</view> <view class="n_input">
</view> <input type="text" v-model="rechargeOrder.balance" :disabled="isEdit">
<view class="wrap_box"> <view class="r-title">
<view class="w_box" v-for="(item,index) in rechargeList" :key="index" @click="setIndex(index,item)" {{staff.realName || "--"}}
:class="{ 'acvit' :windex == index}"> </view>
<view class="">{{item.rechargeBalance}}</view> </view>
<view class="">{{item.giftBalance}}</view> </view>
</view> <view class="wrap_box">
<view class="w_box" @click="setIndex(rechargeList.length)" <view class="w_box" v-for="(item,index) in rechargeList" :key="index" @click="setIndex(index,item)"
:class="{ 'acvit' :windex == rechargeList.length}"> :class="{ 'acvit' :windex == index}">
<view class="" style="line-height: 40px;">自定义金额</view> <view class="">{{item.rechargeBalance}}</view>
</view> <view class="">{{item.giftBalance}}</view>
</view> </view>
<view class="input-box"> <view class="w_box" @click="setIndex(rechargeList.length)"
<view class="i-title">赠送金额</view> :class="{ 'acvit' :windex == rechargeList.length}">
<view class="n_input"> <view class="" style="line-height: 40px;">自定义金额</view>
<input type="text" v-model="rechargeOrder.giftBalance" disabled> </view>
</view> </view>
</view> <view class="input-box">
<view class="input-box"> <view class="i-title">赠送金额</view>
<view class="i-title">充值备注</view> <view class="n_input">
<view class="b_input"> <input type="text" v-model="rechargeOrder.giftBalance" disabled>
<input type="text" v-model="rechargeOrder.remark"> </view>
</view> </view>
</view> <view class="input-box">
<view class="title-box"> <view class="i-title">充值备注</view>
<view class="i-title">充值有礼</view> <view class="b_input">
<view class="i-text" v-for="(item,index) in describe" :key="index">{{item.discountActiveDescribe}}</view> <input type="text" v-model="rechargeOrder.remark">
</view> </view>
<view class="k-box"> </view>
<view class="i-title">充值规则</view> <view class="title-box">
<view class="i-text" v-if="describe.length>0">活动时间{{describe[0].time}}</view> <view class="i-title">充值有礼</view>
<view class="i-text" v-else>暂无规则</view> <view class="i-text" v-for="(item,index) in describe" :key="index">{{item.discountActiveDescribe}}</view>
</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 style="width: 100%; height: 88px; "></view>
<view class="bottom_"> <view class="bottom_">
<view class="anniu_" @click="goRecharge()"> <view class="anniu_" @click="goRecharge()">
立即充值{{rechargeOrder.balance}} 立即充值{{rechargeOrder.balance}}
</view> </view>
</view> </view>
<u-popup :show="show" :closeable="true" :round="10" mode="bottom" @close="close"> <u-popup :show="show" :closeable="true" :round="10" mode="bottom" @close="close">
<view class="_tbox"> <view class="_tbox">
<view class="_btop">选择油站</view> <view class="_btop">选择油站</view>
<view class="input_sou"> <view class="input_sou">
<input type="text" placeholder="请输入油站" /> <input type="text" placeholder="请输入油站" />
<u-icon name="search" size="18px"></u-icon> <u-icon name="search" size="18px"></u-icon>
</view> </view>
<view class="h_box" v-for="(item,index) in 4" :key="index"> <view class="h_box" v-for="(item,index) in 4" :key="index">
<view class="">测试A店</view> <view class="">测试A店</view>
<view class="">129.9km</view> <view class="">129.9km</view>
</view> </view>
</view> </view>
</u-popup> </u-popup>
</view> </view>
</template> </template>
<script> <script>
import request from '../../utils/request' import request from '../../utils/request'
export default { export default {
data() { data() {
return { return {
show: false, type: 'balance',
windex: 0, show: false,
storeId: uni.getStorageSync("storeId"), windex: 0,
storeName: "", storeId: uni.getStorageSync("storeId"),
// storeName: "",
rechargeList: [], //
// rechargeList: [],
staffList: [], //
staff: {}, staffList: [],
query: { staff: {},
chainStoreId: uni.getStorageSync("chainStoreId"), query: {
couponType: '', chainStoreId: uni.getStorageSync("chainStoreId"),
useStatus: 0, couponType: '',
pageNo: 1, useStatus: 0,
pageSize: 10 pageNo: 1,
}, pageSize: 10
cardBalance: {}, },
rechargeOrder: { cardBalance: {},
payType: uni.getStorageSync("appltType"), rechargeOrder: {
mtStaffId: '', payType: uni.getStorageSync("appltType"),
id: '', mtStaffId: '',
storeId: uni.getStorageSync("storeId"), id: '',
chainStoreId: uni.getStorageSync("chainStoreId"), storeId: uni.getStorageSync("storeId"),
cardRecordId: '', chainStoreId: uni.getStorageSync("chainStoreId"),
balance: 0, cardRecordId: '',
types: 0 balance: 0,
}, types: 0
isEdit: true, },
describe: [], isEdit: true,
// WECHAT ALIPAY describe: [],
appltType: uni.getStorageSync("appltType"), // WECHAT ALIPAY
} appltType: uni.getStorageSync("appltType"),
}, }
onShow() { },
this.getList() onShow() {
this.getUserBalance() this.getList()
this.getDescribe() this.getUserBalance()
}, this.getDescribe()
methods: { },
// methods: {
goRecharge() { //
let _this = this goRecharge() {
request({ if (this.type=='oilCard'){
url: 'business/marketingActivity/cardValueRecord', uni.showToast({
method: 'post', icon:'error',
data: this.rechargeOrder, title:"暂未开发!"
}).then(res => { })
if (res.code === 200) { return;
if (_this.appltType == "WECHAT") { }
if (!res.data.reservedPayInfo) { let _this = this
uni.showToast({ request({
title: '支付失败,请联系商家', url: 'business/marketingActivity/cardValueRecord',
icon: "none" method: 'post',
}) data: this.rechargeOrder,
return; }).then(res => {
} if (res.code === 200) {
let payProvider = "wxpay" if (_this.appltType == "WECHAT") {
_this.orderInfo = JSON.parse(res.data.reservedPayInfo); if (!res.data.reservedPayInfo) {
uni.requestPayment({ uni.showToast({
// provider: 'wxpay' 'alipay' title: '支付失败,请联系商家',
provider: payProvider, icon: "none"
timeStamp: _this.orderInfo.timeStamp, })
nonceStr: _this.orderInfo.nonceStr, return;
package: _this.orderInfo.package, }
signType: 'MD5', let payProvider = "wxpay"
paySign: _this.orderInfo.paySign, _this.orderInfo = JSON.parse(res.data.reservedPayInfo);
success: function(res) { uni.requestPayment({
console.log('success:', res); // provider: 'wxpay' 'alipay'
uni.reLaunch({ provider: payProvider,
url: '/pagesRefuel/orderSuccess/index' timeStamp: _this.orderInfo.timeStamp,
}) nonceStr: _this.orderInfo.nonceStr,
}, package: _this.orderInfo.package,
fail: function(err) { signType: 'MD5',
request({ paySign: _this.orderInfo.paySign,
url: "business/marketingActivity/cardValueRecord/changeOrderPayStatus", success: function(res) {
method: 'post', console.log('success:', res);
data: { uni.reLaunch({
"orderNo": res.data.orderNo, url: '/pagesRefuel/orderSuccess/index'
"status": "payFail" })
}, },
}).then((res) => {}) fail: function(err) {
uni.showToast({ request({
title: "支付失败!", url: "business/marketingActivity/cardValueRecord/changeOrderPayStatus",
icon: "error" method: 'post',
}) data: {
// console.log('fail:', err); "orderNo": res.data.orderNo,
} "status": "payFail"
}); },
} }).then((res) => {})
} uni.showToast({
if (_this.appltType == "ALIPAY") { title: "支付失败!",
if (!res.data.reservedTransactionId) { icon: "error"
uni.showToast({ })
title: '支付失败,请联系商家', // console.log('fail:', err);
icon: "none" }
}) });
return; }
} }
my.tradePay({ if (_this.appltType == "ALIPAY") {
tradeNO: res.data.reservedTransactionId if (!res.data.reservedTransactionId) {
}, function(resp) { uni.showToast({
if (resp.resultCode == '9000') { title: '支付失败,请联系商家',
console.log("支付成功") icon: "none"
uni.reLaunch({ })
url: '/pagesRefuel/orderSuccess/index' return;
}) }
} else { my.tradePay({
request({ tradeNO: res.data.reservedTransactionId
url: "/business/marketingActivity/cardValueRecord/changeOrderPayStatus", }, function(resp) {
method: 'post', if (resp.resultCode == '9000') {
data: { console.log("支付成功")
"orderNo": res.data.orderNo, uni.reLaunch({
"status": "payFail" url: '/pagesRefuel/orderSuccess/index'
}, })
}).then((res) => {}) } else {
uni.showToast({ request({
title: "支付失败!", url: "/business/marketingActivity/cardValueRecord/changeOrderPayStatus",
icon: "error" method: 'post',
}) data: {
console.log('支付失败,' + resp.resultCode); "orderNo": res.data.orderNo,
} "status": "payFail"
}); },
} }).then((res) => {})
}) uni.showToast({
}, title: "支付失败!",
// icon: "error"
getDescribe() { })
request({ console.log('支付失败,' + resp.resultCode);
url: "/business/marketingActivity/cardValue/appletList", }
method: 'get', });
params: { }
storeId: this.storeId, })
isonline: '0', },
activeStatus: "1" //
}, getDescribe() {
}).then((res) => { request({
this.describe = res.data url: "/business/marketingActivity/cardValue/appletList",
}) method: 'get',
}, params: {
// storeId: this.storeId,
getList() { isonline: '0',
request({ activeStatus: "1"
url: "/business/marketingActivity/cardValue/appletL", },
method: 'get', }).then((res) => {
params: { this.describe = res.data
storeId: this.storeId })
}, },
}).then((res) => { //
this.storeName = res.data.storeName getList() {
this.rechargeList = res.data.cardValueList request({
if (res.data.cardValueList && res.data.cardValueList.length > 0) { url: "/business/marketingActivity/cardValue/appletL",
this.rechargeOrder.balance = res.data.cardValueList[0].rechargeBalance method: 'get',
this.rechargeOrder.payAmount = res.data.cardValueList[0].rechargeBalance params: {
this.rechargeOrder.bidBalance = res.data.cardValueList[0].bidBalance storeId: this.storeId
this.rechargeOrder.rechargeBalance = res.data.cardValueList[0].rechargeBalance },
this.rechargeOrder.giftBalance = res.data.cardValueList[0].giftBalance }).then((res) => {
this.rechargeOrder.id = res.data.cardValueList[0].id this.storeName = res.data.storeName
} this.rechargeList = res.data.cardValueList
this.staffList = res.data.staffList if (res.data.cardValueList && res.data.cardValueList.length > 0) {
this.staff = res.data.staff this.rechargeOrder.balance = res.data.cardValueList[0].rechargeBalance
}) this.rechargeOrder.payAmount = res.data.cardValueList[0].rechargeBalance
}, this.rechargeOrder.bidBalance = res.data.cardValueList[0].bidBalance
getUserBalance() { this.rechargeOrder.rechargeBalance = res.data.cardValueList[0].rechargeBalance
request({ this.rechargeOrder.giftBalance = res.data.cardValueList[0].giftBalance
url: '/business/userManager/user/getUserBalanceApplet', this.rechargeOrder.id = res.data.cardValueList[0].id
method: 'get', }
params: this.query this.staffList = res.data.staffList
}).then(res => { this.staff = res.data.staff
if (res.code == 200) { })
this.cardBalance = res.data },
} getUserBalance() {
}) request({
}, url: '/business/userManager/user/getUserBalanceApplet',
close() { method: 'get',
this.show = false params: this.query
}, }).then(res => {
setIndex(index, data) { if (res.code == 200) {
this.windex = index this.cardBalance = res.data
if (index != this.rechargeList.length) { }
this.rechargeOrder.balance = data.rechargeBalance })
this.rechargeOrder.payAmount = data.rechargeBalance },
this.rechargeOrder.bidBalance = data.bidBalance close() {
this.rechargeOrder.rechargeBalance = data.rechargeBalance this.show = false
this.rechargeOrder.giftBalance = data.giftBalance },
this.rechargeOrder.id = data.id setIndex(index, data) {
} else { this.windex = index
this.rechargeOrder.balance = 0 if (index != this.rechargeList.length) {
this.rechargeOrder.payAmount = 0 this.rechargeOrder.balance = data.rechargeBalance
this.rechargeOrder.bidBalance = 0 this.rechargeOrder.payAmount = data.rechargeBalance
this.rechargeOrder.rechargeBalance = 0 this.rechargeOrder.bidBalance = data.bidBalance
this.rechargeOrder.giftBalance = 0 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> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.centenr {} .centenr {}
.vip-top { .vip-top {
width: 95%; width: 95%;
height: 90px; height: 90px;
background: url('../../static/imgs/topback.png') no-repeat; background: url('../../static/imgs/topback.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin: 15px auto; margin: 15px auto;
overflow: hidden; overflow: hidden;
border-radius: 4px; border-radius: 4px;
color: #fff; color: #fff;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 10px;
} }
.t-right { .t-right {
display: flex; display: flex;
width: 100%; width: 100%;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
font-size: 14px; font-size: 14px;
} }
.t-title { .t-title {
font-size: 14px; font-size: 14px;
color: #FFFFFF; color: #FFFFFF;
margin-bottom: 5px; margin-bottom: 5px;
} }
.t-num { .t-num {
font-size: 20px; font-size: 20px;
color: #FFFFFF; color: #FFFFFF;
} }
.vip-title { .vip-title {
width: 95%; width: 95%;
margin: 15px auto; margin: 15px auto;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 16px; font-size: 16px;
color: #333333; color: #333333;
} }
.n_input { .n_input {
width: 95%; width: 95%;
height: 40px; height: 40px;
background: #FAFAFA; background: #FAFAFA;
border-radius: 4px; border-radius: 4px;
border: 1px solid #EEEEEE; border: 1px solid #EEEEEE;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
padding-left: 10px; padding-left: 10px;
} }
.b_input { .b_input {
width: 95%; width: 95%;
height: 40px; height: 40px;
background: #fff; background: #fff;
border-radius: 4px; border-radius: 4px;
border: 1px solid #EEEEEE; border: 1px solid #EEEEEE;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.input-box { .input-box {
width: 95%; width: 95%;
margin: 15px auto; margin: 15px auto;
} }
.title-box { .title-box {
border-top: 1px solid #EEEEEE; border-top: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE;
box-sizing: border-box; box-sizing: border-box;
padding: 15px 10px; padding: 15px 10px;
} }
.bottom_ { .bottom_ {
width: 100%; width: 100%;
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
background: #fff; background: #fff;
height: 80px; height: 80px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.wrap_box { .wrap_box {
width: 95%; width: 95%;
margin: 15px auto; margin: 15px auto;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.w_box { .w_box {
width: 31%; width: 31%;
border: 1px solid #EEEEEE; border: 1px solid #EEEEEE;
border-radius: 4px; border-radius: 4px;
text-align: center; text-align: center;
color: #333333; color: #333333;
box-sizing: border-box; box-sizing: border-box;
padding: 5px; padding: 5px;
font-size: 14px; font-size: 14px;
margin-bottom: 15px; margin-bottom: 15px;
margin-right: 1%; margin-right: 1%;
} }
.anniu_ { .anniu_ {
width: 80%; width: 80%;
height: 35px; height: 35px;
background: #FF9655; background: #FF9655;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #fff; color: #fff;
border-radius: 50px; border-radius: 50px;
color: #fff; color: #fff;
} }
.i-title { .i-title {
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
margin-bottom: 15px; margin-bottom: 15px;
} }
.k-box { .k-box {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 15px 10px; padding: 15px 10px;
} }
.acvit { .acvit {
background: #FF9655 !important; background: #FF9655 !important;
color: #fff !important; color: #fff !important;
} }
.r-title { .r-title {
border-left: 1px solid #eee; border-left: 1px solid #eee;
width: 60px; width: 60px;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
} }
._tbox { ._tbox {
border-radius: 10px; border-radius: 10px;
background: #fff; background: #fff;
width: 100%; width: 100%;
} }
._btop { ._btop {
box-sizing: border-box; box-sizing: border-box;
padding: 15px; padding: 15px;
border-bottom: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE;
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
} }
.input_sou { .input_sou {
width: 95%; width: 95%;
border: 1px solid #EEEEEE; border: 1px solid #EEEEEE;
border-radius: 50px; border-radius: 50px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
padding: 5px 10px; padding: 5px 10px;
margin: 15px auto; margin: 15px auto;
} }
.h_box { .h_box {
border-bottom: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE;
box-sizing: border-box; box-sizing: border-box;
padding: 5px 15px; padding: 5px 15px;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
</style> </style>