APP
/
ox_zhiNengZhuShou
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add order modal

account
刘嘉炜 3 years ago
parent
8cd8f2b32a
commit
640e424106
4 changed files with 228 additions and 56 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/subpackage/order/js/api.js
  2. 194
      src/subpackage/order/pages/value_card/detail/detail.vue
  3. 86
      src/subpackage/order/pages/value_card/xpense_tracker/xpense_tracker.vue
  4. BIN
      src/subpackage/order/static/images/value_card/close.png

4
src/subpackage/order/js/api.js
View File

@ -4,7 +4,9 @@ export const ORDER_API = {
venueCourse_orderInfo:`${ORIGIN}/admin/venueCourse/orderInfo`, // 课程订单 - 详情
userValueCardInfo:`${ORIGIN}/admin/userValueCard/get`, // 用户储值卡详情_copy
userValueCardConsumes:`${ORIGIN}/admin/userValueCard/consumes`, // 用户储值卡消费记录_copy
consumeTypeList:`${ORIGIN}/valueCard/consumeType/list`, // 用户储值卡消费场景列表
userValueCardDeduct:`${ORIGIN}/admin/userValueCard/deduct`, // 用户储值卡-扣费_copy
userValueCardRecharge:`${ORIGIN}/admin/userValueCard/recharge`, // 用户储值卡-充值_copy
}
export default ORDER_API;

194
src/subpackage/order/pages/value_card/detail/detail.vue
View File

