guosen-ldt-mall/pages/publish/publish.vue

<template>
	<view>
		<my-bar title="发布活动" :transparent="transparent">
			<view slot="content" class="publish" @click="cropperSelect()">
				<block v-if="!form.poster">
					<u-icon name="photo" size="100" color="#cecece"></u-icon>
					<text>上传活动封面</text>
				</block>
				<image :src="form.poster" style="height: 380rpx;" v-else mode="heightFix"></image>
			</view>
		</my-bar>

		<view class="clock">
			<!-- <view class="cu-btn round sm" style="background-color: #dcdcdc;">
				<u-icon name="clock"></u-icon>
				<text class="margin-left-10">设置响应倒计时</text>
			</view>
			<view class="tips">
				<text>*</text>
				<text>如未在限定时间内响应，系统默认自动推送给旗下商户。</text>
			</view> -->
		</view>

		<view class="form">
			<u-form :model="form" :error-type="['message']" :rules="rules" ref="uForm" label-width="140">
				<u-form-item prop="title" label="标题" left-icon="bookmark">
					<u-input v-model="form.title" placeholder="请输入标题" />
				</u-form-item>
				<u-form-item prop="supplyPrice" label-width="200" label="活动折扣" left-icon="rmb-circle">
					<u-input v-model="form.discount" placeholder="请输入活动折扣(如:输入9,表示9折)" />
				</u-form-item>
				<u-form-item  @click="showCheckBox" label-width="200" label="行业类目" left-icon="grid">
					<view @click="checkboxShow=true" class="flex justify-between ">
						<view class="u-flex u-flex-wrap">
							<view v-if="!checkboxList.some((i)=>{return i.checked==true})" style="color: #c0c4cc;">请选择</view>
							<view v-for="(item, index) in checkboxList" :key="index" >
								<view v-if="item.checked" style="margin-right: 10rpx;">{{ item.dictKey }}</view>
							</view>
						</view>
						<view>
							<u-icon name="arrow-right" color="#737373"></u-icon>
						</view>
					</view>
				</u-form-item>

				<u-form-item prop="beginTime" label="开始时间" left-icon="clock" label-width="180">
					<u-input type="select" @click="timeShow=true;timeType=1" v-model="form.beginTime"
						placeholder="请选择开始时间" />
				</u-form-item>
				<u-form-item prop="endTime" label="结束时间" left-icon="clock" label-width="180">
					<u-input type="select" @click="timeShow=true;timeType=2" v-model="form.endTime"
						placeholder="请选择结束时间" />
				</u-form-item>
			</u-form>
		</view>

		<view class="form">
			<u-form label-position="top" label-width="160">
				<u-form-item label-width="200" label="活动详情" left-icon="coupon">
					<u-input type="area" height="200" v-model="form.intro" placeholder="请输入活动详情" />
				</u-form-item>
			</u-form>
		</view>

		<view class="center" style="margin: 50rpx 0;">
			<view @click="publish" class="flex flex-direction" style="width: 94%;">
				<view class="radius cu-btn btn-bg-color" style="height: 90rpx;">
					提交审核
				</view>
				<view class="text-center margin-top-20">
					<text>提交即表示同意</text>
					<text class="btn-color" @click="protocol">《联兑通商家联营协议》</text>
				</view>
			</view>
		</view>

		<u-popup v-model="checkboxShow" mode="bottom" height="50%" border-radius="12">
			<view class="padding-30">
				<u-checkbox-group>
					<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in checkboxList"
						:key="index" :name="index">
						{{ item.dictKey }}
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</u-popup>

		<cropper ref="cropper" selWidth="800rpx" selHeight="400rpx" @upload="cropperCondirm" :avatarSrc="form.pic"
			avatarStyle="width:100vw;height:100vw;">
		</cropper>
		<u-picker v-model="timeShow" mode="time" @confirm="timeConfirm" :params="params"></u-picker>
	</view>
</template>

