hlm_pl_mall_store/pages/seller/account/AccountForm.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 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">
            <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="seller.member_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="seller.password" /></view></flex-line>
        </view>
        <view class="div" v-else>
            <flex-line :show-border="true"><text class="span line-name">卖家账号</text><text class="span" slot="right">{{seller.seller_name}}</text></flex-line>
        </view>
        <view class="div select" @click="showPopup('popupVisible')" >
            <flex-line :is-link="true" :show-border="true"><text class="span line-name">账号组</text><text class="span" slot="right">{{seller.sellergroup_name?seller.sellergroup_name: '请选择'}}</text></flex-line>
        </view>
        <view class="div pt-10 pb-10"><view class="div common-btn ds-button-large mt-10" @click="submit">提交</view></view>
        </view>
        <uni-popup background-color="#fff" ref="popupVisible" type="bottom" class="mint-popup">
                       <view>
                           <view class="div toolbar">
                               <text class="button toolbar-item cancel-item" @click="hidePopup('popupVisible')">取消</text>
                               <view class="div picker-header">选择帐号组</view>
                               <text class="button toolbar-item confirm-item" @click="handleConfirm">确定</text>
                           </view>
                       </view>
      <picker-view class="popup-content" indicator-style="height:80rpx" @change="onBusinessChange" :value="sgPicker">
        <picker-view-column v-for="(item,index) in sellerGroupList" :key="index">
          <view class="popup-item-wrapper" v-for="(v,i) in item.values" :key="i"><text class="popup-item">{{v.sellergroup_name}}</text></view>
        </picker-view-column>
      </picker-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 { getSellerAccountInfo, getSellerAccountGroupList, delSellerAccount, editSellerAccount, addSellerAccount } from '../../../api/sellerAccount'
import flexLine from '../../flexLine'
export default {
  name: 'AccountForm',
  data(){
    return {
    navHeight: 0,
    sgPicker:[0],
      dialog:{},
      sellergroup_list: [], // 账号组
      seller: {
        'seller_id': 0,
        'member_name': '', // 商城用户名
        'seller_name': '', // 卖家用户名
        'password': '',
        'sellergroup_id': 0,
        'sellergroup_name': '',
		'action':''
      }
    }
  },
    components:{TitleHeader,SellerBase,flexLine,},
  onLoad: function (option) {
	  this.action = option.action
    // 获取店铺的账户组
    getSellerAccountGroupList().then(res => {
      this.sellergroup_list = res.result.sellergroup_list
    }).catch(function (error) {
	  uni.showToast({icon:'none',title: error.message})
    })

    if (!this.isAddMode) {
      this.seller.seller_id = option.seller_id
      getSellerAccountInfo(this.seller.seller_id).then(res => {
        this.seller = res.result.seller_info
      }).catch(function (error) {
		uni.showToast({icon:'none',title: error.message})
      })
    }
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    isAddMode () {
      let mode = this.action
      if (mode === 'add') {
        return true
      } else {
        return false
      }
    },
    getTitle () {
      if (this.isAddMode) {
        return '新增账户'
      } else {
        return '修改账户'
      }
    },
    sellerGroupList () {
      let sellerGroupList = [
        {
          flex: 1,
          values: this.sellergroup_list,
          className: 'slot1',
          textAlign: 'center'
        }
      ]
      return sellerGroupList
    }

  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().height
  // #endif
  },
  methods:{
    onBusinessChange (e) {
      this.sgPicker=e.detail.value
    },
    closeDialog(){
    },
    confirmDialog(value){
        delSellerAccount(this.seller.seller_id).then(
          (response) => {
            uni.navigateTo({url:'/pages/seller/account/AccountList'})
          }, (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})},
    // 确认事件
    handleConfirm () {
      this.seller.sellergroup_id = this.sellerGroupList[0]['values'][this.sgPicker[0]]['sellergroup_id']
      this.seller.sellergroup_name = this.sellerGroupList[0]['values'][this.sgPicker[0]]['sellergroup_name']
	  this.hidePopup('popupVisible')
    },
    onDelete () {
      this.dialog={content:'确定要取消该账号吗？'}
      this.$refs.confirm.open()
    },
    submit () {
      if (this.isAddMode) {
        uni.showLoading({ title: '加载中' })
        addSellerAccount(this.seller).then(
          (response) => {
            uni.hideLoading()
			uni.showToast({icon:'none',title: response.message})
            uni.navigateTo({url:'/pages/seller/account/AccountList'})
          }, (error) => {
            uni.hideLoading()
			uni.showToast({icon:'none',title: error.message})
          })
      } else {
        uni.showLoading({ title: '加载中' })
        editSellerAccount(this.seller).then(
          (response) => {
            uni.hideLoading()
			uni.showToast({icon:'none',title: response.message})
            // uni.navigateTo({url:'/pages/seller/account/AccountList'})
          }, (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}

	.popup-content {
		padding: 0 40rpx;
		height: 300rpx;
	}
  .toolbar {
      height: 2rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      background-color: #f0f2f5;
      .toolbar-item {
          font-size:$fontSize;
          border: none;
          border-radius: 0;
          background-color: #f0f2f5;
      }
      .cancel-item {
          margin-left: 0.5rem;
          color: #4e545d;
      }
      .confirm-item {
          margin-right: 0.5rem;
          color: red;
      }
      .picker-header {
          color: #4e545d;
          line-height: 2rem;
          font-size:$h2;
      }
  }
.popup-item-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
  }
	.popup-item {
		font-size: 30rpx;
    line-height:80rpx;
		text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	}
</style>