chore: 重新构建git仓库
This commit is contained in:
873
pages/user/forget.vue
Normal file
873
pages/user/forget.vue
Normal file
@@ -0,0 +1,873 @@
|
||||
<template>
|
||||
<view class="page commonPage">
|
||||
<view class="logo_bg">
|
||||
<z-nav-bar title="" bgColor="none" fontColor="#fff"></z-nav-bar>
|
||||
<view class="title PM_font">忘记密码</view>
|
||||
</view>
|
||||
<!-- 验证码登录 -->
|
||||
<view class="register_page">
|
||||
<input type="password" style="width: 0; height: 0; min-height: 0" />
|
||||
<input
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
style="width: 0; height: 0; min-height: 0"
|
||||
/>
|
||||
<view class="flexbox" style="margin-top: 50rpx">
|
||||
<view
|
||||
class="input_tit emaPho"
|
||||
style="margin-top: 0; margin-right: 20rpx"
|
||||
>
|
||||
<view
|
||||
@click="handleChangeIsPassWordPhone"
|
||||
:class="{ active: isPassWordPhone }"
|
||||
>手机号</view
|
||||
>
|
||||
<span>/</span>
|
||||
<view
|
||||
@click="handleChangeIsPassWordPhone"
|
||||
:class="{ active: !isPassWordPhone }"
|
||||
>邮箱</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 带区号手机号 -->
|
||||
<view
|
||||
class="flexbox"
|
||||
v-if="isPassWordPhone"
|
||||
style="margin: 36rpx 0; justify-content: space-between"
|
||||
>
|
||||
<view class="quhao">
|
||||
<uni-data-select
|
||||
class="myselect"
|
||||
placeholder="请选择区号"
|
||||
v-model="resetForm.quCode"
|
||||
:localdata="quCodeList"
|
||||
style="height: 30rpx !important"
|
||||
@change="quChange"
|
||||
></uni-data-select>
|
||||
</view>
|
||||
<view
|
||||
class="triangle borderBottom phoneNumberInput"
|
||||
:clasfs="[type == 1000 ? 'left_triangle' : 'right_triangle']"
|
||||
>
|
||||
<u--input
|
||||
class="form_input_box"
|
||||
type="number"
|
||||
v-model="resetForm.phone"
|
||||
placeholder="请输入您的手机号"
|
||||
placeholder-class="grey"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="input_box" v-else>
|
||||
<u--input
|
||||
class="form_input_box"
|
||||
v-model="resetForm.phone"
|
||||
placeholder="请输入您的邮箱"
|
||||
placeholder-class="grey"
|
||||
/>
|
||||
</view>
|
||||
<view class="input_tit">验证码</view>
|
||||
<view class="input_box">
|
||||
<u--input
|
||||
type="number"
|
||||
class="form_input_box"
|
||||
v-model="resetForm.code"
|
||||
placeholder="请输入验证码"
|
||||
placeholder-class="grey"
|
||||
maxlength="6"
|
||||
/>
|
||||
<button class="sendCode" @click="getCode" size="mini">
|
||||
{{ codeText }}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view class="input_tit">密码</view>
|
||||
<view class="input_box">
|
||||
<u--input
|
||||
class="form_input_box"
|
||||
type="password"
|
||||
maxlength="8"
|
||||
v-model="resetForm.password"
|
||||
placeholder="请输入密码"
|
||||
@input="inputMethod(resetForm.password)"
|
||||
/>
|
||||
</view>
|
||||
<view class="input_tit">确认密码</view>
|
||||
<view class="input_box">
|
||||
<u--input
|
||||
type="password"
|
||||
class="form_input_box"
|
||||
maxlength="8"
|
||||
v-model="resetForm.confirmPassword"
|
||||
placeholder="请确认密码"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="btn_box">
|
||||
<button @click="onSubmit">提 交</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
// 密码验证的正则
|
||||
//1、密码为八位及以上并且字母数字特殊字符三项都包括
|
||||
var strongRegex = new RegExp(
|
||||
"^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$",
|
||||
"g"
|
||||
);
|
||||
//2、密码为八位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
|
||||
var mediumRegex = new RegExp(
|
||||
"^(?=.{8,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[a-z])(?=.*\\W))|((?=.*[0-9])(?=.*\\W))|((?=.*[A-Z])(?=.*\\W))).*$",
|
||||
"g"
|
||||
);
|
||||
|
||||
var enoughRegex = new RegExp("(?=.{8,}).*", "g");
|
||||
var clear;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
quCodeList: [], // 国家区域码
|
||||
isPassWordPhone: true,
|
||||
resetForm: {},
|
||||
playData: {},
|
||||
type: '',
|
||||
codeText: "获取验证码",
|
||||
//验证码已发
|
||||
readonly: false,
|
||||
passwordOk: false,
|
||||
note: "",
|
||||
str2: "",
|
||||
urlList: {
|
||||
sendcode: "common/user/sms/sendcode", //密码登录
|
||||
sendEmailcode: "common/user/getMailCaptcha", //密码登录
|
||||
setPassword: "common/user/setPasswordByCode", //重置密码
|
||||
},
|
||||
};
|
||||
},
|
||||
//第一次加载
|
||||
onLoad(e) {
|
||||
this.getCountyCode();
|
||||
},
|
||||
//页面显示
|
||||
onShow() {},
|
||||
//方法
|
||||
methods: {
|
||||
// 获取国家区域编码
|
||||
getCountyCode() {
|
||||
this.$http
|
||||
.request({
|
||||
url: "book/baseArea/getAllBaseArea",
|
||||
method: "POST",
|
||||
data: {},
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0 && res.baseAreas.length > 0) {
|
||||
this.quCodeList = res.baseAreas.map((item) => {
|
||||
let obj = {
|
||||
text: item.title + " (+" + item.code + ")",
|
||||
value: item.code,
|
||||
};
|
||||
return obj;
|
||||
});
|
||||
this.resetForm.quCode = this.quCodeList[0].value;
|
||||
this.$forceUpdate();
|
||||
} else {
|
||||
this.quCodeList = [];
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e, "e");
|
||||
});
|
||||
},
|
||||
handleChangeIsPassWordPhone() {
|
||||
this.resetForm = {};
|
||||
this.note = null;
|
||||
this.isPassWordPhone = !this.isPassWordPhone;
|
||||
|
||||
this.resetForm.quCode = this.quCodeList[0].value;
|
||||
this.OpenClear();
|
||||
},
|
||||
// 密码验证
|
||||
inputMethod(value) {
|
||||
this.passwordOk = false;
|
||||
if (strongRegex.test(value)) {
|
||||
this.str2 = "<span style='color:#18bc37'>密码强度很不错哦！</span>";
|
||||
this.note = "";
|
||||
this.passwordOk = true;
|
||||
} else if (mediumRegex.test(value)) {
|
||||
this.note =
|
||||
"请至少使用大小写字母、数字、符号两种类型组合的密码，长度为8位。";
|
||||
this.str2 = "<span style='color:#2979ff'>密码强度中等!</span>";
|
||||
this.passwordOk = true;
|
||||
} else if (enoughRegex.test(value)) {
|
||||
this.note =
|
||||
"请至少使用大小写字母、数字、符号两种类型组合的密码，长度为8位。";
|
||||
} else {
|
||||
this.passwordOk = false;
|
||||
this.note =
|
||||
"请至少使用大小写字母、数字、符号两种类型组合的密码，长度为8位。";
|
||||
this.str2 = "";
|
||||
}
|
||||
},
|
||||
//获取验证码
|
||||
async getCode() {
|
||||
var data = {};
|
||||
if (this.readonly) {
|
||||
this.$commonJS.showToast("验证码已发送");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isPassWordPhone) {
|
||||
data.phone = this.resetForm.phone;
|
||||
if (!this.resetForm.phone) {
|
||||
this.$commonJS.showToast("请输入手机号");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.$base.phoneRegular.test(this.resetForm.phone)) {
|
||||
this.$commonJS.showToast("手机号格式不正确");
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
data.email = this.resetForm.phone;
|
||||
if (!this.resetForm.phone) {
|
||||
this.$commonJS.showToast("请输入邮箱");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.$base.mailRegular.test(this.resetForm.phone)) {
|
||||
this.$commonJS.showToast("邮箱格式不正确");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
await this.$http
|
||||
.post(
|
||||
this.isPassWordPhone
|
||||
? this.urlList.sendcode
|
||||
: this.urlList.sendEmailcode,
|
||||
data
|
||||
)
|
||||
.then((res) => {
|
||||
this.getCodeState();
|
||||
});
|
||||
},
|
||||
//验证码按钮文字状态
|
||||
getCodeState() {
|
||||
const _this = this;
|
||||
this.readonly = true;
|
||||
this.codeText = "60S后重新获取";
|
||||
var s = 60;
|
||||
clear = setInterval(() => {
|
||||
s--;
|
||||
_this.codeText = s + "S后重新获取";
|
||||
if (s <= 0) {
|
||||
clearInterval(clear);
|
||||
_this.codeText = "获取验证码";
|
||||
_this.readonly = false;
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
// 清除验证码
|
||||
OpenClear() {
|
||||
clearInterval(clear);
|
||||
this.codeText = "获取验证码";
|
||||
this.readonly = false;
|
||||
},
|
||||
onSubmit() {
|
||||
var data = {};
|
||||
if (this.isPassWordPhone) {
|
||||
data.phone = this.resetForm.phone;
|
||||
if (!this.resetForm.phone) {
|
||||
this.$commonJS.showToast("请输入手机号");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.resetForm.quCode == null || this.resetForm.quCode == 86) {
|
||||
if (!this.$base.phoneRegular.test(this.resetForm.phone)) {
|
||||
this.$commonJS.showToast("手机号格式不正确");
|
||||
return;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
data.email = this.resetForm.phone;
|
||||
|
||||
if (!this.resetForm.phone) {
|
||||
this.$commonJS.showToast("请输入邮箱");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.$base.mailRegular.test(this.resetForm.phone)) {
|
||||
this.$commonJS.showToast("邮箱格式不正确");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.resetForm.code) {
|
||||
this.$commonJS.showToast("请输入验证码");
|
||||
return;
|
||||
}
|
||||
if (!this.resetForm.password) {
|
||||
this.$commonJS.showToast("请输入密码");
|
||||
return;
|
||||
}
|
||||
if (!this.resetForm.confirmPassword) {
|
||||
this.$commonJS.showToast("请输入确认密码");
|
||||
return;
|
||||
}
|
||||
if (this.resetForm.confirmPassword != this.resetForm.password) {
|
||||
this.$commonJS.showToast("两次密码不一致");
|
||||
return;
|
||||
}
|
||||
if (!this.$base.passwordRegular.test(this.resetForm.password)) {
|
||||
this.$commonJS.showToast("请输入不少于6位且包含数字和字母的密码");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.passwordOk) {
|
||||
this.$commonJS.showToast(this.note);
|
||||
return;
|
||||
}
|
||||
|
||||
this.$http
|
||||
.post(this.urlList.setPassword, {
|
||||
phone: this.resetForm.phone,
|
||||
code: this.resetForm.code,
|
||||
password: this.resetForm.password,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$commonJS.showToast("密码修改成功！");
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
//页面隐藏
|
||||
onHide() {},
|
||||
//页面卸载
|
||||
onUnload() {},
|
||||
//页面下来刷新
|
||||
onPullDownRefresh() {},
|
||||
//页面上拉触底
|
||||
onReachBottom() {}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/static/mixin.scss";
|
||||
.page {
|
||||
.title {
|
||||
padding: 60rpx 0 80rpx 0;
|
||||
font-size: 80rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.input_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 100rpx;
|
||||
padding-top: 0rpx;
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
align-items: center;
|
||||
|
||||
text {
|
||||
font-size: 30rpx;
|
||||
width: 180rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
button {
|
||||
height: 78rpx;
|
||||
line-height: 78rpx;
|
||||
font-size: 30rpx;
|
||||
color: $themeColor;
|
||||
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn_box {
|
||||
width: calc(100% - 100rpx);
|
||||
left: 50rpx;
|
||||
position: absolute;
|
||||
bottom: 8vh;
|
||||
|
||||
button {
|
||||
font-size: 32rpx;
|
||||
background: $themeBgColor;
|
||||
color: #fff;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.protocol {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
|
||||
text {
|
||||
color: $themeColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.commonPage {
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.forget_box {
|
||||
padding: 0 40rpx;
|
||||
background: #fff;
|
||||
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.logo_bg {
|
||||
background-image: url("@/static/login_bg.png");
|
||||
padding: 0 40rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 25vh;
|
||||
position: relative;
|
||||
|
||||
text {
|
||||
font-size: 45upx;
|
||||
line-height: 65rpx;
|
||||
position: absolute;
|
||||
bottom: 110rpx;
|
||||
left: 60rpx;
|
||||
color: #fff;
|
||||
letter-spacing: 6rpx;
|
||||
}
|
||||
|
||||
.icon_hua_1 {
|
||||
position: absolute;
|
||||
bottom: 60rpx;
|
||||
left: 245rpx;
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
opacity: 0.08;
|
||||
}
|
||||
|
||||
.icon_hua_2 {
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
right: 30rpx;
|
||||
width: 250rpx;
|
||||
height: 250rpx;
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
.phoneNumberInput {
|
||||
width: calc(100% - 160rpx);
|
||||
height: 67rpx;
|
||||
|
||||
input {
|
||||
font-size: 28rpx;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.borderBottom {
|
||||
border-bottom: 1px solid #efeef4;
|
||||
}
|
||||
|
||||
.flexbox {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.quhao {
|
||||
height: 50rpx;
|
||||
width: 290rpx;
|
||||
margin: 12rpx 15rpx 0 0;
|
||||
}
|
||||
|
||||
.myselect {
|
||||
width: 240rpx;
|
||||
height: 50rpx !important;
|
||||
|
||||
/deep/.uni-select {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
/deep/.uni-select__selector-item {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: $themeColor;
|
||||
}
|
||||
|
||||
.tanchu {
|
||||
padding: 40rpx 30rpx 40rpx 30rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo_bg {
|
||||
background-image: url("@/static/login_bg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 25vh;
|
||||
position: relative;
|
||||
|
||||
text {
|
||||
font-size: 45upx;
|
||||
line-height: 65rpx;
|
||||
position: absolute;
|
||||
bottom: 110rpx;
|
||||
left: 60rpx;
|
||||
color: #fff;
|
||||
letter-spacing: 6rpx;
|
||||
}
|
||||
|
||||
.icon_hua_1 {
|
||||
position: absolute;
|
||||
bottom: 60rpx;
|
||||
left: 245rpx;
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
opacity: 0.08;
|
||||
}
|
||||
|
||||
.icon_hua_2 {
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
right: 30rpx;
|
||||
width: 250rpx;
|
||||
height: 250rpx;
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
|
||||
.register_page {
|
||||
padding: calc(var(--status-bar-height)) 50rpx 40rpx;
|
||||
background-color: #fff;
|
||||
min-height: 75vh;
|
||||
|
||||
.login_method {
|
||||
justify-content: space-between;
|
||||
padding: 0 96rpx;
|
||||
text-align: center;
|
||||
|
||||
.title {
|
||||
margin: 0 auto;
|
||||
font-size: 40rpx;
|
||||
letter-spacing: 3rpx;
|
||||
color: #666;
|
||||
|
||||
&.active {
|
||||
position: relative;
|
||||
color: $themeColor;
|
||||
padding-bottom: 35rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.active::after {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 150rpx;
|
||||
height: 6rpx;
|
||||
background-color: $themeColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left_triangle {
|
||||
&::before {
|
||||
left: 140rpx;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 140rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right_triangle {
|
||||
&::before {
|
||||
left: 470rpx;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 470rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.input_tit {
|
||||
margin-top: 40rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: $themeColor;
|
||||
}
|
||||
|
||||
.emaPho {
|
||||
}
|
||||
|
||||
.emaPho > view {
|
||||
display: inline-block;
|
||||
padding: 10rpx 0;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.emaPho > view.active {
|
||||
color: $themeColor;
|
||||
padding: 10rpx 10rpx;
|
||||
border-bottom: 2px solid $themeColor;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.emaPho > span {
|
||||
display: inline-block;
|
||||
margin: 0 30rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.input_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 8rpx;
|
||||
border-bottom: solid 2rpx #efeef4;
|
||||
|
||||
image {
|
||||
width: 36rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.input_item {
|
||||
font-size: 28rpx;
|
||||
border: 0px;
|
||||
flex: 1;
|
||||
height: 70rpx;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button {
|
||||
height: 60rpx;
|
||||
background-color: #f8f9fb;
|
||||
font-size: 28rpx;
|
||||
padding: 0 14rpx;
|
||||
color: $themeColor;
|
||||
line-height: 60rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.grey {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.password_register {
|
||||
margin-top: 40rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.protocol_box {
|
||||
margin-top: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
|
||||
.select {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
background-image: url("@/static/icon/ic_gender_unselected.png");
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
margin-right: 15rpx;
|
||||
|
||||
&.active {
|
||||
background-image: url("@/static/icon/ic_agreed.png");
|
||||
}
|
||||
}
|
||||
|
||||
> text {
|
||||
color: $themeColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.station {
|
||||
height: 230rpx;
|
||||
}
|
||||
|
||||
.third_party_login_box {
|
||||
position: fixed;
|
||||
bottom: 60rpx;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
padding: 0 30rpx;
|
||||
|
||||
.third_party_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
height: 2rpx;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
flex-shrink: 0;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.third_party_content {
|
||||
margin-top: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 80upx;
|
||||
height: 80upx;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup_box {
|
||||
width: 600upx;
|
||||
border-radius: 10rpx;
|
||||
|
||||
.popup_title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 88upx;
|
||||
line-height: 88upx;
|
||||
|
||||
view {
|
||||
align-items: center;
|
||||
font-size: 30upx;
|
||||
display: flex;
|
||||
|
||||
image {
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
margin: 0 20rpx 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup_content {
|
||||
padding: 30rpx 40rpx;
|
||||
}
|
||||
|
||||
.popup_footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
view {
|
||||
width: 45%;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
font-size: 28upx;
|
||||
color: #999;
|
||||
line-height: 70upx;
|
||||
margin: 0 0 30rpx 0;
|
||||
}
|
||||
|
||||
view:last-child {
|
||||
background-color: $themeColor;
|
||||
color: #fff;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dp_title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 50rpx;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dp_content {
|
||||
max-height: 1000rpx;
|
||||
overflow-y: scroll;
|
||||
font-size: 28rpx;
|
||||
color: #555;
|
||||
line-height: 45rpx;
|
||||
|
||||
.dp_con1 {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.qie_huan {
|
||||
font-size: 26rpx;
|
||||
margin: 20rpx 0 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comTy {
|
||||
font-size: 28rpx;
|
||||
line-height: 46rpx;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.youKeL {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 30rpx 0 0 0;
|
||||
font-size: 26rpx;
|
||||
color: $themeColor;
|
||||
|
||||
view {
|
||||
font-weight: bold;
|
||||
border: 1px solid $themeColor;
|
||||
border-radius: 10rpx;
|
||||
padding: 5rpx 15rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
890
pages/user/login.vue
Normal file
890
pages/user/login.vue
Normal file
@@ -0,0 +1,890 @@
|
||||
<template>
|
||||
<view style="background-color: #fff">
|
||||
<view class="logo_bg">
|
||||
<text class="">您好，<br />欢迎来到 太湖云医</text>
|
||||
<image src="@/static/icon/login_icon_1.png" mode="aspectFit" class="icon_hua_1"></image>
|
||||
<image src="@/static/icon/login_icon_2.png" mode="aspectFit" class="icon_hua_2"></image>
|
||||
</view>
|
||||
<view class="register_page">
|
||||
<view class="login_method">
|
||||
<view class="title" :class="{ active: type == 2000 }" v-if="type == 2000">验证码登录/注册</view>
|
||||
<view class="title" :class="{ active: type == 1000 }" v-if="type == 1000">密码登录</view>
|
||||
</view>
|
||||
|
||||
<!-- 验证码登录 -->
|
||||
<view v-if="type == 2000">
|
||||
<view class="flexbox" style="margin-top: 50rpx">
|
||||
<view class="input_tit emaPho" style="margin-top: 0; margin-right: 20rpx">
|
||||
<view @click="changeBrand(3000)" :class="{ active: brand == 3000 }">手机号</view>
|
||||
<span>/</span>
|
||||
<view @click="changeBrand(4000)" :class="{ active: brand == 4000 }">邮箱</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 带区号手机号 -->
|
||||
<view class="flexbox" v-if="brand == 3000" style="margin: 36rpx 0; justify-content: space-between">
|
||||
<view class="quhao">
|
||||
<uni-data-select class="myselect" placeholder="请选择区号" v-model="loginForm.quCode"
|
||||
:localdata="quCodeList" style="height: 30rpx !important"
|
||||
@change="quChange"></uni-data-select>
|
||||
</view>
|
||||
<view class="triangle borderBottom phoneNumberInput"
|
||||
:clasfs="[type == 1000 ? 'left_triangle' : 'right_triangle']">
|
||||
<u--input class="form_input_box" type="number" v-model="loginForm.phone"
|
||||
placeholder="请输入您的手机号" placeholder-class="grey" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="input_box" v-if="brand == 4000">
|
||||
<u--input class="form_input_box" v-model="loginForm.email" placeholder="请输入您的邮箱"
|
||||
placeholder-class="grey"/>
|
||||
</view>
|
||||
<view class="input_tit">验证码</view>
|
||||
<view class="input_box">
|
||||
<u--input class="form_input_box" v-model="loginForm.code" placeholder="请输入您的验证码"
|
||||
placeholder-class="grey" maxlength="6" @confirm="onSubmit" />
|
||||
<button class="active" @click="onSetCode">{{ codeText }}</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 密码登录 -->
|
||||
<view v-if="type == 1000">
|
||||
<!-- 手机号/邮箱 -->
|
||||
<view class="input_tit" style="margin-top: 80rpx">手机号 / 邮箱</view>
|
||||
<view class="input_box">
|
||||
<u--input class="form_input_box" v-model="loginForm.phoneEmail" placeholder="请输入您的手机号或者邮箱"
|
||||
placeholder-class="grey" />
|
||||
</view>
|
||||
<view class="input_tit">密码</view>
|
||||
<view class="input_box">
|
||||
<u--input v-model="loginForm.password" :password="!isSee" placeholder="请输入密码"
|
||||
placeholder-class="grey" @confirm="onSubmit" class="form_input_box">
|
||||
</u--input><u-icon class="active" :name="isSee ? 'eye-fill' : 'eye-off'" @click="isSee = !isSee"
|
||||
:color="isSee ? '#5188e5' : '#b0b0b0'" size="22"
|
||||
style="display: block; margin-right: 10rpx"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="protocol_box">
|
||||
<view class="select" :class="{ active: agree }" @click="agree = !agree"></view>
|
||||
我已同意
|
||||
|
||||
<span class="highlight" @click="yhxyShow = true">《用户协议》</span>
|
||||
和
|
||||
<span class="highlight" @click="yszcShow = true">《隐私协议》</span>
|
||||
</view>
|
||||
<view class="btn_box">
|
||||
<button @click="onSubmit">登 录</button>
|
||||
</view>
|
||||
<view class="loginHelp" v-if="submitClickNum > 0">
|
||||
<text>登录遇到问题？</text><text class="link"
|
||||
@click="onPageJump('/pages/user/workOrder', 'login')">去反馈问题</text>
|
||||
</view>
|
||||
|
||||
<view class="qie_huan" style="display: flex; justify-content: center">
|
||||
<view style="width: 30%" @click="changeType(1000)" v-if="type == 2000">密码登录</view>
|
||||
<view style="width: 50%; display: flex; justify-content: space-between" v-if="type == 1000">
|
||||
<text @click="changeType(2000)">验证码登录</text>
|
||||
<text v-if="type == 1000" @click="onPageJump('/pages/user/forget')">忘记密码？</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="youKeL" v-if="$platform=='ios'">
|
||||
<view @click="onPageJump('/pages/visitor/index')">免登录体验</view>
|
||||
</view>
|
||||
|
||||
<u-popup :show="yhxyShow" title="用户协议" :round="10" @close="yhxyShow = false">
|
||||
<view class="tanchu">
|
||||
<view class="dp_title" v-html="yhxyText.title"></view>
|
||||
<view class="dp_content" v-html="yhxyText.content"></view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<u-popup :show="yszcShow" title="隐私政策" :round="10" @close="yszcShow = false">
|
||||
<view class="tanchu">
|
||||
<view class="dp_title" v-html="yszcText.title"></view>
|
||||
<view class="dp_content" v-html="yszcText.content"></view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var clear;
|
||||
import { mapState, mapMutations } from "vuex";
|
||||
import socket from "@/config/socket";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
appForm: {
|
||||
loginName: 18834844847,
|
||||
loginPwd: "Zy123456",
|
||||
},
|
||||
passShowIcon: require("@/static/icon/ic_logon_display.png"),
|
||||
passHideIcon: require("@/static/icon/ic_logon_hide.png"),
|
||||
type: 2000,
|
||||
brand: 3000,
|
||||
isSee: false,
|
||||
//验证码
|
||||
codeText: "获取验证码",
|
||||
//验证码已发
|
||||
readonly: false,
|
||||
agree: false,
|
||||
isIos: true,
|
||||
system: 13,
|
||||
clearTime: null,
|
||||
HealthOpen: false,
|
||||
health_phone: "",
|
||||
health_password: "",
|
||||
isSee_H: false,
|
||||
yhxyShow: false,
|
||||
yszcShow: false,
|
||||
yhxyText: {
|
||||
title: "",
|
||||
content: "",
|
||||
},
|
||||
yszcText: {
|
||||
title: "",
|
||||
content: ""
|
||||
},
|
||||
quShow: false,
|
||||
quCodeList: [], // 国家区域码
|
||||
loginForm: {},
|
||||
urlList: {
|
||||
registerOrLogin: "common/user/registerOrLogin", //验证码登录
|
||||
passwordLogin: "common/user/login", //密码登录
|
||||
sendcode: "common/user/sms/sendcode", //密码登录
|
||||
sendEmailcode: "common/user/getMailCaptcha", //密码登录
|
||||
apiLogin: "app/phone.do?loginV2",
|
||||
},
|
||||
submitClickNum: 0, //登录按钮点击次数
|
||||
};
|
||||
},
|
||||
//第一次加载
|
||||
onLoad(e) {
|
||||
// #ifdef APP-PLUS
|
||||
this.isIos = plus.os.name == "iOS";
|
||||
let systemInfo = uni.getSystemInfoSync();
|
||||
this.system = parseFloat(systemInfo["system"].replace(/[a-zA-Z]/g, ""));
|
||||
this.type = 2000;
|
||||
this.brand = 3000;
|
||||
|
||||
this.loginForm = {};
|
||||
// #endif
|
||||
},
|
||||
created() {
|
||||
this.getCountyCode();
|
||||
},
|
||||
//页面显示
|
||||
onShow() {
|
||||
this.getSettlement(113, "yszcText");
|
||||
this.getSettlement(112, "yhxyText");
|
||||
},
|
||||
//方法
|
||||
methods: {
|
||||
...mapMutations(["setUserInfo"]),
|
||||
...mapMutations(["setHealthMes"]),
|
||||
changeType(val) {
|
||||
this.loginForm = {};
|
||||
this.type = 2000;
|
||||
this.type = val;
|
||||
this.isSee = false;
|
||||
this.agree = false;
|
||||
if (val == 2000) {
|
||||
this.loginForm.quCode = this.quCodeList[0].value;
|
||||
}
|
||||
},
|
||||
changeBrand(val) {
|
||||
this.loginForm = {};
|
||||
this.loginForm.quCode = this.quCodeList[0].value;
|
||||
this.brand = val;
|
||||
},
|
||||
// 获取国家区域编码
|
||||
getCountyCode() {
|
||||
this.$http
|
||||
.request({
|
||||
url: "book/baseArea/getAllBaseArea",
|
||||
method: "POST",
|
||||
data: {},
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0 && res.baseAreas.length > 0) {
|
||||
this.quCodeList = res.baseAreas.map((item) => {
|
||||
let obj = {
|
||||
text: item.title + " (+" + item.code + ")",
|
||||
value: item.code,
|
||||
};
|
||||
return obj;
|
||||
});
|
||||
this.loginForm.quCode = this.quCodeList[0].value;
|
||||
this.$forceUpdate();
|
||||
} else {
|
||||
this.quCodeList = [];
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e, "e");
|
||||
});
|
||||
},
|
||||
// 获取协议内容
|
||||
async getSettlement(id, type) {
|
||||
//隐私策略
|
||||
var data = await this.$commonJS.getAgreement(id);
|
||||
if (data.content) {
|
||||
data.content = data.content.replace(
|
||||
/<h5>/g,
|
||||
'<view style="font-weight: bold;font-size: 32rpx;margin-top: 20rpx;margin-bottom: 20rpx;">'
|
||||
);
|
||||
data.content = data.content.replace(/<\/h5>/g, "</view>");
|
||||
}
|
||||
if (type == "yszcText") {
|
||||
this.yszcText = data;
|
||||
}
|
||||
if (type == "yhxyText") {
|
||||
this.yhxyText = data;
|
||||
}
|
||||
},
|
||||
|
||||
quChange(e) {
|
||||
console.log(e, "e");
|
||||
},
|
||||
onPageJump(url, name) {
|
||||
if(name){
|
||||
uni.navigateTo({
|
||||
url: `${url}?name=${name}`
|
||||
});
|
||||
}else{
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
}
|
||||
},
|
||||
//验证码按钮文字状态
|
||||
getCodeState() {
|
||||
clear && clearInterval(clear);
|
||||
const _this = this;
|
||||
this.readonly = true;
|
||||
this.codeText = "60S";
|
||||
var s = 60;
|
||||
clear = setInterval(() => {
|
||||
s--;
|
||||
_this.codeText = s + "S";
|
||||
if (s <= 0) {
|
||||
clearInterval(clear);
|
||||
_this.codeText = "获取验证码";
|
||||
_this.readonly = false;
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
// 发送验证码
|
||||
onSetCode() {
|
||||
if (this.readonly) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.agree) {
|
||||
uni.showToast({
|
||||
title: "请先同意《用户协议》和《隐私协议》",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.brand == 3000) {
|
||||
if (!this.loginForm.phone) {
|
||||
uni.showToast({
|
||||
title: "请输入手机号",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.loginForm.quCode == null || this.loginForm.quCode == 86) {
|
||||
// 如果没选择国家code，默认是中国大陆
|
||||
if (!this.$base.phoneRegular.test(this.loginForm.phone)) {
|
||||
this.submitClickNum += 1
|
||||
uni.showToast({
|
||||
title: "手机格式不正确",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.$http
|
||||
.post(this.urlList.sendcode, {
|
||||
phone: this.loginForm.phone,
|
||||
areaCode: this.loginForm.quCode,
|
||||
type: 2000,
|
||||
})
|
||||
.then((res) => {
|
||||
uni.showToast({
|
||||
title: "验证码发送成功",
|
||||
icon: "none",
|
||||
});
|
||||
this.getCodeState();
|
||||
});
|
||||
} else {
|
||||
if (!this.loginForm.email) {
|
||||
uni.showToast({
|
||||
title: "请输入邮箱",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!this.$base.mailRegular.test(this.loginForm.email)) {
|
||||
uni.showToast({
|
||||
title: "邮箱格式不正确",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.$http
|
||||
.get(this.urlList.sendEmailcode, {
|
||||
email: this.loginForm.email,
|
||||
})
|
||||
.then((res) => {
|
||||
uni.showToast({
|
||||
title: "验证码发送成功",
|
||||
icon: "none",
|
||||
});
|
||||
this.getCodeState();
|
||||
});
|
||||
}
|
||||
},
|
||||
// 手机密码登录
|
||||
async onSubmit() {
|
||||
if (!this.agree) {
|
||||
this.$commonJS.showToast("请先同意《用户协议》和《隐私协议》");
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
let httpData = {};
|
||||
if (this.type == 2000) {
|
||||
if (this.brand == 3000) {
|
||||
if (!this.loginForm.phone) {
|
||||
uni.showToast({
|
||||
title: "请输入手机号",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.loginForm.quCode == null || this.loginForm.quCode == 86) {
|
||||
if (!this.$base.phoneRegular.test(this.loginForm.phone)) {
|
||||
this.submitClickNum += 1
|
||||
this.$commonJS.showToast("手机格式不正确");
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
httpData.tel = this.loginForm.phone;
|
||||
} else {
|
||||
if (!this.loginForm.email) {
|
||||
this.$commonJS.showToast("请输入邮箱");
|
||||
|
||||
return;
|
||||
}
|
||||
if (!this.$base.mailRegular.test(this.loginForm.email)) {
|
||||
this.$commonJS.showToast("邮箱格式不正确");
|
||||
|
||||
return;
|
||||
}
|
||||
httpData.tel = this.loginForm.email;
|
||||
}
|
||||
if (!this.loginForm.code) {
|
||||
this.$commonJS.showToast("请输入验证码");
|
||||
|
||||
return;
|
||||
}
|
||||
httpData.code = this.loginForm.code;
|
||||
|
||||
await this.$http
|
||||
.get(this.urlList.registerOrLogin, httpData)
|
||||
.then(async (res) => {
|
||||
this.submitClickNum = 0
|
||||
res.userInfo.token = res.token.token;
|
||||
await this.setUserInfo(res.userInfo);
|
||||
console.log(
|
||||
"res.userInfo哈哈红红火火恍恍惚惚 at line 593:",
|
||||
res.token
|
||||
);
|
||||
uni.setStorageSync("token", res.token.token);
|
||||
uni.showToast({
|
||||
title: "登录成功",
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
uni.setStorageSync("isJump", "false");
|
||||
// uni.reLaunch({
|
||||
// url: "/pages/home/index"
|
||||
// });
|
||||
uni.reLaunch({
|
||||
url: "/pages/doctors/index"
|
||||
});
|
||||
}, 100);
|
||||
}).catch(e => {
|
||||
uni.showToast({
|
||||
title: '登录失败',
|
||||
icon: 'none'
|
||||
})
|
||||
this.submitClickNum += 1
|
||||
});
|
||||
} else {
|
||||
if (!this.loginForm.phoneEmail) {
|
||||
uni.showToast({
|
||||
title: "请输入手机号或邮箱",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!this.loginForm.password) {
|
||||
uni.showToast({
|
||||
title: "请输入密码",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
httpData.password = this.loginForm.password;
|
||||
httpData.phone = this.loginForm.phoneEmail;
|
||||
await this.$http
|
||||
.post(this.urlList.passwordLogin, httpData)
|
||||
.then(async (res) => {
|
||||
this.submitClickNum = 0
|
||||
res.userInfo.token = res.token.token;
|
||||
await this.setUserInfo(res.userInfo);
|
||||
uni.setStorageSync("token", res.token.token);
|
||||
uni.showToast({
|
||||
title: "登录成功",
|
||||
});
|
||||
setTimeout(() => {
|
||||
// uni.reLaunch({
|
||||
// url: "/pages/home/index"
|
||||
// });
|
||||
uni.reLaunch({
|
||||
url: "/pages/doctors/index"
|
||||
});
|
||||
}, 500);
|
||||
}).catch(e => {
|
||||
uni.showToast({
|
||||
title: '登录失败',
|
||||
icon: 'none'
|
||||
})
|
||||
this.submitClickNum += 1
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/static/mixin.scss";
|
||||
|
||||
.phoneNumberInput {
|
||||
width: calc(100% - 160rpx);
|
||||
// width: 100%;
|
||||
height: 67rpx;
|
||||
|
||||
input {
|
||||
font-size: 28rpx;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.borderBottom {
|
||||
border-bottom: 1px solid #efeef4;
|
||||
}
|
||||
|
||||
.flexbox {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.quhao {
|
||||
height: 50rpx;
|
||||
width: 290rpx;
|
||||
margin: 12rpx 15rpx 0 0;
|
||||
}
|
||||
|
||||
.myselect {
|
||||
width: 240rpx;
|
||||
height: 50rpx !important;
|
||||
|
||||
/deep/.uni-select {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
/deep/.uni-select__selector-item {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: $themeColor;
|
||||
}
|
||||
|
||||
.tanchu {
|
||||
padding: 40rpx 30rpx 40rpx 30rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo_bg {
|
||||
background-image: url("@/static/login_bg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 25vh;
|
||||
position: relative;
|
||||
|
||||
text {
|
||||
font-size: 45upx;
|
||||
line-height: 65rpx;
|
||||
position: absolute;
|
||||
bottom: 140rpx;
|
||||
left: 45rpx;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
letter-spacing: 6rpx;
|
||||
}
|
||||
|
||||
.icon_hua_1 {
|
||||
position: absolute;
|
||||
bottom: 60rpx;
|
||||
left: 245rpx;
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
opacity: 0.08;
|
||||
}
|
||||
|
||||
.icon_hua_2 {
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
right: 30rpx;
|
||||
width: 250rpx;
|
||||
height: 250rpx;
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
|
||||
.register_page {
|
||||
padding: calc(var(--status-bar-height)) 50rpx 40rpx;
|
||||
background-color: #fff;
|
||||
min-height: 75vh;
|
||||
|
||||
.login_method {
|
||||
justify-content: space-between;
|
||||
padding: 0 96rpx;
|
||||
text-align: center;
|
||||
|
||||
.title {
|
||||
margin: 0 auto;
|
||||
font-size: 40rpx;
|
||||
letter-spacing: 3rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.left_triangle {
|
||||
&::before {
|
||||
left: 140rpx;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 140rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right_triangle {
|
||||
&::before {
|
||||
left: 470rpx;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 470rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.input_tit {
|
||||
margin-top: 20rpx;
|
||||
font-size: 38rpx;
|
||||
font-weight: bold;
|
||||
color: $themeColor;
|
||||
}
|
||||
|
||||
.emaPho {}
|
||||
|
||||
.emaPho>view {
|
||||
display: inline-block;
|
||||
padding: 10rpx 0;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.emaPho>view.active {
|
||||
color: $themeColor;
|
||||
padding: 10rpx 10rpx;
|
||||
border-bottom: 2px solid $themeColor;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.emaPho>span {
|
||||
display: inline-block;
|
||||
margin: 0 30rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.input_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 8rpx;
|
||||
border-bottom: solid 2rpx #efeef4;
|
||||
margin: 30rpx 0;
|
||||
|
||||
image {
|
||||
width: 36rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.input_item {
|
||||
font-size: 28rpx;
|
||||
border: 0px;
|
||||
flex: 1;
|
||||
height: 70rpx;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button {
|
||||
height: 60rpx;
|
||||
background-color: #f8f9fb;
|
||||
font-size: 28rpx;
|
||||
padding: 0 14rpx;
|
||||
color: $themeColor;
|
||||
line-height: 60rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.grey {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.btn_box {
|
||||
margin-top: 40rpx;
|
||||
|
||||
button {
|
||||
font-size: 32rpx;
|
||||
background-color: $themeBgColor;
|
||||
color: #fff;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 50rpx;
|
||||
|
||||
&.active {
|
||||
@include theme("btn_bg") color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.password_register {
|
||||
margin-top: 40rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.protocol_box {
|
||||
margin-top: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
|
||||
.select {
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
background-image: url("@/static/icon/ic_gender_unselected.png");
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
margin-right: 10rpx;
|
||||
|
||||
&.active {
|
||||
background-image: url("@/static/icon/ic_agreed.png");
|
||||
}
|
||||
}
|
||||
|
||||
>text {
|
||||
color: $themeColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.station {
|
||||
height: 230rpx;
|
||||
}
|
||||
|
||||
.third_party_login_box {
|
||||
position: fixed;
|
||||
bottom: 60rpx;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
padding: 0 30rpx;
|
||||
|
||||
.third_party_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
height: 2rpx;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
flex-shrink: 0;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.third_party_content {
|
||||
margin-top: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 80upx;
|
||||
height: 80upx;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup_box {
|
||||
width: 600upx;
|
||||
border-radius: 10rpx;
|
||||
|
||||
.popup_title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 88upx;
|
||||
line-height: 88upx;
|
||||
|
||||
view {
|
||||
align-items: center;
|
||||
font-size: 30upx;
|
||||
display: flex;
|
||||
|
||||
image {
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
margin: 0 20rpx 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup_content {
|
||||
padding: 30rpx 40rpx;
|
||||
}
|
||||
|
||||
.popup_footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
view {
|
||||
width: 45%;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
font-size: 28upx;
|
||||
color: #999;
|
||||
line-height: 70upx;
|
||||
margin: 0 0 30rpx 0;
|
||||
}
|
||||
|
||||
view:last-child {
|
||||
background-color: $themeColor;
|
||||
color: #fff;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dp_title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 50rpx;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dp_content {
|
||||
max-height: 1000rpx;
|
||||
overflow-y: scroll;
|
||||
font-size: 28rpx;
|
||||
color: #555;
|
||||
line-height: 45rpx;
|
||||
|
||||
.dp_con1 {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.qie_huan {
|
||||
font-size: 26rpx;
|
||||
margin: 20rpx 0 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comTy {
|
||||
font-size: 28rpx;
|
||||
line-height: 46rpx;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.youKeL {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 60rpx 0 0 0;
|
||||
font-size: 28rpx;
|
||||
color: $themeColor;
|
||||
|
||||
view {
|
||||
border: 1px solid $themeColor;
|
||||
border-radius: 10rpx;
|
||||
padding: 5rpx 15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.loginHelp {
|
||||
border: 1px solid #f5dab1;
|
||||
margin-top: 16rpx;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
padding: 10rpx;
|
||||
background-color: #fdf6ec;
|
||||
border-radius: 15rpx;
|
||||
|
||||
.link {
|
||||
color: #e6a23c;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
376
pages/user/workOrder.vue
Normal file
376
pages/user/workOrder.vue
Normal file
@@ -0,0 +1,376 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<z-nav-bar title="问题反馈/申诉"></z-nav-bar>
|
||||
<uni-forms :modelValue="form" :rules="rules" ref="form" style="margin-top: 10rpx;">
|
||||
<view class="input_box">
|
||||
<uni-forms-item label="" name="type" label-width="0">
|
||||
<view class="">
|
||||
<text class="input_tit"><i>*</i>问题类型：</text>
|
||||
</view>
|
||||
<view class="in" style="flex: 1; border: none;">
|
||||
<uni-data-select style="width: 100%;" v-model="form.type"
|
||||
:localdata="typeLIst"></uni-data-select>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<view class="input_box">
|
||||
<uni-forms-item label="" name="account" label-width="0">
|
||||
<text class="input_tit"><i>*</i>太湖云医账号:</text>
|
||||
<view class="in">
|
||||
<input placeholder-style="font-size:26rpx" type="text" v-model="form.account"
|
||||
placeholder="请输入手机号/邮箱" />
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<view class="input_box" v-if="form.type == 3">
|
||||
<uni-forms-item label="" name="relation" label-width="0">
|
||||
<text class="input_tit"><i>*</i>订单编号:</text>
|
||||
<view class="in">
|
||||
<input type="number" @input="relationInput" placeholder-style="font-size:26rpx"
|
||||
v-model="form.relation" placeholder="请输入订单编号" />
|
||||
</view>
|
||||
<text v-show="relationError" style="font-size: 24rpx; color: red; margin-top: 10rpx;">请填写订单编号</text>
|
||||
<text v-show="relationErrorPattern"
|
||||
style="font-size: 24rpx; color: red; margin-top: 10rpx;">订单编号格式错误</text>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<view class="input_box">
|
||||
<uni-forms-item label="" name="content" label-width="0">
|
||||
<text class="input_tit"><i>*</i>问题描述:</text>
|
||||
<view class="in">
|
||||
<view class="uni-textarea">
|
||||
<textarea placeholder-style="font-size:26rpx" v-model="form.content" maxlength="200"
|
||||
placeholder="请输入您要反馈的问题" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<view class="input_box">
|
||||
<uni-forms-item label="" name="contactInformation" label-width="0">
|
||||
<text class="input_tit"><i>*</i>联系电话:</text>
|
||||
{{reversedMessage}}
|
||||
<view class="in">
|
||||
<input type="number" placeholder-style="font-size:26rpx" @input="telInput"
|
||||
v-model="form.contactInformation" placeholder="请输入与您联系的手机号" />
|
||||
</view>
|
||||
<text v-show="telError" style="font-size: 24rpx; color: red; margin-top: 10rpx;">手机号格式错误</text>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
|
||||
<view class="input_box">
|
||||
<text class="input_tit">问题截图:</text>
|
||||
<view class="in" style="border: none;" @click="checkPermision">
|
||||
<u-upload :fileList="fileList1" @afterRead="addPic" @delete="deletePic" multiple :maxCount="4"
|
||||
width="40" height="40" :previewFullImage="true">
|
||||
</u-upload>
|
||||
<text style="font-size: 24rpx; color: #999;">可上传4张问题截图</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-forms>
|
||||
<view class="btn_box"><button @click="onSubmit">提 交</button></view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import $http from '@/config/requestConfig.js';
|
||||
import permission from "@/js_sdk/wa-permission/permission.js"
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fileList1: [],
|
||||
playData: {},
|
||||
//手机号账号
|
||||
form: {
|
||||
account: '', // 账号
|
||||
content: '', // 描述
|
||||
image: '', //图片
|
||||
contactInformation: '', // 联系电话
|
||||
relation: '', // 订单号
|
||||
type: null, // 反馈类型
|
||||
},
|
||||
telError: false,
|
||||
relationError: false,
|
||||
relationErrorPattern: false,
|
||||
rules: {
|
||||
account: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请输入账号',
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
content: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请输入问题描述',
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
contactInformation: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请输入联系电话',
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
type: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请选择反馈类型',
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
pageType: '',
|
||||
typeLIst: [
|
||||
{
|
||||
value: "1",
|
||||
text: "登录相关问题"
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
text: "账号相关问题"
|
||||
},
|
||||
{
|
||||
value: "3",
|
||||
text: "问答相关问题"
|
||||
},
|
||||
{
|
||||
value: "5",
|
||||
text: "病历相关问题"
|
||||
},
|
||||
{
|
||||
value: "6",
|
||||
text: "充值相关问题"
|
||||
},
|
||||
{
|
||||
value: "7",
|
||||
text: "网络暴力举报"
|
||||
},
|
||||
{
|
||||
value: "8",
|
||||
text: "其他"
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
//第一次加载
|
||||
onLoad(e) {
|
||||
this.pageType = e.name
|
||||
switch (this.pageType) {
|
||||
case "login":
|
||||
this.form.type = '1'
|
||||
break;
|
||||
case "order":
|
||||
this.form.type = '3'
|
||||
break;
|
||||
}
|
||||
},
|
||||
//页面显示
|
||||
onShow() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo']),
|
||||
reversedMessage: function() {
|
||||
this.form.account = this.userInfo.tel
|
||||
}
|
||||
},
|
||||
//方法
|
||||
methods: {
|
||||
relationInput(e) {
|
||||
this.relationError = false
|
||||
this.relationErrorPattern = false
|
||||
},
|
||||
telInput(e) {
|
||||
this.telError = false
|
||||
},
|
||||
async checkPermision() {
|
||||
var result = await permission.premissionCheck("CAMERA_EXTERNAL_STORAGE")
|
||||
if (result != 1) {
|
||||
return false
|
||||
}
|
||||
},
|
||||
async addPic(e) {
|
||||
let that = this;
|
||||
for (var i = 0; i < e.file.length; i++) {
|
||||
uni.uploadFile({
|
||||
url: this.$baseUrl + "/oss/fileoss",
|
||||
filePath: e.file[i].url,
|
||||
name: "file",
|
||||
formData: {},
|
||||
success: (res) => {
|
||||
that.fileList1.push({
|
||||
url: JSON.parse(res.data).url,
|
||||
});
|
||||
},
|
||||
fail: (error) => {
|
||||
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
deletePic(event) {
|
||||
this.fileList1.splice(event.index, 1)
|
||||
},
|
||||
onSubmit() {
|
||||
this.$refs.form.validate().then(res => {
|
||||
if (this.form.type == 3) {
|
||||
if (this.form.relation == '') {
|
||||
this.relationError = true
|
||||
return
|
||||
} else {
|
||||
if (!this.$base.orderRegular.test(this.form.relation)) {
|
||||
this.relationErrorPattern = true
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.fileList1.length > 0) {
|
||||
let _list = this.fileList1
|
||||
_list = _list.map(item => item.url)
|
||||
this.form.image = _list.join(',')
|
||||
}
|
||||
if (!this.$base.phoneRegular.test(this.form.contactInformation)) {
|
||||
this.telError = true
|
||||
uni.showToast({
|
||||
title: '手机格式不正确',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
$http.request({
|
||||
url: "common/sysFeedback/addSysFeedback",
|
||||
method: "POST",
|
||||
data: {
|
||||
...this.form
|
||||
},
|
||||
header: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "提交成功！",
|
||||
showCancel: false,
|
||||
success: (res) => {
|
||||
this.fileList1 = []
|
||||
uni.switchTab({
|
||||
url: '/pages/my/index'
|
||||
});
|
||||
}
|
||||
});
|
||||
}).catch(e => {
|
||||
uni.showToast({
|
||||
title: '提交失败',
|
||||
icon: 'error'
|
||||
})
|
||||
});
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: '页面有未填写的内容哦',
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/mixin.scss';
|
||||
|
||||
::v-deep .uni-forms-item {
|
||||
margin-bottom: 26rpx !important;
|
||||
}
|
||||
|
||||
.input_tit {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.page {
|
||||
background-color: #ffffff;
|
||||
padding: 0 20rpx;
|
||||
min-height: 100vh;
|
||||
|
||||
.title {
|
||||
padding: 30rpx 0 40rpx 0;
|
||||
font-size: 40rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.input_box {
|
||||
display: block;
|
||||
padding-top: 10rpx;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
font-size: 24rpx;
|
||||
color: red;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
|
||||
.in {
|
||||
border: 1rpx solid #eeeeee;
|
||||
border-radius: 8rpx;
|
||||
padding: 8rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 30rpx;
|
||||
width: 180rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
|
||||
flex: 1;
|
||||
height: 50rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
button {
|
||||
height: 78rpx;
|
||||
line-height: 78rpx;
|
||||
font-size: 30rpx;
|
||||
color: $themeColor;
|
||||
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn_box {
|
||||
margin-top: 70rpx;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
button {
|
||||
font-size: 30rpx;
|
||||
background: linear-gradient(90deg, #005eae 0%, #5188e5 80%);
|
||||
color: #fff;
|
||||
line-height: 85rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.protocol {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
|
||||
text {
|
||||
color: $themeColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user