bjhedasx/webcode/uni-app/pages/expertCenter/orderList.vue

<template>
	<view class="page">
		<view class="pageMain">
			<view class="tabBox flex">
				<view class="eveTab" :class="index == tabIndex ? 'text-28 text-bold text-2f9' : 'text-33 text-26'"
					v-for="(item,index) in tabs" :key="index" @click="changeTab(index)">
					{{item}}
					<view class="tabLine" v-if="index == tabIndex"></view>
				</view>
			</view>
			<view class="listBox">
				<ty-list-list :status="load_status">
					<view class="padding-top-20 padding-bottom-30 padding-lr-30 border-bottom-f5"
						v-for="(item,index) in list" :key="index">
						<view class="" @click="go('/pages/expertCenter/orderDetail?id=' + item.id)">
							<view class="flex justify-between align-center">
								<view class="flex align-center">
									<view class="tyIcon-dingdanhaochaxun text-33 text-28 margin-right-5"></view>
									<view class="text-33 text-24">{{item.order_number}}</view>
								</view>
								<view class="text-26 line-40 text-2f9 position-relative">
									<text>{{item.status_text}}</text>
									<view class="circle" v-if="item.is_answer == 1"></view>
								</view>
							</view>
							<view class="margin-top-20 flex align-center">
								<view class="headerImg">
									<image :src="item.head_img" class="width-100p height-100p block" mode="aspectFill">
									</image>
								</view>
								<view class="margin-left-10 text-26 text-33 line-50">{{item.nick_name}}</view>
							</view>
							<view class="margin-top-20 line-40 text-cut-two">
								<text class="text-28 text-aa">咨询内容：</text>
								<text class="text-28 text-33 text-cut-two">{{item.ask_content}}</text>
							</view>
						</view>
						<view class="margin-top-30 flex justify-end">
							<!-- 进行中 -->
							<block v-if="item.status == 2">
								<view class="btn1" @click.stop="tapRefund(item.id)">退款</view>
								<picker class="margin-left-20" :range="answerWays" range-key="name"
									@change="chooseAnswerWay" :data-id="item.id">
									<view class="btn2 ">去解答</view>
								</picker>

							</block>
							<!-- 待评价 -->
							<block v-if="item.status == 3">
								<view class="btn1" @click.stop="tapDel(item.id)">删除订单</view>
								<view class="btn2 margin-left-20" @click.stop="tapRefund(item.id)"
									v-if="item.is_refund == 1">退款</view>
							</block>
							<!-- 已完成 -->
							<block v-if="item.status == 4">
								<view class="btn1" @click.stop="tapDel(item.id)">删除订单</view>
								<view class="btn1 margin-left-20" @click.stop="tapRefund(item.id)"
									v-if="item.is_refund == 1">退款</view>
								<view class="btn2 margin-left-20"
									@click.stop="go('/pages/expertCenter/reply?oid=' + item.id)"
									v-if="item.is_reply == 1">回复评论</view>
							</block>
							<!-- 已退款 -->
							<block v-if="item.status == 4">
								<view class="btn1" @click.stop="tapDel(item.id)">删除订单</view>
							</block>
						</view>
					</view>
				</ty-list-list>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['全部', '进行中', '待评价', '已完成'],
				tabIndex: 0,
				// 解答
				answerWays: [{
					id: 1,
					name: '文本解答'
				}, {
					id: 2,
					name: '语音解答'
				}, {
					id: 3,
					name: '图片解答'
				}, {
					id: 4,
					name: '视频解答'
				}, {
					id: 5,
					name: '资料解答'
				}],
				answerId: '',
				load_status: '',
				list: [],
			}
		},

		onShow() {
			this.loadList(1)
		},
		onReachBottom() {
			this.loadList(2)
		},
		methods: {
			changeTab(i) {
				if (this.tabIndex == i) {
					return;
				} else {
					this.tabIndex = i;
					this.loadList(1)
				}
			},
			loadList(first_page) {
				this.rq.getList('fire/api/Expert/expertOrderList', {
					index: this.tabIndex
				}, {
					that: this,
					first_page
				})
			},
			// 去解答
			chooseAnswerWay(e) {
				console.log(9444, e)
				this.answerId = e.currentTarget.dataset.id;
				var i = e.detail.value;
				setTimeout(()=>{
					uni.navigateTo({
						url: '/pages/expertCenter/orderAnswer?type=' + this.answerWays[i].id + '&oid=' + this.answerId
					})
				},100)
			},
			// 退款
			tapRefund(id) {
				this.cn.confirm('确认退款吗?').then(r => {
					if (r.confirm) {
						this.rq.getData('fire/api/Expert/expertRefundOrder', {
							order_id: id
						}).then(res => {
							if (res.code == 0) {
								this.loadList(1)
							}
						})
					}
				})
			},
			// 删除
			tapDel(id) {
				this.cn.confirm('确认删除吗?').then(r => {
					if (r.confirm) {
						this.rq.getData('fire/api/Expert/expertDeleteOrder', {
							order_id: id
						}).then(res => {
							if (res.code == 0) {
								this.loadList(1)
							}
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.pageMain {
		width: 100vw;
		padding-top: 105rpx;
	}

	.tabBox {
		position: fixed;
		top: 0;
		width: 100vw;
		left: 0;
		background: #fff;
		z-index: 10;
	}

	.eveTab {
		flex: 1;
		line-height: 90rpx;
		height: 90rpx;
		text-align: center;
		position: relative;
	}

	.tabLine {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 20rpx;
		width: 40rpx;
		height: 4rpx;
		background: #2F97FF;
		margin: 0 auto;
	}

	.listBox {
		width: 100vw;
		background: #fff;
		min-height: calc(100vh - 105rpx);
		padding-bottom: calc(35rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.circle {
		width: 14rpx;
		height: 14rpx;
		background: #FF8534;
		border-radius: 50%;
		position: absolute;
		top: 0;
		right: -14rpx;
	}

	.headerImg {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.btn1,
	.btn2 {
		padding: 12rpx 0;
		width: 180rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 40rpx;
		border-radius: 36rpx;
	}

	.btn1 {
		border: 2rpx solid #CCCCCC;
		color: #777777;
	}

	.btn2 {
		border: 2rpx solid #2F97FF;
		color: #2F97FF;
	}
</style>