front-end/mobile-code/src/admin/interest/setting.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 flex-center">
            <label class="app-size-28">邀请成功下单奖励</label>
            <input type="text" class="app-size-28 reward-inp" v-model="form.prize" placeholder="请输入">
        </div>
		<div class="prompt-text">奖励可以是现金、绿植和散花等</div>
		<div class="module-com new_wrap">
			<div class="module-tit">新人可领取</div>
			<div class="module-det">
				<div>
					<input type="text" class="setting-inp" v-model="form.amount" />
					<span>元优惠券，满</span>
					<input type="text" class="setting-inp" v-model="form.miniCost" />
					<span>元可以使用，</span>
				</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 { inviteAssetDet, inviteAssetUpdate } from '@/api/invite'
export default {
	name: 'invite-setting',
	data() {
		return {
			form: {
				switch: 1,
				prize: 0,
				amount: 0,
				miniCost: 0,
				duration: 0
			}
		}
	},
	onLoad() {
		// this.init()
	},
	methods: {
		init() {
			this._getDet()
		},
		// 获取详情
		_getDet() {
			inviteAssetDet().then(res => {
				if (this.$util.isEmpty(res.data)) return
				Object.keys(this.form).forEach((i, index) => {
					this.form[i] = res.data[i]
				})
			})
		},
		// 设置奖励
		confirmFn() {
			inviteAssetUpdate(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-bottom: 20px;
        padding-left: 30px;
    }
	.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;
    }
    .reward-inp {
        margin-left: 40px;
    }
    .new_wrap {
        .module-tit {
            margin-bottom: 30px;
        }
        .module-det {
            color: $fontColor2;
            & > div {
                @include disFlex(center, flex-start);
                flex-wrap: wrap;
                margin-bottom: 20px;
                &:last-child {
                    margin-bottom: 0;
                }
            }
            .setting-inp {
                width: 150px;
                height: 70px;
                border: 2px solid $borderColor;
                border-radius: 10px;
                margin: 0 20px;
                text-align: center;
                &:first-child {
                    margin-left: 0;
                }
            }
        }
    }
</style>