288 lines
8.4 KiB
Vue
288 lines
8.4 KiB
Vue
<template>
|
||
<mescroll-uni ref="mescrollRef" top="80rpx" @init="mescrollInit" @down="downCallback" @up="upCallback"
|
||
:down="downOption" :up="upOption">
|
||
<view class="sale-list" v-if="type == 'normal'">
|
||
<view v-for="(items, index) in lists" :key="index" class="sale-item bg-white m-t-20">
|
||
<view class="sale-header">
|
||
<shop-title :shop="{name: items.shop_name, id: items.sid}"></shop-title>
|
||
</view>
|
||
<view v-for="(item, index2) in items.order_goods" :key="index2" class="goods-item">
|
||
<view class="sale-content flex row">
|
||
<view class="goods-img">
|
||
<u-image width="160rpx" height="160rpx" border-radius="6rpx" :src="item.image" />
|
||
</view>
|
||
<view class="goods-desc flex-1 m-l-24">
|
||
<view class="goods-name line-2">{{item.goods_name}}</view>
|
||
<view class="m-t-10 line-1 muted">{{item.spec_value_str}}</view>
|
||
<view class="flex row-between m-t-20">
|
||
<price-format class="sm" :first-size="30" :second-size="30" :subscript-size="26"
|
||
:price="item.goods_price" />
|
||
<view>x{{item.goods_num}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="sale-footer flex row-right">
|
||
<view class="btn row-center primary br60"
|
||
:class="{'gray-btn': items.after_sale.able_apply == 0}" @tap="applyRefund(items,item)">
|
||
申请售后
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="sale-list" v-else-if="type == 'apply'">
|
||
<view v-for="(items, index) in lists" :key="index" class="sale-item bg-white m-t-20">
|
||
<view class="sale-header flex row-between">
|
||
<shop-title :shop="{name: items.shop_name, id: items.sid}"></shop-title>
|
||
<view class="primary flex-none m-l-20">{{items.after_sale.type_text}}</view>
|
||
</view>
|
||
<view v-for="(item, index2) in items.order_goods" :key="index2">
|
||
<router-link :to="{path: '/bundle/pages/after_sales_detail/after_sales_detail',
|
||
query: { id: items.after_sale.after_sale_id,}}">
|
||
<view class="sale-content">
|
||
<view class="flex">
|
||
<view class="goods-img">
|
||
<u-image width="160rpx" height="160rpx" border-radius="6rpx" :src="item.image" />
|
||
</view>
|
||
<view class="goods-desc m-l-24">
|
||
<view class="goods-name line-2">{{item.goods_name}}</view>
|
||
<view class="m-t-10 xs line-1 muted">{{item.spec_value_str}}</view>
|
||
<view class="flex row-between m-t-20">
|
||
<price-format class="sm" :first-size="30" :second-size="30" :subscript-size="26"
|
||
:price="item.goods_price" />
|
||
<view>x{{item.goods_num}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="sale-status m-t-20 flex">
|
||
<view class="bold">申请状态</view>
|
||
<view class="m-l-20">{{items.after_sale.desc}}</view>
|
||
</view>
|
||
</view>
|
||
</router-link>
|
||
<view class="sale-footer flex row-right">
|
||
<view class="row-center flex br60 m-r-20 btn black-btn"
|
||
@tap="onShowDialog(items.after_sale.after_sale_id)">
|
||
撤销申请
|
||
</view>
|
||
<router-link :to="{path: '/bundle/pages/apply_refund/apply_refund',
|
||
query: {
|
||
after_sale_id: items.after_sale.after_sale_id,
|
||
order_id: items.order_id,
|
||
item_id: item.item_id}}" v-if="items.after_sale.status == 4 || items.after_sale.status == 1">
|
||
<view class="row-center flex br60 m-r-20 btn primary">重新申请</view>
|
||
</router-link>
|
||
<router-link
|
||
:to="{path: '/bundle/pages/input_express_info/input_express_info', query: { id: items.after_sale.after_sale_id}}"
|
||
v-if="items.after_sale.status == 2">
|
||
<view class="row-center flex br60 m-r-20 btn black-btn">
|
||
填写快递单号
|
||
</view>
|
||
</router-link>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="sale-list" v-else>
|
||
<view v-for="(items, index) in lists" :key="index" class="sale-item bg-white m-t-20">
|
||
<view class="sale-header flex row-between">
|
||
<shop-title :shop="{name: items.shop_name, id: items.sid}"></shop-title>
|
||
<view class="primary flex-none m-l-20">{{items.after_sale.type_text}}</view>
|
||
</view>
|
||
<view v-for="(item, index2) in items.order_goods" :key="index2">
|
||
<router-link :to="{path: '/bundle/pages/after_sales_detail/after_sales_detail',
|
||
query: { id: items.after_sale.after_sale_id,}}">
|
||
<view class="sale-content">
|
||
<view class="flex">
|
||
<view class="goods-img">
|
||
<u-image width="160rpx" height="160rpx" border-radius="6rpx" :src="item.image" />
|
||
</view>
|
||
<view class="goods-desc m-l-24">
|
||
<view class="goods-name line-2">{{item.goods_name}}</view>
|
||
<view class="m-t-10 line-1 muted">{{item.spec_value_str}}</view>
|
||
<view class="flex row-between m-t-20">
|
||
<price-format class="sm" :first-size="30" :second-size="30" :subscript-size="26"
|
||
:price="item.goods_price" />
|
||
<view>x{{item.goods_num}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="sale-status m-t-20 flex">
|
||
<view class="bold">申请状态</view>
|
||
<view class="m-l-20">{{items.after_sale.desc}}</view>
|
||
</view>
|
||
</view>
|
||
</router-link>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-modal v-model="showDialog" confirm-text="确定" :showCancelButton="true" :confirm-color="colorConfig.primary"
|
||
@confirm="cancelApplyFun">
|
||
<view class="flex-col col-center tips-dialog" style="padding: 30rpx 0;">
|
||
<image class="icon-lg" src="/static/images/icon_warning.png"></image>
|
||
<view class="m-t-30">是否要撤销申请？</view>
|
||
</view>
|
||
</u-modal>
|
||
</mescroll-uni>
|
||
</template>
|
||
|
||
<script>
|
||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||
import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
|
||
import {
|
||
afterSaleType
|
||
} from "@/utils/type";
|
||
import {
|
||
getAfterSaleList,
|
||
cancelApply,
|
||
afterSaleDetail,
|
||
applyAgain
|
||
} from "@/api/user";
|
||
|
||
export default {
|
||
mixins: [MescrollMixin, MescrollMoreItemMixin],
|
||
|
||
props: {
|
||
type: {
|
||
type: String,
|
||
default: afterSaleType.NORMAL
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
lists: [],
|
||
downOption: {
|
||
auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
|
||
},
|
||
upOption: {
|
||
auto: false, // 不自动加载
|
||
noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
|
||
empty: {
|
||
icon: '/static/images/order_null.png',
|
||
tip: '暂无售后~', // 提示
|
||
fixed: true
|
||
}
|
||
},
|
||
showDialog: false
|
||
};
|
||
},
|
||
|
||
created() {
|
||
uni.$on("refreshsale", () => {
|
||
this.downCallback()
|
||
})
|
||
},
|
||
destroyed() {
|
||
uni.$off("refreshsale")
|
||
},
|
||
methods: {
|
||
applyRefund(items, item) {
|
||
const {
|
||
after_sale: {
|
||
able_apply
|
||
},
|
||
order_id
|
||
} = items
|
||
const {
|
||
item_id
|
||
} = item
|
||
if (able_apply != 1) {
|
||
return
|
||
}
|
||
this.$Router.push({
|
||
path: '/bundle/pages/apply_refund/apply_refund',
|
||
query: {
|
||
order_id,
|
||
item_id
|
||
}
|
||
})
|
||
},
|
||
cancelApplyFun() {
|
||
cancelApply({
|
||
id: this.id
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
this.$toast({
|
||
title: res.msg
|
||
});
|
||
uni.$emit("refreshsale")
|
||
}
|
||
});
|
||
},
|
||
|
||
async upCallback(page) {
|
||
const {
|
||
type,
|
||
} = this;
|
||
const params = {
|
||
page_size: page.size,
|
||
page_no: page.num,
|
||
type
|
||
}
|
||
const {
|
||
data,
|
||
code
|
||
} = await getAfterSaleList(params)
|
||
if (code == 1) {
|
||
const curPageData = data.list;
|
||
const curPageLen = curPageData.length;
|
||
const hasNext = !!data.more;
|
||
if (page.num == 1) this.lists = [];
|
||
this.lists = this.lists.concat(curPageData);
|
||
this.mescroll.endSuccess(curPageLen, hasNext);
|
||
}
|
||
},
|
||
|
||
onShowDialog(id) {
|
||
this.id = id;
|
||
this.showDialog = true
|
||
}
|
||
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.sale-list {
|
||
overflow: hidden;
|
||
|
||
.sale-item {
|
||
.sale-header {
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.sale-content {
|
||
padding: 20rpx 24rpx;
|
||
|
||
.sale-status {
|
||
padding: 20rpx 40rpx;
|
||
background-color: #F6F6F6;
|
||
border-radius: 6rpx;
|
||
}
|
||
|
||
.goods-desc {
|
||
min-width: 500rpx;
|
||
}
|
||
}
|
||
|
||
.sale-footer {
|
||
padding: 0 24rpx 22rpx;
|
||
|
||
.btn {
|
||
padding: 9rpx 34rpx;
|
||
border: 1px solid $-color-primary;
|
||
|
||
&.gray-btn {
|
||
border-color: $-color-border;
|
||
color: $-color-muted;
|
||
}
|
||
|
||
&.black-btn {
|
||
border-color: $-color-border;
|
||
color: $-color-normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|