浏览代码

完善邀请页面

15954078560 3 年之前
父节点
当前提交
6102d8e666

+ 9 - 1
application/index/controller/Index.php

@@ -3,6 +3,7 @@
 namespace app\index\controller;
 
 use app\common\controller\Frontend;
+use think\Db;
 
 class Index extends Frontend
 {
@@ -28,7 +29,14 @@ class Index extends Frontend
     //邀请页面
     public function invite() {
         $code = input('code', '', 'trim');
-
+        if (!$code) {
+            $this->error('邀请码不存在');
+        }
+
+        $count = Db::name('user')->where(['invite_no' => $code])->count();
+        if (!$count) {
+            $this->error('邀请码不存在');
+        }
 
         $this->view->assign('code', $code);
 

+ 110 - 15
application/index/view/index/invite.html

@@ -1,23 +1,118 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="__CDN__/assets/invite/reset.css">
+    <!-- <link rel="stylesheet" href="__CDN__/assets/invite/sweetalert/sweetalert.css"> -->
+    <script src="__CDN__/assets/invite/sweetalert/sweetalert.js"></script>
+    <script src="__CDN__/assets/invite/clipboard/clipboard.min.js"></script>
 
-    <head>
+    <title>下载app</title>
+    <script>
+        !(function(win, doc) {
+            function setFontSize() {
+                var docEl = doc.documentElement;
+                var winWidth = docEl.clientWidth;
+                doc.documentElement.style.fontSize = (winWidth / 375) * 100 + "px";
+            }
+            var userAgent = navigator.userAgent;
+            win.addEventListener("resize", function() {
+                if (navigator.userAgent !== userAgent) {
+                    location.reload();
+                }
+            });
+            setFontSize();
+        })(window, document);
+    </script>
+    <style>
+        .page{
+            width: 100%;
+            height: 100vh;
+            background: url(__CDN__/assets/invite/bg.png) no-repeat center/cover;
+            background-size: 100% 100%;
+            position: relative;
 
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta name="description" content="">
-        <meta name="author" content="">
+        }
+        .page  .invite-wrap{
+            position: absolute;
+            z-index: 2;
+            left:50%;
+            transform: translateX(-50%);
+            top:34%;
+            background-color: #FFEDAD;
+            border-radius: 0.10rem;
+            padding: 0.15rem;
+            width: 2rem;
+        }
+        .page  .invite-wrap .title{
+            color:#333;
+            font-size: 0.15rem;
+            line-height: 0.20rem;
+            text-align: center;
+            font-weight: 700;
+        }
+        .page  .invite-wrap .val{
+            margin-top: 0.10rem;
+            color:#333;
+            font-size: 0.15rem;
+            text-align: center;
+            line-height: 0.20rem;
+        }
+        .btn-c{
+            margin: 0.20rem auto 0;
+            border-radius: 0.20rem;
+            width: 0.60rem;
+            height: 0.20rem;
+            line-height: 0.20rem;
+            text-align: center;
+            color:#fff;
+            font-size: 0.12rem;
+            background: #ED617F;
+        }
+        .p-btn{
+            width: 2.5rem;
+            height: 0.30rem;
+            line-height: 0.30rem;
+            text-align: center;
+            color:#ED617F;
+            font-size: 0.14rem;
+            font-weight: 700;
+            border-radius: 0.10rem;
+            margin: 0.30rem auto;
+            position: absolute;
+            z-index: 2;
+            left: 50%;
+            transform: translateX(-50%);
+            top: 60%;
+            background-color: #FFEDAD;
+        }
 
-        <title>{$site.name}</title>
 
-    </head>
 
-    <body id="page-top">
-            {$info}
-        <script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
-
-        <script src="__CDN__/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
-    </body>
+    </style>
+</head>
 
+<body>
+<div class="page">
+    <div class="invite-wrap">
+        <h1 class="title">邀请码</h1>
+        <p class="val">{$code}</p>
+        <div class="btn-c copy" data-clipboard-text="{$code}">复制</div>
+    </div>
+    <a class="p-btn" href="{$site.apkUrl}">去下载</a>
+</div>
+</body>
 </html>
+<script>
+    var clipboard = new ClipboardJS('.copy');
+    clipboard.on('success', function(e) {
+        // console.log(e.text);
+        swal({icon: "success",text:'复制成功',closeOnClickOutside: true,buttons: false,timer: 3000});
+    });
+
+    clipboard.on('error', function(e) {
+        swal({icon: "error",text:'复制失败',closeOnClickOutside: true,buttons: false,timer: 3000})
+    });
+</script>

二进制
public/assets/invite/bg.png


文件差异内容过多而无法显示
+ 6 - 0
public/assets/invite/clipboard/clipboard.min.js


+ 200 - 0
public/assets/invite/reset.css

@@ -0,0 +1,200 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+	box-sizing: border-box;
+	font-family: Source Han Sans CN;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+input{
+	outline: none;
+	-webkit-appearance: button;
+	-webkit-appearance: none;
+	border-radius: 0;
+	border:none;
+	padding:0;
+	margin:0;
+	box-sizing: border-box;
+}
+textarea{
+	box-sizing: border-box;
+	resize: none;
+	outline: none;
+	padding:0;
+	margin:0;
+}
+a{
+    text-decoration: none;
+	color: inherit;
+}
+
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+.clamp {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	display: block;
+}
+.clamp2 {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+}
+.clamp3 {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 3;
+	overflow: hidden;
+}
+.clamp4 {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 3;
+	overflow: hidden;
+}
+/* 布局 */
+ .flex-col {
+	display: flex;
+	flex-direction: column;
+  }
+  .flex-row {
+	display: flex;
+	flex-direction: row;
+  }
+  .justify-start {
+	display: flex;
+	justify-content: flex-start;
+  }
+  .justify-center {
+	display: flex;
+	justify-content: center;
+  }
+  
+  .justify-end {
+	display: flex;
+	justify-content: flex-end;
+  }
+  .justify-evenly {
+	display: flex;
+	justify-content: space-evenly;
+  }
+  .justify-around {
+	display: flex;
+	justify-content: space-around;
+  }
+  .justify-between {
+	display: flex;
+	justify-content: space-between;
+  }
+  .align-start {
+	display: flex;
+	align-items: flex-start;
+  }
+  .align-center {
+	display: flex;
+	align-items: center;
+  }
+  .align-end {
+	display: flex;
+	align-items: flex-end;
+  }
+  .fill{
+	  flex:1;
+  }
+.fill{
+	flex: 1;
+}
+ ::-webkit-scrollbar{ width: 0; height: 0; color: transparent; }
+
+
+ ::-webkit-input-placeholder { /* WebKit, Blink, Edge */    color:    #CCCCCC; font-size:1.2rem;}
+
+ :-moz-placeholder { /* Mozilla Firefox 4 to 18 */   color:    #CCCCCC;font-size: 1.2rem; }
+
+ ::-moz-placeholder { /* Mozilla Firefox 19+ */   color:    #CCCCCC;font-size: 1.2rem; }
+
+ :-ms-input-placeholder { /* Internet Explorer 10-11 */   color:    #CCCCCC;font-size: 1.2rem; }
+
+.animate__delay-1s {
+	-webkit-animation-delay: calc(1s * 1);
+	animation-delay: calc(1s * 1);
+	/* -webkit-animation-delay: calc(var(--animate-delay) * 20);
+	animation-delay: calc(var(--animate-delay) * 20); */
+}
+.animation_slideInDown{
+	animation-duration: 1s;
+	animation-fill-mode: both;
+	animation-name: slideInDown;
+}
+@keyframes slideInDown {
+	from {
+		-webkit-transform: translate3d(-50%, -100%, 0);
+		transform: translate3d(-50%, -100%, 0);
+		visibility: visible;
+	}
+
+	to {
+		-webkit-transform: translate3d(-50%, 0, 0);
+		transform: translate3d(-50%, 0, 0);
+	}
+}
+.animation_slideOutUp{
+	animation-duration: 1s;
+	animation-fill-mode: both;
+	animation-name: slideOutUp;
+}
+@keyframes slideOutUp {
+	from {
+		-webkit-transform: translate3d(-50%, 0, 0);
+		transform: translate3d(-50%, 0, 0);
+	}
+	to {
+		visibility: hidden;
+		-webkit-transform: translate3d(-50%, -100%, 0);
+		transform: translate3d(-50%, -100%, 0);
+	}
+}

+ 115 - 0
public/assets/invite/sweetalert/sweetalert.css

@@ -0,0 +1,115 @@
+@import './css/icons';
+@import './css/text';
+@import './css/buttons';
+@import './css/content';
+@import './css/button-loader';
+
+:root {
+  --swal-modal-width: 478px;
+}
+
+.swal-overlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+  font-size: 0; /* Remove gap between inline-block elements */
+  overflow-y: auto;
+
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 10000;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s;
+  &::before {
+    content: ' ';
+    display: inline-block;
+    vertical-align: middle; /* vertical alignment of the inline element */
+    height: 100%;
+  }
+
+  &--show-modal {
+    opacity: 1;
+    pointer-events: auto;
+
+    & .swal-modal {
+      opacity: 1;
+      pointer-events: auto;
+      box-sizing: border-box;
+      animation: showSweetAlert 0.3s;
+      will-change: transform;
+    }
+  }
+}
+
+.swal-modal {
+  width: var(--swal-modal-width);
+  opacity: 0;
+  pointer-events: none;
+  background-color: white;
+  text-align: center;
+  border-radius: 5px;
+
+  position: static;
+  margin: 20px auto;
+  display: inline-block;
+  vertical-align: middle;
+
+  transform: scale(1);
+  transform-origin: 50% 50%;
+  z-index: 10001;
+  transition: transform 0.3s, opacity 0.2s;
+
+  @media all and (max-width: 500px) {
+    width: calc(100% - 20px);
+  }
+}
+
+@keyframes showSweetAlert {
+  0% {
+    transform: scale(1);
+  }
+  1% {
+    transform: scale(0.5);
+  }
+
+  45% {
+    transform: scale(1.05);
+  }
+
+  80% {
+    transform: scale(0.95);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+/*
+Target IE8-IE10 due to incompability with the css `pointer-event` property.
+@see https://github.com/t4t5/sweetalert/issues/863
+*/
+@media screen\0 {
+  .swal-overlay {
+    visibility: hidden;
+  }
+
+  .swal-overlay--show-modal {
+    visibility: visible;
+  }
+
+  .swal-button__loader {
+    visibility: hidden;
+  }
+
+  .swal-overlay--show-modal .swal-modal {
+    visibility: visible;
+  }
+
+  .swal-modal {
+    visibility: hidden;
+  }
+}

文件差异内容过多而无法显示
+ 0 - 0
public/assets/invite/sweetalert/sweetalert.js


部分文件因为文件数量过多而无法显示