update: 我的主页UI设计

java-mall-app-shop-admin/pages/my/my.vue

@@ -5,7 +5,8 @@
       :background="'linear-gradient(to left, #ff3000, #a70300)'"
       v-if="true"
     ></status-bar>
-    <view class="hander">
+
+    <view class="hander"  @click="skipu()">
       <view class="hander-left">
         <view class="user-img">
           <u--image
@@ -13,21 +14,15 @@
               dashboardInfo.store_info.store_logo || '../../static/user-img.png'
             "
             shape="circle"
-            width="60"
+            width="64"
-            height="60"
+            height="64"
           ></u--image>
         </view>
         <view class="user-info">
-          <view class="user-name-block" @click="skipu()">
+          <view class="user-name-block">
             <view class="user-name">
               {{ dashboardInfo.store_info.store_name }}
             </view>
-            <u-icon
-              style="display: inline-block; margin-left: 8rpx"
-              name="arrow-right"
-              size="12"
-              color="#fff"
-            ></u-icon>
           </view>
           <view class="user-store-name">
             {{ dashboardInfo.store_info.store_grade_name }}
@@ -35,32 +30,59 @@
         </view>
       </view>
       <view class="hander-right">
-        <view class="right-item">
+        <view class="right-item kf_item">
           <u-icon
             class="icon-shezhi"
             custom-prefix="custom-icon-kefu custom-icon"
-            size="25"
+            size="20"
             color="#fff"
           ></u-icon>
-          <view class="icon-label">平台客服</view>
+          <view class="icon-label">官方客服</view>
         </view>
-        <view class="right-item" @click="shipuSetting()">
+        <view class="right-item">
-          <u-icon
+          <u-icon name="arrow-right" size="18" color="#fff"></u-icon>
-            class="icon-shezhi"
-            custom-prefix="custom-icon-shezhi custom-icon"
-            size="22"
-            color="#fff"
-          ></u-icon>
-          <view class="icon-label">设置</view>
         </view>
       </view>
-      <view class="shop-info">
+    </view>
+
+    <view class="shop_status" :style="{background: shopStatus==1 ? '#D8F1EC' : shopStatus==2 ? '#ffecf2': '#eee'}">
+      <u-cell-group :border="false">
+        <u-cell
+          @click="handleShowTime"
+          iconStyle="marginRight:6px; color: #279B8B;"
+          :border="false"
+          isLink
+          icon="hourglass-half-fill"
+          title="营业中"
+          v-if="shopStatus==1"
+        ></u-cell>
+        <u-cell
+          iconStyle="marginRight:6px; color: #fe411b"
+          :border="false"
+          isLink
+          url="/pages/my/shopQRcode/shopQRcode"
+          icon="hourglass-half-fill"
+          title="已停业"
+           v-if="shopStatus==2"
+        ></u-cell>
+         <u-cell
+          iconStyle="marginRight:6px; color: #666"
+          :border="false"
+          isLink
+          url="/pages/my/shopQRcode/shopQRcode"
+          icon="hourglass-half-fill"
+          title="已打烊"
+           v-if="shopStatus==3"
+        ></u-cell>
+      </u-cell-group>
+    </view>
+
+    <view class="myui_card shop-info">
       <view class="shop-info-item">
         <u-count-to
           class="item-value turnover-item turnover-item-num"
           :start-val="0"
           :end-val="dashboardInfo.order.yestoday_num"
-            color="#fff"
         ></u-count-to>
         <view class="item-label">昨日订单数</view>
       </view>
@@ -69,7 +91,6 @@
           class="item-value turnover-item turnover-item-num"
           :start-val="0"
           :end-val="dashboardInfo.order.month_num"
-            color="#fff"
         ></u-count-to>
         <view class="item-label">当月订单数</view>
       </view>
@@ -79,69 +100,102 @@
           :start-val="0"
           :end-val="dashboardInfo.order.pay_amount"
           :decimals="2"
-            color="#fff"
           separator=","
         ></u-count-to>
         <view class="item-label">成交总金额</view>
       </view>
     </view>
