Feat:接口对接

2023-11-20 15:54:00 +08:00
parent 4652b6706a
commit a3ac5a2506
24 changed files with 2305 additions and 152 deletions
@@ -0,0 +1,97 @@
+<script>
+import {getFestival} from "@/api/product";
+
+export default {
+  name: "festival", // 节日专题
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      topImage: '',
+      contents: []
+    }
+  },
+  onLoad() {
+    getFestival().then(({data}) => {
+      this.topImage = data.topImage;
+      this.contents = data.contents;
+    })
+  }
+}
+</script>
+
+<template>
+  <view class="pkg-product-festival">
+    <image class="top-img" mode="widthFix" :src="topImage" v-if="topImage"/>
+
+    <view class="section" v-for="(content,cIndex) in contents" :key="cIndex">
+      <image class="section-bg" :src="content.backgroundImage" mode="widthFix"/>
+
+      <view class="list flex flex-wrap" :class="cIndex===0?'section12':'section8'">
+        <image :class="cIndex===0?'span12':'span8'" mode="scaleToFill" :src="item.image"
+               v-for="(item,index) in content.products" :key="index" @click="$global.navToGoods(item.id)"/>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="less">
+.pkg-product-festival {
+  image {
+    margin: 0;
+    padding: 0;
+    border: none;
+    vertical-align: middle;
+  }
+
+  .top-img {
+    width: 100vw;
+    height: auto;
+  }
+
+  .section12 {
+    padding: 0 32rpx;
+  }
+
+  .section8 {
+    padding: 0 16rpx;
+  }
+
+  .section {
+    position: relative;
+    width: 100vw;
+
+    .section-bg {
+      width: 100%;
+      height: auto;
+    }
+
+    .list {
+      position: absolute;
+      top: 350rpx;
+      left: 0;
+      width: 100vw;
+    }
+
+    .span12 {
+      width: 332rpx;
+      height: 520rpx;
+      margin: 0 22rpx 24rpx 0;
+    }
+
+    .span12:nth-child(2n) {
+      margin-right: 0;
+    }
+
+    .span8 {
+      width: 234rpx;
+      height: 384rpx;
+      margin: 0 8rpx 24rpx 0;
+    }
+
+    .span8:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+}
+</style>