Refactor(首页):改版重构-界面完成

components/xdd-product-item/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <view class="xdd-product-item" @click="viewHandle(item)">
+    <view class="focus-img">
+      <image
+        :src="item[imageKey]"
+        class="img"
+      />
+      <image
+        v-if="item.isOldBrand"
+        :src="webUrl + '/home/old-mark'"
+        class="mark-img"
+      />
+      <image
+        v-if="item.isOldBrand"
+        :src="webUrl + '/home/mark-land.png'"
+        class="mark-img"
+      />
+      <image
+        v-if="item.isCountyFamous"
+        :src="webUrl + '/home/qixian-mark.png'"
+        class="mark-img"
+      />
+    </view>
+    <view class="info-wrap">
+      <view class="name more-t">
+        {{ item.storeName }}
+      </view>
+      <view class="desc">
+        {{ item.desc || '古法熬制·甄选原料' }}
+      </view>
+      <view class="coupon">
+        <view class="tag">券</view>
+        <view class="tag">5元无门槛</view>
+      </view>
+      <view class="price-wrap">
+        <view class="price">
+          <text class="price-txt price-red">￥{{ item.price }}</text>
+        </view>
+        <view class="btn">
+          <image
+            :src="webUrl + '/home/icon-cart.png'"
+            class="img"
+          />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'XddProductItem',
+  props: {
+    item: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    imageKey: {
+      type: String,
+      default: 'image'
+    }
+  },
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL
+    }
+  },
+  methods: {
+    viewHandle(item) {
+      this.$emit('view', item)
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.xdd-product-item {
+  border-radius: 20rpx;
+  background-color: #fff;
+  overflow: hidden;
+  .focus-img {
+    position: relative;
+    .img {
+      position: relative;
+      z-index: 2;
+      display: block;
+      width: 344rpx;
+      height: 344rpx;
+      border-radius: 20rpx;
+    }
+    .mark-img {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 3;
+      display: block;
+      width: 84rpx;
+      height: 74rpx;
+    }
+  }
+  .info-wrap {
+    padding: 12rpx;
+    .name {
+      font-size: 28rpx;
+      line-height: 40rpx;
+      color: #333;
+    }
+    .desc {
+      padding: 10rpx 0;
+      color: #FFC543;
+      font-size: 24rpx;
+    }
+    .coupon {
+      display: flex;
+      .tag + .tag {
+        margin: 0 0 0 -1rpx;
+      }
+      .tag {
+        height: 32rpx;
+        padding: 0 6rpx;
+        border-radius: 8rpx;
+        border: 1rpx solid #C52733;
+        color: #C52733;
+        line-height: 32rpx;
+        font-size: 10px;
+      }
+    }
+    .price-wrap {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      padding: 10rpx 0 0 0;
+      .price {
+        font-size: 24rpx;
+        line-height: 40rpx;
+        .price-txt {
+          font-size: 40rpx;
+          font-weight: bold;
+        }
+      }
+      .price-red {
+        margin: 0 10rpx 0 0;
+        color: #C52733;
+      }
+      .price-grey {
+        color: #C4C4C4;
+      }
+      .btn {
+        .img {
+          display: block;
+          width: 48rpx;
+          height: 48rpx;
+        }
+      }
+    }
+  }
+}
+</style>

components/xdd-tabbar/index.vue

@@ -25,9 +25,14 @@
           @click="gotoPage(item.url, item.type, item.index)"
         >
           <view class="img-wrap">
+            <!-- 预加载两张图片，可以在点击切换的时候不闪屏 -->
             <image
-              :src="currIndex === item.index ? item.onIcon : item.offIcon"
-              class="img"
+              :src="item.onIcon"
+              class="img on"
+            />
+            <image
+              :src="item.offIcon"
+              class="img off"
             />
           </view>
           <view class="name">{{ item.name }}</view>
@@ -144,6 +149,12 @@ export default {
           width: 44rpx;
           height: 44rpx;
           margin: 0 auto;
+          &.on {
+            display: none;
+          }
+          &.off {
+            display: block;
+          }
         }
       }
       .name {
@@ -158,6 +169,12 @@ export default {
           .name {
             color: #C52733;
           }
+          .on {
+            display: block;
+          }
+          .off {
+            display: none;
+          }
         }
       }
     }