套餐详情

src/api/packageDetail.js

@@ -7,3 +7,11 @@ export function getProdDetail(data) {
     method: 'GET',
   });
 }
+
+// 套餐详情
+export function getCollect(data) {
+  return request({
+    url: `/sgyrdd/shop/collect?shopId=${data}`,
+    method: 'GET',
+  });
+}

src/assets/iconfont/iconfont.css

 @font-face {
   font-family: "iconfont"; /* Project id 4633414 */
-  src: url('//at.alicdn.com/t/c/font_4633414_3k0ybwfc2l1.woff2?t=1722483682262') format('woff2'),
-       url('//at.alicdn.com/t/c/font_4633414_3k0ybwfc2l1.woff?t=1722483682262') format('woff'),
-       url('//at.alicdn.com/t/c/font_4633414_3k0ybwfc2l1.ttf?t=1722483682262') format('truetype');
+  src: url('//at.alicdn.com/t/c/font_4633414_jxzjjul419.woff2?t=1722502888587') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4633414_jxzjjul419.woff?t=1722502888587') format('woff'),
+       url('//at.alicdn.com/t/c/font_4633414_jxzjjul419.ttf?t=1722502888587') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-shuangxiajiantou:before {
+  content: "\e660";
+}
+
 .icon-dianzan:before {
   content: "\e602";
 }

src/pages/packageDetails/packageDetails.vue

@@ -63,14 +63,33 @@
     <!-- card-end -->
     <view class="rich-text-card">
       <text class="title">商品详情</text>
-      <rich-text :nodes="'nodes'"></rich-text>
+      <rich-text :nodes="prodInfo.content"></rich-text>
     </view>
     <view class="rich-text-card">
       <text class="title">购买须知</text>
-      <rich-text :nodes="'nodes'"></rich-text>
-      <view class="rich-more-btn">
-        收起
-        <image src="@/static/shop/more.png"></image>
+      <!-- <rich-text :nodes="'nodes'"></rich-text> -->
+      <view class="purchase-information" v-if="showRlue">
+        <view class="purchase-box">
+          <text class="title">开始时间</text>
+          <text class="content">{{ prodRlue.createTime }}</text>
+        </view>
+        <view class="purchase-box">
+          <text class="title">结束时间</text>
+          <text class="content">{{ prodRlue.endTime }}</text>
+        </view>
+        <view class="purchase-box">
+          <text class="title">标签</text>
+          <text class="content">{{ prodRlue.labelNames }}</text>
+        </view>
+        <view class="purchase-box">
+          <text class="title">规则</text>
+          <text class="content">{{ prodRlue.rule }}</text>
+        </view>
+      </view>
+      <view class="rich-more-btn" @click="showRlueFn">
+        {{ showRlue ? '收起' : '展开' }}
+        <i v-if="showRlue" class="iconfont icon-shuangshangjiantou-"></i>
+        <i v-else class="iconfont xia icon-shuangxiajiantou"></i>
       </view>
     </view>
     <!-- 使用方法-start -->
@@ -102,21 +121,21 @@
     <!-- 适用门店 -->
     <view class="applicable-stores-card">
       <text class="title">适用门店</text>
-      <text class="goods-name">川心美蛙鱼头火锅(中环广场店)</text>
+      <text class="goods-name">{{ shopInfo.shopName }}</text>
       <view class="goods-pf-rs">
-        <text class="goods-fs">4.3分</text>
+        <text class="goods-fs">{{ shopInfo.grade }}分</text>
         <text class="goods-type">火锅</text>
-        <text class="goods-rs">36/人</text>
+        <!-- <text class="goods-rs">36/人</text> -->
       </view>
-      <text class="distance">距你129m</text>
-      <text class="address">后巢乡花果园中环广场3号(M区4栋)3层114号</text>
+      <text class="distance">距你{{ distance }}</text>
+      <text class="address">{{ shopInfo.shopAddress }}</text>
     </view>
     <!-- 适用门店-end -->
     <!-- 底部 -->
     <view class="bottom-operation-bar">
-      <view class="start">
+      <view class="start" @click="collectionFn">
         <image src="@/static/shop/start.png"></image>
-        241
+        {{ shopInfo.privateIntFcount }}
       </view>
       <view class="start">
         <image src="@/static/shop/share.png"></image>
@@ -129,45 +148,88 @@
 </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',
-]);
+import { getProdDetail, getCollect } from '@/api/packageDetail';
+import { getStoreInformation } from '@/api/shop';
 const prodInfo = ref({});
