商品详情

src/api/packageDetail.js

+import { request } from '../utils/request';
+
+// 套餐详情
+export function getProdDetail(data) {
+  return request({
+    url: `/sgyrdd/prod/getProd?prodId=${data}`,
+    method: 'GET',
+  });
+}

src/api/shop.js

@@ -31,3 +31,11 @@ export function couponShopList(data) {
     method: 'GET',
   });
 }
+// 评论
+export function likeOrDislike(data) {
+  return request({
+    url: `/sgyrdd/evaluation/likeOrDislike`,
+    method: 'POST',
+    data,
+  });
+}

src/assets/iconfont/iconfont.css

 @font-face {
   font-family: "iconfont"; /* Project id 4633414 */
-  src: url('//at.alicdn.com/t/c/font_4633414_xeh7f81eleh.woff2?t=1722311537248') format('woff2'),
-       url('//at.alicdn.com/t/c/font_4633414_xeh7f81eleh.woff?t=1722311537248') format('woff'),
-       url('//at.alicdn.com/t/c/font_4633414_xeh7f81eleh.ttf?t=1722311537248') format('truetype');
+  src: url('//at.alicdn.com/t/c/font_4633414_rdq1553pta.woff2?t=1722413035003') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4633414_rdq1553pta.woff?t=1722413035003') format('woff'),
+       url('//at.alicdn.com/t/c/font_4633414_rdq1553pta.ttf?t=1722413035003') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-xiai:before {
+  content: "\e601";
+}
+
 .icon-tongzhi:before {
   content: "\e60d";
 }

src/pages.json

@@ -21,7 +21,8 @@
 		{
 			"path": "pages/shop/shop",
 			"style": {
-				"navigationBarTitleText": "店铺首页"
+				"navigationBarTitleText": "店铺首页",
+				"onReachBottomDistance":50
 			}
 		},
 		{

src/pages/packageDetails/packageDetails.vue

@@ -128,11 +128,29 @@
 </template>
 
 <script setup>
+import { getProdDetail } from '@/api/packageDetail';
 const swiperList = ref([
   'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
   'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
   'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
 ]);
+const myProdId = ref('');
+onLoad((options) => {
+  const { prodId } = options;
+  myProdId.value = prodId;
+  getProdDetailFn(prodId);
+});
+/**
+ *  获取套餐详情
+ * @param {String} prodId
+ */
+function getProdDetailFn(prodId) {
+  getProdDetail(prodId).then((res) => {
+    if (res.code === 0) {
+      console.log('res', res);
+    }
+  });
+}
 </script>
 
 <style lang="scss" scoped>

src/pages/shop/shop.vue

@@ -5,11 +5,7 @@
     <view class="search">
       <wd-icon color="#fff" name="thin-arrow-left" class="icon" @tap="back"></wd-icon>
       <view class="searchBox">
-        <image
-          class="magnifyingGlass"
-          src="@/static/shop/search.png"
-          mode="aspectFit|aspectFill|widthFix"
-        />
+        <image class="magnifyingGlass" src="@/static/shop/search.png" mode="aspectFill" />
         <input type="text" :value="test" class="text" />
       </view>
       <view class="icon-box">
@@ -71,23 +67,24 @@
           </view>
           <view class="shop-map-phone">
             <image
+              mode="aspectFill"
               @tap="callShopPhone(shopInfo.phone)"
               class="img1"
               src="@/static/shop/map.png"
             ></image>
-            <image src="@/static/shop/phone.png"></image>
+            <image mode="aspectFill" src="@/static/shop/phone.png"></image>
           </view>
         </view>
       </view>
       <!-- 店铺信息-end -->
       <view class="shop-info-box"></view>
       <!-- 补贴 -->
-      <view class="subsidy-content">
+      <view class="subsidy-content" @click="jumpPage">
         <view class="subsidy">
-          <image src="@/static/shop/subsidy.png" />
+          <image mode="aspectFill" src="@/static/shop/subsidy.png" />
           <text>{{ merchantCoupons.activityName }}</text>
         </view>
-        <view class="more" @tap="jumpTocouponPage">
+        <view class="more">
           <text>更多</text>
           <wd-icon name="arrow-right" size="24rpx"></wd-icon>
         </view>
@@ -122,7 +119,7 @@
             v-for="(item, index) in listOfGroupBuyingProducts"
             :key="index"
           >
-            <image class="goods-picture" :src="item.pic"></image>
+            <image mode="aspectFill" class="goods-picture" :src="item.pic"></image>
             <view class="goods-info-detail">
               <text class="goods-title multi-line">{{ item.prodName }}</text>
               <text class="yh-fl multi-line">{{ item.brief }}</text>
@@ -139,7 +136,7 @@
             </view>
             <view class="pay">
               <text class="sold-shares">已售{{ item.soldNum }}份</text>
-              <view class="my-button-qg">抢购</view>
+              <view class="my-button-qg" @click="jumpProductDetails(item)">抢购</view>
             </view>
           </view>
         </view>
@@ -157,15 +154,19 @@
             <view class="user-info-box">
               <view class="u-info-detail">
                 <!-- 头像 -->
-                <image :src="item.avatar" class="user-tx"></image>
+                <image
+                  mode="aspectFill"
+                  :src="item.avatar ? item.avatar : '../../static/shop/avatar.png'"
+                  class="user-tx"
+                ></image>
                 <view class="u-name">
                   <text>{{ item.nickName }}</text>
                   <view class="u-pf">
-                    <text>5分</text>
+                    <text>{{ item.descriptionMatches }}分</text>
                     <wd-rate
                       color="#fff"
                       readonly
-                      v-model="value"
+                      v-model="item.descriptionMatches"
                       size="18rpx"
                       space="8rpx"
                       :active-color="['#FA5151']"
@@ -173,25 +174,34 @@
                   </view>
                 </view>
               </view>
-              <text class="u-time">{{ item.createTime }}发表 南明区中环广场</text>
+              <!-- <text class="u-time">{{ item.createTime }}发表 南明区中环广场</text> -->
+              <text class="u-time">{{ item.createTime }}</text>
             </view>
             <view class="user-evaluate">
               {{ item.evaluation }}
             </view>
-            <view class="evaluate-img">
-              <image v-for="i in 2" :key="i" src="@/static/shop/ice.png"></image>
+            <view class="evaluate-img" v-if="item.images.length > 0">
+              <image
+                mode="aspectFill"
+                @click="previewImage(img)"
+                v-for="(img, n) in item.images"
+                :key="n"
+                :src="img"
+              ></image>
             </view>
             <view class="u-dz-sc-pl">
-              <text class="liulan">浏览 245</text>
+              <!-- <text class="liulan">浏览 245</text> -->
+              <text class="liulan"></text>
               <view class="pl-icon">
-                <view class="icon">
-                  <i class="iconfont icon-aixin" />
-                  <text>抢首赞</text>
+                <view class="icon" @tap="giveTheThumbs(item, index)">
+                  <i v-if="item.give == 0" class="iconfont icon-aixin" />
+                  <i v-else style="color: red" class="iconfont icon-xiai" />
+                  <text>{{ item.giveCount > 0 ? item.giveCount : '抢首赞' }}</text>
                 </view>
-                <view class="icon">
+                <!-- <view class="icon" @tap="collection(item)">
                   <i class="iconfont icon-shoucang" />
                   <text>收藏</text>
-                </view>
+                </view> -->
                 <!-- <view class="icon">
                   <i class="iconfont icon-pinglun" />
                   <text>评论</text>
@@ -199,7 +209,9 @@
               </view>
             </view>
           </view>
-          <view class="u-more">查看全部5条评价</view>
+          <view @tap="viewAll" v-if="commentList.length < commentTotal" class="u-more">
+            查看全部{{ commentTotal }}条评价
+          </view>
         </view>
         <!-- 评价列表-end -->
       </view>
@@ -222,7 +234,7 @@
           <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
             <view :id="i" class="scroll-view-item_H" v-for="i in 10" :key="i">
               <view class="item-box">
-                <image src="@/static/shop/ice.png"></image>
+                <image mode="aspectFill" src="@/static/shop/ice.png"></image>
                 <text class="goods-name multi-line">健康生态调味品</text>
                 <view class="goods-pf-rs">
                   <text class="goods-fs">4.3</text>
@@ -249,8 +261,14 @@
 </template>
 
 <script setup>
-import { getStoreInformation, groupBuyList, getEvaluationPage, couponShopList } from '@/api/shop';
-import { getDistance } from '@/utils/common';
+import {
+  likeOrDislike,
+  getStoreInformation,
+  groupBuyList,
+  getEvaluationPage,
+  couponShopList,
+} from '@/api/shop';
+import { addImgUrlPrefixToImages, getDistance, addImgUrlPrefix } from '@/utils/common';
 const imgUrl = import.meta.env.VITE_APP_IMG_URL;
 const current = ref(0);
 const old = reactive({ scrollTop: 0 });
@@ -268,24 +286,24 @@ const merchantCoupons = ref({});
 // 评论分页
 const params = ref({
   current: 1,
-  size: 50,
+  size: 3,
   shopId: '1626126617850544129',
   isEnd: false,
 });
+const isLoadReachBottom = ref(null);
 // 评价列表
 const commentList = ref([]);
+// 评论总数
+const commentTotal = ref(0);
 const tagList = ref([
   { name: '美食', id: 1 },
   { name: '休闲娱乐', id: 2 },
   { name: '景点', id: 3 },
   { name: '生活服务', id: 4 },
 ]);
+// 商户id
+const shopId = ref('1626126617850544129');
 const tagList2 = ref([{ name: '免费停车', id: 1 }]);
-const swiperList = ref([
-  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
-  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
-  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
-]);
 
 onLoad((options) => {
   getStoreInformationFn('1626126617850544129');
@@ -298,7 +316,11 @@ onShow(() => {
   getLocationFn();
 });
 const value = ref(5);
-const handleClick = (e) => {};
+const handleClick = (e) => {
+  const { index } = e;
+  const imgSrc = shopSwiperList.value[index];
+  previewImage(imgSrc);
+};
 const onChange = (e) => {};
 function scroll(e) {
   old.scrollTop = e.detail.scrollTop;
@@ -342,8 +364,6 @@ const groupBuyListFn = (shopId) => {
         item.pic = imgUrl + item.pic;
         return item;
       });
-
-      console.log('result', listOfGroupBuyingProducts);
     }
   });
 };
