hlm_pl_mall_h5/pages/home/goodsdetail/GoodsConsult.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
<home-base :show="false"><view style="position: absolute;top:0;right:0;left:0;bottom:0" class="scroll-view-wrapper div container">
    <view class="div common-header-wrap">
        <view class="status-holder"></view>
        <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 consult-form">
        <view class="div" @click="showPopup('typeVisible')">
            <flex-line :is-link="true" :show-border="true"><text class="span line-name">咨询类型</text><text class="span" slot="right">{{type_name}}</text></flex-line>
        </view>
        <flex-line class="field-line" :show-border="true"><text class="span field-name">咨询内容</text><view class="div field-line-right" slot="right"><input class="field-input" type="textarea" v-model="content" /></view></flex-line>
        <!-- <flex-line v-if="config.captcha_status_goodsqa" class="field-line" :show-border="true"><text class="span field-name">验证码</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="pictureCode" /><image mode="aspectFit" @click="changePictureCode" :src="pictureCodeUrl" class="img countdown" ></view></flex-line> -->
        <view class="div pt-10 pb-10"><view class="div common-btn ds-button-large" @click="submit">保存</view></view>
    </view>
    <uni-popup background-color="#fff" ref="typeVisible" type="right" >
        <view :style="'width:'+screenWidth+'px'" class="common-popup-wrapper">
        <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="hidePopup('typeVisible')">
            </uni-nav-bar>
        </view>
        </view>
        <view class="div common-popup-content">
			<scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" scroll-y="true">
            <radio-group class="radio-wrapper" @change="radioChange">
              <view class="radio-item" v-for="(item, index) in type_options" :key="index">
                <radio :value="item.value" :checked="type_id==item.value" />
                <text>{{item.label}}</text>
              </view>
            </radio-group>
			</scroll-view>
        </view>
    </view>
    </uni-popup>
    <view class="scroll-view div" style="position:relative">
    <scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" class="div" @scrolltolower="loadMore" scroll-y="true">
        <view class="div consult-list"  v-if="consult_list && consult_list.length">
            <view class="div consult-item"  v-for="(item, index) in consult_list" :key="index">
                <view class="div consult-info">

                    <view class="div p-info">
                        <view class="div explain">{{consultType[item.consulttype_id].consulttype_name}}<text class="span right">{{ $moment.unix(item.consult_addtime).format('YYYY年MM月DD日') }}</text></view>
                        <view class="div name">{{item.consult_content}}</view>
                        <view class="div replay" v-if="item.consult_reply">{{item.consult_reply}}</view>
                    </view>
                </view>
            </view>
        </view>
        <empty-record v-else-if="consult_list && !consult_list.length"></empty-record>
    </scroll-view>
    </view>
