Signed-off-by: liuboyan <632697560@qq.com>

bug

pages/index/register.vue

@@ -1,60 +1,62 @@
 <template>
 	<view class="container">
-		<u-cell-group class="form-info" :border="false">
-		    <u-form :model="shopInfo" ref="shopInfo">
-				<!-- <u-form-item label="商家名称" prop="name">
-				  <u-input placeholder="请输入商家名称" label-width="180" v-model="shopInfo.name" /> -->
-				  <u-field label="商家名称" required placeholder="请输入商家名称" label-width="180" v-model="shopInfo.name"></u-field>
-				<!-- </u-form-item> -->
-				<u-cell-item title="请上传商家图标" :arrow="false">
-					<view slot="label">
-						<u-upload :action="uploadUrl" :file-list="defaultList1" :form-data="uploadData" @on-success="logoUploadSuccess"
-						 @on-error="uploadError" max-count="1"></u-upload>
-					</view>
-				</u-cell-item>
-				<u-cell-item title="请上传店铺主图" :arrow="false" class="all-width">
-					<view slot="label">
-						<u-upload :action="uploadUrl" :file-list="defaultList2" :form-data="uploadData" @on-success="uploadSuccess"
-						 @on-error="uploadError" @on-remove="uploadRemove" max-count="3"></u-upload>
-					</view>
-				</u-cell-item>
-				<u-cell-item title="请上传身份证正反面" :arrow="false" class="all-width">
-					<view slot="label" class="id-card-box">
-						<u-upload :action="uploadUrl" :file-list="defaultList3" :form-data="uploadData" @on-success="uploadIdCardSuccess1"
-						 @on-error="uploadError" :custom-btn="true" max-count="1" style="margin-right: 16px;" :style="{width: cWidth + 'px', height: (cWidth * 0.66 + 30) + 'px'}">
-							<view slot="addBtn" class="id-card card-img1" :style="{width: cWidth + 'px', height: (cWidth * 0.66 + 30) + 'px', paddingTop: (cWidth * 0.66) + 'px', backgroundSize: '100% ' + (cWidth * 0.66) + 'px'}">拍摄正面</view>
-						</u-upload>
-						<u-upload :action="uploadUrl" :file-list="defaultList4" :form-data="uploadData" @on-success="uploadIdCardSuccess2"
-						 @on-error="uploadError" :custom-btn="true" max-count="1" :style="{width: cWidth + 'px', height: (cWidth * 0.66 + 30) + 'px'}">
-							<view slot="addBtn" class="id-card card-img2" :style="{width: cWidth + 'px', height: (cWidth * 0.66 + 30) + 'px', paddingTop: (cWidth * 0.66) + 'px', backgroundSize: '100% ' + (cWidth * 0.66) + 'px'}">拍摄反面</view>
-						</u-upload>
-					</view>
-				</u-cell-item>
-				<u-cell-item title="请上传营业执照照片" required :arrow="false" class="all-width">
-					<view slot="label" class="license-box">
-						<u-upload :action="uploadUrl" :file-list="defaultList5" :form-data="uploadData" @on-success="uploadLicenseSuccess"
-						 @on-error="uploadError" :custom-btn="true" max-count="1" class="diy-upload">
-							<image slot="addBtn" class="license-img" src="../../static/images/license-img.png"></image>
-						</u-upload>
-						<view class="license-text"> 营业执照</view>
-					</view>
-				</u-cell-item>
-				<u-field label="法人姓名" required placeholder="请输入法人姓名" label-width="180" v-model="shopInfo.duty"></u-field>
-				<u-cell-item title="所在城市" required @click="regionShow = true">
-					<text v-show="shopInfo.companyAddressProvince">{{shopInfo.companyAddressProvince}}-{{shopInfo.companyAddressCity}}-{{shopInfo.companyAddressDistrict}}</text>
-				</u-cell-item>
-				<!-- <u-form-item label="联系方式" prop="contactTel"> -->
-				<u-field label="联系方式" required :error-message="errorMessage1" placeholder="请输入联系方式" label-width="180" v-model="shopInfo.contactTel"></u-field>
-					<!-- <input type="number" placeholder="请输入联系方式" label-width="180" v-model="shopInfo.contactTel" /> -->
-				<!-- </u-form-item> -->
-				<u-field label="收款人姓名" required placeholder="请输入收款人姓名" label-width="180" v-model="shopInfo.collectionName"></u-field>
-				<u-field label="户名" required placeholder="请输入户名" label-width="180" v-model="shopInfo.bankAccountName"></u-field>
-				<u-field label="银行名称" required placeholder="请输入银行名称" label-width="180" v-model="shopInfo.bankAllName"></u-field>
-				<u-field label="银行卡号" required :error-message="errorMessage2" placeholder="请输入银行卡号" label-width="180" v-model="shopInfo.bankNumber"></u-field>
-			</u-form>
-		</u-cell-group>
-		<view class="form-handle">
-			<u-button type="success" shape="circle" :ripple="true" @click="submitData" class="handle-custom">提交</u-button>
+		<u-form :model="shopInfo" ref="shopInfo" label-width="180">
+			<u-form-item label="商家名称" prop="name" required>
+				<u-input v-model="shopInfo.name" type="text" placeholder="请输入商家名称" />
+			</u-form-item>
+			<u-form-item label="请上传商家图标" placeholder="请上传商家图标" required label-position="top">
+				<u-upload :action="uploadUrl" :file-list="defaultList1" :form-data="uploadData" @on-success="logoUploadSuccess"
+				 @on-error="uploadError" max-count="1"></u-upload>
+			</u-form-item>
+			<u-form-item label="请上传店铺主图" placeholder="请上传店铺主图" required label-position="top">
+				<u-upload :action="uploadUrl" :file-list="defaultList2" :form-data="uploadData" @on-success="uploadSuccess"
+				 @on-error="uploadError" @on-remove="uploadRemove" max-count="3"></u-upload>
+			</u-form-item>
+			<u-form-item label="请上传身份证正反面" placeholder="请上传身份证正反面" required label-position="top">
+				<view class="id-card-box">
+					<u-upload :action="uploadUrl" :file-list="defaultList3" :form-data="uploadData" @on-success="uploadIdCardSuccess1"
+					 @on-error="uploadError" :custom-btn="true" max-count="1" style="margin-right: 16px;" :style="{width: cWidth + 'px', height: (cWidth * 0.66 + 30) + 'px'}">
+						<view slot="addBtn" class="id-card card-img1" :style="{width: cWidth + 'px', height: (cWidth * 0.66 + 30) + 'px', paddingTop: (cWidth * 0.66) + 'px', backgroundSize: '100% ' + (cWidth * 0.66) + 'px'}">拍摄正面</view>
+					</u-upload>
+					<u-upload :action="uploadUrl" :file-list="defaultList4" :form-data="uploadData" @on-success="uploadIdCardSuccess2"
+					 @on-error="uploadError" :custom-btn="true" max-count="1" :style="{width: cWidth + 'px', height: (cWidth * 0.66 + 30) + 'px'}">
+						<view slot="addBtn" class="id-card card-img2" :style="{width: cWidth + 'px', height: (cWidth * 0.66 + 30) + 'px', paddingTop: (cWidth * 0.66) + 'px', backgroundSize: '100% ' + (cWidth * 0.66) + 'px'}">拍摄反面</view>
+					</u-upload>
+				</view>
+			</u-form-item>
+			<u-form-item label="请上传营业执照照片" placeholder="请上传营业执照照片" label-position="top">
+				<view class="license-box">
+					<u-upload :action="uploadUrl" :file-list="defaultList5" :form-data="uploadData" @on-success="uploadLicenseSuccess"
+					 @on-error="uploadError" :custom-btn="true" max-count="1" class="diy-upload">
+						<image slot="addBtn" class="license-img" src="../../static/images/license-img.png"></image>
+					</u-upload>
+					<view class="license-text"> 营业执照</view>
+				</view>
+			</u-form-item>
+			<u-form-item label="法人姓名" prop="duty" required>
+				<u-input v-model="shopInfo.duty" type="text" placeholder="请输入法人姓名" />
+			</u-form-item>
+			<u-form-item label="所在城市" placeholder="请选择所在城市" right-icon="arrow-right" required @click.native="regionShow = true">
+				<text v-show="shopInfo.companyAddressProvince">{{shopInfo.companyAddressProvince}}-{{shopInfo.companyAddressCity}}-{{shopInfo.companyAddressDistrict}}</text>
+			</u-form-item>
+			<u-form-item label="联系方式" prop="contactTel" required>
+				<u-input v-model="shopInfo.contactTel" type="text" placeholder="请输入联系方式" />
+			</u-form-item>
+			<u-form-item label="收款人姓名" prop="collectionName" required>
+				<u-input v-model="shopInfo.collectionName" type="text" placeholder="请输入收款人姓名" />
+			</u-form-item>
+			<u-form-item label="户名" prop="bankAccountName" required>
+				<u-input v-model="shopInfo.bankAccountName" type="text" placeholder="请输入户名" />
+			</u-form-item>
+			<u-form-item label="银行名称" prop="bankAllName" required>
+				<u-input v-model="shopInfo.bankAllName" type="text" placeholder="请输入银行名称" />
+			</u-form-item>
+			<u-form-item label="银行卡号" prop="bankNumber" required>
+				<u-input v-model="shopInfo.bankNumber" type="text" placeholder="请输入银行卡号" />
+			</u-form-item>
+		</u-form>
+		<view class="handle-fix-box">
+			<u-button type="success" shape="circle" :ripple="true" :custom-style="customStyle" @click="submitData">提交</u-button>
 		</view>
 		<u-picker mode="region" v-model="regionShow" @confirm="setRegion"></u-picker>
 		<u-top-tips ref="uTips"></u-top-tips>
