初始化

pages/messages/settings.vue

@@ -0,0 +1,79 @@
+<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>
+