+
+    <view class="myui_card tool">
+      <u-cell-group :border="false">
+        <u-cell
+          iconStyle="marginRight:6px; color: #62BBAE"
+          :border="false"
+          isLink
+          url="/pages/my/shopQRcode/shopQRcode"
+          icon="scan"
+          title="店铺二维码"
+        ></u-cell>
+        <u-cell
+          iconStyle="marginRight:6px; color: #62BBAE"
+          :border="false"
+          isLink
+          url="/pages/my/userInfo"
+          icon="man-add-fill"
+          title="账号设置"
+        ></u-cell>
+        <u-cell
+          iconStyle="marginRight:6px; color: #62BBAE"
+          :border="false"
+          isLink
+          url="/pages/my/printer/printerList"
+          icon="bookmark-fill"
+          title="打印设置"
+        ></u-cell>
+        <u-cell
+          iconStyle="marginRight:6px; color: #62BBAE"
+          :border="false"
+          isLink
+          url="/pages/my/printer/printerList"
+          icon="bell-fill"
+          title="铃声设置"
+        ></u-cell>
+        <u-cell
+          iconStyle="marginRight:6px; color: #026bff"
+          :border="false"
+          isLink
+          url="/pages/my/versions"
+          icon="error-circle-fill"
+          title="版本信息"
+        ></u-cell>
+        <u-cell
+          iconStyle="marginRight:6px; color: #ff695b"
+          :border="false"
+          isLink
+          url="/pages/my/protocol/protocol"
+          icon="file-text-fill"
+          title="隐私协议"
+        ></u-cell>
+        <u-cell
+          iconStyle="marginRight:6px; color: #fd4d40"
+          :border="false"
+          isLink
+          url="/pages/my/aboutUs/aboutUs"
+          icon="account-fill"
+          title="关于小发"
+        ></u-cell>
+      </u-cell-group>
     </view>
-    <view class="fm-content">
+
-      <view class="title">常用功能</view>
+    <view class="btn_logout">退出登录</view>
-      <view class="fm-list">
+
-        <view class="fm-item" @click="skipuPrinter">
+     <tpfTimeRange
-          <u-icon
+      ref="time"
-            class="fm-icon"
+      :startDefaultTime="form.info.store_opening_hours"
-            custom-prefix="custom-icon-dayinji custom-icon"
+      :endDefaultTime="form.info.store_close_hours"
-            size="25"
+      @timeRange="handleTimeRange"
-            color="#e62300"
+    ></tpfTimeRange>
-          ></u-icon>
+
-          打印机
-        </view>
-        <view class="fm-item" @click="skipuOrCode">
-          <u-icon
-            class="fm-icon"
-            custom-prefix="custom-icon-erweima custom-icon"
-            size="25"
-            color="#e62300"
-          ></u-icon>
-          店铺二维码
-        </view>
-        <view class="fm-item" @click="skipuBusinessStatus">
-          <u-icon
-            class="fm-icon"
-            custom-prefix="custom-icon-erweima custom-icon"
-            size="25"
-            color="#e62300"
-          ></u-icon>
-          营业状态
-        </view>
-        <!-- <view class="fm-item">
-          <u-icon
-            class="fm-icon"
-            custom-prefix="custom-icon-yunfei custom-icon"
-            size="30"
-            color="#000"
-          ></u-icon>
-          运费设置
-        </view> -->
-      </view>
-    </view>
     <tabbar tabbarName="my"></tabbar>
   </view>
 </template>
 
 <script>
-import { GetAccountDashboard } from "../../api/user";
+import { GetAccountDashboard } from "@/api/user";
-import statusBar from "../../components/status-bar.vue";
+import { GetShopBaseInfo } from "@/api/shop";
+import statusBar from "@/components/status-bar.vue";
 import tabbar from "@/components/tabbar/tabbar.vue";
