<template>
  <!-- 店铺详情页面 -->
  <view class="shop-pages">
    <!-- 搜索 -->
    <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="aspectFill" />
        <input type="text" :value="test" class="text" />
      </view> -->
      <!-- <view class="icon-box">
        <i style="color: red" class="iconfont icon icon-shoucang"></i>
        <i style="color: red" class="iconfont icon icon-fenxiang"></i>
      </view> -->
    </view>
    <view class="swiper">
      <wd-swiper
        customClass="swiper-custom"
        :list="shopSwiperList"
        autoplay
        height="536rpx"
        customStyle="border-radius: 0rpx;"
        :current="current"
        @click="handleClick"
        @change="onChange"
        :indicator="{ type: 'dots-bar' }"
      ></wd-swiper>
    </view>
    <view class="content">
      <!-- 店铺信息 -->
      <view class="shop-info">
        <view class="shop-info-top">
          <view class="shop-info-detail">
            <text class="shop-title">{{ shopInfo.shopName }}</text>
            <view class="shop-tag-list">
              <view class="tag-item" v-for="(item, index) in shopInfo.tagList" :key="index">
                <text>{{ item }}</text>
              </view>
            </view>
          </view>
          <view class="shop-info-right">
            <view class="shop-info-score">
              <view class="score-text">
                <text class="score-num">{{ shopInfo.grade }}</text>
                <text class="tj">推荐</text>
              </view>
              <view class="score-icon">
                <wd-rate
                  custom-class="icon-statr"
                  color="#fff"
                  readonly
                  v-model="shopInfo.grade"
                  size="22rpx"
                  space="8rpx"
                  :active-color="['#FA5151']"
                />
              </view>
            </view>
            <view class="shop-business-hours">
              <texe>营业时间: {{ shopInfo.transactionStart }}-{{ shopInfo.transactionEnd }}</texe>
            </view>
          </view>
        </view>
        <view class="shop-info-bottom">
          <view class="shop-address">
            <text class="shop-distance">距您{{ shopInfo.distance }} {{ shopInfo.area }}</text>
            <text class="shop-address-detail">{{ shopInfo.shopAddress }}</text>
          </view>
          <view class="shop-map-phone">
            <image
              mode="aspectFill"
              @click="openMapApp(shopInfo)"
              class="img1"
              src="@/static/shop/map.png"
            ></image>
            <image
              @tap="callShopPhone(shopInfo.phone)"
              mode="aspectFill"
              src="@/static/shop/phone.png"
            ></image>
          </view>
        </view>
      </view>
      <!-- 店铺信息-end -->
      <!-- 补贴 -->
      <view class="subsidy-content" @click="jumpPage">
        <view class="subsidy">
          <image mode="aspectFill" src="@/static/shop/subsidy.png" />
          <text class="multi-line">{{ merchantCoupons.activityName || 暂无优惠券 }}</text>
        </view>
        <view class="more">
          <text>更多</text>
          <wd-icon name="arrow-right" size="24rpx"></wd-icon>
        </view>
      </view>
      <!-- 补贴-end -->
      <!-- 商品下单列表 -->
      <!-- <view class="goods-list">
        <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>
              <text class="goods-name">这是杯冷饮</text>
              <text class="goods-price">￥15</text>
            </view>
          </view>
        </scroll-view>
        <wd-button block round custom-class="my-button">
          <text>立即下单 到店秒提</text>
          （共45个商品）
        </wd-button>
      </view> -->
      <!-- 商品下单列表-end -->
      <!-- 团购优惠-start -->
      <view class="group-buying-discounts">
        <view class="title">
          <view class="icon">团</view>
          <text>团购优惠</text>
        </view>
        <view class="group-buying-list">
          <view
            class="group-buying-item"
            v-for="(item, index) in listOfGroupBuyingProducts"
            :key="index"
          >
            <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>
              <text class="yh-time multi-line">{{ item.rule }}</text>
              <view class="tag-list" v-if="item.labelNames.length > 0">
                <view v-for="(lab, i) in item.labelNames" :key="i">
                  <text v-if="lab" class="tag" style="border-radius: 6rpx">{{ lab }}</text>
                </view>
              </view>
              <view class="price">
                <text class="num0">到手</text>
                <text class="num">￥{{ item.price }}</text>
                <text class="num1">￥{{ item.oriPrice }}</text>
              </view>
            </view>
            <view class="pay">
              <text class="sold-shares">已售{{ item.soldNum }}份</text>
              <view class="my-button-qg" @click="jumpProductDetails(item)">抢购</view>
            </view>
          </view>
          <view
            style="
              width: 100%;
              text-align: center;
              font-size: 24rpx;
              background: #fdfdfd;
              color: #888989;
            "
            v-if="listOfGroupBuyingProducts.length === 0"
          >
            没有更多啦~
          </view>
        </view>
      </view>
      <!-- 团购优惠-end -->
      <!-- 用户评价 -->
      <view class="user-reviews">
        <view class="useer-reviews-title">
          <text class="user-pj">用户评价</text>
          <!-- <image class="user-icon" src="@/static/shop/edit.png"></image> -->
        </view>
        <!-- 评价列表 -->
        <view class="reviews-list">
          <view class="reviews-item" v-for="(item, index) in commentList" :key="index">
            <view class="user-info-box">
              <view class="u-info-detail">
                <!-- 头像 -->
                <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>{{ item.descriptionMatches }}分</text>
                    <wd-rate
                      custom-class="icon-statr"
                      color="#fff"
                      readonly
                      v-model="item.descriptionMatches"
                      size="18rpx"
                      space="8rpx"
                      :active-color="['#FA5151']"
                    />
                  </view>
                </view>
              </view>
              <!-- <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" 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"></text>
              <view class="pl-icon">
                <view class="icon" @tap="giveTheThumbs(item, index)">
                  <wd-icon v-if="item.give == 0" name="thumb-up" size="30rpx"></wd-icon>
                  <wd-icon v-else name="thumb-up" color="red" size="30rpx"></wd-icon>
                  <!-- <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" @tap="collection(item)">
                  <i class="iconfont icon-shoucang" />
                  <text>收藏</text>
                </view> -->
                <!-- <view class="icon">
                  <i class="iconfont icon-pinglun" />
                  <text>评论</text>
                </view> -->
              </view>
            </view>
          </view>

          <view
            style="
              width: 100%;
              text-align: center;
              font-size: 24rpx;
              margin-top: 10rpx;
              color: #888989;
            "
            v-if="commentList.length === 0"
          >
            没有更多啦~
          </view>
          <view @tap="viewAll" v-if="commentList.length < commentTotal" class="u-more">
            查看全部{{ commentTotal }}条评价
          </view>
        </view>
        <!-- 评价列表-end -->
      </view>
      <!-- 用户评价-end -->
      <!-- 周边推荐-start -->
      <view class="surrounding-recommendations">
        <text class="title">周边推荐</text>
        <view class="tag-list">
          <view
            @click="changeActie(item.categoryId)"
            :class="activeId == item.categoryId ? 'active-tag' : ''"
            class="tag"
            v-for="item in recommendedTypesOfPeripherals"
            :key="item.categoryId"
          >
            {{ item.categoryName }}
          </view>
        </view>
        <view class="goods-list-tg">
          <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
            <view
              :id="i"
              class="scroll-view-item_H"
              v-for="(item, index) in recommendedListOfPeripherals"
              :key="index"
              @click="refreshShowDetail(item)"
            >
              <view class="item-box">
                <image mode="aspectFill" :src="imgUrl + item.shopLogo"></image>
                <text class="goods-name multi-line">{{ item.shopName }}</text>
                <view class="goods-pf-rs">
                  <text class="goods-fs">{{ item.grade }}</text>
                  <text class="goods-fs-2">分</text>
                  <!-- <text class="goods-rs">36/人</text> -->
                </view>
                <view class="tag-list">
                  <view class="tag" v-for="(el, i) in item.labels" :key="i">
                    {{ el }}
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="tj-more" @click="jumpListPage">
          <text>查看更多</text>
          <wd-icon name="arrow-right" size="16px"></wd-icon>
        </view>
      </view>
      <!-- 周边推荐-end -->
    </view>
  </view>
