Feat(时令尝鲜):接口对接

2023-09-23 18:13:26 +08:00
parent c9ceac9f37
commit 2d73c2fe46
35 changed files with 2834 additions and 1547 deletions
@@ -0,0 +1,194 @@
+<script>
+import {seasonHomeData} from "@/api/product";
+
+export default {
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      typeList: ["时令果蔬", "水产海鲜", "肉禽蛋白", "全部分类"],
+      list: [],
+      typeIndex: 0
+    }
+  },
+  onLoad() {
+    this.init();
+  },
+  methods: {
+    init() {
+      seasonHomeData().then(({data}) => this.list = data.seasonalFoodType || []);
+    },
+    goDetail() {
+      uni.navigateTo({
+        url: "/pkg_product/views/season?id=" + this.list[this.typeIndex].contents[0].id
+      })
+    }
+  },
+}
+</script>
+
+<template>
+  <view class="product-season">
+    <template v-if="typeList.length">
+      <view class="type-box">
+        <u-grid col="4">
+          <u-grid-item v-for="(item,index) in list" :key="index" @click="typeIndex=index">
+            <image class="icon-logo" :class="{'choose-icon':typeIndex===index}" :src="item.logo" mode="scaleToFill"/>
+            <text class="type-name" :class="{'choose-name':typeIndex===index}">{{ item.name }}</text>
+          </u-grid-item>
+          <u-grid-item>
+            <image class="icon-logo" :src="webUrl+'/20230913155700903114.png'" mode="scaleToFill"/>
+            <text class="type-name">全部</text>
+          </u-grid-item>
+        </u-grid>
+      </view>
+
+      <view class="title-line flex ai-center">
+        <image class="title-icon" :src="list[typeIndex].titleIcon" mode="scaleToFill"/>
+        <text>{{ list[typeIndex].title }}</text>
+      </view>
+
+      <image class="type-img" :src="list[typeIndex].contents[0].image" mode="widthFix" @click="goDetail"/>
+
+      <view class="goods-list flex flex-wrap">
+        <view class="item flex flex-col ai-end" :style="{backgroundColor:list[typeIndex].backgroundColor}" v-for="item in list[typeIndex].products" :key="item"
+              @click="$global.navToGoods(item.id)">
+          <view class="img-box">
+            <image :src="item.image" mode="scaleToFill"/>
+            <view class="img-mask flex jc-center ai-center">
+              <view class="name one-t">{{ item.storeName }}</view>
+            </view>
+          </view>
+          <view class="more-t">{{ item.storeInfo }}</view>
+          <view class="price tc">￥{{ item.price }}</view>
+        </view>
+      </view>
+    </template>
+  </view>
+</template>
+
+<style scoped lang="less">
+.product-season {
+  min-height: 100vh;
+  background: #FFFFFF;
+  color: #333333;
+
+  image {
+    vertical-align: middle;
+  }
+
+  .type-box {
+    padding: 32rpx 62rpx 0;
+
+    .icon-logo {
+      width: 80rpx;
+      height: 80rpx;
+    }
+
+    .type-name {
+      margin-top: 8rpx;
+      font-size: 24rpx;
+    }
+
+    .choose-icon {
+      width: 90rpx;
+      height: 90rpx;
+    }
+
+    .choose-name {
+      color: #f66;
+      font-size: 26rpx;
+    }
+  }
+
+  .title-line {
+    padding: 50rpx 32rpx 20rpx;
+
+    .title-icon {
+      width: 40rpx;
+      height: 40rpx;
+      margin-right: 8rpx;
+    }
+
+    text {
+      line-height: 1;
+      font-size: 32rpx;
+      font-weight: bold;
+    }
+  }
+
+  .type-img {
+    width: 690rpx;
+    padding: 0 30rpx;
+  }
+
+  .goods-list {
+    padding: 24rpx 32rpx;
+
+    .item {
+      position: relative;
+      width: 328rpx;
+      height: 480rpx;
+      box-sizing: border-box;
+      border-radius: 20rpx;
+      margin-bottom: 24rpx;
+      margin-right: 30rpx;
+      padding: 16rpx;
+
+      .img-box {
+        position: relative;
+        width: 296rpx;
+        height: 296rpx;
+
+        image {
+          width: 296rpx;
+          height: 296rpx;
+          border-radius: 20rpx;
+        }
+
+        .img-mask {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 296rpx;
+          height: 60rpx;
+          box-sizing: border-box;
+          padding: 0 20rpx;
+          background: rgba(0, 0, 0, .5);
+          border-radius: 0 0 20rpx 20rpx;
+
+          .name {
+            color: #FFFFFF;
+            font-size: 32rpx;
+          }
+        }
+      }
+
+      .more-t {
+        width: 100%;
+        margin-top: 10rpx;
+        font-size: 26rpx;
+        line-height: 38rpx;
+        text-align: left;
+      }
+
+      .price {
+        position: absolute;
+        bottom: 16rpx;
+        right: 16rpx;
+        display: inline-block;
+        height: 48rpx;
+        border-radius: 24rpx;
+        margin-top: 8rpx;
+        padding: 0 12rpx;
+        background: #FFFFFF;
+        font-size: 32rpx;
+        line-height: 48rpx;
+      }
+    }
+
+    .item:nth-child(2n) {
+      margin-right: 0;
+    }
+  }
+}
+</style>