|
|
@@ -1,34 +1,39 @@
|
|
|
<template>
|
|
|
- <view class="section_page_main clearfix">
|
|
|
- <view class="recommend-list" :style="hasLessImage?'height:105px':''" >
|
|
|
- <swiper
|
|
|
- class="tui-banner-swiper"
|
|
|
- :autoplay="true"
|
|
|
- :interval="5000"
|
|
|
- :duration="500"
|
|
|
- :circular="true"
|
|
|
- @change="swiperChange"
|
|
|
- :style="hasLessImage?'height:105px':''"
|
|
|
- >
|
|
|
- <swiper-item class="clearfix" v-for="(list,index1) in productList" :key="index1">
|
|
|
- <view class="img-box" v-for="(product,index2) in list" :key="index2" @click="navigaitionTo(product)">
|
|
|
- <image :src="product.appletsImage" ></image>
|
|
|
+ <view class="section_page_main clearfix">
|
|
|
+ <view class="recommend-list" :style="hasLessImage ? 'height:105px' : ''">
|
|
|
+ <swiper
|
|
|
+ class="tui-banner-swiper"
|
|
|
+ :autoplay="true"
|
|
|
+ :interval="5000"
|
|
|
+ :duration="500"
|
|
|
+ :circular="true"
|
|
|
+ @change="swiperChange"
|
|
|
+ :style="hasLessImage ? 'height:105px' : ''"
|
|
|
+ :display-multiple-items="2"
|
|
|
+ >
|
|
|
+ <swiper-item class="clearfix" v-for="(list, index1) in productList" :key="index1">
|
|
|
+ <view
|
|
|
+ class="img-box"
|
|
|
+ v-for="(product, index2) in list"
|
|
|
+ :key="index2"
|
|
|
+ @click="navigaitionTo(product)"
|
|
|
+ >
|
|
|
+ <image :src="product.appletsImage"></image>
|
|
|
<view class="cm-cover" v-if="pageData.floorContent.templateClassify === 4"></view>
|
|
|
- </view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- <view class="swiper__recommenddots-box" v-if="productList.length > 1">
|
|
|
- <view
|
|
|
- v-for="(item, idx) in productList"
|
|
|
- :key="idx"
|
|
|
- :class="[idx === swiperCurrent ? 'swiper__dots-long' : 'none']"
|
|
|
- :data-index="swiperCurrent"
|
|
|
- class="swiper__dots-item"
|
|
|
- >
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <view class="swiper__recommenddots-box" v-if="productList.length > 1">
|
|
|
+ <view
|
|
|
+ v-for="(item, idx) in productList"
|
|
|
+ :key="idx"
|
|
|
+ :class="[idx === swiperCurrent ? 'swiper__dots-long' : 'none']"
|
|
|
+ :data-index="swiperCurrent"
|
|
|
+ class="swiper__dots-item"
|
|
|
+ ></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -36,107 +41,106 @@ import { mapState, mapMutations } from 'vuex'
|
|
|
import uniGrader from '@/components/uni-grade/uni-grade.vue'
|
|
|
import caimeiApi from '@/common/config/caimeiApi.js'
|
|
|
export default {
|
|
|
- name: 'templateH',
|
|
|
- components: {
|
|
|
- uniGrader
|
|
|
- },
|
|
|
- props: {
|
|
|
- pageData: {
|
|
|
- type: Object
|
|
|
- },
|
|
|
- userIdentity: {
|
|
|
- type: Number
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- productList: [],
|
|
|
- swiperCurrent: 0,
|
|
|
- pageSize: 4
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.initData(this.pageData)
|
|
|
- },
|
|
|
- computed:{
|
|
|
- hasLessImage(){
|
|
|
- return this.imageCount <= 2
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- pageData: {
|
|
|
- handler: function(el) {
|
|
|
- //监听对象的变换使用 function，箭头函数容易出现this指向不正确
|
|
|
- this.pageData = el
|
|
|
- this.initData(this.pageData)
|
|
|
- },
|
|
|
- deep: true
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- initData(data) {
|
|
|
- this.imageCount = data.floorImageList.length
|
|
|
- while(data.floorImageList.length > 0){
|
|
|
- this.productList.push(data.floorImageList.splice(0,this.pageSize))
|
|
|
- }
|
|
|
- },
|
|
|
- swiperChange(e) {
|
|
|
- //轮播切换
|
|
|
- const index = e.detail.current
|
|
|
- this.swiperCurrent = index
|
|
|
- },
|
|
|
- navigaitionTo(item){
|
|
|
- if (item.adsImage === '' && item.linkType === -1) {
|
|
|
- return
|
|
|
- }else if(item.linkType === -1){
|
|
|
- uni.navigateTo({
|
|
|
- url:`/pages/h5/activity/activity-detail?adsImage=${item.adsImage}&title=${item.name}`
|
|
|
- })
|
|
|
- }else{
|
|
|
- caimeiApi.FlooryNavigateTo(item)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ name: 'templateH',
|
|
|
+ components: {
|
|
|
+ uniGrader
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ pageData: {
|
|
|
+ type: Object
|
|
|
+ },
|
|
|
+ userIdentity: {
|
|
|
+ type: Number
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ productList: [],
|
|
|
+ swiperCurrent: 0,
|
|
|
+ pageSize: 2
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.initData(this.pageData)
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ hasLessImage() {
|
|
|
+ return this.imageCount <= 2
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ pageData: {
|
|
|
+ handler: function(el) {
|
|
|
+ //监听对象的变换使用 function，箭头函数容易出现this指向不正确
|
|
|
+ this.pageData = el
|
|
|
+ this.initData(this.pageData)
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initData(data) {
|
|
|
+ this.imageCount = data.floorImageList.length
|
|
|
+ while (data.floorImageList.length > 0) {
|
|
|
+ this.productList.push(data.floorImageList.splice(0, this.pageSize))
|
|
|
+ }
|
|
|
+ },
|
|
|
+ swiperChange(e) {
|
|
|
+ //轮播切换
|
|
|
+ const index = e.detail.current
|
|
|
+ this.swiperCurrent = index
|
|
|
+ },
|
|
|
+ navigaitionTo(item) {
|
|
|
+ if (item.adsImage === '' && item.linkType === -1) {
|
|
|
+ return
|
|
|
+ } else if (item.linkType === -1) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/h5/activity/activity-detail?adsImage=${item.adsImage}&title=${item.name}`
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ caimeiApi.FlooryNavigateTo(item)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.section_page_main {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- box-sizing: border-box;
|
|
|
- .recommend-list {
|
|
|
- width: 100%;
|
|
|
- height: 500rpx;
|
|
|
- position: relative;
|
|
|
- padding-bottom: 20rpx;
|
|
|
- .tui-banner-swiper {
|
|
|
- width: 100%;
|
|
|
- margin: 0 auto;
|
|
|
- background: #f7f7f7;
|
|
|
- height: 445rpx;
|
|
|
- overflow: hidden;
|
|
|
- transform: translateY(0);
|
|
|
- .img-box {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .recommend-list {
|
|
|
+ width: 100%;
|
|
|
+ height: 500rpx;
|
|
|
+ position: relative;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ .tui-banner-swiper {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: #f7f7f7;
|
|
|
+ height: 445rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ transform: translateY(0);
|
|
|
+ .img-box {
|
|
|
position: relative;
|
|
|
- width: 339rpx;
|
|
|
- height: 210rpx;
|
|
|
- float: left;
|
|
|
- margin: 24rpx 24rpx 0 0;
|
|
|
- overflow: hidden;
|
|
|
- border-radius: 16rpx;
|
|
|
- image {
|
|
|
- width: 339rpx;
|
|
|
- height: 210rpx;
|
|
|
- }
|
|
|
- &:nth-child(2n) {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- &:nth-child(1),
|
|
|
- &:nth-child(2) {
|
|
|
- margin-top: 0;
|
|
|
- }
|
|
|
- .cm-cover{
|
|
|
+ width: 339rpx;
|
|
|
+ height: 210rpx;
|
|
|
+ float: left;
|
|
|
+ margin: 24rpx 24rpx 0 0;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ image {
|
|
|
+ width: 339rpx;
|
|
|
+ height: 210rpx;
|
|
|
+ }
|
|
|
+ &:nth-child(2n) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ &:nth-child(1) {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ .cm-cover {
|
|
|
z-index: 99;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
@@ -146,36 +150,36 @@ export default {
|
|
|
background: url(https://static.caimei365.com/app/img/icon2/cm_player.png) no-repeat center;
|
|
|
background-size: 40rpx 40rpx;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .swiper__recommenddots-box {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- /* #ifndef APP-NVUE */
|
|
|
- display: flex;
|
|
|
- /* #endif */
|
|
|
- flex: 1;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- height: 60rpx;
|
|
|
- .swiper__dots-item {
|
|
|
- width: 8rpx;
|
|
|
- height: 8rpx;
|
|
|
- border-radius: 100%;
|
|
|
- margin-left: 6px;
|
|
|
- background-color: rgba(225, 86, 22, 0.3);
|
|
|
- }
|
|
|
- .swiper__dots-long {
|
|
|
- width: 32rpx;
|
|
|
- height: 8rpx;
|
|
|
- border-radius: 4rpx;
|
|
|
- background-color: #e15616;
|
|
|
- transition: all 0.4s;
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper__recommenddots-box {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ /* #ifndef APP-NVUE */
|
|
|
+ display: flex;
|
|
|
+ /* #endif */
|
|
|
+ flex: 1;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 60rpx;
|
|
|
+ .swiper__dots-item {
|
|
|
+ width: 8rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ border-radius: 100%;
|
|
|
+ margin-left: 6px;
|
|
|
+ background-color: rgba(225, 86, 22, 0.3);
|
|
|
+ }
|
|
|
+ .swiper__dots-long {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ background-color: #e15616;
|
|
|
+ transition: all 0.4s;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