</template>

<script setup>
import {
  likeOrDislike,
  getStoreInformation,
  groupBuyList,
  getEvaluationPage,
  couponShopList,
  peripheryRecom,
  sgyrddShopPage,
} from '@/api/shop';
import {
  debounce,
  addImgUrlPrefixToImages,
  getDistance,
  addImgUrlPrefix,
  navigationSelect,
} from '@/utils/common';
const imgUrl = import.meta.env.VITE_APP_IMG_URL;
const current = ref(0);
const old = reactive({ scrollTop: 0 });
const activeId = ref(1);
// 店铺信息
const shopInfo = ref({});
// 店铺轮播图
const shopSwiperList = ref([]);
// 店铺经纬度
const shopLocation = ref({ lat: 0, lon: 0 });
// 团购商品列表
const listOfGroupBuyingProducts = ref([]);
// 商家优惠券
const merchantCoupons = ref({});
// 评论分页
const params = ref({
  current: 1,
  size: 3,
  shopId: '',
  isEnd: false,
});
const isLoadReachBottom = ref(null);
// 评价列表
const commentList = ref([]);
// 评论总数
const commentTotal = ref(0);
// 周边推荐类型列表
const recommendedTypesOfPeripherals = ref([]);
// 商户id
const shopId = ref('');
// 周边推荐-商家列表
const recommendedListOfPeripherals = ref([]);
onLoad(async (options) => {
  params.value.shopId = options.shopId;
  shopId.value = options.shopId;
  scrollToTop();
  // 使用 Promise.all 并行请求，提升性能
  await Promise.all([
    getStoreInformationFn(options.shopId),
    groupBuyListFn(options.shopId),
    couponShopListFn(options.shopId),
  ]);

  // 获取周边推荐信息
  peripheryRecomFn();

  // 获取评价信息
  getEvaluationPageFn();

  // 获取位置并计算距离
  calculateDistance();
});
function scrollToTop() {
  // 使用 scrollTo 方法滚动到顶部
  xma.pageScrollTo({
    scrollTop: 0,
    duration: 300, // 动画时间，可选
  });
}
onShow(async () => {
  await getStoreInformationFn(params.value.shopId);

  // 获取位置并计算距离
  calculateDistance();
});
async function refreshShowDetail(item) {
  // params.value.shopId = item.shopId;
  // shopId.value = item.shopId;

  // // 使用 Promise.all 并行请求，提升性能
  // await Promise.all([
  //   getStoreInformationFn(item.shopId),
  //   groupBuyListFn(item.shopId),
  //   couponShopListFn(item.shopId),
  // ]);

  // // 获取周边推荐信息
  // peripheryRecomFn();

  // // 获取评价信息
  // getEvaluationPageFn();

  // // 获取位置并计算距离
  // calculateDistance();
  /// /////////////////////
  xma.navigateTo({
    url: `/pages/shop/shop?shopId=${item.shopId}`,
  });
}
// 计算距离的函数封装
async function calculateDistance() {
  try {
    const res = await getLocationFn();
    const distance = getDistance(
      res.lat,
      res.lon,
      shopLocation.value.lat,
      shopLocation.value.lon,
      1,
    );
    shopInfo.value.distance = distance;
    console.log('distance', distance, shopLocation.value.lat, shopLocation.value.lon);
  } catch (error) {
    console.error('Error calculating distance:', error);
  }
}
const handleClick = (e) => {
  const { index } = e;
  const imgSrc = shopSwiperList.value[index];
  previewImage(imgSrc);
};
function jumpListPage() {
  xma.navigateTo({
    url: `/pages/index/foodClassification?parentId=${activeId.value}&page=shop&pic=''`,
  });
}
const onChange = (e) => {};
function scroll(e) {
  old.scrollTop = e.detail.scrollTop;
}

