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

<template>
	<view class='content'>

		<u--form :model="model1" :rules="rules" ref="uForm" labelPosition="top"
			:labelStyle="{fontSize:'32rpx',color:'#444444'}" labelWidth='120'>
			<view class="good-baseInfo">
				<u-form-item label="商品标题" prop="userInfo.name" ref="item1">
					<u--input placeholder="建议描述产品品牌、名称" v-model="text"></u--input>
				</u-form-item>
				<u-form-item class='formItem' label="商品主图" prop="userInfo.name" ref="item1">
					<view class="">
						<view style="color: #E18C34;font-size: 24rpx;margin-bottom: 30rpx;">
							上传时应注重真实性、清晰度
						</view>
						<view class="">
							<uploadImgVideo />
						</view>
					</view>
				</u-form-item>
				<u-form-item label="商品细节图" prop="userInfo.name" ref="item1">
					<view class="">
						<view style="color: #E18C34;font-size: 24rpx;margin-bottom: 30rpx;">
							请上传突出商品卖点细节图片
						</view>
						<view class="">
							<uploadImgVideo />
						</view>
					</view>
				</u-form-item>
			</view>
			<view class='tips'>
				商品图片上传时应注重真实性、清晰度和美观性，在平台上的展示效果至关重要。确保商品能够得到有效的展示和推广。
			</view>
			<view class="label-cls">
				<u-form-item label="商品分类" prop="userInfo.name" ref="item1" labelPosition="left">
					<view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right"
						@click="navgo('/pages/product/addGoodDetail/goodsType')">
						<view style="margin-right: 10rpx;line-height: 25rpx;">请选择</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="商品属性" prop="userInfo.name" ref="item1" labelPosition="left">
					<view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right"
						@click="navgo('/pages/product/addGoodDetail/goodsAttr')">
						<view style="margin-right: 10rpx;line-height: 25rpx;">去设置</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</u-form-item>
			</view>
			<view class="description">
				规格与价格
			</view>
			<view class="label-cls">
				<u-form-item label="规格与价格" prop="userInfo.name" ref="item1" labelPosition="left">
					<view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right"
						@click="navgo('/pages/product/addGoodDetail/goodsPrice')">
						<view style="margin-right: 10rpx;line-height: 25rpx;">请设置</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</u-form-item>
			</view>
			<view class="description">
				服务与承诺
			</view>
			<view class="label-cls">
				<u-form-item label="商品详细描述" prop="userInfo.name" ref="item1">
					<u--textarea v-model="value1" placeholder="货品描述请严格遵循《广告法》规定，避免出
现虚假宣传和误导消费者的词语" count border="bottom" style="background-color:#F1F1F1;border-radius: 20rpx;"></u--textarea>
				</u-form-item>
				<u-line color="#F3F3F3"></u-line>
				<u-form-item label="送货方式" labelPosition="left">
					<u-checkbox-group v-model="checkboxValue1" placement="row" slot="right">
						<u-checkbox shape="circle" v-for="(item, index) in checkboxList1" :key="index"
							:label="item.name" :name="item.name" activeColor="#20B128"
							:customStyle="{marginRight: '8px'}"
							:labelColor="checkboxValue1.includes(item.name)?'#20B128':'#777777'">
						</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
			</view>
		</u--form>

		<view class="submit-btn">
			<u-button type="primary" shape="circle" text="确认发布"></u-button>
		</view>
	</view>
</template>

<script>
	import uploadImgVideo from "../addGood/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: "",
				text1: "",
				value1: "",
				checkboxValue1: [],
				checkboxList1: [{
						name: '到店核销',
					},
					{
						name: '快递配送',
					},

				],
				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')
			},
			navgo(url) {
				uni.navigateTo({
					url
				})
			}

		},

	};
</script>

<style lang='scss'>
	.content {
		width: 100vw;
		min-height: 100vh;
		background-color: #F1F1F1;
		box-sizing: border-box;
		padding-bottom: 280rpx;
		font-family: PingFangFamily;


		.good-baseInfo {
			background-color: white;
			padding: 30rpx 30rpx 10rpx 30rpx;

		}

		.tips {
			color: #E18C34;
			font-size: 24rpx;
			background-color: #FFF1E9;
			padding: 26rpx 30rpx;
			margin-bottom: 30rpx;
		}

		.label-cls {
			background-color: white;
			padding: 8rpx 30rpx;
		}

		.description {
			background-color: #F1F1F1;
			padding: 30rpx 26rpx;
			font-size: 28rpx;
			color: #777777;
		}

		.submit-btn {
			position: fixed;
			bottom: 86rpx;
			width: 750rpx;
			padding: 20rpx 30rpx;
			background-color: white;
			z-index: 10;
			box-shadow: 0 0 0.2px rgba(0, 0, 0, 0.3);
		}

	}
</style>