ui页面

App.vue

@@ -17,4 +17,10 @@ export default {
 
 <style lang="scss">
 @import "uview-ui/index.scss";
+page {
+  background: url("@/static/image/login-bg.png") no-repeat;
+  background-size: 100% 100%;
+  background-attachment: fixed;
+  height: 100vh;
+}
 </style>

common/index.js

@@ -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,
+};

http/index.js

@@ -0,0 +1,4 @@
+import login from "./login";
+export default {
+  login,
+};

http/interface.js

@@ -0,0 +1,170 @@
+/**
+ * 通用uni-app网络请求
+ * 基于 Promise 对象实现更简单的 request 使用方式，支持请求和响应拦截
+ */
+export default {
+  config: {
+    baseUrl: "",
+    header: {
+      "Content-Type": "application/json;charset=UTF-8",
+      // 'Content-Type':'application/x-www-form-urlencoded'
+    },
+    data: {},
+    method: "GET",
+    dataType: "json" /* 如设为json，会对返回的数据做一次 JSON.parse */,
+    responseType: "text",
+    success() {},
+    fail() {},
+    complete() {},
+  },
+  interceptor: {
+    request: null,
+    response: null,
+  },
+  request(options) {
+    if (!options) {
+      options = {};
+    }
+    options.baseUrl = options.baseUrl || this.config.baseUrl;
+    options.dataType = options.dataType || this.config.dataType;
+    options.url = options.baseUrl + options.url;
+    options.data = options.data || {};
+    options.method = options.method || this.config.method;
+    //TODO 加密数据
+    options.header = options.header || this.config.header;
+    //TODO 数据签名
+    let _token = {
+      Authorization: uni.getStorageSync("token") || "undefined",
+    };
+    options.header = Object.assign({}, options.header, _token);
+    /*
+
+    _sign = {'sign': sign(JSON.stringify(options.data))}
+    options.header = Object.assign({}, options.header, _token,_sign)
+    */
+
+    return new Promise((resolve, reject) => {
+      let _config = null;
+
+      options.complete = (response) => {
+        let statusCode = response.statusCode;
+        response.config = _config;
+        if (process.env.NODE_ENV === "development") {
+          if (statusCode === 200) {
+            // console.log("【" + _config.requestId + "】 结果：" + JSON.stringify(response.data))
+          }
+        }
+        if (this.interceptor.response) {
+          let newResponse = this.interceptor.response(response);
+          if (newResponse) {
+            response = newResponse;
+          }
+        }
+        if (response.data.status === 401) {
+          let curPage = getCurrentPages();
+          let route = curPage[curPage.length - 1].route; //获取当前页面的路由
+          if (route !== "pages/login/login") {
+            uni.navigateTo({
+              url: "/pages/login/login",
+            });
+          }
+        }
+        // 统一的响应日志记录
+        _reslog(response);
+        if (statusCode === 200) {
+          //成功
+          resolve(response.data);
+        } else {
+          reject(response);
+        }
+      };
+
+      _config = Object.assign({}, this.config, options);
+      _config.requestId = new Date().getTime();
+
+      if (this.interceptor.request) {
+        this.interceptor.request(_config);
+      }
+
+      // 统一的请求日志记录
+      _reqlog(_config);
+
+      uni.request(_config);
+    });
+  },
+  get(url, data, options) {
+    if (!options) {
+      options = {};
+    }
+    options.url = url;
+    options.data = data;
+    options.method = "GET";
+    return this.request(options);
+  },
+  post(url, data, options, header) {
+    if (!options) {
+      options = {};
+    }
+    options.url = url;
+    options.data = data;
+    options.header = header;
+    options.method = "POST";
+    return this.request(options);
+  },
+  put(url, data, options) {
+    if (!options) {
+      options = {};
+    }
+    options.url = url;
+    options.data = data;
+    options.method = "PUT";
+    return this.request(options);
+  },
+  delete(url, data, options) {
+    if (!options) {
+      options = {};
+    }
+    options.url = url;
+    options.data = data;
+    options.method = "DELETE";
+    return this.request(options);
+  },
+};
+
+/**
+ * 请求接口日志记录
+ */
+function _reqlog(req) {
+  if (process.env.NODE_ENV === "development") {
+    // console.log("【" + req.requestId + "】 地址：" + req.url)
+    if (req.data) {
+      // console.log("【" + req.requestId + "】 请求参数：" + JSON.stringify(req.data))
+    }
+  }
+  //TODO 调接口异步写入日志数据库
+}
+
+/**
+ * 响应接口日志记录
+ */
+function _reslog(res) {
+  let _statusCode = res.statusCode;
+  if (process.env.NODE_ENV === "development") {
+    // console.log("【" + res.config.requestId + "】 地址：" + res.config.url)
+    if (res.config.data) {
+      // console.log("【" + res.config.requestId + "】 请求参数：" + JSON.stringify(res.config.data))
+    }
+    // console.log("【" + res.config.requestId + "】 响应结果：" + JSON.stringify(res))
+  }
+  //TODO 除了接口服务错误外，其他日志调接口异步写入日志数据库
+  switch (_statusCode) {
+    case 200:
+      break;
+    case 401:
+      break;
+    case 404:
+      break;
+    default:
+      break;
+  }
+}