@@ -97,22 +99,24 @@
 				defaultList4: [],
 				defaultList5: [],
 				rules: {
-					name: [
-						{ 
-							required: true, 
-							message: '请输入姓名', 
-							// 可以单个或者同时写两个触发验证方式 
-							trigger: 'blur',
-						}
-					]
+					name: [{
+						required: true,
+						message: '请输入姓名',
+						// 可以单个或者同时写两个触发验证方式 
+						trigger: 'blur',
+					}]
 				},
 				errorMessage1: '',
-				errorMessage2: ''
+				errorMessage2: '',
+				customStyle: { //  底部悬浮按钮样式
+					height: '40px',
+					backgroundColor: '#56a83a'
+				}
 			}
 		},
 		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
 		onReady() {
-		  // this.$refs.shopInfo.setRules(this.rules);
+			// this.$refs.shopInfo.setRules(this.rules);
 		},
 		onLoad(options) {
 			this.cWidth = (uni.upx2px(750) - 40) / 2;
@@ -230,7 +234,7 @@
 			submitData() {
 				let required = true
 				for (let key in this.shopInfo) {
-					if (!this.shopInfo[key] && key !='businessLicenseCopyFilePath') {
+					if (!this.shopInfo[key] && key != 'businessLicenseCopyFilePath') {
 						required = false
 					}
 				}
@@ -311,134 +315,85 @@
 		},
 	}
 </script>
-
-<style lang="less" scoped>
+<style>
 	page {
 		width: 100%;
 		height: 100%;
 	}
-
+</style>
+<style lang="less" scoped>
 	.container {
 		width: 100%;
-		height: 100%;
 		float: left;
-		overflow-y: auto;
+		padding: 0 15px 60px 15px;
 
-		.form-info {
-			width: 100%;
-			float: left;
+		.id-card-box {
+			display: flex;
 
-			/deep/.u-label-text {
-				color: #333333;
-				line-height: 40px;
+			.id-card {
+				height: 140px;
+				margin-right: 10px;
+				box-sizing: border-box;
+				padding-top: 110px;
+				background-color: #51A539;
+				background-size: 100% 110px;
+				background-position: center top;
+				background-repeat: no-repeat;
+				border-radius: 6px;
 				font-size: 15px;
+				font-family: PingFang SC;
+				color: #FFFFFF;
+				line-height: 30px;
+				text-align: center;
 			}
 
-			/deep/.u-cell_title {
-				color: #333333;
-				line-height: 40px;
-				font-size: 15px;
+			.card-img1 {
+				background-image: url(@/static/images/card-img1.png);
 			}
 
-			.id-card-box {
-				display: flex;
-
-				.id-card {
-					height: 140px;
-					margin-right: 10px;
-					box-sizing: border-box;
-					padding-top: 110px;
-					background-color: #51A539;
-					background-size: 100% 110px;
-					background-position: center top;
-					background-repeat: no-repeat;
-					border-radius: 6px;
-					font-size: 15px;
-					font-family: PingFang SC;
-					color: #FFFFFF;
-					line-height: 30px;
-					text-align: center;
-				}
-
-				.card-img1 {
-					background-image: url(@/static/images/card-img1.png);
-				}
-
-				.card-img2 {
-					background-image: url(@/static/images/card-img2.png);
-				}
-
-				/deep/.u-list-item {
-					width: 100% !important;
-					height: 110px !important;
-				}
+			.card-img2 {
+				background-image: url(@/static/images/card-img2.png);
 			}
 
-			.license-box {
-				width: 100%;
-				height: 175px;
-				position: relative;
-
-				.diy-upload {
-					width: 100%;
-					height: 145px;
-					position: absolute;
-				}
+			/deep/.u-list-item {
+				width: 100% !important;
+				height: 110px !important;
+			}
+		}
 
-				.license-img {
-					width: 100%;
-					height: 145px;
-					position: absolute;
-				}
+		.license-box {
+			width: 100%;
+			height: 175px;
+			position: relative;
 
-				/deep/.u-list-item {
-					width: 100% !important;
-					height: 145px !important;
-				}
+			.diy-upload {
+				width: 100%;
+				height: 145px;
+				position: absolute;
 			}
 
-			.license-text {
+			.license-img {
 				width: 100%;
-				height: 30px;
-				margin-top: 5px;
-				font-size: 15px;
-				font-family: PingFang SC;
-				color: #656565;
-				line-height: 30px;
-				text-align: center;
-				position: relative;
-				top: 145px;
+				height: 145px;
+				position: absolute;
 			}
-		}
-
-		.form-handle {
-			width: calc(100% - 30px);
-			float: left;
-			height: 40px;
-			margin: 30px 15px 20px 15px;
-
 
-			.handle-custom {
-				background-color: #51A539;
-
-				/deep/button {
-					background-color: #56a83a;
-				}
-
-				/deep/.u-btn--success--disabled {
-					background-color: #74bd60 !important;
-				}
+			/deep/.u-list-item {
+				width: 100% !important;
+				height: 145px !important;
 			}
-
-			// /deep/.u-btn--success--disabled {
-			// 	background-color: #999999 !important;
-			// }
 		}
-	}
 
-	.all-width {
-		/deep/.u-cell_title {
-			width: 100% !important;
+		.handle-fix-box {
+			width: 100%;
+			box-sizing: border-box;
+			padding: 10px 15px;
+			position: fixed;
+			left: 0;
+			bottom: 0;
+			height: 60px;
+			background-color: #FFFFFF;
+			z-index: 999;
 		}
 	}
 </style>

pagesGood/goodForm.vue

@@ -1,42 +1,51 @@
 <template>
 	<view class="container">
-		<u-cell-group class="form-info" :border="false">
-			<u-field label="商品名称" placeholder="请输入商品名称" :disabled="ifEdit()" label-width="180" v-model="goodInfo.productName"></u-field>
-			<u-cell-item title="请上传商品图片(上限5张)" :arrow="false">
-				<view slot="label">
+		<u-form :model="goodInfo" ref="goodInfo" label-width="180">
+			<u-form-item label="商品名称" prop="productName" required>
+				<u-input v-model="goodInfo.productName" type="text" placeholder="请输入商品名称" :disabled="ifEdit()"/>
+			</u-form-item>
+			<u-form-item label="请上传商品图片(上限5张)" required label-position="top">
+				<view>
 					<u-image width="98px" height="98px" border-radius="5px" v-for="(item, index) in fileList" :src="item" class="good-img"
 					 v-if="ifEdit()"></u-image>
 					<u-upload :action="uploadUrl" :file-list="defaultList" :form-data="uploadData" @on-success="uploadSuccess"
 					 @on-error="uploadError" @on-remove="uploadRemove" max-count="5" :disabled="ifEdit()"></u-upload>
 				</view>
-			</u-cell-item>
-			<u-cell-item title="原价" :arrow="false">
+			</u-form-item>
+			<u-form-item label="原价" prop="originalPrice" required>
 				<u-number-box :positive-integer="false" :min="0.01" step="1" v-model="goodInfo.originalPrice" bg-color="#51A539"
 				 color="#ffffff" :disabled="ifEdit()" digit></u-number-box>
-			</u-cell-item>
-			<u-cell-item :title="formType == 1 ? '售价' : '采摘价格'" :arrow="false" v-if="formType != 2">
+			</u-form-item>
+			<u-form-item :label="formType == 1 ? '售价' : '采摘价格'" prop="bizPrice" required v-if="formType != 2">
 				<u-number-box :positive-integer="false" :min="0.01" v-model="goodInfo.bizPrice" bg-color="#51A539" color="#ffffff"
 				 :disabled="ifEdit()" digit></u-number-box>
-			</u-cell-item>
-			<u-cell-item title="起拍价" :arrow="false" v-if="formType == 2">
+			</u-form-item>
+			<u-form-item label="起拍价" prop="auctionStartPrice" required v-if="formType == 2">
 				<u-number-box :positive-integer="false" :min="0.01" v-model="goodInfo.auctionStartPrice" bg-color="#51A539" color="#ffffff"
 				 :disabled="ifEdit()" digit></u-number-box>
-			</u-cell-item>
-			<u-cell-item title="每次最低加价金额" :arrow="false" v-if="formType == 2">
+			</u-form-item>
+			<u-form-item label="每次最低加价金额" prop="auctionMinAddPrice" required v-if="formType == 2">
 				<u-number-box :positive-integer="false" :min="0.01" v-model="goodInfo.auctionMinAddPrice" bg-color="#51A539" color="#ffffff"
 				 :disabled="ifEdit()" digit></u-number-box>
-			</u-cell-item>
-			<u-field label="计量单位" placeholder="请输入计量单位" label-width="180" v-model="goodInfo.unit" :disabled="ifEdit()"></u-field>
-			<u-cell-item title="库存" :arrow="false">
+			</u-form-item>
+			<u-form-item label="计量单位" prop="unit" required>
+				<u-input v-model="goodInfo.unit" type="text" placeholder="请输入计量单位" :disabled="ifEdit()"/>
+			</u-form-item>
+			<u-form-item label="库存" prop="stock" required>
 				<u-number-box :min="1" v-model="goodInfo.stock" bg-color="#51A539" color="#ffffff" :disabled="ifEdit()"></u-number-box>
-			</u-cell-item>
-			<u-field label="商品说明" placeholder="请输入商品说明" label-width="180" v-model="goodInfo.productDescribe"
-			 :disabled="ifEdit()"></u-field>
-			<u-cell-item title="商品分类" :value="sortText" @click="selectShow = !ifEdit()"></u-cell-item>
-			<u-cell-item title="拍卖截止时间" :value="goodInfo.auctionEndTime" @click="dateShow = !ifEdit()" v-if="formType == 2"></u-cell-item>
-		</u-cell-group>
-		<view class="form-handle">
-			<u-button type="success" shape="circle" :ripple="true" @click="submitData" :disabled="getPermit()" class="handle-custom">{{type == 'add' ? '提交' : (type == 'detail' ? '编辑' : '保存')}}</u-button>
+			</u-form-item>
+			<u-form-item label="商品说明" prop="productDescribe" required>
+				<u-input v-model="goodInfo.productDescribe" type="textarea" placeholder="请输入商品说明" :disabled="ifEdit()"/>
+			</u-form-item>
+			<u-form-item label="商品分类" right-icon="arrow-right" required @click.native="selectShow = !ifEdit()">
+				<text>{{sortText}}</text>
+			</u-form-item>
+			<u-form-item label="拍卖截止时间" right-icon="arrow-right" required @click.native="dateShow = !ifEdit()" v-if="formType == 2">
+				<text>{{goodInfo.auctionEndTime}}</text>
+			</u-form-item>
+		</u-form>
+		<view class="handle-fix-box">
+			<u-button type="success" shape="circle" :ripple="true" :custom-style="customStyle" @click="submitData" :disabled="getPermit()">{{type == 'add' ? '提交' : (type == 'detail' ? '编辑' : '保存')}}</u-button>
 		</view>
 		<u-picker mode="time" v-model="dateShow" :start-year="startYear" :params="params" @confirm="setDate"></u-picker>
 		<u-select v-model="selectShow" mode="mutil-column-auto" :list="sortList" @confirm="setSort"></u-select>
@@ -86,7 +95,11 @@
 				uploadUrl: '',
 				fileList: [],
 				defaultList: [],
-				keyboardShow: false
+				keyboardShow: false,
+				customStyle: { //  底部悬浮按钮样式
+					height: '40px',
+					backgroundColor: '#56a83a'
+				}
 			}
 		},
 		onLoad(options) {
@@ -275,54 +288,28 @@
 	}
 </script>
 
-<style lang="less" scoped>
+<style>
 	page {
 		width: 100%;
 		height: 100%;
 	}
-
+</style>
+<style lang="less" scoped>
 	.container {
 		width: 100%;
-		height: 100%;
 		float: left;
-		overflow-y: auto;
+		padding: 0 15px 60px 15px;
 
-		.form-info {
+		.handle-fix-box {
 			width: 100%;
-			float: left;
-
-			/deep/.u-label-text {
-				color: #333333;
-			}
-
-			/deep/.u-cell_title {
-				color: #333333;
-			}
-
-			.good-img {
-				float: left;
-				margin: 5px;
-			}
-		}
-
-		.form-handle {
-			width: calc(100% - 30px);
-			float: left;
-			height: 40px;
-			margin: 30px 15px 20px 15px;
-
-
-			.handle-custom {
-				background-color: #51A539;
-
-				/deep/button {
-					background-color: #56a83a;
-				}
-
-				/deep/.u-btn--success--disabled {
-					background-color: #74bd60 !important;
-				}
-			}
+			box-sizing: border-box;
+			padding: 10px 15px;
+			position: fixed;
+			left: 0;
+			bottom: 0;
+			height: 60px;
+			background-color: #FFFFFF;
+			z-index: 999;
 		}
 	}
 </style>