discounts-minapp/pages/index/detail.vue

<template>
  <view class="content">
    <view class="top-box">
      <view class="progress">
        <!-- {{ current + 1 + "/" + bannerList.length }} -->
        <view class="indicator" v-for="item in bannerList.length">
          <view :class="['block', item == current ? 'active' : '']"> </view>
        </view>
      </view>
      <view class="goods-box">
        <view class="goods-title">
          {{ bannerList[current].title }}
        </view>
        <view class="goods-subtitle">
          {{ bannerList[current].subtitle }}
        </view>
      </view>
      <swiper
        class="swiper"
        @change="swiperChange"
        :indicator-dots="false"
        circular
        :current="current"
        indicatorMode="line"
        :autoplay="true"
        :interval="3000"
        :duration="1000"
      >
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <image class="swiper-item" mode="" :src="item.src"> </image>
        </swiper-item>
      </swiper>
    </view>

    <view class="card-box">
      <view class="card-item">
        <view class="card-title">
          <view class="card-item-title">
            <view class="title-moji">到店自提</view>
            <view class="subtitle">提前点单免排队</view>
          </view>
          <view class="card-img">
            <image
              class="card-item-img"
              src="../../static/icons/self-pick.png"
            ></image>
          </view>
        </view>
      </view>

      <view class="card-item">
        <view class="card-title">
          <view class="card-item-title">
            <view class="title-moji">印象配送</view>
            <view class="subtitle">外卖点单及时送</view>
          </view>
          <view class="card-img">
            <image
              class="card-item-img"
              src="../../static/icons/distribution.png"
            ></image>
          </view>
        </view>
      </view>
    </view>

    <view class="swiper-box" style="height: 200rpx">
      <swiper
        class="swiper"
        @change="swiperChange"
        :indicator-dots="false"
        circular
        :autoplay="false"
        :interval="3000"
        :duration="1000"
      >
        <swiper-item
          v-for="(item, index) in advList1"
          :key="item.id"
          @click="jump(item.jumpUrl)"
        >
          <image class="swiper-item" mode="" :src="item.advertsImg"> </image>
        </swiper-item>
      </swiper>
    </view>

    <view class="sub-title">
      <view>精选推荐</view>
    </view>

    <view class="goods-list">
      <!-- 列表 -->
      <zs-list class="store-box" mt="0" @load="loadMore" :status="status">
        <view class="left">
          <view
            class="store-item"
            v-for="(item, index) in list"
            :key="index"
            @click="goShopDetail(item)"
          >
            <zs-img
              :src="item.logoPath"
              width="340rpx"
              height="340rpx"
              mode="widthFix"
            ></zs-img>
            <view class="info">
              <view class="title">
                {{ item.shopVo.shopName }}
              </view>
              <view class="goods-price">
                <!-- <image
                  class="position"
                  src="../../static/position.png"
                  mode=""
                ></image> -->
                <view> ￥120 </view>
                <view class="distance">
                  销售{{ (item.shopVo.distance / 1000).toFixed(2) }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="right">
          <view
            class="store-item"
            v-for="(item, index) in list1"
            :key="index"
            @click="goShopDetail(item)"
          >
            <zs-img
              :src="item.logoPath"
              width="340rpx"
              height="340rpx"
              mode="widthFix"
            ></zs-img>
            <view class="info">
              <view class="title">
                {{ item.shopVo.shopName }}
              </view>
              <view class="goods-price">
                <!-- <image
                  class="position"
                  src="../../static/position.png"
                  mode=""
                ></image> -->
                <view> ￥120 </view>
                <view class="distance">
                  销售{{ (item.shopVo.distance / 1000).toFixed(2) }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </zs-list>
    </view>

    <zs-tabbar-shadow />
  </view>
</template>

<script>
import { getUserDetail, getMenu, getAdv } from "@/api/common.js";
import { search } from "@/api/shop.js";
// 腾讯地图
var QQMapWX = require("../../libs/qqmap-wx-jssdk.min.js");
var qqmapsdk = new QQMapWX({ key: "KX5BZ-B64RC-RO62W-AMWAZ-VVTC3-YAFXF" });
export default {
  data() {
    return {
      advList: [],
      advList1: [],
      discountsList: [], //菜单
      current: 0,
      loading: false,
      navBarHeight: 0,
      bannerList: [
        {
          src: "http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/LasLcHe8z6F9c7c569e98cf778f866ac466404589d03.png/1.png",
          theme: "#FD9E59",
          title: "春季新品",
          subtitle: "蜜桃乌龙海盐芝士茶",
        },
        {
          src: "http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/QdulVZUZ9HYH190ae2e9392281ee1b845573e68ece1e.png/1.png",
          theme: "#FDD34C",
          title: "清仓处理",
          subtitle: "农夫山泉矿泉水",
        },
        {
          src: "http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/N7kknVWzDPKLbb7e15025599a818bbf11e3b030b6765.png/1.png",
          theme: "#B0ACF9",
          title: "正在热卖",
          subtitle: "哇哈哈AD盖",
        },
      ],
      list: [],
      list1: [],
      status: "more",
      query: {
        queryName: "",
        "location.lat": 0,
        "location.lon": 0,
        pageCurrent: 1,
        pageSize: 10,
      },
    };
  },
  onLoad() {},
  created() {
    this.loading = true;
    this.navBarHeight = this.$navHight(1);
    this.navBarHeight = this.navBarHeight + 10 + "px";
    Promise.all([this.getMenu(), this.getAdv(), this.getCity()]).then((res) => {
      this.search();
    });
  },
  methods: {
    // swiper变动
    swiperChange(val) {
      this.current = val.target.current;
    },
    // 广告位
    getAdv() {
      return new Promise((resolve, reject) => {
        getAdv({ currentPage: 1, pageSize: 99, advertsType: 1 }).then((res) => {
          if (res.state == "Success") {
            this.advList = res.content.records.filter(
              (item, index) => index < 2
            );
            this.advList1 = res.content.records
              .filter((item, index) => index >= 2)
              .map((item) => {
                return {
                  ...item,
                  advertsImg:
                    "https://img.tukuppt.com/bg_grid/00/19/09/1dM5I5nUz7.jpg!/fh/350",
                };
              })
              .filter((item, index) => index == 1);
            this.loading = false;
            resolve(2);
          }
        });
      });
    },
    // 金刚区
    getMenu() {
      return new Promise((resolve, reject) => {
        getMenu({ currentPage: 1, pageSize: 10 }).then((res) => {
          if (res.state == "Success") {
            this.discountsList = res.content.records.slice(0, 5);
            resolve(1);
          }
        });
      });
    },
    // 跳转优惠详情
    goDetail(url, id, banner, title) {
      url = "/pages/home/detail";
      uni.navigateTo({
        url: `${url}`,
        success(res) {
          // res.eventChannel.emit("banner", banner);
        },
      });
    },
    search() {
      if (this.status == "noMore") return;
      this.status = "loading";
      search(this.query).then((res) => {
        if (res.state == "Success") {
          this.loading = false;
          let list = [];
          let list1 = [];
          res.content.records.map((item, index) => {
            if (index % 2) {
              list.push(item);
            } else {
              list1.push(item);
            }
          });
          this.list = this.list.concat(list);
          this.list1 = this.list1.concat(list1);
          let total = this.list.length + this.list1.length;
          if (total >= res.content.total) {
            this.status = "noMore";
          } else {
            this.status = "more";
            this.query.pageCurrent++;
          }
        }
      });
    },
    loadMore() {
      console.log("loadMore");
      if (this.query["location.lat"] && this.query["location.lon"]) {
        this.search();
      }
    },
    // 获取当前城市
    getCity() {
      let that = this;
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: "gcj02",
          success: (res) => {
            // 解析地址
            that.query["location.lat"] = res.latitude;
            that.query["location.lon"] = res.longitude;
            // 存储经纬度
            uni.setStorageSync(
              "location",
              JSON.stringify({
                latitude: res.latitude,
                longitude: res.longitude,
              })
            );
            qqmapsdk.reverseGeocoder({
              location: {
                latitude: res.latitude,
                longitude: res.longitude,
              },
              success: function (res) {
                // 市
                that.city = res.result.address_component.city;
                resolve();
              },
              fail: function (res) {
                that.city = "定位失败";
              },
            });
          },
          fail: (res) => {
            console.log("获取经纬度失败");
          },
        });
      });
    },
  },
};
</script>

