web-base-h5/pages/index/index.vue

<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-11-21 15:11:22
-->
<template>
  <view 
    :class="userInfo.skin ? 'content1' : 'content'"
  >
    <view 
      class="content_a"
    >
      <view
        :class="userInfo.skin ? 'index-top1' : 'index-top'"
        :style="{
          paddingTop: safeAreaTop + 'rpx',
        }"
      >
        <view class="index_t">
          <view class="index-left">
            <view class="english">GLOBALIZATION</view>
            <view class="text">{{ '全球一体化' }}</view>
          </view>
        </view>
      </view>
      
      <view 
        v-if="!isEmpty(goodsList.advertBannerList)"
        class="banner" 
        :style="{
          paddingTop: 140 + safeAreaTop + 'rpx'
        }"
      >
        <view class="uni-margin-wrap">
          <swiper
            class="swiper"
            circular
            :indicator-dots="indicatorDots"
            :autoplay="autoplay"
            :interval="interval"
            :duration="duration"
          >
            <swiper-item
              v-for="item in goodsList.advertBannerList"
              @click="bannerTap(item.link)"
            >
              <view class="swiper-item uni-bg-red">
                <image :src="item.picture"></image>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
      <view class="goods-sort">
        <view class="goods-flexs">
          <view
            class="goods-view"
            @click="navTap(item)"
            v-for="(item, index) in goodsList.recommendSpecialAreaList"
            v-if="item.waresList != false && (index < 8 || moreFlag == true)"
          >
            <view :class="userInfo.skin ? 'bg-color1' : 'bg-color'"></view>
            <view class="goods-top">
              <view class="title">{{ item.specialAreaName }}</view>
              <!-- <view class="lables">限时抢</view> -->
            </view>
            <template v-if="item.waresList">
              <view class="goods-cen">
                <view
                  class="goods-list"
                  v-for="(items, indexs) in item.waresList"
                  v-if="indexs < 2"
                >
                  <view class="goods-content">
                    <view class="goods">
                      <image :src="items.cover1"></image>
                    </view>
                    <!--  <view class="price">
								{{items.waresPrice  | numberToCurrency | isLocal}}
							  </view> -->
                  </view>
                </view>
              </view>
            </template>
          </view>
        </view>
        <view v-if="isEmpty(goodsList.recommendSpecialAreaList) == false">
          <view
            class="more"
            @click="more"
            v-if="!moreFlag && goodsList.recommendSpecialAreaList.length > 6"
          >
            {{ '查看更多' }}
          </view>
        </view>
        <view class="goods_content">
          
          <view
            class="goods-center-lists"
            v-for="(item, idx) in goodsList.waresVoList"
            :key="idx"
            @click="goDetails(item)"
          >
            <view
              class="fly"
              v-show="item.preSaleStatus == 3 || item.isSale == 1"
            ></view>
            <view class="goods-flex-s">
              <view class="goods-img">
                <image :src="item.cover1"></image>
              </view>
              <view class="padding_s">
                <view class="goods-name">{{ item.waresName }}</view>
                <view
                  class="goods-price"
                  v-if="item.specialArea == 31 && userInfo.isMakerSpace == 1"
                  ><span>{{ item.vipPrice | numberToCurrency | isLocal }}</span>
                </view>
                <view class="goods-price" v-if="item.specialArea != 31"
                  ><span>{{
                    item.waresPrice | numberToCurrency | isLocal
                  }}</span>
                </view>
                <view
                  class="goods-price"
                  v-if="item.specialArea == 31 && userInfo.isMakerSpace == 0"
                >
                  {{ item.waresPrice | numberToCurrency | isLocal }}
                </view>
                <!-- <view class="goods-price1" v-show="item.specialArea == 31"
                  >统一零售价:<span>{{
                    item.retailPrice | numberToCurrency | isLocal
                  }}</span>
                </view> -->
                <view class="goods-sales"
                  >{{ '累计销量' }}{{ item.sales | seles }}</view
                >
              </view>
            </view>
          </view>
        </view>
      </view>
      <cl-tabbar :current="0"></cl-tabbar>
      <div>
        <!-- 公告弹窗 -->
        <notice-popup
          @getTree="getTree"
          :userInfo="userInfo"
          ref="child"
          :publishLocationIndex="10"
        ></notice-popup>
        <!-- 植树弹窗
        <getTree ref="tree"></getTree>
         -->
        <!-- 站内信弹窗 -->
        <znNewsPopup
          ref="child2"
          @childMethodTrigger="callChildMethod"
        ></znNewsPopup>
        <!-- 直推排行弹窗
        <directrank-popup
          @callznMethodTrigger="callznMethod"
        ></directrank-popup>
         -->

        <u-modal
          :show="promptFlag"
          title="提示"
          :closeOnClickOverlay="true"
          showCancelButton
          :confirmText="confirmText"
          confirmColor="#DE3932"
          @close="promptFlag = false"
          @cancel="promptFlag = false"
          @confirm="toDel"
          :content="promptMsg"
        ></u-modal>
      </div>
    </view>
  </view>
