leiking
80 lines
1.8 KiB
Vue
80 lines
1.8 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="card block">
|
||
<view class="t">消息提醒</view>
|
||
<view class="muted p">用于接收预约成功、到店提醒、过期提醒等通知。</view>
|
||
<view class="row between line">
|
||
<view>预约成功提醒</view>
|
||
<switch :checked="on1" @change="toggle1" color="#3b82f6" />
|
||
</view>
|
||
<view class="row between line">
|
||
<view>到店提醒</view>
|
||
<switch :checked="on2" @change="toggle2" color="#3b82f6" />
|
||
</view>
|
||
<view class="row between line">
|
||
<view>卡券过期提醒</view>
|
||
<switch :checked="on3" @change="toggle3" color="#3b82f6" />
|
||
</view>
|
||
</view>
|
||
<view class="card block">
|
||
<view class="t">订阅消息</view>
|
||
<view class="muted p">商用版可在此引导用户订阅微信消息模板（本原型仅展示）。</view>
|
||
<view class="btn btn-primary" @tap="mockSub">一键订阅（演示）</view>
|
||
</view>
|
||
<AiFloat />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import AiFloat from '@/components/AiFloat.vue'
|
||
|
||
export default {
|
||
components: { AiFloat },
|
||
data() {
|
||
return {
|
||
on1: true,
|
||
on2: true,
|
||
on3: true
|
||
}
|
||
},
|
||
methods: {
|
||
toggle1(e) {
|
||
this.on1 = !!e.detail.value
|
||
},
|
||
toggle2(e) {
|
||
this.on2 = !!e.detail.value
|
||
},
|
||
toggle3(e) {
|
||
this.on3 = !!e.detail.value
|
||
},
|
||
mockSub() {
|
||
uni.showToast({ title: '已订阅（演示）', icon: 'none' })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.block {
|
||
padding: 22rpx;
|
||
margin-bottom: 18rpx;
|
||
}
|
||
.t {
|
||
font-size: 32rpx;
|
||
font-weight: 950;
|
||
}
|
||
.p {
|
||
margin-top: 14rpx;
|
||
font-size: 26rpx;
|
||
line-height: 1.7;
|
||
}
|
||
.line {
|
||
padding: 18rpx 0;
|
||
border-top: 1rpx solid rgba(17, 24, 39, 0.08);
|
||
}
|
||
.line:first-of-type {
|
||
border-top: 0;
|
||
}
|
||
</style>
|
||
|