minsu_goodsmonent_manage/pages/shop/home/carousel_add_edit.vue

<template>
	<div class="container add_edit">
		<el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
			<el-form-item label="轮播图片">
				<uni-file-picker v-model="imageValue" fileMediatype="image" returnType="object"
					:image-styles="imageStyle" @select="imgUpload" @delete="imgDelete" />
			</el-form-item>
			<el-form-item label="跳转类型">
				<el-radio-group v-model="form.type">
					<el-radio label="2">网页</el-radio>
					<el-radio label="1">页面</el-radio>
					<el-radio label="0">不跳转</el-radio>
				</el-radio-group>
			</el-form-item>
			<!-- <el-form-item label="地址">
				<el-select v-model="mpPageUrl" placeholder="请选择" class="sele" @change="urlChange">
					<el-option v-for="(item, idx) in urlOptions" :key="idx" :label="item.name + ' ' + item.url"
						:value="item._id"></el-option>
				</el-select>
			</el-form-item> -->
			<el-form-item label="跳转地址">
				<el-input v-model="form.url" placeholder="自动获取上面选中的值"></el-input>
				<div class="remark_txt">{{ remark }}</div>
			</el-form-item>
			<el-form-item label="排序">
				<el-input type="number" v-model.number="form.sort" min="0" placeholder="请输入排序"></el-input>
			</el-form-item>
			<el-form-item label="备注">
				<el-input v-model="form.remark" placeholder="请输入备注"></el-input>
			</el-form-item>
			<el-form-item label="状态">
				<el-switch v-model="form.state" active-color="#ff6a6c" inactive-color="#bbb" active-value="1"
					inactive-value="0"></el-switch>
			</el-form-item>
			<el-form-item>
				<el-button class="confirm_btn" @click="submitForm('ruleForm')">确 定</el-button>
				<el-button @click="returnPage">返回列表</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import bus from '@/common/bus';
	const __name = 'usemall-app-carousel';
	const __mpPage = 'usemall-app-wxmini-page';
	export default {
		data() {
			return {
				dataId: '',
				form: {
					img: '',
					type: '0',
					url: '',
					sort: 0,
					remark: '',
					state: '1',//0禁用1启用
					createTime:'',
					createBy:''
				},
				imageValue: null,
				imageStyle: {
					height: '200px',
					width: '500px'
				},
				urlOptions: [],
				remark: '',
				mpPageUrl: '',
				rules: {},
				now_date:'',//当前时间
			};
		},
		methods: {
			loadData() {

				if (!this.dataId) {
					return;
				}else{
					
				}
				//轮播信息
				this.$axios.post("/carousel/admin/info/"+this.dataId,
				{
					
				},
				{
					headers:{
						'Mall-Token': uni.getStorageSync("token")
					}
				}).then(response => {
					let res = response
					console.log(res)
					if (res.success) {
						for (let item in this.form) {
							this.form[item] = res.data[item];
						}
						console.log(this.form)
						if (this.form.img) {
							this.imageValue = {};
							this.imageValue.url = this.form.img;
						}
					} else {
					}
				}).catch(res =>{
				});
				// await this.$db[__name].tofirst(this.dataId).then(res => {
				// 	if (res.code == 200) {
				// 		for (let item in this.form) {
				// 			this.form[item] = res.datas[item];
				// 		}
				// 		if (this.form.img) {
				// 			this.imageValue = {};
				// 			this.imageValue.url = this.form.img;
				// 		}
				// 	}
				// });
			},
			submitForm(formName) {
				console.log(this.form)
				console.log(this.imageValue)
				this.getNowDate()
				
				if(this.form.type!=0 &&this.form.url==''){
					alert('跳转地址不能为空！')
				}else if(this.form.img==''){
					alert('图片不能为空！')
				}else{
					console.log('触发')
					if (!this.dataId) {
						this.$axios.post("/carousel/admin/add",
						{
							'createBy':uni.getStorageSync("nickName"),//创建人
							'createTime':this.now_date,//创建时间
							'img':this.form.img,//图片地址
							'remark':this.form.remark,//备注
							'sort':this.form.sort,//排序
							'state':this.form.state,//状态0禁用1启用
							'type':this.form.type,//跳转类型0不跳转 1跳转页面 2跳转网页
							'url':this.form.url,//跳转地址type不为0时不能为空
						},
						{
							headers:{
								'Mall-Token': uni.getStorageSync("token")
							}
						}).then(response => {
							let res = response
							console.log(res)
							if (res.success) {
								this.getOpenerEventChannel().emit('loadData');
								this.returnPage();
							} else {
							}
						}).catch(res =>{
						});
					}else{//编辑
						this.$axios.put("/carousel/admin/update",
						{
							'createBy':this.form.createBy,//创建人
							'createTime':this.form.createTime,//创建时间
							'updateBy':uni.getStorageSync("nickName"),//更新人
							'updateTime':this.now_date,//更新时间
							'img':this.form.img,//图片地址
							'remark':this.form.remark,//备注
							'sort':this.form.sort,//排序
							'state':this.form.state,//状态0禁用1启用
							'type':this.form.type,//跳转类型0不跳转 1跳转页面 2跳转网页
							'url':this.form.url,//跳转地址type不为0时不能为空
							'id':this.dataId
						},
						{
							headers:{
								'Mall-Token': uni.getStorageSync("token")
							}
						}).then(response => {
							let res = response
							if (res.success) {
								this.getOpenerEventChannel().emit('loadData');
								this.returnPage();
							} else {
								alert(res.message)
							}
						}).catch(res =>{
						});
					}
				}
				
			},
			//获取当前时间
			getNowDate() {
			  var _this = this;
			  // this.timer = setInterval(function() {
				var aData = new Date();
				var month = aData.getMonth() < 9 ? "0" + (aData.getMonth() + 1) : aData.getMonth() + 1;
				var date = aData.getDate() <= 9 ? "0" + aData.getDate() : aData.getDate();
				var date2 = aData.getDate() <= 9 ? "0" + (aData.getDate()-1) : (aData.getDate()-1);
				var Hour = aData.getHours() <= 9 ? "0" + (aData.getHours()) : aData.getHours();
				var Miunte = aData.getMinutes() <= 9 ? "0" + (aData.getMinutes()) : aData.getMinutes();
				var Seconds = aData.getSeconds() <= 9 ? "0" + (aData.getSeconds()) : aData.getSeconds();
				// console.log(aData.getTime())
				_this.now_date = aData.getFullYear() + "-" + month + "-" + date + ' '+ Hour +":"+ Miunte +":"+ Seconds;
				// console.log(aData.getFullYear() + "-" + month + "-" + date2)昨天
			  // }, 86400000);
			},
			imgUpload(e) {
				this.form.img = e.tempFiles[0].file;
				const file = this.form.img;
				
				const formData = new FormData();
				formData.append('file', file);
				// 文件上传
				this.$axios.post("/file/open/",formData,
				{
					headers:{
						'Content-type' : 'multipart/form-data'
					}
				}).then(response => {
					let res = response
					if (res.success) {
						this.form.img =res.data
					} else {
						uni.showToast({
							icon:'error',
							title: '请重新上传！'
						});
						this.form.img =''
						this.imageValue = null;
					}
				}).catch(res =>{
					uni.showToast({
						icon:'error',
						title: '请重新上传！'
					});
					this.form.img =''
					this.imageValue = null;
				});
			},
			imgDelete() {
				this.imageValue = null;
				this.form.img = '';
			},
			returnPage() {
				bus.$emit('tab-close');
				this.$router.push('/pages/shop/home/page');
			},
			// urlChange(data) {
			// 	let obj = this.urlOptions.find(x => x._id == data);
			// 	this.form.url = obj.url;
			// 	this.remark = obj.remark;
			// }
		},
		created() {
			this.dataId = this.$route.query.id || '';
			this.loadData();
		}
	};
</script>

<style></style>