ec.uniapp-master/pages/business/activity/add.vue

<template>
	<view>
		<lf-nav title="新增活动" :showIcon="true" bgColor="#f8f8f8"></lf-nav>
		<view class="content">
			<view class="list">
				<view class="title">标题</view>
				<input class="input" placeholder="请输入标题" v-model="title" />
			</view>
			<view class="list">
				<view class="title">副标题</view>
				<input class="input" placeholder="请输入副标题" v-model="subtitle" />
			</view>
			<view class="list">
				<view class="title">活动开始时间</view>
				<view class="select" @click="show_activity_startdate = true">
					<text>{{ activity_startdate || '请选择' }}</text>
					<text class="lf-iconfont icon-xiangxia"></text>
				</view>
				<u-picker v-model="show_activity_startdate" 
					mode="time" :params="params" :default-time="activity_startdate"
					@confirm="selectDate($event, 'activity_startdate')">
				</u-picker>
			</view>
			<view class="list">
				<view class="title">活动结束时间</view>
				<view class="select" @click="show_activity_enddate = true">
					<text>{{ activity_enddate || '请选择' }}</text>
					<text class="lf-iconfont icon-xiangxia"></text>
				</view>
				<u-picker v-model="show_activity_enddate" 
					mode="time" :params="params" 
					@confirm="selectDate($event, 'activity_enddate')">
				</u-picker>
			</view>
			<view class="list">
				<view class="title">报名开始时间</view>
				<view class="select" @click="show_sign_start = true">
					<text>{{ sign_startdate || '请选择' }}</text>
					<text class="lf-iconfont icon-xiangxia"></text>
				</view>
				<u-picker v-model="show_sign_start" 
					mode="time" :params="params"
					@confirm="selectDate($event, 'sign_startdate')">
				</u-picker>
			</view>
			<view class="list">
				<view class="title">报名结束时间</view>
				<view class="select" @click="show_sign_end = true">
					<text>{{ sign_enddate || '请选择' }}</text>
					<text class="lf-iconfont icon-xiangxia"></text>
				</view>
				<u-picker v-model="show_sign_end" 
					mode="time" :params="params"
					@confirm="selectDate($event, 'sign_enddate')">
				</u-picker>
			</view>
			<view class="list">
				<view class="title">谁可参与</view>
				<view class="select" @click="show_levels = true">
					<text>{{ (levels_list[levels_index] && levels_list[levels_index].name) || '请选择' }}</text>
					<text class="lf-iconfont icon-xiangxia"></text>
				</view>
				<u-picker v-model="show_levels" 
					mode="selector" 
					:range="levels_list" 
					range-key="name"
					@confirm="levelsConfirm">
				</u-picker>
			</view>
			<view class="list">
				<view class="title">活动内容</view>
				<input class="input" placeholder="请输入活动内容" v-model="activity_content" />
			</view>
			<view class="list">
				<view class="title">活动人数</view>
				<input class="input" placeholder="请输入活动人数" v-model="activity_num" />
			</view>
			<view class="list">
				<view class="title">活动规则</view>
				<textarea class="textarea" placeholder="请输入活动规则内容" v-model="activity_rule"></textarea>
			</view>
			<!-- 上传图片 -->
			<view class="list">
				<view class="title">活动图片</view>
				<view class="my-images">
					<view class="my-image-item" @click="uploadImage" v-if="image_list.length < image_count">
						<text class="lf-iconfont icon-jia my-image-item-after"></text>
					</view>
					<view class="my-image-item" v-for="(item, index) in image_list" :key="index" @click="lookImage(index)">
						<image :src="item" mode="aspectFill"></image>
						<view class="remove-image" @click.stop="removeInage(index)">
							<text class="lf-iconfont icon-shanchu"></text>
						</view>
					</view>
				</view>
			</view>
			<button class="buttom" hover-class="lf-opacity" @click="submit" v-if="id == 0">立即新增</button>
			<view class="btn-box" v-else>
				<view class="btn2" hover-class="lf-opacity" @click="submit">保持修改</view>
				<view class="btn2" 
					style="background-color: #bd1a1a;" 
					hover-class="lf-opacity"
					@click="deleteActivity">删除活动
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { config } from '@/common/js/utils.js';
	
	export default {
		data(){
			return {
				title: '', // 标题
				subtitle: '', // 副标题
				show_activity_startdate: false, // 活动开始时间
				show_activity_enddate: false, // 活动开始时间
				activity_startdate: '',
				activity_enddate: '',
				show_sign_start: false, // 报名时间
				show_sign_end: false, // 报名时间
				sign_startdate: '',
				sign_enddate: '',
				activity_content: '', // 活动内容
				activity_num: '', // 活动人数
				activity_rule: '', // 活动规则
				image_list: [], // 刚上传的图片临时路径
				image_count: 1, // 可上传多少张图
				uploadImg: [], // 已经上传给后端的图片路径
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				token: '',
				levels_list: [], // 会员等级列表
				show_levels: false, // 参与会员
				levels_index: null,
				id: 0, // 0表示创建活动，大于0 修改活动
				user_level: null
			}
		},
		onLoad(options){
			this.token = this.$cookieStorage.get('store_token');
			console.log("config", config);
			this.getActivityLevels();
			if(options.id){
				this.id = Number(options.id);
				this.getActivityDetail();
			}
		},
		methods: {
			// 获取活动详情
			getActivityDetail(){
				uni.showLoading({
					title: '正在获取信息'
				})
				this.$http.get({
					api: 'api/supplier/activity/detail',
					data: {
						id: this.id
					},
					header: {
						token: this.token
					}
				}).then(res => {
					if(res.data.code == 200){
						let data = res.data.data;
						this.title = data.name;
						this.subtitle = data.username;
						this.activity_startdate = data.time_start;
						this.activity_enddate = data.time_end;
						this.sign_startdate = data.apply_start;
						this.sign_enddate = data.apply_end;
						this.activity_content = data.content;
						this.activity_num = data.member_count;
						this.activity_rule = data.rule;
						this.image_list = [data.image];
						this.uploadImg = [data.image];
						if(data.user_level != 0){
							this.user_level = data.user_level;
						}
					}else{
						uni.showModal({
							title: '',
							content: '活动信息获取失败了，请离开此页面稍后再试！'
						})
					}
					uni.hideLoading();
				}).catch(err => uni.hideLoading())
			},
			// 删除活动
			deleteActivity(){
				uni.showModal({
					title: '温馨提示',
					content: '您确定删除该活动吗？',
					success: result => {
						if(result.confirm){
							this.$http.post({
								api: 'api/supplier/activity/destroy',
								data: {
									id: this.id
								},
								header: {
									token: this.token
								}
							}).then(res => {
								if(res.data.code == 200){
									this.$msg(res.data.data || '活动已删除').then(() => {
										this.$toBack();
									})
								}else{
									this.$msg(res.data.data || rea.data.message || '删除失败');
								}
							})
						}
					}
				})
			},
			// 获取会员等级列表
			getActivityLevels(){
				this.$http.get({
					api: 'api/supplier/activity/levels',
					header: {
						token: this.token
					}
				}).then(res => {
					let levels_list = res.data.data || [];
					levels_list.unshift({
						id: 0,
						name: '不限会员等级'
					});
					this.levels_list = levels_list;
					if(this.user_level != null){
						levels_list.map((item, index) => {
							if(item.id == this.user_level){
								this.levels_index = index;
							}
						})
					}
				})
			},
			// 选择会员等级
			levelsConfirm(event){
				this.levels_index = event[0];
			},
			// 选择时间
			selectDate(e, key){
				this[key] = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
			},
			// 上传图片
			uploadImage(){
				let current_count = this.image_count - this.image_list.length;
				if(current_count == 0) return;
				uni.chooseImage({
					count: current_count,
					complete: result => {
						if(result.errMsg == "chooseImage:fail cancel"){
							return; // 取消选择图片
						}
						let tempFiles = result.tempFiles;
						let image_list = [];
						let overstep = false;
						tempFiles.map(item => {
							// 上传的图片需小于10MB
							if(item.size < 10000000){
								image_list.push(item.path);
							}else{
								overstep = true;
							}
						})
						if(overstep){
							uni.showModal({
								title: '温馨提示',
								content: '您上传的图片含有超出10M大小的限制，请优化大小后再上传！',
								showCancel: false
							})
						}
						this.image_list.push(...image_list);
					}
				})
			},
			// 将图片临时路径上传到后端，得到线上图片地址
			uploadDiscover(img) {
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '正在上传中'
					})
					uni.uploadFile({
						header: {
							token: this.token
						},
						url: `${config.GLOBAL.baseUrl}api/supplier/upload_image`,
						filePath: img,
						fileType: 'image',
						name: 'image',
						success: res => {
							var result = JSON.parse(res.data).data.url; 
							// this.uploadImg.push(result)
							// console.log('上传后的图片路径',this.uploadImg)
							uni.hideLoading();
							resolve(result);
						},
						fail: err => {
							console.log(err)
							uni.hideLoading();
							reject(err);
						}
					})
				})
			},
			// 预览图片
			lookImage(current){
				if(this.image_list.length <= 0) return;
				this.$u.throttle(() => {
					uni.previewImage({
						urls: this.image_list,
						current: current
					});
				}, 500);
			},
			// 移除图片
			removeInage(current){
				this.image_list.splice(current, 1);
				if(this.uploadImg.length){
					this.uploadImg.splice(current, 1);
				}
			},
			// 提交
			submit(){
				if(!this.title) return this.$msg('请输入标题');
				if(!this.subtitle) return this.$msg('请输入副标题');
				if(!this.activity_startdate) return this.$msg('未选择活动开始时间');
				if(!this.activity_enddate) return this.$msg('未选择活动结束时间');
				if(!this.sign_startdate) return this.$msg('未选择报名开始时间');
				if(!this.sign_enddate) return this.$msg('未选择报名结束时间');
				if(!this.activity_content) return this.$msg('请填写活动内容');
				if(!this.activity_num) return this.$msg('请填写活动人数');
				if(!this.activity_rule) return this.$msg('请填写活动规则');
				if(!this.image_list.length) return this.$msg('请上传活动封面图');
				
				if(this.uploadImg.length){
					this.submitHttp();
				}else{
					this.uploadDiscover(this.image_list[0]).then(res => {
						console.log("submit", res);
						this.uploadImg = [res];
						this.submitHttp();
					})
				}
			},
			submitHttp(){
				uni.showLoading({
					title: '正在提交中'
				})
				let par = {
					id: this.id,
					name: this.title,
					username: this.subtitle,
					member_count: this.activity_num,
					image: this.uploadImg[0],
					time_start: this.activity_startdate,
					time_end: this.activity_enddate,
					apply_start: this.sign_startdate,
					apply_end: this.sign_enddate,
					content: this.activity_content,
					rule: this.activity_rule,
					user_level: 0
				}
				if(this.levels_index != null){
					par.user_level = this.levels_list[this.levels_index].id;
				}
				this.$http.post({
					api: 'api/supplier/activity/store',
					data: par,
					header: {
						token: this.token
					}
				}).then(res => {
					console.log("``````", res);
					if(res.data.code == 200){
						this.$msg('操作成功', {icon: 'success'}).then(() => {
							this.$toBack();
						})
					}else{
						uni.showModal({
							title: '',
							content: res.data.message || '新增活动失败！',
							showCancel: false
						})
					}
					uni.hideLoading()
				}).catch(err => uni.hideLoading())
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 30rpx 32rpx;
		width: 750rpx;
		height: max-content;
		.list{
			width: 100%;
			padding-bottom: 60rpx;
			.title{
				font-size: 28rpx;
				color: #222222;
				margin-bottom: 20rpx;
			}
			.input{
				width: 100%;
				height: 80rpx;
				background: rgba(14, 47, 158, 0.05);
				border-radius: 5rpx;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
			}
			.select{
				width: 100%;
				height: 80rpx;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: rgba(14, 47, 158, 0.05);
				border-radius: 5rpx;
				border: 1rpx solid #0E2F9E;
				font-size: 28rpx;
				color: #0E2F9E;
			}
			.textarea{
				width: 686rpx;
				height: 283rpx;
				background: rgba(14, 47, 158, 0.05);
				border-radius: 5rpx;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
			}
		}
		
		.my-images{
			display: flex;
			flex-wrap: wrap;
			margin-top: 30rpx;
			margin-bottom: 18rpx;
			.my-image-item{
				width: 220rpx;
				height: 220rpx;
				// background: #DDDDDD;
				background-color: rgba(14, 47, 158, 0.05);
				position: relative;
				margin-right: 12rpx;
				&:nth-child(3n){
					margin-right: 0rpx;
				}
				&:nth-child(n+4){
					margin-top: 12rpx;
				}
				image{
					width: 100%;
					height: 100%;
				}
				.remove-image{
					position: absolute;
					right: -4rpx;
					top: -18rpx;
					color: #e74c3c;
					font-size: 40rpx;
					padding: 8rpx;
				}
			}
			.my-image-item-after{
				position: absolute;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 60rpx;
				color: #999999;
			}
		}
		
		.buttom{
			width: 550rpx;
			height: 100rpx;
			background: #0D2E9A;
			border-radius: 50rpx;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			color: #FFFFFF;
		}
		.btn-box{
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			.btn2{
				width: 48%;
				height: 100%;
				background-color: #0D2E9A;
				border-radius: 50rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>