discounts-minapp/pages/index/index.vue

<template>
  <view>
    <zs-skeleton type="index" :loading="loading"></zs-skeleton>
    <view class="navBarBox">
      <view
        class="statusBar"
        :style="{ paddingTop: statusBarHeight + 'px' }"
      ></view>
      <view class="navBar">
        <view>印象贵大文创</view>
        <image class="logo" mode="scaleToFill"></image>
      </view>
    </view>
    <view class="content">
      <view @click="handleSearch" class="search-box">
        <zs-search
          style="margin-top: 10px"
          :showBtn="false"
          :showPrefix="false"
          :readOnly="true"
          placeholder="请输入商品名称"
          height="80"
          bgColor="#F6F6F6"
        ></zs-search>
      </view>

      <view class="swiper-box">
        <view class="progress">
          {{ current + 1 + "/" + advList.length }}
        </view>
        <swiper
          class="swiper"
          @change="swiperChange"
          :current="current"
          :indicator-dots="false"
          circular
          :autoplay="true"
          :interval="3000"
          :duration="1000"
        >
          <swiper-item
            v-for="(item, index) in advList"
            :key="item.id"
            @click="jump(item.jumpUrl)"
          >
            <image class="swiper-item" mode="" :src="item.advertsImg"> </image>
          </swiper-item>
        </swiper>
      </view>

      <view class="discount-list">
        <view
          class="discount-item"
          v-for="(item, index) in discountsList"
          :key="index"
          @click="goDetail(item)"
        >
          <image class="icon" :src="item.columnImg" mode=""></image>
          <view class="title">{{ item.columnName }}</view>
        </view>
      </view>

      <view class="swiper-box" style="height: 160rpx">
        <view class="progress">
          {{ current1 + 1 + "/" + advList1.length }}
        </view>
        <swiper
          class="swiper"
          @change="swiperChangeAd"
          :indicator-dots="false"
          circular
          :current="current1"
          :autoplay="true"
          :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="goGoodsDetail(item)"
            >
              <zs-img
                :src="item.goodsImg"
                width="340rpx"
                height="340rpx"
                mode="widthFix"
              ></zs-img>
              <view class="info">
                <view class="title">
                  {{ item.goodsName }}
                </view>
                <view class="goods-price">
                  <view> ￥{{ item.realPrice }} </view>
                  <view class="distance"> 销售{{ item.saleNum }} </view>
                </view>
              </view>
            </view>
          </view>
          <view class="right">
            <view
              class="store-item"
              v-for="(item, index) in list1"
              :key="index"
              @click="goGoodsDetail(item)"
            >
              <zs-img
                :src="item.goodsImg"
                width="340rpx"
                height="340rpx"
                mode="widthFix"
              ></zs-img>
              <view class="info">
                <view class="title">
                  {{ item.goodsName }}
                </view>
                <view class="goods-price">
                  <!-- <image
                  class="position"
                  src="../../static/position.png"
                  mode=""
                ></image> -->
                  <view> ￥{{ item.realPrice }}</view>
                  <view class="distance">
                    销售{{ item.saleNum.toFixed(2) }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </zs-list>
      </view>

      <zs-tab-bar :value="0"></zs-tab-bar>
    </view>
  </view>
</template>

<script>
import { getUserDetail, getAdv } from "@/api/common.js";
import { appSearch } from "@/api/shop.js";
import { searchMenu } from "@/api/study.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,
      statusBarHeight: 0,
      current1: 0,
      list: [],
      list1: [],
      status: "more",
      query: {
        currentPage: 1,
        pageSize: 10,
        shopId: "",
        status: 3,
      },
    };
  },
  onLoad() {},
  created() {
    this.loading = true;
    this.navBarHeight = this.$navHight(1);
    this.navBarHeight = this.navBarHeight + 10 + "px";
    this.statusBarHeight = uni.getSystemInfoSync()["statusBarHeight"];
    this.query.shopId = uni.getStorageSync("gdShopId");
    Promise.all([
      this.getSearchMenu(),
      this.getAdv(),
      this.appSearch(),
      this.getBanner(),
      this.getCity(),
    ]).then((res) => {});
  },
  methods: {
    goGoodsDetail(item) {
      uni.setStorageSync("shopInfo", JSON.stringify(item));
      uni.reLaunch({
        url: `../../detail/goodsDetail/index?id=${item.goodsId}`,
      });
    },
    // 点击搜索
    handleSearch() {
      if (!uni.getStorageSync("token")) {
        return uni.showModal({
          title: "请登录",
          confirmText: "去登录",
          success(res) {
            console.log(res);
            if (res.confirm) {
              uni.navigateTo({
                url: "/login/login/login?redirect=/pages/index/index",
              });
            }
          },
        });
      }
      uni.reLaunch({
        url: "./search",
      });
      // if(!val) return
      // this.query.queryName = val
      // this.query.pageCurrent = 1
      // this.list = []
      // this.list1 = []
      // this.status = 'more'
      // this.search()
    },
    // swiper变动
    swiperChange(val) {
      this.current = val.target.current;
    },
    swiperChangeAd(val) {
      this.current1 = val.target.current;
    },
    // Banner
    getBanner() {
      return new Promise((resolve, reject) => {
        getAdv({
          currentPage: 1,
          pageSize: 99,

          advertsType: 1,
        }).then((res) => {
          if (res.state == "Success") {
            this.advList = res.content.records.filter((e, i) => {
              return i < 10;
            });
            this.loading = false;
            resolve(2);
          }
        });
      });
    },
    // 广告位
    getAdv() {
      return new Promise((resolve, reject) => {
        getAdv({
          currentPage: 1,
          pageSize: 99,
          advertsType: 2,
        }).then((res) => {
          if (res.state == "Success") {
            this.advList1 = res.content.records.filter((e, i) => {
              return i < 10;
            });;
            this.loading = false;
            resolve(2);
          }
        });
      });
    },
    // 金刚区
    getSearchMenu() {
      return new Promise((resolve, reject) => {
        searchMenu({
          currentPage: 1,
          pageSize: 4,
          belongType: 1,
          status: 1,
        }).then((res) => {
          if (res.state == "Success") {
            this.discountsList = res.content.records;
            resolve(1);
          }
        });
      });
    },
    // 跳转优惠详情
    goDetail(item) {
      // url = "/pages/home/detail";
      // uni.navigateTo({
      //   url: `${url}`,
      //   success(res) {
      //     // res.eventChannel.emit("banner", banner);
      //   },
      // });
      uni.navigateTo({
        url: `./searchResult?column=${item.columnName}&columnId=${item.goodsCateId}&itemId=${item.id}`,
      });
      console.log("item", item);
    },
    appSearch() {
      if (this.status == "noMore") return;
      this.status = "loading";
      appSearch(this.query).then((res) => {
        if (res.state == "Success") {
          this.loading = false;
          let list = [];
          let list1 = [];
          res.content.records.map((item, index) => {
            if (index % 2) {
              list1.push(item);
            } else {
              list.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.currentPage++;
          }
        }
      });
    },
    loadMore() {
      console.log("loadMore");
      if (this.query["location.lat"] && this.query["location.lon"]) {
        this.appSearch();
      }
    },
    // 获取当前城市
    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">
.navBarBox .navBar .logo {
  width: 0rpx;
  height: 82rpx;
  // margin-right: 10rpx;
}

.navBarBox .navBar {
  font-size: 35rpx;
  font-weight: bold;
  padding: 3rpx 50rpx;
  padding-bottom: 8rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.content {
  // padding-top: 24%;
  display: flex;
  flex-direction: column;
  background-color: #fafafa;
  justify-content: center;
}

page {
  background-color: #fafafa;
}

.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%;
  justify-content: space-evenly;
  // 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;
  margin-bottom: 60rpx;
}

.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: #ff4d3a;
        font-weight: bold;
        font-size: 30rpx;
        .distance {
          font-weight: normal;
          font-size: 20rpx;
          color: #999;
        }

        .position {
          color: 999;
          width: 25rpx;
          height: 29rpx;
          margin-right: 8rpx;
        }
      }
    }
  }
}
</style>