hlm_pl_mall_h5/pages/member/address/ChainForm.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
	<member-base :show="false"><view class="div container member-chain-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="getTitle" 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="address_info.address_realname" /></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="address_info.address_mob_phone" /></view></flex-line>
			<flex-line :is-link="true" :show-border="true">
				<text class="span">地区</text>
				<view class="div" @click="onRegion" slot="right">
					<text class="span" v-if="address_info.area_info">{{address_info.area_info}}</text>
					<text class="span" v-else>请选择地区</text>
				</view>
			</flex-line>
			<flex-line :is-link="true" :show-border="true">
				<text class="span">代收点</text>
				<view class="div" @click="showPopup('showChain')" slot="right">
					<text class="span" v-if="address_info.address_detail">{{address_info.address_detail}}</text>
					<text class="span" v-else>请选择代收点</text>
				</view>
			</flex-line>
			<flex-line :show-border="true"><text class="span line-name">默认地址</text><view class="div" slot="right"><switch @change="switchChange" :checked="!!address_info.address_is_default"></switch></view></flex-line>
			<view class="div pt-10 pb-10"><view class="div common-btn ds-button-large" @click="submit">{{getSumitTitle}}</view></view>

		</view>
		<region-picker ref="picker" v-on:onConfirm="onPickerConfirm"></region-picker>
		<uni-popup background-color="#fff" ref="showChain" type="right" >
			<view :style="'width:'+screenWidth+'px'" class="scroll-view-wrapper 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('showChain')">
				</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" v-if="chainList && chainList.length">
						<view class="div top-wrapper" v-for="(item,index) in chainList" :key="index" @click="setChain(item)">
							<view class="div title-wrapper">
								<label class="title">{{ item.chain_addressname }}</label>
								<label class="title">{{ item.chain_mobile }}<text class="span" v-if="item.chain_telephony">{{ item.chain_telephony }}</text></label>
							</view>
							<label class="desc address-text">{{item.chain_area_info}}&nbsp;{{item.chain_address}}</label>
							<view class="div bottom-line"></view>
						</view>
					</view>
					<empty-record v-else-if="chainList && !chainList.length"></empty-record>
				</scroll-view>
			</view>
		</view>
		</uni-popup>
	</view></member-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import MemberBase from '../MemberBase'
