hlm_pl_mall_store/pages/seller/chain/ChainForm.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <seller-base :show="false">
    <view class="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 slot="right" class="div common-btn btn"  @click="onDelete" v-if="!isAddMode">删除</view>
            </uni-nav-bar>
        </view>
        </view>
        <view class="div main-content">
            <view class="div" v-if="!isAddMode">
                <flex-line :show-border="true"><text class="span line-name">门店账号</text><text class="span" slot="right">{{chain.chain_name}}</text></flex-line>
            </view>
            <flex-line v-else :show-border="true" class="field-line"><text class="span field-name">门店账号</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="chain.chain_name" /></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" type="password" v-model="chain.chain_passwd" /></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="chain.chain_addressname" /></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" type="phone" v-model="chain.chain_truename" /></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" type="phone" v-model="chain.chain_mobile" /></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" type="email" v-model="chain.chain_telephony" /></view></flex-line>
            <view class="div" @click="onRegion">
            <flex-line :is-link="true" :show-border="true"><text class="span line-name">地区</text><text class="span" slot="right">{{chain.chain_area_info}}</text></flex-line>
            </view>
            <flex-line class="field-line" :show-border="true">
            <text class="span field-name">地址</text>
            <view class="address-line div field-line-right" slot="right"><input class="text field-input" type="text" v-model="chain.chain_address"><text class="i iconfont" @click="getPosition()">&#xe6d3;</text></view>
            </flex-line>
            <flex-line :show-border="true"><text class="span line-name">门店状态</text><view class="div" slot="right"><switch @change="switchChange(1,$event)" :checked="!!chain.chain_state"></switch></view></flex-line>
            <flex-line :show-border="true"><text class="span line-name">开启自提</text><view class="div" slot="right"><switch @change="switchChange(2,$event)" :checked="!!chain.chain_if_pickup"></switch></view></flex-line>
            <flex-line :show-border="true"><text class="span line-name">开启代收</text><view class="div" slot="right"><switch @change="switchChange(3,$event)" :checked="!!chain.chain_if_collect"></switch></view></flex-line>
            <view class="div pt-10 pb-10"><view class="div common-btn ds-button-large" @click="submit">提交</view></view>
        </view>
        <region-picker ref="picker" v-on:onConfirm="onPickerConfirm"></region-picker>
        <uni-popup background-color="#fff" ref="popMap" 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('popMap')">
                </uni-nav-bar>
            </view>
            </view>
            <view class="div common-popup-content">
                <map-select ref="map_select" :longitude="chain.chain_longitude" :latitude="chain.chain_latitude" @setPosition="setPosition"></map-select>
            </view>
        </view>
        </uni-popup>
    </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 { getPointByAddress } from '../../../util/bmap'
import { getChainInfo, delChain, addChain, editChain } from '../../../api/sellerChain'
import RegionPicker from '../../RegionPicker'
import MapSelect from '../../MapSelect'
import flexLine from '../../flexLine'
export default {
  name: 'ChainForm',
  components:{
    TitleHeader,
    SellerBase,
    flexLine,
    RegionPicker,
    MapSelect
  },
  data(){
    return {
      navHeight: 0,
      dialog:{},
      screenWidth:0,
      chain_id: 0,
	  action:'',
      chain: {
        chain_state: true,
        chain_if_pickup: true,
        chain_if_collect: true
      }
    }
  },
  onLoad: function (option) {
	  this.action = option.action
    if (this.action!='add') {
      this.chain_id = option.chain_id
      getChainInfo({ chain_id: this.chain_id }).then(res => {
        let chain = res.result.chain_info
        chain.chain_passwd = ''
        chain.chain_state = !!chain.chain_state
        chain.chain_if_pickup = !!chain.chain_if_pickup
        chain.chain_if_collect = !!chain.chain_if_collect
        this.chain = chain
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    isAddMode () {
      let mode = this.action
      // add: 添加门店，edit: 编辑门店
      if (mode === 'add') {
        return true
      } else {
        return false
      }
    },
    getTitle () {
      if (this.isAddMode) {
        return '新增门店'
      } else {
        return '修改门店'
      }
    }
  },
  mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().height
    // #endif
    this.screenWidth=uni.getSystemInfoSync().screenWidth
  },
  methods:{
	switchChange(i,e){
	  switch(i){
		case 1:
		this.chain.chain_state=e.detail.value
		break
		case 2:
		this.chain.chain_if_pickup=e.detail.value
		break
		case 3:
		this.chain.chain_if_collect=e.detail.value
		break
	  }
	},
    closeDialog(){
    },
    confirmDialog(value){
        delChain({chain_id:this.chain_id}).then(
          (response) => {
            uni.navigateTo({url:'/pages/seller/chain/ChainList'})
          }, (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})},
    getPosition () {
      getPointByAddress(this.chain.chain_area_info + (this.chain.chain_address?this.chain.chain_address:'')).then(res => {
        if (res.result.location) {
          this.chain.chain_longitude = res.result.location.lng
          this.chain.chain_latitude = res.result.location.lat
        }
        this.$forceUpdate()
        this.showPopup('popMap')
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    setPosition (lat, lng, name) {
	  this.hidePopup('popMap')
      this.chain.chain_address = name
      this.chain.chain_longitude = lng
      this.chain.chain_latitude = lat
      this.$forceUpdate()
    },
    onRegion (picker, values) {
      this.$refs.picker.show()
    },
    onPickerConfirm (values) {
      this.chain.chain_area_info = this.getRegionStr(values)

      this.chain.chain_area_3 = values[2].area_id
      this.chain.chain_area_2 = values[1].area_id
      this.$forceUpdate()
    },
    getRegionStr (values) {
      let title = ''
      for (let i = 0; i < values.length; i++) {
        const element = values[i]
        if (i !== 0) {
          title = title + ' ' + element.area_name
        } else {
          title = title + element.area_name
        }
      }
      return title
    },
    onDelete () {
      this.dialog={content:'确定要删除该门店吗？'}
      this.$refs.confirm.open()
    },
    submit () {
      if (this.isAddMode) {
        uni.showLoading({ title: '加载中' })
        addChain(this.chain).then(
          (response) => {
            uni.hideLoading()
			uni.showToast({icon:'none',title: response.message})
            uni.navigateTo({url:'/pages/seller/chain/ChainList'})
          }, (error) => {
            uni.hideLoading()
            uni.showToast({icon:'none',title: error.message})
          })
      } else {
        uni.showLoading({ title: '加载中' })
        editChain(this.chain).then(
          (response) => {
            uni.hideLoading()
			uni.showToast({icon:'none',title: response.message})
          }, (error) => {
            uni.hideLoading()
            uni.showToast({icon:'none',title: error.message})
          })
      }
    }
  }

}
</script>

<style scoped lang="scss">
.common-header{
        .btn{background: #000;color: #fff;box-shadow: 0px 2px 4px #d2d2d2;}
    }
.main-content{background: #fff;padding:0 $pageSpace}
    .text{text-align: right;border: 0}
    .address-line{display: flex;flex-direction: row;}
</style>