708 lines
		
	
	
		
			15 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			708 lines
		
	
	
		
			15 KiB
		
	
	
	
		
			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(banners) == 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 banners"
 | |
|               :key="index"
 | |
|               @click="bannerTap(item.link)"
 | |
|             >
 | |
|               <view class="swiper-item uni-bg-red">
 | |
|                 <image :src="item.picture"></image>
 | |
|               </view>
 | |
|             </swiper-item>
 | |
|           </swiper>
 | |
|         </view>
 | |
|       </view>
 | |
|       <view style="padding-bottom: 140rpx">
 | |
|         <special-area-wrapper :userInfo="userInfo" size="small" />
 | |
|       </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>
 | |
|         <!-- <RegionSelect v-if="userInfo.memberCode != 'ZK68880628'" /> -->
 | |
|         <!-- 直推排行弹窗
 | |
|         <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 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,
 | |
|     '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: false,
 | |
|       interval: 5000,
 | |
|       autoplay: true,
 | |
|       duration: 500,
 | |
|       goodsList: [],
 | |
|       recommendSpecialAreaList: [],
 | |
|       banners: [],
 | |
|     }
 | |
|   },
 | |
|   computed: {
 | |
|     ...mapGetters(['priceSymbol', 'priceSymbolVisible', 'isZeroLevel']),
 | |
|   },
 | |
|   onLoad() {
 | |
|     // this.getLanguage();
 | |
|     // this.getService()
 | |
|   },
 | |
|   onShow() {
 | |
|     this.$store.dispatch('getCarLength')
 | |
|     this.getBanners()
 | |
|     if (
 | |
|       uni.getStorageSync('showInfo') == undefined ||
 | |
|       uni.getStorageSync('showInfo') == 0
 | |
|     ) {
 | |
|     }
 | |
|     // this.getAreaGoods(
 | |
|     //   this.userInfo.memberSign == MEMBER_SIGN.ZERO_LEVEL
 | |
|     //     ? REPURCHASE_AREA.id
 | |
|     //     : REGIEST_AREA.id
 | |
|     // )
 | |
|   },
 | |
|   // onPullDownRefresh() {
 | |
|   //   let that = this
 | |
|   //   setTimeout(() => {
 | |
|   //     that.getGoodsInfo()
 | |
|   //     uni.stopPullDownRefresh() //停止刷新
 | |
|   //   }, 1000)
 | |
|   // },
 | |
|   methods: {
 | |
|     formatCurrency,
 | |
|     formatSales(value) {
 | |
|       if (value > 999) {
 | |
|         return '999+'
 | |
|       } else {
 | |
|         return value
 | |
|       }
 | |
|     },
 | |
|     getBanners() {
 | |
|       apis.getBanners().then(res => {
 | |
|         if (res.code == 200) {
 | |
|           this.banners = res.data || []
 | |
|         }
 | |
|       })
 | |
|     },
 | |
|     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;
 | |
| 
 | |
|   image {
 | |
|     height: 450rpx;
 | |
|     width: 340rpx;
 | |
|   }
 | |
| }
 | |
| 
 | |
| .swiper-item {
 | |
|   height: 300rpx;
 | |
|   text-align: center;
 | |
|   // padding: 0 20rpx;
 | |
|   width: 100%;
 | |
|   box-sizing: border-box;
 | |
|   font-size: 0;
 | |
|   image {
 | |
|     height: 300rpx;
 | |
|     font-size: 0;
 | |
|     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>
 |