hlm_pl_mall_h5/pages/home/goodsdetail/child/AccessoryItem.vue

<!-- with.vue -->
<template>
	<view class="div ui-recommend-wrapper" v-if="bundling_array">
		<view class="div wrapper-swipe">
			<swiper
					v-bind:style="getWrapperStyle"
					:autoplay="false"
					@change="handleChange"
					:current="currentIndex"
					:indicator-dots="false"
			>
				<swiper-item v-for="(item, index) in bundling_array" :key="index">
					<view class="div image-swipe-wrapper">
						<view class="div"
								v-for="(image, j) in b_goods_array[index]"
                :key="j"
								:style="index%3==0?'margin-right:0':''"
								@click="goDetail(image.id)"
						>
							<image mode="aspectFit" class="img"
									:src="image.image"
									v-bind:style="getItemStyle"
							/>

							<text class="span">￥{{ image.price }}</text>
						</view>
					</view>
					<view class="div ui-recommend-all" v-on:click="goRecommend(index)">购买组合</view>
				</swiper-item>
			</swiper>
		</view>

	</view>
</template>

<script>
import { urlencode } from '@/util/common'
import { productAccessoryList } from '../../../../api/homegoodsdetail'
import { cartAdd } from '../../../../api/homecart'
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      bundling_array: null,
      b_goods_array: null,
      indicatorArray: [],
      currentIndex: 0
    }
  },

  created () {
    this.getRecommendList()
  },

  computed: {
    ...mapState({
      currentProductId: state => state.goodsdetail.currentProductId
    }),

    getWrapperStyle: function () {
      const res = uni.getSystemInfoSync()
      var width = res.windowWidth
      var height = res.windowHeight
      let itemWidth = width - 24
      let itemHeight = (width - 48) / 3 +80
      return "width:"+itemWidth +"px;height:"+itemHeight +"px"
    },
    getItemStyle: function () {
      const res = uni.getSystemInfoSync()
      var width = res.windowWidth
      var height = res.windowHeight
      let itemWidth = (width - 48) / 3
      let itemHeight = itemWidth
      return "width:"+itemWidth +"px;height:"+itemHeight +"px"
    }
    // CODE REVIEW: 代码格式
  },

  methods: {
    /*
                        getRecommendList: 获取推荐商品
                    */
    getRecommendList () {
      let params = {
        product: this.currentProductId ? this.currentProductId : '',
        page: 1,
        per_page: 10
      }
      productAccessoryList(params.product).then(
        res => {
          if (res) {
            this.bundling_array = res.result.bundling_array
            this.b_goods_array = res.result.b_goods_array
          }
        }
      )
    },

    /*
                        buildList：构建促销展示商品的数据
                        @params： res 接口数据返回的促销商品
                    */
    buildList (res) {
      let index = Math.ceil(res.length / 3)
      let newArray = []
      if (index) {
        for (let i = 0; i <= index - 1; i++) {
          let subArray = []
          subArray.push(res.slice(i * 3, i * 3 + 3))
          newArray.push(subArray)
        }
      }
      return newArray
    },

    /*
                        buildSwipeIndicators: 根据轮播图的长度计算位于底部的按钮的个数
                    */
    buildSwipeIndicators () {
      let photos = this.list
      for (let i = 0, len = photos.length - 1; i <= len; i++) {
        photos[i].index = i
        this.indicatorArray.push(photos[i])
      }
    },

    /*
                        handleChange: 查看大图的时候滑动大图设置位于底部的按钮的选中状态同时隐藏查看大图的头部信息
                        @params: index 当前滑动的图片的index
                     */
    handleChange (e) {
      this.currentIndex = e.detail.current
    },

    /*
            goRecommend: 跳转到相关商品页面
            */
    goRecommend (id) {
      cartAdd(0, 0, id).then(
        res => {
          uni.navigateTo({ url: '/pages/member/cart/Cart' })
        },
        error => {
          uni.showToast({icon:'none',title: error.message})
        }
      )
    },

    goDetail (id) {
      let data = Object.assign({}, { id: id })
      uni.navigateTo({ url: '/pages/home/goodsdetail/Goodsdetail'+'?'+urlencode( { goods_id: id } )})
    }
  }
}
</script>

<style lang="scss" scoped>
	.ui-recommend-wrapper {
		background: #ffffff;
		margin-bottom:$pageSpace;
		.wrapper-swipe {
			padding:0.75rem $pageSpace;
			padding-right:0;
			.mint-swipe {
				height:5rem;
				.mint-swipe-items-wrap {
					.mint-swipe-item {
					}
				}
			}
		}

		.swiper-indicators {
			position: relative;
			margin-top:1rem;
			bottom: 0;
		}

		.ui-recommend-all {
			height:1.5rem;
			line-height:1.5rem;
			text-align: center;
			background: #ffffff;
			font-size:$subFontSize;
			color:$primaryColor;
			border:1px solid $primaryColor;
			border-radius:1.5rem;
			width: 6rem;
			margin:0 auto;
		}

		.div.image-swipe-wrapper {
			overflow:hidden;
			justify-content: space-between;
			align-content: center;
			align-items: center;
			white-space: nowrap;
			.div {
				display:inline-block;
				position: relative;
				margin-right:$pageSpace;
				box-shadow: 0px 4px 4px #f7f7f7;
				margin-bottom:.5rem;
				.img {
					padding: 0;
					margin: 0;
				}
				.span {
					left:0;
					bottom: 0;
					width: 100%;
					display: block;
					text-align: center;
					border-radius:0.4rem;
					height:1.2rem;
					line-height:1.2rem;
					font-size:$subFontSize;
					color: $primaryColor;
				}
			}
		}
	}
</style>