shop-applet/pages/product/addGood/addGood.vue

<template>
	<view class='content'>
		<u--form :model="model1" :rules="rules" ref="uForm" labelPosition="top"
			:labelStyle="{fontWeight:'bold',fontSize:'32rpx'}" labelWidth='100'>
			<u-form-item label="想卖什么" prop="userInfo.name" ref="item1">
				<view class="borders">
					<u--textarea v-model="model1.userInfo.name" placeholder="请描述您想卖的货品名称，如:红富士苹果、宁夏西瓜、梨。"></u--textarea>
				</view>
			</u-form-item>
			<u-form-item label="上传商品图" prop="userInfo.name" ref="item1">
				<uploadImgVideo></uploadImgVideo>
			</u-form-item>

			<u-form-item label="商品售价" prop="userInfo.name" ref="item1">
				<view class="borders" style="width:250rpx;height: 100rpx;">
					<u--input placeholder="" v-model="text"></u--input>
				</view>
				<text style="margin: 0 20rpx;">元</text>
				<uni-section type="line" style="width:250rpx;">
					<uni-data-select v-model="text" :localdata="range" placeholder=""></uni-data-select>
				</uni-section>
			</u-form-item>
			<view class="footer">
				<view class="footer-top">
					<text style="margin: 0 auto;		">
						显示全部<u-icon style="display: inline-block;font-weight: bold;" color="$uni-newTheme-color"
							name="arrow-right"></u-icon>
					</text>
				</view>
				<view class="footer-bottom">
					发布内容越详尽，成单力越高
				</view>
			</view>

			<view class="submit-btn">
				<u-button text="立即发布获取订单" @click='goDetail' :class="{height:'200px'}" color="#33BB3C"></u-button>
			</view>
		</u--form>
	</view>
</template>

<script>
	import uploadImgVideo from "./components/uploadImgVideo.vue"
	export default {
		components: {
			uploadImgVideo,
		},
		data() {
			return {
				showSex: false,
				model1: {
					userInfo: {
						name: '',
						sex: '',
					},
				},
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				text: "",

				rules: {
					// 'userInfo.name': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请填写姓名',
					// 	trigger: ['blur', 'change']
					// },
					// 'userInfo.sex': {
					// 	type: 'string',
					// 	max: 1,
					// 	required: true,
					// 	message: '请选择男或女',
					// 	trigger: ['blur', 'change']
					// },
				},
				radio: '',
				switchVal: false
			};
		},
		methods: {
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.uForm.validateField('userInfo.sex')
			},
			goDetail() {
				uni.navigateTo({
					url: '/pages/product/addGoodDetail/addGoodDetail'
				})
			}
		},

	};
</script>

<style lang='scss'>
	.content {
		width: 100vw;
		min-height: 100vh;
		background-color: white;
		box-sizing: border-box;
		padding: 30rpx;

		.borders {
			width: 690rpx;
			border: 1px solid #CECECE;
			border-radius: 10rpx;
		}
	}

	.footer {
		position: absolute;
		bottom: 270rpx;
		left: 50%;
		transform: translate(-50%, 0);
		font-size: 28rpx;

		.footer-top {
			color: $uni-newTheme-color;
			display: flex;
			font-weight: bold;
			align-items: center;
		}

		.footer-bottom {
			font-size: 28rpx;
			color: #989898;

		}

	}

	.submit-btn {
		position: absolute;
		bottom: 86rpx;
		left: 50%;
		transform: translate(-50%, 0);
		width: 670rpx;
		border-radius: 40rpx;
		overflow: hidden;
	}

	/deep/ .uni-select {
		height: 100rpx;
		border: 2rpx #CECECE solid;
	}
</style>