一点存 账户详情信息修改

一点存账户详情信息修改

程维达

<template>
  <div class="app-container">

    <el-form  :model="userInfo" status-icon  label-width="120px">
    <div class="neibox" >

      <el-row :gutter="80">
        <el-col :span="24" :offset="0"> <h3 class="agenttitle" :gutter="120" >代理商：{{userInfo.name}}</h3></el-col>
        <el-col :span="8">
      <el-form-item label="账户类型：" prop="roleName">
        <el-input type="text" v-model="userInfo.roleName" autocomplete="off" ></el-input>
      </el-form-item>
        </el-col>

        <el-col :span="8">
      <el-form-item label="邀请码：" prop="inviteCode">
      <el-input type="text" v-model="userInfo.inviteCode" autocomplete="off"></el-input>
      </el-form-item>
        </el-col>
        </el-row>
<!--代理商-->

      <div style="padding-bottom: 20px;"></div>

      <el-row :gutter="80">

  <el-col :span="24" :offset="0"> <h3 class="agenttitle" :gutter="120" >基础信息：</h3></el-col>
<el-col :span="8">
<el-form-item label="联系人：" prop="accountName">
<el-input type="text" v-model="userInfo.accountName" autocomplete="off"></el-input>
</el-form-item>
</el-col>

<el-col :span="8">
<el-form-item label="联系电话：" prop="phone">
<el-input type="number" v-model="userInfo.phone" autocomplete="off"></el-input>
</el-form-item>
</el-col>

  <el-col :span="8">
    <el-form-item label="身份证号：" prop="idcard">
      <el-input type="text" v-model="userInfo.idcard" autocomplete="off"></el-input>
    </el-form-item>
  </el-col>


  <el-col :span="8">
    <el-form-item label="初始密码：" prop="password">
      <el-input type="password" v-model="userInfo.password" autocomplete="off"></el-input>
    </el-form-item>
  </el-col>

</el-row>
<!--基础信息-->
      <div style="padding-bottom: 20px;"></div>

      <el-row :gutter="80">

        <el-col :span="24" :offset="0"> <h3 class="agenttitle" :gutter="120" >公司信息：</h3></el-col>
        <el-col :span="8">
          <el-form-item label="公司名：" prop="inviteCode">
            <el-input type="text" v-model="userInfo.inviteCode" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="社会信用代码：" prop="creditCode">
            <el-input type="text" v-model="userInfo.creditCode" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="法定代表人：" prop="legalPerson">
            <el-input type="text" v-model="userInfo.legalPerson" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="公司地址：" prop="companyAddress">
            <el-input type="text" v-model="userInfo.companyAddress" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <!--公司信息-->

      <div style="padding-bottom: 20px;"></div>

      <el-row :gutter="80">

        <el-col :span="24" :offset="0"> <h3 class="agenttitle" :gutter="120" >付款信息：</h3></el-col>
        <el-col :span="8">
          <el-form-item label="账户名：" prop="accountName">
            <el-input type="text" v-model="userInfo.accountName" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="税号：" prop="dutyNo">
            <el-input type="text" v-model="userInfo.dutyNo" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>

        <br/>

        <el-col :span="8">
          <el-form-item label="开户银行：" prop="openBank">
            <el-input type="text" v-model="userInfo.openBank" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="收款账号：" prop="accountCode">
            <el-input type="text" v-model="userInfo.accountCode" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <!--付款信息-->
      <div style="padding-bottom: 20px;"></div>

      <el-row :gutter="80">
        <el-col :span="24" :offset="0"> <h3 class="agenttitle" :gutter="120" >商务信息</h3></el-col>
        <el-col :span="8">
          <el-form-item label="代理范围：" >

            <el-select v-model="proxyRangeArray" multiple placeholder="请选择">
              <el-option
                v-for="item in proxy"
                :key="item.areaCode"
                :label="item.areaName"
                :value="item.areaCode">
              </el-option>
            </el-select>

          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="分成比例：" prop="baifen">
            <el-input type="number"  v-model="baifen" autocomplete="off"><template slot="append">%</template></el-input>

          </el-form-item>
        </el-col>

      </el-row>
      <!--商务信息-->
      <div style="padding-bottom: 20px;"></div>

 </div>

      <div class="tijao">
        <el-button type="primary" @click="editUsers" class="suretijao">保存修改</el-button>
        <el-button class="gotoback">返 回</el-button>
      </div>

  </el-form>




  </div>
