xuan-pay-cweb/subpackages/groupBuyingConfiguration/groupProduct/groupProductAdd.vue

<template>
	<view>
		<!-- 进度 -->
		<view class="width100 height90 backcorfff">
			<evan-steps :active="merchart-1" direction="horizontal" class="paddtop10">
				<evan-step title="基本信息"></evan-step>
				<evan-step title="产品详情"></evan-step>
				<evan-step title="规则内容"></evan-step>
			</evan-steps>
		</view>
		<!-- 审核状态回馈 -->
		<view class="width100 line10 "></view>
		<view class="  font18 " style="padding-bottom: 60px;">
			<!-- 基本信息 -->
			<view class="form-gorup  backcorfff font15" v-if="merchart==1">
				<view class="dis-flex marb10 bor-botm1">
					<view class="group-title marRight10 fontwig6 padleft15 paddtright10 flex-s0">团购名称:
					</view>
					<input type="text" name="name" v-model.trim="productData.name" placeholder-class="corf6 font15"
						class=" flex-1 " placeholder="请输入团购名称">
				</view>
				<view class="dis-flex marb10 bor-botm1">
					<view class="group-title marRight10 fontwig6 padleft15 paddtright10 flex-s0">团购价格:
					</view>
					<input type="digit" name="name" v-model.trim="productData.price" placeholder-class="corf6 font15"
						class=" flex-1 " placeholder="请输入团购价格(保留两位小数)">
				</view>
				<view class="dis-flex marb10 bor-botm1">
					<view class="group-title marRight10 fontwig6 padleft15 paddtright10 flex-s0">使用时间:
					</view>
					<input type="text" name="name" v-model.trim="productData.serviceTime"
						placeholder-class="corf6 font15" class=" flex-1 " placeholder="请输入使用时间">
				</view>
				<view class="dis-flex marb10 bor-botm1">
					<view class="group-title marRight10 fontwig6 padleft15 paddtright10 flex-s0">有效期:
					</view>
					<input type="text" name="name" v-model.trim="productData.validity" placeholder-class="corf6 font15"
						class=" flex-1 " placeholder="有效期">
				</view>
				<view class="dis-flex marb10 bor-botm1">
					<view class="group-title marRight10 fontwig6 padleft15 paddtright10 flex-s0 self-top">团购限制:
					</view>
					<textarea :cursor-spacing="50" class="border-r flex-1 backcor6 paading10 marb10" :focus="false"
						:disable-default-padding="false" v-model.trim="productData.astrict" placeholder="请输入限制"
						placeholder-class="font15" :maxlength="999"></textarea>
				</view>
				<view class="dis-flex marb10 bor-botm1">
					<view class="group-title marRight10 fontwig6 padleft15 paddtright10 flex-s0 self-top">团购图片:
					</view>
					<view class="imageUploadContainer flex-1">
						<view class="imageUploadList">
							<view class="imageItem" v-for="(item,index) in imgValue" :key="index">
								<image :src="imgUrl+item" mode="aspectFill" @click="previewImage(imgUrl+item)"
									:data-index="index"></image>
								<view v-if="isShowDel" class="imageDel" @click="deleteImage(item)">x</view>
							</view>
							<view v-if="isShowAdd" class="imageUpload" @click="upload">+</view>
						</view>
					</view>
				</view>

			</view>

			<!-- 产品详情 -->
			<view class="form-gorup  backcorfff font15" v-if="merchart==2">
				<view class="  width100 mart10">
					<button class="btns  " @click.stop="clickToAdd()">新增</button>
				</view>
				<uni-collapse accordion>
					<uni-collapse-item v-for="(item,index) in productDetailList" :key="index" :title="item.name">
						<view class="content dis-flex flex-sp" v-for="(item2,index2) in item.list" :key="index2">
							<view class="text">{{item2.productName}}</view>
							<view class="text">{{item2.count}}份</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			
			<!-- 规则内容 -->
			<view class="form-gorup  backcorfff font15" v-if="merchart==3">
				<view class=" marb10 ">
					<view class="group-title marRight10 fontwig6  paddtright10 flex-s0 self-top">规则内容:
					</view>
					<textarea :cursor-spacing="50" class="border-r width100 backcor6  marb10 rule" :focus="false"
						:disable-default-padding="false" v-model.trim="ruleData.content" placeholder="请输入规则内容"
						placeholder-class="font15" :maxlength="999"></textarea>
				</view>
			</view>


			<!-- 底部按钮 -->
			<view class="footer-btn">
				<button class="backcor89 fcorfff" @click="clickToSave" v-if="merchart!=2">保存</button>
				<button v-if="(status==2&&merchart<3)||merchart==2" class="backcor89 fcorfff" @click="merchart++">下一步</button>
				
			</view>

			<!-- 新增 -->
			<wybPopup ref="popup" @hide="hide()" zIndex="999" type="bottom" height="550" width="500" :scrollY="true"
				radius="6" :showCloseIcon="true">
				<view class="pop-contain pd-main">
					<view class="pop-title fontwig6"><text>添加</text></view>
				</view>
				<view class="dis-flex bor-botmb paddbotm10 height40 mart10 backcorfff"
					style="position: sticky;top: 50px; z-index: 999;" @click.stop>
					<view class="group-title marRight10 fontwig6 padleft15 paddtright10 flex-s0">类目名称:
					</view>
					<input type="text" name="name" v-model.trim="productDetail.name" placeholder-class="corf6 font15"
						class="fcor089 flex-1 pd-main " placeholder="请输入类目名称">
				</view>

				<!-- 门店产品列表 -->
				<view class=" " v-if="productList.length>0" style="padding-bottom: 60px;">
					<view class="dis-flex height40 ">
						<view class="checkFlex fotct fontwig6"></view>
						<view class="flex-1 fotct fontwig6">图片</view>
						<view class="flex-1 fotct fontwig6">名称</view>
						<view class="flex-1 fotct fontwig6">价格</view>
						<view class="flex-1 fotct fontwig6">数量</view>
					</view>
					<checkbox-group @change="checkClick">
						<view class="dis-flex  paddtop5 paddbotm5 " v-for="(item,index) in productList" :key="index">
							<view class="checkFlex fotct">
								<checkbox @click.stop class=" checkContainer" color="#089bf5" :value="String(item.id)"
									:checked="item.checkTag" />
							</view>
							<view class="flex-1 fotct">
								<image :src="imgUrl+item.img" @click.stop="previewImage(imgUrl+item.img)"
									mode="aspectFit" class="width100 height60 verc"></image>
							</view>
							<view class="flex-1 fotct">{{item.name}}</view>
							<view class="flex-1 fotct ">{{item.price}}</view>
							<view class="flex-1 fotct border-d1  "><input type="number" v-model.trim="item.countTag">
							</view>

						</view>
					</checkbox-group>
					<view class="footer-btn">
						<button class="backcor89 fcorfff" @click="saveProductDetail">保存</button>
					</view>
				</view>



			</wybPopup>

		</view>
	</view>
