商铺详情

operationSupport/src/assets/css/public-style.scss

@@ -7,10 +7,14 @@ $redColor: #ff7171;
 $ashColor: #dcdcdc;
 
 @function vw($size) {
-  @return ($size/19.2)vw;
+  @return ($size/19.2) vw;
 }
 @function vh($size) {
-  @return ($size/10.8)vh;
+  @return ($size/10.8) vh;
+}
+$base_fontSize: 100;
+@function rem($px) {
+  @return $px / $base_fontSize * 1rem;
 }
 .greenText {
   color: $greenColor !important;

operationSupport/src/components/common/Header.vue

@@ -17,7 +17,7 @@
                     <i class="iconfont" v-show="!cruUserInfo.photo" v-bottom-txt-tip data-txt="编辑用户信息">&#xe6e8;</i>
                     <img v-show="cruUserInfo.photo" :src="envConfig.baseImgApi + cruUserInfo.photo" style="object-fit: cover" />
                 </div>
-                <!-- <span style="width: 1px; height: 16px; background: #FFFFFF; opacity: 0.5"></span> -->
+                <!-- <span style="width: 1px; height: 1rem(6); background: #FFFFFF; opacity: 0.5"></span> -->
                 <div class="message">
                     <span class="main" @click="goMessage('unread')">
                         <!-- <i class="iconfont btn">&#xe6ea;</i> -->
@@ -41,16 +41,17 @@
                     <div class="msg-content" v-else>
                         <p>消息通知</p>
                         <ul>
-                            <li style="text-align: center; display: block; padding: 0 20px; line-height: 60px">暂无消息</li>
+                            <li style="text-align: center; display: block; padding: 0 rem(20); line-height: rem(60)">暂无消息</li>
                         </ul>
                         <el-button type="text" class="more" disabled>查看更多</el-button>
                     </div>
                 </div>
-                <!-- <span style="width: 1px; height: 16px; background: #FFFFFF; opacity: 0.5"></span> -->
+                <!-- <span style="width: 1px; height: 1rem(6); background: #FFFFFF; opacity: 0.5"></span> -->
                 <span class="border"></span>
                 <div class="logout" @click="logOut">
                     <el-tooltip placement="bottom" content="退出">
-                        <img src="@/assets/img/btn_quit.png" class="tab_head-right" @click="logOut" />
+                        <i  class="zoniot_font zoniot-icon-tuichu"></i>
+                        <!-- <img src="@/assets/img/btn_quit.png" class="tab_head-right" @click="logOut" /> -->
                     </el-tooltip>
                     <!-- <i class="iconfont" v-bottom-txt-tip data-txt="退出">&#xe6e9;</i> -->
                 </div>
@@ -286,15 +287,15 @@ export default {
 };
 </script>
 <style lang='scss' scoped>
+@import '@assets/css/public-style.scss';
 .border {
     width: 1px;
-    height: 10px;
-    background: #ffffff;
-    opacity: 0.3;
+    height: rem(10);
+    background: #ffffffa5;
 }
 .header {
-    height: 46px;
-    font-size: 14px;
+    height: rem(46);
+    font-size: rem(14);
     color: #fff;
     background: #2c354a;
     display: flex;
@@ -303,8 +304,8 @@ export default {
     &.expand::before {
         content: '';
         display: inline-block;
-        width: 230px;
-        height: 46px;
+        width: rem(220);
+        height: rem(46);
         background: #2c354a;
         position: absolute;
         left: 0;
@@ -312,18 +313,18 @@ export default {
     &.collapse::before {
         content: '';
         display: inline-block;
-        width: 95px;
-        height: 46px;
+        width: rem(85);
+        height: rem(46);
         background: #2c354a;
         position: absolute;
         left: 0;
     }
 }
 .header-right {
-    padding-right: 20px;
+    padding-right: rem(20);
     color: rgba(255, 255, 255, 0.6);
     .name-txt {
-        font-size: 12px;
+        font-size: rem(12);
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #ffffff;
@@ -331,60 +332,60 @@ export default {
 }
 .header-user-con {
     display: flex;
-    height: 60px;
     align-items: center;
 }
 .logout {
-    margin-left: 20px;
-    img {
-        width: 20px;
-        height: 20px;
-    }
+    margin-left: rem(20);
+   i{
+       color: white;
+       font-size: rem(20);
+   }
 }
 .iconfont {
-    font-size: 20px;
+    font-size: rem(20);
     color: rgba(255, 255, 255, 0.6);
     &:hover {
         color: rgba(255, 255, 255, 1);
     }
 }
 .user-avator {
-    margin-left: 10px;
-    margin-right: 20px;
+    margin-left: rem(10);
+    margin-right: rem(20);
 }
 .user-avator img {
     display: block;
-    width: 20px;
-    height: 20px;
+    width: rem(20);
+    height: rem(20);
     cursor: pointer;
 }
 .message {
-    margin: 10px 20px 0px 0px;
+    margin-right: rem(20);
     color: #000000;
     cursor: pointer;
     &:hover {
         .msg-content {
             display: block;
             background: #ffffff;
-            box-shadow: 0px 5px 20px 0px rgba(144, 144, 144, 0.4);
-            border-radius: 6px;
+            box-shadow: 0px rem(5) rem(20) 0px rgba(144, 144, 144, 0.4);
+            border-radius: rem(6);
             z-index: 200;
         }
     }
     .main {
-        height: 60px;
-        line-height: 60px;
+        height: rem(46);
+        line-height: rem(46);
         position: relative;
         img {
-            width: 20px;
-            height: 20px;
+            width: rem(20);
+            height: rem(20);
+            vertical-align: text-bottom;
         }
         .point {
             position: absolute;
-            top: -4px;
+            top: rem(-4);
             right: -1px;
-            width: 4px;
-            height: 4px;
+            width: rem(4);
+            height: rem(4);
             background: #fe7271;
             border-radius: 50%;
             display: block;
@@ -393,35 +394,35 @@ export default {
 
     .msg-content {
         position: absolute;
-        width: 380px;
+        width: rem(380);
         background: #ffffff;
         z-index: 20;
-        right: 20px;
-        top: 40px;
+        right: rem(20);
+        top: rem(40);
         transition: all 0.3s;
         display: none;
         p {
-            height: 40px;
-            line-height: 40px;
-            padding-left: 20px;
+            height: rem(40);
+            line-height: rem(40);
+            padding-left: rem(20);
             color: #212226;
         }
         li {
             display: flex;
             align-items: center;
-            height: 60px;
-            padding-left: 20px;
+            height: rem(60);
+            padding-left: rem(20);
             border-top: 1px solid #f6f6f6;
-            font-size: 12px;
+            font-size: rem(12);
             cursor: auto;
             span {
-                width: 300px;
+                width: rem(300);
                 overflow: hidden; //超出的文本隐藏
                 text-overflow: ellipsis; //溢出用省略号显示
                 white-space: nowrap; //溢出不换行
                 display: block;
-                line-height: 20px;
-                padding-left: 15px;
+                line-height: rem(20);
+                padding-left: 1rem (5);
             }
             .cont {
                 color: #424656;

operationSupport/src/components/common/Sidebar.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="sidebar" :style="collapse ? 'width:85px' : 'width:220px'">
         <div class="logo" v-if="!collapse">
-            <img style="width: 90px; height: 24px" src="@/assets/img/img_logo2.png" />
+            <img style="width: rem(90); height: rem(24)" src="@/assets/img/img_logo2.png" />
             <div class="title"><span class="point"></span>{{ $store.getters['getThisDetai'].name || sessSetThisDetai }}</div>
         </div>
         <div class="logo shrink" v-else>
@@ -108,48 +108,49 @@ export default {
 </script>
 
 <style  lang="scss">
+@import '@assets/css/public-style.scss';
 .sidebar {
-    width: 220px;
+    width: rem(220);
     display: flex;
     flex-direction: column;
     background: #171f32;
-    border-radius: 0px 30px 30px 0px;
+    border-radius: 0px rem(30) rem(30) 0px;
     z-index: 2;
     .logo {
         width: 100%;
-        height: 110px;
+        height: rem(110);
         color: #ffffff;
-        padding: 35px 10px 0 20px;
+        padding: rem(35) rem(10) 0 rem(20);
         border-bottom: 1px solid #2a335c;
-        margin-bottom: 25px;
+        margin-bottom: rem(25);
         img {
-            width: 90px;
-            height: 24px;
+            width: rem(90);
+            height: rem(24);
             display: inline-block;
             vertical-align: middle;
-            margin-right: 6px;
+            margin-right: rem(6);
         }
         .title {
-            font-size: 16px;
+            font-size: rem(16);
             font-weight: 500;
             display: inline-block;
             vertical-align: middle;
             background: rgba(255, 255, 255, 0.1);
-            border-radius: 4px;
+            border-radius: rem(4);
             border: 1px solid rgba(255, 255, 255, 0.4);
-            padding: 0px 7px;
+            padding: 0px rem(7);
         }
         .point {
-            width: 4px;
-            height: 4px;
+            width: rem(4);
+            height: rem(4);
             display: inline-block;
             // margin-right: 5px;
             vertical-align: middle;
             text-align: center;
         }
         .text {
-            width: 40px;
-            margin-left: -14px;
+            width: rem(40);
+            margin-left: rem(-14);
         }
     }
     .menu-wrap {
@@ -160,13 +161,13 @@ export default {
     .menu-footer.dark {
         bottom: 0;
         left: 0;
-        width: 220px;
-        height: 30px;
+        width: rem(220);
+        height: rem(30);
 
         div {
             width: 100%;
             height: 100%;
-            border-radius: 0px 0 30px 0px;
+            border-radius: 0px 0 rem(30) 0px;
             background-color: #171f32;
             border: none;
         }
@@ -182,15 +183,15 @@ export default {
     }
     .footer {
         position: absolute;
-        bottom: 30px;
-        left: 20px;
+        bottom: rem(30);
+        left: rem(20);
         z-index: 11;
-        width: 30px;
-        height: 30px;
+        width: rem(30);
+        height: rem(30);
         img {
             display: block;
-            width: 24px;
-            height: 24px;
+            width: rem(24);
+            height: rem(24);
             cursor: pointer;
         }
     }
@@ -210,7 +211,7 @@ export default {
 }
 .sidebar-el-menu > div > .el-submenu.is-opened.is-active > .el-submenu__title {
     background: #2c354a !important;
-    border-radius: 32px 0px 0px 32px;
+    border-radius: rem(32) 0px 0px rem(32);
     color: rgb(39, 135, 241) !important;
     border-right: 2px solid #2787f1;
     .el-submenu__icon-arrow::before {
@@ -226,17 +227,17 @@ export default {
 
 .sidebar .logo.shrink {
     display: flex;
-    font-size: 16px;
+    font-size: rem(16);
     justify-content: center;
     // color: $mainTextColor;
     border-bottom: 2px solid #2a335c;
-    margin-bottom: 20px;
+    margin-bottom: rem(20);
     align-items: flex-start;
     .text {
-        width: 48px;
-        height: 48px;
+        width: rem(48);
+        height: rem(48);
         background: rgba(255, 255, 255, 0.1);
-        border-radius: 4px;
+        border-radius: rem(4);
         border: 1px solid rgba(255, 255, 255, 0.4);
         text-align: center;
     }
@@ -247,13 +248,13 @@ export default {
 //     justify-content: center;
 //     color: #2787f1;
 //     border-bottom: 2px solid #2a335c;
-//     margin-bottom: 20px;
+//     margin-bottom: rem(20);
 //     align-items: flex-start;
 //     .text {
-//         width: 48px;
-//         height: 48px;
+//         width: rem(48);
+//         height: rem(48);
 //         background: rgba(255, 255, 255, 0.1);
-//         border-radius: 4px;
+//         border-radius: rem(4);
 //         border: 1px solid rgba(255, 255, 255, 0.4);
 //         text-align: center;
 //     }
@@ -263,7 +264,7 @@ export default {
     color: #2787f1;
 
     background: #2c354a;
-    border-radius: 32px 0px 0px 32px;
+    border-radius: rem(32) 0px 0px rem(32);
 }
 
 .el-menu--collapse > .is-active > .el-submenu__title {
@@ -272,9 +273,9 @@ export default {
 .el-submenu > .el-submenu__title:hover {
     //设置一级菜单的鼠标经过时候的样式
     background: rgb(44, 53, 74) !important;
-    border-radius: 32px 0px 0px 32px !important;
+    border-radius: rem(32) 0px 0px rem(32) !important;
 }
 .el-menu-item:hover {
-    border-radius: 32px 0px 0px 32px;
+    border-radius: rem(32) 0px 0px rem(32);
 }
 </style>

operationSupport/src/components/common/Tags.vue

@@ -6,8 +6,7 @@
                 <span class="tags-li-icon" @click="closeTags(index)"></span>
             </li>
             <li class="tags-li close" v-if="tagsList.length > 1">
-                <div class="allclose" @click="closeOther"><span>全部关闭</span></div>
-                <!-- <span class="allclosed"></span> -->
+                <span class="allclose" @click="closeOther">全部关闭</span>
             </li>
         </ul>
     </div>
@@ -129,11 +128,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '@assets/css/public-style.scss';
-.tags {
-    height: 60px;
-    line-height: 60px;
-}
-
 .tags ul {
     box-sizing: border-box;
     width: 100%;
@@ -143,20 +137,17 @@ export default {
 
 .tags-li {
     float: left;
-    font-size: 12px;
+    font-size: rem(12);
     cursor: pointer;
-    height: 14px;
-    line-height: 14px;
     border-right: 1px solid #a6abb6;
-    padding: 0 20px 0 20px;
-    margin: 25px 0;
+    padding: 0 rem(20) 0 rem(20);
     vertical-align: middle;
     -webkit-transition: all 0.3s ease-in;
     -moz-transition: all 0.3s ease-in;
     transition: all 0.3s ease-in;
 }
 .close {
-    padding: 0 20px 0 20px;
+    padding: 0 rem(20) 0 rem(20);
     -webkit-transition: all 0.3s ease-in;
     -moz-transition: all 0.3s ease-in;
     transition: all 0.3s ease-in;
@@ -164,18 +155,18 @@ export default {
     position: relative;
 }
 .tags-li-icon {
-    width: 14px;
-    height: 14px;
+    width: rem(14);
+    height: rem(14);
+    min-width: 14px;
+    min-height: 14px;
     display: inline-block;
     border-radius: 50%;
     background: url('../../assets/img/closed.png') no-repeat center center;
-    vertical-align: text-top;
+    vertical-align: bottom;
 }
 .active .tags-li-icon {
-    width: 12px;
-    height: 12px;
-    display: inline-block;
     background: url('../../assets/img/close.png') no-repeat center center;
+    vertical-align: bottom;
 }
 
 .tags-li.active {
@@ -183,11 +174,12 @@ export default {
 }
 
 .tags-li-title {
-    max-width: 80px;
+    max-width: rem(80);
+    font-size: rem(12);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    margin-right: 5px;
+    margin-right: rem(10);
     color: #a6abb6;
 }
 
@@ -201,30 +193,29 @@ export default {
 .allclose {
     display: inline-block;
     position: absolute;
-    top: -3px;
+    top: 0;
     width: max-content;
-    height: 18px;
-    padding-top: 3px;
+    height: rem(18);
+    min-height: 18px;
+    line-height: inherit;
+    padding: 0 rem(7);
     background: $mainTextColor;
-    border-radius: 9px;
-    /* background:url("../../assets/img/allClose.png") no-repeat center center; */
+    border-radius: rem(10);
     vertical-align: middle;
-    font-size: 10px;
     font-family: PingFangSC-Regular, PingFang SC;
     font-weight: 400;
     color: #ffffff;
-    line-height: 14px;
     text-align: center;
 }
 .allclose span {
-    padding: 0px 10px;
+    padding: 0px rem(10);
 }
 .allclosed {
-    width: 14px;
-    height: 14px;
+    width: rem(14);
+    height: rem(14);
     display: inline-block;
     background: url('../../assets/img/allClosed.png') no-repeat center center;
     vertical-align: middle;
-    margin-left: 10px;
+    margin-left: rem(10);
 }
 </style>

operationSupport/src/components/common/table.vue

@@ -372,9 +372,10 @@ export default {
                     sums[cols[i]] = values.reduce((prev, curr) => {
                         const value = Number(curr);
                         if (!isNaN(value)) {
-                            return parseInt((prev + curr).toFixed(2) * 100);
+                            let sumVa = Number(prev) + curr;
+                            return sumVa.toFixed(2);
                         } else {
-                            return parseInt(prev.toFixed(2) * 100);
+                            return Number(prev.toFixed(2));
                         }
                     }, 0);
                     sums[cols[i]];

operationSupport/src/views/assetManagement/housingManagement/details.vue

@@ -38,7 +38,13 @@
                 </div>
             </div>
             <div class="content-item" v-show="tabsIndex === 2">
-                <zz-table :cols="cols" :data="memberData" :settings="{ stripe: true, hideFoot: true }"> </zz-table>
+                <zz-table :cols="cols" :data="memberData" :settings="{ stripe: true, hideFoot: true }">
+                    <template slot="opt" slot-scope="scope">
+                        <el-tooltip class="item" effect="light" placement="bottom" content="查看">
+                            <i class="zoniot_font zoniot-icon-xiangqing" @click="lookPage(scope.row)"></i>
+                        </el-tooltip>
+                    </template>
+                </zz-table>
             </div>
         </div>
     </div>
@@ -77,7 +83,6 @@ export default {
                 {
                     lable: '业主信息'
                 },
-
                 {
                     lable: '成员信息'
                 }
@@ -232,19 +237,29 @@ export default {
             cols: [
                 {
                     label: '姓名',
-                    prop: 'communityName'
+                    prop: 'name'
                 },
                 {
                     label: '手机号',
-                    prop: 'buildingName'
+                    prop: 'phone'
                 },
                 {
                     label: '身份证号',
-                    prop: 'buildingName'
+                    prop: 'idNumber'
                 },
                 {
                     label: '关系',
-                    prop: 'buildingName'
+                    prop: 'householdType',
+                    format(val) {
+                        switch (val) {
+                            case 1:
+                                return '业主';
+                            case 2:
+                                return '亲属';
+                            case 3:
+                                return '租客';
+                        }
+                    }
                 },
                 {
                     label: '操作',
@@ -338,6 +353,20 @@ export default {
                     }
                 })
                 .catch(() => {});
+        },
+        lookPage(row) {
+            this.$store.dispatch('addPopup', {
+                url: '/assetManagement/stepPage/houseDataPop.vue',
+                width: '1044px',
+                height: '600px',
+                props: {
+                    data: row
+                },
+                notip: true,
+                showCancelButton: true,
+                showConfirmButton: true,
+                title: '成员信息'
+            });
         }
     }
 };

operationSupport/src/views/assetManagement/shopManagement/details.vue

@@ -28,7 +28,13 @@
                 </div>
             </div>
             <div class="content-item" v-show="tabsIndex === 2">
-                <zz-table :cols="cols" :data="memberData" :settings="{ stripe: true }"> </zz-table>
+                <zz-table :cols="cols" :data="memberData" :settings="{ stripe: true }">
+                    <template slot="opt" slot-scope="scope">
+                        <el-tooltip class="item" effect="light" placement="bottom" content="查看">
+                            <i class="zoniot_font zoniot-icon-xiangqing" @click="lookPage(scope.row)"></i>
+                        </el-tooltip>
+                    </template>
+                </zz-table>
             </div>
             <div class="content-item" v-show="tabsIndex === 3">
                 <zz-table :cols="cols1" :data="mixins_list" :pageset="mixins_pageset" :settings="{ stripe: true }"> </zz-table>
@@ -249,19 +255,29 @@ export default {
             cols: [
                 {
                     label: '姓名',
-                    prop: 'communityName'
+                    prop: 'name'
                 },
                 {
                     label: '手机号',
-                    prop: 'buildingName'
+                    prop: 'phone'
                 },
                 {
                     label: '身份证号',
-                    prop: 'buildingName'
+                    prop: 'idNumber'
                 },
                 {
                     label: '关系',
-                    prop: 'buildingName'
+                    prop: 'householdType',
+                    format(val) {
+                        switch (val) {
+                            case 1:
+                                return '业主';
+                            case 2:
+                                return '亲属';
+                            case 3:
+                                return '租客';
+                        }
+                    }
                 },
                 {
                     label: '操作',
@@ -374,6 +390,20 @@ export default {
                     }
                 })
                 .catch(() => {});
+        },
+        lookPage(row) {
+            this.$store.dispatch('addPopup', {
+                url: '/assetManagement/stepPage/houseDataPop.vue',
+                width: '1044px',
+                height: '600px',
+                props: {
+                    data: row
+                },
+                notip: true,
+                showCancelButton: true,
+                showConfirmButton: true,
+                title: '成员信息'
+            });
         }
     }
 };

operationSupport/src/views/assetManagement/stepPage/houseDataPop.vue

@@ -0,0 +1,135 @@
+<template>
+    <div class="content-item">
+        <div class="formContent-item_title">基础信息</div>
+        <div class="widthFlex">
+            <household-table :tableName="householdTable.left" :tabData="houseData"></household-table>
+            <household-table :tableName="householdTable.right" :tabData="houseData"></household-table>
+        </div>
+        <div class="formContent-item_title">人脸信息</div>
+        <div class="detailImg">
+            <div class="clickUpText">
+                <img class="dataImg" v-if="!!houseData.facePictureUrl" :src="houseData.facePictureUrl" />
+                <template v-else>
+                    <img class="bg-img" src="@/assets/img/ownerManagement/img_zhaopian2@2x.png" alt="" />
+                    <div>无人脸图片</div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import list from '@utils/list.js';
+import householdTable from './householdTable.vue';
+export default {
+    components: { householdTable },
+    mixins: [list],
+    props: ['params'],
+    data() {
+        return {
+            houseData: {},
+            householdTable: {
+                left: [
+                    {
+                        lable: '姓名',
+                        prop: 'name'
+                    },
+                    {
+                        lable: '手机号',
+                        prop: 'phone'
+                    },
+                    {
+                        lable: '身份证号',
+                        prop: 'idNumber'
+                    },
+                    {
+                        lable: '出生日期',
+                        prop: 'birthDate'
+                    },
+                    {
+                        lable: '民族',
+                        prop: 'nation'
+                    }
+                    // {
+                    //     lable: '入住时间',
+                    //     prop: 'checkInDate'
+                    // }
+                ],
+                right: [
+                    {
+                        lable: '类型',
+                        prop: 'householdType'
+                    },
+                    {
+                        lable: '人员编号',
+                        prop: 'personnelNumber'
+                    },
+                    {
+                        lable: '性别',
+                        prop: 'sex',
+                        typeArray: [
+                            { type: 0, lable: '未知' },
+                            { type: 1, lable: '男' },
+                            { type: 2, lable: '女' }
+                        ]
+                    },
+                    {
+                        lable: '国籍',
+                        prop: 'nationality',
+                        typeArray: [
+                            { type: 1, lable: '中国' },
+                            { type: 2, lable: '其他' }
+                        ]
+                    },
+                    {
+                        lable: '户籍地址',
+                        prop: 'permanentAddress'
+                    }
+                ]
+            }
+        };
+    },
+    created() {
+        console.log(this.params);
+        this.getHouse(this.params.data.residentId);
+    },
+    methods: {
+        getHouse(id) {
+            this.$http
+                .get('/sc-community/scResident/find/' + id)
+                .then(({ data, status, msg }) => {
+                    if (0 === status) {
+                        if (data !== null) {
+                            this.houseData = data;
+                        }
+                    } else {
+                        this.$message.error(msg);
+                    }
+                })
+                .catch(() => {});
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+@import '../style.scss';
+.content {
+    .content-item {
+        padding: 0;
+    }
+}
+.detailImg {
+    width: 200px;
+    height: 280px;
+    background: #f8fcff;
+    border-radius: 4px;
+    border: 1px solid #e0e1e3;
+    color: #424656;
+    text-align: center;
+    .clickUpText {
+        position: inherit;
+        img.bg-img {
+            width: 100px;
+        }
+    }
+}
+</style>