http/login.js

@@ -0,0 +1,5 @@
+import http from "./interface";
+
+// 登录
+
+export default {};

main.js

@@ -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

pages.json

@@ -2,7 +2,47 @@
 	"easycom": {
 		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
 	},
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+	"pages": [ 
+		{
+			"path": "pages/login/login",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"app-plus": {
+					"titleNView": false // 禁用原生导航
+				}
+			}
+		},
+		{
+			"path": "pages/register/register",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"app-plus": {
+					"titleNView": false // 禁用原生导航
+				}
+			}
+		},
+		{
+			"path": "pages/realName/realName",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"app-plus": {
+					"titleNView": false // 禁用原生导航
+				}
+			}
+		},
+		{
+			"path": "pages/cameraContext/cameraContext",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"app-plus": {
+					"titleNView": false // 禁用原生导航
+				}
+			}
+		},
 		{
 			"path": "pages/home/index",
 			"style": {
@@ -24,16 +64,7 @@
 				"enablePullDownRefresh": false
 			}
 		},
-		{
-			"path": "pages/login/login",
-			"style": {
-				"navigationBarTitleText": "",
-				"enablePullDownRefresh": false,
-				"app-plus": {
-					"titleNView": false // 禁用原生导航
-				}
-			}
-		},
+		
 
 		{
 			"path": "pages/mine/index",

pages/cameraContext/cameraContext.vue

@@ -0,0 +1,10 @@
+<template>
+  <view>23</view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+</style>

pages/login/login.vue

@@ -31,25 +31,68 @@ export default {
         });
         if (res.status == 0) {
           uni.setStorageSync("token", res.data.token);
-          //   uni.redirectTo({
-          //     url: "../home/index"
-          //   });
+          uni.redirectTo({
+            url: "/pages/register/register"
+          });
         }
       } else {
         this.$common.msgToast("请不要拒绝哟~重新点击登录");
       }
+    },
+    async login() {
+      // 获取code
+      uni.login({
+        provider: "weixin",
+        success: async res => {
+          this.code = res.code;
+          let res1 = await this.$api.user.loginToken({ wxLoginCode: res.code });
+          if (res1.status == 0) {
+            if (res1.data.code == 2) {
+              this.isShow = true;
+              this.openId = res1.data.openid;
+            } else {
+              uni.setStorageSync("token", res1.data.token);
+              uni.redirectTo({
+                url: "/pages/register/register"
+              });
+            }
+          } else {
+            this.$common.msgToast(res1.msg);
+          }
+        }
+      });
+    }
+  },
+  onLoad() {
+    this.isLogoutShow = true;
+    if (!this.isLogoutShow) {
+      // 获取code
+      uni.login({
+        provider: "weixin",
+        success: async res => {
+          this.code = res.code;
+          let res1 = await this.$api.user.loginToken({ wxLoginCode: res.code });
+          if (res1.status == 0) {
+            if (res1.data.code == 2) {
+              this.isShow = true;
+              this.openId = res1.data.openid;
+            } else {
+              uni.setStorageSync("token", res1.data.token);
+              uni.redirectTo({
+                url: "/pages/register/register"
+              });
+            }
+          } else {
+            this.$common.msgToast(res1.msg);
+          }
+        }
+      });
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-page {
-  background: url("@/static/image/login-bg.png") no-repeat;
-  background-size: 100% 100%;
-  background-attachment: fixed;
-  height: 100vh;
-}
 .main {
   height: 100%;
   display: flex;
@@ -60,12 +103,15 @@ page {
     width: 237rpx;
     height: 390rpx;
   }
+  uni-button:after {
+    border: 0px;
+  }
   .btn {
     background: transparent;
     width: 200rpx;
     position: fixed;
     bottom: 15%;
-    color: red;
+    color: #fff;
     left: 50%;
     transform: translateX(-50%);
     font-size: 30rpx;

pages/realName/realName.vue

@@ -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> 

pages/register/register.vue

@@ -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>