充实商品静态页，增加empty图片

sfmind
1 parent 6e685c48
Showing 16 changed files with 217 additions and 5 deletions
yudao-ui-app/pages/product/product.vue
yudao-ui-app/static/images/empty/address.png
yudao-ui-app/static/images/empty/cart.png
yudao-ui-app/static/images/empty/comment.png
yudao-ui-app/static/images/empty/coupon.png
yudao-ui-app/static/images/empty/data.png
yudao-ui-app/static/images/empty/favor.png
yudao-ui-app/static/images/empty/history.png
yudao-ui-app/static/images/empty/list.png
yudao-ui-app/static/images/empty/message.png
yudao-ui-app/static/images/empty/news.png
yudao-ui-app/static/images/empty/order.png
yudao-ui-app/static/images/empty/page.png
yudao-ui-app/static/images/empty/permission.png
yudao-ui-app/static/images/empty/search.png
yudao-ui-app/static/images/empty/wifi.png
@@ -17,10 +17,92 @@
           <u--text-price color="red" size="16" intSize="26" :text="product.price"></u--text-price>
         </view>
       </view>
-      <view class="prod-collect">
-        <u-icon name="heart" color="#2979ff" size="28"></u-icon>
+      <view class="prod-favor">
+        <u-icon name="star" color="#2979ff" size="28"></u-icon>
       </view>
+
+    </view>
+
+    <u-gap height="8" bgColor="#f3f3f3"></u-gap>
+    <view class="info-box">
+      <text class="info-title">配送</text>
+<!--      <text>快递配送</text>
+      <text>到店自提</text>-->
+    </view>
+
+    <u-gap height="8" bgColor="#f3f3f3"></u-gap>
+    <view class="info-box" @click="showPromPopup">
+      <text class="info-title">促销</text>
+    </view>
+
+    <view>
+      <u-popup :show="promotionPopup" :round="10" :closeable="true" :closeOnClickOverlay="false" @close="closePromPopup">
+        <view class="prom-popup-slot">
+          <view class="prom-title">促销信息</view>
+          <view class="prom-list">
+            <view class="prom-item">全场满500减100</view>
+            <view class="prom-item">全场满300减50</view>
+            <view class="prom-item">全场满200减20</view>
+            <view class="prom-item">全场满100减5</view>
+          </view>
+        </view>
+      </u-popup>
     </view>
+
+    <u-gap height="8" bgColor="#f3f3f3"></u-gap>
+    <view class="info-box">
+      <text class="info-title">领券</text>
+    </view>
+
+    <u-gap height="8" bgColor="#f3f3f3"></u-gap>
+    <view class="info-box">
+      <text class="info-title">已选</text>
+    </view>
+
+    <u-gap height="8" bgColor="#f3f3f3"></u-gap>
+    <view class="evaluation-box-wrap">
+      <view class="evaluation-box">
+        <view class="evaluation-title">评价</view>
+        <view class="evaluation-info">
+          <view class="evan-type-list">
+            <view class="evan-type-item" v-for="(item, index) in evanTypeList" :key="index" @click="handleEvanTypeClick(index)">
+              {{item.name}}({{item.count}})
+            </view>
+          </view>
+          <view class="comment-empty" v-if="true">
+            <u-empty mode="comment" icon="/static/images/empty/comment.png"></u-empty>
+          </view>
+          <view v-else class="comment-list" style="min-height: 50px">
+
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view class="fixed-btn-box">
+      <view class="btn-group">
+        <view class="btn-item">
+          <u-icon name="home" :size="24"></u-icon>
+          <view class="btn-text">首页</view>
+        </view>
+        <view class="btn-item">
+          <u-icon name="server-man" :size="24"></u-icon>
+          <view class="btn-text">客服</view>
+        </view>
+        <view class="btn-item">
+          <u-icon name="bag" :size="24"></u-icon>
+          <view class="btn-text">购物车</view>
+        </view>
+        <view style="width: 200rpx">
+          <u-button type="warning" shape="circle" size="small" text="加入购物车"></u-button>
+        </view>
+        <view style="width: 200rpx">
+          <u-button type="error" shape="circle" size="small" text="立即购买"></u-button>
+        </view>
+      </view>
+    </view>
+
+
   </view>
 </template>
@@ -37,7 +119,36 @@ export default {
         title: '山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。',
         desc: '山不在于高，有了神仙就会有名气。水不在于深，有了龙就会有灵气。这是简陋的房子，只是我品德好就感觉不到简陋了。',
         price: '13.00'
-      }
+      },
+      promotionPopup: false,
+      currentEvanType: 0,
+      evanTypeList: [
+        {
+          id: '0',
+          name: '全部',
+          count: 0
+        },
+        {
+          id: '1',
+          name: '好评',
+          count: 0
+        },
+        {
+          id: '2',
+          name: '中评',
+          count: 0
+        },
+        {
+          id: '3',
+          name: '差评',
+          count: 0
+        },
+        {
+          id: '4',
+          name: '有图',
+          count: 0
+        },
+      ]
     }
   },
   onLoad(e) {
@@ -53,7 +164,16 @@ export default {
   methods: {
     loadProductData(){
-    }
+    },
+    showPromPopup() {
+      this.promotionPopup = true
+    },
+    closePromPopup(){
+      this.promotionPopup = false
+    },
+    handleEvanTypeClick(e) {
+      this.currentEvanType = e.index;
+    },
   },
   computed: {
@@ -92,11 +212,103 @@ export default {
       justify-content: space-between;
     }
   }
-  .prod-collect {
+  .prod-favor {
     margin-top: 15rpx;
   }
 }
+.info-box {
+  padding: 15rpx 30rpx;
+  .info-title {
+    font-size: 30rpx;
+  }
+}
+
+.prom-popup-slot {
+  width: 750rpx;
+  min-height: 500rpx;
+  .prom-title {
+    background: #f3f3f3;
+    line-height: 100rpx;
+    padding-left: 30rpx;
+    font-size: 36rpx;
+    border-radius: 10px 10px 0 0;
+  }
+  .prom-list{
+    padding: 30rpx;
+    .prom-item{
+      line-height: 40rpx;
+      font-size: 24rpx;
+    }
+  }
+}
+
+.evaluation-box-wrap {
+  background: #f3f3f3;
+
+  .evaluation-box {
+    border-radius: 20rpx 20rpx 0 0;
+    background: $custom-bg-color;
+    padding-bottom: 120rpx;
+
+    .evaluation-title{
+      border-radius: 20rpx 20rpx 0 0;
+      padding: 20rpx 30rpx;
+      border-bottom: $custom-border-style;
+      font-size: 30rpx;
+    }
+
+    .evaluation-info{
+
+    }
+
+    .evan-type-list{
+      padding: 20rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+
+      .evan-type-item {
+        border-radius: 8rpx;
+        padding: 8rpx 12rpx;
+        background: #f3f3f3;
+        font-size: 12rpx;
+        text-align: center;
+      }
+    }
+
+    .comment-empty {
+
+    }
+  }
+}
+
+.fixed-btn-box {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  .btn-group {
+    background: $custom-bg-color;
+    border-top: $custom-border-style;
+
+    width: 750rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    height: 100rpx;
+
+    .btn-item {
+      width: 80rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .btn-text {
+        font-size: 12rpx;
+        color: #666666;
+      }
+    }
+  }
+}
 </style>