1276 lines
38 KiB
Vue
1276 lines
38 KiB
Vue
<template>
|
||
<div id="box">
|
||
<div class="pcAgent" v-if="!isMobile">
|
||
<div class="myInformation top-header">
|
||
<div class="after-icon"></div>
|
||
<span class="title-word">个人信息</span>
|
||
<div class="right-header">
|
||
<div class="item-style">
|
||
<span class="price-word">账户余额:</span>
|
||
<span class="balance-style" @click="$router.push('/customer/rechargeRecord')"> ¥{{ balance }}</span>
|
||
</div>
|
||
<div class="item-style" v-if="false">
|
||
<span class="price-word">支付宝充值: </span>
|
||
<img @click="onffline" src="../../../assets/kyy/编组.svg" style="cursor: pointer" alt="">
|
||
</div>
|
||
<div class="item-style" v-if="false">
|
||
<span class="price-word">对公账户充值: </span>
|
||
<el-button type="warning" size="mini" @click="getRechargeCode">充值</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="essentialInformation">
|
||
<p class="one">基本信息</p>
|
||
<div class="disp_top">
|
||
<div>
|
||
<div class="userImg">{{ nameText }}</div>
|
||
</div>
|
||
<div class="disp userID">
|
||
<div>
|
||
<p>账号昵称</p>
|
||
<p>账号ID</p>
|
||
<p>所属机构</p>
|
||
<p>销售经理名称</p>
|
||
</div>
|
||
<div>
|
||
<div>
|
||
<p>{{ form.fullName }}</p>
|
||
</div>
|
||
<p>{{ userId }}</p>
|
||
<p>{{ form.parentname }}</p>
|
||
<p>{{ form.saleMgrName }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="disp userStatus">
|
||
<div>
|
||
<p>联系电话</p>
|
||
<p>联系邮箱</p>
|
||
<p>地址</p>
|
||
</div>
|
||
<div>
|
||
<div>
|
||
<p>
|
||
<span v-if="form_tel">
|
||
{{ form.tel }}
|
||
<i class="el-icon-edit" @click="form_tel = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.tel"/>
|
||
<button @click="addZJuser(form.tel)" class="yesBtn">保存</button>
|
||
<button @click="form_tel = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p>
|
||
<span v-if="form_email">
|
||
{{ form.email }}
|
||
<i class="el-icon-edit" @click="form_email = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.email"/>
|
||
<button @click="addZJuser(form.email)" class="yesBtn">保存</button>
|
||
<button @click="form_email = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p>
|
||
<span v-if="form_address">
|
||
{{ form.address }}
|
||
<i class="el-icon-edit" @click="form_address = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.address"/>
|
||
<button @click="addZJuser(form.address)" class="yesBtn">保存</button>
|
||
<button @click="form_address = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="kong"></div>
|
||
<div class="particular">
|
||
<p>详细信息</p>
|
||
<p>用户业务信息和个人信息配置</p>
|
||
<div>
|
||
<div style="margin-right: 100px">
|
||
<p>财务信息</p>
|
||
<div class="particular_disp">
|
||
<div>
|
||
<p>开户行</p>
|
||
<p>银行账号</p>
|
||
<p>发票抬头</p>
|
||
<p>发票地址</p>
|
||
<p>发票联系电话</p>
|
||
<p>纳税人识别号</p>
|
||
<p>统一社会信用代码</p>
|
||
</div>
|
||
<div>
|
||
<div>
|
||
<p>
|
||
<span v-if="form_bankName">
|
||
{{ form.bankName }}
|
||
<i class="el-icon-edit" @click="form_bankName = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.bankName"/>
|
||
<button @click="addZJuser(form.bankName)" class="yesBtn">保存</button>
|
||
<button @click="form_bankName = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p>
|
||
<span v-if="form_bankAcc">
|
||
{{ form.bankAcc }}
|
||
<i class="el-icon-edit" @click="form_bankAcc = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.bankAcc"/>
|
||
<button @click="addZJuser(form.bankAcc)" class="yesBtn">保存</button>
|
||
<button @click="form_bankAcc = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p>
|
||
<span v-if="form_identityName">
|
||
{{ form.identityName }}
|
||
<i class="el-icon-edit" @click="form_identityName = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.identityName"/>
|
||
<button @click="addZJuser(form.identityName)" class="yesBtn">保存</button>
|
||
<button @click="form_identityName = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p>
|
||
<span v-if="form_taxAddress">
|
||
{{ form.taxAddress }}
|
||
<i class="el-icon-edit" @click="form_taxAddress = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.taxAddress"/>
|
||
<button @click="addZJuser(form.taxAddress)" class="yesBtn">保存</button>
|
||
<button @click="form_taxAddress = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p>
|
||
<span v-if="form_taxTel">
|
||
{{ form.taxTel }}
|
||
<i class="el-icon-edit" @click="form_taxTel = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.taxTel"/>
|
||
<button @click="addZJuser(form.taxTel)" class="yesBtn">保存</button>
|
||
<button @click="form_taxTel = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p>
|
||
<span v-if="form_taxpayerIdentity">
|
||
{{ form.taxpayerIdentity }}
|
||
<i class="el-icon-edit" @click="form_taxpayerIdentity = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.taxpayerIdentity"/>
|
||
<button @click="addZJuser(form.taxpayerIdentity)" class="yesBtn">保存</button>
|
||
<button @click="form_taxpayerIdentity = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p>
|
||
<span v-if="form_orgcode">
|
||
{{ form.orgcode }}
|
||
<i class="el-icon-edit" @click="form_orgcode = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.orgcode"/>
|
||
<button @click="addZJuser(form.orgcode)" class="yesBtn">保存</button>
|
||
<button @click="form_orgcode = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<el-button @click="showTX = !showTX" type="primary" size="small" v-if="false">腾讯相关业务信息</el-button>
|
||
<div v-if="showTX">
|
||
<p>
|
||
腾讯客户信息<span class="hint">提示!:有腾讯相关业务时填写</span>
|
||
</p>
|
||
<div class="particular_disp">
|
||
<div>
|
||
<p>ak</p>
|
||
<p>sk</p>
|
||
<p>腾讯id</p>
|
||
<p>腾讯appId</p>
|
||
<p>备注</p>
|
||
<p>渠道商Id</p>
|
||
</div>
|
||
<div>
|
||
<div>
|
||
<p>
|
||
<span v-if="form_ak">
|
||
{{ form.ak }}
|
||
<i class="el-icon-edit" @click="form_ak = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.ak"/>
|
||
<button @click="addZJuser(form.ak)" class="yesBtn">保存</button>
|
||
<button @click="form_ak = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p>
|
||
<span v-if="form_sk">
|
||
{{ form.sk }}
|
||
<i class="el-icon-edit" @click="form_sk = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.sk"/>
|
||
<button @click="addZJuser(form.sk)" class="yesBtn">保存</button>
|
||
<button @click="form_sk = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p>
|
||
<span v-if="form_thirdId">
|
||
{{ form.thirdId }}
|
||
<i class="el-icon-edit" @click="form_thirdId = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.thirdId"/>
|
||
<button @click="addZJuser(form.thirdId)" class="yesBtn">保存</button>
|
||
<button @click="form_thirdId = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p>
|
||
<span v-if="form_appId">
|
||
{{ form.appId }}
|
||
<i class="el-icon-edit" @click="form_appId = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.appId"/>
|
||
<button @click="addZJuser(form.appId)" class="yesBtn">保存</button>
|
||
<button @click="form_appId = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p>
|
||
<span v-if="form_remark">
|
||
{{ form.remark }}
|
||
<i class="el-icon-edit" @click="form_remark = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.remark"/>
|
||
<button @click="addZJuser(form.remark)" class="yesBtn">保存</button>
|
||
<button @click="form_remark = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p>{{ "渠道商id" }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mobileAgent" v-else>
|
||
<el-row class="title" type="flex" justify="center" align="middle">余额信息</el-row>
|
||
<div class="user_account">
|
||
<el-row :gutter="20">
|
||
<el-col class="item_info" :span="12">
|
||
<span class="key">账户余额: </span>
|
||
<span class="val" @click="$router.push('/customer/rechargeRecord')">¥{{ balance }}</span>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" v-if="false">
|
||
<el-col class="item_info" :span="12">
|
||
<span class="key">支付宝充值: </span>
|
||
<span class="val">
|
||
<el-button type="success" size="mini" @click="onffline">充值</el-button>
|
||
</span>
|
||
</el-col>
|
||
<el-col class="item_info" :span="12">
|
||
<span class="key">对公账户充值: </span>
|
||
<span class="val">
|
||
<el-button type="warning" size="mini" @click="getRechargeCode">充值</el-button>
|
||
</span>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<el-row class="title" type="flex" justify="center" align="middle">个人信息</el-row>
|
||
<div class="user_info">
|
||
<el-row :gutter="20">
|
||
<el-col class="item_info" :span="12">
|
||
<span class="key">账号昵称: </span>
|
||
<span class="val">{{ form.fullName }}</span>
|
||
</el-col>
|
||
<el-col class="item_info" :span="12">
|
||
<span class="key">所属机构: </span>
|
||
<span class="val">{{ form.parentname }}</span>
|
||
</el-col>
|
||
<el-col class="item_info" :span="12">
|
||
<span class="key">销售经理名称: </span>
|
||
<span class="val">{{ form.saleMgrName }}</span>
|
||
</el-col>
|
||
<el-col class="item_info" :span="24">
|
||
<span class="key">账号ID: </span>
|
||
<span class="val">{{ userId }}</span>
|
||
</el-col>
|
||
<el-col class="item_info" :span="24">
|
||
<span class="key">联系电话: </span>
|
||
<span v-if="form_tel">
|
||
{{ form.tel }}
|
||
<i class="el-icon-edit" @click="form_tel = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.tel"/>
|
||
<button @click="addZJuser(form.tel)" class="yesBtn">保存</button>
|
||
<button @click="form_tel = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</el-col>
|
||
<el-col class="item_info" :span="24">
|
||
<span class="key">联系邮箱: </span>
|
||
<span v-if="form_email">
|
||
{{ form.email }}
|
||
<i class="el-icon-edit" @click="form_email = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.email"/>
|
||
<button @click="addZJuser(form.email)" class="yesBtn">保存</button>
|
||
<button @click="form_email = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</el-col>
|
||
<el-col class="item_info" :span="24">
|
||
<span class="key">地址: </span>
|
||
<span v-if="form_address">
|
||
{{ form.address }}
|
||
<i class="el-icon-edit" @click="form_address = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.address"/>
|
||
<button @click="addZJuser(form.address)" class="yesBtn">保存</button>
|
||
<button @click="form_address = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row class="title" type="flex" justify="center" align="middle">财务信息</el-row>
|
||
<el-row class="info" type="flex" justify="center" align="middle">用户业务信息和个人信息配置</el-row>
|
||
<el-row class="title" type="flex" justify="center" align="middle" v-if="false">
|
||
<el-button @click="showTX = !showTX" type="primary" size="small">腾讯相关业务信息</el-button>
|
||
</el-row>
|
||
</div>
|
||
<div class="tenct" v-if="showTX">
|
||
<el-row>
|
||
<p>
|
||
腾讯客户信息<span class="hint">提示!:有腾讯相关业务时填写</span>
|
||
</p>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col class="item_info" :span="24">
|
||
<span class="key">ak: </span>
|
||
<span v-if="form_ak">
|
||
{{ form.ak }}
|
||
<i class="el-icon-edit" @click="form_ak = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.ak"/>
|
||
<button @click="addZJuser(form.ak)" class="yesBtn">保存</button>
|
||
<button @click="form_ak = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</el-col>
|
||
<el-col class="item_info" :span="24">
|
||
<span class="key">sk: </span>
|
||
<span v-if="form_sk">
|
||
{{ form.sk }}
|
||
<i class="el-icon-edit" @click="form_sk = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.sk"/>
|
||
<button @click="addZJuser(form.sk)" class="yesBtn">保存</button>
|
||
<button @click="form_sk = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</el-col>
|
||
<el-col class="item_info" :span="24">
|
||
<span class="key">腾讯id: </span>
|
||
<span v-if="form_thirdId">
|
||
{{ form.thirdId }}
|
||
<i class="el-icon-edit" @click="form_thirdId = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.thirdId"/>
|
||
<button @click="addZJuser(form.thirdId)" class="yesBtn">保存</button>
|
||
<button @click="form_thirdId = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</el-col>
|
||
<el-col class="item_info" :span="24">
|
||
<span class="key">腾讯appId: </span>
|
||
<span v-if="form_appId">
|
||
{{ form.appId }}
|
||
<i class="el-icon-edit" @click="form_appId = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.appId"/>
|
||
<button @click="addZJuser(form.appId)" class="yesBtn">保存</button>
|
||
<button @click="form_appId = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</el-col>
|
||
<el-col class="item_info" :span="24">
|
||
<span class="key">备注: </span>
|
||
<span v-if="form_remark">
|
||
{{ form.remark }}
|
||
<i class="el-icon-edit" @click="form_remark = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.remark"/>
|
||
<button @click="addZJuser(form.remark)" class="yesBtn">保存</button>
|
||
<button @click="form_remark = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</el-col>
|
||
<el-col class="item_info" :span="24">
|
||
<span class="key">{{ "渠道商id" }}</span>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="detailedInformation">
|
||
<el-row :gutter="20">
|
||
<el-col class="item_info" :span="24">
|
||
<span class="key">开户行: </span>
|
||
<span v-if="form_bankName">
|
||
{{ form.bankName }}
|
||
<i class="el-icon-edit" @click="form_bankName = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.bankName"/>
|
||
<button @click="addZJuser(form.bankName)" class="yesBtn">保存</button>
|
||
<button @click="form_bankName = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</el-col>
|
||
<el-col class="item_info" :span="24">
|
||
<span class="key">银行账号: </span>
|
||
<span v-if="form_bankAcc">
|
||
{{ form.bankAcc }}
|
||
<i class="el-icon-edit" @click="form_bankAcc = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.bankAcc"/>
|
||
<button @click="addZJuser(form.bankAcc)" class="yesBtn">保存</button>
|
||
<button @click="form_bankAcc = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</el-col>
|
||
<el-col class="item_info" :span="24">
|
||
<span class="key">发票抬头: </span>
|
||
<span v-if="form_identityName">
|
||
{{ form.identityName }}
|
||
<i class="el-icon-edit" @click="form_identityName = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.identityName"/>
|
||
<button @click="addZJuser(form.identityName)" class="yesBtn">保存</button>
|
||
<button @click="form_identityName = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</el-col>
|
||
<el-col class="item_info" :span="24">
|
||
<span class="key">发票联系电话: </span>
|
||
<span v-if="form_taxAddress">
|
||
{{ form.taxAddress }}
|
||
<i class="el-icon-edit" @click="form_taxAddress = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.taxAddress"/>
|
||
<button @click="addZJuser(form.taxAddress)" class="yesBtn">保存</button>
|
||
<button @click="form_taxAddress = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</el-col>
|
||
<el-col class="item_info" :span="24">
|
||
<span class="key">纳税人识别号: </span>
|
||
<span v-if="form_taxTel">
|
||
{{ form.taxTel }}
|
||
<i class="el-icon-edit" @click="form_taxTel = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.taxTel"/>
|
||
<button @click="addZJuser(form.taxTel)" class="yesBtn">保存</button>
|
||
<button @click="form_taxTel = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</el-col>
|
||
<el-col class="item_info" :span="24">
|
||
<span class="key">统一社会信用代码: </span>
|
||
<span v-if="form_taxpayerIdentity">
|
||
{{ form.taxpayerIdentity }}
|
||
<i class="el-icon-edit" @click="form_taxpayerIdentity = false"></i>
|
||
</span>
|
||
<span v-else>
|
||
<input type="text" v-model="form.taxpayerIdentity"/>
|
||
<button @click="addZJuser(form.taxpayerIdentity)" class="yesBtn">保存</button>
|
||
<button @click="form_taxpayerIdentity = true" class="cancelBtn">取消</button>
|
||
</span>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
|
||
<el-dialog title="请充值" :visible.sync="onfflineVisible" width="70%" :before-close="handleClose"
|
||
:append-to-body="true">
|
||
<el-form label-width="100px" :model="onfflineForm" ref="onfflineForm">
|
||
<el-form-item label="充值金额:" prop="amount">
|
||
<el-input v-model="onfflineForm.amount" placeholder="充值金额需¥1元以上哦"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="handleClose1">取 消</el-button>
|
||
<el-button type="primary" @click="onsubmit">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<el-dialog :visible.sync="dialogVisible" title="充值信息" width="500px" custom-class="get-charge-dialog"
|
||
class="myDialog" :append-to-body="true">
|
||
<div class="warning">注意：请在打款时备注摘里输入正确的充值码！</div>
|
||
<div class="fontSize common-charge-style">
|
||
<span class="font">账户名称： </span>
|
||
<span>开元云（北京）科技有限公司</span>
|
||
</div>
|
||
<div class="fontSize common-charge-style">
|
||
<span class="font">账户： </span>
|
||
<span>755960937210001</span>
|
||
</div>
|
||
<div class="fontSize common-charge-style">
|
||
<span class="font">开户行： </span>
|
||
<span>招商银行北京自贸试验区商务中心区支行</span>
|
||
</div>
|
||
<div class="common-charge-style">
|
||
<span class="font">充值码： </span>
|
||
<span><span
|
||
style="font-weight: bold;margin-right: 5px">{{ mailCode }}</span>(充值码请在当天内使用，过期无效)</span>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {getZJUserInfoAPI, getZJsaveUserAPI} from "@/api/sales/zj_userinfo";
|
||
import {myBalanceAPI} from "@/api/finance/customerRechargeManagement";
|
||
import {alipayAPI} from '@/api/finance/customerRechargeManagement'
|
||
import {editPasswordAPI} from "@/api/login";
|
||
import {addCustomerMailcodeAPI, getCustomerMailcodeAPI} from '@/api/customer/rechargeRecord'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
userAgent: window.navigator.userAgent,
|
||
isMobile: false,
|
||
dialogVisible: false,
|
||
mailCode: '',
|
||
updatePasswordRule: {
|
||
password: [
|
||
{required: true, message: "请输入旧密码", trigger: "blur"},
|
||
],
|
||
newpassword: [
|
||
{required: true, message: "请输入新密码", trigger: "blur"},
|
||
],
|
||
configPassword: [
|
||
{required: true, message: "请确认新密码", trigger: "blur"},
|
||
],
|
||
},
|
||
passwordForm: {
|
||
password: "",
|
||
newpassword: "",
|
||
configPassword: "",
|
||
},
|
||
activeName: 'first',
|
||
onfflineVisible: false,
|
||
onfflineForm: {
|
||
amount: ''
|
||
},
|
||
rules: {
|
||
amount: [{required: true, trigger: "blur", message: '请输入充值金额'}, {
|
||
pattern: /^[+]?(0|([1-9]\d*))?$/,
|
||
message: '请输入数字'
|
||
}],
|
||
},
|
||
balance: null,
|
||
showTX: false,
|
||
form_name: true,
|
||
form_remark: true,
|
||
form_tel: true,
|
||
form_email: true,
|
||
form_address: true,
|
||
form_ak: true,
|
||
form_sk: true,
|
||
form_thirdId: true,
|
||
form_bankName: true,
|
||
form_appId: true,
|
||
form_bankAcc: true,
|
||
form_identityName: true,
|
||
form_taxAddress: true,
|
||
form_taxTel: true,
|
||
form_taxpayerIdentity: true,
|
||
form_orgcode: true,
|
||
userId: sessionStorage.getItem("userId"),
|
||
form: {},
|
||
nameText: "",
|
||
url: ''
|
||
};
|
||
},
|
||
created() {
|
||
this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(this.userAgent);
|
||
},
|
||
mounted() {
|
||
this.getZJUserInfo();
|
||
this.myBalance();
|
||
},
|
||
methods: {
|
||
goPersonal() {
|
||
this.$router.push('/customer/customerInformation')
|
||
},
|
||
getRechargeCode() {
|
||
addCustomerMailcodeAPI({user_id: this.userId}).then(res => {
|
||
if (res.status) {
|
||
this.dialogVisible = true
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "success",
|
||
});
|
||
this.getCustomerMailcode()
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
})
|
||
},
|
||
getCustomerMailcode() {
|
||
getCustomerMailcodeAPI({user_id: this.userId}).then(res => {
|
||
if (res.status) {
|
||
this.mailCode = res.data
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
})
|
||
},
|
||
updatePassword() {
|
||
this.$refs.passwordForm.validate((valid) => {
|
||
if (valid) {
|
||
if (
|
||
this.passwordForm.newpassword == this.passwordForm.configPassword
|
||
) {
|
||
let params = {
|
||
id: this.userId,
|
||
password: this.passwordForm.password,
|
||
newpassword: this.passwordForm.newpassword,
|
||
};
|
||
editPasswordAPI(params).then((res) => {
|
||
if (res.status == true) {
|
||
this.$message({
|
||
message: "密码修改成功",
|
||
type: "success",
|
||
});
|
||
this.passwordDialog = false;
|
||
this.$router.push({name: "Login"});
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
this.$message({
|
||
message: "新旧密码不一致",
|
||
type: "error",
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
onffline() {
|
||
this.onfflineVisible = true
|
||
},
|
||
onsubmit() {
|
||
let pamars = {
|
||
amount: this.onfflineForm.amount,
|
||
userid: this.userId
|
||
}
|
||
this.$refs.onfflineForm.validate((valid) => {
|
||
if (valid) {
|
||
alipayAPI(pamars).then(res => {
|
||
if (res.status == true) {
|
||
this.$refs.onfflineForm.resetFields()
|
||
this.onfflineVisible = false
|
||
this.url = res.url
|
||
window.open(this.url, '_blank');
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
})
|
||
} else {
|
||
this.$message({
|
||
message: "请输入充值金额",
|
||
type: "error",
|
||
});
|
||
}
|
||
})
|
||
},
|
||
handleClose() {
|
||
this.$nextTick(() => {
|
||
this.$refs.onfflineForm.resetFields()
|
||
this.onfflineVisible = false
|
||
})
|
||
},
|
||
handleClose1() {
|
||
this.$nextTick(() => {
|
||
this.$refs.onfflineForm.resetFields()
|
||
this.onfflineVisible = false
|
||
})
|
||
},
|
||
cancel() {
|
||
this.$nextTick(() => {
|
||
this.$refs.onfflineForm.resetFields()
|
||
this.onfflineVisible = false
|
||
})
|
||
},
|
||
getZJUserInfo() {
|
||
var userid = {
|
||
userid: sessionStorage.getItem("userId"),
|
||
};
|
||
getZJUserInfoAPI(userid).then((res) => {
|
||
this.form = res.data;
|
||
this.nameText = this.form.name[0];
|
||
Object.keys(this.form).map((key, item) => {
|
||
if (this.form[key] == "") {
|
||
this.form[key] = "未填写";
|
||
}
|
||
});
|
||
});
|
||
},
|
||
myBalance() {
|
||
myBalanceAPI().then((res) => {
|
||
if (res.data == null) {
|
||
this.balance = 0;
|
||
} else {
|
||
this.balance = res.data;
|
||
}
|
||
});
|
||
},
|
||
addZJuser(index) {
|
||
if (index == "" || index == "未填写") {
|
||
this.getZJUserInfo();
|
||
this.open4();
|
||
return;
|
||
}
|
||
this.form_bankName = true;
|
||
this.form_name = true;
|
||
this.form_tel = true;
|
||
this.form_email = true;
|
||
this.form_address = true;
|
||
this.form_ak = true;
|
||
this.form_sk = true;
|
||
this.form_thirdId = true;
|
||
this.form_appId = true;
|
||
this.form_bankAcc = true;
|
||
this.form_identityName = true;
|
||
this.form_taxAddress = true;
|
||
this.form_taxTel = true;
|
||
this.form_taxpayerIdentity = true;
|
||
this.form_remark = true;
|
||
this.form_orgcode = true;
|
||
this.form.userid = this.userId;
|
||
|
||
Object.keys(this.form).map((key, item) => {
|
||
if (this.form[key] == "未填写") {
|
||
this.form[key] = "";
|
||
}
|
||
});
|
||
this.form.supId = 99;
|
||
getZJsaveUserAPI(this.form).then((res) => {
|
||
if (res.status == true) {
|
||
this.open2();
|
||
this.getZJUserInfo();
|
||
return;
|
||
}
|
||
this.getZJUserInfo();
|
||
this.notFindUsers();
|
||
});
|
||
},
|
||
open4() {
|
||
this.$message.error("请您填写正确的信息");
|
||
},
|
||
notFindUsers() {
|
||
this.$message.error("添加失败");
|
||
},
|
||
open2() {
|
||
this.$message({
|
||
showClose: true,
|
||
message: "添加成功",
|
||
type: "success",
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "./index.scss";
|
||
|
||
.aaa {
|
||
background-color: #ff0;
|
||
overflow: scroll !important;
|
||
}
|
||
|
||
#box {
|
||
padding: 0;
|
||
background-color: #f5f5f5;
|
||
height: 100%;
|
||
margin: 0;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
i {
|
||
margin-left: 12px;
|
||
color: #409eff;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
color: #66b1ff;
|
||
}
|
||
}
|
||
|
||
// 通用按钮样式
|
||
.yesBtn {
|
||
margin-left: 10px;
|
||
border: 1px solid #409eff;
|
||
color: #409eff;
|
||
background-color: transparent;
|
||
padding: 4px 10px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
background-color: #ecf5ff;
|
||
}
|
||
}
|
||
|
||
.cancelBtn {
|
||
margin-left: 5px;
|
||
border: 1px solid #909399;
|
||
color: #909399;
|
||
background-color: transparent;
|
||
padding: 4px 10px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
background-color: #f4f4f5;
|
||
}
|
||
}
|
||
|
||
//个人信息
|
||
.myInformation {
|
||
background-color: #ffffff;
|
||
min-width: 1100px;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
padding: 0 30px;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
position: relative;
|
||
}
|
||
|
||
.myDialog {
|
||
.warning {
|
||
margin-bottom: 15px;
|
||
color: #e6a23c;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.fontSize {
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.font {
|
||
font-weight: 600;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
// 基本信息
|
||
.essentialInformation {
|
||
width: 90%;
|
||
max-width: 1200px;
|
||
background-color: #fff;
|
||
margin: 20px auto;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
padding: 20px;
|
||
|
||
.one {
|
||
margin: 0 0 20px 0;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
color: #303133;
|
||
border-bottom: 1px solid #ebeef5;
|
||
}
|
||
|
||
p {
|
||
line-height: 30px;
|
||
margin: 10px 0;
|
||
font-size: 14px;
|
||
color: #606266;
|
||
}
|
||
|
||
//用户图片
|
||
.userImg {
|
||
width: 80px;
|
||
height: 80px;
|
||
line-height: 80px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #409eff, #66b1ff);
|
||
color: white;
|
||
font-size: 24px;
|
||
text-align: center;
|
||
margin: 0 60px 0 10px;
|
||
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
|
||
}
|
||
|
||
.disp_top {
|
||
display: flex;
|
||
padding: 15px 0;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
.userID {
|
||
width: 400px;
|
||
margin-right: 50px;
|
||
|
||
p {
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.userStatus {
|
||
width: 400px;
|
||
|
||
p {
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.disp {
|
||
display: flex;
|
||
|
||
> div:first-child {
|
||
flex: 0 0 120px;
|
||
color: #909399;
|
||
}
|
||
|
||
> div:last-child {
|
||
flex: 1;
|
||
|
||
p {
|
||
color: #303133;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//详细信息
|
||
.particular {
|
||
width: 90%;
|
||
max-width: 1200px;
|
||
font-size: 14px;
|
||
margin: 20px auto;
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
padding: 20px;
|
||
|
||
> div {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
> p:nth-child(1) {
|
||
margin: 0 0 10px 0;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
color: #303133;
|
||
border-bottom: 1px solid #ebeef5;
|
||
}
|
||
|
||
> p:nth-child(2) {
|
||
margin: 0 0 20px 0;
|
||
font-size: 14px;
|
||
color: #909399;
|
||
}
|
||
|
||
.particular_disp {
|
||
display: flex;
|
||
width: 500px;
|
||
margin-top: 15px;
|
||
|
||
> div:nth-child(1) {
|
||
flex: 0 0 120px;
|
||
color: #909399;
|
||
}
|
||
|
||
> div:nth-child(2) {
|
||
flex: 1;
|
||
|
||
p {
|
||
color: #303133;
|
||
margin-bottom: 15px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.hint {
|
||
font-size: 12px;
|
||
margin-left: 10px;
|
||
color: #e6a23c;
|
||
}
|
||
|
||
.balance-style {
|
||
color: #409eff;
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
|
||
.title-word {
|
||
color: #303133;
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
margin-left: 15px;
|
||
}
|
||
|
||
.after-icon {
|
||
width: 4px;
|
||
height: 18px;
|
||
border-radius: 2px;
|
||
background: #409eff;
|
||
}
|
||
|
||
.top-header {
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
|
||
.right-header {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 30px;
|
||
transform: translateY(-50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.price-word {
|
||
color: #606266;
|
||
font-size: 14px;
|
||
padding-right: 10px;
|
||
width: 120px;
|
||
}
|
||
|
||
.kong {
|
||
height: 20px;
|
||
width: 100%;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.common-charge-style {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
|
||
.font {
|
||
flex: 0 0 80px;
|
||
}
|
||
}
|
||
|
||
.item-style {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
|
||
// 移动端优化
|
||
.mobileAgent {
|
||
width: 100% !important;
|
||
padding: 15px;
|
||
background-color: #f5f5f5;
|
||
|
||
.title {
|
||
font-weight: 600;
|
||
font-size: 20px;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
margin: 10px 0;
|
||
color: #303133;
|
||
text-align: center;
|
||
}
|
||
|
||
.info {
|
||
margin: 0 0 15px 0;
|
||
font-size: 14px;
|
||
color: #909399;
|
||
text-align: center;
|
||
}
|
||
|
||
.userpic {
|
||
height: 70px;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 20px;
|
||
|
||
.userImg {
|
||
width: 70px;
|
||
height: 70px;
|
||
line-height: 70px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #409eff, #66b1ff);
|
||
color: white;
|
||
font-size: 20px;
|
||
text-align: center;
|
||
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
|
||
}
|
||
}
|
||
|
||
.user_account,
|
||
.user_info,
|
||
.detailedInformation,
|
||
.tenct {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
margin-bottom: 15px;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||
|
||
.hint {
|
||
font-size: 12px;
|
||
margin-left: 10px;
|
||
color: #e6a23c;
|
||
}
|
||
|
||
.item_info {
|
||
height: auto;
|
||
line-height: 1.5;
|
||
margin-bottom: 15px;
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid #eee;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.key {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #909399;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.val {
|
||
font-size: 15px;
|
||
color: #303133;
|
||
word-break: break-all;
|
||
}
|
||
|
||
input {
|
||
width: 100%;
|
||
margin: 5px 0;
|
||
padding: 8px 10px;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.zfb {
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
}
|
||
|
||
.user_info, .detailedInformation {
|
||
.item_info {
|
||
.key, .val {
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
.pcAgent {
|
||
display: none;
|
||
}
|
||
|
||
.get-charge-dialog {
|
||
width: 90vw !important;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 769px) {
|
||
.mobileAgent {
|
||
display: none;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
.get-charge-dialog {
|
||
padding-bottom: 15px;
|
||
}
|
||
</style>
|
||
|
||
|
||
|