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

<template>
	<view class='content'>
		<u--form :model="model1" :rules="rules" ref="uForm" :labelStyle="{fontSize:'32rpx',color:'#444444'}"
			labelWidth='auto'>
			<view class="good-baseInfo card">
				<u-form-item label="商品标题" prop="userInfo.name" ref="item1" required>
					<text slot='right' style="font-size:28rpx ; color:#989898 ;">{{value1.length}}/{{maxLength}}</text>
				</u-form-item>
				<u-form-item label="" prop="userInfo.name" ref="item1">
					<u--textarea v-model="formData.store_name" placeholder="建议描述产品品牌、名称、规格、口味"
						style="background-color: #F9F9F9;height: 166rpx;" :autoHeight='true'
						:maxlength='maxLength'></u--textarea>
				</u-form-item>

				<u-form-item label="商品主图" prop="userInfo.name" ref="item1" required>
					<text style="color: #E18C34;font-size: 24rpx">上传时应注重真实性、清晰度</text>
				</u-form-item>
				<u-form-item prop="userInfo.name" ref="item1">
					<u-upload :fileList="formData.imageList" @afterRead="afterRead1" @delete="deletePic1" name="6"
						multiple :maxCount="5">
						<view class='uploadimg'>
							<u-icon name="plus" color="#777777"></u-icon>
							<view class="" style="color: #777777;font-size: 24rpx;">
								上传图片
							</view>
						</view>
					</u-upload>
				</u-form-item>
				<u-form-item label="商品详情" prop="userInfo.name" ref="item1" required>
					<text style="color: #E18C34;font-size: 24rpx">上传时应注重真实性、清晰度</text>
				</u-form-item>
				<u-form-item prop="userInfo.name" ref="item1">
					<u-upload :fileList="formData.content.image" @afterRead="afterRead" @delete="deletePic" name="6"
						multiple :maxCount="5">
						<view class='uploadimg'>
							<u-icon name="plus" color="#777777"></u-icon>
							<view class="" style="color: #777777;font-size: 24rpx;">
								上传图片
							</view>
						</view>
					</u-upload>
				</u-form-item>
			</view>
			<view class='tips'>
				商品类目属性
			</view>
			<view class="card" style="padding: 14rpx 30rpx;">
				<u-form-item label="商品分类" prop="userInfo.name" ref="item1" labelPosition="left" required>
					<view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right"
						@click="navgo(`/pages/product/addGoodDetail/goodsType?mer_id=${mer_id}`)">
						<view style="margin-right: 10rpx;line-height: 25rpx;">{{ formData.cate_name|| '请选择'}}</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?attr=${JSON.stringify(formData.attribute) }`)">
						<view style="margin-right: 10rpx;line-height: 25rpx;">
							{{Object.values(formData.attribute).length ?"已设置":"未设置"}}
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</u-form-item>
			</view>
			<view class='tips'>
				规格与价格
			</view>
			<view class="card" style="min-height: 100rpx;padding: 14rpx 30rpx;">
				<u-form-item label="规格与价格" prop="userInfo.name" ref="item1" labelPosition="left" required border-bottom>
					<view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right"
						@click="navgo(`/pages/product/addGoodDetail/goodsPrice?attrValue=${JSON.stringify(formData.attrValue)}`)">
						<view style="margin-right: 10rpx;line-height: 25rpx;">去设置</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</u-form-item>
				<view class="" v-for="(item,index) in formData.attrValue.filter(item=> item.open)">
					<u-form-item :label="item.spec_type" label-width="350rpx" prop="userInfo.name" ref="item1"
						labelPosition="left" border-bottom>
						<view class="" style="display: flex;justify-content: space-between;width: 100%">
							<view style="font-size: 28rpx;color:#777777 ;">
								零售价
							</view>
							<view style="font-size: 28rpx;color:#777777 ;">
								{{item.price}}元/{{item.unit_name}}
							</view>
						</view>
					</u-form-item>
					<u-form-item label=" " label-width="350rpx" prop="userInfo.name" ref="item1" labelPosition="left"
						border-bottom>
						<view class="" style="display: flex;justify-content: space-between;width: 100%">
							<view style="font-size: 28rpx;color:#777777 ;">
								批发价
							</view>
							<view style="font-size: 28rpx;color:#777777 ;">
								<!-- 8元/撒 -->
								{{item.wholesale_price}}元/{{item.wholesale_unit_name}}
							</view>
						</view>
					</u-form-item>
				</view>

			</view>
			<view class='tips'>
				服务与承诺
			</view>
			<view class="card" style="padding: 14rpx 30rpx;">
				<u-form-item label="商品详细描述" prop="userInfo.name" ref="item1" labelPosition="left">
					<text slot='right' style="font-size:28rpx ; color:#989898 ;">{{value1.length}}/{{maxLength}}</text>
				</u-form-item>
				<u--textarea v-model="formData.store_info" placeholder="货品描述请严格遵循《广告法》规定，避免出现虚假宣传和误导消费者的词语"
					style="background-color: #F9F9F9;height: 166rpx;" :autoHeight='true'
					:maxlength='maxLength'></u--textarea>

				<u-line color="#F3F3F3" style="margin: 30rpx 0;"></u-line>
				<u-form-item label="送货方式" labelPosition="left" required>
					<u-checkbox-group v-model="formData.delivery_way" placement="row" slot="right">
						<u-checkbox shape="circle" v-for="(item, index) in checkboxList1" :key="index"
							:label="item.name" :name="item.value" 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 text="确认发布" @click="submit" color="#33BB3C" class="custom-style"></u-button>
		</view>

		<view class="overlay">
			<u-overlay :show="showlay">
				<view class="overlay-content">
					<view class="">
						温馨提示
					</view>
					<view class="" style="font-family: PingFangFamily;font-size: 36rpx;">
						发布中断可能导致商机流失
					</view>
					<view class="" style="font-size: 26rpx;color: #777777;">
						<view class="">
							您的商品信息已经填写了大半，
						</view>
						<view class="">
							只差最后几步就能上架销售了！
						</view>
					</view>
					<view class=""
						style="font-size: 28rpx;color: #444444;background-color: #EDF8ED;padding: 20rpx 44rpx;border-radius: 12rpx;">
						<view class="">
							越早发布产品<text style='color: #21B129;'>曝光量越高</text>
						</view>
						<view class="">
							越早发布产品可提前 <text style='color: #21B129;'>抢占商机</text>
						</view>
					</view>
					<view style="display: flex;">
						<view style="width: 236rpx;height: 84rpx;margin-right: 30rpx;">
							<u-button text="确定返回" @click='back'></u-button>
						</view>
						<view style="width: 236rpx;height: 84rpx;">
							<u-button type='primary' text="继续编辑" @click='showlay=false'></u-button>
						</view>
					</view>
				</view>
			</u-overlay>
		</view>
	</view>
</template>

<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app.js';
	import {
		formatDate
	} from '../../../libs/uniApi';

	import uploadImgVideo from "../addGood/components/uploadImgVideo.vue"
	export default {
		components: {
			uploadImgVideo,
		},
		data() {
			return {
				formData: {
					"store_name": "测试商品",
					store_info: "",
					"imageList": [

					],
					"attrValue": [

					],
					"cate_name": "",
					"unit_name": "",
					"cate_id": '',
					"mer_cate_id": [

					],
					"mer_cate_name": "测试",
					"spec_type": "0",
					"attr": [],
					"specifica": "",
					"delivery_way": [],
					"delivery_free": "1",
					"temp_id": "",
					"tempName": "",
					"once_min_count": "",
					"image": "https://crmeb-test.shop.lihaink.cn/uploads/def/20240419/a09b7188e9ef408a3f96d82b2b178082.jpeg",
					"slider_image": [

					],
					"is_good": 0,
					"is_gift_bag": 0,
					"sort": "",
					"once_count": "",
					"video_link": "",
					"content": {
						"title": "",
						"image": []
					},
					"stock": "20",
					store_info: "",
					attribute: {},
				},
				mer_id: "",
				maxLength: 30,
				fileList6: [],
				showSex: false,
				showlay: false,
				go: true,
				model1: {
					userInfo: {
						name: '',
						sex: '',
					},
				},
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				text: "",
				text1: "",
				value1: "",
				checkboxValue1: [],
				checkboxList1: [{
						name: '到店核销',
						value: 1,
					},
					{
						name: '快递配送',
						value: 2,
					},

				],
				rules: {

				},
				radio: '',
				switchVal: false
			};
		},
		methods: {

			// 删除图片
			deletePic1(event) {
				this.formData[`imageList`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead1(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.formData[`imageList`].length
				lists.map((item) => {
					this.formData[`imageList`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise1(lists[i].url)
					let item = this.formData[`imageList`][fileListLen]
					this.formData[`imageList`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise1(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: HTTP_REQUEST_URL + '/api/upload/image/field',
						filePath: url,
						name: 'field',
						success: (res) => {
							console.log(res.data)
							resolve(JSON.parse(res.data).data.path)
						}
					});
				})
			},


			// 删除图片
			deletePic(event) {
				this.formData.content.image.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.formData.content.image.length
				lists.map((item) => {
					this.formData.content.image.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.formData.content.image[fileListLen]
					this.formData.content.image.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: HTTP_REQUEST_URL + '/api/upload/image/field',
						filePath: url,
						name: 'field',
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},

			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.uForm.validateField('userInfo.sex')
			},
			navgo(url) {
				uni.navigateTo({
					url
				})
			},
			back() {
				// console.log('show')
				this.go = false
				uni.navigateBack()
			},
			showlayFn() {
				uni.navigateBack()
			},
			submit() {
				console.log(this.formData)
			},
			getAttr(object) {
				this.formData.attribute = object
			},
			getAttrValue(object) {
				this.formData.attrValue = object
				console.log(this.formData.attrValue)
			},
		},


		onLoad(option) {
			this.mer_id = option.mer_id
			if (option.typeData) {
				this.formData.cate_name = JSON.parse(option.typeData).label
				this.formData.cate_id = JSON.parse(option.typeData).value
			}
			if (option.formData) {
				let data = JSON.parse(option.formData)
				for (let key in data) {
					this.formData[key] = data[key]
				}
				console.log(this.formData)
			}

		},
		onBackPress: function(e) {
			this.showlay = true
			return this.go;
		}
	};
</script>

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


		.card {
			background-color: white;
			padding: 28rpx 30rpx;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
		}

		.uploadimg {
			width: 140rpx;
			height: 140rpx;
			border-radius: 16rpx;
			border: 2rpx solid #F1F1F1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			box-sizing: border-box;
			padding: 20rpx 0;

		}



		.tips {
			color: #777777;
			font-size: 28rpx;
			margin: 30rpx 0;
		}

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

	.overlay-content {
		width: 570rpx;
		height: 640rpx;
		box-sizing: border-box;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 16rpx;
		background-image: url('/static/images/addGodd/addGoodBg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 70rpx 0 40rpx 0;
	}
</style>