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
			return this.form.adImg.join()
		}
	},
	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
			}
			let goodsData = uni.getStorageSync('adSelGoods')
			if (goodsData) {
				uni.removeStorageSync('adSelGoods')
				this.goodsData = goodsData
				this.goodsId = goodsData.id
			}

			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 ? '添加门店轮播图' : '添加商城首页轮播图'
				})
			}
		},
		// api
		_getDet() {
			getDet({ id: this.option.id }).then(res => {
				if (this.$util.isEmpty(res.data)) return
				Object.keys(this.form).forEach((i, index) => {
					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._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>