shop-applet/pages/commissionedSales/addDelegation/index.vue

<template>

	<view class="content">

		<form @submit="formSubmit" report-submit='true'>
			<view class="release_content">
				<view class="release_item">
					<view class="release_item-one">
						<view class="item-one">
							被委托商家
						</view>
						<e-select v-model="formData.entrust_mer_id" :value='formData.entrust_mer_id' :options="options1"
							@change="change1" placeholder="选择选项"></e-select>
					</view>
					<view class="release_item-one">
						<view class="item-one">
							委托周期
						</view>
						<view class="">

							<input type="number" v-model="formData.entrust_day" />
						</view>

					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'><text class="iconfont icon-baobeilianjie"></text>添加产品({{productList.length}})
						</view>
						<view class="select">
							<view class="select_count" @click.stop="addProduct">
								<text v-if="productList.length == 0" class="text">选择产品</text>
								<view v-else class="text">
									<image class="image" v-for="(item,index) in productList" :key="index"
										:src="item.image"></image>
								</view>
								<text class="iconfont icon-xiangyou"></text>
							</view>
						</view>
					</view>
					<view class="content_center-one" v-for="(item,i) in productList" :key="i">
						<view class="center-one">
							<view class="center-one-img">
								<image :src="item.image||''" mode="aspectFit"></image>
							</view>
							<view class="center-one-txt">
								<view class="one-txta">
									{{item.store_name}}
								</view>
								<view class="one-txtb">
									<view class="">
										委托价:¥<span>{{item.price}}</span>
									</view>
									<view class="">
										数量:{{item.number}}
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
				<button class="release_btn button" form-type="submit">提交</button>
			</view>
		</form>


		<!-- 提到的宝贝弹窗 -->
		<uni-popup ref="associated" type="bottom">
			<associated @close="close" @getProduct="getProduct" :checkedObj="productList"></associated>
		</uni-popup>
	</view>
</template>

