web-store-retail-h5/pages/index/index.vue

<template>
  <view :class="userInfo && userInfo.skin ? 'content1' : 'content'">
    <view class="content_a">
      <!-- 商品专区入口 先别删  -->
      <!-- <view @tap="goSpecialArea">会员专区</view> -->
      <view :class="userInfo && userInfo.skin ? 'index-top1' : 'index-top'">
      </view>

      <view class="banner" v-if="isEmpty(goodsList.advertBannerList) == false">
        <view class="uni-margin-wrap">
          <swiper
            class="swiper"
            circular
            :indicator-dots="indicatorDots"
            :autoplay="autoplay"
            :interval="interval"
            :duration="duration"
          >
            <swiper-item
              v-for="(item, index) in goodsList.advertBannerList"
              :key="index"
              @click="bannerTap(item.link)"
            >
              <view class="swiper-item uni-bg-red">
                <image :src="item.picture"></image>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
      <special-area-wrapper size="small" />
      <view class="goods-sort">
        <view class="goods_content" style="padding-bottom: 130rpx">
          <view
            class="goods-center-lists"
            v-for="item in goodsList"
            :key="item.waresId"
            @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 goods-info">
                <view class="goods-name">{{ item.waresName }}</view>
                <view class="goods-sales-wrapper">
                  <view class="goods-sales"
                    >累计销量{{ formatSales(item.sales) }}</view
                  >
                  <view
                    class="goods-price"
                    v-if="item.specialArea == 31 && userInfo.isMakerSpace == 1"
                  >
                    <span v-if="priceSymbolVisible" class="price-symbol">
                      {{ priceSymbol }}
                    </span>
                    <span>{{ formatCurrency(item.vipPrice) }}</span>
                  </view>
                  <view class="goods-price" v-if="item.specialArea != 31">
                    <span v-if="priceSymbolVisible" class="price-symbol">
                      {{ priceSymbol }}
                    </span>
                    <span>{{ formatCurrency(item.waresPrice) }}</span>
                  </view>
                  <view
                    class="goods-price"
                    v-if="item.specialArea == 31 && userInfo.isMakerSpace == 0"
                  >
                    <span v-if="priceSymbolVisible" class="price-symbol">
                      {{ priceSymbol }}
                    </span>
                    <span>{{ formatCurrency(item.waresPrice) }}</span>
                  </view>
                </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="confirmHandle"
          :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 { getAreaGoods } from '@/config/special-area'
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 { formatCurrency } from '@/util/index.js'
import { mapGetters } from 'vuex'
import SpecialAreaWrapper from '@/components/area-product-list/special-area-wrapper.vue'
import {
  REGIEST_AREA,
  REISSUE_AREA,
  UPGRADE_AREA,
  REPURCHASE_AREA,
} from '@/util/specialAreaMap'
import { MEMBER_SIGN } from '@/util/common.js'
export default {
  components: {
    noticePopup,
    znNewsPopup,
    'cl-tabbar': clTabbar,
    getTree,
    'special-area-wrapper': SpecialAreaWrapper,
  },
  filters: {
    seles(value) {
      if (value > 999) {
        return 999 + '+'
      } else {
        return value
      }
    },
  },
  data() {
    return {
      promptFlag: false,
      promptMsg: '',
      confirmText: '',
      userInfo: uni.getStorageSync('User'),
      moreFlag: false,
      index: 0,
      indicatorDots: true,
      interval: 5000,
      autoplay: true,
      duration: 500,
      goodsList: [],
      recommendSpecialAreaList: [],
    }
  },
  computed: {
    ...mapGetters(['priceSymbol', 'priceSymbolVisible', 'isZeroLevel']),
  },
  onLoad() {
    if (
      uni.getStorageSync('showInfo') == undefined ||
      uni.getStorageSync('showInfo') == 0
    ) {
    }
    this.getAreaGoods(
      this.userInfo.memberSign == MEMBER_SIGN.ZERO_LEVEL
        ? REPURCHASE_AREA.id
        : REGIEST_AREA.id
    )
    // this.getLanguage();
    // this.getService()
  },
  onShow() {
    this.$store.dispatch('getCarLength')
  },
  // onPullDownRefresh() {
  //   let that = this
  //   setTimeout(() => {
  //     that.getGoodsInfo()
  //     uni.stopPullDownRefresh() //停止刷新
  //   }, 1000)
  // },
  methods: {
    formatCurrency,
    formatSales(value) {
      if (value > 999) {
        return '999+'
      } else {
        return value
      }
    },

    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',
                })
              }
            },
          })
        }
      })
    },
    getAreaGoods(areaId) {
      getAreaGoods({
        pageNum: 1,
        pageSize: 3,
        specialArea: areaId,
      }).then(res => {
        if (res.code == 200) {
          this.goodsList = res.data || []
        }
      })
    },
    confirmHandle() {
      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 = '确定'
            // 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,
          })
        }
      }
    },
    goSpecialArea() {
      uni.navigateTo({
        url: '/pages/index/specialArea/index',
      })
    },
  },
}
</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-name {
  width: 100%;
  margin-top: 10rpx;
  color: #333;
  font-size: 32rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  line-height: 1.4;
  // min-height: calc(26rpx * 1.4 * 2);
}