</template>

<script>
  import request from '@/utils/request';
  export default {
    data(){
      var checkMobile = (rule, value, callback) => {
        const checkMobile = /^1[3,4,5,6,7,8,9][0-9]{9}$/
        if(checkMobile.test(value)){
          return callback()
        }
        callback(new Error('请正确输入手机号码'))
      }

      var checkIdcard = (rule, value, callback) => {
        const checkIdcard = /^[1-9][0-9]{5}(18|19|(2[0-9]))[0-9]{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)[0-9]{3}[0-9Xx]$/
        if(checkIdcard.test(value)){
          return callback()
        }
        callback(new Error('请正确输入身份证号码'))
      }

      return{
        offices:[],
        proxy:[],
        queryInfo: {
          roleId:''
        },
        id: '46',
        userInfo: {},
        proxyRangeArray: [],
        baifen: 0,
        addFormRules:{
          roleId:[
            {required: true, message: '请选择账号类型', trigger: 'blur'},
          ],
          name:[
            {required: true, message: '请输入联系人', trigger: 'blur'}
          ],
          password:[
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min:6, max:15, message:'用户名长度在6到15字符', trigger: 'blur'}
          ],
          phone:[
            {required: true, message: '请输入手机', trigger: 'blur'},
            {validator: checkMobile, trigger: 'blur' }
          ],
          idcard:[
            {required: true, message: '请输入身份证号码', trigger: 'blur'},
            {validator: checkIdcard, trigger: 'blur' }
          ]
        },
        addFormRef:{},
        form: {
          selectOne:'2',//单选默认值
          selectMultiple:['1'],//多选默认值
        }
      }
    },
    created(){
      this.getProxy();
      this.getOffice();
      this.getUserInfo();
    },
    methods:{
      getUserInfo(){
        request({
          url:'lit/protected/lit/account/query/'+this.id,
          method: 'get'
        }).then((res) => {
          debugger
          this.userInfo = res.vo;
          this.proxyRangeArray = this.userInfo.proxyRange?this.userInfo.proxyRange.split(","):[];
          this.baifen = Math.floor(this.userInfo.shareProportion * 10000)/100
        })
      },
      getOffice(){
        request({
          url: 'lit/protected/lit/account/getRoles',
          method:'get'
        }).then((res) => {
          // console.log(res);
          this.offices = res.list
        })
      },
      getProxy(){
        request({
          url: 'lit/protected/lit/account/getProvinceProxy',
          method:'get'
        }).then((res) => {
          console.log(res);
           this.proxy = res.list;
        })
      },
      editUsers(){

        async aaaas=>{
        //   if(!aaaas) return
          const{ data:res } = await this.$http.post('lit/protected/lit/account/modify/'+ this.userInfo.id )
          if( res.meta.status !== 200 ){
            return this.$message.error('修改失败')
          }
          this.$message.success('更新成功')

         }
        this.userInfo.shareProportion = Math.floor(this.baifen )/100;
        this.userInfo.proxyRange = this.proxyRangeArray.join(",");
        this.userInfo.proxyRangeText = this.proxy.filter(item=>{
          return this.proxyRangeArray.includes(item.areaCode)}).map(item => item.areaName).join(",");
        request({
          url: 'lit/protected/lit/account/modify/'+ this.userInfo.id ,
          method: 'post',
          data:  this.userInfo
        }).then((res) => {
          console.log(res)
          this.$message.success('更新成功')
          this.userlist =res.list

        })




          // );
      }

    }


  }
</script>

<style scoped>
  .neibox{margin:0 25px}
  .agenttitle{font-weight: 400;    padding-top: 5px;}
  .listtext{display:flex;flex-wrap: wrap;padding-bottom: 12px;border-bottom: 1px solid #ccc}
  .listinfo{    width:50%;box-sizing: border-box;font-size: 16px;margin: 12px 0;}
  .tijao{    text-align: center;padding: 40px 0 30px;}
  .suretijao{width:100px;}
  .gotoback{width:100px;}
</style>