<script>
	import associated from '@/components/realselist/realselist.vue';
	import {
		supplychain,
		entrustchain,
		editentrust,
		entrustdetail
	} from '@/api/sale.js'
	export default {
		components: {
			associated
		},
		data() {
			return {
				value1: 1,
				value2: "",
				options1: [],

				productList: [],
				info: {
					startDate: '',
					endDate: '',
					lunar: false,
					range: true,
					insert: false,
					selected: [],
					showMonth: false
				},
				formData: {
					entrust_mer_id: '',
					entrust_day: 15,
					is_type: "4",
					product_info: [],
					content: ''
				},
				type: ''
			};
		},
		computed: {


		},


		onLoad(e) {
			this.id = e.id;
			this.type = e.type
			if (this.type) {
				uni.setNavigationBarTitle({
					title: '编辑委托'
				})
				this.editlist(e.id)
			}

		},
		mounted() {
			this.list()
		},

		methods: {
			change1(item) {
				console.log(item);
			},
			list() {
				supplychain({
					page: 1
				}).then((res => {

					for (let i in res.data.list) {
						this.options1.push({
							text: res.data.list[i].mer_name,
							value: res.data.list[i].mer_id
						})
					}
					// console.log(res)
				}))
			},
			editlist(id) {
				entrustdetail(id).then((res) => {
					this.formData.entrust_mer_id = res.data.entrust_mer_id
					this.formData.entrust_day = res.data.entrust_day
					this.productList = res.data.product_list
					this.getProduct(res.data.product_list)
				})
			},


			calendar() {
				this.$refs.calendar.open()
			},
			//关闭商品弹窗
			close() {
				this.$refs.associated.close()
			},
			//打开商品弹窗
			addProduct() {
				this.$refs.associated.open()
			},
			//获取商品信息
			getProduct(data) {
				this.productList = [];
				this.formData.product_info = [];
				this.formData.content = '';
				if (data.length > 0) {
					this.productList = data;
					for (let i in data) {
						this.formData.content += data[i].store_name + ',';
						if (typeof this.productList[i].image == 'object') {
							this.productList[i].image = this.productList[i].image[0]
						}
						this.formData.product_info.push({
							product_attr_unique: data[i].product_attr_unique,
							number: Number(data[i].number),
							price: data[i].price
						})
					}
				}
				this.formData.content = this.formData.content.slice(0, -1);
				this.$refs.associated.close()
			},
			//提交
			formSubmit(e) {
				// console.log(e)
				let that = this,
					value = that.formData;

				if (value.entrust_day.length == 0 || value.entrust_day <= 0) return that.$util.Tips({
					title: '请选择委托周期'
				});
				if (value.entrust_day < 15) return that.$util.Tips({
					title: '委托周期不得小于15天'
				});
				if (value.entrust_day > 90) return that.$util.Tips({
					title: '委托周期不得大于90天'
				});
				if (value.product_info.length == 0) return that.$util.Tips({
					title: '请选择产品'
				});
				if (!value.entrust_mer_id) return that.$util.Tips({
					title: '请添加商家'
				});
				this.type ?
					editentrust(this.id, value).then(res => {
						if (res.status == '200') {
							uni.hideLoading()
							that.$util.Tips({
								title: '编辑成功',
								icon: 'success'
							});
							that.formData = {
								entrust_mer_id: '',
								entrust_day: 0,
								is_type: "4",
								product_info: []
							}
							uni.redirectTo({
								url: '/pages/commissionedSales/initiateDelegation/index'
							})

						} else {
							that.$util.Tips({
								title: res.messge,
								icon: 'success'
							});
						}
					}).catch(err => {

						return that.$util.Tips({
							title: err
						});
					})

					:
					entrustchain(value).then(res => {
						if (res.status == '200') {
							uni.hideLoading()
							that.$util.Tips({
								title: '提交成功',
								icon: 'success'
							});
							that.formData = {
								entrust_mer_id: '',
								entrust_day: 0,
								is_type: "4",
								product_info: []
							}
							uni.redirectTo({
								url: '/pages/commissionedSales/initiateDelegation/index'
							})

						} else {
							that.$util.Tips({
								title: res.messge,
								icon: 'success'
							});
						}
					}).catch(err => {

						return that.$util.Tips({
							title: err
						});
					})

			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F5F5F5;
	}

	.content {
		height: 100vh;
		position: relative;
	}

	.release_content {

		padding: 0 28rpx;
		margin-top: 28rpx;

		.content_center-one {
			display: flex;


			.center-one {
				margin-top: 32rpx;
				margin-bottom: 32rpx;
				display: flex;

				.center-one-img {
					width: 154rpx;
					height: 154rpx;
					margin-right: 21rpx;

					image {
						width: 154rpx;
						height: 154rpx;
					}
				}

				.center-one-txt {
					.one-txta {
						font-size: 32rpx;
						font-weight: 500;
						color: #333333;
					}

					.one-txtb {
						display: flex;
						margin-top: 28rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: #999999;

						span {
							color: #F84221;
							margin-right: 30rpx;

						}
					}
				}
			}

		}

		.release_item {
			background: #ffffff;
			padding: 0 30rpx;
			border-radius: 10rpx;
			padding-top: 20rpx;

			.release_item-one {
				.item-one {
					margin-top: 32rpx;
					margin-bottom: 20rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #333333;
				}
			}

		}

		.photo_count {
			padding: 30rpx 0;
		}
	}



	/deep/.loading-img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 12rpx;
	}

	.input_photo .pictrue {
		margin-bottom: 20rpx;

		.videoHover {
			width: 180rpx;
			height: 180rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;

			>view {
				width: 50rpx;
				height: 50rpx;
				background: #000000;
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.iconfont {
					color: #ffffff;
					font-size: 21rpx;
				}
			}
		}

		.video-text {
			display: block;
			width: 180rpx;
			text-align: center;
			color: #ffffff;
			font-size: 18rpx;
			z-index: 13;
			position: absolute;
			bottom: 20rpx;
		}

		video {
			width: 180rpx;
			height: 180rpx;
			border-radius: 12rpx;
		}
	}

	.input_photo .add {
		background: #f6f6f6;
		color: #666666;

		.iconfont {
			font-size: 50rpx;
		}

		.text {
			margin-top: 20rpx;
			font-size: 27rpx;
		}
	}

	.textarea textarea {
		font-size: 28rpx;
		padding-bottom: 38rpx;
		width: 100%;
		box-sizing: border-box;
		height: 400rpx;
		overflow: hidden;
	}

	.textarea .placeholder {
		color: #BBBBBB;
	}

	.release_item .item {
		height: 106rpx;
		border-bottom: 1rpx solid #eee;
		position: relative;
		font-size: 30rpx;

		&:last-child {
			border-bottom: none;
		}

		.name {
			color: #333333;

			.iconfont {
				margin-right: 10rpx;
				font-size: 28rpx;
			}
		}

		.select {
			color: #bbbbbb;

			.select_count {
				display: flex;
				align-items: center;
			}

			.text {
				margin-right: 15rpx;
				display: flex;
				align-items: center;

				.image,
				image,
				uni-image {
					width: 60rpx;
					height: 60rpx;
					margin-right: 5rpx;
				}
			}

			.iconfont {
				font-size: 24rpx;
			}

			.text_name {
				color: var(--view-theme);
				padding: 5rpx 12rpx;
				background: var(--view-minorColor);
				border-radius: 23rpx;
				font-size: 24rpx;
				margin-right: 10rpx;

				.icon {
					color: var(--view-theme);
					font-weight: bold;
					font-size: 24rpx;
				}

				.title {
					margin: 0 10rpx;
				}

				.iconfont {
					font-size: 16rpx;
				}
			}
		}
	}

	.button {
		width: 694rpx;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		background: linear-gradient(84deg, #F98649 0%, #F34E45 100%);
		border-radius: 42px 42px 42px 42px;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.release_btn {

		position: fixed;
		bottom: 150rpx;
		left: 50%;
		margin-left: -347rpx;
	}
</style>