import { getPointByAddress } from '../../../util/bmap'
import RegionPicker from '../../RegionPicker'
import EmptyRecord from '../../EmptyRecord'
import { getAddressInfo, addChain, getChainList } from '../../../api/memberAddress'
import flexLine from '../../flexLine'
export default {
  components:{
    TitleHeader,
    MemberBase,
    flexLine,
    RegionPicker,
    EmptyRecord
  },
  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 '修改收货地址'
      }
    },
    getSumitTitle () {
      let isFromCheckout = this.isFromCheckout
      if (isFromCheckout) {
        return '保存并使用'
      } else {
        return '保存'
      }
    }
  },
  data(){
    return {
    navHeight: 0,
    isFromCheckout:0,
    action:'',
      screenWidth:0,
      chainList: [],
      params: { 'page': 0, 'per_page': 10 },
      loading: false, // 是否加载更多
      isMore: true, // 是否有更多
      popMap: false,
      address_id: 0,
      address_info: {
		  address_is_default: true
      }
    }
  },
  onLoad: function (option) {
  this.action=option.action
  this.isFromCheckout=option.isFromCheckout
    if (!this.isAddMode) {
      this.address_id = option.address_id
      getAddressInfo(this.address_id).then(res => {
        this.address_info = res.result.address_info

        if (res.result.address_info.address_is_default === '1') {
          this.address_info.address_is_default = true
        } else {
          this.address_info.address_is_default = false
        }
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }
  this.loadMore()
  },
  mounted(){

    // #ifdef  MP-WEIXIN

    this.navHeight = uni.getMenuButtonBoundingClientRect().top

    // #endif

    this.screenWidth=uni.getSystemInfoSync().screenWidth

  },
  methods:{
    switchChange(e){
      this.address_info.address_is_default=e.detail.value
    },
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    loadMore () {
      if (this.loading) {
        return
      }

      this.params.page = ++this.params.page
      if (this.isMore) {
        this.loading = true
        this.getChainList(true)
      }
    },
    reload () {
      // 重新加载数据
      this.params.page = 0
      this.isMore = true
      this.chainList = false
      this.loadMore()
    },
    getChainList () {
      getChainList(this.params, this.address_info.area_id).then(res => {
        if (res.result.hasmore) {
          this.isMore = true
        } else {
          this.isMore = false
        }
        if (this.chainList) {
          this.chainList = this.chainList.concat(res.result.chain_list)
        } else {
          this.chainList = res.result.chain_list
        }
        this.loading = false
      }).catch(function (error) {
        uni.hideLoading()
        uni.showToast({icon:'none',title: error.message})
        this.loading = false
      })
    },
    setChain (item) {
      this.address_info.chain_id = item.chain_id
      this.address_info.address_detail = item.chain_address
      this.hidePopup('showChain')
      this.$forceUpdate()
    },
    goBack () {
      uni.navigateBack({delta:1})
    },
    getPosition () {
      getPointByAddress(this.address_info.area_info + this.address_info.address_detail).then(res => {
        if (res.result.location) {
          this.address_info.address_longitude = res.result.location.lng
          this.address_info.address_latitude = res.result.location.lat
        }
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    setPosition (lat, lng, name) {
      this.popMap = false
      this.address_info.address_detail = name
      this.address_info.address_longitude = lng
      this.address_info.address_latitude = lat
    },
    submit () {
      if (this.address_info.address_realname === '') {
        uni.showToast({icon:'none',title: '请填写收件人姓名'})
        return
      }
      if (this.address_info.address_realname.length === 0) {
        uni.showToast({icon:'none',title: '请填写收件人姓名'})
        return
      }
      if (this.address_info.address_realname.length < 2 || this.address_info.address_realname.length > 15) {
        uni.showToast({icon:'none',title: '2-15个字符限制'})
        return
      }
      if (this.address_info.address_mob_phone === '') {
        uni.showToast({icon:'none',title: '请填写手机号码'})
        return
      }
      if (this.address_info.address_mob_phone.length === 0) {
        uni.showToast({icon:'none',title: '请填写手机号码'})
        return
      }
      if (this.address_info.area_id === 0 || this.address_info.area_id === undefined) {
        uni.showToast({icon:'none',title: '请选择所在地区'})
        return
      }
      if (this.address_info.chain_id === 0 || this.address_info.chain_id === undefined) {
        uni.showToast({icon:'none',title: '请选择代收点'})
        return
      }

      addChain(this.address_info).then(
        (response) => {
          uni.hideLoading()
          this.updateSelectedAddress()
        }, (error) => {
          uni.hideLoading()
          uni.showToast({icon:'none',title: error.message})
        })
    },
    onRegion (picker, values) {
      this.$refs.picker.show()
    },
    onPickerConfirm (values) {
      if (this.address_info.area_id != values[2].area_id) {
        this.address_info.chain_id = 0
        this.address_info.address_detail = ''
      }
      this.address_info.area_info = this.getRegionStr(values)

      this.address_info.area_id = values[2].area_id
      this.address_info.city_id = values[1].area_id
      this.reload()
      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
    },
    updateSelectedAddress () {
		uni.navigateBack({delta:1})
    }
  }
}
</script>
<style lang="scss">
	.member-chain-form .address-line-wrapper .mint-cell-title{flex:unset;width: 5rem}
	.member-chain-form .address-line-wrapper .mint-cell-value{flex:1;text-align: right;    display: block;}
</style>
<style lang="scss" scoped>
	.scroll-view-wrapper{display: flex;flex-direction: column;}
	.scroll-view{flex:1}
	.main-content{background: #fff;padding:0 $pageSpace}
	.right-arrow{transform: rotate(-90deg);color:#ddd;font-size:$fontSize;display: inline-block;}
	.input-wrap{position: relative;
		.i{position: absolute;right:0;top:0;line-height: 2.4rem;display: block;width:2rem;text-align: center;font-size:$h1}
	}
	.top-wrapper {
		position: relative;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
	}
	.top-wrapper .title-wrapper {
		height:1rem;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top:0.5rem;
		margin-left:0.5rem;
	}
	.top-wrapper .title {
		font-size:$h2;
		color: #333;
		margin-left:0.5rem;
	}
	.top-wrapper .desc {
		color: #7c7f88;
		font-size:$subFontSize;
	}
	.top-wrapper .address-text {
		margin-top:0.5rem;
		margin-bottom:0.5rem;
		margin-left:1rem;
		margin-right:0.5rem;
	}
	.top-wrapper .bottom-line {
		position: absolute;
		height: 1px;
		left:0.5rem;
		bottom: 0;
		right:0.5rem;
		background-color: #e8eaed;
	}
	.address-line{display: inline-block;max-width: 50%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
</style>