/**
 * 周边推荐类型列表
 */
function peripheryRecomFn() {
  // 维度
  const lat = shopLocation.value.lat;
  // 经度
  const lon = shopLocation.value.lon;
  peripheryRecom({ lat, lon, distance: 10 }).then((res) => {
    if (res.code === 0) {
      recommendedTypesOfPeripherals.value = res.data;
      const id = recommendedTypesOfPeripherals.value[0].categoryId;
      activeId.value = id;
      sgyrddShopPageFn(id, lat, lon);
    }
  });
}
function sgyrddShopPageFn(categoryIds, lat, lon) {
  const params = {
    current: 1,
    size: 15,
    lat,
    lon,
    categoryIds,
    distance: 10,
  };
  xma.showLoading({
    title: '加载中',
    mask: true,
  });
  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;
      xma.hideLoading();
    }
  });
}
function getLocationFn() {
  return new Promise((resolve, reject) => {
    xma.getLocation({
      type: 'wgs84',
      isHighAccuracy: true,
      success: function (res) {
        // 经纬度
        console.log('res.latitude, res.longitude', res.latitude, res.longitude);
        resolve({ lat: res.latitude, lon: res.longitude });
      },
      fail: function (err) {
        return err;
      },
    });
  });
}
/**
 * 跳转地图
 */

