<!-- * @Author: your name * @Date: 2019-11-07 17:48:53 * @LastEditTime: 2019-12-11 15:25:51 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit --> <!-- --> <template> <h-view id="my-info"> <h-header class="bar-custom"> <div slot="center">个人中心</div> </h-header> <div class="top" style="margin-top:-1px;"> <div class="card-top"> <img :src="upLoadObj" @click="checkType" > <div class="sign"> <span>{{ user_phone }}</span> <div> 电子签 <p :class="[elecStatus?'across':'un-across']" @click="certification" >{{ elecStatusDesceibe }}</p> </div> </div> </div> <div class="card"> <div class="card-info"> <div class="card-bottom"> <div v-if="(user_bp_type!=='TENANT')&&(user_bp_type!=='GUTA')" @click="goStart"> <img src="@/assets/myInfo/car.png" > <p>发车申请</p> </div> <div v-if="(user_bp_type==='TENANT')||(user_bp_type==='GUTA')" @click="changePay"> <img src="@/assets/myInfo/pay.png" > <p>首付还款</p> </div> <div v-if="(user_bp_type==='TENANT')||(user_bp_type==='GUTA')" @click="changeRent"> <img src="@/assets/myInfo/refund.png" > <p>租金还款</p> </div> </div> </div> </div> </div> <h-content class="my-content"> <div class="content-top"> <div class="userInfo">我的合同</div> <div class="my-contract"> <div class="content-wrap" @click="goSign"> <span v-if="signCount > 0" :class="{'content-wrap-class-width':signCount>99, 'content-wrap-class':signCount<99}" >{{ signCount > 99 ? '99+' : signCount }}</span> <img src="@/assets/myInfo/unSign.png" > <p>待签约</p> </div> <!-- <div class="content-wrap" @click="goConfirm"> <span :class="{'content-wrap-class-width':confirmCount>99, 'content-wrap-class':confirmCount<99}" >{{ confirmCount > 99 ? '99+' : confirmCount }}</span> <img src="@/assets/myInfo/unConfirm.png" > <p>待确认</p> </div>--> <div v-if="user_bp_type!=='FACTORY'" class="content-wrap" @click="goVideoSign"> <span v-if="vedioCount > 0" :class="{'content-wrap-class-width':vedioCount>99, 'content-wrap-class':vedioCount<99}" >{{ vedioCount > 99 ? '99+' : vedioCount }}</span> <img src="@/assets/myInfo/unFace.png" > <p>待面签</p> </div> <div v-if="(user_bp_type==='TENANT')||(user_bp_type==='GUTA')" class="content-wrap" @click="goCarConfirm" > <span v-if="carCount > 0" :class="{'content-wrap-class-width':carCount>99, 'content-wrap-class':carCount<99}" style="margin-left:5px;" >{{ carCount > 99 ? '99+' : carCount }}</span> <img src="@/assets/myInfo/carConfirm.png" > <p>发车确认</p> </div> </div> <list-item :item-height="44" class="list"> <item v-if="(user_bp_type==='TENANT')||(user_bp_type==='GUTA')" @click.native="goReimburse" > <img slot="left-icon" src="@/assets/myInfo/myRefund.png" class="left-icon" > <div slot="name">我的还款</div> </item> <!-- <item @click.native="changeDrawbackList"> <img slot="left-icon" src="@/assets/myInfo/repay.png" class="left-icon" > <div slot="name">业务退款</div> </item>--> <item @click.native="goMyProduct"> <img slot="left-icon" src="@/assets/myInfo/collect.png" class="left-icon" > <div slot="name">我的收藏</div> <div v-if="productCount > 0" slot="right-icon" :class="{'right-icon-width':productCount>99, 'right-icon':productCount<99}" >{{ productCount > 99 ? '99+' : productCount }}</div> </item> <item @click.native="changeHelp"> <img slot="left-icon" src="@/assets/myInfo/help.png" class="left-icon" > <div slot="name">帮助与反馈</div> </item> <item> <img slot="left-icon" src="@/assets/myInfo/about.png" class="left-icon" > <div slot="name">关于徐工</div> </item> <item @click.native="updateVersion"> <img slot="left-icon" src="@/assets/myInfo/refresh.png" class="left-icon" > <div slot="name">检查更新</div> </item> <item @click.native="openTest"> <img slot="left-icon" src="@/assets/myInfo/refresh.png" class="left-icon" > <div slot="name">当前版本</div> <div slot="content">{{ currentVersion }}</div> </item> <item @click.native="logOut"> <img slot="left-icon" src="@/assets/myInfo/exit.png" class="left-icon" > <div slot="name">退出登录</div> </item> </list-item> <button @click="approveBtn ? unBind() : changePageHead()">{{ description }}</button> </div> </h-content> <role-switch v-show="roleSwitchFlag" ref="roleSwitch" :roleList="roleList" @roleConfirm="roleConfirm" @roleCancle="roleCancle" /> </h-view> </template> <script> import roleSwitch from './role-switch-component' import defaultImg from '../../assets/myInfo/1.png' export default { components: { roleSwitch, }, data () { return { currentVersion: process.env.currentVersion, upLoadObj: defaultImg, // 上传的图片 flag: true, isAGENT: false, elecStatusDesceibe: '', user_bp_status: '', user_bp_class: '', bp_id: '', user_phone: '', user_bp_name: '', user_bp_type: '', signCount: '0', carNum: '0', confirmCount: '0', vedioCount: '0', productCount: '0', carCount: '0', description: '', bp_identity: '', approveBtn: false, elecStatus: false, roleSwitchFlag: false, // 选择角色模态框显示标志 roleList: [ { bp_type: 'TENANT', bp_type_desc: '主承租人', }, { bp_type: 'GUTA', bp_type_desc: '担保人', }, ], } }, watch: { user_bp_type (newVal, oldVal) { if (newVal === 'AGENT') { this.isAGENT = true } else { this.isAGENT = false } }, bp_identity (newVal, oldVal) { switch (newVal) { case 'NP_NO': { this.elecStatusDesceibe = '个人待认证' this.elecStatus = false break } case 'NP_YES': { this.elecStatusDesceibe = '个人认证通过' this.elecStatus = true break } case 'ORG_NO': { this.elecStatusDesceibe = '企业待认证' this.elecStatus = false break } case 'ORG_YES': { this.elecStatusDesceibe = '企业认证通过' this.elecStatus = true break } case 'ORG_L_NO': { this.elecStatusDesceibe = '法人待认证' this.elecStatus = false break } case 'ORG_L_YES': { this.elecStatusDesceibe = '法人认证通过' this.elecStatus = true break } case 'ORG_AUTH_NO': { this.elecStatusDesceibe = '授权人待认证' this.elecStatus = false break } case 'ORG_AUTH_YES': { this.elecStatusDesceibe = '授权人认证通过' this.elecStatus = true break } default: { this.elecStatusDesceibe = '用户未绑定' this.elecStatus = false break } } }, }, created () {}, beforeRouteEnter (to, from, next) { next(vm => { vm.userQuery() vm.numQuery() }) next() }, activated () {}, methods: { openTest () { cordova.InAppBrowser.open('http://www.baidu.com', '_blank', 'location=yes') }, // 查询头像 getHead () { let vm = this let url = process.env.basePath + 'app_attment_query' let param = { master: { source_type: 'HLS_APP_USER', pkvalue: vm.bp_id, }, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { if (res.info) { vm.upLoadObj = process.env.filePath + 'attachment_id=' + res.info.attachment_id + '&access_token=' + window.localStorage.access_token } } else { hlsPopup.showLongCenter(res.message) } }) }, // 选择角色后确定 roleConfirm (role) { this.roleSwitchFlag = false console.log('选择后的角色为:' + role) }, // 选择角色后取消 roleCancle () { this.roleSwitchFlag = false }, // 监听用户状态 watchBpStatus () { if (!this.bp_id && this.user_bp_status === 'NEW') { this.description = '用户绑定' this.approveBtn = false } else if (this.bp_id && this.user_bp_status === 'NEW') { this.description = '待提交' } else if (this.bp_id && this.user_bp_status === 'APPROVED') { this.description = '解除绑定' this.approveBtn = true } else if ( (this.bp_id && this.user_bp_status === 'RETURN') || (this.bp_id && this.user_bp_status === 'REJECT') ) { this.description = '审核未通过' } else { this.description = '审批中' } }, // 进入待签约功能,客户类型为经销商则进入经销商功能,非经销商则进入合同签约 goSign () { if (this.bp_id) { if (this.user_bp_type === 'AGENT') { this.$router.push({ name: 'ContractList', }) } else { this.$router.push({ name: 'ContractSigning', params: { user_bp_type: this.user_bp_type, }, }) } } else { hlsPopup.showLongCenter('请先进行用户绑定') } }, // 进入待确认,(进件确认) goConfirm () { this.$router.push({ name: 'IntoList', }) // this.$router.push({ // name: 'IframTest', // }) }, // 进入我的还款 goReimburse () { if (this.bp_id) { this.$router.push({ name: 'ReimburseMyselfList', }) } else { hlsPopup.showLongCenter('请先进行用户绑定') } }, // 进入我的收藏 goMyProduct () { this.$router.push({ name: 'MyProductList', }) }, // 进入发车申请 goStart () { if (this.bp_id) { this.$router.push({ name: 'StartList', }) } else { hlsPopup.showLongCenter('请先进行用户绑定') } }, // 进入发车确认 goCarConfirm () { if (this.bp_id) { this.$router.push({ name: 'ConfirmList', }) } else { hlsPopup.showLongCenter('请先进行用户绑定') } }, goVideoSign () { if (this.bp_id) { this.$router.push({ name: 'VideoSign', }) } else { hlsPopup.showLongCenter('请先进行用户绑定') } }, changeHelp () { this.$router.push({ name: 'HelpList', }) }, changeDrawbackList () { if (this.bp_id) { this.$router.push({ name: 'DrawbackList', }) } else { hlsPopup.showLongCenter('请先进行用户绑定') } }, changePay () { if (window.localStorage.getItem('bp_id') !== 'undefined') { this.$router.push({ name: 'FirstPay', }) } else { hlsPopup.showLongCenter('请先进行用户绑定') } }, changeRent () { if (window.localStorage.getItem('bp_id') !== 'undefined') { this.$router.push({ name: 'NewList', }) } else { hlsPopup.showLongCenter('请先进行用户绑定') } }, updateVersion () { if (vum.Platform.isAndroid()) { this.hote_update_version( '发现新版本是否更新', 'http://hlsapp.hand-china.com/file/XCMG/www/android/www.zip' ) } else { this.hote_update_version( '发现新版本是否更新', 'http://hlsapp.hand-china.com/file/XCMG/www/ios/www.zip' ) } }, hote_update_version (content, url) { hlsPopup.showConfirm({ title: '版本更新', content: content, onConfirm: function (index) { if (index === 1) { hotpatch.updateNewVersion(url) } }, }) }, logOut () { let vm = this hlsPopup.showConfirm({ title: '提示', content: '确定退出', onConfirm: function (index) { if (index === 1) { let width = window.localStorage.getItem('width') let height = window.localStorage.getItem('height') window.localStorage.clear() window.localStorage.setItem('width', width) window.localStorage.setItem('height', height) vm.$router.push('/login') } }, }) }, unBind () { let vm = this hlsPopup.showConfirm({ title: '提示', content: '确定解除绑定?', onConfirm: function (index) { if (index === 1) { // window.localStorage.clear() // vm.$router.push('/login') let myPhone = window.localStorage.getItem('user_phone') let myPassword = window.localStorage.getItem('password') let url = process.env.basePath + 'bp_unbind' let param = { master: { phone: myPhone, password: myPassword, }, } vm.hlsPopup.showLoading('请稍候') vm.hlsHttp .post(url, param) .then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.hlsPopup.showLongCenter('解绑成功') vm.userQuery() // vm.flag = true vm.approveBtn = false } else { vm.hlsPopup.showLongCenter(res.message) } }) .catch(() => { vm.hlsPopup.showLongCenter('传入参数异常') }) } }, }) }, checkType () { let vm = this this.hlsPopup.showActionSheet({ buttonArray: this.bp_id === undefined ? ['修改头像'] : ['修改头像', '用户信息', '角色切换'], callback: index => { if (index === 0) { this.imgUploadShow(vm.bp_id) } else if (index === 1) { this.changePageHead() } else if (index === 2) { this.$refs.roleSwitch.show() } }, }) }, // 图片上传入口 imgUploadShow (check_id) { let vm = this // vm.upload_list = [] hlsPopup.showActionSheet({ titleText: '请选择照片', buttonArray: ['拍照', '从相册取'], callback: index => { if (index === 0) { vm.imgUploadOpenCamera(check_id) } else { vm.imgUploadTakePicture(check_id) } }, }) }, imgUploadOpenCamera (check_id) { let vm = this let obj = { pkvalue: check_id, source_type: 'HLS_APP_USER', picture: '', check_id: check_id, filePath: '', attachment_id: '', user_id: 1, fileName: '', } let cameraoptions = { quality: 100, } let success = function (imgdata) { obj.picture = imgdata obj.filePath = imgdata vm.upLoadObj = obj.picture vm.save_picture(obj) } let error = function () { hlsPopup.showLongCenter('请拍照') } hlsUtil.openCamera(cameraoptions, success, error) }, imgUploadTakePicture (check_id) { let vm = this let obj = { pkvalue: check_id, source_type: 'HLS_APP_USER', picture: '', check_id: check_id, filePath: '', attachment_id: '', user_id: 1, fileName: '', } let cameraoptions = { quality: 100, } let success = function (imgUrl) { obj.picture = imgUrl[0] obj.filePath = imgUrl[0] vm.upLoadObj = obj.picture // 拍完一张立马执行保存图片逻辑 vm.save_picture(obj) } let error = function () { hlsPopup.showLongCenter('请选择图片') } vm.hlsUtil.takePicture(cameraoptions, success, error) }, openCamera (ocrType, type) { let vm = this let cameraoptions = { quality: 60, width: 1843, height: 1382, } let success = function (imgdata) { if (!imgdata) { hlsPopup.showLongCenter('请拍照') } } let error = function () { hlsPopup.showLongCenter('请拍照') } hlsUtil.openCamera(cameraoptions, success, error) }, takePicture (ocrType, type) { let vm = this var cameraoptions = { quality: 70, width: 1843, height: 1382, maxCount: 1, } let success = function (imgUrl) { if (imgUrl.length === 0) { hlsPopup.showLongCenter('请选择一张图片') } } let error = function () { hlsPopup.showLongCenter(error) } vm.hlsUtil.takePicture(cameraoptions, success, error) }, save_picture (obj) { if (obj) { let success = function () { hlsPopup.showLongCenter('头像上传成功') } hlsUtil.fileUploadSvc(obj, success) } else { hlsPopup.hideLoading() } }, changePageHead () { let vm = this if (vm.bp_id) { if ( vm.user_bp_status === 'NEW' || vm.user_bp_status === 'REJECT' || vm.user_bp_status === 'RETURN' ) { vm.flag = true if (vm.user_bp_class === 'NP') { vm.$router.push({ name: 'NaturePerson', params: { bp_id: this.bp_id, user_bp_name: this.user_bp_name, }, }) } else { this.$router.push({ name: 'EnterpriseNew', params: { bp_id: this.bp_id, user_bp_name: this.user_bp_name, }, }) } } else if (vm.user_bp_status === 'APPROVED') { vm.flag = false if (vm.user_bp_class === 'NP') { vm.$router.push({ name: 'NaturePerson', params: { bp_id: this.bp_id, user_bp_name: this.user_bp_name, isAGENT: this.isAGENT, status: 'APPROVED', isMultiRole: this.isMultiRole, }, }) } else { this.$router.push({ name: 'EnterpriseNew', params: { bp_id: this.bp_id, user_bp_name: this.user_bp_name, isAGENT: this.isAGENT, status: 'APPROVED', isMultiRole: this.isMultiRole, }, }) } } else if (vm.user_bp_status === 'APPROVING') { vm.flag = true this.hlsPopup.showLongCenter('您的绑定申请还在流程中') } } else { vm.flag = true this.$router.push({ name: 'UserBind', }) } }, userQuery () { let vm = this let url = $config.basePath + 'user_query' let param = { phone: window.localStorage.getItem('user_phone'), } vm.$post(url, param).then(function (res) { if (res.result === 'S') { if (res.info.user_bp_status === 'APPROVED') { vm.flag = false } vm.user_bp_status = res.info.user_bp_status vm.user_bp_class = res.info.user_bp_class vm.bp_id = res.info.user_bp_id vm.bp_identity = res.info.bp_identity window.localStorage.setItem('bp_id', res.info.user_bp_id) window.localStorage.setItem('bp_name', res.info.user_bp_name) vm.user_bp_name = res.info.user_bp_name vm.user_bp_type = res.info.user_bp_type vm.user_phone = res.info.user_phone vm.watchBpStatus() vm.getHead() if (vm.user_bp_type === 'AGENT') { vm.isAGENT = true } else { vm.isAGENT = false } if (vm.user_bp_type === 'GUTA' || vm.user_bp_type === 'TENANT') { vm.isMultiRole = true } else { vm.isMultiRole = false } } else { this.hlsPopup.showLongCenter(res.message) } }) }, numQuery () { let vm = this let url = $config.basePath + 'number_display_query' let param = { user_phone: window.localStorage.getItem('user_phone'), } vm.$post(url, param).then(function (res) { if (res.result === 'S') { if ('info' in res) { vm.signCount = res.info.con_confirm_num || 0 // vm.confirmCount = res.info.con_confirm_num vm.productCount = res.info.collect_num || 0 vm.carCount = res.info.car_confirm_num || 0 } } else { this.hlsPopup.showLongCenter(res.message) } }) }, // 认证入口 async certification () { let vm = this if (vm.bp_id) { if ( vm.bp_identity === 'NP_NO' || vm.bp_identity === 'ORG_L_NO' || vm.bp_identity === 'ORG_AUTH_NO' ) { let authUrl = await vm.getNpCertificationUrl() if (authUrl) { vm.$router.push({ name: 'Certification', params: { authUrl: authUrl, }, }) } else { // hlsPopup.showLongCenter('获取认证url失败') } } else if (vm.bp_identity === 'ORG_NO') { let authUrl = await vm.getOrgCertificationUrl() if (authUrl) { vm.$router.push({ name: 'Certification', params: { authUrl: authUrl, }, }) } else { // hlsPopup.showLongCenter('获取认证url失败') } } else { hlsPopup.showLongCenter('您已认证通过') } } else { hlsPopup.showLongCenter('请先进行用户绑定') } }, // 获取个人认证url async getNpCertificationUrl () { let vm = this let url = $config.basePath + 'auth_user_sign' let param = { phone: vm.user_phone, } hlsPopup.showLoading('请稍候') let res = await vm.$post(url, param) hlsPopup.hideLoading() if (res.info.code === 0) { return res.info.data.authUrl } else { hlsPopup.showLongCenter(res.info.msg) return null } }, // 获取企业认证url async getOrgCertificationUrl () { let vm = this let url = $config.basePath + 'auth_company_sign' let param = { phone: vm.user_phone, } hlsPopup.showLoading('请稍候') let res = await vm.$post(url, param) hlsPopup.hideLoading() if (res.info.code === 0) { return res.info.data.authUrl } else { hlsPopup.showLongCenter(res.info.msg) return null } }, }, } </script> <style lang="less" scoped> #my-info { .card-top { width: 330px; margin: 0 auto; height: 110px; display: flex; align-items: center; .sign { margin-left: 24px; height: 55px; span { font-family: PingFangSC-Semibold; font-size: 18px; color: #fff; margin-top: 10px; } div { display: flex; align-items: center; margin-top: 20px; font-family: PingFangSC-Regular; font-size: 12px; color: #ffffff; letter-spacing: 0; p { display: flex; align-items: center; justify-content: center; padding: 0 5px; height: 20px; margin-left: 10px; border: 1px solid #fff; border-radius: 4px; font-family: PingFangSC-Regular; font-size: 12px; color: #ffffff; letter-spacing: 0; } .across { background-color: #1d3fff; } .un-across { background: #0523ce; } } } img { width: 59px; height: 59px; border-radius: 50%; border: 1px solid #00469c; } } .top { width: 100%; height: 206px; background: url("../../assets/myInfo/back.png") no-repeat; background-size: 100% 156px; background-color: #efefef; .header { background-color: rgba(0, 0, 0, 0); .top-word { font-family: PingFangSC-Semibold; font-size: 17px; letter-spacing: 0.61px; color: #fff; } } .card { width: 359px; height: 108px; margin: 0 auto; z-index: 10; position: relative; top: 0px; left: 0px; background-color: #fff; border-radius: 4px; .card-info { width: 295px; margin: 0 auto; .card-bottom { height: 100px; width: 285px; margin: 0 auto; display: flex; justify-content: flex-start; align-items: center; text-align: center; p { font-family: PingFangSC-Regular; font-size: 13px; color: #3c3d48; margin-top: 5px; } img { width: 48px; height: 48px; } div:not(:first-child) { margin-left: 60px; } } } } } .my-content { background-color: #efefef; display: flex; justify-content: center; flex-wrap: wrap; .content-top { width: 359px; height: 121px; background-color: #fff; border-radius: 4px; margin-top: 18px; } .userInfo { height: 45px; line-height: 45px; color: @headerColor; font-size: 15px; margin-left: 16px; position: relative; } .userInfo::before { content: ""; display: block; width: 4px; height: 20px; background-color: @headerColor; position: absolute; left: -15px; top: 12px; } .my-contract { width: 295px; margin: 0 auto; display: flex; justify-content: flex-start; align-items: center; text-align: center; .content-wrap { position: relative; .content-wrap-class { position: absolute; top: -10px; left: 25px; font-size: 10px; width: 18px; height: 18px; text-align: center; line-height: 18px; background-color: red; color: #fff; border-radius: 50%; } .content-wrap-class-width { position: absolute; top: -10px; left: 25px; font-size: 10px; width: 24px; height: 18px; text-align: center; line-height: 18px; background-color: red; color: #fff; border-radius: 50%; } } img { width: 38px; height: 38px; } p { font-family: PingFangSC-Regular; font-size: 12px; color: #383f45; margin-top: 5px; } div:not(:first-child) { margin-left: 85px; } } .list { width: 359px; margin: 0 auto; background-color: #fff; font-family: PingFangSC-Regular; font-size: 14px; color: #656464; letter-spacing: 0; line-height: 18px; margin-top: 25px; } } button { width: 359px; height: 40px; background: @headerColor; border-radius: 4px; color: #fff; margin: 0 auto; margin-bottom: 68px; margin-top: 10px; } } .content { background-color: #fff; } .right-icon { width: 18px; height: 18px; font-size: 10px; text-align: center; line-height: 18px; background-color: red; color: #fff; border-radius: 50%; } .right-icon-width { width: 24px; height: 18px; font-size: 10px; text-align: center; line-height: 18px; background-color: red; color: #fff; border-radius: 50%; } @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { .platform-ios { #my-info { button { margin-bottom: 98px; } } } } // iPhoneXR适配 @media (device-width: 414px) and (device-height: 896px) { .platform-ios { #my-info { button { margin-bottom: 98px; } } } } </style>