</template>

<script>
	import EvanStep from '@/components/evan-steps/evan-step.vue';

	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	import {
		insertGroupContent,
		editGroupContent,
		getStoreProductByList,
		editGroupContentDetail,
		getStoreGroupDetailList,
		insertGroupServeRule,
		editGroupServeRule,
		findGroupServeRuleByGroup,
	} from '@/Utils/groupBuying.js';
	const app = getApp();
	export default {
		data() {
			return {
				reqUrl: app.globalData.url, //请求地址
				imgUrl: app.globalData.imgUrl, //图片访问地址
				status: '', //1.新增 2.编辑
				storeId: '', //门店id
				merchart: 1, //当前第几步操作
				productData: { //基本信息
					name: '', //名称
					price: '', //价格
					astrict: '', //限制
					storeId: '', //门店id
					img: '', //图片
					serviceTime: '', //使用时间
					validity: '', //有效期
				},
				imgValue: [],

				/* 产品详情 */
				groupId: '', //团购编码
				productDetail: { //产品详情
					groupId: '', //团购编码
					name: '', //类目名称
					details: [], //{} //产品编码，产品数量
				},
				productDetailList:[],//产品详情列表
				productList: [], //门店产品列表
				productSelectIdList: [], //门店产品列表选中id的列表
				/* 规则内容 */
				ruleData:{
					groupId:'',
					content:'',
				}
			}
		},
		computed: {
			isShowDel() {
				return true
			},
			isShowAdd() {
				/* if(this.imgValue.length>=1){
					return false
				}else{
					return true
				} */
				return true
			},

		},
		onLoad(option) {
			
			this.storeId = option.storeId;
			this.productData.storeId = option.storeId;
			this.status = option.status;
			if (this.status == 1) {
				uni.setNavigationBarTitle({
					title: "添加团购产品"
				})
			} else {
				uni.setNavigationBarTitle({
					title: "编辑团购产品"
				})
				this.getStoreGroupDetailList();//查询产品详情
				this.findGroupServeRuleByGroup();//查询产品规则
			}
			if (option.id) {
				this.productData.id = option.id;
				this.ruleData.id = option.id;
				// this.getStoreProductById()
			}
			console.log(option, "=======")
		},
		components: {
			EvanStep,
			wybPopup
		},
		methods: {
			validate() {
				var reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/;
				if (!reg.test(this.productData.price) || this.productData.price == 0) {
					uni.showToast({
						title: "请输入正确的金额格式",
						icon: "none"
					})
					this.productData.price = "";
					return false
				}


				if (!this.productData.name || !this.productData.price || !this.productData.astrict || !this.productData
					.serviceTime || !this.productData.validity) {
					uni.showToast({
						title: "请填写完整哦!",
						icon: "none"
					})
					return false
				}
				if (this.imgValue.length == 0) {
					uni.showToast({
						title: "请选择图片上传",
						icon: "none"
					})
					return false
				}




				return true
			},
			clickToSave() {
				if (this.merchart == 1) {
					/* 第一步:团购基本内容*/
					if (!this.validate()) return; //校验是否有空
					this.productData.img = this.imgValue.join("");
					if (this.status == 1) { //1.新增 2.编辑
						this.insertGroupContent();
						return
					}
					if (this.status == 2) {
						this.editGroupContent();
						return
					}
				}
				if(this.merchart == 2){}
				
				if(this.merchart==3){/* 第三步规则内容 */
					if(!this.ruleData.content){
						uni.showToast({
							icon:'none',
							title:'请输入规则内容'
						})
						return
					}
					
					if (this.status == 1) { //1.新增 2.编辑
						this.insertGroupServeRule();
						return
					}
					if (this.status == 2) {
						this.editGroupServeRule();
						return
					}
				}
			},
			
			/* 新增配置团购基本内容 */
			insertGroupContent() {
				insertGroupContent(this.productData).then(res => {
					let title;
					if (res.return_code == '000000') {
						this.groupId = res.return_data.id;
						this.productDetail.groupId = res.return_data.id;
						this.ruleData.groupId = res.return_data.id;
						this.merchart = 2;
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			
			/* 修改配置团购基本内容*/
			editGroupContent() {
				editGroupContent(this.productData).then(res => {
					let title;
					if (res.return_code == '000000') {
						title = res.return_data;
					} else {
						title = res.return_msg;
					}
					uni.showToast({
						title: title,
						icon: 'none',
						duration: 2000
					})
					this.merchart = 2;
				})
			},

			// 删除图片
			deleteImage(data) {
				let arr = this.imgValue.filter((item) => item != data);
				this.imgValue = arr;
			},
			// 预览
			previewImage(img) {
				uni.previewImage({
					current: 0,
					indicator: "number",
					loop: "true",
					urls: [img]
				})
			},
			//上传图片
			upload() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'],
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						that.uploadFile(tempFilePaths[0]);
					},
					error: function(e) {
						console.log(e);
					}
				});
			},
			//上传
			uploadFile(imgURL) {
				const that = this;
				uni.showLoading({
					title:"加载中...",
					mask:true,
				})
				uni.uploadFile({
					url: that.reqUrl + '/fileUpload/uploadfile',
					filePath: imgURL,
					header: {
						"Authorization": app.globalData.token
					},
					name: 'files',
					success: function(uploadFileRes) {
						uni.hideLoading()
						that.getImgSignedUrl(JSON.parse(uploadFileRes.data)
							.return_data);
					},
					fail:function(err){
						
						uni.hideLoading()
						uni.showToast({
							title:err,
							icon:'none'
						})
					}
				});
			},
			//查看临时图片路径
			getImgSignedUrl(item1) {
				this.imgValue.push(item1);
				console.log(this.imgValue, "this.imgValue")
			},
			// 弹窗关闭
			hide() {

			},
			/* 查询产品详情列表 */
			getStoreGroupDetailList(){
				let params={
					groupId:this.groupId
				}
				uni.showLoading({
					title:"加载中"
				})
				getStoreGroupDetailList(params).then(res=>{
					uni.hideLoading();
					if (res.return_code == '000000') {               
					    if(res.return_data.length>0){
							this.productDetailList = res.return_data
					    }
					}else{
					    uni.showToast({
					        title: res.return_msg,
					        icon: 'none',
					        duration: 2000
					    })
					}
					
				})
			},
			//新增产品详情
			clickToAdd() {
				this.getStoreProductByList();
				// uni.navigateTo({
				// 	url:"./groupProductDetailAdd"
				// })
			},
			//获取门店产品列表
			getStoreProductByList() {
				let params = {
					storeId: this.storeId,
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.productList = [];
				getStoreProductByList(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.productList = res.return_data;
						this.productList.forEach(item => {
							item.countTag = 1;
							item.checkTag = false;
						})
						this.$refs.popup.show();
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			/* 产品列表复选款 */
			checkClick(e) {
				this.productSelectIdList = e.detail.value;
				console.log(this.productSelectIdList, "this.productSelectIdList")
			},
			/* 保存产品详情 */
			saveProductDetail() {
				if (!this.validateProductDetail()) return
				let arr = [];
				this.productSelectIdList.map(item => {
					this.productList.map(item2 => {
						if (item2.id == item) {
							arr.push(item2)
						}
					});
				});
				let flag = arr.every(item => item.countTag >= 1);
				if (!flag) {
					uni.showToast({
						icon: 'none',
						title: "勾选产品的产品数量不能小于1"
					})
					return false
				}

				this.productDetail.details = arr.map(item => {
					return {
						productId: item.id,
						count: item.countTag
					}
				});
				this.editGroupContentDetail(this.productDetail)

			},
			validateProductDetail() {
				if (!this.productDetail.name) {
					uni.showToast({
						icon: 'none',
						title: "请输入类目名称!"
					})
					return false
				}
				if (this.productSelectIdList.length == 0) {
					uni.showToast({
						icon: 'none',
						title: "请勾选产品!"
					})
					return false
				}
			
				return true
			},
			editGroupContentDetail(params) {
				uni.showLoading({
					title: "保存中..."
				})
				editGroupContentDetail(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.$refs.popup.close();
						this.getStoreGroupDetailList();
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			/* 团购规则 */
			/* 新增团购规则 */
			insertGroupServeRule(){
				insertGroupServeRule(this.ruleData).then(res=>{
					let title ;
					if (res.return_code == '000000') {
					        title = res.return_data; 
							   setTimeout(()=>{
								uni.navigateBack();
							   },1000)
					}else{
					    title = res.return_msg;
					}
					uni.showToast({
					    title: title,
					    icon: 'none',
					    duration: 2000
					}) 
					
				})
				
			},
			// 编辑团购规则
			editGroupServeRule(){
				editGroupServeRule(this.ruleData).then(res=>{
					let title ;
					if (res.return_code == '000000') {
					     title = res.return_data;  
						   setTimeout(()=>{
							uni.navigateBack();
						   },1000)
					}else{
					    title = res.return_msg;
					}
					uni.showToast({
					    title: title,
					    icon: 'none',
					    duration: 2000
					}) 
					
				})
			},
			//根据团购id查询门店规则内容
			findGroupServeRuleByGroup(){
				let params={
					groupId:this.groupId
				}
				uni.showLoading({
					title:"加载中"
				})
				findGroupServeRuleByGroup(params).then(res=>{
					uni.hideLoading();
					if (res.return_code == '000000') {  
						console.log(res.return_data,"res.return_data")
					}else{
					    uni.showToast({
					        title: res.return_msg,
					        icon: 'none',
					        duration: 2000
					    })
					}
					
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.btns {
		width: 21%;
		height: 35px;
		line-height: 35px;
		background-color: #0083f5;
		color: #FFFFFF;
		font-weight: bold;
		font-size: 12px;
		padding: 0px;
		margin: 0 0 0 auto;
	}

	/* 表单 */
	.form-gorup {
		padding: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;

		input {
			height: 40px;
			line-height: 40px;
			border-radius: 0;
			box-sizing: border-box;
		}
	}

	.form-gorup-title {
		padding: 20rpx 0;
		margin-bottom: 5rpx;
		font-weight: 500;

		width: 74px;
		white-space: nowrap;
		text-align: right;
	}

	/* 图片 */
	.imageUploadContainer {
		padding: 10upx 5upx;
		margin: 10upx 5upx;
	}

	.name {
		text-align: center;
		margin-top: -30upx;
	}

	.dragging {
		transform: scale(1.2)
	}

	.imageUploadList {
		display: flex;
		flex-wrap: wrap;
	}

	.imageItem,
	.imageUpload {
		width: 200upx;
		height: 200upx;
		margin: 30upx 15upx 30upx;
	}

	.imageDel {
		position: relative;
		left: 180upx;
		bottom: 225upx;
		background-color: rgba(0, 0, 0, 0.5);
		width: 36upx;
		text-align: center;
		line-height: 35upx;
		border-radius: 17upx;
		color: white;
		font-size: 30upx;
		padding-bottom: 2upx;
	}

	.imageItem image,
	.moveImage {
		width: 200upx;
		height: 200upx;
		border-radius: 8upx;
	}

	.imageUpload {
		line-height: 200upx;
		text-align: center;
		font-size: 150upx;
		color: #D9D9D9;
		border: 1px solid #D9D9D9;
		border-radius: 8upx;
	}

	.moveImage {
		position: absolute;
	}

	.uni-list {
		width: 260px;
	}

	.popup_foot {
		display: flex;
		border-top: 1px #F9F9F9 solid;
		line-height: 40px;
		height: 40px;
		margin-top: 30px;
	}

	.build_01 {
		line-height: 35px;
	}

	.build_01 input {
		background: #ededed;
	}

	.popup_foot_l {
		width: 50%;
		text-align: center;
	}

	.popup_foot_r {
		width: 50%;
		text-align: center;
		border-left: 1px #F9F9F9 solid;
		color: #5095D3;


	}

	/* 手风琴 */
	.content {
		padding: 15px;
		background-color: #f4f4f4;
	}

	.text {
		font-size: 14px;
		color: #666;
		line-height: 20px;
	}

	/* 弹窗 */
	.pop-contain {
		text-align: center;
		padding-top: 50px;
		background-color: #ffffff;

		.pop-title {
			text-align: center;
			height: 50px;
			line-height: 50px;
			font-size: 18px;
			position: fixed;
			z-index: 10;
			top: 0;
			left: 0;
			right: 0;
			background: #ffffff;

		}
	}

	.border-d1 {
		/* #089bf5 */
		border: 1px solid #f4f4f4;
		margin: 5px;
	}

	//checkbox
	.checkContainer {
		width: 40px;
	}

	.checkFlex {
		flex: 0.7;
	}

	.bor-botmb {
		border-bottom: 1px solid #089bf5;
	}
	
	/* 规则内容 */
	.rule{
		margin-top: 10px;
		padding:10px;
		min-height: 400px;
		box-sizing: border-box;
	}

	/* 底部按钮 */
	.footer-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		button {
			margin: 0 20px;
			border-radius: 25px;
			flex: 1;
			height: 50px;
			line-height: 50px;
		}
	}
</style>