function openMapApp() {
  uni.showActionSheet({
    itemList: ['高德地图', '百度地图'],
    success: (res) => {
      const item = {
        shopAddress: shopInfo.value.shopAddress,
        latitude: shopInfo.value.location.lat,
        longitude: shopInfo.value.location.lon,
        name: shopInfo.value.shopAddress,
      };

      switch (res.tapIndex) {
        case 0:
          // 打开高德地图
          item.name = '高德地图';
          navigationSelect(item);
          break;
        case 1:
          item.name = '百度地图';
          // 打开百度地图
          navigationSelect(item);
          break;
        default:
          break;
      }
    },
    fail: (err) => {
      console.log('取消选择', err);
    },
  });
}

// 获取店铺信息
const getStoreInformationFn = (id) => {
  return new Promise((resolve, reject) => {
    getStoreInformation(id).then((res) => {
      if (res.code === 0) {
        shopInfo.value = res.data.shop;
        shopSwiperList.value = res.data.imgList.map((item) => imgUrl + item.imgUrl);
        if (res.data.shop.labels && res.data.shop.labels !== '') {
          shopInfo.value.tagList = res.data.shop.labels.split(',');
        }
        const { lat, lon } = res.data.shop.location;
        shopLocation.value.lat = lat;
        shopLocation.value.lon = lon;
        resolve();
      }
    });
  });
};
/**
 * 获取团购列表
 * @param {*} id
 */
const groupBuyListFn = (shopId) => {
  groupBuyList(shopId).then((res) => {
    if (res.code === 0) {
      listOfGroupBuyingProducts.value = res.data.map((item) => {
        item.pic = imgUrl + item.pic;
        if (item.labelNames) {
          item.labelNames = item.labelNames.split(',').filter((lab) => {
            return lab !== '';
          });
        } else {
          item.labelNames = [];
        }
        return item;
      });
    }
  });
};
/**
 * 获取商家优惠券
 */
const couponShopListFn = (shopId) => {
  couponShopList(shopId).then((res) => {
    if (res.code === 0) {
      merchantCoupons.value = res.data[0];
    }
  });
};
/**
 * 获取评价列表
 */
const getEvaluationPageFn = () => {
  if (params.value.isEnd === true)
    return new Promise((resolve) => {
      resolve();
    });
  xma.showLoading({
    title: '加载中...',
    mask: false,
  });
  return getEvaluationPage({
    current: params.value.current,
    size: params.value.size,
    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.current += 1;
      return new Promise((resolve) => {
        commentList.value = commentList.value.concat(res.data.records);
        xma.hideLoading();
        setTimeout(() => {
          resolve();
        }, 500);
      });
    }
  });
};
function back() {
  xma.navigateBack({
    delta: 1,
  });
}
function refresh() {
  return new Promise((resolve) => {
    params.value = {
      current: 1,
      size: 20,
      shopId,
      isEnd: false,
    };
    commentList.value = [];
    resolve();
  });
}
/**
 * 跳转优惠券页面
 */
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 = () => {
  xma.showLoading({
    title: '加载中...',
    mask: false,
  });
  getEvaluationPage({
    current: 1,
    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);
        xma.hideLoading();
        return item;
      });
    }
  });
};

