i
This commit is contained in:
@@ -1,15 +1,328 @@
|
||||
<script lang="ts">
|
||||
import {defineComponent} from 'vue'
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from "vue";
|
||||
import Taro from "@tarojs/taro";
|
||||
import headImg from "../static/def_avatar.png";
|
||||
import logoImg from "../static/logo.jpg";
|
||||
import { BASE_URL } from "@/utils/request";
|
||||
import { getPhone, login } from "@/api/user";
|
||||
|
||||
export default defineComponent({
|
||||
name: "UserModal"
|
||||
})
|
||||
const props = defineProps({
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(["closeEdit", "update:isShow"]);
|
||||
|
||||
const userInfo = ref({
|
||||
nickname: "",
|
||||
avatar: "",
|
||||
phone: "",
|
||||
});
|
||||
|
||||
const show = computed({
|
||||
get: (): boolean => props.isShow,
|
||||
set: (val) => {
|
||||
emits("update:isShow", val);
|
||||
},
|
||||
});
|
||||
|
||||
const mp_is_new = ref(true);
|
||||
|
||||
const canvasStatus = ref(false);
|
||||
|
||||
const closeAttr = () => {
|
||||
emits("closeEdit");
|
||||
};
|
||||
|
||||
const onChooseAvatar = (e) => {
|
||||
const { avatarUrl } = e.detail;
|
||||
console.log(avatarUrl);
|
||||
Taro.uploadFile({
|
||||
url: `${BASE_URL}/upload`,
|
||||
filePath: avatarUrl,
|
||||
name: "file",
|
||||
success: function (res) {
|
||||
const data = JSON.parse(res.data);
|
||||
userInfo.value.avatar = data.data.data;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const uploadPic = () => {
|
||||
canvasStatus.value = true;
|
||||
};
|
||||
|
||||
const getPhoneNumber = async (e: any) => {
|
||||
Taro.showLoading({
|
||||
title: "授权手机号中",
|
||||
mask: true,
|
||||
});
|
||||
const { code } = e.detail;
|
||||
const res = await getPhone({
|
||||
code: code,
|
||||
});
|
||||
userInfo.value.phone = res.data.phone;
|
||||
Taro.hideLoading();
|
||||
};
|
||||
|
||||
const formSubmit = async (e: any) => {
|
||||
if (!userInfo.value.avatar)
|
||||
return Taro.showToast({
|
||||
title: "请上传头像",
|
||||
icon: "none",
|
||||
});
|
||||
userInfo.value.nickname = e.detail.value.nickname;
|
||||
if (!userInfo.value.nickname)
|
||||
return Taro.showToast({
|
||||
title: "请输入昵称",
|
||||
icon: "none",
|
||||
});
|
||||
if (!userInfo.value.phone)
|
||||
return Taro.showToast({
|
||||
title: "请授权手机号码",
|
||||
icon: "none",
|
||||
});
|
||||
const res = await login({
|
||||
Code: Taro.getStorageSync("wx_code"),
|
||||
NickName: userInfo.value.nickname,
|
||||
AvatarUrl: userInfo.value.avatar,
|
||||
Phone: userInfo.value.phone,
|
||||
Referee: Taro.getStorageSync("bind_id") || "",
|
||||
});
|
||||
emits("closeEdit");
|
||||
Taro.showToast({
|
||||
title: res.msg,
|
||||
icon: "success",
|
||||
duration: 2000,
|
||||
});
|
||||
Taro.setStorageSync("token", res.data.token);
|
||||
setTimeout(() => {
|
||||
Taro.removeStorageSync("wx_code");
|
||||
Taro.removeStorageSync("bind_id");
|
||||
Taro.switchTab({
|
||||
url: "/pages/user/index",
|
||||
});
|
||||
}, 2000);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
$END$
|
||||
<view>
|
||||
<nut-popup
|
||||
position="bottom"
|
||||
safe-area-inset-bottom
|
||||
closeable
|
||||
:style="{ padding: '20px 10px' }"
|
||||
v-model:visible="show"
|
||||
@close="closeAttr"
|
||||
:close-on-click-overlay="false"
|
||||
>
|
||||
<view class="mp-data">
|
||||
<image class="image" :src="logoImg"></image>
|
||||
<text class="mp-name">捷兑通 申请</text>
|
||||
</view>
|
||||
<view class="trip-msg">
|
||||
<view class="title"> 获取您的昵称、头像 </view>
|
||||
<view class="trip"> 提供具有辨识度的用户中心界面 </view>
|
||||
</view>
|
||||
<form @submit="formSubmit">
|
||||
<view class="edit">
|
||||
<view class="avatar edit-box">
|
||||
<view class="left">
|
||||
<view class="head">头像</view>
|
||||
<view
|
||||
class="avatar-box"
|
||||
v-if="!mp_is_new"
|
||||
@click.stop="uploadPic"
|
||||
>
|
||||
<image
|
||||
:src="userInfo.avatar || headImg"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
<button
|
||||
v-else
|
||||
class="avatar-box"
|
||||
open-type="chooseAvatar"
|
||||
@chooseavatar="onChooseAvatar"
|
||||
>
|
||||
<image
|
||||
:src="userInfo.avatar || headImg"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nickname edit-box">
|
||||
<view class="left">
|
||||
<view class="head">昵称</view>
|
||||
<view class="input">
|
||||
<input
|
||||
type="nickname"
|
||||
placeholder-class="pl-sty"
|
||||
placeholder="请输入昵称"
|
||||
name="nickname"
|
||||
:maxlength="16"
|
||||
:value="userInfo.nickname"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nickname edit-box">
|
||||
<view class="left">
|
||||
<view class="head">号码</view>
|
||||
<view class="input">
|
||||
<button
|
||||
open-type="getPhoneNumber"
|
||||
@getphonenumber="getPhoneNumber"
|
||||
>
|
||||
{{
|
||||
!userInfo.phone
|
||||
? "请授权手机号"
|
||||
: "授权成功"
|
||||
}}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom">
|
||||
<nut-button
|
||||
formType="submit"
|
||||
block
|
||||
type="success"
|
||||
color="#07C160"
|
||||
>
|
||||
保存
|
||||
</nut-button>
|
||||
</view>
|
||||
</form>
|
||||
</nut-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style lang="scss">
|
||||
.mp-data {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
</style>
|
||||
.mp-name {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.trip-msg {
|
||||
padding-bottom: 32px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
.title {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.trip {
|
||||
font-size: 26px;
|
||||
color: #777777;
|
||||
}
|
||||
}
|
||||
|
||||
.edit {
|
||||
// border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
.avatar {
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
.input {
|
||||
width: 100%;
|
||||
}
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 80px;
|
||||
}
|
||||
button {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: none;
|
||||
padding: 0;
|
||||
height: 50px;
|
||||
font-size: 28px;
|
||||
color: #838383;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 30px;
|
||||
padding: 22px 0;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.head {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
white-space: nowrap;
|
||||
margin-right: 60px;
|
||||
}
|
||||
|
||||
.avatar-box {
|
||||
image {
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: none;
|
||||
height: 100px;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-xiangyou {
|
||||
color: #cfcfcf;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 20px;
|
||||
padding: 0 150px;
|
||||
|
||||
.nut-button {
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user