Merge branch 'feature/task1.0.0_xg' into 'feature/task1.0.0'

feat: 完善物流列表

See merge request yanxuan-frontend/shop-pc!22
merge-requests/23/head
肖广 2 years ago
commit 889ea111be

@ -11,27 +11,29 @@
<div class="home-logisitcs-label">我的物流</div> <div class="home-logisitcs-label">我的物流</div>
<!-- 无物流信息 --> <!-- 无物流信息 -->
<div <div
v-if="loadFinish && total === 0" v-if="loadFinish && list.length === 0"
class="home-logisitcs-empty flex flex-center flex-middle" class="home-logisitcs-empty flex flex-center flex-middle"
> >
<img src="~/assets/img/account/home/logisitcs-empty.png" /> <img src="~/assets/img/account/home/logisitcs-empty.png" />
</div> </div>
<!-- 有物流信息 --> <!-- 有物流信息 -->
<div v-else v-loading="loading"> <div v-else v-loading="loading">
<div v-infinite-scroll="handleListload" class="home-logisitcs-content"> <div class="home-logisitcs-content">
<div <div
v-for="item in list" v-for="item in list"
:key="item.orderNo" :key="item.orderId"
class="home-logisitcs-content__item flex flex-middle flex-between" class="home-logisitcs-content__item flex flex-middle flex-between"
> >
<div class="logisitcs-content-item__info flex flex-start"> <div class="logisitcs-content-item__info flex flex-start">
<img :src="item.img" /> <img :src="item.cover" />
<div class="content-item-info__wrap flex-1"> <div class="content-item-info__wrap flex-1">
<p class="item-info-wrap__title"> <p class="item-info-wrap__title">
{{ item.title }} {{ item.logisticsContext }}
</p> </p>
<div class="item-info-wrap__orderNo"> <div class="item-info-wrap__orderNo">
<span>{{ `${item.companyName}: ${item.orderNo}` }}</span> <span>{{
`${item.logistics.companyName}: ${item.logistics.trackingNo}`
}}</span>
<span class="item-info-wrap__orderNo--light">查看详情</span> <span class="item-info-wrap__orderNo--light">查看详情</span>
</div> </div>
</div> </div>
@ -39,7 +41,7 @@
<UiButton <UiButton
type="yellow_line" type="yellow_line"
:radius="true" :radius="true"
@click="onOrderEnsure(item)" @click="onOrderConfirm(item)"
>确认收货</UiButton >确认收货</UiButton
> >
</div> </div>
@ -47,27 +49,26 @@
</div> </div>
<UiConfirm <UiConfirm
title="确认收到货了吗?" title="确认收到货了吗?"
:visible.sync="ensureOrderVisible" :visible.sync="confirmOrderVisible"
@confirm="handleOrderEnsure" @confirm="handleOrderEnsure"
/> />
</div> </div>
</template> </template>
<script> <script>
import { Message } from "element-ui";
import UiButton from "@/components/UiButton.vue"; import UiButton from "@/components/UiButton.vue";
import UiConfirm from "@/components/UiConfirm.vue"; import UiConfirm from "@/components/UiConfirm.vue";
import { ApiGetOrderLogisticsList } from "@/plugins/api/order"; import {
ApiGetOrderLogisticsList,
ApiPutOrderReceive,
} from "@/plugins/api/order";
export default { export default {
components: { UiButton, UiConfirm }, components: { UiButton, UiConfirm },
data() { data() {
return { return {
total: 0,
query: {
pageIndex: 1,
length: 10,
},
selectOrderId: 0, selectOrderId: 0,
ensureOrderVisible: false, confirmOrderVisible: false,
list: [], list: [],
loading: false, loading: false,
loadFinish: false, loadFinish: false,
@ -80,31 +81,36 @@ export default {
// //
async getLogisticsList() { async getLogisticsList() {
this.loading = true; this.loading = true;
const { result } = await ApiGetOrderLogisticsList({ ...this.query }); const { result } = await ApiGetOrderLogisticsList();
this.loading = false; this.loading = false;
this.loadFinish = true; this.loadFinish = true;
if (result) { if (result) {
const { total, list } = result; this.list = result.map((item) => {
this.total = total; const goods = item.products || [{ productImageUrl: "" }];
if (list && list.length > 0) { const logisticsList = item.logistics.logisticsDataList || [
this.list = this.list.concat(list); { context: "暂无物流信息" },
} ];
return {
...item,
cover: goods[0].productImageUrl, //
logisticsContext: logisticsList[0].context, //
};
});
} }
}, },
onOrderEnsure({ orderNo }) { onOrderConfirm({ orderId }) {
this.selectOrderId = orderNo; this.selectOrderId = orderId;
this.ensureOrderVisible = true; this.confirmOrderVisible = true;
}, },
// //
handleOrderEnsure() {}, async handleOrderEnsure() {
const { result } = await ApiPutOrderReceive({
// orderId: this.selectOrderId,
handleListload() { });
console.log("enter"); this.confirmOrderVisible = false;
if (this.total > 0 && this.list.length < this.total) { if (result) {
// Message.success("收货成功");
this.query.pageIndex += 1;
this.getLogisticsList(); this.getLogisticsList();
} }
}, },
@ -164,6 +170,7 @@ export default {
font-size: 14px; font-size: 14px;
color: #666666; color: #666666;
margin-bottom: 8px; margin-bottom: 8px;
@include ellipses(2);
} }
.item-info-wrap__orderNo { .item-info-wrap__orderNo {
display: inline-block; display: inline-block;

@ -68,15 +68,15 @@ export const ApiGetOrderLogistics = ({orderId}) =>
* 获取物流列表 * 获取物流列表
* @param {*} params * @param {*} params
*/ */
export const ApiGetOrderLogisticsList = (params) => export const ApiGetOrderLogisticsList = () =>
ToAsyncAwait(axiosTk.get('http://yapi.smart-xwork.cn/mock/148902/logisitcs/list'), { params }); ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/tradeOrder/listReceiveOrder`));
/** /**
* 确认收货 * 确认收货
* @param {*} orderId * @param {*} orderId
*/ */
export const ApiPutOrderReceive = (params) => export const ApiPutOrderReceive = (data) =>
ToAsyncAwait(axiosTk.put(`${BASE_URL}/app/tradeOrder/receive`, params)); ToAsyncAwait(axiosTk.put(`${BASE_URL}/app/tradeOrder/receive`, data));
/** /**
* 提交订单 * 提交订单
* @param {*} data * @param {*} data

Loading…
Cancel
Save