134 lines
3.0 KiB
Vue
134 lines
3.0 KiB
Vue
<template>
|
|
<view class="order-block">
|
|
<view class="order-block-header">
|
|
<view class="order-no">订单号{{no || '-'}}</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">{{ lawyer.name || '-' }}</view>
|
|
</view>
|
|
<view class="order-content-type">
|
|
<label>服务金额</label>
|
|
<view class="nowrap">{{ synthesis.title || '-' }}</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="onPhone(user)">联系TA</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 { }
|
|
}
|
|
},
|
|
synthesis: {
|
|
type : Object,
|
|
default : () => {
|
|
return { }
|
|
}
|
|
},
|
|
time : {
|
|
type : String,
|
|
default : ''
|
|
},
|
|
price: {
|
|
type : String,
|
|
default : ''
|
|
},
|
|
lawyer: {
|
|
type : Object,
|
|
default : () => {
|
|
return { name: '' }
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
onInfo(id){
|
|
this.$emit('info', id)
|
|
},
|
|
onPhone(mobile){
|
|
console.log(mobile)
|
|
|
|
this.$emit('callPhone', mobile)
|
|
},
|
|
onSing(id){
|
|
this.$emit('info', id)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// 列表模块
|
|
.order-block{
|
|
background: white;
|
|
margin: 0 30rpx 30rpx 30rpx;
|
|
border-radius: 10rpx;
|
|
&-header{
|
|
border-bottom: solid 1rpx #eee;
|
|
padding: 20rpx 30rpx;
|
|
align-items: center;
|
|
line-height: 70rpx;
|
|
.order-no{ font-size: 28rpx; color: #111; }
|
|
}
|
|
&-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: 135rpx; padding: 0; 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-sign{ background: #446EFE; color: white; }
|
|
}
|
|
}
|
|
}
|
|
</style> |