jsm-mall-h5-front/src/packageWorkorder/pages/tenancyRepairOrder.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 service-container">
				<view class="common-title">服务信息</view>
				<view class="item">
				  <view class="label"><text>*</text>工单类型</view>
				  <view class="value">报修单</view>
				</view>
				<view class="item">
				  <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>

			<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>

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

		<view class="footer">
			<u-button text="提交服务单" shape="circle" color="#428dff" type="primary" @click="submitData"></u-button>
		</view>
		<!-- <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: {},
				endDate: '',
				qty: 1,
				payType: 'WECHAT',
				remark: '',
				typeId: '',
				datePickerValue: Number(new Date()),
				minDate: Number(new Date()),
			}
		},

		computed: {

		},

		async onLoad({id}) {
			this.id = id
			this.getTypeList()
			this.getDetail(id)
			// this.crossPage.$on('confirm', result => {
			// 	this.endDate = result.choosDate
			// 	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}`;
			},
			// 获取品牌列表
			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]
				})
			},

			getTypeList(){
				this.$api.post('/pg/order/base/type/list').then(res => {
					res.data.forEach(item=>{
						if(item.orderType == 'REPAIR'){
							this.typeId = item.id
						}
					})
				})
			},

			// 获取地址信息
			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,
					}
				})
			},

			cancelDate(){
				this.isShowDate = false
			},

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

			submitData() {
				let productList = [{
					mainId: this.product.categoryId,
					mainName: this.product.categoryName,
					num: this.product.qty,
					imgUrl: this.product.categoryUrl
				}]
				if (!this.endDate) return this.$toast('请选择预约上门时间');
				if (!this.is_confirm) { return this.$toast('请勿频繁点击！') }
				this.is_confirm = false
				setTimeout(() => {
				  this.is_confirm = true
				}, 3000)
				this.$api.postJson('/pg/order/base/save', {
				  orderSmallType: this.typeId,
				  userAddressId: this.detail.userAddressId,
				  saleOrderId: this.id,
				  appointmentTime: this.endDate + ' 00:00:00',
				  orderProducts: productList,
				  remark: this.remark,
				  isZl: true
				}).then(res => {
					this.$successToast();
					this.$navToPage({
						url: `/packageWorkorder/pages/userWorkorderList`
					})
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.all-container{
		padding-bottom: 220rpx;
		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;
		}
	}

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

	.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{
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		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>