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

	<template>
	<view class="margin-20">
		<view @click="cropperSelect()" v-if="$isEmpty(form.poster)" class="cover center"
			style="flex-direction: column;">
			<text class="cuIcon-roundaddfill text-base" style="font-size: 70rpx;"></text>
			<text style="margin-top: 10rpx;">请上传活动封面</text>
		</view>
		<view @click="cropperSelect()" v-else class="center">
			<image class="shadow" mode="aspectFill" style="height: 340rpx;width: 95%;border-radius: 12rpx;" :src="form.poster">
			</image>
		</view>
		<view class="content">
			<view class="margin-top-10">
				<text class="cuIcon-titles" style="color: #EF9944;"></text>
				<text class="title">活动主题</text>
				<view class="solid-bottom" style="padding: 20rpx 0;">
					<u-input v-model="form.title" placeholder-style="color: #d8d8d8;" placeholder="请输入活动主题" />
				</view>
			</view>

			<view class="margin-top-30">
				<view class="title margin-left-10">
					<text>活动折扣</text>
					<text class="text-sm text-base margin-left-10" style="font-weight: 400;">({{desc}})</text>
				</view>
				<view class="solid-bottom" style="padding:60rpx 40rpx">
					<u-slider height="10" v-model="value" active-color="#EF9944" :use-slot="true">
						<view class="">
							<view class="">
								<view class="badge-button" style="display: flex;">
									<text>{{value / 10}}</text>
								</view>
							</view>
						</view>
					</u-slider>
				</view>
			</view>

			<view class="margin-top-30">
				<text class="title margin-left-10">活动时间</text>
				<view class="solid-bottom flex" style="padding: 20rpx 0;">
					<u-input input-align="center" placeholder-style="color: #d8d8d8;" disabled
						@click="timeShow=true;timeType=1" v-model="form.beginTime" placeholder="开始时间" />
					<view class="center" style="padding: 0 50rpx;">至</view>
					<u-input input-align="center" placeholder-style="color: #d8d8d8;" disabled
						@click="timeShow=true;timeType=2" v-model="form.endTime" placeholder="结束时间" />
				</view>
			</view>

			<view class="margin-top-30">
				<text class="title margin-left-10">活动详情</text>
				<view class="" style="padding: 20rpx 0;">
					<u-input :custom-style="{'lineHeight':'46rpx'}" maxlength="150" :clearable="false"
						input-align="left" :border="true" border-color="#f4f4f4" placeholder-style="color: #d8d8d8;"
						height="400" type="textarea" placeholder="请输入活动详情" v-model="form.intro" />
					<view class="text-right text-sm text-gray padding-right-20" style="margin-top: -40rpx;">
						<text>{{form.intro.length}}/150</text>
					</view>
				</view>
			</view>
		</view>


		<view class="center flex-direction" style="margin: 60rpx;">
			<view class="text-center margin-bottom-20 text-gray text-sm">
				<text>提交即表示同意</text>
				<text class="btn-color" @click="protocol">《联兑通商家联营协议》</text>
			</view>
			<view @click="publish" class="cu-btn flex  text-lg btn-bg-color radius"
				style="padding: 42rpx 0;width: 100%;">
				提交审核
			</view>
		</view>

		<toast ref="toast"></toast>
		<u-picker confirm-color="#EF9944" v-model="timeShow" mode="time" @confirm="timeConfirm" :params="params">
		</u-picker>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				desc: '',
				value: 90,

				form: {
					poster: '',
					title: '',
					discount: '',
					beginTime: '',
					endTime: '',
					intro: '',
					launchType: this.$global.SHOP,
					launchId: this.vuex_shopId,
					mallId: this.vuex_mallId,
					processDefinitionId: ''
				},
				//发布时间
				timeShow: false,
				timeType: 0,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				//裁剪框宽度
				rectWidth: 200,
				//裁剪框高度
				rectHeight: 200
			};
		},
		onLoad() {
			this.init()
			this.calcDiscount()
			this.getCropperInfo()
			this.getProcessDefinitionId()
		},
		watch:{
			value(){
				this.calcDiscount()
			}
		},
		methods: {
			calcDiscount() {
				let data = this.value / 100
				this.form.discount = data == 0 ? 1 : this.value / 100
				this.desc = data == 0 || data == 1 ? '无折扣' : (this.value / 10) + '折'
			},
			isCorrectDiscount() {
				let data = parseFloat(this.form.discount)
				if (Number.isFinite(data) && data >= 0.1 && data <= 1) {
					return true
				}
				return false
			},
			timeConfirm(e) {
				console.log(e);
				let date = e.year + '-' + e.month + '-' + e.day
				if (this.timeType == 1) {
					this.form.beginTime = date
				} else {
					this.form.endTime = date
				}
			},
			publish() {
				if (!this.form.title) {
					this.$refs.toast.warn('请上传活动封面')
					return
				}

				if (!this.form.title) {
					this.$refs.toast.warn('请输入活动标题')
					return
				}
				if (!this.form.discount) {
					this.$refs.toast.warn('请输入活动折扣')
					return
				}

				if (!this.form.beginTime) {
					this.$refs.toast.warn('请选择活动开始时间')
					return
				}
				if (!this.form.endTime) {
					this.$refs.toast.warn('请选择活动结束时间')
					return
				}
				if (!this.form.intro) {
					this.$refs.toast.warn('请输入活动详情')
					return
				}
				let params=this.$u.deepClone(this.form)
				params.beginTime=this.$dateTime.format(new Date(params.beginTime))
				params.endTime=this.$dateTime.format(new Date(params.endTime))
				this.$api.activity.publish(params).then(res => {
					if (res.success) {
						let params = {
							path: '/pages/index/index',
							title: '活动发布成功，请耐心等待审核'
						}
						uni.redirectTo({
							url: '/pages/login/submit-success?params=' + JSON.stringify(params)
						})
					}
				})
			},
			protocol() {
				uni.navigateTo({
					url: "/pages/webView/webView?url=" + this.$global.publishActivity
				})
			},
			//获取发布活动流程id
			getProcessDefinitionId() {
				let params = {
					category: 'flow_4',
					mode: 1
				}
				this.$api.flow.getProcessDefinitionId(params).then(res => {
					this.form.processDefinitionId = res.data.records[0].id
					if (this.$isEmpty(this.form.processDefinitionId)) {
						this.$dialog.showModalAndBack("系统错误，获取流程主键失败")
						return
					}
				})
			},
			init() {
				uni.$on('uAvatarCropper', (path) => {
					this.$api.uploadFile(path).then(res => {
						this.form.poster = res.data.link
					})
				})
				this.form.launchId = this.vuex_shopId
				this.form.mallId = this.vuex_mallId
			},
			async getCropperInfo() {
				let scale = 360 / 620
				this.rectWidth = parseInt(this.$u.sys().windowWidth - 40)
				this.rectHeight = parseInt(this.rectWidth * scale)
			},
			//图片裁剪
			cropperSelect() {
				let params = {
					destWidth: this.rectWidth,
					destHeight: this.rectHeight,
					rectWidth: this.rectWidth,
					rectHeight: this.rectHeight,
					fileType: 'jpg',
				}
				console.log(params);
				uni.navigateTo({
					url: "/pages/image-cropper/image-cropper" + this.$u.queryParams(params)
				})
			},
		}
	};
</script>


<style lang="scss" scoped>
	.cover {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		height: 340rpx;
	}

	.content {
		margin-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx 30rpx;

		.title {
			color: #010101;
			font-size: 30rpx;
		}
	}

	.badge-button {
		padding: 14rpx 16rpx;
		background-color: $base-color;
		color: #fff;
		border-radius: 10rpx;
		font-size: 22rpx;
		line-height: 1;
	}
</style>