175 lines
3.8 KiB
Vue
175 lines
3.8 KiB
Vue
<template>
|
|
<view>
|
|
<touch-popup ref="popup" @close="close" background="linear-gradient(180deg, #FEF0A7 0%, #FFFFFF 68.42%)" :backShow="true">
|
|
<view class="top">
|
|
<view @click="closeCurPage" hover-class="disable" :hover-start-time="0" :hover-stay-time="50">
|
|
取消
|
|
</view>
|
|
<view style="font-size: 18px;font-weight: bold;text-align: center;">
|
|
修改名称
|
|
</view>
|
|
<view @click="save" :class="{'disable': !inputVerify}" hover-class="disable" :hover-start-time="0" :hover-stay-time="50">
|
|
保存
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="item-title">
|
|
三天内可修改一次名字
|
|
</view>
|
|
<view class="item-input">
|
|
<!-- #ifdef H5 -->
|
|
<input type="text" v-model="input" @input="inputEvent" maxlength="12" placeholder-class="input-class" placeholder="请输入联系人" />
|
|
<view class="">
|
|
{{input.length}}/12
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<input type="nickname" v-model="input" @change="inputEvent2" @input="inputEvent" maxlength="12" placeholder-class="input-class" placeholder="请输入联系人" />
|
|
<view class="">
|
|
{{input.length}}/12
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
<view class="item-title" style="color: #00000080;" :class="{'hint': !inputVerify}">
|
|
请输入2-12个字符
|
|
</view>
|
|
</view>
|
|
|
|
</touch-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const app = getApp()
|
|
import { ref, getCurrentInstance, defineExpose } from 'vue'
|
|
const {proxy} = getCurrentInstance()
|
|
const popup = ref() // ref组件
|
|
|
|
const input = ref('')
|
|
const inputVerify = ref(true)
|
|
const isSave = ref(false)
|
|
|
|
const save = () => {
|
|
if (!inputVerify.value) return
|
|
if (input.value.length < 2) {
|
|
inputVerify.value = false
|
|
return
|
|
}
|
|
uni.request({
|
|
url: app.globalData.requestUrl + '/api/user/save/nickname',
|
|
data: {
|
|
nickname: input.value
|
|
},
|
|
header: {
|
|
'Authorization': 'Bearer ' + app.globalData.token
|
|
},
|
|
method: 'POST',
|
|
success(res) {
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: 'none'
|
|
})
|
|
if (res.data.code === 200) {
|
|
isSave.value = true
|
|
}
|
|
}
|
|
})
|
|
}
|
|
// #ifdef MP-WEIXIN
|
|
const inputEvent2 = (e) => {
|
|
input.value = e.detail.value;
|
|
}
|
|
// #endif
|
|
const inputEvent = () => {
|
|
if (input.value.length >= 2 && !inputVerify.value) {
|
|
inputVerify.value = true
|
|
}
|
|
}
|
|
const closeCurPage = () => {
|
|
popup.value.close()
|
|
}
|
|
const close = () => {
|
|
proxy.$emit('closeEdit', isSave.value)
|
|
}
|
|
const open = () => {
|
|
isSave.value = false
|
|
popup.value.open()
|
|
}
|
|
defineExpose({
|
|
open
|
|
}) // 暴露方法
|
|
</script>
|
|
|
|
<style scoped>
|
|
.hint {
|
|
color: #EE3A3A !important;
|
|
}
|
|
.top view {
|
|
flex: 1;
|
|
}
|
|
.top view:first-child {
|
|
font-family: Noto Sans S Chinese;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
color: #3C3C3C;
|
|
}
|
|
.top view:last-child {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
color: #EE3A3A;
|
|
}
|
|
.disable {
|
|
opacity: .5;
|
|
}
|
|
.top {
|
|
display: flex;
|
|
padding: 30px 15px 15px 15px;
|
|
|
|
}
|
|
.item-input select {
|
|
border: none;
|
|
width: 100%;
|
|
}
|
|
.item-input input {
|
|
width: calc(100% - 60px - 30px);
|
|
}
|
|
.item-input view {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
color: #00000080;
|
|
}
|
|
.item-input {
|
|
height: 38px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(0,0,0,0.5);
|
|
background: #FFFFFF;
|
|
padding: 5px 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: Noto Sans S Chinese;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 21px;
|
|
}
|
|
.input-class {
|
|
font-family: Noto Sans S Chinese;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 21px;
|
|
color: #00000080;
|
|
}
|
|
.item-title {
|
|
padding: 5px;
|
|
font-family: Noto Sans S Chinese;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 18px;
|
|
}
|
|
.item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 15px;
|
|
}
|
|
</style> |