dou_fire/components/entrustOrder.vue

<template>
	<view class="order-block">
		<view class="order-block-header">
			<view class="order-no">订单号{{no || '-'}}</view>
			<view class="order-state">{{status.text || '-'}}</view>
		</view>
		<view class="order-block-content">
			<view class="order-user">{{user.nickname}}<text>{{user.username}}</text></view>
			<view class="order-content">
				<view class="order-content-type">
					<label>委托类型</label>
					<view class="nowrap">{{ entrust.title || '-' }}</view>
				</view>
				<view class="order-content-type" v-if="diff > 0">
					<label>需补差价</label>
					<view class="nowrap">{{ diff || '-' }}</view>
				</view>
				<view class="order-content-type" v-if="can.lawyer_status != 0">
					<label>服务律师</label>
					<view class="nowrap" v-if="can.lawyer_status === 2">{{ lawyer.name || '-' }}</view>
					<view class="nowrap" style="color: #FFAB3F;" v-else>待匹配律师</view>
				</view>
				<view class="order-content-type">
					<label>服务费用</label>
					<view class="nowrap">{{ price || '-' }}</view>
				</view>
				<view class="order-content-type">
					<label>创建时间</label>
					<view class="nowrap">{{ time || '-' }}</view>
				</view>
			</view>
			<view class="order-btns">
				<button class="btn-cancel" v-if="can.cancel && isSelf" @click="onCancel(no)">取消</button>
				<button class="btn-cancel" @click="onPhone(user.username)">联系TA</button>
				<button class="btn-cancel" @click="onSing(no)" v-if="can.sign && isSelf">签约</button>
				<button class="btn-cancel" :class="{'in': can.pay_status == 3}" v-if="can.pay_status == 1 || can.pay_status == 2 || can.pay_status == 3" @click="onOPay(no)">
					<text v-if="can.pay_status == 1">支付</text>
					<text v-if="can.pay_status == 2">审核中</text>
					<text v-if="can.pay_status == 3">被驳回</text>
				</button>
				<button class="btn-cancel" v-if="can.diff_price" @click="onDiff(no)">补差价</button>
				<button class="btn-sign" @click="onInfo(no)">查看</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"entrustOrders",
		data() {
			return {
				
			};
		},
		props: {
			isSelf: {
				type	: Boolean,
				default	: false
			},
			no	: { 
				type	: String,
				default	: ''
			},
			user: {
				type	: Object,
				default	: () => {
					return { } 
				}
			},
			status: {
				type	: Object,
				default	: () => {
					return { } 
				}
			},
			entrust: {
				type	: Object,
				default	: () => {
					return { } 
				}
			},
			time : {
				type	: String,
				default	: ''
			},
			price: { 
				type	: String,
				default	: ''
			},
			diff: { 
				type	: Number,
				default	: 0
			},
			lawyer: {
				type	: Object,
				default : () => {
					return { name: '' }
				}
			},
			can: {
				typeof: Object,
				default : () => {
					return {}
				}
			}
		},
		methods: {
			// 订单签约
			onSing(id){
				this.$emit('sing', id)
			},
			// 订单详情
			onInfo(id){
				this.$emit('info', id)
			},
			// 联系客户
			onPhone(mobile){
				this.$emit('callPhone', mobile)
			},
			// 补差价支付
			onDiff(id){
				this.$emit('diff', id)
			},
			// 支付
			onOPay(id){
				this.$emit('pay', id)
			},
			// 取消订单
			onCancel(id){
				this.$emit('cancel', id)
			}
		}
	}
</script>

<style lang="scss">
	// 列表模块
	.order-block{ 
		background: white;
		margin: 0 30rpx 30rpx 30rpx;
		border-radius: 10rpx;
		&-header{
			border-bottom: solid 1rpx #eee;
			display: flex;
			justify-content:
			space-between;
			padding: 20rpx 30rpx;
			align-items: center;
			line-height: 70rpx;
			.order-no{ font-size: 28rpx; color: #111;  }
			.order-state{ color: #446EFE; font-weight: bold; font-size: 30rpx; }
		}
		&-content{
			padding: 30rpx;
			.order-user{
				font-size: 40rpx;
				font-weight: bold;
				padding-bottom: 30rpx;
				text{ font-size: 28rpx; margin-left: 10rpx; font-weight: normal; color: #666; }
			}
			.order-content{
				background: #F7FAFF;
				border-radius: 10rpx;
				padding: 20rpx 30rpx;
				color: #666666;
				font-size: 30rpx;
				.order-content-type{
					display: flex;
					justify-content: space-between;
					color: #111;
					line-height: 70rpx;
					label{ color: gray; }
				}
				.order-content-title{ color: #111; line-height: 70rpx; }
				.order-content-text{ line-height: 40rpx; text-align: justify; }
			}
			.order-btns{
				padding-top: 30rpx;
				display: flex;
				justify-content: flex-end;
				button{ margin: 0; padding: 0; height: 70rpx; line-height: 70rpx; border-radius: 35rpx; min-width: 135rpx; font-size: 30rpx; }
				button::after{ display: none; }
				button.btn-cancel{ margin-right: 20rpx; color: #446EFE; border:solid 1rpx #446EFE; background: white; line-height: 68rpx; box-sizing: border-box; }
				button.btn-cancel.in{ opacity: .8; }
				button.btn-sign{ background: #446EFE; color: white; }
			}
		}
	}
</style>