初始上传
This commit is contained in:
182
addon/cashier/source/os/pages/refund/list.vue
Executable file
182
addon/cashier/source/os/pages/refund/list.vue
Executable file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<base-page>
|
||||
<view class="goodslist">
|
||||
<view class="goodslist-box">
|
||||
<view class="goodslist-left">
|
||||
<view class="goods-title">
|
||||
退款记录
|
||||
<text class="iconfont icongengduo1"></text>
|
||||
</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="refund_list.length > 0">
|
||||
<scroll-view scroll-y="true" class="goods-list-scroll" :show-scrollbar="false" @scrolltolower="getRefundList">
|
||||
<view class="item" @click="getRefundDetail(item.refund_id, index)" v-for="(item, index) in refund_list" :key="index" :class="index == refundIndex ? 'itemhover' : ''">
|
||||
<view class="title">
|
||||
<view>退款编号：{{ item.refund_no }}</view>
|
||||
<view>{{ item.refund_status_name }}</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.refund_money }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</block>
|
||||
<view class="notYet" v-else-if="refund_list.length == 0">暂无数据</view>
|
||||
</view>
|
||||
<view class="goodslist-right">
|
||||
<view class="goods-title">退款详情</view>
|
||||
<block v-if="refund_detail">
|
||||
<view class="order-information">
|
||||
<view class="order-status">{{ refund_detail.refund_status_name }}</view>
|
||||
<view class="goods-info">
|
||||
<block v-for="(item, index) in refund_detail.item_list" :key="index">
|
||||
<view class="goods-item">
|
||||
<view class="image">
|
||||
<image :src="$util.img(item.img, { size: 'small' })" mode="widthFix" />
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="content-text">{{ item.name }}</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="price">
|
||||
<text class="title">退款金额：</text>
|
||||
￥{{ item.refund_pay_money }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="goods-info refund-info">
|
||||
<view class="info-item">
|
||||
<view class="title">退款类型</view>
|
||||
<view class="content">{{ refund_detail.refund_trade_type_name }}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="title">退款编号</view>
|
||||
<view class="content">{{ refund_detail.refund_no }}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="title">退款时间</view>
|
||||
<view class="content">{{ refund_detail.create_time | timeFormat }}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="title">退款方式</view>
|
||||
<view class="content">{{ refund_detail.refund_transfer_type_name }}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="title">退款说明</view>
|
||||
<view class="content">{{ refund_detail.refund_goods_remark }}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="title">退款金额</view>
|
||||
<view class="content">￥{{ refund_detail.refund_pay_money }}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="title">退还积分</view>
|
||||
<view class="content">{{ refund_detail.refund_point }}积分</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="title">退还余额</view>
|
||||
<view class="content">￥{{ (parseFloat(refund_detail.refund_balance_money) + parseFloat(refund_detail.refund_balance)) | moneyFormat }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<image class="cart-empty" src="@/static/cashier/cart_empty.png" mode="widthFix" />
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</base-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getOrderRefundLists, getOrderRefundDetail } from '@/api/order_refund.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
refundIndex: 0,
|
||||
// 订购日志所需列表数据
|
||||
list: [],
|
||||
//获取订单的页数
|
||||
page: 1,
|
||||
//每次获取订单的条数
|
||||
page_size: 8,
|
||||
// 订单搜索是用到的数据
|
||||
search_text: '',
|
||||
// 订单列表数据
|
||||
refund_list: [],
|
||||
//订单详情数据
|
||||
refund_detail: null
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
this.getRefundList();
|
||||
},
|
||||
methods: {
|
||||
// 搜索
|
||||
search() {
|
||||
this.page = 1;
|
||||
this.refund_list = [];
|
||||
this.getRefundList();
|
||||
},
|
||||
/**
|
||||
* 获取订单列表
|
||||
*/
|
||||
getRefundList() {
|
||||
getOrderRefundLists({
|
||||
page: this.page,
|
||||
page_size: this.page_size,
|
||||
search_text: this.search_text
|
||||
}).then(res=>{
|
||||
if (res.data.list.length == 0) {
|
||||
this.refund_detail = null;
|
||||
}
|
||||
if (res.code >= 0 && res.data.list.length != 0) {
|
||||
if (this.refund_list.length == 0) {
|
||||
this.refund_list = res.data.list;
|
||||
} else {
|
||||
this.refund_list = this.refund_list.concat(res.data.list);
|
||||
}
|
||||
//初始时加载一遍详情数据
|
||||
if (this.page == 1) {
|
||||
this.getRefundDetail(this.refund_list[0].refund_id);
|
||||
}
|
||||
this.page += 1;
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取订单详情数据
|
||||
*/
|
||||
getRefundDetail(refund_id, index = 0) {
|
||||
this.refundIndex = index;
|
||||
getOrderRefundDetail({refund_id}).then(res=>{
|
||||
if (res.code >= 0) {
|
||||
this.refund_detail = res.data;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './public/css/list.scss';
|
||||
</style>
|
||||
303
addon/cashier/source/os/pages/refund/public/css/list.scss
Executable file
303
addon/cashier/source/os/pages/refund/public/css/list.scss
Executable file
@@ -0,0 +1,303 @@
|
||||
.goodslist {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
|
||||
.goodslist-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
|
||||
.goodslist-left {
|
||||
width: 5rem;
|
||||
height: 100%;
|
||||
border-right: 0.01rem solid #e6e6e6;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.notYet {
|
||||
color: #e6e6e6;
|
||||
font-size: 0.4rem;
|
||||
margin-top: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.goods-title {
|
||||
text-align: center;
|
||||
line-height: 0.6rem;
|
||||
font-size: 0.18rem;
|
||||
font-weight: 500;
|
||||
height: 0.6rem;
|
||||
border-bottom: 0.01rem solid #e6e6e6;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.icongengduo1 {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0.2rem;
|
||||
transform: translateY(-50%);
|
||||
font-size: 0.3rem;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-search {
|
||||
width: 100%;
|
||||
height: 0.6rem;
|
||||
border-bottom: 0.01rem solid #e6e6e6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 0.2rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.search {
|
||||
width: 5.6rem;
|
||||
height: 0.4rem;
|
||||
border-radius: 0.04rem;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0.2rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.iconfont {
|
||||
font-size: 0.16rem;
|
||||
color: #909399;
|
||||
margin-right: 0.11rem;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 80%;
|
||||
height: 60%;
|
||||
border: none;
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-list-scroll {
|
||||
width: 100%;
|
||||
height: calc(100% - 1.2rem);
|
||||
|
||||
.itemhover {
|
||||
background: var(--primary-color-light-9);
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 0.2rem;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.2rem;
|
||||
|
||||
view {
|
||||
font-size: 0.16rem;
|
||||
}
|
||||
|
||||
view:nth-child(2) {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goodslist-right {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
border-right: 0.01rem solid #e6e6e6;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
padding-bottom: 0.8rem;
|
||||
overflow: hidden;
|
||||
|
||||
.goods-title {
|
||||
text-align: center;
|
||||
line-height: 0.6rem;
|
||||
font-size: 0.18rem;
|
||||
font-weight: 500;
|
||||
height: 0.6rem;
|
||||
border-bottom: 0.01rem solid #e6e6e6;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cart-empty {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 2.1rem;
|
||||
}
|
||||
|
||||
.order-information {
|
||||
width: 100%;
|
||||
height: calc(100% - 0.6rem);
|
||||
background: #f8f8f8;
|
||||
padding: 0.2rem;
|
||||
box-sizing: border-box;
|
||||
overflow: scroll;
|
||||
// position: relative;
|
||||
|
||||
.order-status {
|
||||
font-size: 0.24rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.24rem;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
background: #ffffff;
|
||||
padding: 0.2rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.goods-item {
|
||||
padding: 0.15rem 0;
|
||||
border-bottom: 0.01rem solid #e6e6e6;
|
||||
display: flex;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 0.2rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.iconyuan_checked {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 0.15rem;
|
||||
|
||||
image {
|
||||
width: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
margin-right: 0.15rem;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
font-weight: bolder;
|
||||
|
||||
.title {
|
||||
font-weight: normal;
|
||||
font-size: .12rem;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.refund-info {
|
||||
margin-top: .15rem;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
line-height: .3rem;
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
margin-left: .1rem;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.total-money-num {
|
||||
.member-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
float: left;
|
||||
-ms-flex-negative: 0;
|
||||
-webkit-flex-shrink: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
float: right;
|
||||
|
||||
view {
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
|
||||
view:nth-child(1) {
|
||||
// transform: translateY(-.01rem);
|
||||
}
|
||||
|
||||
view:nth-child(2) {
|
||||
color: #fe2278;
|
||||
font-size: 0.18rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.total-money-num:after {
|
||||
overflow: hidden;
|
||||
content: '';
|
||||
height: 0;
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
view {
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
/deep/ .uni-scroll-view::-webkit-scrollbar {
|
||||
width: 0.05rem;
|
||||
height: 0.3rem;
|
||||
}
|
||||
|
||||
/deep/ .uni-scroll-view::-webkit-scrollbar-thumb {
|
||||
border-radius: 0.1rem;
|
||||
box-shadow: inset 0 0 0.05rem rgba(0, 0, 0, 0.2);
|
||||
background: rgba(193, 193, 193, 1);
|
||||
}
|
||||
|
||||
.order-information::-webkit-scrollbar {
|
||||
width: 0.05rem;
|
||||
height: 0.3rem;
|
||||
}
|
||||
|
||||
.order-information::-webkit-scrollbar-thumb {
|
||||
border-radius: 0.1rem;
|
||||
box-shadow: inset 0 0 0.05rem rgba(0, 0, 0, 0.2);
|
||||
background: rgba(193, 193, 193, 1);
|
||||
}
|
||||
Reference in New Issue
Block a user