+import tpfTimeRange from "@/components/tpf-time-range/tpf-time-range.vue";
+
 export default {
   components: {
     statusBar,
     tabbar,
+    tpfTimeRange,
   },
   data() {
     return {
+      shopStatus: 1,
       isBusiness: true,
       dashboardInfo: {
         data: {},
@@ -169,12 +223,41 @@ export default {
           store_name: "",
         },
       },
+      form: {
+         info: {
+          store_opening_hours: "00:00",
+          store_close_hours: "00:00",
+        },
+      }
     };
   },
+
   onShow() {
     this.getAccountDashboard();
+    this.getShopBaseInfo();
   },
   methods: {
+     async getShopBaseInfo() {
+      let res = await GetShopBaseInfo();
+      if (res && res.status == 200) {
+        this.form = res.data;
+        this.form.businessTime =
+          res.data.info.store_opening_hours +
+          "-" +
+          res.data.info.store_close_hours;
+      }
+    },
+
+     handleTimeRange(e) {
+      this.form.businessTime = e[0] + e[1];
+      this.form.store_opening_hours = e[0];
+      this.form.store_close_hours = e[1];
+    },
+
+    handleShowTime() {
+      this.$refs["time"].open();
+    },
+
     async getAccountDashboard() {
       let res = await GetAccountDashboard();
       if (res && res.status == 200) {
@@ -182,67 +265,33 @@ export default {
         this.dashboardInfo = res.data;
       }
     },
+
     skipu() {
       uni.navigateTo({
         url: "/pages/my/shopInfo",
       });
     },
-    shipuSetting() {
-      uni.navigateTo({
-        url: "/pages/my/setting",
-      });
-    },
-    skipuPrinter() {
-      uni.navigateTo({
-        url: "/pages/my/printer/printerList",
-      });
-    },
-    skipuOrCode() {
-      uni.navigateTo({
-        url: "/pages/my/shopQRcode/shopQRcode",
-      });
-    },
-    skipuBusinessStatus() {
-      uni.navigateTo({
-        url: "/pages/my/storeBusinessStatus/businessStatus",
-      });
-    },
   },
 };
 </script>
 
 <style lang="scss">
 .my-container {
-  background: #f8f8f8;
+  padding-bottom: 178rpx;
-  height: calc(100vh - 100rpx);
 
   .hander {
     position: relative;
-    padding: 20rpx 30rpx 40rpx 40rpx;
+    padding: 40rpx;
-    padding-top: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    height: 200rpx;
+    height: 186rpx;
-    background: linear-gradient(to left, #ff3000 0%, #a70300 100%);
+    // background: #FE411B;
-
+    background: linear-gradient(to bottom, #ff695b, #fd4d40);
-    &::after {
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: -200rpx;
-      z-index: 1;
-      content: " ";
-      height: 200rpx;
-      width: 100%;
-      border-radius: 0 0 50% 50%;
-      background: linear-gradient(to left, #ff3000 0%, #a70300 100%);
-    }
 
     .hander-left {
       display: flex;
       align-items: center;
-      margin-top: 40rpx;
 
       .user-img {
         margin-right: 20rpx;
@@ -269,16 +318,13 @@ export default {
         }
 
         .user-store-name {
-          width: 100rpx;
           margin-top: 12rpx;
-          padding: 4rpx 18rpx;
+          padding: 4rpx 20rpx;
-          height: 36rpx;
-          line-height: 36rpx;
-          border: 1px solid #fff;
-          border-radius: 24rpx;
           font-size: 24rpx;
-          color: #fff;
+          color: #ffecf2;
-          background: red;
+          border-radius: 100rpx;
+          border: 2rpx solid #ffecf2;
+          display: inline-block;
         }
       }
     }
@@ -290,34 +336,27 @@ export default {
       text-align: center;
       color: #fff;
       
-      .right-item {
+
-        display: flex;
+      .kf_item{
-        flex-flow: column;
+        position: absolute;
-        align-items: center;
+        right: 48rpx;
-        justify-content: flex-end;
+        top: 24rpx;
-        margin-left: 48rpx;
-        height: 90rpx;
       }
 
-      .icon-shezhi {
+      .right-item {
-        flex-direction: column;
+        display: flex;
-        margin-bottom: 6rpx;
+        align-items: center;
-        align-items: end;
+        justify-content: flex-end;
+        gap: 10rpx;
+      }
     }
   }
 
   .shop-info {
-      position: absolute;
-      left: 0;
-      bottom: -156rpx;
-      width: 100%;
-      z-index: 2;
     display: flex;
     justify-content: space-around;
-      margin: 40rpx 0;
-      font-weight: bold;
     font-size: 28rpx;
-      color: #fff;
+    margin: 32rpx 24rpx;
 
     .shop-info-item {
       display: flex;
@@ -326,9 +365,12 @@ export default {
       text-align: center;
 
       .item-value {
+        color: #222 !important;
         margin-bottom: 20rpx;
-          color: #fff;
       }
+
+      .item-label {
+        color: #999;
       }
     }
   }
@@ -368,9 +410,33 @@ export default {
     }
   }
 
+  .shop_status{
+    font-size: 28rpx;
+  }
+
+  .tool {
+    margin: 32rpx 24rpx;
+    padding-left: 0;
+    padding-right: 0;
+    ::v-deep .u-cell__body {
+      padding: 30rpx 16rpx 30rpx 24rpx;
+    }
+  }
+
+  .btn_logout {
+    margin: 0 24rpx;
+    border-radius: 60rpx;
+    text-align: center;
+    padding: 20rpx;
+    font-size: 28rpx;
+    color: #fe411b;
+    border: 2rpx solid #fe411b;
+    // background: #FE411B;
+    // background: linear-gradient(to right, #fd826f, #FE411B);
+  }
+
   .fm-content {
-    margin: 20rpx;
+    margin: 0 24rpx;
-    margin-top: 240rpx;
 
     .title {
       padding: 20rpx 32rpx;