You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
yanzong_qianduan/pages/news/recycling/recoveryList.vue

622 lines
13 KiB

<template>
<view>
<view class="head-info">
<!-- 搜索 -->
<view class="searchContent">
<u-input v-model="order_no" placeholder="输入订单编号" />
<u-icon name="search" @click="getOrderList(1)" class="search"></u-icon>
</view>
</view>
<!-- 分类列表 -->
<view class="container">
<view class="classify-list">
<view class="list" :class="{'action':classifyShow == -1}" @click="onClassify(-1)">
<text>全部</text>
<text class="line" v-show="classifyShow == -1"></text>
</view>
<view class="list" v-for="(item,index) in classList" :class="{'action':classifyShow==index}"
@click="onClassify(index)" :key="index">
<text>{{item.name}}</text>
<text class="line" v-show="classifyShow==index"></text>
</view>
</view>
</view>
<view class="shopContent">
<view class="shopItem" v-for="(item,index) in goodsList" :key="index" @click="openPage(2,index,item)">
<view class="orderInfo">
<text>订单号:{{item.order_no}}</text>
<text class="statusText" style="color: #FF6813;">{{item.order_status_text}}</text>
</view>
<view class="shopItemInfo">
<image :src="item.recovery_image"></image>
<view class="priceCon">
<view class="a">名称:{{item.recovery_name}}</view>
<view class="a" v-if="item.brand">品牌:{{item.brand}}</view>
<view class="b">
<text class="num"></text>
<view class="priceText">
<text style="font-size: 26upx;">¥</text>
<text>{{item.expect_price}}</text>
</view>
</view>
</view>
</view>
<view class="remark">
<view class="remarkTitle">
联系电话:{{item.mobile}}
</view>
<view class="remarkContent" v-if="item.remake">
{{item.remake}}
</view>
</view>
<view class="btnGroup">
<view class="btn info" v-if="item.order_status == 10" @click.stop="openPage(3,index,item)">修改订单
</view>
<view class="btn info" v-if="item.order_status == 10" @click.stop="openPage(1,index,item)">取消订单
</view>
<view class="btn info" style="width: 120rpx;" v-if="item.order_status == 20&&userInfo.user_type == 40"
@click.stop="openPage(4,index,item)">完成</view>
<view class="btn info" style="width: 120rpx;"
v-if="item.order_status == 10&&userInfo.user_type == 40" @click.stop="openPage(5,index,item)">
{{item.recovery_type==30?'收货':'验收'}}
</view>
<view class="btn info" style="width: 120rpx;"
v-if="item.order_status == 10&&userInfo.user_type != 40" @click.stop="openPage(5,index,item)">验收
</view>
<view class="btn info" style="width: 120rpx;"
v-if="item.order_status == 20&&userInfo.user_type !=40" @click.stop="openPage(6,index,item)">收款
</view>
<!-- <view class="btn info" style="width: 120rpx;"
v-if="item.order_status == 10&&userInfo.user_type ==40" @click.stop="openPage(7,index,item)">收货
</view> -->
</view>
</view>
</view>
<view style="margin-top: 260rpx;">
<u-empty text="暂无信息" v-if="total == 0" mode="list"></u-empty>
</view>
</view>
</template>
<script>
import * as newFunApi from '@/api/newFun'
export default {
data() {
return {
searchText: '',
classifyShow: -1,
classList: [],
goodsList: [],
sourceIndex: 0,
payIndex: 0,
startTime: null,
endTime: null,
total: 1,
order_no: "",
pageNum: 1,
userInfo: '',
}
},
onLoad(o) {
this.userInfo = uni.getStorageSync('userInfo')
if (o.type) {
this.classifyShow = o.type
}
},
onShow() {
this.getList(1);
},
onPullDownRefresh() {
this.pageNum = 1;
this.getOrderList = [];
this.getList();
setTimeout(() => {
uni.stopPullDownRefresh();
}, 1000)
},
onReachBottom() {
if (this.goodsList.length <= this.total) {
this.pageNum++;
this.getOrderList();
}
},
methods: {
openPage(i, index, a) {
const that = this;
if (i == 1) {
uni.showModal({
title: "温馨提示",
content: "是否取消该订单?",
confirmColor: "#F21A1C",
complete(res) {
if (res.confirm) {
that.toDel(index, a.order_id);
}
}
})
}
if (i == 2) {
uni.navigateTo({
url: '/pages/news/recycling/order?recovery_id=' + a.recovery_id + '&order_id=' + a.order_id
})
}
if (i == 3) {
uni.navigateTo({
url: '/pages/news/recycling/confirm1?order_id=' + a.order_id + '&tabIndex=' + (a
.recovery_type == 10 ? 1 : a.recovery_type == 20 ? 0 : 2) + '&source=2'
})
}
if (i == 4) {
uni.showModal({
title: "温馨提示",
content: "是否完成该订单?",
confirmColor: "#F21A1C",
complete(res) {
if (res.confirm) {
that.toCheck(index, a.order_id, 40, a.recovery_id);
}
}
})
}
// 店长验收
if (i == 5) {
uni.showModal({
title: "温馨提示",
content: "是否验收该订单?",
confirmColor: "#F21A1C",
complete(res) {
if (res.confirm) {
that.toCheck(index, a.order_id, 20, a.recovery_id);
}
}
})
}
// 用户确认收款
if (i == 6) {
uni.showModal({
title: "温馨提示",
content: "是否确认收款?",
confirmColor: "#F21A1C",
complete(res) {
if (res.confirm) {
that.toCheck(index, a.order_id, 40, a.recovery_id);
}
}
})
}
// 店长收货
if (i == 7) {
uni.showModal({
title: "温馨提示",
content: "是否确认收货?",
confirmColor: "#F21A1C",
complete(res) {
if (res.confirm) {
that.toCheck(index, a.order_id, 40, a.recovery_id);
}
}
})
}
},
async toCheck(index, order_id, stat, recovery_id) {
const {
status,
message,
data
} = await newFunApi.updateOrderStatus({
order_id: order_id,
status: stat,
recovery_id: recovery_id
});
if (status == 200) {
uni.showToast({
title: "操作成功"
})
this.classifyShow = stat == 40 ? 2 : 1
this.pageNum = 1;
this.goodsList = []
this.getOrderList(1)
}
},
//完成订单
async toComplete(index, order_id) {
const {
status,
message,
data
} = await newFunApi.completeOrder({
order_id
});
if (status == 200) {
uni.showToast({
title: "完成成功"
})
this.classifyShow = 2
this.pageNum = 1;
this.goodsList = []
this.getOrderList(1)
}
},
//取消订单
async toDel(index, order_id) {
const {
status,
message,
data
} = await newFunApi.cancelOrder({
order_id
});
if (status == 200) {
uni.showToast({
title: "取消成功"
})
this.pageNum = 1;
this.goodsList = []
this.classifyShow = 3
this.getOrderList(1)
}
},
/**
* 获取列表
*/
async getList() {
let {
status,
message,
data
} = await newFunApi.orderStatus({});
if (status == 200) {
this.classList = data.list
this.pageNum = 1;
this.goodsList = []
this.getOrderList();
}
},
/**
* 获取商品列表
*/
async getOrderList(type) {
uni.showLoading({
title: "加载中"
})
if (type == 1) {
this.pageNum = 1;
this.goodsList = []
}
let {
status,
message,
data
} = await newFunApi.orderList({
order_no: this.order_no,
page: this.pageNum,
order_status: (this.classList.length > 0) ? (this.classifyShow >= 0 ? this.classList[this
.classifyShow].value : '') : ""
});
if (status == 200) {
uni.hideLoading();
this.goodsList = this.goodsList.concat(data.list)
this.total = data.total
}
},
onClassify(index) {
this.classifyShow = index;
this.pageNum = 1;
this.goodsList = []
this.getOrderList();
},
}
};
</script>
<style scoped lang="scss">
page {
background-color: #F7F8FA;
min-height: 100%;
}
.nolist {
width: 100%;
display: block;
margin: 0 auto;
text-align: center;
padding: 150rpx 50rpx;
image {
width: 388rpx;
height: 378rpx;
}
.txt {
font-size: 32rpx;
margin-top: 20rpx;
font-weight: 500;
color: #fff;
}
}
.head-info {
padding: 22upx 20upx;
.searchContent {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding: 0 30rpx;
box-sizing: border-box;
width: 100%;
background-color: #fff;
border-radius: 80rpx;
::v-deep .uni-input-placeholder {
margin-left: 20upx;
z-index: 10;
}
input {
margin-left: 60rpx;
flex: 1;
}
.search {
position: absolute;
top: 20upx;
left: 26upx;
z-index: 9;
}
::v-deep .u-input {
flex: 1;
width: 500rpx;
margin-left: 40upx;
}
::v-deep .uni-input-input {
background: #FFFFFF;
border-radius: 30px 30px 30px 30px;
opacity: 1;
padding-left: 20upx;
width: calc(100% - 80upx);
}
.filter {
display: flex;
width: 100upx;
flex-direction: column;
align-items: center;
justify-content: center;
image {
width: 34upx;
height: auto;
}
text {
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #616161;
}
}
}
}
.container {
background-color: #fff;
}
.classify-list {
white-space: nowrap;
width: 100%;
height: 100rpx;
overflow-x: auto;
overflow-y: hidden;
.list {
position: relative;
display: inline-block;
width: 20%;
height: 100%;
line-height: 100rpx;
text-align: center;
text {
font-size: 28rpx;
color: #3B3B3B;
}
.line {
position: absolute;
left: 50%;
bottom: 10rpx;
// width: 60%;
// height: 8rpx;
background: linear-gradient(to right, #f8f893, #fe9d00);
// border-radius: 10rpx;
transform: translate(-50%, 0);
width: 60upx;
height: 8upx;
background: #FF6257;
border-radius: 29px 29px 29px 29px;
opacity: 1;
}
}
.action {
text {
font-size: 32rpx;
opacity: 1;
}
}
}
.shopContent {
overflow: hidden;
.shopItem {
margin-bottom: 14upx;
padding: 36upx;
background-color: #fff;
.orderInfo {
display: flex;
align-items: center;
justify-content: space-between;
text {
font-size: 28upx;
color: #707070;
}
}
.shopItemInfo {
display: flex;
margin-top: 40upx;
image {
width: 180upx;
height: 180upx;
flex-shrink: 0;
}
.priceCon {
flex: 1;
overflow: hidden;
.a {
font-size: 28rpx;
font-weight: 500;
height: 50rpx;
color: #3B3B3B;
overflow: hidden;
margin-left: 40upx;
}
.b {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-left: 40upx;
margin-top: 40rpx;
}
.num {
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #1E1E1E;
}
.priceText {
display: flex;
align-items: center;
text {
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #F21A1C;
font-weight: bold;
}
}
}
}
.totalNum {
text-align: right;
margin-top: 70upx;
text:first-child {
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #B7B7B7;
}
text:nth-child(2) {
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
margin: 0 10upx;
}
text:nth-child(3) {
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #F21A1C;
}
}
.remark {
background: #F8F8F8;
border-radius: 0px 0px 0px 0px;
opacity: 1;
padding: 20upx;
margin-top: 20upx;
.remarkTitle {
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #3B3B3B;
}
.remarkContent {
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #939393;
margin-top: 8upx;
}
}
.btnGroup {
display: flex;
margin-top: 28upx;
flex-wrap: wrap;
justify-content: flex-end;
.btn {
width: 160upx;
height: 56upx;
background: #FFFFFF;
border-radius: 50px 50px 50px 50px;
opacity: 1;
font-size: 14px;
line-height: 56upx;
text-align: center;
margin-left: 12upx;
}
.info {
border: 1px solid #9F9F9F;
color: #8B8B8B;
}
.primary {
border: 1px solid #F63116;
color: #F83F11;
}
}
}
}
</style>