</template>

<script>
// import titleLine from '@/components/titleLine.vue'
import * as api from "@/config/login.js";
import * as apis from "@/config/index.js";
import * as ban from "@/config/balance.js";
import clTabbar from "@/components/cl-tabbar.vue";
import noticePopup from "@/components/noticePopup.vue";
import getTree from "@/components/getTree.vue";
import znNewsPopup from "@/components/znNewsPopup.vue";
import deviceSafeArea from '@/mixins/deviceSafeArea.js'
// import directrankPopup from "@/components/directrankPopup.vue";
export default {
  mixins: [deviceSafeArea],
  components: {
    noticePopup,
    znNewsPopup,
    "cl-tabbar": clTabbar,
    getTree,
    // directrankPopup,
  },
  filters: {
    seles(value) {
      if (value > 999) {
        return 999 + "+";
      } else {
        return value;
      }
    },
  },
  data() {
    return {
      promptFlag: false,
      promptMsg: "",
      confirmText: "",
      userInfo: uni.getStorageSync("User"),
      getLanguageList: [],
      moreFlag: false,
      index: 0,
      indicatorDots: true,
      interval: 5000,
      autoplay: true,
      duration: 500,
      goodsList: [],
      zoneList: [
        {
          label: '注册专区',
          value: 1,
          name: "regiest",
          children: [
            {
              label: '自营专区',
              value: 1,
              name: "regiestArea",
              isShow: true,
            },
            {
              label: "乐学易考",
              value: 24,
              name: "ezLearnReg",
              isShow: true,
            },
          ],
        },
        {
          label: '升级专区',
          value: 2,
          name: "upgrade",
          children: [
            {
              label: '自营专区',
              value: 2,
              name: "upgradeArea",
              isShow: true,
            },
            {
              label: '海粉专区',
              value: 27,
              name: "haiFunUpd",
              isShow: true,
            },
            {
              label: "乐学易考",
              value: 25,
              name: "ezLearnUp",
              isShow: true,
            },
          ],
        },

        {
          label: '复购专区',
          value: 3,
          name: "repurchase",
          children: [
            {
              label: '自营专区',
              value: 3,
              name: "self",
              isShow: true,
            },
            {
              label: "乐学易考",
              value: 26,
              name: "ezLearnRep",
              isShow: true,
            },
            {
              label: '免费注册',
              value: 21,
              name: "haiFans",
              isShow: true,
            },

            {
              label: '复购合作',
              value: 22,
              name: "cooperation",
              isShow: true,
            },
            {
              label: '直播专区',
              value: 14,
              name: "live",
              isShow: true,
            },
            {
              label: '工具流',
              value: 12,
              name: "gongju",
              isShow: true,
            },
          ],
        },
        {
          label: '福利专区',
          value: 13,
          children: [],
          name: "welfare",
        },
        {
          label: '积分专区',
          value: 11,
          children: [],
          name: "integral",
        },
        {
          label: '重消专区',
          value: 10,
          children: [],
          name: "rescission",
        },
        {
          label: "专供专区",
          value: 31,
          children: [],
          name: "wolesaleArea",
        },
        {
          label: "续约专区",
          value: 30,
          children: [],
          name: "renewalArea",
        },
        {
          label: '创客空间专区',
          value: 28,
          children: [],
          name: "makerArea",
        },
        {
          label: '架构管理',
          value: 6,
          name: "frame",
          children: [
            {
              label: '安置架构',
              value: 6,
              name: "architecture",
              isShow: true,
            },
            {
              label: '推荐架构',
              value: 7,
              name: "recommend",
              isShow: true,
            },
          ],
        },
        {
          label: '分享专区',
          value: 7,
          name: "share",
          children: [
            {
              label: '海粉分享',
              value: 7,
              name: "hiFans",
              isShow: true,
            },
            {
              label: '免费注册',
              value: 21,
              name: "haiFans",
              isShow: true,
            },
          ],
        },
        {
          label: '创客礼包',
          value: 18,
          isShow: true,
          children: [
            {
              label: '创客礼包',
              value: 18,
              isShow: true,
              children: [],
            },
            {
              label: '赋能礼包',
              value: 19,
              isShow: true,
              children: [],
            },
          ],
        },
      ],
    };
  },
  onLoad() {
    if (
      uni.getStorageSync("showInfo") == undefined ||
      uni.getStorageSync("showInfo") == 0
    ) {
    }
    this.getGoodsInfo();
    this.getService();
  },
  onShow() {
    this.$store.dispatch("getCarLength");
  },
  onPullDownRefresh() {
    let that = this;
    setTimeout(() => {
      that.getGoodsInfo();
      uni.stopPullDownRefresh(); //停止刷新
    }, 1000);
  },
  methods: {
    // index_repurchase
    goAreaUrl() {
      ban.agreementName().then((res) => {
        if (res.data == 0) {
          uni.navigateTo({
            url:
              "/pages/specialArea/list?label=续约专区" +
              "&specialArea=30" +
              "&children=[]",
          });
        } else {
          uni.showModal({
            title: '提示',
            content: '请先进行实名认证',
            success: (res) => {
              if (res.confirm) {
                uni.navigateTo({
                  url: "/pages/selfService/realName/realName",
                });
              }
            },
          });
        }
      });
    },
    toDel() {
      this.promptFlag = false;
      if (this.jumpPage == 1) {
        uni.navigateTo({
          url: "/pages/selfService/realName/realName",
        });
      } else {
        uni.navigateTo({
          url:
            "/pages/specialArea/list?label=续约专区" +
            "&specialArea=30" +
            "&children=[]",
        });
      }
    },
    getService() {
      api.agreement_expire().then((res) => {
        if (res.code == 200) {
          this.promptFlag = res.data.promptFlag ? false : true;
          this.promptMsg = res.data.promptMsg;
          this.jumpPage = res.data.jumpPage;
          // confirmText
          if (this.jumpPage == 1) {
            this.confirmText = "实名认证";
          } else {
            this.confirmText = "立即续约";
          }
        }
      });
    },
    callChildMethod() {
      this.$refs.child.getUserTc();
    },
    callznMethod() {
      this.$refs.child2.getUserTc2();
    },
    // 植树弹层
    getTree() {
      this.$refs.tree.getData();
    },
    isEmpty(v) {
      switch (typeof v) {
        case "undefined":
          return true;
        case "string":
          if (v.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, "").length == 0)
            return true;
          break;
        case "boolean":
          if (!v) return true;
          break;
        case "number":
          if (0 === v || isNaN(v)) return true;
          break;
        case "object":
          if (null === v || v.length === 0) return true;
          for (var i in v) {
            return false;
          }
          return true;
      }
      return false;
    },
    more() {
      this.moreFlag = true;
    },
    openKf() {
      let userInfo = uni.getStorageSync("User");
      let src =
        "https://im1c5366d.7x24cc.com/phone_webChat.html?accountId=N000000033467&chatId=302384fb-eda1-436e-a5e9-c03a2dbd6e97&visitorId=" +
        userInfo.memberCode +
        "&nickName=" +
        userInfo.memberCode;
      window.open(src, "_blank");
    },
    bannerTap(urls) {
      if (urls) {
        window.location.href = urls;
      }
    },
    getGoodsInfo() {
      apis.userIndex().then((res) => {
        this.goodsList = res.data;
      });
    },
    goUrl(item) {
      ban.agreementName().then((res) => {
        if (res.data == 0) {
          uni.navigateTo({
            url:
              "/pages/specialArea/details?waresCode=" +
              item.waresCode +
              "&specialArea=" +
              item.specialArea,
          });
        } else {
          uni.showModal({
            title: '提示',
            content: '请先进行实名认证',
            success: (res) => {
              if (res.confirm) {
                uni.navigateTo({
                  url: "/pages/selfService/realName/realName",
                });
              }
            },
          });
        }
      });
    },
    goDetails(item) {
      if (item.preSaleStatus == 3 || item.isSale == 1) {
      } else {
        if (item.specialArea == 30) {
          this.goUrl(item);
        } else {
          uni.navigateTo({
            url:
              "/pages/specialArea/details?waresCode=" +
              item.waresCode +
              "&specialArea=" +
              item.specialArea,
          });
        }
      }
    },
    navTap(item) {
      let tapx = -1;
      this.zoneList.forEach((items, index) => {
        if (items.value == item.specialArea) {
          tapx = index;
        }
      });
      if (tapx == -1) {
        this.zoneList.forEach((items, index) => {
          items.children.forEach((ctem) => {
            if (ctem.value == item.specialArea) {
              if (item.specialArea == 21) {
                uni.navigateTo({
                  url:
                    "/pages/specialArea/haIndex?label=" +
                    item.specialAreaName +
                    "&specialArea=21&diff=1",
                });
              } else {
                uni.navigateTo({
                  url:
                    "/pages/specialArea/list?label=" +
                    items.label +
                    "&specialArea=" +
                    items.value +
                    "&childArea=" +
                    item.specialArea +
                    "&children=" +
                    JSON.stringify(items.children) +
                    "&diff=1",
                });
              }
            }
          });
        });
      } else {
        if (item.specialArea == 30) {
          this.goAreaUrl();
        } else {
          uni.navigateTo({
            url:
              "/pages/specialArea/list?label=" +
              item.specialAreaName +
              "&specialArea=" +
              item.specialArea +
              "&children=" +
              JSON.stringify(this.zoneList[tapx].children) +
              "&diff=1",
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  // background: url('~@/static/images/fBgd.jpg') no-repeat;
  background-size: 100% 100%;
  height: 100vh;
  .content_a {
    overflow: auto;
    height: 100%;
  }
}
.content1 {
  background: url("~@/static/images/fBgd.jpg") no-repeat;
  background-size: 100% 100%;
  height: 100vh;
  .content_a {
    overflow: auto;
    height: 100%;
  }
}
.more {
  color: #333;
  background-color: #fff;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 30rpx;
  width: 690rpx;
  margin: 0 auto 30rpx auto;
}

:v-deep uni-swiper {
  height: 300rpx;
}

header {
  display: none !important;
}

.padding_s {
  padding: 0 20rpx;
}

.goods-sales {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.goods-price {
  color: #f82c1a;
  margin-top: 10rpx;
  font-style: 22rpx;
  margin-left: -7rpx;

  span {
    font-size: 30rpx;
    font-weight: bold;
  }
}
.goods-price1 {
  color: #999;
  // margin-top: 10rpx;
  font-size: 10px;
  margin-left: -7rpx;

  span {
    font-size: 10rpx;
  }
}

.goods-name {
  margin-top: 10rpx;
  color: #333;
  font-size: 26rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.goods-img {
  image {
    width: 100%;
    border-radius: 10rpx 10rpx 0 0;
    height: 322rpx;
  }
}

.goods-center-lists:nth-child(3) {
  //margin-top: 0rpx;
}

.goods-center-lists {
  width: 345rpx; // height: 450rpx;
  background: #ffffff;
  margin-left: 20rpx;
  border-radius: 15rpx;
  border-bottom: 20rpx;
  margin-bottom: 20rpx;
  padding-bottom: 30rpx;
  position: relative;
}

.goods-sort {
  padding-bottom: 130rpx;
}

.swiper-s {
  height: 495rpx;
}

.goods-lists {
  width: 340rpx;
  margin-bottom: 0rpx;
  margin-left: 20rpx;
}

.goods_content {
  display: flex;
  padding: 0;
  flex-wrap: wrap;
}

.price {
  height: 40rpx;
  line-height: 40rpx;
  background: #fde9e9;
  border-radius: 14rpx;
  color: #e7141a;
  font-size: 22rpx;
  text-align: center;
  width: max-content;
  padding: 0 10rpx;
  margin: 0 auto;
}

.goods-cen {
  display: flex;
  margin-top: 20rpx;
  justify-content: space-between;
}

.goods-list {
  // display: flex;
  margin-right: 20rpx;
}

.goods-content {
  width: 140rpx;
  height: 140rpx;
  text-align: center;

  .goods {
    image {
      width: 140rpx;
      height: 140rpx;
    }
  }
}

.goods-flexs {
  display: flex;
  padding: 20rpx 20rpx 10rpx 0;
  position: relative;
  flex-wrap: wrap; // margin-left: -25rpx;

  .bg-color {
    width: 343rpx;
    height: 72rpx;
    background: linear-gradient(
      -180deg,
      rgba(255, 226, 226, 0.85) 0%,
      rgba(254, 240, 229, 0.45) 38%
    );
    border-radius: 15rpx 15rpx 0 0;
    position: absolute;
    top: 0;
    left: 0rpx;
  }
  .bg-color1 {
    width: 343rpx;
    height: 72rpx;
    background: #acfbd5;
    border-radius: 15rpx 15rpx 0 0;
    position: absolute;
    top: 0;
    left: 0rpx;
  }

  .goods-view {
    position: relative;
    width: 302rpx; // height: 180rpx;
    margin-left: 20rpx;
    background: #ffffff;
    border-radius: 15rpx;
    padding: 20rpx 20rpx 10rpx 20rpx;
    margin-bottom: 20rpx;

    .goods-top {
      z-index: 1;
      position: relative;
      display: flex;

      .title {
        color: #333;
        font-size: 32rpx;
        font-weight: bold;
      }

      .lables {
        height: 28rpx;
        background: #f82c1a;
        border-radius: 10rpx;
        line-height: 24rpx;
        font-size: 22rpx;
        padding: 5rpx 15rpx;
        color: #fff;
        max-width: 100rpx;
        margin: 5rpx 0 0 10rpx;
      }
    }
  }

  .lefts {
    margin-left: 15rpx;
  }
}

:v-deep .swiper-s .swiper-items uni-image {
  height: 495rpx;
}

:v-deep .uni-swiper-dots-horizontal .uni-swiper-dot {
  margin-right: 5rpx;
}

:v-deep .swiper-s .uni-swiper-dots .uni-swiper-dot {
  width: 14rpx;
  height: 14rpx;
  background: #ffffff;
  border-radius: 50%;
}

:v-deep uni-swiper .uni-swiper-dot {
  width: 40rpx;
  height: 6rpx;
  background: #fff !important;
  border-radius: 10rpx;
}

:v-deep uni-swiper .uni-swiper-dot-active {
  width: 40rpx;
  height: 6rpx;
  background: #f94856 !important;
  border-radius: 10rpx;
}

.swiper-items {
  // height: 495rpx;
  width: 340rpx;
  border-radius: 12rpx;

  image {
    border-radius: 12rpx;
    height: 450rpx;
    width: 340rpx;
  }
}

.swiper-item {
  height: 300rpx;
  text-align: center;
  margin: 0 auto;
  width: 690rpx;

  image {
    border-radius: 24rpx;
    height: 300rpx;
    width: 690rpx;
  }
}

.banner {
  text-align: center;
  width: 100%;
}

.changeLanguages {
  position: absolute;
  right: 0rpx;
  top: 45rpx;
}

.select-text {
  display: flex;
  margin-right: 20px;
}

.selIcon {
  width: 40rpx;
  height: 40rpx;
}

.paswwrod_btn {
  color: #666666;
  font-size: 26rpx;
  margin: 40rpx auto;
  text-align: center;
}

page {
  background-color: #f2f2f2;
}

.index-left {
  font-weight: bold;

  .english {
    font-size: 24rpx;
    color: #333;
  }

  .text {
    font-size: 30rpx;
    color: #333;
    margin-top: 2rpx;
    letter-spacing: 16rpx;
  }
}

.index-top {
  // background: url('~@/static/images/tBgd.jpg') no-repeat;
  background-size: 100% 100%;
  // padding: 30rpx 20rpx; // height: 100rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 120rpx;
  .index_t {
    padding: 30rpx 20rpx;
  }
}
.index-top1 {
  background: url("~@/static/images/tBgd.jpg") no-repeat;
  background-size: 100% 100%;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  // padding: 30rpx 20rpx; // height: 100rpx;
  // background-color: #fff;
  display: flex;
  justify-content: space-between;
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 120rpx;
  .index_t {
    padding: 30rpx 20rpx;
  }
}

.index-right {
  display: flex;
}

.kf_A {
  position: fixed;
  background: rgba(256, 256, 256, 0.8);
  width: 62px;
  // height: 60px;
  z-index: 10;
  right: 40rpx;
  top: 11%;
  border-radius: 10px;
  text-align: center;
  padding: 20rpx 0;
}

.kf {
  image {
    width: 48rpx;
    height: 48rpx;
    margin-bottom: 10rpx;
  }

  font-size: 10px;
  color: #333333;
}
.fly {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background: #eee;
  opacity: 0.5;
  z-index: 1;
}
</style>