宗法

components/entrustOrder.vue

@@ -0,0 +1,152 @@
+<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">
+					<label>服务律师</label>
+					<view class="nowrap">{{ lawyer.name || '-' }}</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" @click="onOPay(no)">支付</button>
+				<button class="btn-sign" @click="onInfo(no)">查看</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"entrustOrders",
+		data() {
+			return {
+				
+			};
+		},
+		props: {
+			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: '' }
+				}
+			}
+		},
+		methods: {
+			onInfo(id){
+				this.$emit('info', id)
+			},
+			onPhone(mobile){
+				this.$emit('callPhone', mobile)
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	// 列表模块
+	.order-block{ 
+		background: white;
+		margin: 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: #353EF4; 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; height: 70rpx; line-height: 70rpx; border-radius: 35rpx; min-width: 150rpx; font-size: 30rpx; }
+				button::after{ display: none; }
+				button.btn-cancel{ margin-right: 20rpx; color: #353EF4; border:solid 1rpx #353EF4; background: white; line-height: 68rpx; box-sizing: border-box; }
+				button.btn-sign{ background: #353EF4; color: white; }
+			}
+		}
+	}
+</style>