hlm_pl_mall_h5/pages/home/pointsgoods/Index.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
<home-base :show="true"><view class="div main-content">
    <index-header></index-header>
    <view class="div body-wrap no-login">
        <!---->
        <view class="div point-exchange-wrap" v-if="mallvoucherList.length">
            <view class="div type-wrap">
                <view class="div content">
                    <view class="div text-content type-name">
                        <text class="span">积分换平台代金券</text>
                    </view>
                    <view class="div view-content"></view>
                    <view class="div text-content type-sub">
                        <text class="span">代金券在手，省钱有道</text>
                    </view>
                </view>
                <view class="div type-sub" @click="goMallVoucher()">更多<text class="span iconfont type-sub">&#xe650;</text></view>
            </view>
            <view class="div list-wrap">
                <index-mall-voucher-item class="list-wrap-item" v-for="(item,index) in mallvoucherList" :item="item" :key="index"></index-mall-voucher-item>
            </view>
        </view>
        <view class="div point-exchange-wrap" v-if="voucherList.length">
            <view class="div type-wrap">
                <view class="div content">
                    <view class="div text-content type-name">
                        <text class="span">积分换店铺代金券</text>
                    </view>
                    <view class="div view-content"></view>
                    <view class="div text-content type-sub">
                        <text class="span">代金券在手，省钱有道</text>
                    </view>
                </view>
                <view class="div type-sub" @click="goVoucher()">更多<text class="span iconfont type-sub">&#xe650;</text></view>
            </view>
            <view class="div list-wrap">
                <index-voucher-item class="list-wrap-item" v-for="(item,index) in voucherList" :item="item" :key="index"></index-voucher-item>
            </view>
        </view>
        <view class="div point-exchange-wrap" v-if="goodsList.length">
            <view class="div type-wrap">
                <view class="div content">
                    <view class="div text-content type-name">
                        <text class="span">积分换好物</text>
                    </view>
                    <view class="div view-content"></view>
                    <view class="div text-content type-sub">
                        <text class="span">积累积分，兑换好物</text>
                    </view>
                </view>
                <view class="div type-sub" @click="goProd()">更多<text class="span iconfont type-sub">&#xe650;</text></view>
            </view>
            <view class="div list-wrap">
                <view class="div goods-list double-column">
                    <index-prod-item class="goods-item" v-for="(item,index) in goodsList" :item="item" :key="index"></index-prod-item>
                </view>
            </view>
        </view>
        <empty-record  v-if="voucherList.length==0 && goodsList.length == 0 && mallvoucherList.length == 0"></empty-record>
    </view>

</view></home-base>
</template>

<script>
import {getFontSize} from '@/util/common'
    import HomeBase from '../HomeBase'
    import EmptyRecord from '../../EmptyRecord'
import IndexHeader from './IndexHeader'
import IndexProdItem from './IndexProdItem'
import IndexVoucherItem from './IndexVoucherItem'
import IndexMallVoucherItem from './IndexMallVoucherItem'
import { getPointshop } from '../../../api/homePointsgoods'
export default {
  name: 'index',
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
      goodsList: [],
      voucherList: [],
      mallvoucherList: []
    }
  },
  components:{
      HomeBase,
      EmptyRecord,
    IndexHeader,
    IndexProdItem,
    IndexVoucherItem,
    IndexMallVoucherItem
  },
  created: function () {
    getPointshop().then(res => {
        let mall_voucher=res.result.mall_voucher
        if(mall_voucher){
            this.mallvoucherList=mall_voucher
        }
        let recommend_voucher=res.result.recommend_voucher
        if(recommend_voucher){
            this.voucherList=recommend_voucher
        }
        let recommend_pointsprod=res.result.recommend_pointsprod
        if(recommend_pointsprod){
            this.goodsList=recommend_pointsprod
        }
    })
  },
  methods: {
    goMallVoucher () {
      uni.navigateTo({url:'/pages/home/pointsgoods/PointMallVoucher'})
    },
    goVoucher () {
      uni.navigateTo({url:'/pages/home/pointsgoods/PointVoucher'})
    },
    goProd () {
      uni.navigateTo({url:'/pages/home/pointsgoods/PointProd'})
    }
  }
}
</script>

<style scoped lang="scss">
    .font-size-activity-tag {font-size:$h6!important;}
    .color-tip { color: #909399!important; }
    .color-base-text {color: #ff4544!important;}
    .goods-list.double-column {display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;margin-top: 10px}
    .goods-list.double-column .goods-item{-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;-webkit-flex-basis: 48%;flex-basis: 48%;max-width: calc((100% - 15px) / 2);margin-right:15px;margin-bottom: 10px}
    .goods-list.double-column .goods-item:nth-child(2n) {margin-right: 0}

    .img-content >img{width: 100%;height: 100%;}
    .tips-layer .head {position: relative;}
    .tips-layer .title {height: 40px;line-height: 40px;text-align: center;font-size:$h2;font-weight: 700;}
    .tips-layer .iconclose{position: absolute;top: 4px;right: 22px;font-size:$h2;font-weight: 500;}
    .tips-layer .body .detail {padding: 10px;}
    .tips-layer .body .detail .font-size-base {margin-bottom: 5px;}
    .main-content{font-size:$subFontSize;line-height: 1.8;}
    .font-size-tag {font-size:$fontSize!important;}
    .color-base-bg {background-color: #ff4544!important;}
    .body-wrap {margin-top: 25px}
    .body-wrap.no-login {margin-top: 10px}
    .body-wrap .point-exchange-wrap {padding: 0 15px;margin-top: 15px}
    .body-wrap .type-wrap {display: flex;align-items: center}
    .body-wrap .type-wrap .type-name {font-size:$h2;color: #303133;line-height: 1}
    .body-wrap .type-wrap .view-content {width: 1px;height: 11px;background-color: #909399;margin: 0 10px}
    .body-wrap .type-wrap .type-sub {font-size:$fontSize;color: #909399;line-height: 1}
    .body-wrap .type-wrap .content{flex:1;display: flex;align-items: center}
    .body-wrap .list-wrap {width: 100%}
    .body-wrap .list-wrap .list-wrap-item {display: inline-block;margin-top: 10px;width:50%;}
    .body-wrap .list-wrap .list-wrap-item:nth-child(2n+2) {text-align: right}
</style>