<script>
	import myBar from "@/components/my-bar.vue"
	export default {
		components: {
			myBar
		},
		data() {
			return {
				transparent: 0,
				form: {
					poster: '',
					title: '',
					discount: '',
					labelKey:'',
					beginTime: '',
					endTime: '',
					intro: '',
					launchType:this.$global.sponsorType.mall,
					launchId:this.vuex_mallId,
					mallId:this.vuex_mallId,
					labelParentIds:'',
					labelJson:'',
					labelKey:'',
					labelValue:'',
					processDefinitionId:''
				},

				checkboxShow: false,
				timeShow: false,
				timeType: 1,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				checkboxList: [],


				rules: {
					title: [{
						required: true,
						message: '请输入标题',
						trigger: ['blur', 'change']
					}],
					beginTime: [{
						required: true,
						message: '请选择开始时间',
						trigger: 'change',
					}],
					endTime: [{
						required: true,
						message: '请选择结束时间',
						trigger: 'change',
					}],
					discount: [{
						required: true,
						message: '请输入建议供应价',
						trigger: ['blur', 'change']
					}],
					
					//裁剪框宽度
					rectWidth:200,
					//裁剪框高度
					rectHeight:200
				}
			}
		},
		onPageScroll(obj) {
			this.transparent = obj.scrollTop * 0.006;
		},
		onReady() {
			this.getElInfo()
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			uni.$on('uAvatarCropper',(path)=>{
				this.$api.uploadFile(path).then(res=>{
					this.form.poster=res.data.link
				})
			})
			this.form.mallId=this.vuex_mallId
			this.form.launchId=this.vuex_mallId
			
			this.getShopLabelByMallId()
			this.getProcessDefinitionId()
		},
		methods: {
			//获取发布活动流程id
			getProcessDefinitionId(){
				let params={
					category:'flow_4',
					mode:1
				}
				this.$api.flow.getProcessDefinitionId(params).then(res=>{
					this.form.processDefinitionId=res.data.records[0].id
					console.log(this.form.processDefinitionId)
					if (this.$isEmpty(this.form.processDefinitionId)) {
						this.$dialog.showModalAndBack("系统错误，获取流程主键失败")
						return
					}
				})
			},
			protocol(){
				uni.navigateTo({
					url: "/pages/webView/webView?url=" + this.$global.publishActivity
				})
			},
			async getElInfo() {
				let rectInfo = await this.$u.getRect('.publish');
				let scale=rectInfo.height/rectInfo.width
				this.rectWidth=parseInt(this.$u.sys().windowWidth - 20)  
				this.rectHeight=parseInt(this.rectWidth * scale)
			},
			//图片裁剪
		   cropperSelect(){
				let params={
					destWidth:this.rectWidth,
					destHeight:this.rectHeight,
					rectWidth:this.rectWidth,
					rectHeight:this.rectHeight,
					fileType: 'jpg',
				}
				uni.navigateTo({
					url:"../image-cropper/image-cropper"+this.$u.queryParams(params)
				})
			},
			//显示多选框
			showCheckBox() {
				this.checkboxShow = true
			},
			//时间回调
			timeConfirm(e) {
				console.log(e);
				let date = e.year + '-' + e.month + '-' + e.day+ ' ' + e.hour+ ':' + e.minute+ ':' + e.second
				if (this.timeType == 1) {
					this.form.beginTime = date
				} else {
					this.form.endTime = date
				}
			},
			//获取多选的标签
			getShopLabelByMallId(){
				let params = {
					current:1,
					size:50,
					code:'business_label',
					parentId:'1430415753412112385'
				}
				this.$api.mall.getTagSelect(params).then(res => {
					res.data.forEach(item => {
						item.checked = false
					})
					this.checkboxList = res.data
				})
			},
			//多选确认
			checkboxChange(e) {
				this.checkboxList[e.name].checked = e.value
				this.$forceUpdate()
			},
			//确认发布
			publish() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.doPublish()
					} else {
						console.log('验证失败');
					}
				});
			},
			doPublish() {
				if (!this.form.poster) {
					this.$u.toast('请上传封面图')
					return
				}
				let tmpList = this.checkboxList.filter(item => item.checked == true)
				let labelParentIds= new Set(tmpList.map(item=>item.parentId))
				this.form.labelParentIds=Array.from(new Set(tmpList.map(item=>item.parentId))).join(',')
				this.form.labelJson=JSON.stringify(tmpList)
				this.form.labelKey = tmpList.map(item=>item.dictKey).join(',')
				this.form.labelValue = tmpList.map(item=>item.id).join(',')
				this.form.discount=this.$digital.floatMul(this.form.discount,0.1)
				if (!this.form.labelValue) {
					this.$u.toast('请选择行业类目')
					return
				}
				this.$api.activity.publish(this.form).then(res=>{
					if (res.success) {
						uni.redirectTo({
							url:'/pages/index/submit-success'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.publish {
		overflow: hidden;
		border-radius: 10rpx;
		height: 380rpx;
		background-color: #f2f2f2;
		position: absolute;
		bottom: 20rpx;
		left: 0;
		right: 0;
		width: 92%;
		margin: 0 auto -120rpx;

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		text {
			font-size: 26rpx;
			color: #797979;
		}
	}

	.clock {
		background-color: #FFFFFF;
		// height: 230rpx;
		height: 130rpx;
		padding-bottom: 20rpx;

		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;

		.tips {
			margin-top: 10rpx;
			font-size: 24rpx;
			color: #FF9447;
		}
	}

	.form {
		margin-top: 15rpx;
		background-color: #FFFFFF;
		padding: 30rpx;
		border-radius: 10rpx;
	}
</style>