front-end/mobile-code/src/admin/ad/add.vue

<template>
	<div class="app-content">
		<!-- 广告信息 -->
		<form @submit="formSubmit">
			<div class="module-com input-line-wrap">
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title required">广告图名称</div>
					<input v-model="form.adName" placeholder-class="phcolor" class="tui-input" name="adName" placeholder="请输入名称" maxlength="50" type="text" />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :arrow="true">
					<div class="tui-title required">开始时间</div>
					<picker mode="date" :value="form.startTime" @change="startTimeFn" class="tui-input">
						<input v-model="form.startTime" name="startTime" type="text" hidden />
						<div v-if="form.startTime">{{ form.startTime }}</div>
						<div class="tui-placeholder" v-else>请选择</div>
					</picker>
				</tui-list-cell>
				<tui-list-cell class="line-cell" :arrow="true">
					<div class="tui-title required">到期时间</div>
					<picker mode="date" :value="form.endTime" @change="endTimeFn" class="tui-input">
						<input v-model="form.endTime" name="endTime" type="text" hidden />
						<div v-if="form.endTime">{{ form.endTime }}</div>
						<div class="tui-placeholder" v-else>请选择</div>
					</picker>
				</tui-list-cell>
				<tui-list-cell class="line-cell between switch" padding="14rpx 30rpx" :hover="false">
					<div class="tui-title">马上开启</div>
					<div>
						<switch :checked="form.status ? true : false" @change="switchChangeFn" />
					</div>
				</tui-list-cell>
			</div>
			<!-- 广告图片 -->
			<div class="module-com input-line-wrap">
				<tui-list-cell class="line-img-wrap" :hover="false">
					<div>
						<span class="ad-name required">广告图片</span>
						<span class="app-color-3 app-size-24">只能上传jpg/png格式</span>
					</div>
					<div class="line-img">
						<input :value="adImgStr" name="adImgStr" type="text" hidden />
						<app-uploader :multiple="false" ref="appUploader" :imgList.sync="form.adImg" />
					</div>
				</tui-list-cell>
			</div>
			<!-- 链接方式 -->
			<div class="module-com input-line-wrap">
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title required">链接方式</div>
					<radio-group class="tui-input flex-center-between" @change="radioChange">
						<label class="list" for="customLink">
							<radio id="customLink" value="0" :checked="form.style == 0" />
							<span class="checkbox-text">自定义链接</span>
						</label>
						<label class="list" for="goodsLink">
							<radio id="goodsLink" value="1" :checked="form.style == 1" />
							<span class="checkbox-text">链接商品</span>
						</label>
					</radio-group>
				</tui-list-cell>
				<block v-if="form.style == 0">
					<tui-list-cell class="line-cell" :hover="false">
						<textarea v-model="form.url" class="tui-textarea" placeholder-class="phcolor" placeholder="请填写链接，留空点图片不跳转" auto-height />
					</tui-list-cell>
				</block>
				<block v-else>
					<tui-list-cell class="goods-blo" :hover="false">
						<div class="goods-list-wrap" v-if="!$util.isEmpty(goodsData)">
							<div class="goods-list">
								<div class="list-img">
									<img :src="goodsData.smallImgList[0]" alt="商品图片" mode="center" />
								</div>
								<div class="list-right">
									<div>{{ goodsData.goodsName }}</div>
									<div class="app-price">￥{{ goodsData.price }}</div>
								</div>
							</div>
						</div>
						<div class="admin-button-com blue" @click="selGoodsFn">选择商品</div>
					</tui-list-cell>
				</block>
			</div>
			<!-- 确认 -->
			<div class="confirm-btn">
				<button class="admin-button-com big blue" formType="submit">确认</button>
			</div>
		</form>
	</div>
</template>

