hlm_pl_mall_store/pages/seller/voucher/VoucherForm.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
  <seller-base :show="false">
  <view class="div container seller-voucher-form">
    <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="(mode=='edit'?'编辑':'新增')+'代金券'" class="common-header" left-icon="back" @clickLeft="goBack()">
      </uni-nav-bar>
    </view>
    </view>
    <view class="div main-content">
    <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="vouchertemplate.vouchertemplate_title" /></view></flex-line>
    <view class="div" v-if="!seller.is_platform_store" @click="showPopup('storeClassVisible')">
      <flex-line :is-link="true" :show-border="true"><text class="span line-name">店铺分类</text><text class="span" slot="right">{{store_class_name}}</text></flex-line>
    </view>
	<view class="div">
	  <flex-line class="menu-item" :is-link="true" :show-border="true">
	  <text class="span line-name">有效期</text>
	  <view class="span" slot="right">
	  <uni-datetime-picker class="common-datetime-picker" type="date" v-model="endtime"
	    start="1970-1-1" :end="quotainfo.voucherquota_endtime"></uni-datetime-picker>
	  </view>
	  </flex-line>
	</view>
    <view class="div" @click="showPopup('priceVisible')">
      <flex-line :is-link="true" :show-border="true"><text class="span line-name">面额</text><text class="span" slot="right">{{price}}</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="number" v-model="vouchertemplate.vouchertemplate_total" /></view></flex-line>
    <view class="div" @click="showPopup('limitVisible')">
      <flex-line :is-link="true" :show-border="true"><text class="span line-name">每人限领</text><text class="span" slot="right">{{limit_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="number" v-model="vouchertemplate.vouchertemplate_limit" /></view></flex-line>
    <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="vouchertemplate.vouchertemplate_desc" /></view></flex-line>
    <flex-line :show-border="true">
    <text class="span">有效</text>
    <view class="div" slot="right">
		<radio-group @change="radioChange(1,$event)" class="radio-wrapper">
		  <label v-for="(item, index) in state_options" :key="index">
			<radio :value="item.value" :checked="vouchertemplate.vouchertemplate_state==item.value" />
			<text>{{item.label}}</text>
		  </label>
		</radio-group>
    </view>
    </flex-line>
	<flex-line :show-border="true">
	<text class="span">是否私密</text>
	<view class="div" slot="right">
		<radio-group @change="radioChange(5,$event)" class="radio-wrapper">
		  <label v-for="(item, index) in state_options1" :key="index">
			<radio :value="item.value" :checked="vouchertemplate.vouchertemplate_if_private==item.value" />
			<text>{{item.label}}</text>
		  </label>
		</radio-group>
	</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="storeClassVisible" 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('storeClassVisible')">
        </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 @change="radioChange(2,$event)" class="radio-wrapper">
		  <view v-for="(item, index) in store_class_options" :key="index" class="radio-item">
			<radio :value="item.value" :checked="store_class_id==item.value" />
			<text>{{item.label}}</text>
		  </view>
		</radio-group>
		</scroll-view>
      </view>
    </view>
    </uni-popup>
    <!--面额-->
    <uni-popup background-color="#fff" ref="priceVisible" 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('priceVisible')">
        </uni-nav-bar>
      </view>
      </view>
      <view class="div common-popup-content">
		<radio-group @change="radioChange(3,$event)" class="radio-wrapper">
		  <view v-for="(item, index) in price_options" :key="index" class="radio-item">
			<radio :value="item.value" :checked="price==item.value" />
			<text>{{item.label}}</text>
		  </view>
		</radio-group>
      </view>
    </view>
    </uni-popup>
    <!--限领-->
    <uni-popup background-color="#fff" ref="limitVisible" 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('limitVisible')">
        </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 @change="radioChange(4,$event)" class="radio-wrapper">
		  <view v-for="(item, index) in limit_options" :key="index" class="radio-item">
			<radio :value="item.value" :checked="limit==item.value" />
			<text>{{item.label}}</text>
		  </view>
		</radio-group>
		</scroll-view>
      </view>
    </view>
    </uni-popup>
  </view>
</seller-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import SellerBase from '../SellerBase'
import { getVoucherList, getCommonData, addVoucher, editVoucher, getVoucherInfo } from '../../../api/sellerVoucher'
import { getStoreClass } from '../../../api/seller'

import { mapState, mapMutations } from 'vuex'
import flexLine from '../../flexLine'
export default {
  name: 'SellerVoucherForm',
  components:{
  TitleHeader,
  SellerBase,
  flexLine,
  },
  data(){
    return {
      navHeight: 0,
      screenWidth:0,
      mode: '',
      tid: 0,
      store_class_options: [{
        label: '所有分类',
        value: '0'
      }],
      vouchertemplate: {},
      store_class_id: '0',
      store_class_list: { '0': '所有分类' },
      store_class_name: '所有分类',
      price_options: [],
	  quotainfo:[],
      price: '',
      limit_options: [{
        label: '不限',
        value: '0'
      }],
      limit: '',
      limit_name: '不限',
      state_options: [{
        label: '是',
        value: '1'
      },
      {
        label: '否',
        value: '2'
      }],
	  state_options1: [{
	    label: '是',
	    value: '1'
	  },
	  {
	    label: '否',
	    value: '0'
	  }],
      endtime: ''
    }
  },
  onLoad: function (option) {
	this.mode = option.mode
	this.tid = option.tid
    getCommonData().then(res => {
      for (var i = 1; i <= res.result.voucher_buyertimes_limit; i++) {
        this.limit_options.push({
          label: i + '张',
          value: i + ''
        })
      }
      let price_options = res.result.pricelist
	  this.quotainfo = res.result.quotainfo
      if (this.mode != 'edit') {
        this.price = price_options[0].voucherprice
        this.limit = '0'
        this.vouchertemplate.vouchertemplate_state = '1'
		this.vouchertemplate.vouchertemplate_if_private = '0'
      } else {
        getVoucherInfo(this.tid).then(res => {
          this.vouchertemplate = res.result.t_info
          this.vouchertemplate.vouchertemplate_enddate = this.$moment.unix(this.vouchertemplate.vouchertemplate_enddate).format('YYYY-MM-DD')
          this.endtime = this.vouchertemplate.vouchertemplate_enddate
          this.price = this.vouchertemplate.vouchertemplate_price + ''
          this.limit = this.vouchertemplate.vouchertemplate_eachlimit + ''
          this.store_class_id = this.vouchertemplate.vouchertemplate_sc_id + ''
          if (this.store_class_list) {
            this.store_class_name = this.store_class_list[this.store_class_id]
          }
          this.vouchertemplate.vouchertemplate_state = this.vouchertemplate.vouchertemplate_state + ''
        }).catch(function (error) {
          uni.showToast({icon:'none',title: error.message})
        })
      }
      for (var i in price_options) {
        this.price_options.push({
          label: price_options[i].voucherprice,
          value: price_options[i].voucherprice
        })
      }
    }).catch(function (error) {
      uni.showToast({icon:'none',title: error.message})
      uni.navigateBack({delta:1})
    })
    if (this.seller.is_platform_store) {
      this.vouchertemplate.vouchertemplate_sc_id = this.seller.storeclass_id
    }
    getStoreClass().then(res => {
      let store_class_options = res.result.store_class
      for (var i in store_class_options) {
        this.store_class_list[store_class_options[i].storeclass_id] = store_class_options[i].storeclass_name
        this.store_class_options.push({
          label: store_class_options[i].storeclass_name,
          value: store_class_options[i].storeclass_id + ''
        })
      }
      if (this.mode == 'edit') {
        if (this.vouchertemplate) {
          this.store_class_id = this.vouchertemplate.vouchertemplate_sc_id + ''
          this.store_class_name = this.store_class_list[this.store_class_id]
        }
      }
    }).catch(function (error) {
      uni.showToast({icon:'none',title: res.message})
    })
  },
  watch: {
    store_class_id: function (store_class_id) {
      this.vouchertemplate.vouchertemplate_sc_id = store_class_id
      this.store_class_name = this.store_class_list[store_class_id]
	  this.hidePopup('storeClassVisible')
    },
    price: function (price) {
      this.vouchertemplate.vouchertemplate_price = price
      this.price = price + ''
	  this.hidePopup('priceVisible')
    },
    limit: function (limit) {
      this.vouchertemplate.vouchertemplate_eachlimit = limit
      this.limit_name = (limit != '0') ? (limit + '张') : '不限'
	  this.hidePopup('limitVisible')
    }
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      seller: state => state.seller.info
    })

  },
  mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().height
    // #endif
    this.screenWidth=uni.getSystemInfoSync().screenWidth
  },
  methods:{
	radioChange(i,e){
	  switch(i){
		case 1:
		this.vouchertemplate.vouchertemplate_state=e.detail.value
		break
		case 2:
		this.store_class_id=e.detail.value
		break
		case 3:
		this.price=e.detail.value
		break
		case 4:
		this.limit=e.detail.value
		break
	  }
	},
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack(){uni.navigateBack({delta:1})},
    submit () {
      this.vouchertemplate.vouchertemplate_enddate = this.endtime
      if (this.mode == 'edit') {
        editVoucher(this.tid, this.vouchertemplate.vouchertemplate_title, this.vouchertemplate.vouchertemplate_total, this.vouchertemplate.vouchertemplate_price, this.vouchertemplate.vouchertemplate_limit, this.vouchertemplate.vouchertemplate_desc, this.vouchertemplate.vouchertemplate_enddate, this.vouchertemplate.vouchertemplate_sc_id, this.vouchertemplate.vouchertemplate_eachlimit, this.vouchertemplate.vouchertemplate_state).then(res => {
          uni.showToast({icon:'none',title: res.message})
          uni.navigateTo({url:'/pages/seller/voucher/VoucherList'})
        }).catch(function (error) {
          uni.showToast({icon:'none',title: error.message})
        })
      } else {
        addVoucher(this.vouchertemplate.vouchertemplate_title, this.vouchertemplate.vouchertemplate_total, this.vouchertemplate.vouchertemplate_price, this.vouchertemplate.vouchertemplate_limit, this.vouchertemplate.vouchertemplate_desc, this.vouchertemplate.vouchertemplate_enddate, this.vouchertemplate.vouchertemplate_sc_id, this.vouchertemplate.vouchertemplate_eachlimit).then(res => {
          uni.showToast({icon:'none',title: res.message})
          uni.navigateTo({url:'/pages/seller/voucher/VoucherList'})
        }).catch(function (error) {
          uni.showToast({icon:'none',title: error.message})
        })
      }
    }
  }
}
</script>
<style lang="scss">
  .seller-voucher-form{
    .mint-radiolist {
      display: flex;
      .mint-cell {
        flex: 1;
        .mint-radio-input:checked + .mint-radio-core {
          background-color: $primaryColor !important;
          border-color: $primaryColor !important;
        }
        &:after{display: none}
      }
    }
  }
</style>
<style scoped lang="scss">
.main-content{background: #fff;padding:0 $pageSpace}
.container {
  height: 100%;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;

}
.common-voucher{margin:0.5rem auto}
.radio-wrapper{
		display: block;
		padding: 0 $pageSpace;
		.radio-item{
			padding:.5rem 0;
			border-bottom: 1px dashed #f5f5f5;
		}
    }
</style>