1234 lines
34 KiB
Vue
1234 lines
34 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" @click="handleGoOrderSearch">
|
|
<image class="searchIcon" src="/static/images/home/searchIcon.svg" />
|
|
<text style="color: #999999;font-size: 28rpx;">搜索我的订单</text>
|
|
<!-- <input class="searchText" placeholder="搜索我的订单" confirm-type="search" v-modal="searchText"
|
|
/> -->
|
|
</view>
|
|
</view>
|
|
<!-- @confirm="handleSearchOrder" -->
|
|
|
|
<view class="tabTypeBox">
|
|
<view :class="selectBigTab === item.value ? 'bigTabItem selectBigTabItem' : 'bigTabItem'"
|
|
v-for="(item, index) in bigTabList" :key="index" @click="handleBigTab(item.value)">
|
|
{{ item.label }}
|
|
</view>
|
|
</view>
|
|
<view scroll-x class="smallTypeBox">
|
|
<view :class="currentTab === item.value ? 'smallTabItem selectSmallTabItem' : 'smallTabItem'"
|
|
v-for="(item, index) in tabList" :key="index" @click="handleTab(item.value)"
|
|
:style="{ background: item.value === 7 && selectBigTab === 3 ? 'transparent' : '' }">
|
|
<template v-if="item.value === 7 && selectBigTab === 3 ? false : true">
|
|
{{ item.label }}
|
|
<image v-if="currentTab === item.value" class="closeIcon"
|
|
src="https://eshangtech.com/caiyunyiImg/closeIcon.png" />
|
|
</template>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 订单列表 -->
|
|
<scroll-view :scroll-y="true" class="orderListBox"
|
|
:style="{ height: `calc(100vh - ${menu.bottom}px - 42px - 35px - 35px)` }" @scrolltolower="handleScrollTolower">
|
|
<view>
|
|
<!-- style="width:100% ;height: calc(100% - 30px);" -->
|
|
<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.GOODSList.slice(0, item.isShowMore ? item.GOODSList.length : 5)"
|
|
:key="subIndex">
|
|
<view class="orderItemCenterLeft" @click.stop="handleGoShopDetail(item, subIndex)">
|
|
<image class="orderItemShopImg"
|
|
:src="subItem.IMAGE_URL ? subItem.IMAGE_URL.split(',')[0] : 'https://eshangtech.com/ShopICO/no-picture.png'" />
|
|
</view>
|
|
<view class="orderItemCenterRight">
|
|
<view class="orderItemCenterRightLeft">
|
|
<view class="orderItemRightLeftLabel">{{ subItem.COMMODITY_NAME || "" }}</view>
|
|
<view class="orderItemRightLeftSpecifications"></view>
|
|
</view>
|
|
<view class="orderItemCenterRightRight">
|
|
<view class="unitPrice">¥{{ subItem.AVERAGE_PRICE || '-' }}</view>
|
|
<view class="orderItemQuantity">x{{ subItem.ORDER_COUNT || '-' }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<div v-if="item.GOODSList.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.GOODSList.length }}个品项
|
|
</div>
|
|
|
|
<!-- 实付款 -->
|
|
<view class="orderItemMoneyBox">
|
|
<span class="orderItemUnit">实付款：</span>
|
|
<span class="orderItemMoney">¥{{ item.PAY_AMOUNT || "" }}</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="handleInvoiceApplication(item)">开票申请</view> -->
|
|
<!-- <view class="orderItemBottomRightBuyAgain" @click.stop="handleGoStore">再次购买</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="inBottom" v-if="pageMsg.isOver">
|
|
<text class="bottomText">我是有底线的</text>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
|
|
|
|
<!-- 下面是老的 订单页面 -->
|
|
<!-- <div class="fliter">
|
|
<div class="tabs" v-if="searchType !== '6'">
|
|
<div class="tabs_item" :class="currentTab === item.value ? 'tab_active' : ''" v-for="(item, idx) in tabList"
|
|
:key="idx" @click="handleTab(item.value)">
|
|
{{ item.label }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sum_count" v-if="TotalCount > 0">
|
|
共<span>{{ TotalCount }}</span>笔订单, 合计<span>{{ TotalAmount }}</span>元
|
|
</div>
|
|
</div> -->
|
|
<!-- <scroll-view v-if="orderList && orderList.length > 0" class="srcollView" scroll-y="true" refresher-enabled="true"
|
|
@refresherrefresh="handleRefresherrefresh" :refresher-triggered="triggered" @scrolltolower="handleScrollTolower">
|
|
<div @click="goEvaluate(item)" v-for="(item, idx) in orderList" :key="idx">
|
|
<OrderItem :obj="item" @handleGetOrderList="handleGetTypeOrderList" />
|
|
</div>
|
|
<view class="inBottom">
|
|
<text class="bottomText">{{
|
|
pageMsg.isOver ? "我是有底线的" : "下拉加载更多"
|
|
}}</text>
|
|
</view>
|
|
</scroll-view>
|
|
<no-data text="暂无订单数据" v-else /> -->
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
import NoData from "../../../components/noData.vue";
|
|
import OrderItem from "./components/orderItem.vue";
|
|
export default {
|
|
data() {
|
|
return {
|
|
tabList: [
|
|
// {
|
|
// label: "全部订单",
|
|
// value: 1,
|
|
// },
|
|
{
|
|
label: "待付款",
|
|
value: 2,
|
|
},
|
|
{
|
|
label: "待发货",
|
|
value: 3,
|
|
},
|
|
{
|
|
label: "待收货",
|
|
value: 4,
|
|
},
|
|
{
|
|
label: "已完成",
|
|
value: 5,
|
|
},
|
|
{
|
|
label: "退/换货",
|
|
value: 7,
|
|
},
|
|
],
|
|
currentTab: 1,
|
|
orderList: [],
|
|
pageMsg: {
|
|
pageIndex: 1,
|
|
pageSize: 10,
|
|
isOver: false,
|
|
},
|
|
searchType: "",
|
|
pageType: "",
|
|
isFirst: true,
|
|
triggered: false,
|
|
menu: {},
|
|
bigTabList: [
|
|
{ label: "全部订单", value: 1 },
|
|
{ label: "彩云驿商城", value: 2 },
|
|
{ label: "工会商城", value: 3 },
|
|
],
|
|
selectBigTab: 1, // 选择的大tab
|
|
searchText: "",
|
|
currentListJSON: "",// 当前订单列表的JSON
|
|
};
|
|
},
|
|
components: {
|
|
OrderItem,
|
|
NoData,
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
user: "user",
|
|
}),
|
|
},
|
|
onLoad(query) {
|
|
this.menu = uni.getMenuButtonBoundingClientRect();
|
|
console.log("query", query);
|
|
if (query.type) {
|
|
this.searchType = query.type;
|
|
this.currentTab = Number(this.searchType) + 1;
|
|
}
|
|
if (query.pageType) {
|
|
this.pageType = query.pageType;
|
|
}
|
|
console.log("this.currentTab", this.currentTab);
|
|
let type =
|
|
this.currentTab === 1
|
|
? "1005,1010,2010,3000,8000,8010,8020,8900,8999,9000,9999"
|
|
: this.currentTab === 2
|
|
? "1005"
|
|
: this.currentTab === 3
|
|
? "1010,2000"
|
|
: this.currentTab === 4
|
|
? "2010"
|
|
: this.currentTab === 5
|
|
? "3000"
|
|
: this.currentTab === 7
|
|
? "8000,8010,8020,8900"
|
|
: "";
|
|
// 获取订单数据
|
|
this.handleGetOrderList(type);
|
|
|
|
// this.$utils.addUserBehaviorNew();
|
|
this.$utils.addUserBehaviorNew({
|
|
behaviorRecordDesc: "进入商城订单页面"
|
|
});
|
|
},
|
|
// 页面显示的时候调用一下 判断请求的结果JSON 和 新的结果 是否一致 不一致 就换成新的
|
|
onShow() {
|
|
if (this.isFirst) {
|
|
this.isFirst = false
|
|
} else {
|
|
let type =
|
|
this.currentTab === 1
|
|
? "1005,1010,2010,3000,8000,8010,8020,8900,8999,9000,9999"
|
|
: this.currentTab === 2
|
|
? "1005"
|
|
: this.currentTab === 3
|
|
? "1010,2000"
|
|
: this.currentTab === 4
|
|
? "2010"
|
|
: this.currentTab === 5
|
|
? "3000"
|
|
: this.currentTab === 7
|
|
? "8000,8010,8020,8900"
|
|
: "";
|
|
const req = {
|
|
action_type: "GetOrderList",
|
|
salebillType: this.searchType === "6" ?
|
|
this.selectBigTab === 1 ? '3001,3999' :
|
|
this.selectBigTab === 2 ? '3999' :
|
|
this.selectBigTab === 3 ? '3001' : ''
|
|
:
|
|
this.selectBigTab === 1 ? '3000,3001,3002' :
|
|
this.selectBigTab === 2 ? '3000,3002' :
|
|
this.selectBigTab === 3 ? '3001' : '',
|
|
salebillState: type || "",
|
|
PageIndex: 1,
|
|
pageSize: this.pageMsg.pageIndex * this.pageMsg.pageSize,
|
|
ownerUnitId: 911,
|
|
requestType: "application/x-www-form-urlencoded",
|
|
};
|
|
this.$api.postCoop(req).then(data => {
|
|
let list = data.Data ? data.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);
|
|
});
|
|
}
|
|
}
|
|
|
|
let newJSON = JSON.stringify(resList)
|
|
if (newJSON !== this.currentListJSON) {
|
|
this.orderList = resList
|
|
this.currentListJSON = newJSON
|
|
}
|
|
})
|
|
}
|
|
},
|
|
methods: {
|
|
// 开票申请
|
|
handleInvoiceApplication(obj) {
|
|
console.log('objdjkasd', JSON.parse(JSON.stringify(obj)));
|
|
// 处理一下 要传入订单的时间 且格式为 20250304160228 这种的
|
|
const date = new Date(obj.ORDER_DATE)
|
|
let y = date.getFullYear()
|
|
let m = date.getMonth() + 1
|
|
if (m < 10) {
|
|
m = '0' + m
|
|
}
|
|
let d = date.getDate()
|
|
let h = date.getHours()
|
|
let minutes = date.getMinutes()
|
|
let second = date.getSeconds()
|
|
let time = `${y}${m}${d}${h}${minutes}${second}`
|
|
|
|
uni.navigateTo({
|
|
url: `/pages/thirdPartyInvoice/index?time=${time}&orderAmount=${obj.ORDER_AMOUNT}&id=${obj.SALEBILL_ID}`
|
|
})
|
|
|
|
},
|
|
// 跳转订单搜索页面
|
|
handleGoOrderSearch() {
|
|
uni.navigateTo({
|
|
url: "/pages/order/orderSearch/index"
|
|
})
|
|
},
|
|
// 确认收获
|
|
handleConfirmReceipt(obj) {
|
|
console.log('obj', obj);
|
|
|
|
let _this = this
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确认已收货？',
|
|
success: async function (res) {
|
|
if (res.confirm) {
|
|
const req = {
|
|
action_type: "UpdateOrderState",
|
|
action_data: obj.SALEBILL_ID,
|
|
saleBillChildId: obj.SALEBILL_CHILD_ID || "",
|
|
SALEBILL_STATE: 3000,
|
|
}
|
|
const data = await _this.$api.getCoop(req)
|
|
console.log('data', data);
|
|
if (data.error !== 1) {
|
|
uni.showToast({
|
|
title: data.msg,
|
|
icon: 'none'
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: "收货成功！",
|
|
icon: 'none'
|
|
})
|
|
let type =
|
|
this.currentTab === 1
|
|
? "1005,1010,2010,3000,8000,8010,8020,8900,8999,9000,9999"
|
|
: this.currentTab === 2
|
|
? "1005"
|
|
: this.currentTab === 3
|
|
? "1010,2000"
|
|
: this.currentTab === 4
|
|
? "2010"
|
|
: this.currentTab === 5
|
|
? "3000"
|
|
: this.currentTab === 7
|
|
? "8000,8010,8020,8900"
|
|
: "";
|
|
_this.handleGetOrderList(type);
|
|
}
|
|
|
|
} else if (res.cancel) {
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 点击展开更多商品
|
|
handleClickShowMoreShop(obj) {
|
|
console.log('obj', obj);
|
|
obj.isShowMore = !obj.isShowMore
|
|
this.$forceUpdate()
|
|
},
|
|
// 点击再次跳转 工会商城 或 彩云驿商城
|
|
handleGoStore() {
|
|
|
|
},
|
|
// 返回上个页面
|
|
handleBack() {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
});
|
|
},
|
|
// 大tab切换
|
|
handleBigTab(val) {
|
|
this.selectBigTab = val
|
|
console.log('this.currentTab', this.currentTab);
|
|
|
|
if (val === 3 && this.currentTab === 7) {
|
|
this.currentTab = 2
|
|
}
|
|
console.log('this.selectBigTab', this.selectBigTab);
|
|
|
|
this.orderList = []
|
|
this.pageMsg = {
|
|
pageIndex: 1,
|
|
pageSize: 10,
|
|
isOver: false,
|
|
}
|
|
let type =
|
|
this.currentTab === 1
|
|
? "1005,1010,2010,3000,8000,8010,8020,8900,8999,9000,9999"
|
|
: this.currentTab === 2
|
|
? "1005"
|
|
: this.currentTab === 3
|
|
? "1010,2000"
|
|
: this.currentTab === 4
|
|
? "2010"
|
|
: this.currentTab === 5
|
|
? "3000"
|
|
: this.currentTab === 7
|
|
? "8000,8010,8020,8900"
|
|
: "";
|
|
this.handleGetOrderList(type);
|
|
this.$forceUpdate()
|
|
},
|
|
// 滚动到底部 加载更多
|
|
handleScrollTolower() {
|
|
this.pageMsg.pageIndex = this.pageMsg.pageIndex + 1;
|
|
let type =
|
|
this.currentTab === 1
|
|
? "1005,1010,2010,3000,8000,8010,8020,8900,8999,9000,9999"
|
|
: this.currentTab === 2
|
|
? "1005"
|
|
: this.currentTab === 3
|
|
? "1010,2000"
|
|
: this.currentTab === 4
|
|
? "2010"
|
|
: this.currentTab === 5
|
|
? "3000"
|
|
: this.currentTab === 7
|
|
? "8000,8010,8020,8900"
|
|
: "";
|
|
this.handleGetOrderList(type);
|
|
},
|
|
handleTab(val) {
|
|
if (this.selectBigTab === 3 && val === 7) {
|
|
this.currentTab = 2
|
|
}
|
|
|
|
|
|
this.pageMsg = {
|
|
pageIndex: 1,
|
|
pageSize: 10,
|
|
isOver: false,
|
|
};
|
|
|
|
if (this.currentTab === val) {
|
|
this.currentTab = ""
|
|
} else {
|
|
this.currentTab = val;
|
|
}
|
|
|
|
this.orderList = [];
|
|
let type =
|
|
this.currentTab === 1
|
|
? "1005,1010,2010,3000,8000,8010,8020,8900,8999,9000,9999"
|
|
: this.currentTab === 2
|
|
? "1005"
|
|
: this.currentTab === 3
|
|
? "1010,2000"
|
|
: this.currentTab === 4
|
|
? "2010"
|
|
: this.currentTab === 5
|
|
? "3000"
|
|
: this.currentTab === 7
|
|
? "8000,8010,8020,8900"
|
|
: "";
|
|
this.handleGetOrderList(type);
|
|
},
|
|
// 下拉刷新的方法
|
|
async handleRefresherrefresh() {
|
|
this.orderList = [];
|
|
this.pageMsg = {
|
|
pageIndex: 1,
|
|
pageSize: 10,
|
|
isOver: false,
|
|
};
|
|
this.triggered = true;
|
|
let type =
|
|
this.currentTab === 1
|
|
? "1005,1010,2010,3000,8000,8010,8020,8900,8999,9000,9999"
|
|
: this.currentTab === 2
|
|
? "1005"
|
|
: this.currentTab === 3
|
|
? "1010,2000"
|
|
: this.currentTab === 4
|
|
? "2010"
|
|
: this.currentTab === 5
|
|
? "3000"
|
|
: this.currentTab === 7
|
|
? "8000,8010,8020,8900"
|
|
: "";
|
|
await this.handleGetOrderList(type);
|
|
this.triggered = false;
|
|
},
|
|
// 没传类型的方法
|
|
async handleGetTypeOrderList() {
|
|
let type =
|
|
this.currentTab === 1
|
|
? "1005,1010,2010,3000,8000,8010,8020,8900,8999,9000,9999"
|
|
: this.currentTab === 2
|
|
? "1005"
|
|
: this.currentTab === 3
|
|
? "1010,2000"
|
|
: this.currentTab === 4
|
|
? "2010"
|
|
: this.currentTab === 5
|
|
? "3000"
|
|
: this.currentTab === 7
|
|
? "8000,8010,8020,8900"
|
|
: "";
|
|
await this.handleGetOrderList(type);
|
|
},
|
|
// 获取订单数据
|
|
async handleGetOrderList(status) {
|
|
if (this.pageMsg.isOver) {
|
|
return;
|
|
}
|
|
uni.showLoading({
|
|
title: "正在加载...",
|
|
mask: true,
|
|
});
|
|
const req = {
|
|
action_type: "GetOrderList",
|
|
salebillType: this.searchType === "6" ?
|
|
this.selectBigTab === 1 ? '3001,3999' :
|
|
this.selectBigTab === 2 ? '3999' :
|
|
this.selectBigTab === 3 ? '3001' : ''
|
|
:
|
|
this.selectBigTab === 1 ? '3000,3001,3002' :
|
|
this.selectBigTab === 2 ? '3000,3002' :
|
|
this.selectBigTab === 3 ? '3001' : '',
|
|
salebillState: status || "",
|
|
// salebillType:
|
|
// this.searchType === "6"
|
|
// ? this.pageType === "UnionMall"
|
|
// ? 3001
|
|
// : 3999
|
|
// : this.pageType === "UnionMall"
|
|
// ? 3001
|
|
// : "3000,3002",
|
|
// salebillState: this.searchType === "6" ? "" : status || "",
|
|
PageIndex: this.pageMsg.pageIndex,
|
|
pageSize: this.pageMsg.pageSize,
|
|
ownerUnitId: 911,
|
|
requestType: "application/x-www-form-urlencoded",
|
|
};
|
|
const data = await this.$api.postCoop(req);
|
|
console.log("data", data);
|
|
let oldOrderList = [];
|
|
if (this.orderList && this.orderList.length > 0) {
|
|
oldOrderList = JSON.parse(JSON.stringify(this.orderList));
|
|
}
|
|
console.log("oldOrderList", oldOrderList);
|
|
// 手动添加待付款、待发货、待收货
|
|
let list = data.Data ? data.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.$forceUpdate()
|
|
}
|
|
this.orderList = oldOrderList.concat(resList);
|
|
this.currentListJSON = JSON.stringify(this.orderList)
|
|
console.log("获取订单数据2", this.orderList);
|
|
uni.hideLoading();
|
|
},
|
|
goEvaluate(item) {
|
|
console.log("item", item);
|
|
uni.navigateTo({
|
|
url:
|
|
"/pages/order/orderdetail/index?sellchildid=" +
|
|
(item.SALEBILL_CHILD_ID || "") +
|
|
"&orderInternal=" +
|
|
item.SALEBILL_ID +
|
|
"&orderStatus=" +
|
|
item.SALEBILL_STATE +
|
|
"&SUPPLIER_NAME=" +
|
|
item.SUPPLIER_NAME,
|
|
});
|
|
},
|
|
handleGoShopDetail(item, index) {
|
|
let obj = item.GOODSList[index]
|
|
uni.navigateTo({
|
|
url: `/pages/shopPages/shopDetail/index?id=${obj.COMMODITY_ID}`,
|
|
});
|
|
}
|
|
},
|
|
};
|
|
</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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabTypeBox {
|
|
width: 100%;
|
|
height: 30px;
|
|
box-sizing: border-box;
|
|
padding: 0 40rpx;
|
|
margin-top: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.bigTabItem {
|
|
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;
|
|
margin-right: 56rpx;
|
|
}
|
|
|
|
.selectBigTabItem {
|
|
color: #F83D3D;
|
|
position: relative;
|
|
}
|
|
|
|
.selectBigTabItem::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
bottom: -12rpx;
|
|
left: 50%;
|
|
width: 48rpx;
|
|
height: 6rpx;
|
|
background: #F83D3D;
|
|
border-radius: 2rpx;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.smallTypeBox {
|
|
width: 100%;
|
|
height: 32px;
|
|
margin-top: 22rpx;
|
|
box-sizing: border-box;
|
|
padding: 0 42rpx 0 30rpx;
|
|
white-space: nowrap;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
/* Firefox */
|
|
-ms-overflow-style: none;
|
|
/* IE and Edge */
|
|
scroll-behavior: smooth;
|
|
-webkit-overflow-scrolling: touch;
|
|
/* 增强移动端滚动体验 */
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
/* Chrome, Safari, Opera */
|
|
}
|
|
|
|
.smallTabItem {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
box-sizing: border-box;
|
|
padding: 8rpx 24rpx;
|
|
background-color: #fff;
|
|
display: inline-block;
|
|
border-radius: 8rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.selectSmallTabItem {
|
|
border: 1px solid #F83D3D;
|
|
box-sizing: border-box;
|
|
border-radius: 8rpx;
|
|
color: #F83D3D;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
background-color: rgba(248, 61, 61, 0.1);
|
|
padding: 6rpx 2rpx 6rpx 12rpx;
|
|
|
|
.closeIcon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: 24rpx;
|
|
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: 160rpx;
|
|
height: 160rpx;
|
|
margin-right: 12rpx;
|
|
|
|
.orderItemShopImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 16rpx;
|
|
}
|
|
}
|
|
|
|
.orderItemCenterRight {
|
|
width: calc(100% - 160rpx - 12rpx);
|
|
height: 160rpx;
|
|
display: flex;
|
|
|
|
.orderItemCenterRightLeft {
|
|
width: calc(100% - 180rpx);
|
|
|
|
.orderItemRightLeftLabel {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
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: 24rpx;
|
|
color: #333333;
|
|
line-height: 34rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
.orderItemQuantity {
|
|
font-family: AppleSystemUIFont;
|
|
font-size: 24rpx;
|
|
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: 24rpx;
|
|
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%;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.fliter {
|
|
background: #fff;
|
|
margin-bottom: 24rpx;
|
|
|
|
.select_box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 16rpx 32rpx 8rpx;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.search_box {
|
|
width: 558rpx;
|
|
height: 72rpx;
|
|
background: #f2f4f5;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
border-radius: 36rpx;
|
|
|
|
img {
|
|
width: 35rpx;
|
|
height: 35rpx;
|
|
margin: auto 16rpx auto 24rpx;
|
|
}
|
|
|
|
.select_input {
|
|
width: 476rpx;
|
|
border: none;
|
|
height: 40rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.select_btn {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: #6c737a;
|
|
|
|
img {
|
|
width: 35rpx;
|
|
height: 35rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabs {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
display: flex;
|
|
|
|
.tabs_item {
|
|
text-align: center;
|
|
color: #6c737a;
|
|
font-size: 28rpx;
|
|
line-height: 88rpx;
|
|
flex: 1;
|
|
}
|
|
|
|
.tab_active {
|
|
color: #1890ff;
|
|
font-weight: 600;
|
|
position: relative;
|
|
}
|
|
|
|
.tab_active:after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 2rpx;
|
|
left: 50%;
|
|
margin-left: -24rpx;
|
|
width: 48rpx;
|
|
height: 6rpx;
|
|
background: #1890ff;
|
|
border-radius: 2rpx;
|
|
}
|
|
}
|
|
|
|
.sum_count {
|
|
height: 72rpx;
|
|
background: #fff;
|
|
border-radius: 2rpx;
|
|
padding-left: 32rpx;
|
|
line-height: 72rpx;
|
|
font-size: 28rpx;
|
|
color: #6c737a;
|
|
border-top: 2rpx solid #f2f4f5;
|
|
|
|
span {
|
|
color: #020e1a;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
}
|
|
|
|
|
|
// .srcollView {
|
|
// width: 100%;
|
|
// height: calc(100vh - 160rpx);
|
|
|
|
// .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> |