jsm-mall-h5-front/src/packageWorkorder/pages/tenancyOrderDetail.vue

<template>
	<zj-page-layout :hasFooter="true">
		<view class="container">
			<view class="head" :style="{'background': filterStatus(detail,'color')}">{{filterStatus(detail,'name')}}</view>
			<view class="all-container">
				<view class="address-container card" v-if="addressInfo">
					<view class="main">
						<view class="left">
							<view class="icon"><text class="iconfont icon-dingwei1"></text></view>
							<view class="hasdata">
								<view class="name">{{addressInfo.name}}<text>{{addressInfo.phone}}</text></view>
								<view class="address ellipsis-2">
									{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.area}}{{addressInfo.street}}{{addressInfo.address}}{{addressInfo.houseNo}}
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="card goods">
					<view class="common-title">产品信息</view>
					<view class="item">
						<image :src="product.categoryUrl" mode="aspectFill"></image>
						<view class="right">
							<view class="name">{{product.goodsLeaseName}}</view>
							<view class="name remark">{{product.repairRemark}}</view>
						</view>
					</view>
					<view class="items">
					  <view class="label">下单日期</view>
					  <view class="value">{{detail.createTime}}</view>
					</view>
					<view class="items">
					  <view class="label">租赁时间</view>
					  <view class="value">{{product.startDate.substring(0,10) + ' 至 ' + product.endDate.substring(0,10)}}</view>
					</view>
					<view class="items">
					  <view class="label">租赁订金</view>
					  <view class="value">{{detail.bookAmount}}</view>
					</view>
					<view class="items">
					  <view class="label">租赁总金额</view>
					  <view class="value">{{product.totalAmount}}</view>
					</view>
          <block v-if="product.renewalLeaseAmount">
            <view class="items">
              <view class="label">续租结束日期</view>
              <view class="value">{{product.endDate.substring(0,10)}}</view>
            </view>
            <view class="items">
              <view class="label">续租价格/月</view>
              <view class="value">{{product.renewalPrice || 0}}</view>
            </view>
            <view class="items">
              <view class="label">续租总金额</view>
              <view class="value">{{product.renewalLeaseAmount || 0}}</view>
            </view>
          </block>
          <view class="items">
            <view class="label">备注信息</view>
            <view class="value">{{detail.remark}}</view>
          </view>
				</view>

				<view class="card order-container">
					<view class="common-title">
						<view :class="tabIndex==1?'active text':'text'" @click="tabIndex = 1">订单信息</view>
						<view :class="tabIndex==2?'active text':'text'" @click="tabIndex = 2">租赁记录</view>
					</view>
					<block v-if="tabIndex==1">
						<view class="item">
						  <view class="label"><text>订单编号</text>{{detail.id}}</view>
						  <view class="value copy" @tap="$copy(detail.id)">复制</view>
						</view>
						<view class="item">
						  <view class="label"><text>创建时间</text>{{detail.createTime}}</view>
						</view>
						<view class="item">
						  <view class="label"><text>付款时间</text>{{detail.payTime || detail.createTime}}</view>
						</view>
						<view class="item">
						  <view class="label"><text>支付方式</text>{{detail.payType=='WECHAT'?'微信支付':'到店支付'}}</view>
						</view>
						<view class="item">
						  <view class="label"><text>支付单号</text>{{detail.record.outTradeNo}}</view>
						  <view class="value copy" @tap="$copy(detail.record.outTradeNo)">复制</view>
						</view>
						<view class="item">
						  <view class="label"><text>确认时间</text>{{detail.confirmTime}}</view>
						</view>
					</block>
					<block v-else>
						<view v-for="(item,index) in detail.records" :key="index" style="padding-bottom: 30rpx;border-bottom: 1rpx solid #dddddd;">
							<view class="item">
								 <view class="label"><text>提交时间</text>{{detail.createTime}}</view>
							</view>
							<view class="item">
								 <view class="label"><text>续租开始时间</text>{{detail.startDate}}</view>
							</view>
							<view class="item">
								 <view class="label"><text>续租结束时间</text>{{detail.endDate}}</view>
							</view>
							<view class="item">
								 <view class="label"><text>续租价格/月</text>{{detail.renewalPrice}}</view>
							</view>
							<view class="item">
								 <view class="label"><text>续租总金额</text>{{detail.payValue}}</view>
							</view>
						</view>
						<Loading v-if="detail.records.length == 0" :loadStatus="2" :dataList="detail.records" />
					</block>
				</view>
			</view>
		</view>

    <template slot="footer">
      <view class="footer flex">
      	<block v-if="!detail.payStatus">
      		<u-button type="primary" style="flex: 1" shape="circle" color="#428dff" text="去支付" @click="payOrder(detail.id)"></u-button>
      	</block>
      	<block v-else>
      		<u-button type="primary" v-if="detail.status == 'LEASE' || detail.status == 'OVER'" style="flex: 1;width: 210rpx;margin-right: 20rpx" shape="circle" color="#428dff" text="我要续租" @click="toRelet(detail.id)"></u-button>
      		<u-button type="primary" style="flex: 1" shape="circle" color="#428dff" text="我要报修" v-if="detail.status == 'LEASE'" @click="toRepair(detail.id)"></u-button>
      	</block>
      </view>
    </template>



		<zjDialogDatePicker :value="isShowDate" @cancel="cancelDate()"></zjDialogDatePicker>

	</zj-page-layout>
