页面

@vant/weapp/circle/index.wxml

@@ -1,9 +1,11 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
 <view class="van-circle">
-  <canvas class="van-circle__canvas" type="{{ type }}" style="width: {{ utils.addUnit(size) }};height:{{ utils.addUnit(size) }}" id="van-circle" canvas-id="van-circle"></canvas>
+  <canvas class="van-circle__canvas" type="{{ type }}"
+    style="width: {{ utils.addUnit(size) }};height:{{ utils.addUnit(size) }}" id="van-circle"
+    canvas-id="van-circle"></canvas>
   <view wx:if="{{ !text }}" class="van-circle__text">
     <slot></slot>
   </view>
   <cover-view wx:else class="van-circle__text">{{ text }}</cover-view>
-</view>
+</view>

app.json

@@ -16,7 +16,8 @@
         "sleepEvaluation/sleepEvaluation",
         "sleepQualityIndexAssessment/sleepQualityIndexAssessment",
         "warmReminder/warmReminder",
-        "myMattress/myMattress"
+        "myMattress/myMattress",
+        "addMattresses/addMattresses"
       ]
     }
   ],
@@ -68,6 +69,7 @@
     ]
   },
   "usingComponents": {
+    "van-circle": "@vant/weapp/circle/index",
     "van-calendar": "@vant/weapp/calendar/index",
     "van-loading": "@vant/weapp/loading/index",
     "van-tab": "@vant/weapp/tab/index",

project.private.config.json

@@ -10,6 +10,20 @@
   "condition": {
     "miniprogram": {
       "list": [
+        {
+          "name": "subpages/addMattresses/addMattresses",
+          "pathName": "subpages/addMattresses/addMattresses",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "subpages/myMattress/myMattress",
+          "pathName": "subpages/myMattress/myMattress",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
         {
           "name": "subpages/scan/scan",
           "pathName": "subpages/scan/scan",

subpages/addMattresses/addMattresses.js

@@ -0,0 +1,92 @@
+// subpages/addMattresses/addMattresses.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    showBluetoothList: false,
+    showBluetoothConnected: false,//连接中
+    isBluetoothConnected: false,//连接成功
+    bluetoothConnectedStep: 5,
+    placeOfUse: "",
+    usingHuman: "",
+    sn: "",
+    wifi: "",
+    wifiPassWord: "",
+    bluetoothSelectIndex: -1,
+    activeIcon: "/subpages/images/ic_blue_radio_check.png",
+    normalIcon: "/subpages/images/ic_blue_radio_uncheck.png",
+    bluetoothList: ['', ''],
+    value: 90,
+    gradientColor: {
+      '0%': '#00CEB2',
+      '50%': '#00C7FF',
+      '100%': '#53DAFF',
+    },
+    statusDefault: ['蓝牙连接...', '蓝牙连接成功', '成功获取设备信息', '发送配置信息...', '配置信息发送成功', '连接成功'],
+  },
+  onClose() {
+    this.setData({ showBluetoothList: false, showBluetoothConnected: false });
+  },
+  checkBluetoothSelectIndex(e) {
+    const index = e.currentTarget.dataset.index;
+    this.setData({ bluetoothSelectIndex: index });
+
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

subpages/addMattresses/addMattresses.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {},
+  "navigationBarBackgroundColor": "#ffffff",
+  "navigationBarTextStyle": "black",
+  "navigationBarTitleText": "增加床垫"
+}

subpages/addMattresses/addMattresses.wxml

@@ -0,0 +1,81 @@
+<!--subpages/addMattresses/addMattresses.wxml-->
+<view class="container">
+
+    <view class="notice-view">
+        <image src="/subpages/images/ic_notice_tips.png" class="notice-icon"></image>
+        <view class="marquee-container">
+            <text class="marquee-text marquee-text-animation">温馨提示：增加床垫设备之前，请将手机连接室内WIFI，并...</text>
+        </view>
+    </view>
+
+    <view class="w-card">
+        <van-field model:value="{{ placeOfUse }}" center title-width="150rpx" label="使用地点：" placeholder="可填写卧室等地点"
+            clearable border="{{ true }}" />
+        <van-field model:value="{{ usingHuman }}" center title-width="150rpx" label="使用人：" placeholder="可填写本人或者其他人名称"
+            clearable border="{{ true }}" />
+        <van-field model:value="{{ sn }}" center title-width="150rpx" clearable label="SN：" placeholder="请输入"
+            border="{{ true }}" use-button-slot>
+            <view slot="button" class="lysb-btn">
+                <image src="/subpages/images/ic_ly.png" class="ly-icon"></image>
+                <text>蓝牙识别</text>
+            </view>
+        </van-field><van-field model:value="{{ wifi }}" center title-width="150rpx" label="WIFI：" placeholder="AIDSLEEP"
+            clearable border="{{ true }}" />
+        <van-field model:value="{{ wifiPassWord }}" center title-width="150rpx" label="WIFI密码：" placeholder="请输入密码"
+            clearable border="{{ false }}" />
+    </view>
+    <text class="commit-btn">提交配置</text>
+
+    <!-- 选择蓝牙 -->
+    <van-popup show="{{ showBluetoothList }}" round position="bottom" custom-style="height: 50%;background:#F7F7F7;"
+        close-on-click-overlay="{{false}}" bind:close="onClose">
+        <view class="bluetooth-view">
+            <view class="bluetoothList">
+                <view wx:for="{{bluetoothList}}" wx:key="index" class="bluetooth-item" data-index="{{index}}"
+                    bindtap="checkBluetoothSelectIndex">
+                    <image src="/subpages/images/ic_bluetooth.png" class="bluetooth-icon"></image>
+                    <view class="bluetooth-content">
+                        <text class="bluetooth-title">LZ-0TA 332016851371332016851371332016851371332016851371</text>
+                        <text class="bluetooth-rssi">RSSI: -50</text>
+                    </view>
+                    <image src="{{bluetoothSelectIndex == index ? activeIcon : normalIcon}}" class="bluetooth-radio">
+                    </image>
+                </view>
+
+            </view>
+            <text class="sure-btn">确定</text>
+        </view>
+    </van-popup>
+
+    <!-- 蓝牙识别+配置弹窗 -->
+    <van-popup show="{{ showBluetoothConnected }}" close-on-click-overlay="{{false}}" round bind:close="onClose">
+
+        <view class="bluetoothConnectedView">
+            <view wx:if="{{!isBluetoothConnected}}" class="circle-view">
+                <van-circle type="2d" value="{{ value }}" color="{{ gradientColor }}" size="114" stroke-width="7"
+                    layer-color="#EBEEF5">
+                    <view class="circle-content">
+                        <text class="circle-text">{{value}}%</text>
+                        <text class="circle-loading">连接中...</text>
+                    </view>
+                </van-circle>
+            </view>
+            <view wx:if="{{isBluetoothConnected}}" class="circle-view">
+                <image src="/subpages/images/ic_bluetooth_connected.png" class="bluetooth-connected-icon"></image>
+                <text class="bluetoothConnected-tips">连接成功</text>
+            </view>
+            <view class="loading-list">
+                <view wx:for="{{statusDefault}}" wx:key="index" class="loading-item"
+                    wx:if="{{bluetoothConnectedStep >= index}}">
+                    <image wx:if="{{bluetoothConnectedStep > index}}" src="/subpages/images/ic_loading_yes.png"
+                        class="bluetooth-connected-yes"></image>
+                    <van-loading wx:else color="#53DAFF" size="28rpx" />
+                    <text class="loading-title">{{item}}</text>
+                </view>
+            </view>
+            <view wx:if="{{!isBluetoothConnected}}" style="height: 50rpx;"></view>
+            <text wx:else class="bluetoothConnectedView-btn" bindtap="onClose">确定</text>
+        </view>
+    </van-popup>
+
+</view>

subpages/addMattresses/addMattresses.wxss

@@ -0,0 +1,284 @@
+/* subpages/addMattresses/addMattresses.wxss */
+
+page {
+    background-color: #F8F9FA;
+}
+
+.container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.notice-view {
+    width: 690rpx;
+    height: 56rpx;
+    background: #DDF1EF;
+    margin-top: 20rpx;
+    border-radius: 16rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.notice-icon {
+    width: 36rpx;
+    height: 36rpx;
+    margin-left: 20rpx;
+    display: block;
+}
+
+.marquee-container {
+    flex: 1;
+    margin-left: 20rpx;
+    margin-right: 20rpx;
+    /* 容器宽度 */
+    overflow: hidden;
+    /* 内容超出时隐藏 */
+}
+
+.marquee-text {
+    font-size: 22rpx;
+    white-space: nowrap;
+    color: #0BC3AA;
+    line-height: 56rpx;
+    /* 内容不换行 */
+    display: inline-block;
+}
+
+.marquee-text-animation {
+    animation: marquee 5s linear infinite;
+    /* 滚动动画，时间可根据需要调整 */
+}
+
+@keyframes marquee {
+    0% {
+        transform: translateX(100%);
+    }
+
+    100% {
+        transform: translateX(-100%);
+    }
+}
+
+.w-card {
+    margin-top: 20rpx;
+    width: 690rpx;
+    background: #FFFFFF;
+    border-radius: 16rpx;
+    display: flex;
+    flex-direction: column;
+}
+
+.lysb-btn {
+    font-size: 24rpx;
+    padding: 4rpx 16rpx;
+    height: fit-content;
+    color: #0BC3AA;
+    border: 2rpx solid #0BC3AA;
+    border-radius: 30rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.van-field__label {
+    font-size: 28rpx !important;
+    color: #3E3D44 !important;
+}
+
+.input-class {
+    font-size: 28rpx !important;
+    color: #3E3D44 !important;
+
+}
+
+.ly-icon {
+    width: 24rpx;
+    height: 24rpx;
+    margin-right: 8rpx;
+}
+
+.commit-btn {
+    margin: 80rpx 0;
+    width: 630rpx;
+    height: 84rpx;
+    background: linear-gradient(315deg, #0ABCA4 0%, rgba(11, 195, 170, 0.8) 100%);
+    border-radius: 40rpx;
+    color: #FFFFFF;
+    font-size: 28rpx;
+    text-align: center;
+    line-height: 84rpx;
+}
+
+.bluetooth-view {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.bluetoothList {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    overflow-y: auto;
+}
+
+.sure-btn {
+    margin: 20rpx 0;
+    font-size: 32rpx;
+    text-align: center;
+    line-height: 80rpx;
+    width: 670rpx;
+    color: #FFFFFF;
+    height: 80rpx;
+    background: linear-gradient(315deg, #0ABCA4 0%, rgba(11, 195, 170, 0.8) 100%);
+    border-radius: 40rpx;
+}
+
+.bluetooth-item {
+    width: 670rpx;
+    height: 144rpx;
+    margin-top: 40rpx;
+    background: #FFFFFF;
+    border-radius: 24rpx;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+}
+
+.bluetooth-icon {
+    margin-left: 30rpx;
+    width: 48rpx;
+    height: 48rpx;
+    display: block;
+}
+
+.bluetooth-content {
+    margin: 0 30rpx;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    justify-content: space-evenly;
+    height: 100rpx;
+}
+
+.bluetooth-title {
+    color: #333333;
+    font-size: 32rpx;
+    display: -webkit-box;
+    line-clamp: 1;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    line-break: anywhere;
+}
+
+.bluetooth-rssi {
+    color: #888888;
+    font-size: 24rpx;
+    display: -webkit-box;
+    line-clamp: 1;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    line-break: anywhere;
+}
+
+.bluetooth-radio {
+    margin-right: 30rpx;
+    width: 32rpx;
+    height: 32rpx;
+    display: block;
+
+}
+
+.bluetoothConnectedView {
+    width: 630rpx;
+    padding-top: 40rpx;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.circle-view {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.bluetooth-connected-icon {
+    display: block;
+    width: 280rpx;
+    height: 280rpx;
+}
+
+.bluetooth-connected-yes {
+    display: block;
+    width: 28rpx;
+    height: 28rpx;
+}
+
+.bluetoothConnected-tips {
+    font-size: 32rpx;
+    color: #333333;
+}
+
+.circle-content {
+    display: flex;
+    flex-direction: column;
+}
+
+.circle-text {
+    font-weight: 700;
+    font-size: 48rpx;
+    color: #00CEB2;
+}
+
+.circle-loading {
+    color: #3E3D44;
+    font-size: 24rpx;
+}
+
+.loading-list {
+    display: flex;
+    flex-direction: column;
+    width: calc(100% - 120rpx);
+}
+
+.loading-item {
+    display: flex;
+    margin-top: 26rpx;
+    align-items: center;
+    flex-direction: row;
+}
+
+.loading-title {
+    margin-left: 20rpx;
+    color: #3E3D44;
+    font-size: 24rpx;
+}
+
+.bluetoothConnectedView-btn {
+    margin: 40rpx 0;
+    font-size: 32rpx;
+    text-align: center;
+    line-height: 76rpx;
+    width: 510rpx;
+    height: 76rpx;
+    color: #FFFFFF;
+    background: linear-gradient(315deg, #0ABCA4 0%, rgba(11, 195, 170, 0.8) 100%);
+    border-radius: 40rpx;
+}

subpages/myMattress/myMattress.js

@@ -5,14 +5,12 @@ Page({
    * 页面的初始数据
    */
   data: {
-
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-
   },
 
   /**

subpages/myMattress/myMattress.wxml

@@ -1,4 +1,23 @@
 <!--subpages/myMattress/myMattress.wxml-->
-<view class="mattress-list">
+<view>
+    <view class="mattress-list">
+        <view class="mattress-item">
+            <image class="item-cover" src="/subpages/images/ic_gyms.png"></image>
+            <view class="right-content">
+                <text class="item-title">爱眠客床垫</text>
+                <text class="item-offline">未连接</text><!-- <text class="item-online">已连接</text> -->
+                <text class="item-sn">SN：7834*****1234</text>
+                <text class="item-user">使用人：本人</text>
+            </view>
+            <view class="menu-btn"><van-icon name="ellipsis" /></view>
+        </view>
+
+    </view>
+    <view class="bottom-view">
+        <navigator url="/subpages/addMattresses/addMattresses" class="bottom-btn">
+            <van-icon name="plus" color="#ffffff" />
+            <text style="margin-left: 20rpx;">增加床垫</text>
+        </navigator>
+    </view>
 
 </view>

subpages/myMattress/myMattress.wxss

@@ -1 +1,117 @@
-/* subpages/myMattress/myMattress.wxss */
+/* subpages/myMattress/myMattress.wxss */
+page {
+    background-color: #F8F9FA;
+}
+
+.mattress-list {
+    display: flex;
+    width: 100vw;
+    flex-direction: column;
+    padding-bottom: 180rpx;
+    align-items: center;
+}
+
+.mattress-item {
+    display: flex;
+    flex-direction: row;
+    margin-top: 30rpx;
+    align-items: center;
+    width: 670rpx;
+    height: 236rpx;
+    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
+    box-shadow: 20rpx 8rpx 20rpx 0rpx rgba(219, 225, 231, 0.2);
+    border-radius: 28rpx;
+    position: relative;
+}
+
+.item-cover {
+    width: 176rpx;
+    height: 176rpx;
+    margin-left: 30rpx;
+    display: block;
+}
+
+.right-content {
+    flex: 1;
+    margin-right: 30rpx;
+    margin-left: 30rpx;
+    display: flex;
+    height: 176rpx;
+    justify-content: space-between;
+    flex-direction: column;
+}
+
+.item-title {
+    font-size: 32rpx;
+    color: #333333;
+}
+
+.item-sn {
+    font-size: 24rpx;
+    color: #666666;
+}
+
+.item-user {
+    font-size: 24rpx;
+    color: #666666;
+}
+
+.item-online {
+    display: block;
+    width: fit-content;
+    padding: 2rpx 10rpx;
+    border-radius: 40rpx;
+    font-size: 20rpx;
+    color: #0BC3AA;
+    background: linear-gradient(90deg, #E7FAF4 11%, rgba(237, 255, 249, 0.78) 100%);
+    box-sizing: border-box;
+}
+
+.item-offline {
+    display: block;
+    width: fit-content;
+    padding: 2rpx 10rpx;
+    border-radius: 40rpx;
+    font-size: 20rpx;
+    color: #FF424F;
+    background: #FFF3F3;
+    box-sizing: border-box;
+}
+
+.menu-btn {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    height: 70rpx;
+    width: 90rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.bottom-view {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.bottom-btn {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 80rpx;
+    margin-top: 16rpx;
+    color: #FFFFFF;
+    height: 84rpx;
+    font-size: 32rpx;
+    width: 630rpx;
+    border-radius: 40rpx;
+    background: linear-gradient(315deg, #0ABCA4 0%, rgba(11, 195, 170, 0.8) 100%);
+}