Style(店铺):商品列表接口对接

2024-03-20 11:52:06 +08:00
parent f510226a16
commit f3f00a4e66
3 changed files with 188 additions and 5 deletions
@@ -0,0 +1,166 @@
+<template>
+  <view class="container">
+    <view v-if="isLoad">
+      <view class="goods-section flex flex-wrap">
+        <view
+          v-for="(item,index) in goodsList"
+          :key="index"
+          class="item"
+          @click="goGoodsConByID(item)"
+        >
+          <image
+            :src="item.image"
+            class="cover"
+          />
+          <view class="">
+            <view class="name more-t">{{ item.storeName }}</view>
+            <view class="price-line flex ai-center">
+              <image
+                :src="webUrl + '/20221118104357701129.png'"
+                class="label"
+                mode="scaleToFill"
+              />
+              <text>￥{{ item.price }}</text>
+            </view>
+          </view>
+          <view class="sales-line flex ai-center">
+            <image
+              :src="webUrl + '/20221118092713277343.png'"
+              class="icon"
+              mode="scaleToFill"
+            />
+            <text>{{ item.sales }}人已购买</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <goo-skeleton v-else />
+  </view>
+</template>
+
+<script>
+import {
+  getHotelGoodList
+} from "@/api/inn.js";
+import {formatDateTime} from "@/utils";
+import {getUrlParam} from "@/utils/common.js";
+import imgBox from '@/components/imageTypeSet/imagebox.vue'
+import cookie from "@/utils/store/cookie";
+import {addStore, removeStore} from "@/api/favorite";
+import GooSkeleton from '@/components/GooSkeleton/index.vue'
+
+export default {
+  components: {
+    imgBox,
+    GooSkeleton
+  },
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      isLoad: false,
+      page: 1,
+      goodsList: [],
+      id: null,
+    }
+  },
+  onLoad(options) {
+    if (options.id) {
+      this.id = options.id || null;
+      this.fetchGoods()
+    }
+  },
+  methods: {
+    goGoodsConByID(item) {
+      this.$yrouter.push({
+        path: '/pages/shop/GoodsCon/index',
+        query: {
+          id: item.id
+        }
+      })
+    },
+    fetchGoods() {
+      getHotelGoodList({
+        id: this.id,
+        page: this.page,
+        limit: 10
+      }).then(res => {
+        const { success, data } = res
+        if (success) {
+          this.isLoad = true
+          const len = data.records.length
+          if (len > 0) {
+            for (let i = 0; i < len; i++) {
+              this.goodsList.push(data.records[i])
+            }
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+@import "@/assets/css/store.less";
+.goods-section {
+  padding: 40rpx 32rpx 0;
+  background: #F5F5FA;
+  .item {
+    position: relative;
+    width: 332rpx;
+    height: 528rpx;
+    box-sizing: border-box;
+    margin-right: 22rpx;
+    margin-bottom: 24rpx;
+    border-radius: 8rpx;
+    background: #fff;
+    .name {
+      padding: 8rpx 6rpx;
+      font-size: 26rpx;
+      line-height: 36rpx;
+      color: #333333;
+    }
+    .price-line {
+      padding: 0 10rpx;
+      font-size: 26rpx;
+      line-height: 38rpx;
+      color: #ED0F0F;
+    }
+    .sales-line {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      padding: 8rpx 10rpx 18rpx;
+      border-top: 1rpx solid #EFEFEF;
+      font-size: 24rpx;
+      line-height: 34rpx;
+      color: #8D8D8D;
+    }
+  }
+  .item:nth-child(2n) {
+    margin-right: 0;
+  }
+  .cover {
+    width: 332rpx;
+    height: 332rpx;
+    background: rgba(255, 255, 255, 0.39);
+    border-radius: 8rpx;
+    vertical-align: middle;
+  }
+  .label {
+    width: 40rpx;
+    height: 24rpx;
+    margin-right: 4rpx;
+    vertical-align: middle;
+  }
+  .icon {
+    width: 24rpx;
+    height: 24rpx;
+    margin-right: 6rpx;
+    vertical-align: middle;
+  }
+}
+.container {
+  position: relative;
+  background: #FFFFFF;
+}
+</style>