291 lines
8.8 KiB
Vue
291 lines
8.8 KiB
Vue
<template>
|
|
<base-page>
|
|
<view class="goodslist">
|
|
<view class="goodslist-box">
|
|
<view class="goodslist-left">
|
|
<view class="goods-title">
|
|
充值订单
|
|
<text class="iconfont icongengduo1"></text>
|
|
<!-- <view class="screen">
|
|
筛选
|
|
<text class="iconfont iconxiala"></text>
|
|
</view> -->
|
|
</view>
|
|
|
|
<view class="goods-search">
|
|
<view class="search">
|
|
<text class="iconfont icon31sousuo"></text>
|
|
<input type="text" v-model="search_text" @input="search" placeholder="搜索订单号/流水号/买家" />
|
|
</view>
|
|
</view>
|
|
<block v-if="!one_judge && order_list.length > 0">
|
|
<scroll-view scroll-y="true" class="goods-list-scroll" :show-scrollbar="false" @scrolltolower="getOrderList">
|
|
<view
|
|
class="item"
|
|
@click="getOrderDetail(item.order_id, index)"
|
|
v-for="(item, index) in order_list"
|
|
:key="index"
|
|
:class="index == selectGoodsKeys ? 'itemhover' : ''"
|
|
>
|
|
<view class="title">
|
|
<view>订单编号：{{ item.order_no }}</view>
|
|
<view>充值订单</view>
|
|
</view>
|
|
<view class="total-money-num">
|
|
<view class="member-info">
|
|
<view>买家：</view>
|
|
<view v-if="item.member_id">{{ item.nickname }}</view>
|
|
<view v-else>散客</view>
|
|
</view>
|
|
<view class="box">
|
|
<view>充值金额</view>
|
|
<view>￥{{ item.face_value }}</view>
|
|
</view>
|
|
<view class="box">
|
|
<view>实付金额</view>
|
|
<view>￥{{ item.price }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</block>
|
|
<view class="notYet" v-else-if="!one_judge && order_list.length == 0">暂无数据</view>
|
|
</view>
|
|
<view class="goodslist-right">
|
|
<view class="goods-title">订单详情</view>
|
|
<view class="order-information" v-show="!one_judge">
|
|
<block v-if="JSON.stringify(order_detail) != '{}'">
|
|
<view class="order-status">充值订单</view>
|
|
<view class="order-types">
|
|
<view class="type type1">
|
|
<view>订单编号：</view>
|
|
<view>{{ order_detail.order_no }}</view>
|
|
</view>
|
|
<view class="type type1">
|
|
<view>订单流水号：</view>
|
|
<view>{{ order_detail.out_trade_no }}</view>
|
|
</view>
|
|
|
|
<view class="type type1">
|
|
<view>买家：</view>
|
|
<view v-if="order_detail.member_id">
|
|
{{ order_detail.nickname }}
|
|
<text class="look" @click="$util.redirectTo('/pages/member/list', { member_id: order_detail.member_id })">查看</text>
|
|
</view>
|
|
<view v-else>散客</view>
|
|
</view>
|
|
<view class="type type1">
|
|
<view>实付金额：</view>
|
|
<view>{{ order_detail.price }}</view>
|
|
</view>
|
|
<view class="type type1">
|
|
<view>实付方式：</view>
|
|
<view>{{ order_detail.pay_type_name }}</view>
|
|
</view>
|
|
<view class="type type1">
|
|
<view>状态：</view>
|
|
<view>{{ order_detail.status == 2 ? '已支付' : '未支付' }}</view>
|
|
</view>
|
|
<view class="type type1">
|
|
<view>支付时间：</view>
|
|
<view>{{ order_detail.pay_time > 0 ? $util.timeFormat(order_detail.pay_time) : '' }}</view>
|
|
</view>
|
|
<view class="type type1">
|
|
<view>订单来源：</view>
|
|
<view>{{ order_detail.order_from_name }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="other-information">
|
|
<view class="title">其他信息</view>
|
|
<view class="item-box">
|
|
<view class="item">
|
|
<view>套餐名称：</view>
|
|
<view>{{ order_detail.recharge_name }}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view>充值面值：</view>
|
|
<view>{{ order_detail.face_value }}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view>售价：</view>
|
|
<view>{{ order_detail.buy_price }}</view>
|
|
</view>
|
|
<view class="item" v-if="order_detail.point > 0">
|
|
<view>赠送积分：</view>
|
|
<view>{{ order_detail.point }}</view>
|
|
</view>
|
|
<view class="item" v-if="order_detail.growth > 0">
|
|
<view>赠送成长值：</view>
|
|
<view>{{ order_detail.growth }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="goods-info" v-if="order_detail.coupon_list['data'].length > 0">
|
|
<view class="title">赠送优惠券</view>
|
|
<view class="table">
|
|
<view class="table-th table-all">
|
|
<view class="table-td" style="width:25%">优惠券名称</view>
|
|
<view class="table-td" style="width:15%">类型</view>
|
|
<view class="table-td" style="width:35%">优惠金额</view>
|
|
<view class="table-td" style="width:25%;justify-content: flex-end;">有效期</view>
|
|
</view>
|
|
<block v-for="(item, index) in order_detail.coupon_list['data']" :key="index">
|
|
<view class="table-tr table-all">
|
|
<view class="table-td" style="width:25%">{{ item.coupon_name }}</view>
|
|
<view class="table-td" style="width:15%">{{ item.type == 'reward' ? '满减券' : '折扣券' }}</view>
|
|
|
|
<view class="table-td" style="width:40%" v-if="item.type == 'reward'">满{{ item.at_least }}元减{{ item.money }}</view>
|
|
<view class="table-td" style="width:35%" v-if="item.type == 'discount'">
|
|
满{{ item.at_least }}元打{{ item.discount }}折
|
|
<block v-if="item.discount_limit">（最多抵扣{{ item.discount_limit }}元）</block>
|
|
</view>
|
|
|
|
<view class="table-td uni-column" style="width:25%;text-align: right;align-items: flex-end;">
|
|
<view v-if="item.end_time">{{ $util.timeFormat(item.end_time) }}</view>
|
|
<view v-else>长期有效</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<block v-else><image class="cart-empty" :src="$util.img('public/uniapp/cashier/cart_empty.png')" mode="widthFix"></image></block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</base-page>
|
|
</template>
|
|
|
|
<script>
|
|
import nsjournal from '@/components/ns-journal/ns-journal.vue';
|
|
import unipopup from '@/components/uni-popup/uni-popup.vue';
|
|
import nsremark from '@/components/ns-remark/ns-remark.vue';
|
|
import nsjustmoney from '@/components/ns-justmoney/ns-justmoney.vue';
|
|
export default {
|
|
components: {
|
|
nsjournal,
|
|
nsremark,
|
|
unipopup,
|
|
nsjustmoney
|
|
},
|
|
data() {
|
|
return {
|
|
selectGoodsKeys: 0,
|
|
|
|
// 订购日志所需列表数据
|
|
list: [],
|
|
//获取订单的页数
|
|
page: 1,
|
|
//每次获取订单的条数
|
|
page_size: 8,
|
|
// 订单搜索是用到的数据
|
|
search_text: '',
|
|
//订单类型
|
|
trade_type: '',
|
|
//初始时加载详情数据判断
|
|
one_judge: true,
|
|
// 订单列表数据
|
|
order_list: [],
|
|
//订单详情数据
|
|
order_detail: {}
|
|
};
|
|
},
|
|
onLoad(option) {
|
|
this.order_type = option.order_type || '';
|
|
/**
|
|
* 获取订单列表数据
|
|
*/
|
|
this.getOrderList();
|
|
},
|
|
watch: {},
|
|
methods: {
|
|
// 搜索
|
|
search() {
|
|
this.page = 1;
|
|
this.order_list = [];
|
|
this.one_judge = true;
|
|
this.getOrderList();
|
|
},
|
|
/**
|
|
* 获取订单列表
|
|
*/
|
|
getOrderList() {
|
|
this.$api.sendRequest({
|
|
url: '/cashier/storeapi/recharge/orderpage',
|
|
data: {
|
|
page: this.page,
|
|
page_size: this.page_size,
|
|
search_text: this.search_text
|
|
},
|
|
success: res => {
|
|
if (res.data.list.length == 0 && this.one_judge) {
|
|
this.order_detail = {};
|
|
this.one_judge = false;
|
|
}
|
|
if (res.code >= 0 && res.data.list.length != 0) {
|
|
this.page += 1;
|
|
|
|
if (this.order_list.length == 0) {
|
|
this.order_list = res.data.list;
|
|
} else {
|
|
this.order_list = this.order_list.concat(res.data.list);
|
|
}
|
|
|
|
//初始时加载一遍详情数据
|
|
if (this.one_judge) {
|
|
this.getOrderDetail(this.order_list[0].order_id);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 获取订单详情数据
|
|
*/
|
|
getOrderDetail(order_id, keys = 0, callback) {
|
|
this.selectGoodsKeys = keys;
|
|
this.type = 'detail';
|
|
this.$api.sendRequest({
|
|
url: '/cashier/storeapi/recharge/orderdetail',
|
|
data: {
|
|
order_id
|
|
},
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
this.order_detail = res.data;
|
|
if (typeof callback == 'function') {
|
|
callback();
|
|
}
|
|
this.$forceUpdate();
|
|
this.one_judge = false;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* @param {Object} 订单功能 弹窗开启
|
|
*/
|
|
open(remark) {
|
|
this.$refs[remark].open();
|
|
},
|
|
/**
|
|
* @param {Object} 订单曹组弹窗关闭
|
|
*/
|
|
close(name) {
|
|
this.$refs[name].close();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import './public/css/orderlist.scss';
|
|
.goodslist .goodslist-box .goodslist-right .order-information .goods-info {
|
|
padding: 0.2rem 0;
|
|
}
|
|
</style>
|