<style lang="scss">
page{
  background-color: #fafafa;
}
.content {
  // padding-top: 24%;
  display: flex;
  flex-direction: column;
  background-color: #fafafa;
  justify-content: center;
  .top-box {
    background: linear-gradient(180deg, var(--bg) 0%, #fff 100%);
    // padding: 100rpx 32rpx 0;
    height: 550rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    .progress {
      position: absolute;
      top: 24%;
      right: 80%;
      display: flex;
      z-index: 2;
      color: #ffffff;
      font-size: 16rpx;
      // background: rgba(255, 255, 255, 0.3);
      padding: 2rpx 10rpx;
      border-radius: 14rpx;
      .block {
        width: 30rpx;
        height: 10rpx;
        margin-left: 10rpx;
        background: #fff;
        border-radius: 10px;
      }
      .active {
        background: #b4b4b4;
      }
    }
    .goods-box {
      position: absolute;
      top: 10%;
      z-index: 22;
      margin-left: 20rpx;
      .goods-title {
        font-size: 70rpx;
        color: #000;
        margin-bottom: 10rpx;
      }
      .goods-subtitle {
        font-size: 35rpx;
        color: #8b8b8b;
      }
    }
    .swiper {
      height: 584rpx;
      border-radius: 16rpx;
      .swiper-item {
        width: 100%;
        height: 100%;
        // border-radius: 16rpx;
      }
    }
  }

  .card-box {
    background-color: white;
    border-radius: 15rpx;
    padding: 40rpx 60rpx 20rpx 60rpx;
    display: flex;
    justify-content: space-evenly;
    z-index: 9999;
    margin: -15% 20rpx 20rpx 20rpx;
    .title-moji {
      font-size: 40rpx;
      margin-bottom: 10rpx;
      text-align: center;
    }
    .subtitle {
      text-align: center;
      font-size: 30rpx;
      color: #8b8b8b;
    }
    .card-img {
      display: flex;
      justify-content: center;
      padding: 40rpx 0 50rpx 0;
      .card-item-img {
        width: 100rpx;
        height: 100rpx;
      }
    }

    // height: 300rpx;
  }
}

.search-box {
  width: 100vw;
}

.swiper-box {
  position: relative;
  margin: 0 24rpx 10rpx;
  padding-top: 20rpx;
  width: 702rpx;
  height: 280rpx;
  border-radius: 16rpx;
  .progress {
    position: absolute;
    top: 38rpx;
    right: 20rpx;
    z-index: 2;
    color: #ffffff;
    font-size: 16rpx;
    background: rgba(255, 255, 255, 0.3);
    padding: 2rpx 10rpx;
    border-radius: 14rpx;
  }

  .swiper {
    position: relative;
    height: 100%;
    padding: 0 10rpx;
    .swiper-item {
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
      object-fit: cover;
    }
  }
}

.discount-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  // padding: 30rpx 0;
  // margin: 0 0rpx 0rpx;
  background: #fafafa;
  border-radius: 16rpx;
  position: relative;
  top: 0rpx;
  padding-top: 20rpx;
  .discount-item {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10rpx;
    margin-bottom: 10rpx;
    position: relative;

    .icon {
      width: 56rpx;
      height: 56rpx;
    }

    .title {
      font-size: 26rpx;
      margin-top: 10rpx;
    }

    .tag {
      position: absolute;
      top: -20rpx;
      left: 50%;
      background: #ff0615;
      box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(255, 255, 255, 0.16);
      border-radius: 12rpx 14rpx 14rpx 0rpx;
      color: #fff;
      white-space: nowrap;
      font-size: 18rpx;
      line-height: -14rpx;
      height: 24rpx;
      padding: 0 10rpx;
      // width: fit-content;
      background-size: 100% 34rpx;
    }

    .desc {
      color: #ff0817;
      font-size: 16rpx;
      text-align: center;
      margin-top: 4rpx;
    }
  }
}
.sub-title {
  margin: 20rpx 0;
  padding-left: 40rpx;
  font-size: 30rpx;
  font-weight: bold;
}