+const prodRlue = ref({});
 const myProdId = ref('');
 const current = ref(0);
+const showRlue = ref(true);
 const imgUrl = import.meta.env.VITE_APP_IMG_URL;
+const shopInfo = ref({});
+const currentLatitudeAndLongitude = ref({});
+const shopId = ref('');
 onLoad((options) => {
   const { prodId } = options;
   myProdId.value = prodId;
-  getProdDetailFn(prodId);
+  getProdDetailFn(prodId).then((shopId) => {
+    getStoreInformationFn(shopId);
+  });
+});
+onShow(() => {
+  // 获取位置
+  getLocationFn();
 });
 /**
  *  获取套餐详情
  * @param {String} prodId
  */
 function getProdDetailFn(prodId) {
-  getProdDetail(prodId).then((res) => {
+  return new Promise((resolve, reject) => {
+    getProdDetail(prodId).then((res) => {
+      if (res.code === 0) {
+        res.data.data.prod.imgs = res.data.data.prod.imgs.split(',');
+        res.data.data.prod.imgs.push(res.data.data.prod.pic);
+        res.data.data.prod.imgs = res.data.data.prod.imgs
+          .map((item) => {
+            if (item !== '') {
+              item = imgUrl + item;
+            }
+            return item;
+          })
+          .filter((item) => {
+            return item !== '';
+          });
+        prodInfo.value = res.data.data.prod;
+        prodRlue.value = res.data.data.groupPurchasePackageRule;
+        shopId.value = res.data.data.prod.shopId;
+        resolve(res.data.data.prod.shopId);
+      }
+    });
+  });
+}
+/**
+ * 获取收藏
+ */
+function getCollectFn(shopId) {
+  getCollect(shopId).then((res) => {
     if (res.code === 0) {
-      console.log('res', res);
-      res.data.data.prod.imgs = res.data.data.prod.imgs.split(',');
-      res.data.data.prod.imgs.push(res.data.data.prod.pic);
-      res.data.data.prod.imgs = res.data.data.prod.imgs
-        .map((item) => {
-          if (item !== '') {
-            item = imgUrl + item;
-          }
-          return item;
-        })
-        .filter((item) => {
-          return item !== '';
-        });
-      prodInfo.value = res.data.data.prod;
+      
     }
   });
 }
+function collectionFn() {
+  console.log('shopInfo.value', shopId.value);
+
+  getCollectFn(shopId.value);
+}
+function getLocationFn() {
+  xma.getLocation({
+    type: 'wgs84',
+    success: function (res) {
+      const myLatitude = currentLatitudeAndLongitude.value.latitude;
+      const myLongitude = currentLatitudeAndLongitude.value.longitude;
+      const distance = getDistance(res.latitude, res.longitude, myLatitude, myLongitude, 1);
+      shopInfo.value.distance = distance;
+    },
+    fail: function (err) {
+      return err;
+    },
+  });
+}
+const showRlueFn = () => {
+  showRlue.value = !showRlue.value;
+};
 const handleClick = (e) => {
   const { index } = e;
   const imgSrc = prodInfo.value.imgs[index];
@@ -183,6 +245,20 @@ function previewImage(imgSrc) {
     urls: [imgSrc], // 需要预览的图片链接列表
   });
 }
+// 获取店铺信息
+const getStoreInformationFn = (id) => {
+  return new Promise((resolve, reject) => {
+    getStoreInformation(id).then((res) => {
+      if (res.code === 0) {
+        shopInfo.value = res.data.shop;
+        shopInfo.value.tagList = res.data.shop.labels.split(',');
+        currentLatitudeAndLongitude.value.latitude = res.data.shop.location.lat;
+        currentLatitudeAndLongitude.value.longitude = res.data.shop.location.lon;
+        resolve();
+      }
+    });
+  });
+};
 </script>
 
 <style lang="scss" scoped>
@@ -332,11 +408,37 @@ page {
     margin-top: 10rpx;
     border-radius: 8 * 2rpx;
     box-shadow: 0 -8rpx 22 * 2rpx 0 rgba(255, 255, 255, 0.6);
+    .purchase-information {
+      display: flex;
+      flex-direction: column;
+      align-content: flex-start;
+      .purchase-box {
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 20rpx;
+        .title {
+          font-size: 11 * 2rpx;
+          color: #767676;
+        }
+        .content {
+          font-size: 11 * 2rpx;
+          margin-left: 32rpx;
+          color: #3d3d3d;
+        }
+      }
+    }
     .title {
       font-size: 13 * 2rpx;
       color: #151515;
       font-weight: 500;
     }
+    img {
+      width: 100%;
+      height: auto;
+    }
+    p {
+      font-size: 22rpx;
+    }
     .rich-more-btn {
       width: 315 * 2rpx;
       display: flex;
@@ -348,6 +450,10 @@ page {
       box-sizing: border-box;
       padding: 20rpx 0 0 0;
       margin-top: 20rpx;
+      .xia {
+        font-size: 20rpx;
+        margin-left: 10rpx;
+      }
       image {
         width: 18rpx;
         height: 18rpx;
@@ -415,7 +521,7 @@ page {
     }
   }
   .bottom-operation-bar {
-    width: 100%;
+    width: 750rpx;
     background: #fff;
     border-radius: 16rpx 16rpx 0 0;
     display: flex;

src/pages/shop/shop.vue

@@ -247,8 +247,8 @@
                   <!-- <text class="goods-rs">36/人</text> -->
                 </view>
                 <view class="tag-list">
-                  <view class="tag" v-for="item in tagList2" :key="item.id">
-                    {{ item.name }}
+                  <view class="tag" v-for="(el, i) in item.labels" :key="i">
+                    {{ el }}
                   </view>
                 </view>
               </view>
@@ -302,12 +302,6 @@ 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 },
-]);
 // 周边推荐类型列表
 const recommendedTypesOfPeripherals = ref([]);
 // 商户id
@@ -366,8 +360,17 @@ function sgyrddShopPageFn(categoryIds) {
   };
   sgyrddShopPage(params).then((res) => {
     if (res.code === 0) {
+      res.data.content = res.data.content
+        .map((el) => {
+          if (el.labels && el.labels !== '') {
+            el.labels = el.labels.split(',');
+          }
+          return el;
+        })
+        .filter((item) => {
+          return item !== '';
+        });
       recommendedListOfPeripherals.value = res.data.content;
-      console.log('res', res);
     }
   });
 }
@@ -377,7 +380,7 @@ function getLocationFn() {
     success: function (res) {
       const myLatitude = currentLatitudeAndLongitude.value.latitude;
       const myLongitude = currentLatitudeAndLongitude.value.longitude;
-      const distance = getDistance(res.latitude, res.longitude, myLatitude, myLongitude);
+      const distance = getDistance(res.latitude, res.longitude, myLatitude, myLongitude, 1);
       shopInfo.value.distance = distance;
     },
     fail: function (err) {
@@ -1223,7 +1226,7 @@ page {
                 box-sizing: border-box;
                 padding: 6rpx;
                 font-size: 8 * 2rpx;
-                margin-right: 20rpx;
+                margin-right: 10rpx;
               }
             }
           }