jdt-user/src/pages/hotGoods/index/index.vue

<template>
  <view>
    <!-- 金刚区 -->
    <view class="top-box">
      <view class="item">
        <view @click="hotGoodsDetail">
          <IconFont
            name="http://article.biliimg.com/bfs/article/131eda0add8662808d97ffb1191d19bf3e420647.png"
            size="40" />
          <view>我的订单</view>
        </view>
      </view>
      <view class="item">
        <view></view>
      </view>
      <view class="item"> </view>
      <view class="item">
        <view></view>
      </view>
    </view>
    <!--  商品列表  -->
    <!-- <view class="goodBox">
            <view
                class="good"
                v-for="item in list"
                :key="item.gid"
                @click.stop="toGoodDetails(item.gid as number)"
            >
                <image :src="(item.cover as string)" />
                <view class="good-text-box">
                    <text class="good-text">{{ item.name }} </text>
                    <view class="good-price-box">
                        <text class="good-text-price">
                            ¥
                            <text style="font-size: 20px">{{
                                item.number
                            }}</text>
                            元
                        </text>
                    </view>
                </view>
            </view>
        </view> -->
    <view class="goodBox">
      <view
        class="good"
        v-for="item in merdata as any"
        :key="item.ID"
        @click.stop="toMerDetails(item)">
        <image :src="item.head_photo as string" />
        <view class="good-text-box">
          <text class="good-text">{{ item.name }}</text>
          <text style="color: #999"
            >距离我{{
              calculateDistance(
                userLocalNum.t,
                userLocalNum.l,
                Number(item.lat),
                Number(item.lon),
              )
            }}</text
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import Taro from '@tarojs/taro';
import {
  // getActiveGoods,
  getMerList,
} from '../../../api/goods';
import {IconFont} from '@nutui/icons-vue-taro';
import {calculateDistance} from '@/utils';

// const list = ref<any>([]);

Taro.useLoad(() => {
  // getList();
  get_mer_list();
});

// const getList = async () => {
//     const res = await getActiveGoods();
//     console.log(res);
//     list.value = res.data.data;
// };

// const toGoodDetails = (id: number) => {
//     Taro.navigateTo({
//         url: `/pages/goods/goods_detail/index?gid=${id}&type=1`,
//     });
// };

const hotGoodsDetail = () => {
  Taro.navigateTo({
    url: `/pages/hotGoods/hot_list/index`,
  });
};

const merdata = ref([]);

const userLocalNum = ref({
  l: 0,
  t: 0,
});

const get_mer_list = async () => {
  Taro.getLocation({
    type: 'wgs84',
    success: res => {
      userLocalNum.value.l = res.longitude;
      userLocalNum.value.t = res.latitude;
    },
  });

  const res = await getMerList({
    PageNum: 1,
    PageSize: 10,
    Btype: 1,
    classid: 0,
  });
  merdata.value = res.data.data;
};

const toMerDetails = (item: any) => {
  Taro.setStorageSync('mer_info', item);
  Taro.navigateTo({
    url: `/pages/mer/mer_detail/index`,
  });
};
</script>

<style lang="scss">
.top-box {
  display: flex;
  justify-content: space-between;
  margin: 10px 20px 0 20px;
  background-color: #fff;
  border-radius: 10px;

  .item {
    width: 150px;
    padding: 10px;
    background-color: #fff;
    text-align: center;
  }
}

.goodBox {
  display: flex;
  padding: 20px;
  flex-wrap: wrap;
  justify-content: space-between;

  .good {
    width: 340px;
    background-color: #fff;
    margin-bottom: 20px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;

    image {
      width: 100%;
      height: 350px;
    }

    .good-text-box {
      padding: 10px;

      .good-text {
        flex-shrink: 0;
        font-size: 28px;
        color: #333;
        font-weight: 400;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        word-break: break-word;
      }

      .good-price-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;

        .good-text-price {
          font-size: 28px;
          font-weight: bold;
          color: #ff0000;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }
      }
    }
  }
}
</style>