优化

mallApp/src/pages.json

@@ -6,7 +6,7 @@
         }
     },
     "pages": [
-        { "path": "pages/home/recent", "style": { "navigationBarTitleText": "我的花店","enablePullDownRefresh":true} },
+        { "path": "pages/home/recent", "style": { "navigationBarTitleText": "首页","enablePullDownRefresh":true} },
         { "path": "pages/home/index", "style": { "navigationStyle": "custom", "navigationBarTitleText": "首页" } },
         { "path": "pages/home/category", "style": { "navigationBarTitleText": "花束" } },
         { "path": "pages/home/shop-category", "style": { "navigationBarTitleText": "分类" } },

mallApp/src/pages/home/order.vue

@@ -29,10 +29,12 @@
         <view class="popup-handle"></view>
         <view class="popup-top">
           <view class="popup-title-wrap">
-            <text class="popup-title">店铺筛选</text>
-            <text class="popup-subtitle">选择需要查看的店铺订单</text>
+            <text class="popup-title">选择店铺</text>
+            <text class="popup-subtitle">筛选后只看该店订单</text>
+          </view>
+          <view class="popup-close-wrap" @click="closeStorePopup">
+            <text class="iconfont iconguanbi popup-close"></text>
           </view>
-          <text class="iconfont iconguanbi popup-close" @click="closeStorePopup"></text>
         </view>
 
         <scroll-view scroll-y class="store-scroll">
@@ -40,13 +42,14 @@
             v-for="item in storeOptions"
             :key="item.id"
             class="store-option"
+            :class="{ 'is-active': Number(hdId) === Number(item.id) }"
             @tap.stop="selectStore(item)"
           >
+            <text class="store-option-name">{{ item.name }}</text>
             <text
-              class="iconfont radio-icon"
-              :class="Number(hdId) === Number(item.id) ? 'iconxuanzhong' : 'iconweixuanzhong'"
+              v-if="Number(hdId) === Number(item.id)"
+              class="iconfont icongou store-option-check"
             ></text>
-            <text class="store-option-name">{{ item.name }}</text>
           </view>
         </scroll-view>
       </view>
@@ -255,11 +258,16 @@ export default {
   padding: 20upx 30upx;
   background: #fff;
   border-bottom: 1upx solid $borderColor;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
 }
 
 .store-filter {
   display: flex;
   align-items: center;
+  flex-direction: row;
 }
 
 .filter-text {
@@ -279,75 +287,111 @@ export default {
 }
 
 .store-popup {
-  padding: 0 30upx calc(30upx + env(safe-area-inset-bottom));
+  padding: 0 28upx calc(28upx + env(safe-area-inset-bottom));
 }
 
 .popup-handle {
-  width: 72upx;
+  width: 64upx;
   height: 8upx;
-  margin: 16upx auto 8upx;
+  margin: 16upx auto 4upx;
   border-radius: 8upx;
-  background: #e5e5e5;
+  background: #e8e8e8;
 }
 
 .popup-top {
   position: relative;
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
-  padding: 16upx 0 24upx;
+  padding: 20upx 56upx 28upx;
 }
 
 .popup-title-wrap {
-  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .popup-title {
-  display: block;
   font-size: 34upx;
   font-weight: 600;
   color: $fontColorMain;
+  line-height: 1.3;
 }
 
 .popup-subtitle {
-  display: block;
   margin-top: 8upx;
   font-size: 24upx;
   color: $fontColor3;
+  line-height: 1.3;
 }
 
-.popup-close {
+.popup-close-wrap {
   position: absolute;
-  top: 0;
+  top: 12upx;
   right: 0;
-  font-size: 36upx;
-  color: $fontColor3;
-  padding: 8upx;
+  width: 56upx;
+  height: 56upx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.popup-close {
+  font-size: 32upx;
+  color: #bdbdbd;
 }
 
 .store-scroll {
-  max-height: 520upx;
+  max-height: 560upx;
+  padding-bottom: 8upx;
 }
 
 .store-option {
   display: flex;
+  flex-direction: row;
   align-items: center;
-  padding: 28upx 0;
-  border-bottom: 1upx solid $borderColor;
-}
+  justify-content: space-between;
+  min-height: 96upx;
+  padding: 24upx 28upx;
+  margin-bottom: 16upx;
+  border-radius: 16upx;
+  background: #f7f8fa;
+  box-sizing: border-box;
 
-.radio-icon {
-  font-size: 36upx;
-  color: $fontColor5;
+  &:last-child {
+    margin-bottom: 0;
+  }
 
-  &.iconxuanzhong {
-    color: $greenColor;
+  &.is-active {
+    background: rgba(18, 201, 107, 0.1);
+    border: 2upx solid $greenColor;
+    padding: 22upx 26upx;
   }
 }
 
 .store-option-name {
-  margin-left: 20upx;
+  flex: 1;
+  min-width: 0;
   font-size: 30upx;
   color: $fontColorMain;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  .is-active & {
+    color: $greenColor;
+    font-weight: 600;
+  }
+}
+
+.store-option-check {
+  flex-shrink: 0;
+  margin-left: 16upx;
+  font-size: 32upx;
+  color: $greenColor;
+  font-weight: bold;
 }
 </style>