提交家庭管理

src/pages/home/home.vue

@@ -65,7 +65,10 @@
                     <image src="../../static/smalLn.png" mode="" />
                 </view>
             </view>
-            <view class="card" @click="gotoPath('/pagesA/myHome/myHome')">
+            <view
+                class="card"
+                @click="gotoPath('/pagesA/homeManage/homeManage')"
+            >
                 <view class="contentTitle">
                     <text>我的家庭</text>
                     <image src="../../static/rightArrow.png" />
@@ -81,6 +84,7 @@
             <image src="../../static/linkService.png" mode="" />
             <button open-type="contact">联系客服</button>
         </view>
+        <view class="bot_version"> v3.0.0 </view>
         <alarmCom></alarmCom>
     </view>
 </template>
@@ -303,7 +307,6 @@ export default {
     justify-content: center;
     align-items: center;
 }
-
 .bottom image {
     width: 28rpx;
     height: 28rpx;
@@ -325,4 +328,16 @@ export default {
     color: #a1aab4;
     font-size: 28rpx;
 }
+
+.bot_version {
+    opacity: 0.4;
+    position: absolute;
+    bottom: 20rpx;
+    left: 50%;
+    font-size: 28rpx;
+    transform: translate(-50%, -50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 </style>

src/pagesA/homeManage/homeManage.vue

@@ -1,31 +1,337 @@
 <template>
-    <div class="box">
-        <!-- 页面内容 -->
-    </div>
+    <view class="box">
+        <view class="addHome" @click="addHome()"> + 添加家庭 </view>
+
+        <view class="listItem" v-for="(item, index) in groupList" :key="index">
+            <view class="itemHeader">
+                <view class="itemTitle">{{ item.groupName }}</view>
+                <view class="itemOption"
+                    ><view class="imgItem" @click="deleteGroup(item)"
+                        ><image src="../../static/delete.png"></image></view
+                    ><view class="imgItem"
+                        ><image src="../../static/edit.png"></image></view
+                    ><view class="imgItem"
+                        ><image src="../../static/shareTwo.png"></image></view
+                ></view>
+            </view>
+            <view class="itemContent">
+                <view class="itemCard"
+                    ><view class="cardTitle">全部设备</view
+                    ><view class="cardContent"
+                        ><text class="titleOne">{{ item.totalDevice }}</text
+                        ><text class="titleTwo">台</text></view
+                    ></view
+                >
+                <view class="itemCard"
+                    ><view class="cardTitle">在线设备</view
+                    ><view class="cardContent"
+                        ><text class="titleOne">{{ item.onlineDevice }}</text
+                        ><text class="titleTwo">台</text></view
+                    ></view
+                >
+                <view class="itemCard"
+                    ><view class="cardTitle">报警设备</view
+                    ><view class="cardContent"
+                        ><text class="warnOne">{{ item.warningDevice }}</text
+                        ><text class="warnTwo">台</text></view
+                    ></view
+                >
+            </view>
+        </view>
+
+        <!-- 新增家庭弹窗 -->
+        <view
+            class="modal-mask"
+            v-if="addGroupModle"
+            @click="addGroupModle = false"
+        >
+            <view class="modal-container">
+                <view class="modal-header">
+                    <text class="title">新增家庭</text>
+                </view>
+
+                <view class="modal-buttons">
+                    <!-- 链接分享按钮 -->
+                    <input
+                        v-model="groupName"
+                        placeholder="请输入家庭名称"
+                        style="width: 100%"
+                        @click="$event.stopPropagation()"
+                    />
+                    <button class="btn link-btn" @click="sureAddGroup()">
+                        <text>确定</text>
+                    </button>
+                </view>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
 export default {
-    name: "HomeManage",
     data() {
         return {
-            // 数据属性
+            addGroupModle: false,
+            groupName: "",
+            userId: uni.getStorageSync("userId"),
+            groupList: [],
         };
     },
     methods: {
-        // 方法
+        addHome() {
+            this.addGroupModle = true;
+        },
+        sureAddGroup() {
+            let groupAddParams = {
+                userId: this.userId,
+                groupName: this.groupName,
+            };
+            this.$http
+                .post("wap/group/addGroup", groupAddParams, {
+                    header: {
+                        "Content-Type": "application/json;charset=UTF-8",
+                    },
+                })
+                .then((res) => {
+                    if (res.data.code == 200) {
+                        uni.showToast({
+                            title: "新增家庭成功",
+                            icon: "success",
+                            duration: 1500,
+                        });
+                        this.addGroupModle = false;
+                        this.groupName = "";
+                    } else {
+                        uni.showToast({
+                            title: res.data.message,
+                            icon: "none",
+                            duration: 1500,
+                        });
+                    }
+                    this.addGroupModle = false;
+                    this.getdevList();
+                });
+            this.shareModel = false;
+        },
+
+        getdevList() {
+            this.$http
+                .get(`wap/group/groupList`, { user_id: this.userId })
+                .then((res) => {
+                    if (res.data.data) {
+                        this.groupList = res.data.data;
+                        console.log(this.groupList, 8888);
+                    }
+                })
+                .catch((err) => {});
+        },
+
+        deleteGroup(item) {
+            uni.showModal({
+                title: "提示",
+                content: "确定删除该家庭吗？",
+                success: (res) => {
+                    if (res.confirm) {
+                        this.$http
+                            .post("wap/group/deleteGroup", {
+                                group_id: item.groupUuid,
+                            })
+                            .then((res) => {
+                                if (res.data.code == 200) {
+                                    uni.showToast({
+                                        title: "删除成功",
+                                        icon: "success",
+                                        duration: 1500,
+                                    });
+                                    this.getdevList();
+                                } else {
+                                    uni.showToast({
+                                        title: res.data.message,
+                                        icon: "none",
+                                        duration: 1500,
+                                    });
+                                }
+                            });
+                    }
+                },
+            });
+        },
     },
-    mounted() {
-        // 生命周期钩子
+    onShow() {
+        this.getdevList();
     },
+    onLoad() {},
 };
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 .box {
     height: 100vh;
     background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
     box-sizing: border-box;
     padding-top: 20rpx;
+    .addHome {
+        width: 200rpx;
+        height: 60rpx;
+        margin: 0 auto;
+        background: rgba(255, 255, 255, 0.65);
+        border-radius: 16px;
+        backdrop-filter: blur(8px);
+        line-height: 60rpx;
+        text-align: center;
+        font-size: 30rpx;
+        color: #111;
+    }
+
+    .listItem {
+        margin: 20rpx auto 0;
+        width: 710rpx;
+        height: 320rpx;
+        background: #ffffff;
+        border: 3rpx solid #ffffff;
+        border-radius: 38rpx;
+        box-shadow: 0rpx 3rpx 14rpx rgba(12, 26, 52, 0.03);
+        box-sizing: border-box;
+        .itemHeader {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 38rpx 38rpx;
+            .itemTitle {
+                width: 60%;
+                font-family: MiSans;
+                color: #111111;
+                font-size: 38rpx;
+                letter-spacing: 1.8rpx;
+            }
+            .itemOption {
+                width: 40%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .imgItem {
+                    width: 38rpx;
+                    height: 38rpx;
+                    image {
+                        width: 38rpx;
+                        height: 38rpx;
+                    }
+                }
+            }
+        }
+        .itemContent {
+            display: flex;
+            justify-content: space-around;
+            margin-top: 20rpx;
+            .itemCard {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                .cardTitle {
+                    color: #666666;
+                    font-size: 24rpx;
+                }
+                .cardContent {
+                    margin-top: 15rpx;
+                    .titleOne {
+                        font-weight: 700;
+                        color: #6c564f;
+                        font-size: 66rpx;
+                    }
+                    .titleTwo {
+                        font-weight: 500;
+                        color: #6c564f;
+                        font-size: 24rpx;
+                    }
+                    .warnOne {
+                        font-weight: 700;
+                        color: #f55050;
+                        font-size: 66rpx;
+                    }
+                    .warnTwo {
+                        font-weight: 500;
+                        color: #f55050;
+                        font-size: 24rpx;
+                    }
+                }
+            }
+        }
+    }
+
+    // 分享弹窗样式
+    .modal-mask {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 996;
+        .modal-container {
+            width: 80%;
+            background: #fff;
+            border-radius: 16rpx;
+            overflow: hidden;
+            animation: fadeIn 0.3s;
+            z-index: 997;
+            .modal-header {
+                padding: 30rpx;
+                text-align: center;
+                border-bottom: 1rpx solid #f5f5f5;
+                .title {
+                    font-size: 36rpx;
+                    display: block;
+                    margin-bottom: 10rpx;
+                }
+            }
+            .modal-buttons {
+                display: flex;
+                flex-direction: column;
+                padding: 20rpx;
+                input {
+                    width: 90%;
+                    margin: 20rpx 20rpx;
+                }
+                .btn {
+                    flex: 1;
+                    height: 90rpx;
+                    margin: 15rpx 0;
+                    border-radius: 45rpx;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 32rpx;
+                    border: none;
+                    background: none;
+                    position: relative;
+                }
+                .btn-icon {
+                    width: 40rpx;
+                    height: 40rpx;
+                    margin-right: 15rpx;
+                }
+                .phone-btn {
+                    background: linear-gradient(
+                        105.95deg,
+                        #ba978a 0%,
+                        #a27867 100%
+                    );
+                    color: white;
+                }
+                .link-btn {
+                    background: linear-gradient(
+                        105.95deg,
+                        #a27867 0%,
+                        #74483d 100%
+                    );
+                    color: white;
+                }
+            }
+        }
+    }
 }
 </style>