// 创建一个防抖后的函数
const debouncedLog = debounce((id) => {
  sgyrddShopPageFn(id);
}, 800);
function changeActie(id) {
  activeId.value = id;
  debouncedLog(id);
}
// onReachBottom(() => {
//   console.log('到底了');
//   if (isLoadReachBottom.value === true) return;
//   isLoadReachBottom.value = true;
//   getEvaluationPageFn().then(() => {
//     isLoadReachBottom.value = false;
//   });
// });
/**
 * 拨打商家电话
 * @param {*} phoneNumber
 */
function callShopPhone(phoneNumber) {
  xma.makePhoneCall({
    phoneNumber, // 仅为示例
  });
}
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
}
.shop-pages {
  width: 375 * 2rpx;
  margin: 0 auto;

  .icon-statr {
    :deep(.wd-icon-star-on) {
      display: block !important;
    }
  }
  .search {
    width: 710rpx;
    height: 80rpx;
    // background: rgba(255, 255, 255, 0.8);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 0.8;
    margin: 0 auto;
    margin-top: 44rpx;
    display: flex;
    align-items: center;
    padding-left: 20rpx;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    z-index: 99;
    .arrow {
      width: 15rpx;
      height: 24rpx;
    }
    .icon {
      font-size: 28rpx;
    }
    .searchBox {
      width: 129 * 2rpx;
      height: 26 * 2rpx;
      background: rgba(243, 243, 243, 0.4);
      border-radius: 28rpx 28rpx 28rpx 28rpx;
      display: flex;
      align-items: center;
      padding-left: 20rpx;
      margin-left: 20rpx;
      .magnifyingGlass {
        width: 26rpx;
        height: 26rpx;
      }
      .text {
        margin-left: 10rpx;
        font-size: 24rpx;
      }
    }
    .icon-box {
      display: flex;
      align-content: center;
      margin-left: auto;
      .icon {
        font-size: 40rpx;
        color: #fff;
      }
      .icon-fenxiang {
        margin-left: 20rpx;
      }
    }
  }
  .swiper {
    width: 750rpx;
    margin: 0 auto;
    height: 536rpx;

    :deep(.wd-swiper__track) {
      border-radius: 0;
    }
    :deep(.wd-swiper-nav--bottom) {
      bottom: 100rpx;
    }
  }

  .content {
    width: 750rpx;
    position: relative;
    .shop-info {
      width: 750rpx;
      background-color: #fdfdfd;
      position: relative;
      top: -80rpx;
      border-radius: 16rpx 16rpx 0rpx 0rpx;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding: 20rpx 32rpx 20rpx 40rpx;
      .shop-info-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding-bottom: 20rpx;
        .shop-info-detail {
          display: flex;
          flex-direction: column;
          .shop-title {
            font-size: 18 * 2rpx;
            font-weight: bold;
            color: #3d3d3d;
          }
          .shop-tag-list {
            display: flex;
            flex-wrap: wrap;
            max-width: 400rpx;
            background-color: #fff;
            margin-top: 8rpx;
            .tag-item {
              border-radius: 3 * 2rpx;
              background: #efefef;
              box-sizing: border-box;
              padding: 8rpx;
              margin-right: 24rpx;
              margin-top: 8rpx;
              text {
                font-size: 9 * 2rpx;
                color: #767676;
              }
            }
            .tag-item:nth-child(1) {
              margin-left: 0;
              background: linear-gradient(90deg, #fcdbdb 0%, rgba(255, 255, 255, 0) 98%);
            }
          }
        }
        .shop-info-right {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .shop-info-score {
            // max-width: 62 * 2rpx;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-self: end;
            padding: 8rpx;
            border-radius: 8px;
            background: linear-gradient(180deg, #fcdbdb 0%, rgba(255, 255, 255, 0.36) 100%);
            .score-text {
              display: flex;
              justify-content: space-between;
              align-items: center;
              color: #fa5151;
              max-width: 62 * 2rpx;
              .score-num {
                font-size: 18 * 2rpx;
                font-weight: bold;
              }
              .tj {
                font-size: 11 * 2rpx;
                color: #fa5151;
                margin-left: 8rpx;
              }
            }
            .icon-statr {
              :v-deep(.wd-rate__item-star--active) {
                overflow: visible !important;
              }
            }
          }
          .shop-business-hours {
            texe {
              font-size: 8 * 2rpx;
              color: #767676;
            }
          }
        }
      }
      .shop-info-bottom {
        border-top: 2rpx solid #efefef;
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 20rpx 0;
        align-items: center;
        .shop-address {
          display: flex;
          flex-direction: column;
          max-width: 245 * 2rpx;
          .shop-distance {
            font-size: 12 * 2rpx;
            color: #3d3d3d;
          }
          .shop-address-detail {
            font-size: 11 * 2rpx;
            margin-top: 8rpx;
            color: #abaaaa;
          }
        }
        .shop-map-phone {
          display: flex;
          align-content: center;
          .img1 {
            margin-right: 48rpx;
          }
          image {
            width: 20 * 2rpx;
            height: 20 * 2rpx;
          }
        }
      }
    }
    // 商家信息-end
    // 补贴
    .subsidy-content {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 10rpx 40rpx 14rpx 12rpx;
      background: #ffefee;
      margin-top: 16rpx;
      flex-shrink: 0;
      top: -80rpx;
      position: relative;
      box-shadow: 0rpx 2 * 2rpx 10 * 2rpx 0 * 2rpx rgba(226, 3, 3, 0.08);
      .subsidy {
        width: 144 * 2rpx;
        height: 40 * 2rpx;
        position: relative;
        image {
          position: absolute;
          width: 84 * 2rpx;
          height: 54 * 2rpx;
          top: calc(50% - 54rpx);
          left: 0;
        }
        text {
          border: 1rpx solid #fa5151;
          right: 14rpx;
          height: 28 * 2rpx;
          position: absolute;
          font-size: 11 * 2rpx;
          line-height: 28 * 2rpx;
          top: calc(50% - 28rpx);
          text-align: center;
          left: 84 * 2rpx;
          color: #fa5151;
        }
      }
      .more {
        font-size: 10 * 2rpx;
        color: #abaaaa;
        display: flex;
        align-items: center;
      }
    }
    // 补贴-end
    // 商品下单列表
    .goods-list {
      width: 355 * 2rpx;
      height: 200 * 2rpx;
      border-radius: 8 * 2rpx;
      background: #ffffff;
      display: flex;
      position: relative;
      top: -80rpx;
      flex-direction: column;
      box-sizing: border-box;
      padding: 20rpx;
      margin: 0 auto;
      margin-top: 22rpx;

      .scroll-view_H {
        white-space: nowrap;
        width: 100%;
      }
      .scroll-view-item_H {
        display: inline-block;
        margin-right: 4rpx;
        .item-box {
          display: flex;
          flex-direction: column;
          justify-content: center;
          image {
            width: 80 * 2rpx;
            height: 88 * 2rpx;
            border-radius: 5 * 2rpx;
          }
          .goods-name {
            font-size: 11 * 2rpx;
            color: #3d3d3d;
            margin-top: 10rpx;
          }
          .goods-price {
            color: #ff3e32;
            font-weight: bold;
            font-size: 12px;
            margin-top: 20rpx;
          }
        }
      }
      .my-button {
        width: 315 * 2rpx;
        height: 32 * 2rpx;
        margin-top: 20rpx;
        background: linear-gradient(270deg, #ff3e32 0%, #ff7332 100%);
        text {
          font-size: 24rpx;
          font-weight: 700;
        }
      }
    }
    // 商品下单列表-end
    // 团购优惠
    .group-buying-discounts {
      width: 100%;
      border-radius: 16rpx;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding: 20rpx 40rpx;
      background: #fdfdfd;
      margin-top: 20rpx;
      position: relative;

      top: -80rpx;
      .title {
        display: flex;
        align-items: center;
        .icon {
          width: 20 * 2rpx;
          height: 20 * 2rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 3 * 2rpx 3 * 2rpx 0 * 2rpx 3 * 2rpx;
          background: #fa5151;
          font-size: 10 * 2rpx;
          color: #fff;
          font-weight: bold;
        }
        text {
          position: absolute;
          font-size: 13 * 2rpx;
          font-weight: bold;
          color: #3d3d3d;
          margin-left: 52rpx;
        }
      }
      .group-buying-list {
        width: 100%;
        margin-top: 40rpx;
        background: #fff;
        .group-buying-item {
          border-bottom: 2rpx solid #efefef;
          display: flex;
          align-items: center;
          padding-bottom: 40rpx;
          padding-top: 20rpx;
          width: 100%;
          background: #fdfdfd;
          image {
            width: 60 * 2rpx;
            height: 60 * 2rpx;
            border-radius: 8 * 2rpx;
            flex-shrink: 0;
          }
          .goods-info-detail {
            box-sizing: border-box;
            display: flex;
            margin-left: 20rpx;
            flex-direction: column;
            .goods-title {
              font-size: 12 * 2rpx;
              font-weight: bold;
              color: #3d3d3d;
              margin-top: 8rpx;
            }
            .yh-fl,
            .yh-time {
              font-size: 8 * 2rpx;
              margin-top: 8rpx;
              color: #abaaaa;
            }
            .tag-list {
              width: 280rpx;
              display: flex;
              flex-wrap: wrap;
              margin: 12rpx 0;
              .tag {
                background: #fcdbdb;
                padding: 2rpx 8rpx;
                box-sizing: border-box;
                font-size: 12 * 2rpx;
                color: #fa5151;
                margin-right: 8rpx;
              }
            }
            .price {
              .num0 {
                font-size: 10 * 2rpx;
                font-weight: 400;
                color: #fa5151;
              }
              .num {
                color: #fa5151;
                font-weight: 700;
                font-size: 14 * 2rpx;
              }
              .num1 {
                line-height: 10 * 2rpx;
                color: #abaaaa;
                text-decoration: line-through;
              }
            }
          }
          .pay {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            margin-left: auto;
            .sold-shares {
              font-size: 10 * 2rpx;
              color: #abaaaa;
            }
            .my-button-qg {
              background: #fa5151;
              margin-top: 8rpx;
              width: 52 * 2rpx;
              height: 24 * 2rpx;
              border-radius: 12 * 2rpx;
              text-align: center;
              line-height: 24 * 2rpx;
              font-size: 12 * 2rpx;
              color: #fff;
            }
          }
        }
        .group-buying-item:last-child {
          border: none;
        }
      }
    }
    // 团购优惠-end
    // 用户评价-start
    .user-reviews {
      width: 100%;
      background-color: #fdfdfd;
      box-sizing: border-box;
      padding: 11 * 2rpx;
      margin-top: 10rpx;
      position: relative;
      top: -80rpx;
      .useer-reviews-title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .user-pj {
          font-size: 14 * 2rpx;
          color: #3d3d3d;
          font-weight: bold;
        }
        .user-icon {
          width: 36rpx;
          height: 36rpx;
        }
      }
      .reviews-list {
        width: 100%;
        display: flex;
        flex-direction: column;
        .reviews-item {
          display: flex;
          flex-direction: column;
          padding: 40rpx 0;
          border-bottom: 2rpx solid #efefef;
          .user-info-box {
            display: flex;
            flex-direction: column;
            .u-time {
              font-size: 9 * 2rpx;
              color: #abaaaa;
              margin-top: 20rpx;
            }
            .u-info-detail {
              display: flex;
              align-content: center;
              .u-name {
                margin-left: 20rpx;
                .u-pf {
                  display: flex;
                  align-items: center;
                  .icon-statr {
                    :v-deep(.wd-rate__item-star--active) {
                      overflow: visible !important;
                    }
                  }
                  text {
                    color: #fa5151;
                    font-weight: 700;
                    font-size: 10 * 2rpx;
                    margin-right: 10rpx;
                  }
                }
              }
              .user-tx {
                width: 32px;
                height: 32px;
                border-radius: 50%;
              }
              text {
                font-size: 12 * 2rpx;
                color: #3d3d3d;
              }
            }
          }
          .user-evaluate {
            font-size: 12 * 2rpx;
            font-weight: normal;
            color: #3d3d3d;
            margin-top: 20rpx;
          }
          .evaluate-img {
            display: grid;
            width: 100%;
            margin-top: 10rpx;
            grid-template-columns: repeat(3, 1fr);
            // grid-template-rows: repeat(3, 228rpx);
            gap: 10px;
            image {
              width: 100%;
              height: 114 * 2rpx;
              border-radius: 8 * 2rpx;
            }
          }
          .u-dz-sc-pl {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 40rpx;
            .liulan {
              font-size: 9 * 2rpx;
              color: #abaaaa;
            }
          }
          .pl-icon {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .icon {
              display: flex;
              align-items: center;
              margin-right: 20rpx;
              .iconfont {
                color: #767676;
                margin-right: 14rpx;
              }
              text {
                font-size: 18rpx;
                color: #767676;
              }
            }
          }
        }
        .u-more {
          font-size: 9 * 2rpx;
          color: #767676;
          box-sizing: border-box;
          text-align: center;
          padding: 20rpx 0;
        }
      }
    }
    // 用户评价-end
    // 周边推荐-start
    .surrounding-recommendations {
      width: 100%;
      border-radius: 8 * 2rpx 8 * 2rpx 0 0;
      background: #fdfdfd;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding: 20rpx;
      margin-top: 10rpx;
      position: relative;
      top: -80rpx;
      .title {
        font-size: 13 * 2rpx;
        font-weight: bold;
        color: #3d3d3d;
      }
      .tag-list {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        margin-top: 26rpx;
        .tag {
          border-radius: 10 * 2rpx;
          background: #efefef;
          color: #3d3d3d;
          box-sizing: border-box;
          padding: 6rpx 20rpx;
          margin-right: 20rpx;
          font-size: 11 * 2rpx;
          margin-top: 20rpx;
        }
        .active-tag {
          border-radius: 10 * 2rpx;
          background: #ffefee;
          box-sizing: border-box;
          padding: 6rpx 20rpx;
          margin-right: 20rpx;
          color: #fa5151;
        }
      }
      .goods-list-tg {
        margin-top: 30rpx;
        width: 100%;
        background-color: #fff;
        padding-bottom: 40rpx;
        .scroll-view_H {
          white-space: nowrap;
          width: 100%;
        }
        .scroll-view-item_H {
          display: inline-block;
          margin-right: 20rpx;
          .item-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            image {
              width: 84 * 2rpx;
              height: 60 * 2rpx;
              border-radius: 8 * 2rpx;
            }
            .goods-name {
              font-size: 12 * 2rpx;
              width: 72 * 2rpx;
              font-weight: bold;
              color: #3d3d3d;
              margin-top: 10rpx;
            }
            .goods-pf-rs {
              display: flex;
              align-items: center;
              margin-top: 10rpx;
              .goods-fs {
                font-weight: 500;
                font-size: 14 * 2rpx;
                color: #fa5151;
              }
              .goods-fs-2 {
                font-weight: 400;
                font-size: 10 * 2rpx;
                color: #fa5151;
              }
              .goods-rs {
                font-size: 10 * 2rpx;
                font-weight: 500;
                color: #abaaaa;
              }
            }

            .tag-list {
              display: flex;
              width: 84 * 2rpx;
              flex-wrap: wrap;
              margin-top: 20rpx;
              .tag {
                border-radius: 3 * 2rpx;
                background: #efefef;
                color: #abaaaa;
                box-sizing: border-box;
                padding: 6rpx;
                font-size: 8 * 2rpx;
                margin-right: 10rpx;
              }
            }
          }
        }
      }
      .tj-more {
        border-top: 2rpx solid #f4f4f4;
        width: 100%;
        height: 36 * 2rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 9 * 2rpx;
        color: #767676;
      }
    }

    // 周边推荐-end
  }
}
</style>
@/utils/common.js
