231 lines
7.1 KiB
Vue
231 lines
7.1 KiB
Vue
|
<template>
|
||
|
|
<NavBar />
|
||
|
|
<view class="container">
|
||
|
|
<view class="title">
|
||
|
|
<PageTitle :title="$t('activity.myOrder')" />
|
||
|
|
</view>
|
||
|
|
<view class="content">
|
||
|
|
<Spin v-show="loading1" />
|
||
|
|
<view class="order-list">
|
||
|
|
<template v-for="(item, index) in orderList">
|
||
|
|
<view class="order-item">
|
||
|
|
<view class="order-header">
|
||
|
|
<view class="order-status">{{ getOrderStatus(item.status) }}</view>
|
||
|
|
<view class="order-time">
|
||
|
|
<image class="icon" src="/static/clock.svg"></image>
|
||
|
|
<text>{{ item.apply_time }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="order-info">
|
||
|
|
<image class="img" mode="aspectFill" :src="item.goods_img.split(',')[0]"></image>
|
||
|
|
<view class="info">
|
||
|
|
<view class="order-title uni-ellipsis-2">{{ item.goods_name }}</view>
|
||
|
|
<view class="order-point">
|
||
|
|
<text>{{ $t('activity.point') }}:</text>
|
||
|
|
<text class="point">{{ item.goods_integral }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="order-footer">
|
||
|
|
<view class="item">
|
||
|
|
<image class="icon" src="../../../static/shop/recipients.svg"></image>
|
||
|
|
<view>{{ item.delivery_recipients }}</view>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<image class="icon" src="../../../static/shop/phone.svg"></image>
|
||
|
|
<view>{{ item.delivery_phone }}</view>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<image class="icon" src="../../../static/shop/addr.svg"></image>
|
||
|
|
<view>{{ item.delivery_address }}</view>
|
||
|
|
</view>
|
||
|
|
<view style="margin-left: auto" v-if="item.status == 0">
|
||
|
|
<button class="shop-dark-btn" @click="handleCancel(item)">
|
||
|
|
{{ $t('activity.cancelOrder') }}
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
</view>
|
||
|
|
<uni-load-more v-if="orderList && orderList.length" :status="loadStatus"></uni-load-more>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<uni-popup ref="cancelDialog" mask-background-color="transparent" :isMaskClick="false">
|
||
|
|
<view class="formDialog">
|
||
|
|
<view class="searchForm" v-if="order">
|
||
|
|
<uni-forms ref="searchForm" :modelValue="cancelFormData">
|
||
|
|
<uni-row>
|
||
|
|
<uni-col :span="24">
|
||
|
|
<uni-forms-item :label="$t('activity.goodsName')">
|
||
|
|
<view style="height: 100%; display: flex; align-items: center">{{ order.goods_name }}</view>
|
||
|
|
</uni-forms-item>
|
||
|
|
</uni-col>
|
||
|
|
<uni-col :span="24">
|
||
|
|
<uni-forms-item :label="$t('activity.point')">
|
||
|
|
<view style="height: 100%; display: flex; align-items: center">{{ order.integral }}</view>
|
||
|
|
</uni-forms-item>
|
||
|
|
</uni-col>
|
||
|
|
<uni-col :span="24">
|
||
|
|
<uni-forms-item :label="$t('activity.addr')">
|
||
|
|
<view style="height: 100%; display: flex; align-items: center">{{ order.delivery_address }}</view>
|
||
|
|
</uni-forms-item>
|
||
|
|
</uni-col>
|
||
|
|
<uni-col :span="24">
|
||
|
|
<uni-forms-item :label="$t('activity.phone')">
|
||
|
|
<view style="height: 100%; display: flex; align-items: center">{{ order.delivery_phone }}</view>
|
||
|
|
</uni-forms-item>
|
||
|
|
</uni-col>
|
||
|
|
<uni-col :span="24">
|
||
|
|
<uni-forms-item :label="$t('activity.recipients')">
|
||
|
|
<view style="height: 100%; display: flex; align-items: center">{{ order.delivery_recipients }}</view>
|
||
|
|
</uni-forms-item>
|
||
|
|
</uni-col>
|
||
|
|
<uni-col :span="24">
|
||
|
|
<uni-forms-item :label="$t('form.remark.label')">
|
||
|
|
<uni-easyinput primaryColor="#29BBE4" v-model="cancelFormData.remark" />
|
||
|
|
</uni-forms-item>
|
||
|
|
</uni-col>
|
||
|
|
</uni-row>
|
||
|
|
</uni-forms>
|
||
|
|
<view class="submitter">
|
||
|
|
<button :disabled="submitBtnLoading" class="primaryButton" @click="save">
|
||
|
|
<image v-show="submitBtnLoading" src="/static/loadingCircle.svg" mode="aspectFit" style="width: 16px; height: 16px"></image>
|
||
|
|
{{ $t('activity.cancelOrder') }}
|
||
|
|
</button>
|
||
|
|
<button class="secondaryButton" @click="closeCancelDialog">
|
||
|
|
{{ $t('activity.cancel22') }}
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</uni-popup>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getOrderList, cancelOrder } from '@/services/activity/shop';
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
searchFormData: {
|
||
|
|
curr_page: 1,
|
||
|
|
page_size: 20,
|
||
|
|
qcc_fuzzy_search: undefined
|
||
|
|
},
|
||
|
|
loading: false,
|
||
|
|
loading1: false,
|
||
|
|
submitBtnLoading: false,
|
||
|
|
total: 0,
|
||
|
|
orderList: [],
|
||
|
|
hasMore: false,
|
||
|
|
order: null,
|
||
|
|
cancelFormData: {
|
||
|
|
id: undefined,
|
||
|
|
remark: undefined
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
loadStatus() {
|
||
|
|
if (this.loading) {
|
||
|
|
return 'loading';
|
||
|
|
}
|
||
|
|
if (this.orderList && this.orderList.length) {
|
||
|
|
if (this.orderList.length < this.total) {
|
||
|
|
return 'more';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return 'no-more';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async getListData() {
|
||
|
|
this.orderList = [];
|
||
|
|
this.hasMore = false;
|
||
|
|
this.total = 0;
|
||
|
|
this.searchFormData.curr_page = 1;
|
||
|
|
this.loading1 = true;
|
||
|
|
const res = await getOrderList(this.searchFormData);
|
||
|
|
if (res && res.code === 0) {
|
||
|
|
this.total = res.data.totalRecords;
|
||
|
|
this.orderList = res.data.records;
|
||
|
|
this.searchFormData.curr_page = this.orderList && this.total > this.orderList.length ? 2 : 1;
|
||
|
|
this.hasMore = this.orderList && this.total > this.orderList.length;
|
||
|
|
}
|
||
|
|
this.loading1 = false;
|
||
|
|
},
|
||
|
|
getOrderStatus(status) {
|
||
|
|
if (status == '0') return this.$t('activity.auditStatus-1');
|
||
|
|
if (status == '1') return this.$t('activity.delivered');
|
||
|
|
if (status == '2') return this.$t('activity.auditStatus2');
|
||
|
|
if (status == '3') return this.$t('activity.shippingNow');
|
||
|
|
if (status == '4') return this.$t('activity.shipped');
|
||
|
|
if (status == '5') return this.$t('activity.auditStatus-2');
|
||
|
|
},
|
||
|
|
handleCancel(item) {
|
||
|
|
this.order = item;
|
||
|
|
this.cancelFormData.id = item.id;
|
||
|
|
this.cancelFormData.remark = undefined;
|
||
|
|
this.$refs.cancelDialog.open();
|
||
|
|
},
|
||
|
|
closeCancelDialog() {
|
||
|
|
this.$refs.cancelDialog.close();
|
||
|
|
this.order = null;
|
||
|
|
this.cancelFormData.id = undefined;
|
||
|
|
this.cancelFormData.remark = undefined;
|
||
|
|
},
|
||
|
|
async save() {
|
||
|
|
this.submitBtnLoading = true;
|
||
|
|
const resp = await cancelOrder(this.cancelFormData);
|
||
|
|
this.submitBtnLoading = false;
|
||
|
|
if (resp.code == 0) {
|
||
|
|
this.closeCancelDialog();
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.$cusModal.showModal({
|
||
|
|
type: 'message',
|
||
|
|
status: 'success',
|
||
|
|
contentText: this.$t('common.success.action')
|
||
|
|
});
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
this.closeCancelDialog();
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.$cusModal.showModal({
|
||
|
|
type: 'message',
|
||
|
|
status: 'warning',
|
||
|
|
contentText: resp.msg ?? this.$t('common.error.sysError')
|
||
|
|
});
|
||
|
|
})
|
||
|
|
}
|
||
|
|
await this.getListData();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.getListData();
|
||
|
|
},
|
||
|
|
onReachBottom() {
|
||
|
|
if (this.loading || !this.hasMore) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.loading = true;
|
||
|
|
getOrderList(this.searchFormData)
|
||
|
|
.then((res) => {
|
||
|
|
if (res && res.code === 0) {
|
||
|
|
this.total = res.data.totalRecords;
|
||
|
|
this.orderList = [...this.orderList, ...res.data.records];
|
||
|
|
this.searchFormData.curr_page = this.total > this.orderList.length ? this.searchFormData.curr_page + 1 : this.searchFormData.curr_page;
|
||
|
|
this.hasMore = this.total > this.orderList.length;
|
||
|
|
}
|
||
|
|
this.loading = false;
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
this.loading = false;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import './myOrder.scss';
|
||
|
|
</style>
|