xinyongguanlishi/pages/index/index.vue

<template>
	<view class="content">
		<view class="head_bgs">
			<view class="text-xl text-bold text-white u-margin-right-10">
				订单列表
			</view>
			<u-icon name="list-dot" color="#fff" size="45"></u-icon>
		</view>
		<u-tabs :list="list" active-color="#F1C453" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="list_container">
			<view @click.stop="orderInfo(item.id)" class="list_item margin-lr-sm u-margin-top-30"
				v-for="(item,index) in listItem" :key="index">
				<view class="order-num u-font-28 u-padding-bottom-10 u-border-bottom" style="color:#909399;">
					订单号：{{item.orders.order_sn}}
				</view>
				<view class="order-num u-margin-top-15 flex align-center u-padding-bottom-10 u-border-bottom">
					<u-avatar :src="item.users.avatar" size="100"></u-avatar>
					<view class="u-margin-left-20 flex-sub" style="color: #505559;">
						<view class="u-font-28" v-if="item.type==2">
							评估类型：企业信用问题咨询
						</view>
						<view class="u-font-28" v-else>
							评估类型：个人信用问题咨询
						</view>
						<view class="u-font-28">
							评估用户：{{item.users.realname}}
						</view>
						<view class="u-font-28">
							咨询项目个数：{{item.project_num}}
						</view>
						<view class="u-font-28 flex justify-between">
							<text>咨询总金额：{{item.price/100}}</text>
							<text class="u-font-30" style="color: #F1C453;">佣金：{{item.commission/100}}元</text>
						</view>
					</view>
				</view>
				<view class="u-margin-top-15 flex align-center justify-between">
					<view class="u-font-26" style="color: #909399;">
						联系电话：{{item.users.phone}}
					</view>
					<!-- <view class="flex align-center" v-if="item.status == 0">
						<button hover-class="none" @click.stop="tipsOrder(item.id,4,index)"
							class="left_btn u-margin-right-10">拒接</button>
						<button style="color: #fff;background: #F1C453;border-color: #F1C453;" hover-class="none"
							class="left_btn" @click.stop="tipsOrder(item.id,1,index)">接单</button>
					</view> -->
					<!-- <view class="flex align-center" v-else-if="item.status == 1">
						<button style="color: #fff;background: #0CBB07;border-color: #0CBB07;"
							@click.stop="tipsOrder(item.id,2,index)" hover-class="none" class="left_btn">提交订单</button>
					</view> -->
					<button style="color: #fff;background: #F1C453;border-color: #F1C453;margin: 0;"
						v-if="item.status == 0||item.status == 1" hover-class="none" class="left_btn"
						@click.stop="orderInfo(item.id)">查看详情</button>
					<view class="flex align-center" v-if="item.status == 2">
						<text
							class="text-red">审核状态：{{item.verify_status == 0?'待审核':item.verify_status == 1?'审核通过':'审核失败'}}</text>
					</view>
					<view class="flex align-center" v-else-if="item.status == 3">
						<text class="text-green">已完成</text>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :loadingType="loadingType" :contentText="contentText" />
		<!-- <view class="cu-tabbar-height"></view>
		<view class="cu-tabbar-height"></view> -->
	</view>
</template>

<script>
	import {
		baseUrl,
		callurl
	} from '@/common/env.js'
	import util from '@/common/util.js'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '待接单'
				}, {
					name: '进行中',
				}, {
					name: '已提交',
				}, {
					name: '已完成',
				}],
				current: 0,
				loadingType: 0,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				indexPage: 1,
				listItem: []
			}
		},
		async onShow() {
			let res = await this.$u.post("manager/managerInfo")
			if (res.code == 200) {
				if (this.$u.test.isEmpty(res.data.web_openid) && util.is_weixin() && this.vuex_hasLogin) {
					window.location.href = baseUrl + '/common/wxManagerAuthorize?callback=' + callurl + res.data.id
				}
				this.$u.vuex("vuex_user", res.data)
			}
			this.indexPage = 1
			this.listItem = []
			this.getUserItem()
		},
		onReachBottom() {
			if (this.loadingType !== 0) {
				return;
			}
			this.loadingType = 1;
			this.getUserItem();
		},
		methods: {
			orderInfo(id) {
				uni.navigateTo({
					url: './orderInfo?id=' + id
				})
			},
			tipsOrder(id, status, index) {
				if (this.vuex_user.is_auth == 1 || this.vuex_user.is_auth == 0) {
					uni.showToast({
						title: "请先进行身份认证",
						icon: "none"
					})
					return false
				}
				let str = ''
				switch (status) {
					case 1:
						str = '是否接取该订单'
						break;
					case 4:
						str = '是否拒接该订单'
						break;
					case 2:
						str = '是否提交该订单'
						break;
					default:
						break;
				}
				uni.showModal({
					title: "温馨提示",
					content: str,
					success: (res) => {
						if (res.confirm) {
							this.updateOrder(id, status, index)
						}
					}
				})
			},
			async updateOrder(id, status, index) {
				let data = await this.$u.post('managerOrder/updateOrder', {
					id,
					status
				})
				if (data.code == 200) {
					if (this.current == 0) {
						if (status == 4) {
							this.listItem.splice(index, 1)
						} else {
							this.listItem[index].status = status
						}
					} else {
						this.listItem.splice(index, 1)
					}

				} else {
					uni.showToast({
						title: res.message,
						icon: "none"
					})
					return false
				}
			},
			change(index) {
				this.indexPage = 1
				this.listItem = []
				this.current = index;
				this.getUserItem()
			},
			async getUserItem() {
				let num = this.current
				let res = await this.$u.post("managerOrder/orderList", {
					page: this.indexPage,
					status: num - 1
				})
				if (res.code == 200) {
					this.listItem = this.listItem.concat(res.data.data)
					this.indexPage++
					if (res.data.current_page == res.data.last_page) {
						this.loadingType = 2;
					} else {
						this.loadingType = 0;
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: res.message
					});
					this.loadingType = 0;
				}
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
	}

	.head_bgs {
		background: #F1C453;
		height: 100rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.list_container {
		/* margin-top: 20rpx; */
	}

	.list_item {
		padding: 20rpx;
		border-radius: 16rpx;
		box-shadow: 6rpx 6rpx 10rpx rgba(122, 122, 122, 0.2);
		background: #fff;
	}

	.order-num::after {
		border-color: #bbb;
	}

	button::after {
		display: none;
	}

	.left_btn {
		padding: 0;
		color: #909399;
		border: 2rpx solid rgba(144, 147, 153, .5);
		border-radius: 8rpx;
		width: 124rpx;
		height: 44rpx;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
	}
</style>