</template>

<script>
	import { weixinPay, mini_env } from '@/common/utils/util.js';
	import zjDialogDatePicker from '@/components/zj-dialog/zj-dialog-datePicker.vue';
	export default {
		components: {
			zjDialogDatePicker
		},
		data() {
			return {
				detail: {},
				product: {},
				addressInfo: null,
				isShowDate: false,
				is_confirm: true,
				userInfo: {},
				endDate: '',
				qty: 1,
				tabIndex: 1,
				payType: 'WECHAT',
				remark: '',
			}
		},

		computed: {
			filterStatus(){
				return function(item,type){
					if(!item.payStatus){
						return {name: '待付款',color: '#ce68ff'}[type]
					}else{
						if(item.status == 'WAIT'){
							return {name: '待审核',color: '#ff5300'}[type]
						}
						else if(item.status == 'WAIT_START'){
							return {name: '待开始',color: '#64c842'}[type]
						}else if(item.status == 'LEASE'){
							return {name: '租赁中',color: '#1281ff'}[type]
						}else if(item.status == 'OVER'){
							return {name: '待回收',color: '#9c84fe'}[type]
						}else if(item.status == 'RECOVER'){
							return {name: '已回收',color: '#817f7f'}[type]
						}
					}
				}
			}
		},

		async onLoad({id}) {
			console.log(id)
			this.id = id
			this.getDetail(id)
			this.crossPage.$on('confirm', result => {
				this.endDate = result.choosDate
				this.isShowDate = false
			})
		},

		onUnload() {
			this.crossPage.$off('chooseAddress');
		},

		methods: {
			// 获取品牌列表
			getDetail(id) {
				this.$api.post('/lease/order/detail',{
					id
				}).then(res => {
					this.getAddressData(res.data.userAddressId)
					this.detail = res.data;
					this.product = res.data.items[0]
				})
			},

			// 获取地址信息
			getAddressData(userAddressId) {
				this.$api.get('/user/address/detail', {
					userAddressId
				}).then(res => {
					this.addressInfo = {
						name: res.data.name,
						phone: res.data.phone,
						province: res.data.province,
						city: res.data.city,
						area: res.data.area,
						street: res.data.street,
						address: res.data.address,
						houseNo: res.data.houseNo,
						defaultAddr: res.data.defaultAddr,
					}
				})
			},

			//去续租
			toRelet(id){
				this.$navToPage({
					url: '/packageWorkorder/pages/tenancyReletOrder?id=' + id
				})
			},

			//去报修
			toRepair(id){
				this.$navToPage({
					url: '/packageWorkorder/pages/tenancyRepairOrder?id=' + id
				})
			},

			// 立即付款
			payOrder(id) {
				mini_env((bool) => {
					let that = this;
					this.$api.post('/lease/order/pay', {
						userId: this.$store.state.user.userId,
						id,
						...(() => {
							if (bool) {
								return {
									miniPay: true,
									openId: this.$store.state.user.miniOpenId
								}
							}
							return {}
						})()
					}).then(res => {
						if (bool) {
							uniWebview.navigateTo({
								url: `/pages/pay/pay?${Object.entries({
			    ...res.data,
			    payPackage: res.data.payPackage.split("=")[0] || "",
			    payPackageVal: res.data.payPackage.split("=")[1] || ""
			  }).map(item => item.join("=")).join("&")}`
							})
						} else {
							weixinPay(res.data, function(res) {
								that.$successToast('支付成功');
								that.pageNum = 1;
								that.getOrderList();
								that.requestMessage();
							})
						}
					})
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container{
		padding-bottom: 100rpx;
		box-sizing: border-box;
	}
	.head{
		padding: 20rpx 60rpx;
		color: #ffffff;
	}
	.card {
		@include zj-card;
		margin-top: 20rpx;
		padding: 30rpx;
	}

	.flex{
		display: flex;
	}

	.flex_asb{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.common-title {
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 20rpx;
		text {
			color: $error-color;
			font-weight: normal;
		}
	}

	.all-container {
		padding: 0 20rpx;
	}

	.order-container{
		min-height: 490rpx;
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 50rpx;
			margin-bottom: 10rpx;
			text{
				margin-right: 50rpx;
			}
			.copy{
				color: #ff5300 !important;
			}
		}
		.common-title {
			display: flex;
			font-size: 34rpx;
			margin-bottom: 20rpx;
			.text {
				margin-right: 40rpx;
			}
			.active{
				color: #428dff;
				font-weight: 600;
			}
		}
	}

	.service-container {
	  .item {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    height: 50rpx;
	    margin-bottom: 30rpx;
	    .label {
	      margin-right: 30rpx;
	      text {
	        color: $error-color;
	      }
	    }
	    .picker {
	      .placeholder {
	        color: $sec-font;
	      }
	      .iconfont {
	        margin-left: 12rpx;
	        color: $sec-font;
	      }
	    }
	  }
	}

	.address-container {
		.main {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;
		}

		.right {
			font-size: 32rpx;
			color: $sec-font;
			flex-shrink: 0;
		}

		.left {
			display: flex;
			align-items: center;
			margin-right: 20rpx;

			.icon {
				width: 52rpx;
				height: 52rpx;
				border-radius: 50%;
				background: $theme-color;
				display: flex;
				flex-shrink: 0;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;

				.iconfont {
					font-size: 36rpx;
					color: #ffffff;
				}
			}

			.nodata {
				font-size: 28rpx;
				color: #999999;
			}

			.hasdata {
				.name {
					font-size: 32rpx;
					color: #333333;

					text {
						color: #999999;
						font-size: 28rpx;
						margin-left: 16rpx;
					}
				}

				.address {
					font-size: 28rpx;
					color: #666666;
					line-height: 34rpx;
					margin-top: 10rpx;
				}
			}
		}
	}
	.goods{
		.item{
			display: flex;
			align-items: center;
			box-sizing: border-box;
			image {
				width: 140rpx;
				height: 140rpx;
				margin-right: 20rpx;
			}
			.right{
				flex: 1;
				.name{
					font-weight: bold;
					color: #000000;
					font-size: 32rpx;
					line-height: 40rpx;
					margin-bottom: 20rpx;
				}
				.remark{
					font-size: 26rpx;
					color: #59a7ff;
				}
				.qty{
					display: flex;
					justify-content: flex-end;
				}
			}
		}
		.items {
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  height: 50rpx;
		  margin-bottom: 30rpx;
		  .label {
		    margin-right: 30rpx;
		    text {
		      color: $error-color;
		    }
		  }
		  .picker {
		    .placeholder {
		      color: $sec-font;
		    }
		    .iconfont {
		      margin-left: 12rpx;
		      color: $sec-font;
		    }
		  }
		}
	}
	.footer{
		background-color: #ffffff;
		padding: 20rpx;
		box-sizing: border-box;
		.tip{
			background-color: #fffdef;
			color: #ff5300;
			font-size: 28rpx;
			padding: 20rpx 0;
		}
		.left{
			width: 260rpx;
			margin-right: 60rpx;
		}
	}
</style>