180 lines
3.8 KiB
Vue
180 lines
3.8 KiB
Vue
<template>
|
|
<view class="orderInfo">
|
|
<view class="header">
|
|
<text class="orderTitle">{{ orderInfo.title }}</text>
|
|
<!-- <text class="orderStatus" :class="['status_' + orderInfo.status]">-->
|
|
<text class="orderStatus" :class="['status_' + '01']">
|
|
{{ getOrderStatusTxt() }}
|
|
</text>
|
|
</view>
|
|
<view class="detail">
|
|
<view class="line">
|
|
<image class="line-icon" src="../../static/icons/order-icon1.png" mode="aspectFit"></image>
|
|
<text class="line-text">{{orderInfo.address}}</text>
|
|
</view>
|
|
<view class="line">
|
|
<image class="line-icon" src="../../static/icons/order-icon2.png" mode="aspectFit"></image>
|
|
<text class="line-text">{{orderInfo.phone}}</text>
|
|
</view>
|
|
<view class="line">
|
|
<image class="line-icon" src="../../static/icons/order-icon3.png" mode="aspectFit"></image>
|
|
<text class="line-text">{{orderInfo.busiTypeStr}}</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="!hideFooter" class="footer">
|
|
<view class="btn" :class="{phone: isDetail}">
|
|
<image v-if="isDetail" class="btnIcon" src="../../static/icons/order-icon7.png" mode="aspectFit"></image>
|
|
<text>拨打电话</text>
|
|
</view>
|
|
<view class="btn" :class="{address: isDetail}">
|
|
<image v-if="isDetail" class="btnIcon" src="../../static/icons/order-icon6.png" mode="aspectFit"></image>
|
|
<text>地址导航</text>
|
|
</view>
|
|
<view v-if="!isDetail" class="btn primary" @click="showOrderDetail">查看订单</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "reservationOrder",
|
|
props: {
|
|
orderInfo: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
},
|
|
isDetail: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
hideFooter: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
methods: {
|
|
getOrderStatusTxt() {
|
|
// console.log(this.orderInfo.status)
|
|
switch (this.orderInfo.status) {
|
|
case '01':
|
|
this.isDetail = true
|
|
return '等待维修'
|
|
case '02':
|
|
return '维修中'
|
|
case '03':
|
|
return '已完成'
|
|
default:
|
|
return ''
|
|
}
|
|
},
|
|
showOrderDetail() {
|
|
uni.navigateTo({
|
|
url: '/pages-order/orderDetail/orderDetail?info=' + encodeURIComponent(JSON.stringify(this.orderInfo))
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.orderInfo {
|
|
background: #FFFFFF;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
box-shadow: 2rpx 4rpx 8rpx #efefef;
|
|
padding: 0 30rpx;
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1rpx solid #EEEEEE;
|
|
padding: 30rpx 0;
|
|
|
|
.orderTitle {
|
|
flex: 1;
|
|
width: 0;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.orderStatus {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
|
|
&.status_01 {
|
|
color: #0174F6;
|
|
}
|
|
}
|
|
}
|
|
|
|
.detail {
|
|
margin-bottom: 30rpx;
|
|
border-bottom: 1rpx solid #EEEEEE;;
|
|
.line {
|
|
margin: 30rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 10rpx;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.line-icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 20rpx;
|
|
.btn {
|
|
margin-bottom: 30rpx;
|
|
flex: 1;
|
|
width: 0;
|
|
height: 60rpx;
|
|
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
|
border: 1rpx solid #0174F6;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #0174F6;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
column-gap: 8rpx;
|
|
|
|
&.primary {
|
|
background: #0174F6;
|
|
color: #fff;
|
|
color: #FFFFFF;
|
|
}
|
|
&.address {
|
|
background: #0174F6;
|
|
color: #fff;
|
|
border: none;
|
|
}
|
|
&.phone {
|
|
background: #E8A321;
|
|
color: #fff;
|
|
border: none;
|
|
}
|
|
|
|
.btnIcon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|