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

<template>
	<view>
		<my-bar title="发布活动" :transparent="transparent">
			<view slot="content" class="publish" @click="cropperSelect">
				<block v-if="!form.pic">
					<u-icon name="photo" size="100" color="#cecece"></u-icon>
					<text>上传活动封面</text>
				</block>
				<image :src="form.pic" 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="禁止第一、含有竞争意识、夸大的宣传口号" maxlength="20"/>
				</u-form-item>
				<u-form-item label="地区" prop="address" left-icon="map">
					<u-input type="select" :select-open="regionShow" v-model="form.address" placeholder="请选择地区"
						@click="regionShow = true"></u-input>
				</u-form-item>
				<u-form-item v-if="form.address" label="详细地址" prop="title">
					<u-input :border="false" placeholder="请详细写到门店编号" v-model="addressDetail" ></u-input>
					<view slot="right">
						<u-button @click="chooseAddress" size="mini">获取地址</u-button>
					</view>
				</u-form-item>
				<!-- <u-form-item v-if="form.address" prop="title" label="详细地址">
					<u-input v-model="addressDetail" placeholder="请输入详细地址" />
				</u-form-item> -->
				<u-form-item prop="supplyPrice" label-width="250" label="建议售卖价" left-icon="rmb-circle">
					<view class="flex justify-between">
						<u-input v-model="form.supplyPrice" placeholder="请输入建议售卖价" />
						<text style="color: #737373;">(%)</text>
					</view>
				</u-form-item>
				<u-form-item prop="labelIds" @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.name }}</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-item prop="subsidy" label-width="200" label="活动补贴" left-icon="coupon">
					<view class="flex justify-between">
						<u-input v-model="form.subsidy" placeholder="请输入折扣" />
						<text style="color: #737373;">(%)</text>
					</view>
				</u-form-item>
				<u-form-item prop="hundredPointValue" label-width="200" label="积分通兑" left-icon="coupon">
					<u-input v-model="form.hundredPointValue" placeholder="100 积分 = ? 元" />
				</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="150" v-model="form.detail" placeholder="不少于100字" />
				</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 style="color: #ff9447;" @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.name }}
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</u-popup>

		<u-picker v-model="timeShow" mode="time" @confirm="timeConfirm" :params="params"></u-picker>
		<u-picker mode="region" v-model="regionShow" @confirm="regionConfirm"></u-picker>
	</view>
</template>

<script>
	import myBar from "@/components/my-bar.vue"
	export default {
		components: {
			myBar
		},
		data() {
			return {
				transparent: 0,
				form: {
					pic: '',
					title: '',
					address: '',
					supplyPrice: '',
					labelIds: '',
					beginTime: '',
					endTime: '',
					detail: '',
					subsidy: '',
					hundredPointValue: '',
					sponsorType: 2,
					auditStatus: 0
				},
				addressDetail: '',

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

				regionShow: false,

				rules: {
					title: [{
						required: true,
						message: '请输入标题',
						trigger: ['blur', 'change']
					}],
					address: [{
						required: true,
						message: '请选择地区',
						trigger: 'change',
					}],
					beginTime: [{
						required: true,
						message: '请选择开始时间',
						trigger: 'change',
					}],
					endTime: [{
						required: true,
						message: '请选择结束时间',
						trigger: 'change',
					}],
					supplyPrice: [{
						required: true,
						message: '请输入建议售卖价',
						trigger: ['blur', 'change']
					}],
					subsidy: [{
						required: true,
						message: '请输入活动补贴',
						trigger: ['blur', 'change']
					}],
					hundredPointValue: [{
						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.pic = res.data.link
				})
			})
			this.getShopLabelByMallId()
		},
		methods: {
			chooseAddress() {
				var _this = this
				uni.chooseLocation({
					success(res) {
						_this.addressDetail = res.address
					}
				})
			},
			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
				}
			},
			//选择地址回调
			regionConfirm(e) {
				this.form.address = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			//获取多选的标签
			getShopLabelByMallId() {
				let selectedShop = this.$cache.get('selectedShop')
				let labelIds = selectedShop.labelIds.split(",")
				let labelNames = selectedShop.labelNames.split(",")
				for (let i = 0; i < labelIds.length; i++) {
					let obj = {
						id: labelIds[i],
						name: labelNames[i],
						checked: false
					}
					this.checkboxList.push(obj)
				}
				// this.$api.mall.getShopLabelByMallId(this.vuex_mallId).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('验证失败');
					}
				});
			},
			protocol(){
				uni.navigateTo({
					url: "/pages/webView/webView?url=" + this.$global.publishActivity
				})
			},
			doPublish() {
				if (!this.form.pic) {
					this.$u.toast('请上传封面图')
					return
				}
				let tmp = this.checkboxList.filter(item => item.checked == true).map(item => item.id)
				this.form.labelIds = tmp.join(',')
				if (!this.form.labelIds) {
					this.$u.toast('请选择行业类目')
					return
				}
				if (this.addressDetail) {
					this.form.address = this.form.address + ' ' + this.addressDetail
				}
				this.form.sponsorId = this.vuex_shopId
				this.$api.activity.publish(this.form).then(res => {
					if (res.success) {
						this.$dialog.showModal('发布成功，请耐心等待商场管理员审核', false).then(() => {
							this.$back()
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn-bg-color{
		background-color: #FF9447;
		color: #FFFFFF;
	}
	
	.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>