525 lines
18 KiB
Vue
525 lines
18 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="mainTop" :style="{ height: menu.bottom + 'px', paddingTop: menu.top + 'px' }">
|
||
<image class="backIcon" src="https://eshangtech.com/caiyunyiImg/backIcon.png" @click="handleBack" />
|
||
|
||
<view class="searchBox">
|
||
<image class="searchIcon" src="/static/images/home/searchIcon.svg" />
|
||
<input class="searchText" placeholder="搜索我的订单" confirm-type="search" v-model="searchText" autofocus
|
||
@confirm="handleSearchOrder" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单列表 -->
|
||
<scroll-view :scroll-y="true" class="orderListBox"
|
||
:style="{ height: `calc(100vh - ${menu.bottom}px - 42px - 35px - 35px)` }"
|
||
@scrolltolower="handleScrollTolower">
|
||
<view class="orderItem" v-for="(item, index) in orderList" :key="index" @click="goEvaluate(item)">
|
||
<view class="orderItemTop">
|
||
<view class="orderItemTopLeft">
|
||
<image class="orderItemIcon" src="https://eshangtech.com/caiyunyiImg/storeIcon.png" />
|
||
<view class="orderItemLabel">{{ item.SHOPNAME || "" }}</view>
|
||
</view>
|
||
<view class="orderItemTopRight">
|
||
<view class="statusBox">{{ item.SALEBILL_STATE_TEXT || "" }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="orderItemCenter"
|
||
v-for="(subItem, subIndex) in item.DetailList.slice(0, item.isShowMore ? item.DetailList.length : 5)"
|
||
:key="subIndex" @click.stop="handleGoShopDetail(item, subIndex)">
|
||
<view class="orderItemCenterLeft">
|
||
<image class="orderItemShopImg"
|
||
:src="subItem.ImageUrl ? subItem.ImageUrl : 'https://eshangtech.com/ShopICO/no-picture.png'" />
|
||
</view>
|
||
<view class="orderItemCenterRight">
|
||
<view class="orderItemCenterRightLeft">
|
||
<view class="orderItemRightLeftLabel">{{ subItem.GoodsName || "" }}</view>
|
||
<view class="orderItemRightLeftSpecifications"></view>
|
||
</view>
|
||
<view class="orderItemCenterRightRight">
|
||
<view class="unitPrice">¥{{ subItem.AveragePrice || '-' }}</view>
|
||
<view class="orderItemQuantity">x{{ subItem.OrderCount || '-' }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<div v-if="item.DetailList.length > 5" class="is_more" @click.stop="handleClickShowMoreShop(item)">
|
||
<img :src="item.isShowMore
|
||
? '/static/images/home/up_arrow.png'
|
||
: '/static/images/home/down_arrow.png'
|
||
" alt="" class="arrow_icon" />
|
||
共{{ item.DetailList.length }}个品项
|
||
</div>
|
||
|
||
<!-- 实付款 -->
|
||
<view class="orderItemMoneyBox">
|
||
<span class="orderItemUnit">实付款：</span>
|
||
<span class="orderItemMoney">¥{{ item.PayAmount || "" }}</span>
|
||
</view>
|
||
|
||
<view class="orderItemBottom">
|
||
<view class="orderItemBottomLeft">
|
||
<view class="orderItemBottomLeftMore" v-if="false">更多</view>
|
||
</view>
|
||
<view class="orderItemBottomRight">
|
||
<view class="orderItemBottomRightEvaluate"
|
||
v-if="item.SALEBILL_STATE > 3000 && item.SALEBILL_STATE <= 5000">
|
||
评价
|
||
</view>
|
||
<view class="orderItemBottomRightBuyAgain" v-if="item.SALEBILL_STATE === 1005"
|
||
@click.stop="goEvaluate(item)">
|
||
去付款</view>
|
||
<view class="orderItemBottomRightBuyAgain" v-if="item.SALEBILL_STATE === 2010"
|
||
@click.stop="handleConfirmReceipt(item)">确认收货</view>
|
||
<!-- <view class="orderItemBottomRightBuyAgain" @click.stop="handleGoStore">再次购买</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="inBottom" v-if="pageMsg.isOver">
|
||
<text class="bottomText">我是有底线的</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
searchText: "",
|
||
orderList: [],
|
||
menu: {},
|
||
pageMsg: {
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
isOver: false,
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
user: "user",
|
||
}),
|
||
},
|
||
onLoad(query) {
|
||
this.menu = uni.getMenuButtonBoundingClientRect();
|
||
},
|
||
methods: {
|
||
async handleSearchOrder() {
|
||
this.pageMsg = {
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
isOver: false,
|
||
}
|
||
this.orderList = []
|
||
await this.handleGetOrder()
|
||
},
|
||
// 查询订单
|
||
async handleGetOrder() {
|
||
|
||
uni.showLoading({
|
||
title: "正在加载...",
|
||
mask: true,
|
||
});
|
||
const req = {
|
||
SearchParameter: {
|
||
MEMBERSHIP_IDS: this.user.MEMBERSHIP_ID,
|
||
PROVINCE_CODE: this.user.PROVINCE_CODE,
|
||
WECHATAPP_APPID: "wxee018fb96955552a",
|
||
SearchKeyValue: this.searchText,
|
||
},
|
||
PageIndex: this.pageMsg.pageIndex,
|
||
pageSize: this.pageMsg.pageSize,
|
||
type: 'encryption'
|
||
}
|
||
const data = await this.$api.$zzyLocalPost(
|
||
"/OnlineOrder/GetOrderList",
|
||
req
|
||
);
|
||
console.log('查询订单数据', data);
|
||
|
||
let oldOrderList = [];
|
||
if (this.orderList && this.orderList.length > 0) {
|
||
oldOrderList = JSON.parse(JSON.stringify(this.orderList));
|
||
}
|
||
console.log("oldOrderList", oldOrderList);
|
||
// 手动添加待付款、待发货、待收货
|
||
let list = data.Result_Data ? data.Result_Data.List : [];
|
||
let resList = [];
|
||
if (list && list.length > 0) {
|
||
if (this.currentTab === 5) {
|
||
list.forEach((item) => {
|
||
if (
|
||
item.SALEBILL_STATE >= 3000 &&
|
||
item.SALEBILL_STATE !== 8999 &&
|
||
item.SALEBILL_STATE !== 9000 &&
|
||
item.SALEBILL_STATE !== 9999
|
||
) {
|
||
resList.push(item);
|
||
}
|
||
});
|
||
} else {
|
||
list.forEach((item) => {
|
||
resList.push(item);
|
||
});
|
||
}
|
||
}
|
||
if (resList && resList.length < 10) {
|
||
this.pageMsg.isOver = true;
|
||
}
|
||
this.orderList = oldOrderList.concat(resList);
|
||
uni.hideLoading();
|
||
},
|
||
// 滚动到底部 加载更多
|
||
handleScrollTolower() {
|
||
this.pageMsg.pageIndex = this.pageMsg.pageIndex + 1;
|
||
|
||
this.handleSearchOrder();
|
||
},
|
||
// 返回上个页面
|
||
handleBack() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.main {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
|
||
.mainTop {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.backIcon {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
}
|
||
|
||
.searchBox {
|
||
width: calc(100% - 52rpx - 24rpx - 200rpx);
|
||
height: 100%;
|
||
margin-left: 24rpx;
|
||
background-color: #ececec;
|
||
border-radius: 48rpx;
|
||
box-sizing: border-box;
|
||
padding: 20rpx 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.searchIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.searchText {
|
||
font-family: PingFang-SC, PingFang-SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #000;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.orderListBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
margin-top: 20px;
|
||
|
||
.orderItem {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 22rpx 32rpx;
|
||
background-color: #fff;
|
||
margin-bottom: 24rpx;
|
||
|
||
.orderItemTop {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.orderItemTopLeft {
|
||
width: 70%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.orderItemIcon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.orderItemLabel {
|
||
display: inline-block;
|
||
width: calc(100% - 52rpx);
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 34rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
|
||
.orderItemTopRight {
|
||
width: 30%;
|
||
|
||
.statusBox {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #F83D3D;
|
||
line-height: 40rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.orderItemCenter {
|
||
width: 100%;
|
||
margin-top: 22rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
|
||
.orderItemCenterLeft {
|
||
width: 192rpx;
|
||
height: 192rpx;
|
||
margin-right: 12rpx;
|
||
|
||
.orderItemShopImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.orderItemCenterRight {
|
||
width: calc(100% - 192rpx - 12rpx);
|
||
height: 192rpx;
|
||
display: flex;
|
||
|
||
.orderItemCenterRightLeft {
|
||
width: calc(100% - 180rpx);
|
||
|
||
.orderItemRightLeftLabel {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.orderItemRightLeftSpecifications {
|
||
font-family: AppleSystemUIFont;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
line-height: 30rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
margin-top: 14rpx;
|
||
}
|
||
}
|
||
|
||
.orderItemCenterRightRight {
|
||
width: 180rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
|
||
.unitPrice {
|
||
font-family: AppleSystemUIFont;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 34rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
|
||
.orderItemQuantity {
|
||
font-family: AppleSystemUIFont;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
line-height: 34rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.is_more {
|
||
width: 400rpx;
|
||
height: 40rpx;
|
||
margin: auto;
|
||
text-align: center;
|
||
//display: flex;
|
||
//flex-direction: row;
|
||
//align-items: center;
|
||
color: #9fa3a8;
|
||
font-size: 28rpx;
|
||
|
||
.arrow_icon {
|
||
width: 26rpx;
|
||
height: 16rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
}
|
||
|
||
.orderItemMoneyBox {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
|
||
.orderItemUnit {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
|
||
.orderItemMoney {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
}
|
||
|
||
.orderItemBottom {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 32rpx;
|
||
|
||
.orderItemBottomLeft {
|
||
.orderItemBottomLeftMore {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
}
|
||
|
||
.orderItemBottomRight {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.orderItemBottomRightEvaluate {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
padding: 4rpx 26rpx;
|
||
background: #F2F5F6;
|
||
border-radius: 4rpx;
|
||
margin-right: 34rpx;
|
||
}
|
||
|
||
.orderItemBottomRightBuyAgain {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #E84D38;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
padding: 4rpx 26rpx;
|
||
background: #F2F5F6;
|
||
border-radius: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.inBottom {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.bottomText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #d0d0d0;
|
||
line-height: 40rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
position: relative;
|
||
padding: 6rpx 0;
|
||
}
|
||
|
||
.bottomText::after {
|
||
content: "";
|
||
width: 30vw;
|
||
height: 2rpx;
|
||
background: #e0e0e0;
|
||
position: absolute;
|
||
left: -32vw;
|
||
top: 50%;
|
||
}
|
||
|
||
.bottomText::before {
|
||
content: "";
|
||
width: 30vw;
|
||
height: 2rpx;
|
||
background: #e0e0e0;
|
||
position: absolute;
|
||
right: -32vw;
|
||
top: 50%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |