chore(组件): 组件尽量使用异步导入模式
This commit is contained in:
@@ -2,8 +2,10 @@
|
||||
<view :style="themeColor" class="nc-modify-content">
|
||||
<view class="modify">
|
||||
<view>
|
||||
<image v-if="newImg == ''" :src="memberImg ? $util.img(memberImg) : $util.getDefaultImage().head" @error="memberImg = $util.getDefaultImage().head" mode="aspectFill"/>
|
||||
<image v-else :src="$util.img(newImg)" @error="newImg = $util.getDefaultImage().head" mode="aspectFill" />
|
||||
<image v-if="newImg == ''" :src="memberImg ? $util.img(memberImg) : $util.getDefaultImage().head"
|
||||
@error="memberImg = $util.getDefaultImage().head" mode="aspectFill" />
|
||||
<image v-else :src="$util.img(newImg)" @error="newImg = $util.getDefaultImage().head"
|
||||
mode="aspectFill" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="opection-box">
|
||||
@@ -28,167 +30,166 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import imgCropping from '@/pages_tool/components/img-cropping/cropping.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
memberImg: '',
|
||||
newImg: '',
|
||||
imgurl: ''
|
||||
};
|
||||
},
|
||||
components: {
|
||||
imgCropping
|
||||
},
|
||||
onShow() {
|
||||
if (!this.storeToken) {
|
||||
this.$util.redirectTo(
|
||||
'/pages_tool/login/login', {
|
||||
back: '/pages_tool/member/modify_face'
|
||||
},
|
||||
'redirectTo'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
this.memberImg = this.memberInfo.headimg;
|
||||
this.imgurl = this.memberInfo.headimg;
|
||||
},
|
||||
methods: {
|
||||
chooseImage() {
|
||||
this.$refs.imgCropping.fSelect();
|
||||
export default {
|
||||
components: {
|
||||
imgCropping: () => import('@/pages_tool/components/img-cropping/cropping.vue'),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
memberImg: '',
|
||||
newImg: '',
|
||||
imgurl: ''
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
if (!this.storeToken) {
|
||||
this.$util.redirectTo(
|
||||
'/pages_tool/login/login', {
|
||||
back: '/pages_tool/member/modify_face'
|
||||
},
|
||||
//上传返回图片
|
||||
myUpload(rsp) {
|
||||
let app_type = 'h5';
|
||||
let app_type_name = 'H5';
|
||||
'redirectTo'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// #ifdef MP
|
||||
app_type = 'weapp';
|
||||
app_type_name = 'weapp';
|
||||
// #endif
|
||||
uni.request({
|
||||
url: this.$config.baseUrl + '/api/upload/headimgBase64',
|
||||
method: 'POST',
|
||||
data: {
|
||||
app_type: app_type,
|
||||
app_type_name: app_type_name,
|
||||
images: rsp.base64
|
||||
},
|
||||
header: {
|
||||
'content-type': 'application/x-www-form-urlencoded;application/json'
|
||||
},
|
||||
dataType: 'json',
|
||||
responseType: 'text',
|
||||
success: res => {
|
||||
if (res.data.code == 0) {
|
||||
this.newImg = res.data.data.pic_path;
|
||||
this.imgurl = res.data.data.pic_path;
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
this.memberImg = this.memberInfo.headimg;
|
||||
this.imgurl = this.memberInfo.headimg;
|
||||
},
|
||||
methods: {
|
||||
chooseImage() {
|
||||
this.$refs.imgCropping.fSelect();
|
||||
},
|
||||
//上传返回图片
|
||||
myUpload(rsp) {
|
||||
let app_type = 'h5';
|
||||
let app_type_name = 'H5';
|
||||
|
||||
// #ifdef MP
|
||||
app_type = 'weapp';
|
||||
app_type_name = 'weapp';
|
||||
// #endif
|
||||
uni.request({
|
||||
url: this.$config.baseUrl + '/api/upload/headimgBase64',
|
||||
method: 'POST',
|
||||
data: {
|
||||
app_type: app_type,
|
||||
app_type_name: app_type_name,
|
||||
images: rsp.base64
|
||||
},
|
||||
header: {
|
||||
'content-type': 'application/x-www-form-urlencoded;application/json'
|
||||
},
|
||||
dataType: 'json',
|
||||
responseType: 'text',
|
||||
success: res => {
|
||||
if (res.data.code == 0) {
|
||||
this.newImg = res.data.data.pic_path;
|
||||
this.imgurl = res.data.data.pic_path;
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
this.$util.showToast({
|
||||
title: '头像上传失败'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
previewImage() {
|
||||
uni.previewImage({
|
||||
current: 0,
|
||||
urls: this.images
|
||||
});
|
||||
},
|
||||
save() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/member/modifyheadimg',
|
||||
data: {
|
||||
headimg: this.imgurl
|
||||
},
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
this.memberInfo.headimg = this.imgurl;
|
||||
this.$store.commit('setMemberInfo', this.memberInfo);
|
||||
this.$util.showToast({
|
||||
title: '头像上传失败'
|
||||
title: '头像修改成功'
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.$util.redirectTo('/pages_tool/member/info', {}, 'redirectTo');
|
||||
}, 2000);
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
previewImage() {
|
||||
uni.previewImage({
|
||||
current: 0,
|
||||
urls: this.images
|
||||
});
|
||||
},
|
||||
save() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/member/modifyheadimg',
|
||||
data: {
|
||||
headimg: this.imgurl
|
||||
},
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
this.memberInfo.headimg = this.imgurl;
|
||||
this.$store.commit('setMemberInfo', this.memberInfo);
|
||||
this.$util.showToast({
|
||||
title: '头像修改成功'
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.$util.redirectTo('/pages_tool/member/info', {}, 'redirectTo');
|
||||
}, 2000);
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
uploadFace() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
success: (chooseImageRes) => {
|
||||
const tempFilePaths = chooseImageRes.tempFilePaths;
|
||||
this.$api.upload({
|
||||
url: '/api/upload/headimg',
|
||||
filePath: tempFilePaths[0],
|
||||
fileType: 'image',
|
||||
success: (res) => {
|
||||
if (res.code) {
|
||||
this.newImg = res.data.pic_path;
|
||||
this.imgurl = res.data.pic_path;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
uploadFace() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
success: (chooseImageRes) => {
|
||||
const tempFilePaths = chooseImageRes.tempFilePaths;
|
||||
this.$api.upload({
|
||||
url: '/api/upload/headimg',
|
||||
filePath: tempFilePaths[0],
|
||||
fileType: 'image',
|
||||
success: (res) => {
|
||||
if (res.code) {
|
||||
this.newImg = res.data.pic_path;
|
||||
this.imgurl = res.data.pic_path;
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
page {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modify {
|
||||
position: relative;
|
||||
padding-top: 50rpx;
|
||||
|
||||
view {
|
||||
width: 500rpx;
|
||||
height: 500rpx;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
background-color: #ffffff;
|
||||
border: 4rpx solid #ffffff;
|
||||
border-radius: 100%;
|
||||
|
||||
.modify {
|
||||
position: relative;
|
||||
padding-top: 50rpx;
|
||||
|
||||
view {
|
||||
width: 500rpx;
|
||||
height: 500rpx;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
background-color: #ffffff;
|
||||
border: 4rpx solid #ffffff;
|
||||
border-radius: 100%;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.opection-box {
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.opec {
|
||||
width: 100%;
|
||||
padding: 0 10%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
button {
|
||||
padding: 0 30rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border: none;
|
||||
}
|
||||
.opection-box {
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.opec {
|
||||
width: 100%;
|
||||
padding: 0 10%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
button {
|
||||
padding: 0 30rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user