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

<template>
	<view>
		<my-bar title="发布活动" :transparent="transparent">
			<view slot="content"  class="publish" @click="chooseImage">
				<block v-if="!form.image">
					<u-icon name="photo" size="100" color="#cecece"></u-icon>
					<text>上传活动封面</text>
				</block>
				<image  :src="form.image"  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" ref="uForm" label-width="140">
				<u-form-item label="标题" left-icon="bookmark">
					<u-input v-model="form.name" placeholder="请输入标题"/>
				</u-form-item>
				<u-form-item label="地址" left-icon="map">
					<u-input v-model="form.intro" placeholder="请输入地址"/>
				</u-form-item>
				<u-form-item label-width="200" label="建议供应价" left-icon="rmb-circle">
					<view class="flex justify-between">
						<u-input v-model="form.intro" placeholder="请输入建议供应价"/>
						<text style="color: #737373;">(%)</text>
					</view>
				</u-form-item>
				<u-form-item  @click="showCheckBox" label-width="200" label="行业类目" left-icon="grid" >
					<view @click="checkboxShow=true" class="flex justify-between "  >
						<view @click.stop="" style="display: flex;flex-direction: column;justify-content: center;">
							<u-checkbox-group>
								<u-checkbox v-model="item.checked" v-if="index<=1" v-for="(item, index) in checkboxList" :key="index"
									:name="item.name">
									{{ item.name }}
								</u-checkbox>
							</u-checkbox-group>
						</view>
						<view >
							<u-icon name="arrow-right" color="#737373"></u-icon>
						</view>
					</view>
				</u-form-item>
				
				<u-form-item  label="时间" left-icon="clock">
					<view class="flex ">
						<u-input type="select" @click="timeShow=true;timeType=1" v-model="form.startTime" placeholder="开始时间"/>
						<text style="margin: 0 40rpx;">至</text>
						<u-input type="select" @click="timeShow=true;timeType=2" v-model="form.endTime" placeholder="结束时间"/>
					</view>
				</u-form-item>
				<u-form-item label-width="200"	 label="活动补贴" left-icon="coupon">
					<view class="flex justify-between">
						<u-input v-model="form.intro" placeholder="请输入折扣"/>
						<text style="color: #737373;">(%)</text>
					</view>
				</u-form-item>
				<u-form-item label-width="200" label="积分通兑" left-icon="coupon">
					<u-input v-model="form.intro" placeholder="100 积分 = 10 元"/>
				</u-form-item>
				</u-form>
		</view>
		
		<view class="form">
			<u-form label-position="top" :model="form" ref="uForm" label-width="160">
				<u-form-item label-width="200" label="活动详情" left-icon="coupon">
					<u-input type="area" height="150" v-model="form.intro" placeholder="不少于100字"/>
				</u-form-item>
			</u-form>
		</view>
		
		<view class="center" style="margin: 50rpx 0;">
			<view 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">《商家活动工具活动发布规则》</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 v-model="item.checked"  v-for="(item, index) in checkboxList" :key="index"
						:name="item.name">
						{{ item.name }}
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</u-popup>
		
		<u-picker v-model="timeShow" mode="time" @confirm="timeConfirm"></u-picker>
	</view>
</template>

<script>
	import myBar from "@/components/my-bar.vue"
	export default {
		components: {
			myBar
		},
		data() {
			return {
				transparent:0,
				form: {
					image:''
				},
				checkboxShow:false,
				timeShow:false,
				timeType:1,
				checkboxList: [{
						name: '餐饮业',
						checked: false,
					},
					{
						name: '服饰业',
						checked: false,
					},
					{
						name: '美妆业',
						checked: false,
					},
					{
						name: '机械业',
						checked: false,
					},
					{
						name: '日用业',
						checked: false,
					}
				],
			}
		},
		onPageScroll(obj){
			this.transparent = obj.scrollTop*0.006;
		},
		methods: {
			showCheckBox(){
				console.log("1111");
				this.checkboxShow=true
			},
			timeConfirm(e){
				let date=e.year +'-'+ e.month +'-'+e.day
				if (this.timeType==1) {
					this.form.startTime=date
				}else{
					this.form.endTime=date
				}
			},
			async chooseImage(){
				let res=await this.$mpi.chooseImage()
				this.form.image=res[0]
				console.log(this.form.image);
			}
		}
	}
</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;
		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>