hlm_pl_mall_h5/pages/home/activity/Activitydetail.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <home-base :show="!special || !special['activity/detail'+activity_id] || special['activity/detail'+activity_id]['editablePage']['editable_page_theme_config']['if_show_footer']==1" style="position: absolute;top:0;right:0;left:0;bottom:0"><view style="height:100%" class="scroll-view-wrapper div distributor-activity-list">
        <special-index v-show="special && special['activity/detail'+activity_id]" :page-path="'activity/detail'" :item-id="activity_id"></special-index>
        <view class="scroll-view-wrapper scroll-view div" v-show="!special || !special['activity/detail'+activity_id]">
            <view class="scroll-view-wrapper scroll-view div main-content">
                <view class="div common-header-wrap">
                    <view :style="'height:'+navHeight+'px'"></view>
                    <view class="common-header-holder"></view>
                    <view class="common-header-fixed">
                    <title-header />
                    <uni-nav-bar title="活动详情" class="common-header" left-icon="back" @clickLeft="goBack()">
                    </uni-nav-bar>
                </view>
                </view>
                <view class="div brand_detail_banner" v-if="activity">
                    <view class="div wqvue-image img">
                        <image mode="aspectFit" class="img" style="min-width: 1px; width: 100%; height: auto; transform: none; left: 0px; top: 0px; position: relative; vertical-align: top;" :src="activity.activity_banner_mobile_url" />
                    </view>
                    <view class="div brand_detail_info">

                        <view class="div detail_info_other">
                            <text class="span info_other_title">{{activity.activity_title}}</text>
                        </view>
                        <view class="div detail_info_all">
                            {{activity.activity_desc}}
                        </view>
                    </view>
                </view>
                <view class="scroll-view div ping_list" style="position:relative">
                    <scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" class="div row_list" @scrolltolower="loadMore" scroll-y="true">
                        <view class="div" v-if="activitydetail_list">
                            <view @click="goGoodsDetail(item)" class="div item" v-for="item in activitydetail_list" :key="item.goods_id">
                                <view class="div cover bg_stamp">
                                    <view class="div wqvue-image img">
                                        <image mode="aspectFit" class="img" :src="item.goods_image_url" style="border-radius:.4rem;min-width: 1px; width: 100%; height: auto; transform: none; left: 0px; top: 0px; position: relative; vertical-align: top;" />
                                    </view>
                                    <!---->
                                </view>
                                <view class="div info">
                                    <view class="div name">
                                        <view class="div tag_container">
                                        </view>{{item.goods_name}}
                                    </view>
                                    <view class="div tags">
                                        <text class="span span">{{item.store_name}}</text>
                                    </view>
                                    <view class="div price">
                                        <text class="span span">￥<text class="span em">{{parseFloat(item.goods_price)}}</text></text>
                                        <text class="span del" v-if="item.goods_marketprice">￥{{parseFloat(item.goods_marketprice)}}</text>
                                    </view>
                                    <view class="div btn">
                                        去购买
                                    </view>
                                </view>
                            </view>
                        </view>

                    </scroll-view>
                </view>
            </view>
            <empty-record v-if='activitydetail_list && !activitydetail_list.length'></empty-record>
        </view>
    </view></home-base>
