759 lines
21 KiB
Vue
759 lines
21 KiB
Vue
<template>
|
||
<Navigation :title_name="'添加学生'" :isReturn="0" :color="'#000000'" :bgc="'#FFFFFF'" :isCenter="true" />
|
||
<view class="add_phone">
|
||
<view class="input_des text_right" v-if="!person.studentInfo.name">请输入办理智慧校园套餐的手机号</view>
|
||
<view class="add_phone_input flex">
|
||
<view class="input_name">
|
||
<text style="font-size:20px;">学生账号：</text>
|
||
<br />
|
||
<br />
|
||
<br />
|
||
<text v-if="!person.studentInfo.name" class="input_des">(学生绑定手机号)</text>
|
||
</view>
|
||
<view class="showAccountNumber">
|
||
{{person.keyword.length}}/11
|
||
</view>
|
||
<input placeholder-style="color:#BDBDBD;" type="number" maxlength="11" v-model="person.keyword" @focus="focusBtn" focus
|
||
placeholder="请输入手机号" />
|
||
<svg @click="clearBtn" v-if="person.clearbtn" t="1669974117863" class="icon" viewBox="0 0 1024 1024"
|
||
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3497" width="20" height="20">
|
||
<path
|
||
d="M687.603949 656.994302 541.10027 510.457878 687.603949 363.943966c8.829086-8.840342 8.829086-23.122627 0-31.961946-8.850575-8.840342-23.13286-8.840342-31.962969 0L509.138324 478.495932 362.623389 331.980997c-8.840342-8.818853-23.122627-8.818853-31.962969 0-8.840342 8.840342-8.840342 23.144116 0 31.984459l146.493445 146.514935L330.638931 656.994302c-8.819876 8.830109-8.819876 23.133883 0 31.962969 8.840342 8.829086 23.144116 8.829086 31.984459 0l146.514935-146.514935 146.502655 146.514935c8.830109 8.829086 23.112394 8.829086 31.962969 0C696.433034 680.129208 696.45657 665.824411 687.603949 656.994302z"
|
||
p-id="3498" fill="#bfbfbf"></path>
|
||
<path
|
||
d="M938.362063 510.457878c0-237.061161-192.174857-429.234995-429.247274-429.234995-237.062184 0-429.246251 192.173834-429.246251 429.234995 0 237.083673 192.185091 429.257507 429.246251 429.257507 97.345072 0 186.435133-33.110095 258.440074-87.677898 2.958378-3.354398 4.900613-7.636934 4.900613-12.449543 0-10.506285-8.521071-19.026332-19.027355-19.026332-5.431709 0-10.287297 2.162246-13.752212 5.826705l-0.2415 0c-64.456011 47.414893-143.745868 75.800383-229.876528 75.800383-214.679407 0-388.730489-174.073594-388.730489-388.719232 0-214.688617 174.051081-388.718209 388.730489-388.718209 214.688617 0 388.697743 174.029592 388.697743 388.718209 0 65.548902-15.386432 127.277802-44.081984 181.490517l0 0.309038c-0.508583 1.811252-1.104147 3.576455-1.104147 5.519714 0 10.507308 8.520047 19.028379 19.028379 19.028379 8.18952 0 15.054881-5.254677 17.703197-12.494569l0 0.132006C920.349827 648.38625 938.362063 581.536726 938.362063 510.457878z"
|
||
p-id="3499" fill="#bfbfbf"></path>
|
||
</svg>
|
||
</view>
|
||
<view class="phone_list" v-if="person.studentInfo.StudentName">
|
||
<view class="phone_item">姓名：{{person.studentInfo.StudentName}}</view>
|
||
<view class="phone_item">学校：{{person.studentInfo.SchoolName}}</view>
|
||
<view class="phone_item">年级：{{person.studentInfo.Grade}}·{{person.studentInfo.ClassName}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="add_btn">
|
||
<!-- 查询 -->
|
||
<button @click.stop="addQuery" style="font-size: 17px;height: 44px;line-height: 44px;"
|
||
v-if="!person.studentInfo.StudentName">查询</button>
|
||
<!-- 本机绑定成功 -->
|
||
<button @click.stop="addBind" style="font-size: 17px;height: 44px;line-height: 44px;"
|
||
v-if="person.studentInfo.StudentName && (!person.isShowVerifyPopup) && (!person.isShowInformPopup)">绑定</button>
|
||
<!-- 名字绑定成功 -->
|
||
<button @click.stop="isShowPopupStudent=true" style="font-size: 17px;height: 44px;line-height: 44px;"
|
||
v-if="person.isShowVerifyPopup">绑定</button>
|
||
<!-- 短信绑定成功 -->
|
||
<button @click.stop="isShowPopupMessage=true" style="font-size: 17px;height: 44px;line-height: 44px;"
|
||
v-if="person.isShowInformPopup">绑定</button>
|
||
<!-- 返回个人中心 -->
|
||
<button @click.stop="backUser" style="font-size: 17px;height: 44px;line-height: 44px;">返回个人中心</button>
|
||
</view>
|
||
<!-- 绑定成功弹窗 -->
|
||
<Popups :isShow="person.isShowBindPopup" :showCancel="false" :width="300" :height="200" :bgColor="'#fff'"
|
||
@cancelBtn="person.isShowBindPopup=false">
|
||
<view class="p_cont">
|
||
<view class="popup_cont_pic">
|
||
<image src="@/static/education/ok_icon.png" mode=""></image>
|
||
</view>
|
||
<view class="popup_cont_des" style="font-size: 20px;">
|
||
绑定成功
|
||
</view>
|
||
<view class="popup_add_btn flex">
|
||
<button @click="covAddQuery" class="send-btn">继续绑定学生</button>
|
||
<button @click="backUser" class="send-btn">返回个人中心</button>
|
||
</view>
|
||
</view>
|
||
</Popups>
|
||
<!-- 学生验证弹窗 -->
|
||
<!-- <Popups :isShow="true" :width="300" :bgColor="'#fff'"> -->
|
||
<Popups :isShow="isShowPopupStudent" :width="300" :bgColor="'#fff'" @cancelBtn="isShowPopupStudent=false">
|
||
<view class="p_cont">
|
||
<view class="popup_cont_title">
|
||
验证信息
|
||
</view>
|
||
<view class="popup_cont_list">
|
||
<view class="cont_list_item"
|
||
style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
|
||
<view class="item_subName" style="font-size: 20px;margin-bottom: 10px;">请补充完学生姓名：</view>
|
||
<view style="display: flex;align-items: center;justify-content: center;">
|
||
<view style="margin-right:4px;color: #000;">{{nameFull.getName}}</view>
|
||
<input placeholder-style="color:#fff;" style="width:28px;background-color: #fff;padding-left: 6px;"
|
||
v-model="nameFull.inputName" focus maxlength="1" type="text"/>
|
||
</view>
|
||
</view>
|
||
<view class="cont_list_item">
|
||
<view style="font-size: 19px;margin-bottom: 10px;">请输入家长手机号后六位数字：</view>
|
||
<view class="flex">
|
||
<input v-for="(item,index) in teleLastNumber"
|
||
:key="index" placeholder-style="color:#BDBDBD;"
|
||
:class="{'border-indey-message':item.isFocus}"
|
||
@blur="preventFocusInfo(index,$event)"
|
||
@click="infoFocus(index,$event)"
|
||
:value="item.name" type="number" maxlength="1"
|
||
:focus="item.isFocus" @input="lastInput(index,$event)"
|
||
:selection-start="(item.isFocus)?0:-1" :selection-end="(item.isFocus)?item.name.length:-1"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="popup_add_btn">
|
||
<button @click="addVerifyBind" class="massage-btn" style="font-size: 20px;">绑定</button>
|
||
</view>
|
||
</view>
|
||
</Popups>
|
||
<!-- 短信验证弹窗 -->
|
||
<!-- <Popups :isShow="true" :width="300" :bgColor="'#fff'"> -->
|
||
<Popups :isShow="isShowPopupMessage" :width="260" :bgColor="'#fff'" @cancelBtn="isShowPopupMessage =false">
|
||
<view class="p_cont">
|
||
<view class="popup_cont_title">
|
||
短信验证
|
||
</view>
|
||
<view class="popup_cont_list">
|
||
<view class="cont_list_item1">
|
||
<view style="font-size: 16px;">向{{uesrTellphone}}发送验证信息<br />请输入验证码</view>
|
||
<view class="flex">
|
||
<!-- @blur="preventFocus(index,$event)" :value="item.name" :focus="item.isFocus" @focus="messageFocus(index,$event)" -->
|
||
<input v-for="(item,index) in sendYZMCode" @input="inputLastNumber(index,$event)"
|
||
:key="index" @click="messageFocus(index,$event)" @blur="messageBlur(index)"
|
||
:value="item.name" :focus="item.isFocus"
|
||
:class="{'border-indey-message':item.isFocus,'border-error':errroYZM}"
|
||
placeholder-style="color:#BDBDBD;" type="number" maxlength="1"
|
||
:selection-start="(item.isFocus)?0:-1" :selection-end="(item.isFocus)?item.name.length:-1" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="popup_cont_tag flex">
|
||
<button v-if="person.oneTime>0" class="send-btn">{{person.oneTime}}秒后重发</button>
|
||
<button v-else @click="retrieAgain" class="send-btn">{{getSendMsgText?'再次获取':'获取验证码'}}</button>
|
||
</view>
|
||
<view class="popup_add_btn">
|
||
<button @click="okClick" class="massage-btn" style="font-size: 20px;">确认</button>
|
||
</view>
|
||
</view>
|
||
</Popups>
|
||
<MessageToast :isShow="person.isShowMessage" :bgColor="'rgba(0,0,0,.4)'">
|
||
{{searchMsg}}
|
||
</MessageToast>
|
||
<!-- 信息错误提示框 -->
|
||
<MessageToast :isShow="person.isShowErrorMessage" :bgColor="'rgba(0,0,0,.7)'">
|
||
信息错误
|
||
<view class="message_red" style="font-size: 17px;margin-top: 5px;">{{InfoMessage}}</view>
|
||
</MessageToast>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
reactive,
|
||
nextTick,
|
||
ref
|
||
} from "vue";
|
||
import Popups from "@/components/popups/index.vue";
|
||
import MessageToast from "@/components/messageToast/index.vue";
|
||
import Navigation from '@/components/navigation/index.vue'
|
||
//api
|
||
import {
|
||
getUnbindstudentinfo,
|
||
getSendbindstudent,
|
||
getSendTelphoneCode
|
||
} from '@/api/user.ts'
|
||
const searchMsg = ref('')
|
||
const InfoMessage = ref('')
|
||
let person = reactive({
|
||
keyword: '', // 搜索关键字
|
||
clearbtn: false, // 清除按钮
|
||
studentInfo: {},
|
||
btnName: '查询',
|
||
isShowBindPopup: false, // 绑定成功弹窗
|
||
isShowVerifyPopup: false,
|
||
isShowInformPopup: false, // 短信验证弹窗
|
||
nameKeyword: '',
|
||
phoneKeyword: '',
|
||
timer: null, // 时间计时器
|
||
oneTime: 0,
|
||
isShowMessage: false,
|
||
isShowErrorMessage: false, // 验证错误提示框
|
||
})
|
||
const isShowPopupStudent = ref(false) // 家长验证弹窗
|
||
const isShowPopupMessage = ref(false) // 短信验证弹窗
|
||
const BindCode = ref(0) //绑定账号的返回code码，判断选择哪个参数，哪个弹框
|
||
let uesrTellphone = ''
|
||
const sendYZMCode = ref([ //短信验证6位数字
|
||
{
|
||
name: '',
|
||
isFocus: false,
|
||
start:-1,
|
||
end:-1
|
||
},
|
||
{
|
||
name: '',
|
||
isFocus: false,
|
||
start:-1,
|
||
end:-1
|
||
},
|
||
{
|
||
name: '',
|
||
isFocus: false,
|
||
start:-1,
|
||
end:-1
|
||
},
|
||
{
|
||
name: '',
|
||
isFocus: false,
|
||
start:-1,
|
||
end:-1
|
||
},
|
||
{
|
||
name: '',
|
||
isFocus: false,
|
||
start:-1,
|
||
end:-1
|
||
},
|
||
{
|
||
name: '',
|
||
isFocus: false,
|
||
start:-1,
|
||
end:-1
|
||
},
|
||
])
|
||
const teleLastNumber = ref([ //手机尾号6位数字
|
||
{
|
||
name: '',
|
||
isFocus: false
|
||
},
|
||
{
|
||
name: '',
|
||
isFocus: false
|
||
},
|
||
{
|
||
name: '',
|
||
isFocus: false
|
||
},
|
||
{
|
||
name: '',
|
||
isFocus: false
|
||
},
|
||
{
|
||
name: '',
|
||
isFocus: false
|
||
},
|
||
{
|
||
name: '',
|
||
isFocus: false
|
||
},
|
||
])
|
||
const getSendMsgText = ref(false)
|
||
let sendCodeData = ''
|
||
const nameFull = reactive({ //名字验证加上
|
||
getName: '',
|
||
inputName: ''
|
||
})
|
||
// 清空按钮
|
||
const clearBtn = () => {
|
||
person.keyword = ''
|
||
person.clearbtn = false
|
||
}
|
||
// 获取焦点
|
||
const focusBtn = () => {
|
||
person.clearbtn = true
|
||
}
|
||
const messageBlur=(index)=>{
|
||
sendYZMCode.value[index].isFocus = false
|
||
}
|
||
//输入框自动失焦获取聚焦
|
||
const inputLastNumber = (index, event) => {
|
||
sendYZMCode.value[index].name = event.detail.value
|
||
console.log(focstState.value);
|
||
if(!focstState.value){
|
||
if (sendYZMCode.value[index].name) {
|
||
if (index < 5) {
|
||
sendYZMCode.value[index + 1].isFocus = true
|
||
}
|
||
}else{
|
||
if (index > 0) {
|
||
sendYZMCode.value[index - 1].isFocus = true
|
||
}
|
||
}
|
||
}else{
|
||
focstState.value=false //点击状态未真
|
||
}
|
||
}
|
||
const focstState=ref(false)
|
||
const messageFocus=(index,event)=>{ //短信框输入聚焦
|
||
let name = sendYZMCode.value[index].name
|
||
if(!name){
|
||
focstState.value=false //点击状态未真
|
||
}else{
|
||
focstState.value=true //点击状态未真
|
||
}
|
||
errroYZM.value=false //关闭红色错误弹窗
|
||
sendYZMCode.value[index].isFocus=true
|
||
}
|
||
const focstState1=ref(false)
|
||
const infoFocus=(index,event)=>{ //手机尾号框输入聚焦
|
||
teleLastNumber.value[index].isFocus=true
|
||
let name = teleLastNumber.value[index].name
|
||
if(!name){
|
||
focstState1.value=false //点击状态未真
|
||
}else{
|
||
focstState1.value=true //点击状态未真
|
||
}
|
||
}
|
||
const preventFocusInfo = (index) => {
|
||
teleLastNumber.value[index].isFocus = false
|
||
}
|
||
//输入框自动失焦获取聚焦
|
||
const lastInput = (index, event) => {
|
||
teleLastNumber.value[index].name = event.detail.value
|
||
if(!focstState1.value){
|
||
if (teleLastNumber.value[index].name) {
|
||
if (index < 5) {
|
||
teleLastNumber.value[index + 1].isFocus = true
|
||
}
|
||
}else{
|
||
if (index > 0) {
|
||
teleLastNumber.value[index - 1].isFocus = true
|
||
}
|
||
}
|
||
}else{
|
||
focstState1.value=false //点击状态为真
|
||
}
|
||
}
|
||
|
||
// 查询
|
||
const addQuery = () => {
|
||
// 查询
|
||
if (person.keyword) {
|
||
person.isShowMessage = false
|
||
console.log(person.keyword);
|
||
getUnbindstudentinfo(person.keyword).then(res => {
|
||
console.log(res);
|
||
if (res.Code !== 200) {
|
||
person.isShowMessage = true
|
||
searchMsg.value = res.Message
|
||
setTimeout(()=>{
|
||
person.isShowMessage = false
|
||
},3000)
|
||
person.studentInfo = {}
|
||
} else {
|
||
person.studentInfo = res.Data
|
||
person.nameKeyword = person.studentInfo.StudentName
|
||
nameFull.getName = person.studentInfo.StudentName.replace('*', '')
|
||
let sentNumber = person.keyword
|
||
uesrTellphone = sentNumber.substring(0, 3) + '****' + sentNumber.substring(7, 11)
|
||
console.log(uesrTellphone);
|
||
}
|
||
})
|
||
}
|
||
}
|
||
const cont1 = ref(true)
|
||
const cont2 = ref(true)
|
||
const errroYZM =ref(false)
|
||
|
||
// 绑定
|
||
const addBind = () => {
|
||
// 判断该学生家长的手机号是否与 微信授权获取的手机号相等
|
||
// 相等绑定成功，反之，验证信息
|
||
let params = {
|
||
StudentTelephone: person.keyword,
|
||
VerifyName: '',
|
||
VerifyLastTelephone: '',
|
||
VerifySMSId: ''
|
||
}
|
||
switch (BindCode.value) {
|
||
case 0:
|
||
params = {
|
||
StudentTelephone: person.keyword,
|
||
VerifyName: '',
|
||
VerifyLastTelephone: '',
|
||
VerifySMSId: '',
|
||
VerifyCode: ''
|
||
}
|
||
break;
|
||
case 511:
|
||
let lastNumber = ''
|
||
let VerifyName = nameFull.getName + nameFull.inputName
|
||
console.log(VerifyName)
|
||
teleLastNumber.value.forEach(item => {
|
||
lastNumber += item.name
|
||
})
|
||
params = {
|
||
StudentTelephone: person.keyword,
|
||
VerifyName: VerifyName,
|
||
VerifyLastTelephone: lastNumber,
|
||
VerifySMSId: '',
|
||
VerifyCode: ''
|
||
}
|
||
if (!nameFull.inputName) {
|
||
person.isShowMessage = true
|
||
searchMsg.value = '请补全名字'
|
||
setTimeout(() => {
|
||
person.isShowMessage = false
|
||
}, 3000)
|
||
return
|
||
}
|
||
if (lastNumber.length !== 6) {
|
||
console.log('尾号的长度是不是等于');
|
||
person.isShowMessage = true
|
||
searchMsg.value = '请补全手机尾号'
|
||
setTimeout(() => {
|
||
person.isShowMessage = false
|
||
}, 3000)
|
||
return
|
||
}
|
||
break;
|
||
case 1:
|
||
console.log('验证码1')
|
||
case 512:
|
||
let messageCode = ''
|
||
sendYZMCode.value.forEach(item => {
|
||
messageCode += item.name
|
||
})
|
||
params = {
|
||
StudentTelephone: person.keyword,
|
||
VerifyName: '',
|
||
VerifyLastTelephone: '',
|
||
VerifySMSId: sendCodeData,
|
||
VerifyCode: messageCode
|
||
}
|
||
if (messageCode.length !== 6) {
|
||
person.isShowMessage = true
|
||
searchMsg.value = '请补全验证码'
|
||
setTimeout(() => {
|
||
person.isShowMessage = false
|
||
}, 3000)
|
||
return
|
||
}
|
||
|
||
default:
|
||
break;
|
||
}
|
||
console.log(params);
|
||
if (person.studentInfo.StudentName) {
|
||
person.isShowMessage = false
|
||
getSendbindstudent(params).then(res => {
|
||
console.log(res);
|
||
BindCode.value = res.Code
|
||
if (res.Code == 200) {
|
||
person.isShowBindPopup = true
|
||
person.isShowVerifyPopup = false
|
||
person.isShowInformPopup = false
|
||
isShowPopupStudent.value = false
|
||
isShowPopupMessage.value = false
|
||
BindCode.value=0
|
||
teleLastNumber.value.forEach(item => {
|
||
item.name=''
|
||
})
|
||
nameFull.inputName=''
|
||
sendYZMCode.value.forEach(item => {
|
||
item.name=''
|
||
})
|
||
// uni.navigateBack() //绑定成功,返回个人中心页
|
||
} else if (res.Code == 511) {
|
||
isShowPopupStudent.value = true
|
||
person.isShowVerifyPopup = true
|
||
person.isShowBindPopup = false
|
||
person.isShowInformPopup = false
|
||
//消息提示
|
||
if (cont2.value) {
|
||
cont2.value = false
|
||
} else {
|
||
person.isShowErrorMessage = true
|
||
InfoMessage.value = `您还有${res.Message}机会`
|
||
setTimeout(() => {
|
||
person.isShowErrorMessage = false
|
||
}, 3000)
|
||
}
|
||
} else if ((res.Code == 512)||(res.Code == 1)) {
|
||
isShowPopupStudent.value = false
|
||
isShowPopupMessage.value = true
|
||
person.isShowInformPopup = true
|
||
person.isShowBindPopup = false
|
||
person.isShowVerifyPopup = false
|
||
person.oneTime = 0
|
||
if (cont1.value) {
|
||
cont1.value = false
|
||
person.isShowMessage = true
|
||
searchMsg.value = '信息验证有误，跳转电话验证'
|
||
setTimeout(() => {
|
||
person.isShowMessage = false
|
||
}, 3000)
|
||
} else {
|
||
errroYZM.value=true //短信边框变红
|
||
person.isShowMessage = true
|
||
searchMsg.value = '短信验证错误，请重试'
|
||
sendYZMCode.value.forEach(item=>item.name='')
|
||
setTimeout(() => {
|
||
person.isShowMessage = false
|
||
}, 3000)
|
||
}
|
||
//消息提示
|
||
} else {
|
||
person.isShowMessage = true
|
||
searchMsg.value = res.Message
|
||
setTimeout(() => {
|
||
person.isShowMessage = false
|
||
}, 3000)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
// 继续绑定
|
||
const covAddQuery = () => {
|
||
person.keyword = ''
|
||
person.isShowBindPopup = false
|
||
person.isShowVerifyPopup = false
|
||
person.isShowInformPopup = false
|
||
person.studentInfo = {}
|
||
person.btnName = '查询'
|
||
}
|
||
// 信息验证绑定
|
||
const addVerifyBind = () => {
|
||
addBind()
|
||
}
|
||
// 时间计时器
|
||
|
||
// 短信验证确认
|
||
const okClick = () => {
|
||
addBind()
|
||
}
|
||
const showTimer = ref(true) //是否60秒之后再次获取短信验证码
|
||
// 再次获取短信验证
|
||
const retrieAgain = () => {
|
||
if (showTimer.value) {
|
||
showTimer.value = false
|
||
// let telephone = uni.getStorageSync('USER_PHONE')
|
||
getSendMsgText.value = true
|
||
person.oneTime = 60
|
||
person.timer = setInterval(() => {
|
||
person.oneTime--; // 时间减一秒
|
||
if (person.oneTime <= 0) { // 当倒计时结束时
|
||
clearInterval(person.timer); // 停止计时器
|
||
showTimer.value = true
|
||
}
|
||
}, 1000); // 每秒执行一次
|
||
getSendTelphoneCode(person.keyword, 1).then(res => {
|
||
console.log(res);
|
||
if (res.Code == 200) {
|
||
sendCodeData = res.Data
|
||
}
|
||
})
|
||
}
|
||
}
|
||
// 返回个人中心
|
||
const backUser = () => {
|
||
uni.reLaunch({
|
||
url: '/pages/user/index'
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background: #f8f8f8 !important;
|
||
}
|
||
|
||
.message_red {
|
||
color: #BC0101;
|
||
font-size: 24rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.add_phone {
|
||
background: #fff;
|
||
padding: 32rpx 32rpx 60rpx 32rpx;
|
||
font-size: 28rpx;
|
||
color: #545454;
|
||
|
||
.input_des {
|
||
color: #727272;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
letter-spacing: 0rpx;
|
||
}
|
||
|
||
.text_right {
|
||
margin: 0 0 15rpx 200rpx;
|
||
}
|
||
|
||
.add_phone_input {
|
||
position: relative;
|
||
white-space: nowrap;
|
||
.showAccountNumber{
|
||
position: absolute;
|
||
right: 10px;
|
||
}
|
||
.input_name {
|
||
width: 200rpx;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
line-height: 35rpx;
|
||
letter-spacing: 4rpx;
|
||
|
||
text {
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
input {
|
||
border: 2rpx solid #BABABA;
|
||
border-radius: 12rpx;
|
||
width: 60%;
|
||
padding: 15rpx 60rpx 15rpx 30rpx;
|
||
color: #2C2C2C;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.icon {
|
||
position: absolute;
|
||
right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.phone_list {
|
||
margin-top: 40rpx;
|
||
margin-bottom: 50rpx;
|
||
|
||
.phone_item {
|
||
line-height: 50rpx;
|
||
font-size: 16px;
|
||
color: #545454;
|
||
}
|
||
}
|
||
}
|
||
|
||
.p_cont {
|
||
// padding: 20px;
|
||
background: #fff;
|
||
border-radius: 30rpx;
|
||
|
||
.popup_cont_pic {
|
||
margin: 40rpx auto 20rpx auto;
|
||
background: #fff;
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
border-radius: 30rpx;
|
||
overflow: hidden;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.popup_add_btn {
|
||
button {
|
||
width: 45%;
|
||
|
||
&:nth-child(1) {
|
||
width: 55%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.popup_cont_title {
|
||
font-size: 42rpx;
|
||
color: #575757;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.popup_cont_tag {
|
||
justify-content: flex-end;
|
||
width: 100%;
|
||
text-align: right;
|
||
margin-top: 20rpx;
|
||
|
||
button {
|
||
border: 2rpx solid #A5B5FA;
|
||
color: #A5B5FA;
|
||
font-size: 24rpx;
|
||
margin: 0;
|
||
padding: 0 20rpx;
|
||
background: #fff;
|
||
height: 45rpx;
|
||
line-height: 45rpx;
|
||
|
||
&:nth-child(2) {
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.popup_cont_list {
|
||
text-align: left;
|
||
|
||
.cont_list_item {
|
||
font-size: 28rpx;
|
||
background: #F8F9FF;
|
||
border-radius: 8rpx;
|
||
padding: 28rpx;
|
||
margin-top: 30rpx;
|
||
color: rgba(137, 137, 137, 1);
|
||
|
||
&:first-child {
|
||
input {
|
||
width: 99%;
|
||
border: 0;
|
||
padding: 10rpx 0;
|
||
text-align: left;
|
||
}
|
||
}
|
||
|
||
input {
|
||
border: 2rpx solid #9C9C9C;
|
||
border-radius: 12rpx;
|
||
width: 16.6%;
|
||
padding: 15rpx 0;
|
||
color: #2C2C2C;
|
||
font-weight: 500;
|
||
// margin-top: 20rpx;
|
||
margin-right: 10rpx;
|
||
text-align: center;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cont_list_item1 {
|
||
font-size: 28rpx;
|
||
border-radius: 8rpx;
|
||
margin-top: 30rpx;
|
||
|
||
input {
|
||
border: 2rpx solid #9C9C9C;
|
||
border-radius: 12rpx;
|
||
width: 16.6%;
|
||
padding: 15rpx 0;
|
||
color: #2C2C2C;
|
||
font-weight: 500;
|
||
margin-top: 20rpx;
|
||
margin-right: 10rpx;
|
||
text-align: center;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.massage-btn {
|
||
width: 100% !important;
|
||
height: 40px !important;
|
||
line-height: 40px !important;
|
||
}
|
||
|
||
.send-btn {
|
||
width: 50% !important;
|
||
height: 35px !important;
|
||
line-height: 35px !important;
|
||
font-size: 18px;
|
||
}
|
||
.border-indey-message{
|
||
border: 3px solid skyblue !important;
|
||
}
|
||
.border-error{
|
||
border: 1px solid #FF0000 !important;
|
||
}
|
||
</style> |