</view></home-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import HomeBase from '../HomeBase'
import { mapState, mapMutations, mapActions } from 'vuex'
import EmptyRecord from '../../EmptyRecord'
import { getGoodsConsult, addGoodsConsult } from '../../../api/homegoodsdetail'
import { checkPictureCaptcha } from '../../../api/common'
import flexLine from '../../flexLine'
import { env } from '../../../static/config'
export default {
  name:'HomeGoodsConsult',
  data(){
    return {
      navHeight: 0,
      screenWidth:0,
      goods_id: 0,
      pictureCode: '',
      pictureCodeUrl: '',
      content: '',
      type_name: '',
      type_id: '',
      type_options: [],

      params: { 'page': 0, 'per_page': 10 },
      consult_list: false,
      pictureCodeValid: false,
      loading: false, // 是否加载更多
      isMore: true // 是否有更多
    }
  },
  components:{
    TitleHeader,
    HomeBase,
    flexLine,
    EmptyRecord
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      token: state => state.member.token,
      consultType: state => state.goodsdetail.consultType,
      config: state => state.config.config
    })
  },
  mounted(){
      // #ifdef  MP-WEIXIN
      this.navHeight = uni.getMenuButtonBoundingClientRect().top
      // #endif
      this.screenWidth=uni.getSystemInfoSync().screenWidth
    // this.changePictureCode()
  },
  onLoad: function (option) {
    this.goods_id=option.goods_id
    this.fetchConfig()
    if (!this.goods_id) {
      uni.showToast({icon:'none',title: '参数错误'})
      uni.navigateBack({delta:1})
    }
    let temp = this.consultType
    for (var i in temp) {
      if (!this.type_id) {
        this.type_id = temp[i].consulttype_id + ''
      }
      this.type_options.push({
        label: temp[i].consulttype_name,
        value: temp[i].consulttype_id + ''
      })
    }
    this.loadMore()
  },
  watch: {
    pictureCode: function (val) {
      if (val.length >= 4) {
        this.pictureCodeWait = true
        checkPictureCaptcha(val).then(
          response => {
            this.pictureCodeWait = false
            this.pictureCodeValid = true
          },
          error => {
            this.pictureCodeWait = false
            uni.showToast({icon:'none',title: error.message})
          }
        )
      }
    },
    type_id: function (type_id) {
      this.type_name = this.consultType[type_id].consulttype_name
      this.hidePopup('typeVisible')
    }

  },
  methods:{
    radioChange(e){
      this.type_id=e.detail.value
    },
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack(){uni.navigateBack({delta:1})},
    ...mapActions({
      fetchConfig: 'fetchConfig'
    }),
    submit () {
      if (!this.content) {
        uni.showToast({icon:'none',title: '请先输入咨询内容'})
        return
      }

      addGoodsConsult(this.goods_id, this.type_id, this.content, this.token).then(res => {
        uni.showToast({icon:'none',title: res.message})
        this.content = ''
        this.pictureCode = ''
        this.params = { 'page': 0, 'per_page': 10 }
        this.consult_list = false
        this.loading = false
        this.isMore = true
        this.loadMore()
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    changePictureCode () {
      this.pictureCodeUrl = env.API_HOST + '/Seccode/makecode?r=' + Math.random()
    },
    loadMore () {
      this.loading = true
      this.params.page = ++this.params.page
      if (this.isMore) {
        this.loading = false
        this.getConsultList(true)
      }
    },
    getConsultList () {
      uni.showLoading({ title: '加载中' })

      getGoodsConsult(this.params, this.goods_id).then(res => {
        uni.hideLoading()
        if (res.result.hasmore) {
          this.isMore = true
        } else {
          this.isMore = false
        }

        let temp = res.result.consult_list
        if (temp) {
          if (!this.consult_list) {
            this.consult_list = temp
          } else {
            this.consult_list = this.consult_list.concat(temp)
          }
        }
      }).catch(function (error) {
        uni.hideLoading()
        uni.showToast({icon:'none',title: error.message})
      })
    }
  }

}
</script>

<style scoped lang="scss">
    .scroll-view-wrapper{display: flex;flex-direction: column;}
    .scroll-view{flex:1}
    .consult-form{background: #fff;padding:0 $pageSpace;box-shadow: 0px 4px 4px #f7f7f7;}
    .consult-list{background: #fff;padding:0 $pageSpace;}
    .consult-item{background:#fff;border-bottom:1px dashed #eee;}
    .consult-info{padding:.5rem 0;display: flex}
    .consult-info .p-info{flex:1;}
    .consult-info .p-info .name{font-size:$subFontSize;color:$primaryColor;}
    .consult-info .p-info .explain{font-size:$subFontSize;margin-bottom:.5rem}
    .consult-info .p-info .explain .right{float:right;color:gray}
    .consult-info .p-info .replay{font-size:$subFontSize;padding-top:.5rem;color:$descTextColor}
    .countdown{width: auto;height: 1.75rem;min-width: 4rem;}
    .radio-wrapper{
		display: block;
		padding: 0 $pageSpace;
		.radio-item{
			padding:.5rem 0;
			border-bottom: 1px dashed #f5f5f5;
		}
    }
</style>