</template>
<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import { urlencode } from '@/util/common'
import HomeBase from '../HomeBase'
import { mapState } from 'vuex'
import EmptyRecord from '../../EmptyRecord'
import SpecialIndex from '../special/Index'
import { getActivityDetail } from '../../../api/homeActivity'
export default {

  name:'HomeDocument',
  components:{
    TitleHeader,
    HomeBase,
    EmptyRecord,
    SpecialIndex
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  data(){
    return {
      navHeight: 0,
      activity_id: 0,
      activity: false,
      activitydetail_list: false,
      params: { 'page': 0, 'per_page': 10 },
      loading: false, // 是否加载更多
      isMore: true // 是否有更多
    }
  },

  onLoad: function (option) {
    this.activity_id=option.activity_id
    this.loadMore()
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      special: state => state.home.special
    })
  },
  methods:{
    goBack(){uni.navigateBack({delta:1})},
    loadMore () {
      if (this.loading) {
        return
      }
      this.loading = true
      this.params.page = ++this.params.page
      if (this.isMore) {
        this.getActivityList(true)
      }
    },
    getActivityList () {
      uni.showLoading({ title: '加载中' })
      getActivityDetail(Object.assign({ activity_id: this.activity_id }, this.params)).then(res => {
        this.activity = res.result.activity

        uni.hideLoading()
        if (res.result.hasmore) {
          this.isMore = true
        } else {
          this.isMore = false
        }

        if (this.activitydetail_list) {
          this.activitydetail_list = this.activitydetail_list.concat(res.result.activitydetail_list)
        } else {
          this.activitydetail_list = res.result.activitydetail_list
        }
        this.loading = false
      }).catch(error => {
        uni.hideLoading()
        uni.showToast({icon:'none',title: error.message})
        this.loading = false
      })
    },
    goGoodsDetail (item) {
      uni.navigateTo({ url: '/pages/home/goodsdetail/Goodsdetail'+'?'+urlencode( { 'goods_id': item.goods_id } )})
    }
  }

}
</script>
<style  lang="scss" scoped>
    .scroll-view-wrapper{display: flex;flex-direction: column;}
    .scroll-view{flex:1}
    .main-content{background: #fff}
.common-header-wrap .common-header{
    box-shadow: unset;
}
    .brand_detail_banner {
        position: relative;
        min-height: 11.25rem;
        margin-bottom: .5rem
    }

    .brand_detail_banner .timer {
        position: absolute;
        top: 0;
        left: 0;
        height: 1rem;
        padding: 0 .4rem;
        background: hsla(0,0%,100%,.5);
        border-radius: 0 0 .5rem;
        font-size:$fontSize;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #e43f42;
        line-height: 1rem;
        text-align: center;
        z-index: 2
    }

    .brand_detail_banner .img {
        width: 100%;
        height: 6rem
    }

    .brand_detail_info {
        position: relative;
        background-color: #fff;
        box-shadow: 0 .25rem .75rem 0 rgba(0,0,0,.05);
        border-radius: .4rem;
        width: 17.25rem;
        min-height: 4.75rem;
        margin: -10px auto 0;
        padding: .5rem;
        bottom: 1rem;
        box-sizing: border-box
    }

    .brand_detail_info .detail_info_other {
        text-align: center;
    }

    .brand_detail_info .detail_info_other .info_other_title {
        font-family: PingFang-SC-Bold;
        font-size:$h1;
        color: #333;
        font-weight: 700;
        max-width: 5.75rem;
        overflow: hidden
    }

    .brand_detail_info .detail_info_other .info_other_mark {
        font-family: PingFang-SC-Medium;
        font-size:$fontSize;
        max-width: 4rem;
        overflow: hidden;
        color: #333
    }

    .brand_detail_info .detail_info_all {
        font-family: PingFang-SC-Regular;
        font-size:$fontSize;
        color: #999;
        padding: .5rem .25rem 0
    }

    .ping_list {
        margin-top: .5rem
    }

    .row_list .item {
        position: relative;
        margin: 0 .5rem;
        height: 6.75rem;
        overflow: hidden;
        padding-bottom: .6rem;
        border-bottom: 1px solid #f7f7f7
    }

    .row_list .cover {
        position: absolute;
        top: 0;
        left: 0;
        width: 6.75rem;
        height: 6.75rem
    }

    .row_list .cover .img {
        display: block;
        width: 6.75rem;
        height: 6.75rem;
        border-radius: .25rem 0 0 .25rem
    }

    .row_list .info {
        position: relative;
        margin-left: 7.5rem;
        padding-top: .5rem;
        height: 6.75rem;
        box-sizing: border-box
    }

    .row_list .name {
        margin: 0 0 .3rem;
        color: #333;
        font-family: PingFangSC-Semibold;
        font-size:$subFontSize;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all
    }

    .row_list .tag_container {
        display: inline-block;
        margin-bottom: -2px
    }

    .row_list .sale_icon {
        float: left;
        width: 28px;
        height: 14px;
        margin-right: 3px
    }

    .row_list .ziying_tag {
        float: left;
        width: 24px;
        height: 14px;
        margin-right: 3px
    }

    .row_list .logistics_tag {
        float: left;
        width: 49px;
        height: 14px;
        margin-right: 3px
    }

    .row_list .tags {
        margin-bottom: .2rem;
        height: .7rem;
        white-space: nowrap;
        overflow: hidden;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex
    }

    .row_list .tags,.row_list .tags .span {
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center
    }

    .row_list .tags .span {
        display: -webkit-inline-box;
        display: -webkit-inline-flex;
        display: inline-flex;
        padding: 0 .3rem;
        font-family: PingFangSC-Regular;
        font-size:$h6;
        color: #f43638;
        border: 1px solid #ffcccd;
        border-radius: 4px;
        box-sizing: border-box;
        height: .6rem
    }

    .row_list .tags .span:not(:last-child) {
        margin-right: .25rem
    }

    .row_list .tags .span_android {
        line-height: normal;
        padding: .05rem .3rem
    }

    .row_list .price {
        position: absolute;
        bottom: .45rem;
        left: 0;
        color: #ff4142;
        font-size:$fontSize;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        height: 1.1rem;
        overflow: hidden
    }

    .row_list .price .fxprice {
        margin-left: .25rem
    }

    .row_list .price .span {
        height: 1.1rem;
        line-height: 1.1rem;
        margin-right: .25rem;
        font-size:$subFontSize;
        font-family: JDZH-Regular
    }

    .row_list .price .span .em {
        font-size: 1.1rem
    }

    .row_list .price .span .normal {
        font-size:$subFontSize
    }

    .row_list .price .del {
        color: #999;
        text-decoration: line-through
    }

    .row_list .desc {
        position: absolute;
        bottom: .6rem;
        left: 0;
        color: #999;
        font-size:$fontSize
    }

    .row_list .desc .del {
        text-decoration: line-through
    }

    .row_list .btn {
        position: absolute;
        bottom: .45rem;
        right: .5rem;
        width: 3.25rem;
        height: 1.5rem;
        line-height: 1.5rem;
        color: #fff;
        font-size:$subFontSize;
        text-align: center;
        border-radius: .25rem;
        background:$primaryGradualColor;
        box-shadow: 0 .15rem .3rem $subColor
    }

    .row_list+.ping_floortit {
        margin-top: -.75rem
    }

</style>