hlm_pl_mall_store/pages/seller/inviter/GoodsForm.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <seller-base :show="false" class="scroll-view-wrapper">
    <view class="scroll-view-wrapper scroll-view div container">
        <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="getTitle" class="common-header" left-icon="back" @clickLeft="goBack()">
                <view class="div common-btn btn" slot="right"  @click="onDelete" v-if="!isAddMode">删除</view>
            </uni-nav-bar>
        </view>
        </view>
        <view class="div main-content">
        <view class="div" v-if="isAddMode">
            <view class="div" @click="showPopup('popupSelect')">
            <flex-line :is-link="true" :show-border="true"><text class="span line-name">{{getSelecedTitle}}</text></flex-line>
            </view>
            <uni-popup background-color="#fff" ref="popupSelect" 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('popupSelect')">
                    </uni-nav-bar>
                </view>
                </view>
                <view class="scroll-view-wrapper scroll-view div common-popup-content">
                <scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" class="scroll-view div" @scrolltolower="loadMore" scroll-y="true">
                <view class="div select-goods" v-if="selectGoodsList">
                    <view class="ul" v-if="selectGoodsList.length">
                        <view class="li" v-for="item in selectGoodsList" v-bind:key="item.goods_commonid" @click="selectedGoods(item)">
                            <view class="div p-img">
                                <image mode="aspectFit" class="img" :src="item.goods_image"/>
                            </view>
                            <view class="div p-info">
                                <view class="p name">{{item.goods_name}}</view>
                                <view class="p price">{{item.goods_price}}</view>
                            </view>
                        </view>
                    </view>
                    <empty-record v-else></empty-record>
                </view>
                </scroll-view>
                </view>
            </view>
            </uni-popup>
        </view>
        <view class="div" v-else>
            <flex-line :show-border="true"><text class="span line-name">{{getSelecedTitle}}</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" v-model="goods.inviter_ratio" /></view></flex-line>
        <view class="div pt-10 pb-10"><view class="div common-btn ds-button-large" @click="submit">提交</view></view>
        </view>
    </view>
<uni-popup background-color="#fff" ref="confirm" type="dialog">
    <uni-popup-dialog :mode="dialog.mode" :title="dialog.title" :content="dialog.content" :placeholder="dialog.content" @confirm="confirmDialog" @close="closeDialog"></uni-popup-dialog>
</uni-popup>
</seller-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import SellerBase from '../SellerBase'

import { searchGoodsList, addInviterGoods, editInviterGoods, getInviterGoodsInfo, delInviterGoods } from '../../../api/sellerInviter'
import EmptyRecord from '../../EmptyRecord'
import flexLine from '../../flexLine'
export default {
  name: 'GoodsForm',
  data(){
    return {
      navHeight: 0,
      dialog:{},
      screenWidth:0,
	  action:'',
      params: { 'page': 0, 'per_page': 10 },
        loading: false, // 是否加载更多
        isMore: true, // 是否有更多
      // 商品列表用于选择商品设置分拥比例
      selectGoodsList: false,
      // 关键词
      selectGoodsName: '',
      goods: {
        'goods_commonid': 0,
        'goods_name': '',
        'inviter_ratio': '',
      }
    }
  },
  onLoad: function (option) {
	this.action = option.action
    if (!this.isAddMode) {
      this.goods.goods_commonid = option.goods_commonid
      getInviterGoodsInfo(this.goods.goods_commonid).then(res => {
        this.goods = res.result.info
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }
	this.loadMore()
  },
  components:{
    TitleHeader,
    SellerBase,
    flexLine,
    EmptyRecord
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    isAddMode () {
      let mode = this.action
      if (mode === 'add') {
        return true
      } else {
        return false
      }
    },
    getTitle () {
      if (this.isAddMode) {
        return '新增分销商品'
      } else {
        return '修改分销商品'
      }
    },
    getSelecedTitle () {
      if (this.goods.goods_commonid) {
        return this.goods.goods_name
      } else {
        return '选择商品'
      }
    }
  },
  mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().height
    // #endif
    this.screenWidth=uni.getSystemInfoSync().screenWidth
  },
  methods:{
    closeDialog(){
    },
    confirmDialog(value){
        delInviterGoods(this.goods.goods_commonid).then(
          (response) => {
            uni.navigateTo({url:'/pages/seller/inviter/GoodsList'})
          }, (error) => {
            uni.showToast({icon:'none',title: error.message})
          })
    },
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack(){uni.navigateBack({delta:1})},
    onDelete () {
      this.dialog={content:'确定要取消该商品佣金设置吗？'}
      this.$refs.confirm.open()
    },
    loadMore () {
          this.loading = true
          this.params.page = ++this.params.page
          if (this.isMore) {
              this.loading = false
              this.getSelectGoodsList(true)
          }
      },
      reload () {
          // 重新加载数据
          this.params.page = 0
          this.isMore = true
          this.selectGoodsList = []
          this.loadMore()
      },
    submit () {
      if (this.isAddMode) {
        uni.showLoading({ title: '加载中' })
        addInviterGoods(this.goods).then(
          (response) => {
            uni.hideLoading()
			uni.showToast({icon:'none',title: response.message})
            uni.navigateTo({url:'/pages/seller/inviter/GoodsList'})
          }, (error) => {
            uni.hideLoading()
            uni.showToast({icon:'none',title: error.message})
          })
      } else {
        uni.showLoading({ title: '加载中' })
        editInviterGoods(this.goods).then(
          (response) => {
            uni.hideLoading()
            uni.showToast({icon:'none',title: response.message})
            uni.navigateTo({url:'/pages/seller/inviter/GoodsList'})
          }, (error) => {
            uni.hideLoading()
            uni.showToast({icon:'none',title: error.message})
          })
      }
    },
    // 获取商品列表 用于设置产品分佣
    getSelectGoodsList () {
      searchGoodsList(this.selectGoodsName,this.params).then(res => {
        if (this.selectGoodsList) {
              this.selectGoodsList = this.selectGoodsList.concat(res.result.goods_list)
          } else {
              this.selectGoodsList = res.result.goods_list
          }
        if (res.result.hasmore) {
          this.isMore = true
        } else {
          this.isMore = false
        }
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    // 选择商品
    selectedGoods (item) {
      this.goods.goods_name = item.goods_name
      this.goods.goods_commonid = item.goods_commonid
      // Close
	  this.hidePopup('popupSelect')
    }
  }
}
</script>

<style scoped  lang="scss">
.scroll-view-wrapper{display: flex;flex-direction: column;}
.scroll-view{flex:1}
.common-header{
        .btn{background: #000;color: #fff;box-shadow: 0px 2px 4px #d2d2d2;}
    }
.main-content{background: #fff;padding:0 $pageSpace}
.select-goods .li{height:3rem;padding:.6rem;display:flex;}
.select-goods .li .p-img{}
.select-goods .li .p-img .img{width:3rem;height: 3rem;}
.select-goods .li .p-info{margin-left:1rem;}
.select-goods .li .p-info .p{line-height:1rem;}
.select-goods .li .p-info .price{font-size:$fontSize;color:$primaryColor;height:2rem;overflow: hidden}
.select-goods .li .p-info .name{font-size:$subFontSize;}

</style>