.goods-center-lists {
  width: calc(100% - 40rpx); // height: 450rpx;
  background: #ffffff;
  margin-left: 20rpx;
  margin-right: 20rpx;
  border-radius: 15rpx;
  border-bottom: 20rpx;
  margin-bottom: 20rpx;
  // padding-bottom: 30rpx;
  position: relative;
  .goods-flex-s {
    display: flex;
    padding: 20rpx;
    .goods-img {
      flex-shrink: 0;
      width: 236rpx;
      height: 236rpx;
      image {
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
      }
    }
  }
  .goods-info {
    flex: 1;
    padding-left: 20rpx;
    width: 0;
    display: flex;
    flex-direction: column;
    .goods-sales-wrapper {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;

      .goods-sales {
        font-size: 24rpx;
        color: #999;
        margin-top: 10rpx;
      }
      .goods-price {
        color: #f82c1a;
        margin-top: 10rpx;
        font-style: 22rpx;
        margin-left: -7rpx;
        .price-symbol {
          font-size: 22rpx;
        }
        span {
          font-size: 36rpx;
          font-weight: bold;
        }
      }
      .goods-price1 {
        color: #999;
        font-size: 10px;
        margin-left: -7rpx;
        span {
          font-size: 10rpx;
        }
      }
    }
  }
}

.swiper-s {
  height: 495rpx;
}

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

.goods_content {
  display: flex;
  flex-direction: column;
  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;
  gap: 20rpx;
  // justify-content: space-between;
}

.goods-list {
  // display: flex;
  width: 33%;
}

.goods-content {
  width: 100%;
  height: 200rpx;
  text-align: center;

  .goods {
    image {
      width: 100%;
      height: 200rpx;
    }
  }
}

.goods-flexs {
  .goods-view {
    position: relative;
    // width: 302rpx; // height: 180rpx;
    // margin-left: 20rpx;
    // background: #ffffff;
    border-radius: 15rpx;
    padding: 0 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;
}

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

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

.swiper-item {
  height: 300rpx;
  text-align: center;
  padding: 0 20rpx;
  width: 100%;
  box-sizing: border-box;
  image {
    border-radius: 24rpx;
    height: 300rpx;
    width: 100%;
  }
}

.banner {
  padding: 30rpx 0 0 0;
  text-align: center;
  width: 100%;
  margin-bottom: 20rpx;
}

.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: 20rpx;
  .index_t {
    padding: 30rpx 20rpx;
  }
}
.index-top1 {
  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: 100%;
  .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>