|
|
|
|
@ -5,7 +5,7 @@
|
|
|
|
|
<div class="cropper-content">
|
|
|
|
|
<div class="cropper-box">
|
|
|
|
|
<div class="cropper">
|
|
|
|
|
<vue-cropper ref="cropper" :img="option.img" :outputSize="option.outputSize" :outputType="option.outputType" :info="option.info" :canScale="option.canScale" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixed="option.fixed" :fixedNumber="option.fixedNumber" :canMoveBox="option.canMoveBox" :height="option.height" :infoTrue="option.infoTrue" :maxImgSize="option.maxImgSize" :enlarge="option.enlarge" :mode="option.mode" @realTime="realTime"> </vue-cropper>
|
|
|
|
|
<vue-cropper ref="cropper" :img="option.img" :outputSize="option.outputSize" :outputType="option.outputType" :info="option.info" :canScale="option.canScale" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixed="option.fixed" :fixedNumber="option.fixedNumber" :canMoveBox="option.canMoveBox" :height="option.height" :infoTrue="option.infoTrue" :maxImgSize="option.maxImgSize" :enlarge="option.enlarge" :mode="option.mode" @realTime="realTime"></vue-cropper>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="previewcontainer">
|
|
|
|
|
@ -24,9 +24,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<template slot="footer">
|
|
|
|
|
{{ }}
|
|
|
|
|
</template>
|
|
|
|
|
<template slot="footer">{{ }}</template>
|
|
|
|
|
</a-modal>
|
|
|
|
|
<div class="accountcontent w">
|
|
|
|
|
<div class="accountSetList">
|
|
|
|
|
@ -34,9 +32,11 @@
|
|
|
|
|
<div class="avatarbox">
|
|
|
|
|
<i @click="uploadavatar" style="cursor: pointer">
|
|
|
|
|
<span class="iconfont icon-morentouxiang" v-if="!userbaseInfo.imgSrc"></span>
|
|
|
|
|
<img :src="userbaseInfo.imgSrc" alt="" v-else />
|
|
|
|
|
<div class="mask"><div>修改头像</div></div></i
|
|
|
|
|
>
|
|
|
|
|
<img :src="userbaseInfo.imgSrc" alt v-else />
|
|
|
|
|
<div class="mask">
|
|
|
|
|
<div>修改头像</div>
|
|
|
|
|
</div>
|
|
|
|
|
</i>
|
|
|
|
|
<input type="file" ref="updateicon" @change="filepick($event)" style="display: none" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="username" v-if="userinfo.userName">Hi,{{ userinfo.userName }}</div>
|
|
|
|
|
@ -45,37 +45,50 @@
|
|
|
|
|
<div class="priceinfo">
|
|
|
|
|
<ul style="display: none">
|
|
|
|
|
<li @click="pushto('/accountsetting/myintegral')" :class="{ tagactive: activelist === 6 }">
|
|
|
|
|
<span><i class="iconfont icon-jifen"></i>我的积分</span
|
|
|
|
|
><span
|
|
|
|
|
><span>{{ userpoint >= 0 ? userpoint : "--" }}分</span><i class="iconfont icon-youjiantou"></i
|
|
|
|
|
></span>
|
|
|
|
|
<span>
|
|
|
|
|
<i class="iconfont icon-jifen"></i>我的积分
|
|
|
|
|
</span>
|
|
|
|
|
<span>
|
|
|
|
|
<span>{{ userpoint >= 0 ? userpoint : "--" }}分</span>
|
|
|
|
|
<i class="iconfont icon-youjiantou"></i>
|
|
|
|
|
</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li @click="pushto('/accountsetting/mycard')" :class="{ tagactive: activelist === 7 }">
|
|
|
|
|
<span><i class="iconfont icon-kaquan"></i>我的卡券</span
|
|
|
|
|
><span
|
|
|
|
|
><span>{{ cardinfo.recordCount ? cardinfo.recordCount : "0" }}张</span><i class="iconfont icon-youjiantou"></i
|
|
|
|
|
></span>
|
|
|
|
|
<span>
|
|
|
|
|
<i class="iconfont icon-kaquan"></i>我的卡券
|
|
|
|
|
</span>
|
|
|
|
|
<span>
|
|
|
|
|
<span>{{ cardinfo.recordCount ? cardinfo.recordCount : "0" }}张</span>
|
|
|
|
|
<i class="iconfont icon-youjiantou"></i>
|
|
|
|
|
</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li @click="pushto('/accountsetting/mybalance')" :class="{ tagactive: activelist === 8 }">
|
|
|
|
|
<span><i class="iconfont icon-yue"></i>我的余额</span
|
|
|
|
|
><span
|
|
|
|
|
><span>{{ userbalance >= 0 ? userbalance : "0" }}元</span> <i class="iconfont icon-youjiantou"></i
|
|
|
|
|
></span>
|
|
|
|
|
<span>
|
|
|
|
|
<i class="iconfont icon-yue"></i>我的余额
|
|
|
|
|
</span>
|
|
|
|
|
<span>
|
|
|
|
|
<span>{{ userbalance >= 0 ? userbalance : "0" }}元</span>
|
|
|
|
|
<i class="iconfont icon-youjiantou"></i>
|
|
|
|
|
</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<ul>
|
|
|
|
|
<li @click="pushto('/accountsetting/boundtel')" :class="{ tagactive: activelist === 1 }">
|
|
|
|
|
<span><i class="iconfont icon-gerenzhongxin-bangdingshouji"></i>绑定手机</span
|
|
|
|
|
><span
|
|
|
|
|
><span>{{ userinfo.hidetel }}</span>
|
|
|
|
|
<span>
|
|
|
|
|
<i class="iconfont icon-gerenzhongxin-bangdingshouji"></i>绑定手机
|
|
|
|
|
</span>
|
|
|
|
|
<span>
|
|
|
|
|
<span>{{ userinfo.hidetel }}</span>
|
|
|
|
|
<i class="iconfont icon-youjiantou"></i>
|
|
|
|
|
</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li @click="pushto('/accountsetting/boundwx')" :class="{ tagactive: activelist === 2 }">
|
|
|
|
|
<span><i class="iconfont icon-weixin1"></i>绑定微信</span
|
|
|
|
|
><span
|
|
|
|
|
><span v-if="userinfo.openIdAppDTDL">已绑定</span>
|
|
|
|
|
<span>
|
|
|
|
|
<i class="iconfont icon-weixin1"></i>绑定微信
|
|
|
|
|
</span>
|
|
|
|
|
<span>
|
|
|
|
|
<span v-if="userinfo.openIdAppDTDL">已绑定</span>
|
|
|
|
|
<i class="iconfont icon-youjiantou"></i>
|
|
|
|
|
</span>
|
|
|
|
|
</li>
|
|
|
|
|
@ -90,13 +103,15 @@
|
|
|
|
|
><span>{{ userbanklist.length }}张</span>
|
|
|
|
|
<i class="iconfont icon-youjiantou"></i>
|
|
|
|
|
</span>
|
|
|
|
|
</li> -->
|
|
|
|
|
</li>-->
|
|
|
|
|
</ul>
|
|
|
|
|
<ul>
|
|
|
|
|
<li @click="pushto('/accountsetting/loginpsw')" :class="{ tagactive: activelist === 0 }">
|
|
|
|
|
<span><i class="iconfont icon-gerenzhongxin-mima"></i>登录密码</span
|
|
|
|
|
><span
|
|
|
|
|
><span>已设置</span>
|
|
|
|
|
<span>
|
|
|
|
|
<i class="iconfont icon-gerenzhongxin-mima"></i>登录密码
|
|
|
|
|
</span>
|
|
|
|
|
<span>
|
|
|
|
|
<span>已设置</span>
|
|
|
|
|
<i class="iconfont icon-youjiantou"></i>
|
|
|
|
|
</span>
|
|
|
|
|
</li>
|
|
|
|
|
@ -111,7 +126,17 @@
|
|
|
|
|
><span v-else>未认证</span>
|
|
|
|
|
<i class="iconfont icon-youjiantou"></i>
|
|
|
|
|
</span>
|
|
|
|
|
</li> -->
|
|
|
|
|
</li>-->
|
|
|
|
|
</ul>
|
|
|
|
|
<ul>
|
|
|
|
|
<li @click="pushto('/accountsetting/bocaiTV')" :class="{ tagactive: activelist === 9 }">
|
|
|
|
|
<span>
|
|
|
|
|
<i class="iconfont icon-tv"></i>伯才TV
|
|
|
|
|
</span>
|
|
|
|
|
<span>
|
|
|
|
|
<i class="iconfont icon-youjiantou"></i>
|
|
|
|
|
</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="rightcontent">
|
|
|
|
|
@ -129,14 +154,14 @@ import {
|
|
|
|
|
getPointApi,
|
|
|
|
|
// uploadUserAvatarApi,
|
|
|
|
|
userCardApi,
|
|
|
|
|
} from "../../../api/userinfo";
|
|
|
|
|
import { VueCropper } from "vue-cropper";
|
|
|
|
|
import request from "@/utils/request";
|
|
|
|
|
} from '../../../api/userinfo'
|
|
|
|
|
import { VueCropper } from 'vue-cropper'
|
|
|
|
|
import request from '@/utils/request'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
inject: ["reload"],
|
|
|
|
|
inject: ['reload'],
|
|
|
|
|
// 组件名称
|
|
|
|
|
name: "",
|
|
|
|
|
name: '',
|
|
|
|
|
// 局部注册的组件
|
|
|
|
|
components: {
|
|
|
|
|
VueCropper,
|
|
|
|
|
@ -148,20 +173,20 @@ export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
userinfo: {}, // 用户基础信息
|
|
|
|
|
userbalance: "",
|
|
|
|
|
userpoint: "",
|
|
|
|
|
activelist: "",
|
|
|
|
|
userbalance: '',
|
|
|
|
|
userpoint: '',
|
|
|
|
|
activelist: '',
|
|
|
|
|
userbanklist: [],
|
|
|
|
|
cardinfo: {},
|
|
|
|
|
visible: false,
|
|
|
|
|
previewStyle3: {},
|
|
|
|
|
previews: {},
|
|
|
|
|
userbaseInfo: JSON.parse(localStorage.getItem("LOGIN_DATA")),
|
|
|
|
|
userbaseInfo: JSON.parse(localStorage.getItem('LOGIN_DATA')),
|
|
|
|
|
option: {
|
|
|
|
|
// 裁剪图片配置
|
|
|
|
|
img: "", // 裁剪图片的地址
|
|
|
|
|
img: '', // 裁剪图片的地址
|
|
|
|
|
outputSize: 1, // 裁剪生成图片的质量(可选0.1 - 1)
|
|
|
|
|
outputType: "png", // 裁剪生成图片的格式(jpeg || png || webp)
|
|
|
|
|
outputType: 'png', // 裁剪生成图片的格式(jpeg || png || webp)
|
|
|
|
|
info: true, // 图片大小信息
|
|
|
|
|
canScale: true, // 图片是否允许滚轮缩放
|
|
|
|
|
autoCrop: true, // 是否默认生成截图框
|
|
|
|
|
@ -179,20 +204,20 @@ export default {
|
|
|
|
|
infoTrue: true, // true为展示真实输出图片宽高,false展示看到的截图框宽高
|
|
|
|
|
maxImgSize: 290, // 限制图片最大宽度和高度
|
|
|
|
|
enlarge: 1, // 图片根据截图框输出比例倍数
|
|
|
|
|
mode: "auto", // 图片默认渲染方式
|
|
|
|
|
mode: 'auto', // 图片默认渲染方式
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 计算属性
|
|
|
|
|
computed: {
|
|
|
|
|
path() {
|
|
|
|
|
return this.$route.fullPath;
|
|
|
|
|
return this.$route.fullPath
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
// 侦听器
|
|
|
|
|
watch: {
|
|
|
|
|
path() {
|
|
|
|
|
this.changeactive();
|
|
|
|
|
this.changeactive()
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
// 生命周期钩子 注:没用到的钩子请自行删除
|
|
|
|
|
@ -200,13 +225,13 @@ export default {
|
|
|
|
|
* 组件实例创建完成,属性已绑定,但DOM还未生成,$ el属性还不存在
|
|
|
|
|
*/
|
|
|
|
|
created() {
|
|
|
|
|
this.getUserInfo();
|
|
|
|
|
this.changeactive();
|
|
|
|
|
this.getuserbnak();
|
|
|
|
|
this.getUserBalanceInfo();
|
|
|
|
|
this.getPoint();
|
|
|
|
|
this.getcardcount();
|
|
|
|
|
console.log(this.userbaseInfo);
|
|
|
|
|
this.getUserInfo()
|
|
|
|
|
this.changeactive()
|
|
|
|
|
this.getuserbnak()
|
|
|
|
|
this.getUserBalanceInfo()
|
|
|
|
|
this.getPoint()
|
|
|
|
|
this.getcardcount()
|
|
|
|
|
console.log(this.userbaseInfo)
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* el 被新创建的 vm.el 替换,并挂载到实例上去之后调用该钩子。
|
|
|
|
|
@ -217,215 +242,217 @@ export default {
|
|
|
|
|
methods: {
|
|
|
|
|
async getUserInfo() {
|
|
|
|
|
try {
|
|
|
|
|
const { data } = await userBaseInfoApi();
|
|
|
|
|
const { data } = await userBaseInfoApi()
|
|
|
|
|
if (data.status === 200) {
|
|
|
|
|
this.userinfo = data.data;
|
|
|
|
|
console.log(this.userinfo);
|
|
|
|
|
const beforetel = this.userinfo.tel.substr(0, 3);
|
|
|
|
|
const aftertel = this.userinfo.tel.substr(7, 4);
|
|
|
|
|
this.userinfo.hidetel = beforetel + "****" + aftertel;
|
|
|
|
|
const beforeId = this.userinfo.IDCard.substr(0, 1);
|
|
|
|
|
const afterId = this.userinfo.IDCard.substr(17, 1);
|
|
|
|
|
this.userinfo.hideId = beforeId + "****************" + afterId;
|
|
|
|
|
const hidename = this.userinfo.realName.substr(this.userinfo.realName.length - 1, 1);
|
|
|
|
|
this.userinfo = data.data
|
|
|
|
|
console.log(this.userinfo)
|
|
|
|
|
const beforetel = this.userinfo.tel.substr(0, 3)
|
|
|
|
|
const aftertel = this.userinfo.tel.substr(7, 4)
|
|
|
|
|
this.userinfo.hidetel = beforetel + '****' + aftertel
|
|
|
|
|
const beforeId = this.userinfo.IDCard.substr(0, 1)
|
|
|
|
|
const afterId = this.userinfo.IDCard.substr(17, 1)
|
|
|
|
|
this.userinfo.hideId = beforeId + '****************' + afterId
|
|
|
|
|
const hidename = this.userinfo.realName.substr(this.userinfo.realName.length - 1, 1)
|
|
|
|
|
// this.userinfo.hidename = hidename;
|
|
|
|
|
let newstr = "";
|
|
|
|
|
let newstr = ''
|
|
|
|
|
for (let i = 0; i < this.userinfo.realName.length - 1; i++) {
|
|
|
|
|
newstr += "*";
|
|
|
|
|
newstr += '*'
|
|
|
|
|
}
|
|
|
|
|
this.userinfo.hidename = newstr + hidename;
|
|
|
|
|
console.log(aftertel);
|
|
|
|
|
console.log(beforetel);
|
|
|
|
|
this.userinfo.hidename = newstr + hidename
|
|
|
|
|
console.log(aftertel)
|
|
|
|
|
console.log(beforetel)
|
|
|
|
|
}
|
|
|
|
|
console.log(data);
|
|
|
|
|
console.log(data)
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log(error);
|
|
|
|
|
console.log(error)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
pushto(url) {
|
|
|
|
|
this.$router.push(url);
|
|
|
|
|
this.$router.push(url)
|
|
|
|
|
},
|
|
|
|
|
changeactive() {
|
|
|
|
|
if (this.path.indexOf("/loginpsw") > -1) {
|
|
|
|
|
this.activelist = 0;
|
|
|
|
|
} else if (this.path.indexOf("/boundtel") > -1) {
|
|
|
|
|
this.activelist = 1;
|
|
|
|
|
} else if (this.path.indexOf("/boundwx") > -1) {
|
|
|
|
|
this.activelist = 2;
|
|
|
|
|
} else if (this.path.indexOf("/boundbankcard") > -1) {
|
|
|
|
|
this.activelist = 3;
|
|
|
|
|
} else if (this.path.indexOf("/realname") > -1) {
|
|
|
|
|
this.activelist = 4;
|
|
|
|
|
} else if (this.path.indexOf("/myintegral") > -1) {
|
|
|
|
|
this.activelist = 6;
|
|
|
|
|
} else if (this.path.indexOf("/mycard") > -1) {
|
|
|
|
|
this.activelist = 7;
|
|
|
|
|
} else if (this.path.indexOf("/mybalance") > -1) {
|
|
|
|
|
this.activelist = 8;
|
|
|
|
|
if (this.path.indexOf('/loginpsw') > -1) {
|
|
|
|
|
this.activelist = 0
|
|
|
|
|
} else if (this.path.indexOf('/boundtel') > -1) {
|
|
|
|
|
this.activelist = 1
|
|
|
|
|
} else if (this.path.indexOf('/boundwx') > -1) {
|
|
|
|
|
this.activelist = 2
|
|
|
|
|
} else if (this.path.indexOf('/boundbankcard') > -1) {
|
|
|
|
|
this.activelist = 3
|
|
|
|
|
} else if (this.path.indexOf('/realname') > -1) {
|
|
|
|
|
this.activelist = 4
|
|
|
|
|
} else if (this.path.indexOf('/myintegral') > -1) {
|
|
|
|
|
this.activelist = 6
|
|
|
|
|
} else if (this.path.indexOf('/mycard') > -1) {
|
|
|
|
|
this.activelist = 7
|
|
|
|
|
} else if (this.path.indexOf('/mybalance') > -1) {
|
|
|
|
|
this.activelist = 8
|
|
|
|
|
}else if (this.path.indexOf('/bocaiTV') > -1) {
|
|
|
|
|
this.activelist = 9
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async getuserbnak() {
|
|
|
|
|
try {
|
|
|
|
|
const { data } = await getUserBankListApi();
|
|
|
|
|
console.log(data);
|
|
|
|
|
this.userbanklist = data.data;
|
|
|
|
|
const { data } = await getUserBankListApi()
|
|
|
|
|
console.log(data)
|
|
|
|
|
this.userbanklist = data.data
|
|
|
|
|
this.userbanklist.forEach((ele) => {
|
|
|
|
|
ele.newbankNo = ele.bankNo.substr(14, 4);
|
|
|
|
|
});
|
|
|
|
|
ele.newbankNo = ele.bankNo.substr(14, 4)
|
|
|
|
|
})
|
|
|
|
|
// const newdata = this.userbanklist.bankNo.substr(14, 4);
|
|
|
|
|
// console.log(newdata);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log(error);
|
|
|
|
|
console.log(error)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async getUserBalanceInfo() {
|
|
|
|
|
try {
|
|
|
|
|
const { data } = await userBalanceApi();
|
|
|
|
|
this.userbalance = data.data.balance / 100;
|
|
|
|
|
const { data } = await userBalanceApi()
|
|
|
|
|
this.userbalance = data.data.balance / 100
|
|
|
|
|
|
|
|
|
|
console.log(data);
|
|
|
|
|
console.log(this.userbalance);
|
|
|
|
|
console.log(data)
|
|
|
|
|
console.log(this.userbalance)
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log(error);
|
|
|
|
|
console.log(error)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async getPoint() {
|
|
|
|
|
try {
|
|
|
|
|
const { data } = await getPointApi();
|
|
|
|
|
console.log(data);
|
|
|
|
|
this.userpoint = data.data.pointTotal;
|
|
|
|
|
const { data } = await getPointApi()
|
|
|
|
|
console.log(data)
|
|
|
|
|
this.userpoint = data.data.pointTotal
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log(error);
|
|
|
|
|
console.log(error)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async getcardcount() {
|
|
|
|
|
try {
|
|
|
|
|
const { data } = await userCardApi();
|
|
|
|
|
console.log(data);
|
|
|
|
|
this.cardinfo = data.data;
|
|
|
|
|
const { data } = await userCardApi()
|
|
|
|
|
console.log(data)
|
|
|
|
|
this.cardinfo = data.data
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log(error);
|
|
|
|
|
console.log(error)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
uploadavatar() {
|
|
|
|
|
//上传头像
|
|
|
|
|
this.$refs.updateicon.click();
|
|
|
|
|
this.$refs.updateicon.click()
|
|
|
|
|
},
|
|
|
|
|
filepick(e) {
|
|
|
|
|
console.log(this.$refs.updateicon);
|
|
|
|
|
console.log(e);
|
|
|
|
|
const that = this;
|
|
|
|
|
this.visible = true;
|
|
|
|
|
const imgFile = new FileReader();
|
|
|
|
|
imgFile.readAsDataURL(this.$refs.updateicon.files[0]);
|
|
|
|
|
console.log(this.$refs.updateicon)
|
|
|
|
|
console.log(e)
|
|
|
|
|
const that = this
|
|
|
|
|
this.visible = true
|
|
|
|
|
const imgFile = new FileReader()
|
|
|
|
|
imgFile.readAsDataURL(this.$refs.updateicon.files[0])
|
|
|
|
|
imgFile.onload = function () {
|
|
|
|
|
that.option.img = this.result;
|
|
|
|
|
};
|
|
|
|
|
that.option.img = this.result
|
|
|
|
|
}
|
|
|
|
|
// this.option.img = window.URL.createObjectURL(
|
|
|
|
|
// this.$refs.updateicon.files[0]
|
|
|
|
|
// )
|
|
|
|
|
this.filelength = this.$refs.updateicon.files.length;
|
|
|
|
|
this.filelength = this.$refs.updateicon.files.length
|
|
|
|
|
},
|
|
|
|
|
realTime(data) {
|
|
|
|
|
// data.div.height = "50px";
|
|
|
|
|
// data.div.width = "50px";
|
|
|
|
|
// data.w = 50;
|
|
|
|
|
// data.h = 50;
|
|
|
|
|
console.log(data);
|
|
|
|
|
console.log(data)
|
|
|
|
|
|
|
|
|
|
var previews = data;
|
|
|
|
|
var h = 0.5;
|
|
|
|
|
var w = 0.2;
|
|
|
|
|
var previews = data
|
|
|
|
|
var h = 0.5
|
|
|
|
|
var w = 0.2
|
|
|
|
|
this.previewStyle1 = {
|
|
|
|
|
width: previews.w + "px",
|
|
|
|
|
height: previews.h + "px",
|
|
|
|
|
overflow: "hidden",
|
|
|
|
|
margin: "0",
|
|
|
|
|
width: previews.w + 'px',
|
|
|
|
|
height: previews.h + 'px',
|
|
|
|
|
overflow: 'hidden',
|
|
|
|
|
margin: '0',
|
|
|
|
|
zoom: h,
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.previewStyle2 = {
|
|
|
|
|
width: previews.w + "px",
|
|
|
|
|
height: previews.h + "px",
|
|
|
|
|
overflow: "hidden",
|
|
|
|
|
margin: "0",
|
|
|
|
|
width: previews.w + 'px',
|
|
|
|
|
height: previews.h + 'px',
|
|
|
|
|
overflow: 'hidden',
|
|
|
|
|
margin: '0',
|
|
|
|
|
zoom: w,
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 固定为 100 宽度
|
|
|
|
|
this.previewStyle3 = {
|
|
|
|
|
width: previews.w + "px",
|
|
|
|
|
height: previews.h + "px",
|
|
|
|
|
overflow: "hidden",
|
|
|
|
|
margin: "0",
|
|
|
|
|
width: previews.w + 'px',
|
|
|
|
|
height: previews.h + 'px',
|
|
|
|
|
overflow: 'hidden',
|
|
|
|
|
margin: '0',
|
|
|
|
|
zoom: 100 / previews.w,
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 固定为 100 高度
|
|
|
|
|
this.previewStyle4 = {
|
|
|
|
|
width: previews.w + "px",
|
|
|
|
|
height: previews.h + "px",
|
|
|
|
|
overflow: "hidden",
|
|
|
|
|
margin: "0",
|
|
|
|
|
width: previews.w + 'px',
|
|
|
|
|
height: previews.h + 'px',
|
|
|
|
|
overflow: 'hidden',
|
|
|
|
|
margin: '0',
|
|
|
|
|
zoom: 100 / previews.h,
|
|
|
|
|
};
|
|
|
|
|
this.previews = data;
|
|
|
|
|
}
|
|
|
|
|
this.previews = data
|
|
|
|
|
},
|
|
|
|
|
modalcancel() {
|
|
|
|
|
this.visible = false;
|
|
|
|
|
this.$refs.updateicon.value = "";
|
|
|
|
|
this.filelength = this.$refs.updateicon.files.length;
|
|
|
|
|
this.visible = false
|
|
|
|
|
this.$refs.updateicon.value = ''
|
|
|
|
|
this.filelength = this.$refs.updateicon.files.length
|
|
|
|
|
|
|
|
|
|
// console.log(this.filelength)
|
|
|
|
|
},
|
|
|
|
|
changeavatar() {
|
|
|
|
|
let that = this;
|
|
|
|
|
let that = this
|
|
|
|
|
this.$refs.cropper.getCropBlob((data) => {
|
|
|
|
|
// const that = this;
|
|
|
|
|
// do something
|
|
|
|
|
// console.log(data)
|
|
|
|
|
const imgFile = new FileReader();
|
|
|
|
|
imgFile.readAsDataURL(data);
|
|
|
|
|
const imgFile = new FileReader()
|
|
|
|
|
imgFile.readAsDataURL(data)
|
|
|
|
|
imgFile.onload = function () {
|
|
|
|
|
let formData1 = new FormData();
|
|
|
|
|
formData1.append("imgName", "abc.png");
|
|
|
|
|
formData1.append("userImg", this.result);
|
|
|
|
|
let formData1 = new FormData()
|
|
|
|
|
formData1.append('imgName', 'abc.png')
|
|
|
|
|
formData1.append('userImg', this.result)
|
|
|
|
|
|
|
|
|
|
request({
|
|
|
|
|
method: "post",
|
|
|
|
|
url: "/yishoudan/user/changeUserImgsrc",
|
|
|
|
|
method: 'post',
|
|
|
|
|
url: '/yishoudan/user/changeUserImgsrc',
|
|
|
|
|
data: formData1,
|
|
|
|
|
withCredentials: true,
|
|
|
|
|
// headers: {'Content-Type': 'application/x-www-form-urlencoded'}
|
|
|
|
|
|
|
|
|
|
headers: {
|
|
|
|
|
"Content-Type": "multipart/form-data;boundary = " + new Date().getTime(),
|
|
|
|
|
'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime(),
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
.then(({ data }) => {
|
|
|
|
|
console.log(data);
|
|
|
|
|
console.log();
|
|
|
|
|
console.log(data)
|
|
|
|
|
console.log()
|
|
|
|
|
if (data.status === 200) {
|
|
|
|
|
let userinfo = JSON.parse(localStorage.getItem("LOGIN_DATA"));
|
|
|
|
|
let userinfo = JSON.parse(localStorage.getItem('LOGIN_DATA'))
|
|
|
|
|
// userinfo.imgSrc =;
|
|
|
|
|
localStorage.setItem("LOGIN_DATA", JSON.stringify({ ...userinfo, imgSrc: data.data.url }));
|
|
|
|
|
that.reload();
|
|
|
|
|
localStorage.setItem('LOGIN_DATA', JSON.stringify({ ...userinfo, imgSrc: data.data.url }))
|
|
|
|
|
that.reload()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch((error) => {
|
|
|
|
|
console.log(error);
|
|
|
|
|
});
|
|
|
|
|
console.log(data);
|
|
|
|
|
};
|
|
|
|
|
this.visible = false;
|
|
|
|
|
});
|
|
|
|
|
console.log(error)
|
|
|
|
|
})
|
|
|
|
|
console.log(data)
|
|
|
|
|
}
|
|
|
|
|
this.visible = false
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// console.log(this.avatarready)
|
|
|
|
|
// console.log(this.filelength)
|
|
|
|
|
this.AvatarWaringmsgshow = false;
|
|
|
|
|
this.AvatarWaringmsgshow = false
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
|
|
@ -524,7 +551,7 @@ export default {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
&:nth-child(-n + 2):after {
|
|
|
|
|
position: absolute;
|
|
|
|
|
content: "";
|
|
|
|
|
content: '';
|
|
|
|
|
display: inline-block;
|
|
|
|
|
height: 1px;
|
|
|
|
|
width: 314px;
|
|
|
|
|
@ -588,7 +615,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
&:nth-child(-n + 3):after {
|
|
|
|
|
position: absolute;
|
|
|
|
|
content: "";
|
|
|
|
|
content: '';
|
|
|
|
|
display: inline-block;
|
|
|
|
|
height: 1px;
|
|
|
|
|
width: 314px;
|
|
|
|
|
@ -639,7 +666,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
.rightcontent {
|
|
|
|
|
width: 838px;
|
|
|
|
|
height: 600px;
|
|
|
|
|
min-height: 600px;
|
|
|
|
|
padding: 0 16px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
border: 1px solid #ededed;
|
|
|
|
|
|