From c213ec83eec780a129478f594b6af7c79fc45800 Mon Sep 17 00:00:00 2001
From: monkeyhouyi <m19382021374@163.com>
Date: Fri, 11 Oct 2024 15:11:44 +0800
Subject: [PATCH] 商铺详情，新增

---
 pages/details/details.scss   | 228 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------------------------------------------------------------
 pages/details/details.vue    | 187 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------------------------------------
 pages/leaseAdd/leaseAdd.scss |  42 +++++++++++++++++++++++++++++++++++++++---
 pages/leaseAdd/leaseAdd.vue  | 241 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------------
 4 files changed, 411 insertions(+), 287 deletions(-)

diff --git a/pages/details/details.scss b/pages/details/details.scss
index a085ef3..398c698 100644
--- a/pages/details/details.scss
+++ b/pages/details/details.scss
@@ -1,146 +1,162 @@
 .page {
-	position: absolute;
+	position: relative;
 	width: 100%;
 	// height: 100%;
 	overflow-x: hidden;
 	// overflow-y: auto;
 }
-/* banner 标题 */
-.banner-title{
-	background-color: #FFFFFF;
-	padding-bottom: 20rpx;
-}
-/* banner */
-.banner{
+// 图片
+.banner-img {
 	width: 100%;
-	height: 450rpx;
-	.screen-swiper{
-		width: 100%;
-		height: 100%;
-	}
+	height: 30vh;
 }
-/* 价格 */
-.price-info{
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 0 4%;
-	margin: 20rpx 0;
-	.price{
-		font-size: 28rpx;
-		text {
-			font-size: 24rpx;
-			color: #aaaaaa;
+// 商铺信息
+.banner {
+	position: absolute;
+	top: calc(30vh - 30rpx);
+	width: 100%;
+	margin-top: -20rpx;
+	border-radius: 30rpx;
+	background-color: #fff;
+	padding: 26rpx 34rpx 100rpx;
+	.banner-item {
+		border-bottom: 2rpx solid #EBEBEB;
+		padding-bottom: 32rpx;
+		.banner-item-title {
+			font-size: 28rpx;
+			font-weight: 700;
+			line-height: 48rpx;
+			margin-top: 30rpx;
 		}
-		.price-num {
-			font-weight: bold;
-			color: #ff7337;
-			font-size: 40rpx;
-			margin-top: 20rpx;
+		.banner-item-form {
+			.form-item {
+				display: flex;
+				justify-content: flex-start;
+				align-items: top;
+				padding: 8rpx 0;
+			}
+		}
+		&:last-child {
+			border-bottom: unset;
 		}
 	}
-	.price-line {
-		width: 2rpx;
-		height: 80rpx;
-		background-color: #f4f4f4;
-	}
-}
-/* 标题 */
-.goods-title{
-	padding: 0 4%;
-	margin: 40rpx auto;
-	text{
-		font-size: 34rpx;
-		color: #000;
-		font-weight: bold;
-	}
-}
-.goods-icon {
-	display: flex;
-	margin: 0 20rpx;
-	.goods-icon-list {
-		background-color: #f1fff6;
-		color:#4fa477;
-		font-size: 24rpx;
-		display: inline-block;
-		padding: 10rpx 20rpx;
-		margin-right: 10rpx;
-	}
-}
-/* 评价 */
-.evaluate-data{
-	padding: 0 4%;
-	margin: 20rpx auto;
-	background-color: #FFFFFF;
-	overflow: hidden;
-	.title-more{
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		width: 100%;
-		height: 100rpx;
-		.title{
+	// 基础信息
+	.info {
+		.info-title {
+			font-weight: bold;
+			font-size: 32rpx;
+			margin-bottom: 24rpx;
+			span {
+				display: inline-block;
+				padding: 0 8rpx;
+			}
+		}
+		.info-text {
+			margin-bottom: 30rpx;
+		}
+		.info-racord {
 			display: flex;
+			justify-content: space-between;
 			align-items: center;
-			height: 100%;
-			text{
-				font-size: 30rpx;
-				color: #000;
+			.info-price {
+				color: #31AA6A;
+				span {
+					font-size: 40rpx;
+					font-weight: 700;
+					margin-right: 4rpx;
+				}
 			}
 		}
-		.more{
+	}
+	// 场地信息
+	// 位置信息
+	.position {
+		.position-info {
 			display: flex;
 			align-items: center;
-			text{
-				font-size: 26rpx;
-				color: #212121;
+			flex-direction: row;
+			margin: 38rpx 22rpx;
+			background-color: #fff;
+			font-size: 24rpx;
+			padding: 20rpx 16rpx;
+			line-height: 30rpx;
+			border-radius: 14rpx;
+			text {
+				margin-left: 10rpx;
 			}
 		}
 	}
-	.evaluate-list{
-		width: 100%;
-		.content{
+	// 周边商铺
+	.other-business {
+		.scroll-view_H {
+			white-space: nowrap;
 			width: 100%;
-			.character{
-				display: flex;
-				align-items: center;
-				padding: 10rpx 0;
-				text{
-					font-size: 26rpx;
-					color: #333333;
+		}
+		.scroll-view-item_H {
+			display: inline-block;
+			width: 210rpx;
+			margin-right: 22rpx;
+			&:last-child {
+				margin-right: 0;
+			}
+			.business-card {
+				width: 100%;
+				.u-image {
+					overflow: hidden !important;
+					border-radius: 20rpx !important;
+				}
+				.business-card-title {
+					width: 100%;
+					overflow : hidden;/*必须结合的属性,当内容溢出元素框时发生的事情*/
+					text-overflow: ellipsis;/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
+					// display: -webkit-box;/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
+					// -webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数。*/
+					// -webkit-box-orient: vertical;/*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排*/
+					line-height: 30rpx;
+					margin: 10rpx 0;
+					padding: 0 10rpx;
+				}
+				.business-card-item {
+					padding: 0 10rpx;
+					font-weight: 400;
+					font-size: 20rpx;
+					color: #676767;
+					line-height: 1.5;
+					span {
+						font-weight: 700;
+						font-size: 30rpx;
+						color: #000000;
+					}
 				}
 			}
 		}
 	}
 }
+
 /* 底部 */
 .page-footer{
 	position: fixed;
 	left: 0;
 	bottom: 0;
 	display: flex;
+	align-items: center;
+	justify-content: center;
 	width: 100%;
-	height: 100rpx;
+	height: 125rpx;
 	background-color: #FFFFFF;
 	padding-bottom: constant(safe-area-inset-bottom);
 	padding-bottom: env(safe-area-inset-bottom);
-	.footer-buy{
+	.footer-btn {
 		display: flex;
+		width: 70vw;
+	}
+	.footer-service {
+		display: flex;
+		flex-direction: column;
 		align-items: center;
-		justify-content: space-between;
-		width: 100%;
-		height: 100%;
-		.cart-add{
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			width: 100%;
-			height: 100rpx;
-			background-color: #3f9b6a;
-			text{
-				font-size: 28rpx;
-				color: #FFFFFF;
-			}
+		text {
+			margin-top: 6rpx;
+			line-height: 42rpx;
 		}
 	}
-}
+}
\ No newline at end of file
diff --git a/pages/details/details.vue b/pages/details/details.vue
index f242632..0089a9b 100644
--- a/pages/details/details.vue
+++ b/pages/details/details.vue
@@ -1,78 +1,97 @@
 <template>
   <view>
-    <!-- banner，标题 -->
-    <view class="banner-title">
-      <!-- banner -->
-      <view class="banner">
-        <swiper class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000"
-                duration="500">
-          <swiper-item v-for="(val, index) in swiperList" :key="index">
-			
-            <image :src="val.url" mode="aspectFill"></image>
-          </swiper-item>
-        </swiper>
-      </view>
-	  <!-- 标题 -->
-	  <view class="goods-title">
-	    <text>{{tableList.shopName}}</text>
-	  </view>
-	  <view class="goods-icon">
-		  <view class="goods-icon-list">靠近地铁</view>
-		  <view class="goods-icon-list">采光好</view>
-	  </view>
-      <!-- 价格 -->
-      <view class="price-info">
-        <view class="price">
-          <view>单价<text>（元/m²/月）</text></view>
-		  <view class="price-num">100</view>
-        </view>
-		<view class="price-line"></view>
-		<view class="price">
-		  <view>面积<text>（m²）</text></view>
-		  <view class="price-num">265</view>
+	<view class="banner-img">
+		<u-image :showLoading="true" :src="tableData.displayMainImage" width="100%" height="100%"></u-image>
+	</view>
+	<view class="banner">
+		<view class="banner-item info">
+			<view class="info-title">
+				{{tableData.shopName}}{{tableData.venueNumber}}，
+				{{tableData.detailedLocation}}
+				<!-- {{tableData.houseNumber}} -->
+				<!-- <span>|</span> -->
+			</view>
+			<view class="info-text">{{tableData.shopDescription}}</view>
+			<view class="info-racord">
+				<view class="info-price"><span>1000</span>元/月</view>
+				<view class="info-intention">2456人有意向</view>
+			</view>
 		</view>
-		<view class="price-line"></view>
-		<view class="price">
-		  <view>月租金<text>（元/月）</text></view>
-		  <view class="price-num">26500</view>
+		<view class="banner-item field">
+			<view class="banner-item-title">场地信息</view>
+			<view class="banner-item-form">
+				<view class="form-item" style="width: 50%;">
+					<view class="label">场地类型：</view>
+					<text>{{tableData.architecturalForm}}</text>
+				</view>
+				<view class="form-item" style="width: 50%;">
+					<view class="label">实际使用面积：</view>
+					<text>{{tableData.actualUsableArea}}</text>
+				</view>
+				<view class="form-item">
+					<view class="label">所属区域：</view>
+					<text>{{tableData.belongingRegion}}</text>
+				</view>
+				<view class="form-item">
+					<view class="label">规划图纸：</view>
+					<view>
+						<u-image v-if="tableData.architecturalDrawings" :showLoading="true" :src="tableData.architecturalDrawings" width="calc(90vw - 140rpx)" height="300rpx"></u-image>
+						<text v-else>暂无</text>
+					</view>
+					<!-- architecturalDrawings -->
+				</view>
+				<view class="form-item">
+					
+				</view>
+				<view class="form-item">
+					<view class="label" style="width: 142rpx;">位置描述：</view>
+					<text style='flex: 1;'>{{tableData.detailedLocation}}</text>
+				</view>
+			</view>
 		</view>
-      </view>
-	  <view class="goods-icon">
-	  		  <view class="goods-icon-list">2押1付</view>
-	  		  <view class="goods-icon-list">使用率80%</view>
-	  </view>
-    </view>
-    <!-- 评价 -->
-    <view class="evaluate-data">
-      <view class="title-more">
-        <view class="title">
-          <text>更多信息</text>
-        </view>
-        <view class="more">
-          <text class="iconfont icon-more"></text>
-        </view>
-      </view>
-      <view class="evaluate-list">
-        <view class="content">
-          <view class="character">
-            <text>地址：{{tableList.detailedLocation}}</text>
-          </view>
-		  <view class="character">
-		    <text>业态：零售</text>
-		  </view>
-		  <view class="character">
-		    <text>招商要求：不可使用明火</text>
-		  </view>
-        </view>
-      </view>
-    </view>
+		<view class="banner-item position">
+			<view class="banner-item-title">位置信息</view>
+			<view style="margin-top: 16rpx;">
+				<map style="width: 100%; height: 150rpx;">
+					<view class="position-info">
+						<u-image :showLoading="true" src="/static/images/location-icon.png" width="20rpx" height="20rpx"></u-image>
+						<text>{{tableData.shopName}}{{tableData.venueNumber}}</text>
+					</view>
+				</map>
+			</view>
+		</view>
+		<view class="banner-item other-business">
+			<view class="banner-item-title">周边商铺</view>
+			<view style="margin-top: 16rpx;">
+				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
+					<view v-for="(item, index) in 10" :key="index" class="scroll-view-item_H">
+						<view class="business-card">
+							<u-image :showLoading="true" src="https://cdn.uviewui.com/uview/album/1.jpg" width="100%" height="210rpx"></u-image>
+							<view class="business-card-title">
+								这里是标题这里是标题这里是标题这里是标题这里是标题
+							</view>
+							<view class="business-card-item">租金：￥<span>1067</span>/月</view>
+							<view class="business-card-item">面积：<span>81</span>/m2</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</view>
+	</view>
     <!-- 底部 -->
     <view class="page-footer">
-      <view class="footer-buy" @click="leaseAdd">
-        <view class="cart-add">
-          <text>申请租赁</text>
-        </view>
-      </view>
+		<view class="footer-service">
+			<u-image :showLoading="true" src="/static/images/sevice-icon.png" width="30rpx" height="30rpx"></u-image>
+			<text>客服</text>
+		</view>
+		<view class="footer-btn">
+			<u-button type="primary">意向申请</u-button>
+			<u-button type="success" style="margin-left: unset;" @click="leaseAdd">租赁申请</u-button>
+		</view>
+		<view class="footer-service">
+			<u-image :showLoading="true" src="/static/images/share-icon.png" width="30rpx" height="30rpx"></u-image>
+			<text>分享</text>
+		</view>
     </view>
   </view>
 </template>
@@ -82,22 +101,26 @@
 export default {
   data() {
     return {
-		tableList:{},
-      swiperList: [
-        {
-          id: 0,
-          type: 'image',
-          url: this.$imgUrl('/img/1.jpg')
-        }
-      ],
+		tableData:{},
+		swiperList: [
+			{
+				id: 0,
+				type: 'image',
+				url: this.$imgUrl('/img/1.jpg')
+			}
+		],
+		latitude: 39.909,
+		longitude: 116.39742,
     };
   },
   onLoad(option){
-	  this.tableList = JSON.parse(option.item)
-	  this.swiperList[0].url =  this.tableList.displayMainImage || this.tableList.locationDiagram
-	  				console.log( this.swiperList)
-					console.log( this.tableList)	
-
+	let data = JSON.parse(option.item)
+	this.swiperList[0].url =  data.displayMainImage || data.locationDiagram
+	this.tableData = data;
+	let location = JSON.parse(data.mapPunctuation)
+	this.latitude = location.latitude;
+	this.longitude = location.longitude;
+	console.log(this.swiperList, this.tableData);
   },
   methods: {
 		leaseAdd(){
diff --git a/pages/leaseAdd/leaseAdd.scss b/pages/leaseAdd/leaseAdd.scss
index a9722a7..d50de53 100644
--- a/pages/leaseAdd/leaseAdd.scss
+++ b/pages/leaseAdd/leaseAdd.scss
@@ -3,9 +3,13 @@
 	left: 0;
 	top: 0;
 	width: 100%;
-	height: 100%;
+	overflow-y: scroll;
+	height: calc(100% - 120rpx);
 	background-color: #f6f6f6;
 }
+.steps-box {
+	padding-top: 40rpx;
+}
 
 .add-list{
 	padding: 0 4%;
@@ -13,7 +17,6 @@
 	border-radius: 20rpx;
 	margin-top: 20rpx;
 	width: 100%;
-	padding-bottom: 150rpx;
 	.list{
 		display: flex;
 		justify-content: space-between;
@@ -56,6 +59,38 @@
 			}
 		}
 	}
+	.deom-box {
+		width: 100vw;
+		display: flex !important;
+		padding: 14rpx 0;
+		background-color: #FFFFFF;
+		border-radius: 9px;
+		// margin-top: 9px;
+		width: 100%;
+		// .u-upload {
+		// .u-add-wrap {
+		// 	width: 304rpx !important;
+		// 	height: 182rpx !important;
+		// }
+		// }
+		// .u-upload {
+		// 	height: 88px;
+		// 	width: 155px;
+		// 	background: url(/static/images/uploadID1.png);
+		// 	background-size:134rpx 188rpx;
+		// 	background-repeat:no-repeat;
+		// }
+		.img-deom {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			padding: 20rpx;
+			text {
+				margin-top: 18rpx;
+			}
+		}
+	}
 }
 
 /* 保存按钮 */
@@ -64,8 +99,9 @@
 	left: 0;
 	bottom: 0;
 	display: flex;
+	align-items: center;
 	width: 100%;
-	height: 100rpx;
+	height: 125rpx;
 	background-color: #FFFFFF;
 	padding-bottom: constant(safe-area-inset-bottom);
 	padding-bottom: env(safe-area-inset-bottom);
diff --git a/pages/leaseAdd/leaseAdd.vue b/pages/leaseAdd/leaseAdd.vue
index 509ae89..d9b0b99 100644
--- a/pages/leaseAdd/leaseAdd.vue
+++ b/pages/leaseAdd/leaseAdd.vue
@@ -1,109 +1,130 @@
 <template>
 	<view class="page">
-		<view class="add-list">
-			<view class="list">
-				<view class="title">
-					<text>租赁人姓名</text>
-					<text class="star">*</text>
-				</view>
-				<view class="content">
-					<input type="text" placeholder="请输入">
-				</view>
-			</view>
-			<view class="list">
-				<view class="title">
-					<text>身份证号</text>
-					<text class="star">*</text>
-				</view>
-				<view class="content">
-					<input type="text" placeholder="请输入">
-				</view>
-			</view>
-			<view class="list">
-				<view class="title">
-					<text>联系方式</text>
-					<text class="star">*</text>
-				</view>
-				<view class="content">
-					<input type="text" placeholder="请输入">
-				</view>
-			</view>
-			<view class="list">
-				<view class="title">
-					<text>意向租期</text>
-					<text class="star">*</text>
-				</view>
-				<view class="content">
-					<input type="text" placeholder="请选择">
-				</view>
-			</view>
-			<view class="list">
-				<view class="title">
-					<text>经营用途</text>
-					<text class="star">*</text>
-				</view>
-				<view class="content">
-					<input type="text" placeholder="请选择">
-					<image :src="$imgUrl('/right2.png')" ></image>
-				</view>
-			</view>
-			<view class="list">
-				<view class="title">
-					<text>经营类型</text>
-					<text class="star">*</text>
-				</view>
-				<view class="content">
-					<input type="text" placeholder="请选择">
-					<image :src="$imgUrl('/right2.png')"></image>
-				</view>
+		<view class="steps-box">
+			<u-steps :list="numList" :current="active"></u-steps>
+		</view>
+		<view>
+			<view class="add-list" v-if="active == 0">
+				<u-form labelPosition="left" :model="model1" :rules="rules" ref="uForm" :labelWidth="250">
+					<u-form-item label="经营用途" prop="name" borderBottom>
+						<u-input v-model="model1.name" ></u-input>
+					</u-form-item>
+					<u-form-item label="意向租期" prop="name" borderBottom>
+						<u-input v-model="model1.name" ></u-input>
+					</u-form-item>
+					<u-form-item label="经营主体" prop="name" borderBottom>
+						<u-input v-model="model1.name" ></u-input>
+					</u-form-item>
+				</u-form>
 			</view>
-			<view class="feedback-data">
-				<view>
-					<view class="title">
-						<text>法人身份证正反面</text>
-						<text class="star">*</text>
-					</view>
-				</view>
-				<view class="voucher-img">
-					<view class="voucher-list">
-						<image :src="$imgUrl('/voucher_bg.png')"></image>
-					</view>
-				</view>
+			<view class="add-list" v-else-if='active == 1'>
+				<u-form labelPosition="left" :model="model1" :rules="rules" ref="uForm" :labelWidth="250">
+					<u-form-item label="主体名称" prop="name" borderBottom>
+						<u-input v-model="model1.name" ></u-input>
+					</u-form-item>
+					<u-form-item label="统一社会信用代码" prop="name" borderBottom>
+						<u-input v-model="model1.name" ></u-input>
+					</u-form-item>
+					<u-form-item label="类型" prop="type" borderBottom>
+						<u-input v-model="model1.type" type="select" @click="model1.typeShow = true" placeholder='请选择类型'/>
+						<u-select v-model="model1.typeShow" :list="activesType" @confirm="typeChange"></u-select>
+					</u-form-item>
+					<u-form-item label="法定代表人" prop="name" borderBottom>
+						<u-input v-model="model1.name" ></u-input>
+					</u-form-item>
+					<u-form-item label="经营范围" prop="name" borderBottom>
+						<u-input v-model="model1.name" ></u-input>
+					</u-form-item>
+					<u-form-item label="注册资本" prop="name" borderBottom>
+						<u-input v-model="model1.name" ></u-input>
+					</u-form-item>
+					<u-form-item label="成立日期" prop="name" borderBottom>
+						<u-input v-model="model1.name" ></u-input>
+					</u-form-item>
+					<u-form-item label="住所" prop="name" borderBottom>
+						<u-input v-model="model1.name" ></u-input>
+					</u-form-item>
+					<u-form-item label="邮箱地址" prop="name" borderBottom>
+						<u-input v-model="model1.name" ></u-input>
+					</u-form-item>
+					<u-form-item label="经营期限" prop="name" borderBottom>
+						<u-input v-model="model1.name" ></u-input>
+					</u-form-item>
+					<u-form-item label="营业执照" prop="name" borderBottom labelPosition="top">
+						<u-upload :active="active" :file-list="model1.fileList" ></u-upload>
+					</u-form-item>
+				</u-form>
 			</view>
-			<view class="feedback-data">
-				<view>
-					<view class="title">
-						<text>营业许可证</text>
-						<text class="star">*</text>
+			<view v-else>
+				<u-form labelPosition="left" :model="model1" :rules="rules" ref="uForm" :labelWidth="250">
+					<view class="add-list">
+						<u-form-item label="经营者姓名" prop="name" borderBottom>
+							<u-input v-model="model1.name" ></u-input>
+						</u-form-item>
+						<u-form-item label="证件类型" prop="type" borderBottom>
+							<u-input v-model="model1.type" type="select" @click="model1.typeShow = true" placeholder='请选择类型'/>
+							<u-select v-model="model1.typeShow" :list="activesType" @confirm="typeChange"></u-select>
+						</u-form-item>
+						<u-form-item label="身份证号码" prop="name" borderBottom>
+							<u-input v-model="model1.name" ></u-input>
+						</u-form-item>
+						<u-form-item label="身份证有效期" prop="name" borderBottom>
+							<u-input v-model="model1.name" ></u-input>
+						</u-form-item>
 					</view>
-				</view>
-				<view class="voucher-img">
-					<view class="voucher-list">
-						<image  :src="$imgUrl('/voucher_bg.png')"></image>
-					</view>
-				</view>
-			</view>
-			<view class="feedback-data">
-				<view>
-					<view class="title">
-						<text>餐饮服务许可证</text>
-						<text class="star">*</text>
+					<view class="add-list">
+						<view class="deom-box">
+							<view class="img-deom">
+								<u-upload :active="active" :file-list="model1.fileList" :custom-btn="true" :max-count="1">
+									<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
+										<u-image width="304rpx" height="182rpx" src="/static/images/uploadID1.png"></u-image>
+									</view>
+								</u-upload>
+								<text>点击上传证件人像面</text>
+							</view>
+							<view class="img-deom">
+								<u-upload :active="active" :file-list="model1.fileList" :custom-btn="true" :max-count="1">
+									<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
+										<u-image width="304rpx" height="182rpx" src="/static/images/uploadID2.png"></u-image>
+									</view>
+								</u-upload>
+								<text>点击上传证件国徽面</text>
+							</view>
+						</view>
+					</view>	
+					<view class="add-list">
+						<view style="line-height: 60rpx;">上传示例</view>
+						<view class="deom-box">
+							<view class="img-deom">
+								<u-image width="304rpx" height="182rpx" src="/static/images/front-icon.png"></u-image>
+								<text>人脸示例图</text>
+							</view>
+							<view class="img-deom">
+								<u-image width="304rpx" height="182rpx" src="/static/images/back-icon.png"></u-image>
+								<text>国徽面示例图</text>
+							</view>
+						</view>
 					</view>
-				</view>
-				<view class="voucher-img">
-					<view class="voucher-list">
-						<image :src="$imgUrl('/voucher_bg.png')" ></image>
+					<text style="display: inline-block; font-size: 24rpx; line-height: 30px; margin: 24rpx 30rpx 0;">请拍摄证件原件，保证照片拍摄清晰，取图完整，不反光。</text>
+					<view class="add-list" labelPosition="left" :model="model1" :rules="rules" ref="uForm" :labelWidth="250">
+						<u-form-item label="是否为法人" prop="name" borderBottom>
+							<u-radio-group v-model="model1.name">
+								<u-radio :name="1">是</u-radio>
+								<u-radio :name="2">否</u-radio>
+							</u-radio-group>
+						</u-form-item>
+						<u-form-item label="企业授权书" prop="name" borderBottom labelPosition="top">
+							<u-upload :active="active" :file-list="model1.fileList" ></u-upload>
+						</u-form-item>
 					</view>
-				</view>
+				</u-form>
 			</view>
 		</view>
 		<!-- 保存按钮 -->
-		<view class="page-footer" @click="go">
-		  <view class="footer-buy">
-		    <view class="cart-add">
-		      <text>提交</text>
-		    </view>
-		  </view>
+		<view class="page-footer">
+			<u-button style="background-color: #DFE0E4; flex: 1; margin: 0 10px;" @click="toBefor" v-if="active != 0">上一步</u-button>
+			<u-button type="success" style="flex: 1; margin: 0 10px;" @click="toNext" v-if="active != 2">下一步</u-button>
+			<u-button type="success" style="flex: 1; margin: 0 10px;" @click="go" v-if="active == 2">提交申请</u-button>
 		</view>
 	</view>
 </template>
@@ -112,6 +133,23 @@
 	export default {
 		data() {
 			return {
+				active: 2,
+				numList: [{name: '租赁信息'}, {name: '主体信息'}, {name: '经营者信息'}],
+				model1: {
+					name: '',
+					type: '',
+					typeShow: false,
+					fileList: [], // 文件列表
+				},
+				rules: {},
+				// 类型
+				showType: false,
+				activesType: [
+					{value: 1, label: '类型1'},
+					{value: 2, label: '类型2'},
+				],
+				// 上传文件
+				active: '', // 地址
 				
 			};
 		},
@@ -126,10 +164,21 @@
 		    }
 		  },
 		methods:{
+			typeChange(e) {
+				this.model1.type = e[0].label;
+			},
 			go(){
 				uni.navigateTo({
 					url: '/pages/record/record'
 				})
+			},
+			// 上一步
+			toBefor() {
+				this.active = +this.active - 1;
+			},
+			// 下一步
+			toNext() {
+				this.active = +this.active + 1;
 			}
 		}
 	}
--
libgit2 0.21.4