.goods-list {
  border-radius: 16rpx 16rpx 0 0;
}

.zs-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 24rpx;

  .left {
    .adv-swiper {
      width: 340rpx;
      height: 444rpx;
      margin-bottom: 25rpx;
      .adv-item {
        width: 340rpx;
        height: 444rpx;
      }
    }
  }

  .right {
  }

  .store-item {
    width: 340rpx;
    margin-bottom: 25rpx;
    // box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.08);
    border-radius: 16rpx;
    background: #fff;

    .icon {
      width: 100%;
      height: 300rpx;
      border-radius: 16rpx 16rpx 0 0;
    }

    .info {
      padding: 20rpx;
      background: #fff;
      border-radius: 0 0 16rpx 16rpx;
      position: relative;

      .title {
        // font-weight: bold;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .tags {
        display: flex;
        align-items: center;

        .tag-item {
          line-height: 50rpx;
          border-radius: 8rpx;
          padding: 6rpx 0;
          font-size: 24rpx;
          margin-left: 10rpx;
          display: flex;

          .label {
            background: #fff;
            color: #fe5b47;
            padding: 0 10rpx;
            border-radius: 8rpx 0 0 8rpx;
          }

          .value {
            color: #fff;
            background: rgba(255, 255, 255, 0.2);
            padding: 0 14rpx;
            border-radius: 0 8rpx 8rpx 0;
          }
        }
      }

      .goods-price {
        display: flex;
        align-items: center;
        margin-top: 15rpx;
        justify-content: space-between;
        color: #202020;
        .distance {
          color: #999;
        }
        .position {
          color: 999;
          width: 25rpx;
          height: 29rpx;
          margin-right: 8rpx;
        }
      }
    }
  }
}
</style>