Init project

2023-09-20 21:49:33 +08:00
parent 85a5989c96
commit c9ceac9f37
710 changed files with 125705 additions and 0 deletions
@@ -0,0 +1,212 @@
+<template>
+  <view class="pkg-product-list">
+    <view class="search-box flex jc-between ai-center">
+      <input type="text" v-model="keyword" placeholder="搜索商品" placeholder-style="color:#949494" @confirm="search">
+      <image class="icon" :src="webUrl+'/20220903142935869059.png'" mode="scaleToFill" @click="search"></image>
+    </view>
+
+    <swiper class="swiper-box" indicator-dots indicator-color="rgba(255,255,255,.3)" indicator-active-color="#fff"
+            autoplay circular v-if="bannerList.length>0">
+      <swiper-item v-for="(item,index) in bannerList" :key="index">
+        <image :src="item.pic" mode="scaleToFill" @click="$global.commonJump(item.uniappUrl)"/>
+      </swiper-item>
+    </swiper>
+
+    <image class="banner" :src="webUrl+'/20230220024816081525.png'" mode="scaleToFill" @click="goStory"/>
+
+    <view class="nav-box flex">
+      <view class="item" :class="{'active':index===navIndex}" v-for="(item,index) in navList" :key="index"
+            @click="navTap(index)">{{ item.value }}
+      </view>
+    </view>
+
+    <view class="section-title bold">千县名品榜单</view>
+
+    <view class="list flex flex-wrap">
+      <view class="item" v-for="(item,index) in dataList" :key="index" @click="goGoods(item.id)">
+        <image class="label" :src="webUrl+'/20230222133041781911.png'"/>
+        <image class="cover" :src="item.image" mode="scaleToFill"/>
+        <view class="name bold one-t">{{ item.storeName }}</view>
+        <view class="price">￥
+          <text class="bold">{{ item.price }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import {countyFamous} from "@/api/product";
+import {getProducts} from "@/api/store";
+
+export default {
+  name: "famousList",
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      keyword: "",
+      page: 1,
+      bannerList: [],
+      dataList: [],
+      navList: [],
+      navIndex: 0
+    }
+  },
+  onLoad() {
+    countyFamous().then(({data}) => {
+      this.bannerList = data.banner;
+      this.navList = data.countyFamousAreaList;
+      this.search();
+    })
+  },
+  onReachBottom() {
+    this.page++;
+    this.fetchList();
+  },
+  methods: {
+    search() {
+      this.page = 1;
+      this.dataList = [];
+      this.fetchList();
+    },
+    navTap(index) {
+      if (index === this.navIndex) return;
+      this.navIndex = index;
+      this.search();
+    },
+    fetchList() {
+      let param = {
+        isCountyFamous: 1,
+        page: this.page,
+        limit: 10,
+        keyword: this.keyword,
+        countyFamousArea: this.navList.length > 0 ? this.navList[this.navIndex].key : ""
+      }
+
+      getProducts(param).then(({data}) => {
+        for (let i = 0; i < data.length; i++) {
+          this.dataList.push(data[i]);
+        }
+      })
+    },
+    goGoods(id) {
+      uni.navigateTo({
+        url: "/pages/shop/GoodsCon/index?id=" + id
+      })
+    },
+    goStory() {
+      uni.navigateTo({
+        url: "/pkg_product/views/famousStory"
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "@/assets/css/product.less";
+
+.pkg-product-list {
+  min-height: 100vh;
+  box-sizing: border-box;
+  padding-top: 16rpx;
+  background: #fff;
+  color: #333;
+
+  .swiper-box {
+    margin: 18rpx 32rpx 0;
+  }
+
+  .banner {
+    width: 686rpx;
+    height: 160rpx;
+    margin: 20rpx 32rpx 0;
+  }
+
+  .section-title {
+    margin: 0 32rpx 20rpx;
+    font-size: 32rpx;
+    line-height: 42rpx;
+  }
+
+  .nav-box {
+    width: 718rpx;
+    box-sizing: border-box;
+    margin: 26rpx 32rpx;
+    overflow-x: auto;
+
+    .item {
+      margin-right: 50rpx;
+      color: #7D7D7D;
+      font-size: 26rpx;
+      line-height: 38rpx;
+      white-space: nowrap;
+    }
+
+    .active {
+      position: relative;
+      color: #333;
+      font-size: 28rpx;
+      line-height: 40rpx;
+    }
+
+    .active:after {
+      content: "";
+      display: block;
+      width: 100%;
+      height: 6rpx;
+      border-radius: 30px;
+      background: #FF564A;
+    }
+  }
+
+  .nav-box::-webkit-scrollbar {
+    width: 0 !important
+  }
+
+  .list {
+    padding: 0 32rpx 32rpx;
+
+    .item {
+      position: relative;
+      width: 332rpx;
+      margin: 0 22rpx 24rpx 0;
+
+      .label {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 72rpx;
+        height: 60rpx;
+      }
+
+      .cover {
+        width: 332rpx;
+        height: 332rpx;
+        border-radius: 8rpx;
+      }
+
+      .name {
+        height: 64rpx;
+        margin: 4rpx 0;
+        font-size: 34rpx;
+        line-height: 48rpx;
+      }
+
+      .price {
+        color: #DA0000;
+        font-size: 28rpx;
+        line-height: 36rpx;
+
+        .bold {
+          font-size: 34rpx;
+        }
+      }
+    }
+
+    .item:nth-child(2n) {
+      margin-right: 0;
+    }
+  }
+}
+</style>