513 lines
		
	
	
		
			12 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			513 lines
		
	
	
		
			12 KiB
		
	
	
	
		
			Vue
		
	
	
	
| <!--
 | |
|  * @Descripttion: 
 | |
|  * @version: 
 | |
|  * @Author: kBank
 | |
|  * @Date: 2022-11-21 15:11:22
 | |
| -->
 | |
| <template>
 | |
|   <view class="content">
 | |
|     <!-- <view class="kuang">
 | |
|       <view class="kuang_i"
 | |
|             v-for="(item, index) in zoneList"
 | |
|             :key="index"
 | |
|             @tap="goGoodList(item)"
 | |
|             v-show="item.isShow">
 | |
|         <view>{{ item.label }}</view>
 | |
|         <img :src="item.img"
 | |
|              alt="">
 | |
|       </view>
 | |
|     </view> -->
 | |
|     <view class="goods-sort">
 | |
|       <view class="goods-flexs">
 | |
|         <view class="goods-view"
 | |
|               @click="navTap(item)"
 | |
|               v-for="item in goodsList.recommendSpecialAreaList "
 | |
|               v-if="item.waresList!=false">
 | |
|           <view class="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>
 | |
|     <cl-tabbar :current="2"></cl-tabbar>
 | |
|   </view>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| import * as api from '@/config/goods'
 | |
| import * as apis from '@/config/index.js'
 | |
| import clTabbar from '@/components/cl-tabbar.vue'
 | |
| import * as ban from '@/config/balance.js'
 | |
| 
 | |
| export default {
 | |
|   components: {
 | |
|     'cl-tabbar': clTabbar,
 | |
|   },
 | |
|   data() {
 | |
|     return {
 | |
|       user: '',
 | |
|       goodsList: [],
 | |
|       specialImg: require('@/static/images/two2.jpg'),
 | |
|       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: 25,
 | |
|               name: 'ezLearnUp',
 | |
|               isShow: true,
 | |
|             },
 | |
|             {
 | |
|               label: '海粉专区',
 | |
|               value: 27,
 | |
|               name: 'haiFunUpd',
 | |
|               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: [],
 | |
|           isShow: true,
 | |
|           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() {
 | |
|     // this.getMenuList()
 | |
|     this.getGoodsInfo()
 | |
|   },
 | |
|   onShow() {
 | |
|     this.user = uni.getStorageSync('User')
 | |
|     // user.registerShare
 | |
|   },
 | |
|   methods: {
 | |
|     goUrl() {
 | |
|       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',
 | |
|                 })
 | |
|               }
 | |
|             },
 | |
|           })
 | |
|         }
 | |
|       })
 | |
|     },
 | |
|     navTap(item) {
 | |
|       if (item.isShare) {
 | |
|         uni.navigateTo({
 | |
|           url: '/pages/specialArea/share?specialArea=21',
 | |
|         })
 | |
|         return false
 | |
|       } else {
 | |
|         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',
 | |
|                   })
 | |
|                 } else {
 | |
|                   uni.navigateTo({
 | |
|                     url:
 | |
|                       '/pages/specialArea/list?label=' +
 | |
|                       items.label +
 | |
|                       '&specialArea=' +
 | |
|                       items.value +
 | |
|                       '&childArea=' +
 | |
|                       item.specialArea +
 | |
|                       '&children=' +
 | |
|                       JSON.stringify(items.children),
 | |
|                   })
 | |
|                 }
 | |
|               }
 | |
|             })
 | |
|           })
 | |
|         } else {
 | |
|           if(item.specialArea == 30){
 | |
|             this.goUrl()
 | |
|           }else{
 | |
|             uni.navigateTo({
 | |
|             url:
 | |
|               '/pages/specialArea/list?label=' +
 | |
|               item.specialAreaName +
 | |
|               '&specialArea=' +
 | |
|               item.specialArea +
 | |
|               '&children=' +
 | |
|               JSON.stringify(this.zoneList[tapx].children),
 | |
|           })
 | |
|           }
 | |
|           
 | |
|         }
 | |
|       }
 | |
|     },
 | |