@@ -376,28 +396,117 @@ const getEvaluationPageFn = () => {
     shopId: params.value.shopId,
   }).then((res) => {
     if (res.code === 0) {
+      commentTotal.value = res.data.total;
+      res.data.records = res.data.records.map((item) => {
+        item.avatar = addImgUrlPrefix(imgUrl, item.avatar);
+        item.images = addImgUrlPrefixToImages(imgUrl, item.images);
+        return item;
+      });
       if (res.data.records.length < params.value.size) {
         params.value.isEnd = true;
       }
-      params.value.size += 1;
+      params.value.current += 1;
       return new Promise((resolve) => {
         commentList.value = commentList.value.concat(res.data.records);
         xma.hideLoading();
+        setTimeout(() => {
+          resolve();
+        }, 500);
       });
     }
   });
 };
+function refresh() {
+  return new Promise((resolve) => {
+    params.value = {
+      current: 1,
+      size: 20,
+      shopId,
+      isEnd: false,
+    };
+    commentList.value = [];
+    resolve();
+  });
+}
 /**
  * 跳转优惠券页面
  */
-const jumpTocouponPage() =>{
-xma.navigateTo({
-  url:`/pages`
-})
+function jumpPage() {
+  xma.navigateTo({
+    url: `/pages/ticket/detail?shopId=${shopId.value}`,
+  });
+}
+/**
+ * 图片预览
+ */
+function previewImage(imgSrc) {
+  xma.previewImage({
+    current: imgSrc, // 当前显示图片的链接，不填则默认为 urls 的第一张
+    urls: [imgSrc], // 需要预览的图片链接列表
+  });
+}
+/**
+ * 点赞-点赞取消
+ * @param {*} evaluationId
+ */
+const likeOrDislikeFn = ({ item, index }) => {
+  likeOrDislike({ evaluationId: item.evaluationId }).then((res) => {
+    if (res.code === 0) {
+      if (item.give === 0) {
+        item.giveCount++;
+        item.give = 1;
+      } else {
+        item.giveCount--;
+        item.give = 0;
+      }
+    }
+  });
+};
+
+/**
+ * 跳转到商品详情
+ */
+function jumpProductDetails(itme) {
+  xma.navigateTo({
+    url: `/pages/packageDetails/packageDetails?prodId=${itme.prodId}`,
+  });
 }
+/**
+ * 点赞
+ * @param {*} item
+ */
+const giveTheThumbs = (item, index) => {
+  likeOrDislikeFn({ item, index });
+};
+/**
+ * 查看全部评论
+ */
+const viewAll = () => {
+  getEvaluationPage({
+    current: params.value.current,
+    size: commentTotal.value,
+    shopId: params.value.shopId,
+  }).then((res) => {
+    if (res.code === 0) {
+      commentList.value = res.data.records.map((item) => {
+        item.avatar = addImgUrlPrefix(imgUrl, item.avatar);
+        item.images = addImgUrlPrefixToImages(imgUrl, item.images);
+        return item;
+      });
+    }
+  });
+};
 function changeActie(id) {
   activeId.value = id;
 }
+onReachBottom(() => {
+  console.log('到底了');
+  if (isLoadReachBottom.value === true) return;
+  isLoadReachBottom.value = true;
+  getEvaluationPageFn().then(() => {
+    isLoadReachBottom.value = false;
+  });
+});
 /**
  * 拨打商家电话
  * @param {*} phoneNumber
@@ -910,17 +1019,16 @@ page {
             margin-top: 20rpx;
           }
           .evaluate-img {
-            display: flex;
-            flex-wrap: wrap;
+            display: grid;
+            width: 100%;
+            margin-top: 10rpx;
+            grid-template-columns: repeat(3, 1fr);
+            // grid-template-rows: repeat(3, 228rpx);
+            gap: 10px;
             image {
-              width: 114 * 2rpx;
+              width: 100%;
               height: 114 * 2rpx;
               border-radius: 8 * 2rpx;
-              margin-left: 10rpx;
-              margin-top: 10rpx;
-            }
-            image:nth-child(1) {
-              margin-left: 0;
             }
           }
           .u-dz-sc-pl {

src/utils/common.js

@@ -20,3 +20,35 @@ export function getDistance(lat1, lng1, lat2, lng2) {
 function deg2rad(deg) {
   return deg * (Math.PI / 180);
 }
+/**
+ * 更具图片路径返回全路径还是拼接的路径
+ * @param {*} imgUrl
+ * @param {*} avatarUrl
+ * @returns
+ */
+export function addImgUrlPrefix(imgUrl, avatarUrl) {
+  // 使用正则表达式检查是否是全路径
+  const isFullUrl = /^https?:\/\//i.test(avatarUrl);
+
+  // 如果不是全路径，添加 imgUrl 前缀
+  if (!isFullUrl) {
+    return imgUrl + avatarUrl;
+  }
+
+  // 如果是全路径，直接返回
+  return avatarUrl;
+}
+
+export function addImgUrlPrefixToImages(imgUrl, imagePaths) {
+  if (imagePaths !== '') {
+    // 使用逗号分隔的图片路径
+    const pathsArray = imagePaths.split(',');
+
+    // 在每个路径前面添加 imgUrl 前缀
+    const prefixedPaths = pathsArray.map((path) => imgUrl + path.trim());
+    // 返回组装好的数组
+    return prefixedPaths;
+  } else {
+    return [];
+  }
+}