Merge branch 'master' of http://gitlab.platform.xinhuaapp.com/pengjiani/groupPurchase-miniapp

src/App.vue

@@ -18,7 +18,9 @@ onHide(() => {
 const signIn = () => {
   getTokenUser(testJson).then((res) => {
     const token = res.data.access_token;
+    const userInfo = res.data.user_info;
     xma.setStorageSync('Authorization', token);
+    xma.setStorageSync('userInfo', userInfo);
     console.log('登录...');
   });
 };

src/Components/index/FoodDetails.vue

 <template>
   <view class="card" v-for="(item, index) in cardData" :key="index">
-    <image class="img" src="../../static/index/test1.png" mode="widthFix" />
+    <image class="img" :src="item.shopLogo" mode="aspectFill" />
     <view class="right">
-      <text class="text">王将速食超市（可店内用餐）</text>
+      <text class="text">{{ item.shopName }}</text>
       <view class="twoBxo">
-        <text class="one-text">5.0推荐</text>
-        <text class="two-text">￥30/人</text>
-        <text class="three-text">销量1265</text>
+        <text class="one-text">{{ item.grade }}推荐</text>
+        <!-- <text class="two-text">￥30/人</text> -->
+        <text class="three-text">销量{{ item.monthSoldNum }}</text>
         <text class="four-text">1.2km</text>
       </view>
       <view class="threeBox">
-        <image class="img2" src="../../static/index/test2.png" mode="widthFix" />
-        <text class="one-text">“味道浓郁，食材新鲜，童年的老味道”</text>
+        <image class="img2" :src="item.evaluationVos[0].avatar" mode="aspectFill" />
+        <text class="one-text">“{{ item.evaluationVos[0].evaluation }}”</text>
       </view>
       <view class="labelBox">
         <view>卤味爱好者最佳选择</view>
@@ -59,6 +59,8 @@ const props = defineProps({
   box-sizing: border-box;
   .img {
     width: 144rpx;
+    height: 144rpx;
+    border-radius: 16rpx;
   }
   .right {
     margin-left: 20rpx;
@@ -102,6 +104,8 @@ const props = defineProps({
       align-items: center;
       .img2 {
         width: 40rpx;
+        height: 40rpx;
+        border-radius: 50%;
       }
       .one-text {
         font-size: 22rpx;

src/Components/index/Position.vue

@@ -7,33 +7,34 @@
     <view class="right-details" v-show="light2 === 0">
       <text class="nearby-title">我的附近</text>
       <view class="nearby-card">
-        <view @tap="choice2(0)" class="label" :class="light3 === 0 ? 'light3' : ''">附近</view>
-        <view @tap="choice2(1)" class="label" :class="light3 === 1 ? 'light3' : ''">500m</view>
-        <view @tap="choice2(2)" class="label" :class="light3 === 2 ? 'light3' : ''">1km</view>
-        <view @tap="choice2(3)" class="label" :class="light3 === 3 ? 'light3' : ''">3km</view>
-        <view @tap="choice2(4)" class="label" :class="light3 === 4 ? 'light3' : ''">5km</view>
-        <view @tap="choice2(5)" class="label" :class="light3 === 5 ? 'light3' : ''">10km</view>
+        <view @tap="choice2(0, 0)" class="label" :class="light3 === 0 ? 'light3' : ''">附近</view>
+        <view @tap="choice2(1, 0.5)" class="label" :class="light3 === 1 ? 'light3' : ''">500m</view>
+        <view @tap="choice2(2, 1)" class="label" :class="light3 === 2 ? 'light3' : ''">1km</view>
+        <view @tap="choice2(3, 3)" class="label" :class="light3 === 3 ? 'light3' : ''">3km</view>
+        <view @tap="choice2(4, 5)" class="label" :class="light3 === 4 ? 'light3' : ''">5km</view>
+        <view @tap="choice2(5, 10)" class="label" :class="light3 === 5 ? 'light3' : ''">10km</view>
       </view>
       <text class="nearby-title margin">热门地点</text>
       <ul class="ul">
-        <li>花果园购物中心</li>
-        <li>世纪金源购物中心</li>
-        <li>鸿通城</li>
-        <li>花果园中环广场</li>
-        <li>万科大都会</li>
-        <li>喷水池</li>
-        <li>喷水池</li>
+        <li
+          v-for="(item, index) in items"
+          :key="index"
+          :class="{ active: selectedItem === index }"
+          @tap="selectItem(index, item)"
+        >
+          {{ item }}
+        </li>
       </ul>
     </view>
     <view class="right-details2" v-show="light2 === 1">
       <ul class="ul">
         <li
-          v-for="(item, index) in items"
+          v-for="(item, index) in items1"
           :key="index"
-          :class="{ active: selectedItem === index }"
-          @tap="selectItem(index)"
+          :class="{ active: selectedItem1 === index }"
+          @tap="selectItem1(index)"
         >
-          {{ item }}
+          {{ item.name }}
         </li>
       </ul>
       <ul class="ul">
@@ -41,9 +42,9 @@
           v-for="(item, index) in items2"
           :key="index"
           :class="{ active: selectedItem2 === index }"
-          @tap="selectItem2(index)"
+          @tap="selectItem2(index, item.name)"
         >
-          {{ item }}
+          {{ item.name }}
         </li>
       </ul>
     </view>
@@ -52,16 +53,19 @@
 
 <script setup>
 import { defineProps } from 'vue';
+import { getRegion, administration } from '@/api/index';
 const props = defineProps({
   width: {
     type: String,
     default: '100%',
   },
 });
+const emit = defineEmits(['nearby', 'popular', 'region']);
 const light2 = ref(0);
 const light3 = ref(0);
-const items = reactive(['云岩区', '白云区', '乌当区', '花溪区', '清镇市', '开阳县', '修文县']);
-const items2 = reactive([
+const items = ref(['云岩区', '白云区', '乌当区', '花溪区', '清镇市', '开阳县', '修文县']);
+const items1 = ref(['云岩区', '白云区', '乌当区', '花溪区', '清镇市', '开阳县', '修文县']);
+const items2 = ref([
   '全部',
   '百花新城',
   '人民广场',
@@ -72,19 +76,45 @@ const items2 = reactive([
 ]);
 
 const selectedItem = ref(null);
+const selectedItem1 = ref(0);
 const selectedItem2 = ref(null);
+onMounted(() => {
+  getPlace();
+  getAdministration();
+});
+// 热门地点
+const getPlace = () => {
+  getRegion({ city: '贵阳' }).then((res) => {
+    items.value = res.data;
+  });
+};
+// 行政区
+const getAdministration = () => {
+  administration({ parentId: '52' }).then((res) => {
+    items1.value = res.data;
+    items2.value = items1.value[0].children;
+  });
+};
 const choice = (index) => {
   light2.value = index;
 };
-const choice2 = (index) => {
+const choice2 = (index, distance) => {
   light3.value = index;
+  emit('nearby', distance);
 };
-
-const selectItem = (selectItem) => {
-  selectedItem.value = selectItem;
+const selectItem = (index, communityName) => {
+  selectedItem.value = index;
+  selectedItem2.value = null;
+  emit('popular', communityName);
 };
-const selectItem2 = (selectItem) => {
-  selectedItem2.value = selectItem;
+const selectItem1 = (index) => {
+  selectedItem1.value = index;
+  items2.value = items1.value[index].children;
+};
+const selectItem2 = (index, area) => {
+  selectedItem2.value = index;
+  selectedItem.value = null;
+  emit('region', area);
 };
 </script>
 
@@ -93,7 +123,7 @@ const selectItem2 = (selectItem) => {
   position: absolute;
   top: 100%;
   // width: 710rpx;
-  height: 780rpx;
+  min-height: 780rpx;
   border-radius: 0rpx 0rpx 16rpx 16rpx;
   background: #ffffff;
   box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
@@ -103,7 +133,7 @@ const selectItem2 = (selectItem) => {
   .left-classification {
     width: 176rpx;
     background: #f1f1f1;
-    height: 100%;
+    min-height: 780rpx;
     .option {
       text-align: center;
       width: 100%;
@@ -164,6 +194,9 @@ const selectItem2 = (selectItem) => {
         color: #3d3d3d;
         margin-top: 20rpx;
       }
+      .active {
+        color: #fa5151;
+      }
     }
   }
   .right-details2 {

src/api/index.js

@@ -41,3 +41,38 @@ export function popularityPage(data) {
     data,
   });
 }
+
+// 团购主页推荐分类
+export function getRecommList() {
+  return request({
+    url: `/sgyrdd/category/getRecommList`,
+    method: 'GET',
+  });
+}
+
+// 附近筛选-热门地点
+export function getRegion(data) {
+  return request({
+    url: `/sgyrdd/area/hotArea`,
+    method: 'GET',
+    data,
+  });
+}
+
+// 附近筛选-行政区
+export function administration(data) {
+  return request({
+    url: `/sgyrdd/area/tree`,
+    method: 'GET',
+    data,
+  });
+}
+
+// 商家列表分页-搜索列表
+export function merchantList(data) {
+  return request({
+    url: `/sgyrdd/shop/page`,
+    method: 'POST',
+    data,
+  });
+}

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,101 @@
 </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) => {
-    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;
-    }
+  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) {
+  if (shopInfo.value.isCollect === 0) {
+    shopInfo.value.privateIntFcount++;
+    shopInfo.value.isCollect = 1;
+  } else {
+    shopInfo.value.privateIntFcount--;
+    shopInfo.value.isCollect = 0;
+  }
+  shopInfo.value.console.log('111');
+  // getCollect(shopId).then((res) => {
+  //   if (res.code === 0) {
+  //     if (shopInfo.value.isCollect === 0) {
+  //       shopInfo.value.privateIntFcount++;
+  //       shopInfo.value.isCollect = 1;
+  //     } else {
+  //       shopInfo.value.privateIntFcount--;
+  //       shopInfo.value.isCollect = 0;
+  //     }
+  //     shopInfo.value.console.log('111');
+  //   }
+  // });
+}
+function collectionFn() {
+  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 +258,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 +421,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 +463,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 +534,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;
               }
             }
           }

src/utils/tool.js

+export function timeConversion(diffInMilliseconds) {
+  // 计算总秒数
+  const totalSeconds = Math.abs(Math.floor(diffInMilliseconds / 1000));
+
+  // 计算天数、小时数和分钟数
+  const days = Math.floor(totalSeconds / (24 * 60 * 60));
+  const hours = Math.floor((totalSeconds % (24 * 60 * 60)) / (60 * 60));
+  const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
+
+  // 返回包含天数、小时数和分钟数的对象
+  if (hours === 0) {
+    return `${minutes}分钟`;
+  } else if (days === 0) {
+    return `${hours}小时${minutes}分钟`;
+  } else {
+    return `${days}天${hours}小时${minutes}分钟`;
+  }
+}