front-end/hdApp/src/admin/goodsManage/price-increase.vue

<template>
	<div class="app-content">
		<div class="module-com flex-center-between switch-blo">
			<div class="app-size-32">开启涨价</div>
			<div>
				<switch :checked="form.riseSwitch == '0' ? false : true" @change="switchChangeFn" />
			</div>
		</div>
		<block v-if="form.riseSwitch != 0">
			<!-- 选项设置 -->
			<div class="input-line-wrap new-wrap">
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">涨价节日</div>
					<div class="tui-input button-wrap">
						<block v-for="(item, index) in festData" :key="index">
							<button class="admin-button-com" :class="[form.festIdList.includes(item.id) ? '' : 'default']" @click="selFestFn(item)">{{ item.name || '暂无' }}</button>
						</block>
					</div>
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">涨价方式</div>
					<radio-group class="tui-input flex-center-between" @change="radioChange">
						<label class="list" for="customLink">
							<radio id="customLink" value="0" :checked="form.riseType == 0" />
							<span class="checkbox-text">按百分比</span>
						</label>
						<label class="list" for="goodsLink">
							<radio id="goodsLink" value="1" :checked="form.riseType == 1" />
							<span class="checkbox-text">按金额</span>
						</label>
					</radio-group>
				</tui-list-cell>
				<block v-if="form.riseType == 0">
					<tui-list-cell class="line-cell" :hover="false">
						<div class="tui-title">比例</div>
						<input v-model="form.riseAmount" placeholder-class="phcolor" class="tui-input" name="phone" placeholder="涨价10%，请输入10" maxlength="50" type="number" />
					</tui-list-cell>
				</block>
				<block v-else>
					<tui-list-cell class="line-cell" :hover="false">
						<div class="tui-title">金额</div>
						<input v-model="form.riseAmount" placeholder-class="phcolor" class="tui-input" name="phone" placeholder="涨价80元请输入80" maxlength="50" type="number" />
					</tui-list-cell>
				</block>
			</div>
			<div class="prompt-text">节日当天和前一天，设置涨价的商品将统一按上面规则涨价。</div>
		</block>
		<button class="admin-button-com blue big confirm-btn" @click="setPrice">确定</button>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import TuiListCell from '@/components/plugin/list-cell'
	// api
	import { getFest } from '@/utils/config'
	import { getRise, updateRise } from '@/api/goods'
	export default {
		name: 'setting-price-increase',
		components: {
			TuiListCell
		},
		data() {
			return {
				// radioVal: '0',
				form: {
					riseSwitch: '0',
					riseType: '0',
					festIdList: [],
					riseAmount: ''
				}
			}
		},
		computed: {
			...mapGetters({ festData: 'getFest' })
		},
		onLoad() {
			// this.init()
		},
		methods: {
			init() {
				getFest().then(() => {
					this._getDet()
				})
			},
			_getDet() {
				return getRise().then(res => {
					if (this.$util.isEmpty(res.data)) return
					res.data.festIdList = res.data.festIdList.map(e => e + '')
					Object.keys(this.form).forEach((i, index) => {
						this.form[i] = res.data[i]
					})
				})
			},
			setPrice() {
				if (this.form.festIdList.length == 0) {
					this.$msg('请先选择节日!')
					return false
				}
				if (!this.form.riseAmount) {
					this.$msg('请先输入比例或者金额!')
					return false
				}
				updateRise(this.form).then(res => {
					this.$msg('更新成功!')
				})
			},
			selFestFn(item) {
				let index = this.form.festIdList.findIndex(e => e == item.id)
				if (index == -1) {
					this.form.festIdList.push(item.id)
				} else {
					this.form.festIdList.splice(index, 1)
				}
			},
			switchChangeFn(e) {
				this.form.riseSwitch = e.detail.value ? '1' : '0'
			},
			radioChange(e) {
				this.form.riseAmount = ''
				this.form.riseType = e.detail.value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.prompt-text {
		color: $fontColor3;
		padding-bottom: 20px;
		padding-left: 30px;
	}
	.module-com {
		margin-bottom: 20px;
		padding: 30px;
		background-color: #fff;
		color: $fontColor2;
		.module-tit {
			font-size: 28px;
		}
	}
	.confirm-btn {
		width: calc(100% - 60px);
		margin: 60px 30px 0;
	}
	.switch-blo {
		padding: 15px 30px;
	}
	.new-wrap {
		margin-bottom: 20px;
		.checkbox-text {
			color: $fontColor2;
		}
		.button-wrap {
			justify-content: flex-start;
			flex-wrap: wrap;
			.admin-button-com {
				padding-top: 12px;
				padding-bottom: 12px;
				margin-right: 20px;
				border-radius: 4px;
				// &:first-child {
				// 	margin-left: 0;
				// }
			}
		}
	}
</style>