<script>
	import TuiListCell from '@/components/plugin/list-cell'
	import AppUploader from '@/components/app-uploader'
	import AppDatePicker from '@/components/app-date-picker'
	const form = require('@/utils/formValidation.js')
	// api
	import { getDet, add, update } from '@/api/ad'
	import { getDetailB as getGoodsDet } from '@/api/goods'
	export default {
		name: 'ad-add',
		components: {
			TuiListCell,
			AppUploader,
			AppDatePicker
		},
		data() {
			return {
				form: {
					adName: '',
					adImg: [],
					status: 0,
					inTurn: '1',
					type: 0,
					style: 0,
					url: '',
					goodsId: '',
					startTime: 0,
					endTime: 0
				},
				// imgList: [],
				goodsData: {}
			}
		},
		computed: {
			adImgStr() {
				// let img = JSON
				if (this.$util.isArray(this.form.adImg)) {
					return this.form.adImg.join()
				} else {
					return this.form.adImg
				}
			}
		},
		onLoad(option) {
			this.setPageTitle()
			// this.init()
		},
		methods: {
			init() {
				this.type = this.option.type

				let data = uni.getStorageSync('addAdData')
				if (data) {
					uni.removeStorageSync('addAdData')
					setTimeout(() => {
						this.form = data.form
						// this.imgList = data.imgList
					})
					this.goodsData = data.goodsData
					this.getFormAdImg(data.goodsData)
				}
				let goodsData = uni.getStorageSync('adSelGoods')
				if (goodsData) {
					uni.removeStorageSync('adSelGoods')
					this.goodsData = goodsData
					this.goodsId = goodsData.id
					this.getFormAdImg(data.goodsData)
				}

				if (this.option.id && !data) {
					this._getDet()
				}
			},
			setPageTitle() {
				if (this.option.id) {
					uni.setNavigationBarTitle({
						title: this.option.type == 0 ? '修改门店轮播图' : '修改商城首页轮播图'
					})
				} else {
					uni.setNavigationBarTitle({
						title: this.option.type == 0 ? '添加门店轮播图' : '添加商城首页轮播图'
					})
				}
			},
			getFormAdImg(data) {
				if (this.$util.isArray(data.adImg)) {
					this.form.adImg = data.adImg
				} else {
					this.form.adImg = [data.adImg]
				}
			},
			// api
			_getDet() {
				getDet({ id: this.option.id }).then(res => {
					if (this.$util.isEmpty(res.data)) return
					Object.keys(this.form).forEach((i, index) => {
						if (i == 'adImg') {
							this.form.adImg = [res.data.adImgUrl]
						} else {
							this.form[i] = res.data[i]
						}
					})

					this.form.startTime = this.$util.$formatDate(this.form.startTime, 'YYYY-MM-DD')
					this.form.endTime = this.$util.$formatDate(this.form.endTime, 'YYYY-MM-DD')

					if (this.form.style && this.form.style != '0') {
						this._getGoodsDet()
					}
				})
			},
			// 获取商品详情
			_getGoodsDet() {
				getGoodsDet({ id: this.form.goodsId }).then(res => {
					if (this.$util.isEmpty(res.data)) return
					this.goodsData = res.data
				})
			},
			// 操作
			// 选择商品
			selGoodsFn() {
				let data = {
					form: this.form,
					// imgList: this.imgList,
					goodsData: this.goodsData
				}
				uni.setStorageSync('addAdData', data)
				this.$util.pageTo({
					url: '/admin/ad/sel-goods',
					query: {
						...this.option
					}
				})
			},
			startTimeFn(e) {
				console.log(e)
				this.form.startTime = e.detail.value
			},
			endTimeFn(e) {
				this.form.endTime = e.detail.value
			},
			switchChangeFn(e) {
				this.form.status = e.target.value ? 1 : 0
			},
			radioChange(e) {
				this.form.style = e.detail.value
			},
			confirmFn() {
				let hostFn = this.option.id ? update : add
				let form = JSON.parse(JSON.stringify(this.form))
				console.log(form)
				form.adImg = this.$util.imgSubstr(form.adImg)
				form.adImg = form.adImg.join()
				if (this.option.id) {
					form.id = this.option.id
				}
				if (form.style == 0) {
					delete form.goodsId
				} else {
					// form.url = ''
					delete form.url
				}
				hostFn(form).then(res => {
					let promptText = this.option.id ? '修改成功！' : '添加成功！'
					this.$msg(promptText)
				})
			},
			// 表单验证
			formSubmit(e) {
				// 表单规则
				let rules = [
					{
						name: 'adName',
						rule: ['required'],
						msg: ['请输入名称']
					},
					{
						name: 'startTime',
						rule: ['required'],
						msg: ['请选择开始时间']
					},
					{
						name: 'endTime',
						rule: ['required'],
						msg: ['请选择结束时间']
					},
					{
						name: 'adImgStr',
						rule: ['required'],
						msg: ['请先上传图片']
					}
				]
				// 进行表单检查
				let formData = e.detail.value
				let checkRes = form.validation(formData, rules)
				// 验证通过!
				if (!checkRes) {
					this.confirmFn()
				} else {
					this.$msg(checkRes)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-content {
		min-height: calc(100vh - 20px);
		padding-top: 20px;
	}
	.module-com {
		margin-bottom: 20px;
		.line-img-wrap {
			display: block;
			.line-img {
				margin-top: 30px;
			}
		}
		.goods-blo {
			display: block;
			.goods-list-wrap {
				.goods-list {
					@include disFlex(center, flex-start);
					margin-bottom: 20px;
					.list-img {
						width: 120px;
						height: 120px;
						margin-right: 20px;
						img {
							height: 100%;
						}
					}
					.list-right {
						.app-price {
							margin-top: 10px;
						}
					}
				}
			}
			.admin-button-com {
				width: 125px;
			}
		}
		.ad-name {
			color: $fontColor2;
			margin-right: 20px;
		}
	}
	// 按钮
	.confirm-btn {
		width: calc(100% - 60px);
		margin: 60px 30px 20px;
		.admin-button-com {
			width: 100%;
		}
	}
</style>