@ -7,13 +7,13 @@
<view class="vh-info">
<view class="vi-line">储值卡卡号：{{ orderInfo.card_no || '-' }}</view>
<view class="vi-line">手机号码：{{ orderInfo.mobile || '-' }}</view>
<view class="vi-line">储值卡余额：{{ orderInfo.balance || '0' }}</view>
<view class="vi-line">储值卡余额：￥{{ orderInfo.balance || '0' }}</view>
</view>
<view class="vh-btns">
<view @click="toRecord">消费记录</view>
<block v-if="orderInfo.status == 1">
<view class="red">扣费</view>
<view class="orange">充值</view>
<view class="red" @click="isDeductModal = true">扣费</view>
<view class="orange" @click="isRechargeModal = true">充值</view>
</block>
</view>
<image class="vh-tag"></image>
@ -79,15 +79,15 @@
</a-line> -->
</view>
<view class="vc-mask" v-if="false">
<view class="vc-recharge">
<image class="vr-close"></image>
<view class="vc-mask" v-if="isRechargeModal" @click="isRechargeModal = false">
<view class="vc-recharge" @click.stop="_=>false">
<image class="vr-close" @click="isRechargeModal = false"></image>
<view class="vr-tit">充值</view>
<view class="vr-info">
<view><text>储值卡号：</text>20195171564566</view>
<view><text>手机号码：</text>18316553478</view>
<view><text>余额：</text>￥75.25</view>
<view><text>储值卡号：</text>{{ orderInfo.card_no || '-' }}</view>
<view><text>手机号码：</text>{{ orderInfo.mobile || '-' }}</view>
<view><text>余额：</text>￥{{ orderInfo.balance || '0' }}</view>
</view>
<view class="vr-edit">
@ -95,11 +95,11 @@
<view class="vl-name"><text>*</text>充值金额</view>
<view class="vl-ipt">
<view class="vi-box">
<view class="vb-btn"></view>
<view class="vb-btn" @click="rechargeInfo.amount--"></view>
<view class="vb-ipt">
<input />
<input type="number" v-model="rechargeInfo.amount" />
</view>
<view class="vb-btn"></view>
<view class="vb-btn" @click="rechargeInfo.amount++"></view>
</view>
<view class="vi-unit">元</view>
</view>
@ -108,11 +108,11 @@
<view class="vl-name"><text>*</text>充值赠送金额</view>
<view class="vl-ipt">
<view class="vi-box">
<view class="vb-btn"></view>
<view class="vb-btn" @click="rechargeInfo.giveAmount--"></view>
<view class="vb-ipt">
<input />
<input type="number" v-model="rechargeInfo.giveAmount" />
</view>
<view class="vb-btn"></view>
<view class="vb-btn" @click="rechargeInfo.giveAmount++"></view>
</view>
<view class="vi-unit">元</view>
</view>
@ -121,11 +121,11 @@
<view class="vl-name"><text>*</text>赠送有效期</view>
<view class="vl-ipt">
<view class="vi-box">
<view class="vb-btn"></view>
<view class="vb-btn" @click="rechargeInfo.giveDate--"></view>
<view class="vb-ipt">
<input />
<input type="number" v-model="rechargeInfo.giveDate" />
</view>
<view class="vb-btn"></view>
<view class="vb-btn" @click="rechargeInfo.giveDate++"></view>
</view>
<view class="vi-unit">天</view>
</view>
@ -134,11 +134,11 @@
<view class="vl-name"><text>*</text>延长有效期</view>
<view class="vl-ipt">
<view class="vi-box">
<view class="vb-btn"></view>
<view class="vb-btn" @click="rechargeInfo.extendDate--"></view>
<view class="vb-ipt">
<input />
<input type="number" v-model="rechargeInfo.extendDate" />
</view>
<view class="vb-btn"></view>
<view class="vb-btn" @click="rechargeInfo.extendDate++"></view>
</view>
<view class="vi-unit">天</view>
</view>
@ -146,34 +146,39 @@
</view>
<view class="vr-btns">
<view class="white">取消</view>
<view>确认</view>
<view class="white" @click="isRechargeModal = false">取消</view>
<view @click="rechargeConfirm">确认</view>
</view>
</view>
</view>
<view class="vc-mask" v-if="false">
<view class="vc-recharge vc-deductions">
<image class="vr-close"></image>
<view class="vc-mask" v-if="isDeductModal" @click="isDeductModal = false">
<view class="vc-recharge vc-deductions" @click.stop="_=>false" >
<image
class="vr-close"
mode="apsectFit"
@click="isDeductModal = false"
src="/subpackage/order/static/images/value_card/close.png"
></image>
<view class="vr-tit">扣费</view>
<view class="vr-info">
<view><text>储值卡号：</text>20195171564566</view>
<view><text>手机号码：</text>18316553478</view>
<view><text>余额：</text>￥75.25</view>
<view><text>储值卡号：</text>{{ orderInfo.card_no || '-' }}</view>
<view><text>手机号码：</text>{{ orderInfo.mobile || '-' }}</view>
<view><text>余额：</text>￥{{ orderInfo.balance || '0' }}</view>
</view>
<view class="vr-edit">
<view class="ve-line">
<view class="vl-name"><text>*</text>充值金额</view>
<view class="vl-name"><text>*</text>消费金额</view>
<view class="vl-ipt">
<view class="vi-box">
<view class="vb-btn"></view>
<view class="vb-btn" @click="deductAmount--"></view>
<view class="vb-ipt">
<input />
<input v-model="deductAmount" type="number" />
</view>
<view class="vb-btn"></view>
<view class="vb-btn" @click="deductAmount++"></view>
</view>
<view class="vi-unit">元</view>
</view>
@ -183,22 +188,20 @@
</view>
<view class="vd-ipt">
<picker>
<picker mode="selector" :range="consumeTypeList" range-key="consume_type_name" @change="consumeTypePickerChange">
<view class="vi-box">
<input />
<image></image>
<input placeholder="请选择消费场景" disabled :value="curConsumeType.consume_type_name" />
<image mode="aspectFit" src="/subpackage/order/static/images/value_card/arrow.png"></image>
</view>
</picker>
<view class="vi-box vi-remark">
<input />
<input placeholder="备注(选填)" v-model="deductRemark" />
</view>
</view>
</view>
<view class="vr-btns">
<view>确认</view>
<view @click="deductConfirmBtn">确认</view>
</view>
</view>
@ -233,15 +236,111 @@ export default {
},
data(){
return{
isDeductModal: false, // 扣费
deductAmount: 1, // 扣费金额
deductRemark: '', // 扣费备注
consumeTypeList: [], // 扣费类型
curConsumeType: {}, // 扣费选中类型
isRechargeModal: false,
rechargeInfo: {
amount: 0,
giveAmount: 0,
giveDate: 0,
extendDate: 0
},
orderInfo: {
records: []
}
},
}
},
onLoad(options){
this.getInfo(options.card_no);
this.getConsumeTypeList();
},
methods: {
rechargeConfirm: util.debounce(function(){
let { rechargeInfo, orderInfo } = this;
if(rechargeInfo.amount< 0)return util.showNone('充值金额有误！');
if(rechargeInfo.giveAmount< 0)return util.showNone('充值赠送金额有误！');
if(rechargeInfo.giveDate< 0)return util.showNone('赠送有效期有误！');
if(rechargeInfo.extendDate< 0)return util.showNone('延长有效期有误！');
util.showLoad();
server.post({
url: ORDER_API.userValueCardRecharge,
data: {
card_no: orderInfo.card_no,
amount: rechargeInfo.amount,
day: rechargeInfo.extendDate,
gift_amount: rechargeInfo.giveAmount,
gift_day: rechargeInfo.giveDate,
},
isDefaultGet: false,
})
.then(res => {
util.hideLoad();
if(res.data.code == 0){
this.refreshThis();
util.showNone(res.data.message || '操作成功！');
}else{
util.showNone(res.data.message || '操作失败！');
}
})
.catch(util.hideLoad)
}, 300, true),
refreshThis(){
this.isDeductModal = false;
this.deductAmount = 1;
this.deductRemark = '';
this.curConsumeType = {};
this.isRechargeModal = false;
this.rechargeInfo['amount'] = 0;
this.rechargeInfo['giveAmount'] = 0;
this.rechargeInfo['giveDate'] = 0;
this.rechargeInfo['extendDate'] = 0;
let { orderInfo } = this;
this.getInfo(orderInfo.card_no);
},
consumeTypePickerChange(e){
let { consumeTypeList } = this;
this.curConsumeType = consumeTypeList[e.detail.value];
},
deductConfirmBtn: util.debounce(function(){
let { deductAmount, deductRemark, curConsumeType, orderInfo } = this;
if(deductAmount<0)return util.showNone('扣除价格有误！');
util.showLoad();
server.post({
url: ORDER_API.userValueCardDeduct,
data: {
consume_type: curConsumeType.consume_type,
desc: deductRemark,
card_no: orderInfo.card_no,
amount: deductAmount,
},
isDefaultGet: false,
})
.then(res => {
util.hideLoad();
if(res.data.code == 0){
this.refreshThis();
util.showNone(res.data.message || '操作成功！');
}else{
util.showNone(res.data.message || '操作失败！');
}
})
.catch(util.hideLoad)
}, 300, true),
toRecord(){
let { orderInfo } = this;
util.routeTo(`/subpackage/order/pages/value_card/xpense_tracker/xpense_tracker?card_no=${orderInfo.card_no}`, 'nT');
@ -263,6 +362,16 @@ export default {
2: '充值',
}
return _obj[order_way] || '-'
},
getConsumeTypeList(){
server.get({
url: ORDER_API.consumeTypeList,
data: {},
failMsg: '加载失败！'
})
.then(res=>{
this.consumeTypeList = res || {};
})
}
}
}
@ -382,7 +491,6 @@ export default {
top: 30upx;
width: 34upx;
height: 34upx;
background-color: skyblue;
}
.vr-tit{
margin-bottom: 34upx;
@ -528,7 +636,7 @@ export default {
width: 32upx;
height: 32upx;
margin-left: 20upx;
background-color: skyblue;
transform: rotateZ(90deg);
}
}
.vi-remark{

86
src/subpackage/order/pages/value_card/xpense_tracker/xpense_tracker.vue
View File

@ -2,9 +2,9 @@
<view class="xpense-tracker">
<view class="xt-header">
<view>日期</view>
<picker mode="date">
<picker mode="multiSelector" :range="dateList" range-key='str' :value="curDateKey" @change="datePickerChange">
<view class="xh-picker">
<input />
<input placeholder="全部" disabled :value="showDateStr" />
<view></view>
</view>
</picker>
@ -16,7 +16,8 @@
<view class="xh-addr">
<image class="xa-logo" mode="aspectFit" :src="e.brand_or_stadium.logo"></image>
<view>{{ e.brand_or_stadium.name || '-' }}</view>
<image class="xa-icon" mode="aspectFit" src="/subpackage/order/static/images/value_card/arrow.png"></image>
<!-- pm: 不做跳转 直接删掉箭头 -->
<!-- <image class="xa-icon" mode="aspectFit" src="/subpackage/order/static/images/value_card/arrow.png"></image> -->
</view>
<view class="xh-time">{{ e.created_at || '-' }} </view>
</view>
@ -44,39 +45,100 @@ import util from '../../../../../utils/util';
import { ORDER_API } from '../../../js/api';
import server from '../../../js/server';
export default {
computed: {
dateList(){
let _arr = [];
let _startYear = 1970;
let _yearLength = 131;
_arr[0] = new Array(_yearLength).fill(1).map((e, i)=> ({ num: _startYear + i, str: `${ _startYear + i }年` }));
_arr[1] = new Array(12).fill(1).map((e, i)=> ({ num: i+1, str: `${util.formatNumber(i+1)}月` }))
return _arr;
},
// 首次加载定位当前月份
curDateKey(){
let { dateList } =this;
let _curYear = new Date().getFullYear();
let _curMonth = new Date().getMonth() + 1;
return [dateList[0].findIndex(e=> e.num == _curYear), dateList[1].findIndex(e=> e.num == _curMonth)]
},
// 选中展示日期
showDateStr(){
let { dateValue, dateList } = this;
if(!dateValue || !dateValue.length)return '';
return `${dateList[0][dateValue[0]].str}-${dateList[1][dateValue[1]].str}`
},
// 请求日期格式
reqDateStr(){
let { dateValue, dateList } = this;
if(!dateValue || !dateValue.length)return '';
return `${dateList[0][dateValue[0]].num}-${util.formatNumber(dateList[1][dateValue[1]].num)}`
}
},
data(){
return {
recordList: [],
card_no: ''
card_no: '',
dateValue: [],
consume: '',
page: 1
}
},
onReachBottom(){
let { consume, card_no, reqDateStr, page } = this;
this.getList({
card_no: card_no,
consume: consume,
date: reqDateStr,
page: ++page,
})
},
onLoad(options){
let _card_no = options.card_no || '';
this.card_no = _card_no;
this.getList({ card_no: _card_no })
this.getList({ card_no: _card_no });
},
methods: {
getList({ card_no, consume_type = '', date = '' }){
refreshList(){
let { consume, card_no, reqDateStr } = this;
this.page = 1;
this.recordList = [];
this.getList({
card_no: card_no,
consume: consume,
date: reqDateStr,
})
},
datePickerChange(e){
this.dateValue = e.detail.value;
this.$nextTick(this.refreshList);
},
getList({ card_no, consume = '', date = '', page = 1, page_size = 20 }){
util.showLoad();
server.get({
url: ORDER_API.userValueCardConsumes,
data: { card_no, consume_type, date },
data: { card_no, consume, month: date, page, page_size },
failMsg: '加载失败！'
})
.then(res=>{
util.hideLoad();
let _list = res.consumes || [];
this.recordList = _list;
if(page == 1)return this.recordList = _list;
if(!_list.length)return util.showNone('没有更多！');
this.page = page;
this.recordList = [ ...this.recordList, ..._list ];
})
},
filtrateBtn(){
uni.showActionSheet({
itemList: ['支出', '收入'],
success: aRes=>{
let _type = aRes.tapIndex + 1;
let { card_no } = this;
this.getList({ card_no, consume_type: _type })
console.warn(aRes)
let _type = aRes.tapIndex == 0 ? 'outcome' : aRes.tapIndex == 1 ? 'income' : '';
this.consume = _type;
this.$nextTick(this.refreshList);
// let { card_no } = this;
// this.getList({ card_no, consume_type: _type });
// console.warn(aRes)
}
})
}

BIN
src/subpackage/order/static/images/value_card/close.png
View File

Side by Side

After

Width: 34  |  Height: 34  |  Size: 233 B

Write Preview
Loading…
Cancel
Save