Feat: 地标好物（页面&接口）

(cherry picked from commit c18ec66653)
2024-11-15 10:40:13 +08:00
parent 6983ebeb21
commit b5c87c1edb
9 changed files with 961 additions and 129 deletions
@@ -0,0 +1,118 @@
+<template>
+  <view class="list-box flex flex-wrap">
+    <view
+      v-for="item in goods"
+      :key="item.id"
+      class="item"
+      @click="goGoods(item.productId)"
+    >
+      <image
+        :src="webUrl + '/home/mark-land.png'"
+        class="mark-img"
+      />
+      <image
+        :src="item.storeImage"
+        mode="scaleToFill"
+        class="good-img"
+      />
+      <view class="content flex flex-col jc-between">
+        <view class="more-t bold">{{ item.title }}</view>
+        <view class="one-t desc">{{ item.description }}</view>
+        <view class="flex jc-between ai-center">
+          <text class="price">￥{{ item.price }}</text>
+          <image
+            :src="webUrl + '/home/icon-cart.png'"
+            class="btn"
+          />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    goods: {
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+    }
+  },
+  methods: {
+    goGoods(id) {
+      uni.navigateTo({
+        url: `/pages/shop/GoodsCon/index?id=${id}&from=landmark`
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list-box {
+  margin-top: 24rpx;
+  .item {
+    position: relative;
+    width: 344rpx;
+    margin-right: 22rpx;
+    margin-bottom: 22rpx;
+    border-radius: 20rpx;
+    background: #FFFFFF;
+    overflow: hidden;
+    .mark-img {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 3;
+      display: block;
+      width: 84rpx;
+      height: 74rpx;
+    }
+    .good-img {
+      display: block;
+      width: 344rpx;
+      height: 344rpx;
+    }
+    .content {
+      height: 156rpx;
+      padding: 8rpx 8rpx 18rpx 8rpx;
+      .more-t {
+        font-size: 28rpx;
+        line-height: 36rpx;
+        color: #333;
+      }
+      .desc {
+        padding: 5rpx 0;
+        height: 34rpx;
+        color: #FFC543;
+        font-size: 24rpx;
+      }
+      .price {
+        font-size: 40rpx;
+        line-height: 40rpx;
+        font-weight: bold;
+        color: #C52733;
+      }
+      .btn {
+        display: block;
+        width: 48rpx;
+        height: 48rpx;
+      }
+    }
+  }
+  .item:nth-child(2n) {
+    margin-right: 0;
+  }
+}
+.list-wrap {
+  margin: 20rpx 0 0 0;
+  padding: 0 20rpx;
+  .loadend {
+    width: 100%;
+  }
+}
+</style>