退款退货流程页面
This commit is contained in:
@@ -1,188 +1,328 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- tabs -->
|
||||
<u-sticky>
|
||||
<u-tabs
|
||||
class="tabs"
|
||||
:list="tabs"
|
||||
:scrollable="false"
|
||||
:current="index"
|
||||
lineColor="#34CE98"
|
||||
@click="onTabs"
|
||||
sticky
|
||||
></u-tabs>
|
||||
</u-sticky>
|
||||
<block v-if="array.length >= 1">
|
||||
<!-- 订单列表 -->
|
||||
<oct-order
|
||||
v-for="(item, arrayIndex) in array"
|
||||
:key="arrayIndex"
|
||||
:order-info="item"
|
||||
@onBtn="onType"
|
||||
></oct-order>
|
||||
<!-- 加载更多 -->
|
||||
<view class="pages-load">
|
||||
<u-loadmore :status="status" />
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="vertical order-null">
|
||||
<u-empty
|
||||
mode="order"
|
||||
icon="http://cdn.uviewui.com/uview/empty/order.png"
|
||||
text="暂无相关订单"
|
||||
textColor="#999"
|
||||
></u-empty>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { orders, del, cancel, sign } from '@/apis/interfaces/order'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
status: "loading",
|
||||
tabs: [
|
||||
{name: "全部", type: ""},
|
||||
{name: "待付款", type: "unpay"},
|
||||
{name: "待发货", type: "paid"},
|
||||
{name: "待签收", type: "delivered"},
|
||||
{name: "已完成", type: "completed"},
|
||||
],
|
||||
index: 0,
|
||||
array: [],
|
||||
page : 1
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
if(this.$store.getters.getRefresh == 1) {
|
||||
this.$store.commit('setRefresh', 0)
|
||||
this.array = []
|
||||
this.page = 1
|
||||
this.getOrder()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.index = this.$Route.query.index
|
||||
this.getOrder()
|
||||
},
|
||||
methods:{
|
||||
getOrder(){
|
||||
orders({
|
||||
state: this.tabs[this.index].type,
|
||||
page : this.page
|
||||
}).then(res => {
|
||||
if(res.page.current === 1){
|
||||
this.array = []
|
||||
}
|
||||
let ordersArr = res.data.map(val => {
|
||||
return {
|
||||
no : val.order_no,
|
||||
cover : val.items[0].sku.cover,
|
||||
name : val.items[0].sku.goods_name,
|
||||
price : val.total,
|
||||
sum : val.items[0].qty,
|
||||
stateText : val.state,
|
||||
cans : val.can
|
||||
}
|
||||
})
|
||||
this.array = this.array.concat(ordersArr)
|
||||
this.status = res.page.has_more ? 'loadmore' : 'nomore'
|
||||
})
|
||||
},
|
||||
onTabs(e){
|
||||
this.page = 1
|
||||
this.index = e.index
|
||||
this.getOrder()
|
||||
},
|
||||
onType(e){
|
||||
let orderNo = e.order.no
|
||||
let onFount
|
||||
|
||||
switch (e.type){
|
||||
case 'delete':
|
||||
onFount = del(orderNo)
|
||||
break;
|
||||
case 'cancel':
|
||||
onFount = cancel(orderNo)
|
||||
break;
|
||||
case 'logistic':
|
||||
this.$Router.push({
|
||||
name: 'OrderLogistics',
|
||||
params: {
|
||||
orderNo
|
||||
},
|
||||
})
|
||||
break;
|
||||
case 'pay':
|
||||
this.$Router.push({
|
||||
name: 'Pay',
|
||||
params: {
|
||||
orderNo : orderNo,
|
||||
price : e.order.price,
|
||||
oepnType: 'order'
|
||||
}
|
||||
})
|
||||
break;
|
||||
case 'sign':
|
||||
onFount = sign(orderNo)
|
||||
break;
|
||||
}
|
||||
|
||||
if(!onFount) return
|
||||
|
||||
onFount.then(res =>{
|
||||
let orderIndex = this.array.findIndex(val => val.no === e.order.no)
|
||||
if(e.type === 'delete' || e.type === 'sign'){
|
||||
this.array.splice(orderIndex, 1)
|
||||
return
|
||||
}
|
||||
if(e.type === 'cancel'){
|
||||
this.array.splice(orderIndex, 1, {
|
||||
no : res.order_no,
|
||||
cover : res.items[0].sku.cover,
|
||||
name : res.items[0].sku.goods_name,
|
||||
price : res.items[0].price,
|
||||
sum : res.items[0].qty,
|
||||
stateText : res.state,
|
||||
cans : res.can
|
||||
})
|
||||
return
|
||||
}
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
if(this.status === 'loadmore'){
|
||||
this.page += 1
|
||||
this.status = 'loading'
|
||||
this.getOrder()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content{
|
||||
background: $window-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.tabs{
|
||||
background: white;
|
||||
}
|
||||
// 数据列表空
|
||||
.order-null{
|
||||
height: 80vh;
|
||||
}
|
||||
// 加载分页
|
||||
.pages-load{
|
||||
padding-bottom: $padding;
|
||||
}
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- tabs -->
|
||||
<u-sticky>
|
||||
<u-tabs class="tabs" :list="tabs" :scrollable="false" :current="index" lineColor="#34CE98" @click="onTabs"
|
||||
sticky />
|
||||
</u-sticky>
|
||||
<block v-if="array.length >= 1">
|
||||
<!-- 订单列表 -->
|
||||
<oct-order v-for="(item, arrayIndex) in array" :key="arrayIndex" :order-info="item" @onBtn="onType" />
|
||||
<!-- 加载更多 -->
|
||||
<view class="pages-load">
|
||||
<u-loadmore :status="status" />
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="vertical order-null">
|
||||
<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png" text="暂无相关订单"
|
||||
textColor="#999" />
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
orders,
|
||||
del,
|
||||
cancel,
|
||||
sign
|
||||
} from '@/apis/interfaces/order'
|
||||
import eventBus from '../../utils/eventBus.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
status: "loading",
|
||||
tabs: [{
|
||||
name: "全部",
|
||||
type: "",
|
||||
},
|
||||
{
|
||||
name: "待付款",
|
||||
type: "unpay",
|
||||
},
|
||||
{
|
||||
name: "待发货",
|
||||
type: "paid",
|
||||
},
|
||||
{
|
||||
name: "待签收",
|
||||
type: "delivered",
|
||||
},
|
||||
{
|
||||
name: "已完成",
|
||||
type: "completed",
|
||||
},
|
||||
],
|
||||
index: '0',
|
||||
array: [],
|
||||
page: 1
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
if (this.$store.getters.getRefresh == 1) {
|
||||
this.$store.commit('setRefresh', 0)
|
||||
this.array = []
|
||||
this.page = 1
|
||||
this.getOrder()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.index = this.$Route.query.index
|
||||
this.getOrder()
|
||||
eventBus.$on('paySuccess', function(data) {
|
||||
let index = this.array.findIndex((item) => item.no === data);
|
||||
console.log(typeof this.index, this.index)
|
||||
if (this.index == '0') {
|
||||
this.array[index].stateText = '待发货'
|
||||
this.array[index].cans = {
|
||||
"cancel": false,
|
||||
"pay": false,
|
||||
"sign": false,
|
||||
"refund": true,
|
||||
"user_deliver": false,
|
||||
"logistic_show": false,
|
||||
"refund_money": true
|
||||
}
|
||||
} else {
|
||||
this.array.splice(index, 1);
|
||||
}
|
||||
|
||||
}.bind(this));
|
||||
|
||||
eventBus.$on('applyRefundMoney', (data)=> {
|
||||
console.log(data,'data....');
|
||||
let index = this.array.findIndex((item) => item.no === data);
|
||||
this.array.splice(index, 1);
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getOrder() {
|
||||
orders({
|
||||
state: this.tabs[this.index].type,
|
||||
page: this.page
|
||||
}).then(res => {
|
||||
console.log(res);
|
||||
if (res.page.current === 1) {
|
||||
this.array = []
|
||||
}
|
||||
let ordersArr = res.data.map(val => {
|
||||
return {
|
||||
no: val.order_no,
|
||||
cover: val.items[0].sku.cover,
|
||||
name: val.items[0].sku.goods_name,
|
||||
price: val.total,
|
||||
sum: val.items[0].qty,
|
||||
stateText: val.state,
|
||||
cans: val.can,
|
||||
shop: val.shop,
|
||||
goods_id:val.items[0].sku.goods_id
|
||||
}
|
||||
})
|
||||
this.array = this.array.concat(ordersArr)
|
||||
this.status = res.page.has_more ? 'loadmore' : 'nomore'
|
||||
})
|
||||
},
|
||||
onTabs(e) {
|
||||
this.page = 1
|
||||
this.index = e.index
|
||||
this.getOrder()
|
||||
},
|
||||
|
||||
onType(e) {
|
||||
let orderNo = e.order.no;
|
||||
let shopId = e.order.shop.shop_id;
|
||||
let goodsId = e.order.goods_id;
|
||||
|
||||
let onFount;
|
||||
|
||||
switch (e.type) {
|
||||
case 'delete':
|
||||
onFount = del(orderNo);
|
||||
break;
|
||||
case 'cancel':
|
||||
uni.showModal({
|
||||
title: '温馨提示',
|
||||
content: '是否确认取消该订单',
|
||||
confirmText: '确认取消',
|
||||
confirmColor: "#34CE98",
|
||||
cancelText: '再想想',
|
||||
cancelColor: "#666666",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
cancel(orderNo).then(res => {
|
||||
console.log(res)
|
||||
let orderIndex = this.array.findIndex(val => val.no === e
|
||||
.order.no)
|
||||
console.log(this.index, typeof this.index, orderIndex);
|
||||
if (this.index == '0') {
|
||||
this.array[orderIndex].stateText = "已取消";
|
||||
this.array[orderIndex].cans = {
|
||||
"cancel": false,
|
||||
"pay": false,
|
||||
"sign": false,
|
||||
"refund": false,
|
||||
"user_deliver": false,
|
||||
"logistic_show": false,
|
||||
"refund_money": false
|
||||
};
|
||||
} else {
|
||||
this.array.splice(orderIndex, 1);
|
||||
}
|
||||
return;
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'logistic':
|
||||
this.$Router.push({
|
||||
name: 'OrderLogistics',
|
||||
params: {
|
||||
orderNo
|
||||
},
|
||||
});
|
||||
break;
|
||||
case 'pay':
|
||||
this.$Router.push({
|
||||
name: 'Pay',
|
||||
params: {
|
||||
orderNo: orderNo,
|
||||
price: e.order.price,
|
||||
oepnType: 'order',
|
||||
coins: e.order.coins
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'sign':
|
||||
uni.showModal({
|
||||
title: '温馨提示',
|
||||
content: '是否确认收到货物并签收该订单',
|
||||
confirmText: '确认签收',
|
||||
confirmColor: "#34CE98",
|
||||
cancelText: '再想想',
|
||||
cancelColor: "#666666",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
sign(orderNo).then(res => {
|
||||
console.log(res)
|
||||
let orderIndex = this.array.findIndex(val => val.no === e
|
||||
.order.no)
|
||||
console.log(this.index, typeof this.index, orderIndex);
|
||||
if (this.index == '0') {
|
||||
this.array[orderIndex].stateText = "已签收";
|
||||
this.array[orderIndex].cans = {
|
||||
"cancel": false,
|
||||
"pay": false,
|
||||
"sign": false,
|
||||
"refund": true,
|
||||
"user_deliver": false,
|
||||
"logistic_show": true,
|
||||
"refund_money": false
|
||||
};
|
||||
} else {
|
||||
this.array.splice(orderIndex, 1);
|
||||
}
|
||||
return;
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'refundMoney':
|
||||
this.$Router.push({
|
||||
name: "RefundMoney",
|
||||
params: {
|
||||
id: orderNo
|
||||
}
|
||||
})
|
||||
break;
|
||||
case 'refund' :
|
||||
this.$Router.push({
|
||||
name: "AfterSale",
|
||||
params: {
|
||||
id: orderNo
|
||||
}
|
||||
})
|
||||
break;
|
||||
case 'shopsDetail':
|
||||
this.$Router.push({ name: 'ShopDetail', params: {shopId: shopId}})
|
||||
break;
|
||||
case 'goodsDetail':
|
||||
this.$Router.push({ name: 'StoreGoods', params: {id: goodsId}})
|
||||
break;
|
||||
}
|
||||
if (!onFount) return
|
||||
onFount.then(res => {
|
||||
console.log(res)
|
||||
|
||||
let orderIndex = this.array.findIndex(val => val.no === e.order.no)
|
||||
if (e.type === 'delete' || e.type === 'sign') {
|
||||
this.array.splice(orderIndex, 1)
|
||||
return;
|
||||
}
|
||||
if (e.type === 'cancel') {
|
||||
this.array.splice(orderIndex, 1, {
|
||||
no: res.order_no,
|
||||
cover: res.items[0].sku.cover,
|
||||
name: res.items[0].sku.goods_name,
|
||||
price: res.items[0].price,
|
||||
sum: res.items[0].qty,
|
||||
stateText: res.state,
|
||||
cans: res.can
|
||||
});
|
||||
|
||||
|
||||
return;
|
||||
}
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.status === 'loadmore') {
|
||||
this.page += 1
|
||||
this.status = 'loading'
|
||||
this.getOrder()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
background: $window-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
background: white;
|
||||
}
|
||||
|
||||
// 数据列表空
|
||||
.order-null {
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
// 加载分页
|
||||
.pages-load {
|
||||
padding-bottom: $padding;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user