xinyongguanlishi/pages/index/orderInfo.vue

<template>
	<view class="main">
		<view class="list_item margin-lr-sm u-margin-top-30">
			<view class="order-num flex justify-between u-font-28 u-padding-bottom-10 u-border-bottom"
				style="color:#909399;">
				<view class="">
					订单号：{{order_info.order.orders.order_sn}}
				</view>
				<view class="u-font-26" style="color: #909399;">
					联系电话：{{order_info.order.users.phone}}
				</view>
			</view>
			<view class="order-num u-margin-top-15 flex align-center u-padding-bottom-10 u-border-bottom">
				<u-avatar :src="order_info.order.users.avatar" size="100"></u-avatar>
				<view class="u-margin-left-20 flex-sub" style="color: #505559;">
					<view class="u-font-28" v-if="order_info.order.type==2">
						评估类型：企业信用问题咨询
					</view>
					<view class="u-font-28" v-else>
						评估类型：个人信用问题咨询
					</view>
					<view class="u-font-28">
						评估用户：{{order_info.order.users.realname}}
					</view>
					<view class="u-font-28">
						咨询项目个数：{{order_info.order.project_num}}
					</view>
					<view class="u-font-28 flex justify-between">
						<text>咨询总金额：{{order_info.order.price/100}}</text>
						<text class="u-font-30" style="color: #F1C453;">佣金：{{order_info.order.commission/100}}元</text>
					</view>
				</view>
			</view>
			<view class="u-margin-top-10">
				<view class="">
					{{order_info.order.type == 2?'企业征信报告上传预览：':'个人征信报告上传预览：'}}
				</view>
				<view class="imageView u-margin-top-15">
					<image @click="viewImg(item)" class="u-margin-left-15" v-for="(item,index) in order_info.reports"
						:key="index" :src="item" mode=""></image>
				</view>
			</view>
		</view>
		<view class="list_item margin-lr-sm u-margin-top-30">
			<view class="">
				<u-section title="咨询项目" :right="false"></u-section>
			</view>
			<view class="u-margin-top-15">
				<wyb-table ref="table" width="100%" :default-col-width="140" :headers="headers" :font-size="[25]"
					:contents="order_info.order.orders.order_project" />
			</view>
			<!-- <view class="flex align-center justify-end u-margin-top-15" v-if="order_info.order.status == 0">
				<button hover-class="none" @click="tipsOrder(order_info.order.id,4)"
					class="left_btn u-margin-right-10">拒接</button>
				<button style="color: #fff;background: #F1C453;border-color: #F1C453;margin: 0;" hover-class="none"
					class="left_btn" @click="tipsOrder(order_info.order.id,1)">接单</button>
			</view> -->
			<view class="flex align-center justify-between u-margin-top-20"
				v-if="order_info.order.status == 1&&order_info.order.is_change == 2">
				<button style="margin: 0;color: #fff;background: #F1C453;border-color: #F1C453;"
					@click="pdfView(order_info.order.orders.report_pdf_url)" hover-class="none"
					class="left_btn">查看PDF</button>
				<button style="margin: 0;color: #fff;background: #0CBB07;border-color: #0CBB07;"
					@click="tipsOrder(order_info.order.id,2)" hover-class="none" class="left_btn">提交订单</button>
			</view>
			<view class="flex align-center u-margin-top-15" v-else-if="order_info.order.status == 2">
				<text
					class="text-red">订单修复审核状态：{{order_info.order.verify_status == 0?'待审核':order_info.order.verify_status == 1?'审核通过':'审核失败'}}</text>
			</view>
			<view class="flex align-center u-margin-top-15" v-else-if="order_info.order.status == 3">
				<text class="text-green">订单修复审核状态：审核通过</text>
			</view>
			<view class="flex align-center u-margin-top-15" v-else-if="order_info.order.is_change == 1">
				<text class="text-yellow">改价审核中</text>
			</view>
			<view class="u-margin-top-15" v-if="order_info.order.verify_explain!=null">
				审核未通过原因：{{order_info.order.verify_explain}}
			</view>
		</view>
		<view class="list_item margin-lr-sm u-margin-top-30" v-if="order_info.order.is_change == 0">
			<view class="">
				<u-section title="咨询项目与价格" :right="false"></u-section>
			</view>
			<view class="">
				<!-- <view class="margin-top-sm" v-for="(item,index) in order_info.project" :key="index">
					<view class="flex align-center justify-between" v-if="item.payment_status!=2">
						<view class="u-font-28 text-gray">
							{{item.appeal_state}}
						</view>
						<view class="flex align-center">
							<button style="color: #fff;background: #F1C453;border-color: #F1C453;margin: 0;"
								hover-class="none" class="updetedBtn" @click="open(item,index)">改价</button>
							<view class="u-margin-left-25 u-font-26 text-red">
								¥{{item.price/100}}
							</view>
						</view>
					</view>
				</view> -->
				<checkbox-group @change="checkboxChange" class="u-border-bottom u-padding-bottom-20">
					<!-- 遍历raido框-->
					<label class="projectItem flex justify-between align-center margin-top-sm"
						v-for="(item, index) in order_info.project" :key="index">
						<!-- 选择框内容 -->
						<view class="item-checkbox" v-if="item.payment_status==1">
							<checkbox :value="index+''" :checked="item.payment_status > 1? true:false"
								:disabled="item.payment_status > 1? true:false" />
							<text class="checkbox-content">{{ item.appeal_state }}</text>
						</view>
						<!-- 对应选项的金额 -->
						<view class="item-money flex align-center" v-if="item.payment_status==1">
							<button style="color: #fff;background: #F1C453;border-color: #F1C453;margin: 0;"
								hover-class="none" class="updetedBtn" @click="open(item,index)">改价</button>
							<text class="text-red u-margin-left-20">¥{{ item.price/100 }}</text>
						</view>
					</label>
				</checkbox-group>
				<view class="margin-top-sm">
					<view class="text-red">
						*价格需与客户进行沟通
					</view>
					<view class="margin-top-xs justify-end flex align-center">
						<button style="color: #fff;background: #F1C453;border-color: #F1C453;margin: 0;width: 178rpx;"
							hover-class="none" class="left_btn"
							@click="submit_review(order_info.order.id,1)">提交改价审核</button>
					</view>
				</view>
			</view>
		</view>
		<view class="list_item margin-lr-sm u-margin-top-30" v-if="order_info.evaluate!=null">
			<view class="text-bold titleStyle">
				评价
			</view>
			<view class="">
				<view class="margin-top-sm flex align-center">
					星级评价：<sxRate :value="order_info.evaluate.score" activeColor="#BB3720" :disabled="true" :max="5">
					</sxRate>
				</view>
				<view class="margin-top-xs">
					内容：{{order_info.evaluate.content}}
				</view>
			</view>
		</view>
		<u-modal v-model="showPrice" title="请输入金额" @confirm="confirmPrice" show-cancel-button
			:content-style="{'padding':'40rpx'}">
			<view class="slot-content">
				<u-input v-model="value" placeholder="请输入价格" />
			</view>
		</u-modal>
		<view class="flex align-center justify-between u-margin-top-15 footstyle" v-if="order_info.order.status == 0&&order_info.order.is_change == 0">
			<button hover-class="none" @click="tipsOrder(order_info.order.id,4)"
				class="left_btn u-margin-right-10" style="height: 62rpx;width: 344rpx;background: #7d7d7d;color: #fff;">拒接此单</button>
			<button style="color: #fff;background: #F1C453;border-color: #F1C453;margin: 0;height: 62rpx;width: 344rpx;" hover-class="none"
				class="left_btn" @click="tipsOrder(order_info.order.id,1)">不需要改价，直接接单</button>
		</view>
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	import sxRate from '@/components/sx-rate/index.vue'
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	export default {
		components: {
			wybTable,
			sxRate
		},
		data() {
			return {
				value: '',
				showPrice: false,
				order_id: '',
				order_info: {},
				headers: [{
					label: '管理机构',
					key: 'appeal_state'
				}, {
					label: '逾期次数',
					key: 'overdue_num'
				}, {
					label: '总金额',
					key: 'price_text'
				}, {
					label: '支付状态',
					key: 'payment_status_text'
				}, {
					label: '流程状态',
					key: 'process_status_text'
				}, {
					label: '账户类型',
					key: 'account_type_text'
				}, {
					label: '状态异常修复费用',
					key: 'account_status_price_text'
				}, {
					label: '五级分类修复费用',
					key: 'five_categories_price_text'
				}, {
					label: '服务费用',
					key: 'service_price_text'
				}],
				order_project_ids: [],
				currentIndex: 0
			}
		},
		onLoad(op) {
			this.getOrderInfo(op.id)
		},
		methods: {
			open(item, index) {
				this.currentIndex = index
				this.showPrice = true
				this.value = this.order_info.project[index].price / 100
			},
			confirmPrice() {
				this.order_info.project[this.currentIndex].price = this.value * 100
			},
			checkboxChange: function(e) {
				this.order_project_ids = e.detail.value;
				console.log(this.order_project_ids)
			},
			tipsOrder(id, status) {
				let arr = []
				if (this.vuex_user.is_auth != 2) {
					uni.showToast({
						title: "请先进行身份认证",
						icon: "none"
					})
					return false
				}
				if(this.order_project_ids.length>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, arr, false)
						}
					}
				})
			},
			pdfView(pdf) {
				uni.navigateTo({
					url: './preview?url=' + pdf
				})
			},
			submit_review(id, status) {
				if (this.order_project_ids.length == 0) {
					uni.showToast({
						title: "请勾选修复项",
						icon: "none"
					})
					return false
				}
				uni.showModal({
					title: "温馨提示",
					content: '确认提交改价申请吗?',
					success: (res) => {
						if (res.confirm) {
							let arr = []
							this.order_project_ids.forEach(item => {
								arr.push({
									proj_id: this.order_info.project[item].id,
									price: this.order_info.project[item].price
								})
							})
							this.updateOrder(id, status, arr, true)
						}
					}
				})
			},
			async updateOrder(id, status, arr, isgai) {
				let data = await this.$u.post('managerOrder/updateOrder', {
					id,
					status,
					change: JSON.stringify(arr)
				})
				if (data.code == 200) {
					if (status == 4) {
						uni.navigateBack()
					} else {
						if (isgai) {
							this.order_info.order.is_change = 1
						} else {
							this.order_info.order.status = status
							this.order_info.order.is_change = 2
						}
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: "none"
					})
					return false
				}
			},
			async getOrderInfo(id) {
				let res = await this.$u.post("managerOrder/orderDetail", {
					id: id
				})
				console.log(res.data.order.orders)
				if (res.code == 200) {
					this.order_info = res.data
					console.log(this.order_info.project)
				}
			},
			viewImg(img) {
				uni.previewImage({
					urls: this.order_info.reports,
					current: img
				});
			}
		}
	}
</script>

<style>
	.footstyle{
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		background: #fff;
		/* height: 60rpx; */
		padding: 30rpx;
	}
	.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;
	}

	.imageView image {
		width: 96rpx;
		height: 96rpx;
	}

	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;
	}

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

	.project .projectContent .projectItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 15px 0;
	}

	.projectItem .checkbox-content {
		padding-left: 10px;
	}

	.titleStyle {
		display: flex;
		/* justify-content: center; */
		align-items: center;
	}

	.titleStyle::before {
		content: '';
		width: 6rpx;
		height: 40rpx;
		background: #000;
		display: inline-block;
		margin-right: 10rpx;
	}
</style>