Feat(特色礼品):接口对接

2024-03-13 18:25:02 +08:00
parent 6852bdb047
commit 864d949126
5 changed files with 622 additions and 237 deletions
@@ -0,0 +1,148 @@
+<template>
+  <view class="gift-page">
+    <view class="page1-wrap">
+      <image :src="data.mainImage" class="bg" />
+    </view>
+    <view class="page2-wrap">
+      <view class="bg-cont">
+        <rich-text :nodes="data.backgroundImage1Html" />
+        <!-- <image :src="data.backgroundImage1" class="bg" /> -->
+      </view>
+      <view class="good-list">
+        <view
+          v-for="(item, index) in data.productList1"
+          :key="index"
+          class="good-item"
+          @click="goodItemClick(item)"
+        >
+          <image :src="item.productImage" class="img" />
+        </view>
+      </view>
+    </view>
+    <view class="page3-wrap">
+      <view class="bg-cont">
+        <rich-text :nodes="data.backgroundImage2Html" />
+        <!-- <image :src="data.backgroundImage2" class="bg" /> -->
+      </view>
+      <view class="good-list">
+        <view
+          v-for="(item, index) in data.productList2"
+          :key="index"
+          class="good-item"
+          @click="goodItemClick(item)"
+        >
+          <image :src="item.productImage" class="img" />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import {
+  customizedGiftContent
+} from '@/api/product'
+export default {
+  name: 'GiftContent',
+  data() {
+    return {
+      data: {
+        backgroundImage1: '',
+        backgroundImage2: '',
+        backgroundImage1Html: '',
+        backgroundImage2Html: '',
+        mainImage: '',
+        productList1: [],
+        productList2: [],
+      }
+    }
+  },
+  onLoad(options) {
+    uni.setNavigationBarTitle({
+      title: options.name + '-' + '特色礼品'
+    })
+    this.getPageDataReq(options.id)
+  },
+  methods: {
+    getPageDataReq(id) {
+      uni.showLoading({
+        title: '数据加载中...'
+      })
+      customizedGiftContent({ id }).then(res => {
+        const { success, data } = res
+        if (success) {
+          this.data = {
+            ...data,
+            backgroundImage1Html: `<img src="${data.backgroundImage1}" style="display: block;max-width: 100%;">`,
+            backgroundImage2Html: `<img src="${data.backgroundImage2}" style="display: block;max-width: 100%;">`
+          }
+        }
+        uni.hideLoading()
+      }).catch(() => {
+        uni.hideLoading()
+      })
+    },
+    goodItemClick(good) {
+      const productId = good.productId
+      if (!productId) {
+        return
+      }
+      uni.navigateTo({
+        url: `/pages/shop/GoodsCon/index?id=${productId}`
+      })
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+.page1-wrap {
+  .bg {
+    display: block;
+    width: 100%;
+    height: 100vh;
+  }
+}
+.good-list {
+  position: absolute;
+  z-index: 5;
+  width: 100%;
+}
+.page2-wrap {
+  position: relative;
+  .bg-cont {
+    position: relative;
+    z-index: 2;
+  }
+  .good-list {
+    top: 196px;
+    .good-item + .good-item {
+      margin: 25px 0 0 0;
+    }
+    .good-item {
+      .img {
+        display: block;
+        width: 325px;
+        height: 358px;
+        margin: 0 auto;
+      }
+    }
+  }
+}
+.page3-wrap {
+  position: relative;
+  .good-list {
+    top: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    padding: 12px 0 0 0;
+    .good-item {
+      margin: 0 0 20px 0;
+      .img {
+        width: 166px;
+        height: 262px;
+      }
+    }
+  }
+}
+</style>