增加退换货列表

pages/refund/index.vue

@@ -0,0 +1,186 @@
+<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: "unpay"},
+					{name: "处理中", type: "paid"},
+					{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;
+	}
+</style>