ui页面
parent
59666731cc
commit
5a59c268f9
@ -0,0 +1,100 @@
|
||||
/**
|
||||
* 通用消息框
|
||||
* @param content string 消息内容
|
||||
* @param fn function 回调
|
||||
*
|
||||
*/
|
||||
const msgToast = (content, fn, type = "none") => {
|
||||
uni.showToast({
|
||||
title: content,
|
||||
duration: 2000,
|
||||
icon: type,
|
||||
success: fn
|
||||
? () => {
|
||||
setTimeout(() => {
|
||||
fn();
|
||||
}, 1500);
|
||||
}
|
||||
: function () {},
|
||||
});
|
||||
};
|
||||
|
||||
/* 手机号验证 */
|
||||
const vefTel = (key) => {
|
||||
let reg_tel =
|
||||
/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
|
||||
///^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/; // 11位手机号
|
||||
if (key === "" || key === undefined || key === null) {
|
||||
uni.showToast({
|
||||
title: "请输入手机号",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
return false;
|
||||
} else if (!reg_tel.test(key)) {
|
||||
uni.showToast({
|
||||
title: "手机号码格式不正确",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
/* 非空验证 */
|
||||
const vefEmpty = (key, msg) => {
|
||||
if (key === "" || key === undefined || key === null) {
|
||||
uni.showToast({
|
||||
title: msg,
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
const logout = () => {
|
||||
msgToast("登录已过期,请重新登录", () => {
|
||||
uni.removeStorageSync("userInfo");
|
||||
uni.reLaunch({
|
||||
url: "../login/login",
|
||||
});
|
||||
});
|
||||
};
|
||||
/**
|
||||
* @description: H5 App通用方案 解决H5刷新返回失败问题
|
||||
* @param {*} params
|
||||
*/
|
||||
const navigateBack = (params) => {
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length === 1) {
|
||||
if (typeof params === "number") {
|
||||
history.go(-params);
|
||||
} else {
|
||||
history.back();
|
||||
}
|
||||
} else {
|
||||
uni.navigateBack();
|
||||
}
|
||||
};
|
||||
/**
|
||||
* @description: 获取url参数
|
||||
* @param {*} params
|
||||
*/
|
||||
const getLocationParams = (name) => {
|
||||
const pages = getCurrentPages();
|
||||
const curPage = pages[pages.length - 1];
|
||||
return name ? curPage.options[name] : curPage.options;
|
||||
};
|
||||
export default {
|
||||
msgToast,
|
||||
vefTel,
|
||||
vefEmpty,
|
||||
logout,
|
||||
navigateBack,
|
||||
getLocationParams,
|
||||
};
|
@ -0,0 +1,4 @@
|
||||
import login from "./login";
|
||||
export default {
|
||||
login,
|
||||
};
|
@ -0,0 +1,5 @@
|
||||
import http from "./interface";
|
||||
|
||||
// 登录
|
||||
|
||||
export default {};
|
@ -1,24 +1,28 @@
|
||||
import App from './App'
|
||||
import App from "./App";
|
||||
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
import './uni.promisify.adaptor'
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
import uView from './uview-ui'
|
||||
Vue.use(uView)
|
||||
import Vue from "vue";
|
||||
import api from "@/http/";
|
||||
import common from "./common/index.js";
|
||||
import "./uni.promisify.adaptor";
|
||||
Vue.config.productionTip = false;
|
||||
App.mpType = "app";
|
||||
import uView from "./uview-ui";
|
||||
Vue.use(uView);
|
||||
Vue.prototype.$api = api;
|
||||
Vue.prototype.$common = common;
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
...App,
|
||||
});
|
||||
app.$mount();
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
import { createSSRApp } from 'vue'
|
||||
import { createSSRApp } from "vue";
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
const app = createSSRApp(App);
|
||||
return {
|
||||
app
|
||||
}
|
||||
app,
|
||||
};
|
||||
}
|
||||
// #endif
|
||||
|
@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<view>23</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<view class="main">
|
||||
<view class="logo">
|
||||
<image src="@/static/image/logo2.png" mode="scaleToFill" class="img" />
|
||||
</view>
|
||||
<view class="container">
|
||||
<view class="head">
|
||||
<view style="display:flex; align-items: center;">
|
||||
<view class="title">注册手机号</view>
|
||||
<view :style="{ fontSize: '18rpx' }">*实名认证失败</view>
|
||||
<!-- <view>*实名认证成功</view> -->
|
||||
</view>
|
||||
<view style="color:#7FA770;font-size:24rpx;margin-left:36rpx">此实名仅用于注册该小程序</view>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="item">
|
||||
<view class="name">手机号</view>
|
||||
<u--input placeholder="请输入手机号" border="none" v-model="phone" @change="changePhone" clearable
|
||||
type="number" @blur="checkPhone" @confirm="checkPhone"></u--input>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="name">身份证号</view>
|
||||
<u--input placeholder="请输入身份证号" border="none" v-model="num" @change="changeNum" clearable
|
||||
type="number"></u--input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-box">
|
||||
<view class="color:#626262;font-size:28rpx">身份证照片</view>
|
||||
<view style="display: flex;justify-content:space-between;margin-top:20rpx">
|
||||
<view class="card">
|
||||
<view>
|
||||
<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple
|
||||
:maxCount="1" width="250" height="150">
|
||||
<image src="@/static/image/card.png" mode="scaleToFill"
|
||||
style="width: 270rpx;height: 158rpx;"></image>
|
||||
</u-upload>
|
||||
</view>
|
||||
<view style="color:#4E964D;font-size:20rpx;margin-top:20rpx">上传身份证人像面</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view>
|
||||
<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple
|
||||
:maxCount="1" width="250" height="150">
|
||||
<image src="@/static/image/card2.png" mode="scaleToFill"
|
||||
style="width: 270rpx;height: 158rpx;"></image>
|
||||
</u-upload>
|
||||
</view>
|
||||
<view style="color:#4E964D;font-size:20rpx;margin-top:20rpx">上传身份证国徽面</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="face">
|
||||
<view class="faceTitle">人脸识别</view>
|
||||
<view class="recognition">
|
||||
<view style="color: #fff;margin-right:10rpx">前往认证</view>
|
||||
<u-icon name="arrow-right-double" color="#fff"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="agreement">
|
||||
<u-checkbox-group v-model="checked" iconPlacement="left" placement="row" inactiveColor="#76C458">
|
||||
<u-checkbox name="yes" shape="circle" activeColor="#76C458"></u-checkbox>
|
||||
<view class="know">
|
||||
已阅读并同意
|
||||
<text @click="agreementHandle('service')">《用户协议》&《集保东西用户协议》</text>
|
||||
</view>
|
||||
</u-checkbox-group>
|
||||
</view>
|
||||
<u-button text="完成注册" shape="circle" style="background-color: #76C458;width:284rpx;color:#fff" @click="completeRegistration"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
phone: "",
|
||||
num: "",
|
||||
checked: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changePhone(value) {
|
||||
this.phone = value;
|
||||
},
|
||||
checkPhone(event) {
|
||||
if (event) {
|
||||
this.$common.vefTel(event);
|
||||
}
|
||||
},
|
||||
changeNum(value) {
|
||||
this.num = value;
|
||||
},
|
||||
completeRegistration(){
|
||||
if (!this.checked.length) return this.$common.msgToast("请阅读并勾选协议");
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/deep/.u-checkbox__icon-wrap--circle {
|
||||
width: 25upx !important;
|
||||
height: 25upx !important;
|
||||
}
|
||||
/deep/ .u-checkbox-label--left {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.main {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.img {
|
||||
width: 124rpx;
|
||||
height: 72rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
height: calc(100vh - 200upx);
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 40rpx 40rpx 0rpx 0rpx;
|
||||
padding: 62rpx 32rpx;
|
||||
|
||||
.head {
|
||||
.title {
|
||||
color: #626262;
|
||||
font-size: 40rpx;
|
||||
margin-left: 36rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.item {
|
||||
box-sizing: border-box;
|
||||
background: #f8f8f8;
|
||||
border-radius: 20rpx;
|
||||
width: 100%;
|
||||
height: 92rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.name {
|
||||
width: 200rpx;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
border-right: 1rpx solid #d1d1d1;
|
||||
}
|
||||
|
||||
/deep/ .u-input {
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-box {
|
||||
width: 100%;
|
||||
height: 322rpx;
|
||||
background: #f8f8f8;
|
||||
padding: 32rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.face {
|
||||
margin-top: 20rpx;
|
||||
box-sizing: border-box;
|
||||
background: #f8f8f8;
|
||||
border-radius: 20rpx;
|
||||
width: 100%;
|
||||
height: 92rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.faceTitle {
|
||||
width: 202rpx;
|
||||
height: 100%;
|
||||
padding: 26rpx 0 26rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.recognition {
|
||||
height: 92rpx;
|
||||
width: calc(100% - 202rpx);
|
||||
background: #76C458;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 0 20rpx 20rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.agreement {
|
||||
font-size: 28rpx;
|
||||
margin: 46rpx auto;
|
||||
.know {
|
||||
margin-top: 20upx;
|
||||
font-size: 28upx;
|
||||
color: #a6a6a6;
|
||||
|
||||
text {
|
||||
color: #76C458;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<view class="main">
|
||||
<view class="logo">
|
||||
<image src="@/static/image/logo2.png" mode="scaleToFill" class="img" />
|
||||
</view>
|
||||
<view class="container">
|
||||
<view>
|
||||
<view class="title">注册手机号</view>
|
||||
<view class="info">
|
||||
<view class="item">
|
||||
<view class="name">手机号</view>
|
||||
<u--input
|
||||
placeholder="请输入手机号"
|
||||
border="none"
|
||||
v-model="phone"
|
||||
@change="changePhone"
|
||||
clearable
|
||||
type="number"
|
||||
@blur="checkPhone"
|
||||
@confirm="checkPhone"
|
||||
></u--input>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="name">确定手机号</view>
|
||||
<u--input
|
||||
placeholder="请输入手机号"
|
||||
border="none"
|
||||
v-model="determinePhone"
|
||||
@change="changeDeterminePhone"
|
||||
clearable
|
||||
type="number"
|
||||
@blur="checkPhone"
|
||||
@confirm="checkPhone"
|
||||
></u--input>
|
||||
<view class="right" v-show="isRight" :style="{background: !isTrue?'#76c458':'#FF0000'}">
|
||||
<u-icon name="checkmark-circle" color="#fff" v-if="!isTrue"></u-icon>
|
||||
<u-icon name="close-circle" color="#fff" v-else></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-button text="下一步" color="#76C458" shape="circle" style="width: 284rpx;" @click="next"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
phone: "",
|
||||
determinePhone: "",
|
||||
isTrue: false,
|
||||
isRight: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changePhone(value) {
|
||||
this.phone = value;
|
||||
},
|
||||
changeDeterminePhone(value) {
|
||||
this.isRight = true;
|
||||
this.determinePhone = value;
|
||||
if (this.phone !== value) {
|
||||
this.isTrue = true;
|
||||
} else {
|
||||
this.isTrue = false;
|
||||
}
|
||||
},
|
||||
checkPhone(event) {
|
||||
if (event) {
|
||||
this.$common.vefTel(event);
|
||||
}
|
||||
},
|
||||
next() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/realName/realName"
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.main {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.img {
|
||||
width: 124rpx;
|
||||
height: 72rpx;
|
||||
}
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
height: calc(100vh - 200upx);
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 40rpx 40rpx 0rpx 0rpx;
|
||||
padding: 62rpx 32rpx;
|
||||
.title {
|
||||
color: #626262;
|
||||
font-size: 40rpx;
|
||||
margin-left: 36rpx;
|
||||
}
|
||||
.info {
|
||||
margin-top: 90rpx;
|
||||
.item {
|
||||
box-sizing: border-box;
|
||||
background: #f8f8f8;
|
||||
border-radius: 20rpx;
|
||||
width: 100%;
|
||||
height: 92rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
.name {
|
||||
width: 200rpx;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
border-right: 1rpx solid #d1d1d1;
|
||||
}
|
||||
/deep/ .u-input {
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
.right {
|
||||
position: relative;
|
||||
width: 70rpx;
|
||||
height: 100%;
|
||||
|
||||
/deep/ .u-icon {
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
top: 35%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
Binary file not shown.
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
After Width: | Height: | Size: 6.3 KiB |
Loading…
Reference in New Issue