|     getGoodsInfo() {
 | |
|       let userInfo = uni.getStorageSync('User')
 | |
|       apis.userIndex().then((res) => {
 | |
|         // if (userInfo.pkSettleCountry == 1) {
 | |
|         //   res.data.recommendSpecialAreaList.unshift({
 | |
|         //     specialArea: 21,
 | |
|         //     isShare: 1,
 | |
|         //     specialAreaName: '免费注册',
 | |
|         //     waresList: res.data.recommendSpecialAreaList[0].waresList,
 | |
|         //   })
 | |
|         // }
 | |
| 
 | |
|         this.goodsList = res.data
 | |
|         this.$forceUpdate()
 | |
|       })
 | |
|     },
 | |
|     getMenuList() {
 | |
|       api.menuList().then((res) => {
 | |
|         res.data.forEach((item) => {
 | |
|           this.zoneList.forEach((ctem) => {
 | |
|             if (ctem.name == item.menuKey) {
 | |
|               ctem.isShow = true
 | |
|             }
 | |
|             if (ctem.children.length > 0) {
 | |
|               ctem.children.forEach((stem) => {
 | |
|                 if (stem.name == item.menuKey) {
 | |
|                   stem.isShow = true
 | |
|                 }
 | |
|               })
 | |
|             }
 | |
|           })
 | |
|         })
 | |
|         this.$forceUpdate()
 | |
|       })
 | |
|     },
 | |
|     goGoodList(item) {
 | |
|       uni.navigateTo({
 | |
|         url:
 | |
|           '/pages/specialArea/list?specialArea=' +
 | |
|           item.value +
 | |
|           '&label=' +
 | |
|           item.label +
 | |
|           '&children=' +
 | |
|           JSON.stringify(item.children),
 | |
|       })
 | |
|     },
 | |
|   },
 | |
| }
 | |
| </script>
 | |
| 
 | |
| <style lang="scss" scoped>
 | |
| .content {
 | |
|   background: #f2f2f2;
 | |
|   // padding: 0 20rpx;
 | |
|   min-height: 94vh;
 | |
| }
 | |
| .kuang {
 | |
|   padding-top: 28rpx;
 | |
|   display: flex;
 | |
|   flex-wrap: wrap;
 | |
|   justify-content: space-between;
 | |
| }
 | |
| .kuang_i {
 | |
|   background: #ffffff;
 | |
|   border-radius: 20px;
 | |
|   padding: 46rpx 23rpx;
 | |
|   margin-bottom: 25rpx;
 | |
|   width: 42%;
 | |
|   display: flex;
 | |
|   align-items: center;
 | |
|   justify-content: space-between;
 | |
|   img {
 | |
|     width: 55rpx;
 | |
|     height: 55rpx;
 | |
|   }
 | |
| }
 | |
| 
 | |
| .goods-sort {
 | |
|   padding-bottom: 130rpx;
 | |
|   .goods-flexs {
 | |
|     display: flex;
 | |
|     padding: 30rpx 30rpx 20rpx 35rpx;
 | |
|     position: relative;
 | |
|     flex-wrap: wrap;
 | |
|     margin-left: -25rpx;
 | |
|     .bg-color {
 | |
|       width: 335rpx;
 | |
|       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;
 | |
|     }
 | |
|     .goods-view {
 | |
|       position: relative;
 | |
|       width: 295rpx;
 | |
|       // 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;
 | |
|     }
 | |
|   }
 | |
|   .goods-cen {
 | |
|     display: flex;
 | |
|     margin-top: 20rpx;
 | |
|     justify-content: space-between;
 | |
|   }
 | |
|   .goods-list {
 | |
|     // display: flex;
 | |
|     margin-right: 20rpx;
 | |
|   }
 | |
|   .goods-content {
 | |
|     width: 140rpx;
 | |
|     text-align: center;
 | |
|     .goods {
 | |
|       image {
 | |
|         width: 140rpx;
 | |
|         height: 140rpx;
 | |
|       }
 | |
|     }
 | |
|   }
 | |
|   .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;
 | |
|   }
 | |
| }
 | |
| </style>
 |