jp-xpgj-GA-file/src/projects/business/views/Master/Activity/Add.vue

<template>
	<div>
		<common ref="common" @asynCallBack="asynCallBack"></common>
		<top-header :pageTitle="pageTitle" :rightLink="rightLink" :doRightLink="doRightLink"></top-header>

		<div class="mui-content vongi-fqhd">
			<div class="margin10">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label style="width:50%">查看活动模板</label>
						<button @click="goToTemplate" class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:50%">
							查看
						</button>
					</div>
				</form>
			</div>
			<div class="margin10">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label><i class="colorfe616c">*</i>活动标题</label>
						<input v-model="subForm.title" type="text" class="mui-input-clear" placeholder="请输入">
					</div>
				</form>
			</div>

			<!-- <draggable element="div" v-model="subForm.contentList" :options="{animation:200}"> -->
				<div v-for="(item,index) in subForm.contentList" class="vongi-cashier margin10">
					<div @click="chooseImage(index)" class="vongi-fqhd-addimg">
						<img v-if="item.picture" :src="item.picture">
						<div v-else>
							<span>添加图片</span>
							<i class="iconfont icon-23"></i>
						</div>
					</div>
					<div class="vongi-cashier-text">
						<router-link :to="{name:'MasterActivityAddText',query:{index:index}}" class="vongi-text-tit color333" v-text="item.detail"></router-link>
						<a @click="delItem(index)"><span class="mui-icon iconfont icon-guanbi1"></span></a>
						<a><span class="mui-icon iconfont icon-jiantou1"></span></a>
					</div>
				</div>
			<!-- </draggable> -->

			<div class="vongi-fqhd-add margin10">
				<a @click="addShow=true"><span class="mui-icon mui-icon-plus"></span></a>
				<div v-show="addShow" class="vongi-popover">
					<div class="mui-popover-arrow mui-bottom" style="left:43.5px"></div>
					<ul class="mui-table-view mui-grid-view mui-grid-9">
						<li class="mui-table-view-cell mui-media mui-col-xs-6">
							<a @click="addPicture">
								<span class="iconfont icon-23 color4fc5f7"></span>
								<div class="mui-media-body">图片</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-6">
							<a @click="addWord">
								<span class="iconfont icon-wenzi color4fc5f7"></span>
								<div class="mui-media-body">文字</div>
							</a>
						</li>
					</ul>
				</div>
			</div>

		</div>

		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	import draggable from 'vuedraggable'
	import * as API_Activity from '@/apis/Master/activity'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import * as types from '$project/store/mutation-types'
	import * as WxJsApi from '$project/utils/wxJsApi'
	export default {
		name: 'MasterActivityMyInfo',
		components: {
			Common,
			Loading,
			TopHeader,
			draggable
		},
		data() {
			return {
				isLoading: false,

				pageTitle: '发起活动',

				subForm: {
					title: '',
					content: '',
					contentList: [],
				},
				addShow: false,

				rightLink: {
					show: true,
					icon: 'mui-btn mui-btn-primary',
					style: 'width: 55px;height: 25px;margin-top:5px;margin-right: 0px;line-height: 5px;color: #fff;font-size:16px;border-radius:20px;',
					title: '预览'
				},
			}
		},
		created() {
			if (this.activity_form_data) {
				this.subForm = this.activity_form_data;
			}
		},
		methods: {
			//获取详情
			getInfo() {
				this.isLoading = true;
				API_Activity.getActivityInfo(this.id).then(response => {
					this.isLoading = false;
					this.detail = response;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//查看模板
			goToTemplate() {
				this.$router.push({
					name: 'MasterActivityTemplate'
				})
			},
			//向某个位置追加数据
			pushList() {
				var item = {
					picture: '',
					detail: ''
				}
				this.subForm.contentList.push(item);
				this.set_activity_form_data(this.subForm)
			},
			//删除某个元素
			delItem(index) {
				this.subForm.contentList.splice(index, 1);
				this.set_activity_form_data(this.subForm)
			},
			//增加文字
			addWord() {
				this.pushList();
				this.$router.push({
					name: 'MasterActivityAddText',
					query: {
						index: this.subForm.contentList.length - 1
					}
				})
			},
			//增加图片
			addPicture() {
				this.pushList();
				this.chooseImage(this.subForm.contentList.length - 1);
			},
			//微信选择图片
			chooseImage(index) {
				WxJsApi.chooseImage().then(res => {
					var localData = res.localData;

					if (localData.indexOf('data:image') != 0) {
						//判断是否有这样的头部
						localData = 'data:image/jpeg;base64,' + localData
					}
					localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
					this.imgBase64 = localData;
					//显示裁剪图片
					//this.showCropper('faceImageUrl');
					this.uploadpic(index);
				}).catch(error => {
					mui.toast(error);
				})
			},
			//上传图片
			uploadpic(index) {
				this.isLoading = true;
				WxJsApi.uploadPic(this.imgBase64).then(response => {
					this.isLoading = false;

					this.subForm.contentList[index]['picture'] = response;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//预览
			doRightLink() {
				if (!this.subForm.title) {
					mui.toast('请输入活动标题');
				} else {
					this.set_activity_form_data(this.subForm)
					//this.save();
					this.$router.push({
						name: 'MasterActivityAddPreview',
					})
				}
			},
			//提交保存
			/* save() {
				this.isLoading = true;
				this.subForm.content = JSON.stringify(this.subForm.contentList);
				API_Activity.addActivity(this.subForm).then(response => {
					this.isLoading = false;

					this.$router.push({
						name: 'MasterActivityAddPreview',
						query: {
							id: response.id
						}
					})
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			}, */
			asynCallBack() {

			},
			...mapMutations({
				set_activity_form_data: types.SET_ACTIVITY_FORM_DATA,
			})
		},
		mounted() {
			//获取微信配置
			WxJsApi.getWxConfig();
		},
		destroyed() {},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
				activity_form_data: 'activity_form_data',
			})
		},
	}
</script>

<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style scoped>
	.vongi-text-tit {
		min-height: 63px;
	}
</style>