front-end/mobile-code/src/admin/setting/coupon.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.switch ? true : false" @change="switchChangeFn" />
			</div>
		</div>
		<div class="module-com new_wrap">
			<div class="module-det">
				<div>
					<span>新人注册会员赠送</span>
					<input type="text" class="setting-inp" v-model="form.amount" />
					<span>元优惠券，满</span>
					<input type="text" class="setting-inp" v-model="form.miniCost" />
				</div>
                <div>
                    <span>元可以使用，</span>
					<input type="text" class="setting-inp" v-model="form.duration" />
                    <span>天内有效。</span>
                </div>
			</div>
		</div>
		<div class="prompt-text">节日当天和前一天，勾选自动涨价的商品将统一按上面规则涨价。</div>
		<div class="admin-button-com blue big" @click="confirmFn">确定</div>
	</div>
</template>

<script>
import { couponAssetDet, couponAssetUpdate } from '@/api/coupon'
export default {
	name: 'setting-coupon',
	data() {
		return {
			form: {
				switch: 1,
				amount: 0,
				miniCost: 0,
				duration: 0
			}
		}
	},
	onLoad() {
		// this.init()
	},
	methods: {
		init() {
			this._getDet()
		},
		// 获取详情
		_getDet() {
			couponAssetDet().then(res => {
				if (this.$util.isEmpty(res.data)) return
				Object.keys(this.form).forEach((i, index) => {
					this.form[i] = res.data[i]
				})
			})
		},
		// 设置奖励
		confirmFn() {
			couponAssetUpdate(this.form).then(res => {
				this.$msg('修改成功!')
			})
		},
		switchChangeFn(e) {
			this.switch = e.target.value ? 1 : 0
			console.log('switch1 发生 change 事件，携带值为', e.target.value)
		}
	}
}
</script>

<style lang="scss" scoped>
    .prompt-text {
        color: $fontColor3;
        padding: 0 30px 20px;
    }
	.module-com {
        margin-bottom: 20px;
        padding: 30px;
        background-color: #fff;
        color: $fontColor2;
        .module-tit {
            font-size: 28px;
        }
    }
    .admin-button-com {
        width: calc(100% - 100px);
        margin: 60px 30px 0;
    }
    .switch-blo {
        padding: 15px 30px;
    }
    .new_wrap {
        .module-det {
            color: $fontColor2;
            font-size: 28px;
            & > div {
                @include disFlex(center, flex-start);
                flex-wrap: wrap;
                margin-bottom: 20px;
                &:last-child {
                    margin-bottom: 0;
                }
            }
            .setting-inp {
                width: 120px;
                height: 70px;
                border: 2px solid $borderColor;
                border-radius: 10px;
                margin: 0 16px;
                text-align: center;
                &:first-child {
                    margin-left: 0;
                }
                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }
</style>