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

<template>
	<zj-page-layout :hasFooter="true">
		<view class="all-container">
			<view class="address-container card">
				<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"><text>*</text>续租结束日期</view>
				  <view class="picker" @tap="isShowDate = true">
				    <text class="value" v-if="endDate">{{endDate}}</text>
				    <text class="placeholder" v-else>请选择</text>
				    <text class="iconfont icon-jinru"></text>
				  </view>
				</view>
				<view class="items">
				  <view class="label">续租价格/月</view>
				  <view class="value">￥{{product.renewalPrice}}</view>
				</view>
				<view class="items">
				  <view class="label">续租总金额</view>
				  <view class="value">￥{{totalPrice}}</view>
				</view>
			</view>

			<view class="card service-container">
				<view class="common-title">备注信息</view>
				<u--textarea v-model="remark" placeholder="请输入内容" border="none" height="100"></u--textarea>
			</view>
		</view>

    <template slot="footer">
      <view class="footer">
      	<view class="flex_asb">
      		<view class="left flex_asb">
      			<text style="color: #666666;font-size: 28rpx;">续租总金额</text>
      			<text style="color: #ff5300;">￥{{totalPrice}}</text>
      		</view>
      		<u-button text="确定续租" shape="circle" color="#428dff" type="primary" @click="submitData"></u-button>
      	</view>
      </view>
    </template>

		<!-- <zjDialogDatePicker :value="isShowDate" @cancel="cancelDate()"></zjDialogDatePicker> -->
		<u-datetime-picker
		  :show="isShowDate"
		  v-model="datePickerValue"
		  mode="date"
		  :formatter="formatter"
		  @cancel="isShowDate = false"
		  @close="isShowDate = false"
		  @confirm="confirmDate"
		  :minDate="minDate"
		></u-datetime-picker>

	</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: {},
				addressInfo: null,
				isShowDate: false,
				is_confirm: true,
				userInfo: {},
				product: {},
				endDate: '',
				qty: 1,
				totalPrice: 0,
				payType: 'WECHAT',
				remark: '',
				datePickerValue: Number(new Date()),
				minDate: Number(new Date()),
			}
		},

		computed: {

		},

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

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

		methods: {
			formatter(type, value) {
			  if (type === 'year') {
			    return `${value}年`
			  }
			  if (type === 'month') {
			    return `${value}月`
			  }
			  if (type === 'day') {
			    return `${value}日`
			  }
			  return value
			},
			confirmDate(e) {
			  this.isShowDate = false;
			  let time = new Date(e.value);
			  let y = time.getFullYear();
			  let m = (time.getMonth()+1) < 10 ? '0' + (time.getMonth()+1) : time.getMonth()+1;
			  let d = (time.getDate()) < 10 ? '0' + (time.getDate()) : time.getDate();
			  let hh = (time.getHours()) < 10 ? '0' + (time.getHours()) : time.getHours();
			  let mm = (time.getMinutes()) < 10 ? '0' + (time.getMinutes()) : time.getMinutes();
			  let ss = (time.getSeconds()) < 10 ? '0' + (time.getSeconds()) : time.getSeconds();
			  this.endDate = `${y}-${m}-${d}`;
			  this.computePrice(`${y}-${m}-${d} 00:00:00'`)
			},
			// 获取品牌列表
			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,
					}
				})
			},

			computePrice(endDate){
				this.$api.post('/lease/order/compute/renewal/amount', {
					id: this.id,
					endDate
				}).then(res => {
					this.totalPrice = res.data
				})
			},

			cancelDate(){
				this.isShowDate = false
			},

			// 去选择地址
			chooseAddress() {
				this.$navToPage({
					url: '/packageMine/pages/address/list?isChoose=' + true
				})
			},

			submitData() {
				if (!this.endDate) return this.$toast('请选择续租结束日期');
				if (!this.is_confirm) { return this.$toast('请勿频繁点击！') }
				this.is_confirm = false
				setTimeout(() => {
				  this.is_confirm = true
				}, 3000)
				this.workerPay()
			},

			//代客支付
			workerPay() {
			  mini_env((bool) => {
			    const that = this
			    this.$api.post('/lease/order/pay', {
			      id: this.id,
				  endDate: this.endDate + ' 00:00:00',
				  remark: this.remark,
			      ...(() => {
			        if (bool) {
			          return {
			            miniPay: true,
			            openId: this.$store.state.user.miniOpenId
			          }
			        }
			        return {}
			      })()
			    }).then((res) => {
			      if (!res.data) return false;
			      if (bool) {
			        uniWebview.navigateTo({
			          url: `/pages/pay/zhupin?${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('支付成功');
			          setTimeout(() => {
			            that.$navToPage({
			            	url: `/packageWorkorder/pages/tenancyOrderList`
			            }, 'redirectTo')
			          }, 1000)
			        })
			      }
			    })
			  })
			},
		},
	}
</script>

<style lang="scss" scoped>
	.all-container{
    padding: 0 20rpx 20rpx;
		box-sizing: border-box;
	}
	.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;
		}
	}

	.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: 370rpx;
			margin-right: 60rpx;
		}
	}
</style>