hlm_pl_mall_store/pages/home/sellerlogin/Login.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <home-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="商家登录" class="common-header">
            </uni-nav-bar>
        </view>
        </view>
        <view class="div main-content">
            <view class="div top-wrapper">
                <view class="div">
                    <flex-line class="input-wrapper" :show-border="true">
                      <input class="field-input" v-model="sellername" placeholder="商家账户" />
                      </flex-line>
                </view>
                <view class="div">
                    <flex-line class="input-wrapper" :show-border="true">
                      <input class="field-input" type="password" v-model="password" placeholder="请输入密码" maxlength="20" />
                        </flex-line>
                </view>
            </view>
            <view class="div common-btn ds-button-large mt-10 mb-10" @click="signin">登录</view>
        </view>
    </view></home-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import HomeBase from '../HomeBase'
import { sellerlogin } from '../../../api/sellerLogin'
import { mapState, mapMutations, mapActions } from 'vuex'
import flexLine from '../../flexLine'
export default {
  name: 'login',
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().height
  // #endif
  },
  data(){
    return {
      navHeight: 0,
      sellername: '',
      password: ''
    }
  },
    components:{TitleHeader,HomeBase,flexLine,},
  onLoad: function (option) {
    uni.hideLoading()
    if (option.clear) {
      this.sellerLogout()
    }
    this.fetchConfig({}).then(
      response => {
      },
      error => {
        uni.showToast({icon:'none',title: error.message})
      }
    )
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      config: state => state.config.config
    }),
  },
  methods:{
    goBack(){uni.navigateBack({delta:1})},
    ...mapActions({
      fetchConfig: 'fetchConfig'
    }),
    ...mapMutations({
      saveAuthInfo: 'sellerLogin',
      sellerLogout: 'sellerLogout'
    }),
    signin () {
      let sellername = this.sellername
      let password = this.password
      if (sellername.length === 0) {
        uni.showToast({icon:'none',title: '请输入用户名/邮箱/手机号'})
        return
      }
      // TODO: 用户名（为手机号或邮箱）校验
      if (password.length === 0) {
        uni.showToast({icon:'none',title: '请输入密码'})
        return
      }
      if (password.length < 6) {
        uni.showToast({icon:'none',title: '至少输入6位密码'})
        return
      }
      uni.showLoading({ title: '加载中' })
      sellerlogin(sellername, password).then(
        response => {
          uni.hideLoading()
          this.saveAuthInfo({ token: response.result.token, info: response.result.info })
          this.goSellerIndex()
        },
        error => {
          uni.hideLoading()
          uni.showToast({icon:'none',title: error.message})
        }
      )
    },
    goSellerIndex () {
      uni.reLaunch({url:'/pages/seller/index/Index'})
    }
  }
}
</script>

<style scoped lang='scss'>
    .common-header{
        .btn{background: #000;color: #fff;box-shadow: 0px 2px 4px #d2d2d2;}
    }
    .container {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        .main-content{background: #fff;padding:0 $pageSpace}
    .top-wrapper {
    .input-wrapper {
        display: flex;
        align-content: center;
        align-items: center;
        padding-left: 0.5rem;
        background-color: #fff;
        height: 2.2rem;
    .img {
        width: 1.2rem;
        height: 1.2rem;
        margin: 0;
        padding: 0;
    }
    input {
        flex: 1;
        font-size:$subFontSize;
    }
    .bottom-input {
        border-bottom-width: 0;
    }
    }
    }
    }
</style>