Skip to content

visualcloud / Vmatrix-template

Go to a project
Commit 77ccb3df by hank
Options

模板编辑

parent e42adbbd
Showing with 266 additions and 1082 deletions
index.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head>
<head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script>if (typeof module === 'object') { window.module = module; module = undefined; }</script>
<script>if (window.module) module = window.module;</script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.4.0/Tween.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>测试模板</title>
</head>
<!--申明当前页面的编码集--> <body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <div id="app"></div>
<!--网页关键词--> </body>
<meta name="keywords" content="" /> <script>
<!--网页描述-->
<meta name="description" content="" />
<!--适配当前屏幕-->
<!-- <meta name="viewport" content="width=device-width, initial-scale=10, maximum-scale=1.0, user-scalable=0" /> -->
<!-- <meta name="viewport" content="width=375, initial-scale=1, user-scalable=no, target-densitydpi=device-dpi" /> --> </script>
<!--禁止自动识别电话号码--> <script>
<meta name="format-detection" content="telephone=no" />
<!--禁止自动识别邮箱-->
<meta content="email=no" name="format-detection" />
<!--iphone中safari私有meta标签,
允许全屏模式浏览,隐藏浏览器导航栏-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--iphone中safari顶端的状态条的样式black(黑色)-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script>
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/375;
document.write('<meta name="viewport" content="width=375,initial-scale='+ phoneScale +',minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');
</script>
<title>如荐</title>
</head> // http://visual-clouds.bdideal.com/html/156050648981560a2f35feda34d66afe6765526670da2.html
<body> // http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg
<div id="app"></div> // window.myApp = new Vue({
<!-- <von-app></von-app> --> // el: "#myApp",
<!-- built files will be auto injected -->
</body> // })
var container = document.querySelector('#myApp')
window.addEventListener('message', function (e) {
if (e.source != window.parent) return;
console.log(e.data, '客户端发来的消息');
console.log(typeof e.data === "object" && e.data['type'] == 'setData')
if (typeof e.data === "object" && e.data['type'] == 'setData') {
console.log(myApp.list[e.data.index])
myApp.list[e.data.index].value = e.data['value'];
if (e.data['editObj']) {
myApp.list[e.data.index] = e.data['editObj']
}
}
if (typeof e.data === "object" && e.data['type'] == 'cancelEdit') {
myApp.currentIndex = ''
}
if (typeof e.data === "object" && e.data['type'] == 'edit') {
myApp.currentIndex = e.data.index
}
if (typeof e.data === "object" && e.data['type'] == 'setList') {
// myApp.list = JSON.parse(JSON.stringify(e.data.list))
myApp.list = e.data.list
}
if (typeof e.data === "object" && e.data['type'] == 'getList') {
myApp.getList()
}
// window.parent.postMessage(color, '*');
}, false)
</script>
</html> </html>
\ No newline at end of file
src/App.vue
<template> <template>
<div id="app"> <div id="app">
<!-- <img src="./assets/logo.png"> --> <page />
<transition :name="transitionName" class="child-view">
<router-view class="child-view"/>
</transition>
</div> </div>
</template> </template>
<script> <script>
import page from "./components/page/index.vue";
console.log(page);
var self = null; var self = null;
export default { window.getQuery = function(key) {
name: 'App', var url = location.search; //获取url中"?"符后的字串
data() { var theRequest = new Object();
return { if (url.indexOf("?") != -1) {
transitionName: 'slide-left', var str = url.substr(1);
}; var strs = str.split("&");
}, for (var i = 0; i < strs.length; i++) {
watch: { theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
$route: old => { }
let isBack = self.$router.isBack; }
if (isBack) { if (key) {
self.transitionName = 'slide-right'; return theRequest[key] === "undefined" || theRequest[key] == "0"
? ""
: theRequest[key];
} else { } else {
self.transitionName = 'slide-left'; return theRequest;
} }
// 做完回退动画后，要设置成前进动画，否则下次打开页面动画将还是回退 };
self.$router.isBack = false; export default {
}, name: "App",
data() {
return {};
}, },
created() { components: {
self = this; page: page
if (window.history && window.history.pushState) {
console.log(12313123)
history.pushState(null, null, document.URL);
window.addEventListener('popstate', (e)=> {
this.$router.isBack = true;
}, false);
} }
// var phoneWidth = parseInt(window.screen.width);
// var phoneScale = phoneWidth / 375;
// // document.querySelector('html').style.zoom = phoneScale;
// window.addEventListener('resize', function() {
// var phoneWidth = parseInt(window.screen.width);
// var phoneScale = phoneWidth / 375;
// // document.querySelector('html').style.zoom = phoneScale;
// });
},
}; };
</script> </script>
...@@ -59,54 +46,11 @@ html { ...@@ -59,54 +46,11 @@ html {
font-size: 14px !important; font-size: 14px !important;
} }
#app { #app {
/* font-family: 'Avenir', Helvetica, Arial, sans-serif; /* min-height: 100vh; */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px; */
min-height: 100vh;
background: #f0f0f5;
} }
.child-view { .child-view {
position: absolute; position: absolute;
width: 100%; width: 100%;
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
} }
.slide-left-enter,
.slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(250px, 0);
transform: translate(250px, 0);
}
.slide-left-leave-to {
opacity: 0;
-webkit-transform: translate(-50px, 0);
transform: translate(-50px, 0);
}
.slide-left-leave-active,
.slide-right-enter {
opacity: 0;
-webkit-transform: translate(-250px, 0);
transform: translate(-250px, 0);
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s !important;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
transition: opacity 0.1s !important;
opacity: 0 !important;
}
.slide-fade-enter-active {
transition: all 0.3s ease;
}
.slide-fade-leave-active {
transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(350px);
opacity: 0;
}
</style> </style>
src/assets/app.css deleted 100644 → 0
.app-container {
background: #f0f0f5;
}
.div::-webkit-scrollbar {
display: none;
}
.mint-header {
background: white;
color: black;
}
.padding-both {
background: white;
padding: 0 1rem;
}
.content {
display: flex;
justify-content: space-between;
background: #ffffff;
padding: 1.5rem 0 1.5rem 0;
}
.content img {
width: 3.57rem;
height: 3.57rem;
background: #efefef;
border-radius: 0.57rem ;
}
.content-center {
padding-left: 1rem;
}
.content-center .com-name {
width: 15rem;
height: 1rem;
font-size: 15px;
font-family: PingFang-SC-Medium;
columns: #333333;
line-height: 1rem;
padding-bottom: 1rem;
}
.content-center .addr {
color: #999999;
font-size: 0.75rem;
}
.content-center .addr .line {
padding: 0 1rem;
}
.content-right .evaluation {
text-align: right;
height: 2rem;
font-size: 0.81rem;
font-family: PingFang-SC-Medium;
color: #666666;
}
.content-right .evaluation-num {
text-align: right;
padding-right: 1rem;
color: #01B888;
}
.height20 {
height: 10px;
background: #f0f0f5;
}
.content2 {
background: #ffffff;
min-height: 22.06rem;
}
.content2 .item-content {
padding: 0 1rem;
}
.content2 .item-content video {
margin: 0 auto;
height: 12.34rem;
background: #333333;
}
.content2 .item-content .text {
font-size: 0.81rem;
font-family: PingFang-SC-Medium;
color: #999999;
line-height: 1.25rem;
overflow: hidden;
/*内容超出后隐藏*/
text-overflow: ellipsis;
/* 超出内容显示为省略号*/
}
.evaluation-title {
line-height: 2rem;
height: 2rem;
font-size: 0.94rem;
font-family: PingFang-SC-Medium;
color: #333333;
border-bottom: 1px solid #EEEEEE;
}
.right {
float: right;
margin-left: auto;
}
.right::before {
content: "";
clear: both;
}
.evaluation-item {
padding-top: 1rem;
}
.evaluation-item .title {
line-height: 1rem;
display: flex;
font-size: 14px;
}
.evaluation-item .title img {
display: inline-block;
border-radius: 50px;
width: 1.88rem;
height: 1.88rem;
}
.evaluation-item .title .item-name {
margin-left: 1rem;
line-height: 1rem;
}
src/assets/app.less deleted 100644 → 0
.app-container{
background: #f0f0f5;
}
.mint-header {
background: white;
color: black;
}
.padding-both{
background: white;
padding: 0 1rem;
}
.content {
display: flex;
justify-content: space-between;
// width:53.57rem;
background:rgba(255,255,255,1);
padding: 1.5rem 0 1.5rem 0;
}
.content img {
width:3.57rem;
height:3.57rem;
background:rgba(239,239,239,1);
border-radius: 0.57rem ;
}
.content-center {
padding-left: 1rem;
.com-name {
width: 15rem;
height:1rem;
font-size:15px;
font-family:PingFang-SC-Medium;
columns: #333333;
line-height:1rem;
padding-bottom: 1rem;
}
.addr {
color: #999999;
font-size: 0.75rem;
.line {
padding: 0 1rem;
}
}
}
.content-right {
.evaluation {
text-align: right;
height: 2rem;
font-size:0.81rem;
font-family:PingFang-SC-Medium;
color:rgba(102,102,102,1);
}
.evaluation-num {
text-align: right;
padding-right: 1rem;
color:#01B888;
}
}
.height20{
height: 1rem;
background:#EEEEEE;
}
.content2 {
background: #ffffff;
min-height: 22.06rem;
.item-content {
padding: 0 1rem;
video {
margin: 0 auto;
height: 12.34rem;
background:rgba(51,51,51,1);
}
.text {
// height:2.09rem;
font-size:0.81rem;
font-family:PingFang-SC-Medium;
color:rgba(153,153,153,1);
line-height:1.25rem;
overflow: hidden;/*内容超出后隐藏*/
text-overflow: ellipsis;/* 超出内容显示为省略号*/
// white-space: nowrap;/*文本不进行换行*/
}
}
}
.evaluation-title {
line-height: 2rem;
height: 2rem;
font-size:0.94rem;
font-family:PingFang-SC-Medium;
color:rgba(51,51,51,1);
border-bottom: 1px solid #EEEEEE;
}
.right{
float: right;
// flex: 1;
// text-align: right;
margin-left: auto;
&::before {
content: "";
clear: both;
}
}
.evaluation-item{
padding-top: 1rem;
.title {
line-height: 1rem;
display: flex;
img {
display: inline-block;
border-radius: 50px;
width:1.88rem;
height:1.88rem;
}
.item-name {
margin-left: 1rem;
line-height: 1rem;
}
}
}
\ No newline at end of file
src/assets/app.scss
.mint-header-title {
color: #333333 !important;
}
.mint-header { @font-face {
background: white !important; font-family: Pingfang;
box-shadow: 2px 3px 3px rgba(240, 240, 242, 1); src: url('http://visual-clouds.bdideal.com/html/156170435921582b04ee33fce4589808130a0b0d0e8e1.ttf'), url('http://visual-clouds.bdideal.com/html/156170435921582b04ee33fce4589808130a0b0d0e8e1.ttf');
.mint-header-title { }
font-size: 18px; .delay100 {
height: 100%; animation-delay: 100ms;
line-height: 41px; }
// overflow: auto !important; .delay200 {
} animation-delay: 200ms;
} }
.mint-msgbox-title { .delay300 {
font-weight: normal; animation-delay: 300ms;
} }
.mint-cell-wrapper { .delay400 {
padding: 0 !important; animation-delay: 400ms;
margin: 0 15px !important; }
width: auto !important; .delay500 {
} animation-delay: 500ms;
}
.delay600 {
animation-delay: 600ms;
}
.delay700 {
animation-delay: 700ms;
}
.app-container { html,
background: #f0f0f5; body {
} margin: 0;
padding: 0;
overflow: hidden;
font-family: Pingfang, Arial, Helvetica, sans-serif;
}
.mint-header { @keyframes border {
background: white; 0% {
color: black; opacity: 1;
} }
.mint-cell:last-child {
background: none !important;
}
.padding-both {
background: white;
padding: 0 1rem;
}
.content { 25% {
display: flex; // justify-content: space-between; // width:53.57rem; opacity: 0.75;
background: rgba(255, 255, 255, 1);
padding: 1.5rem 0 1rem 0;
position: relative;
.comment-content {
font-size:13px;
font-family:PingFang-SC-Medium;
color:rgba(153,153,153,1);
} }
}
.content img { 50% {
width: 50px; opacity: 0.5;
height: 50px; }
background: rgba(239, 239, 239, 1);
border-radius: 8px;
}
.content-center { 100% {
padding-left: 15px; opacity: 0.25;
.com-name { }
// width: 15rem; }
height: 15px;
font-size: 15px;
font-family: PingFang-SC-Medium;
columns: #333333;
line-height: 15px;
padding-bottom: 7px;
}
.addr {
color: #999999;
font-size: 13px;
.line {
padding: 0 4px;
}
padding-bottom: 7px;
}
}
.content-right { .isEdit {
float: right; position: relative;
position: absolute;
right: 0;
top: 5px;
align-content: flex-end;
img {
width: 28px;
height: 28px;
color: white;
background: white;
margin-top: 15px;
}
.evaluation {
text-align: right;
height: 2rem;
font-size: 0.81rem;
font-family: PingFang-SC-Medium;
color: rgba(102, 102, 102, 1);
}
.evaluation-num {
text-align: right;
padding-right: 1rem;
color: #01B888;
}
}
.height20 {
height: 10px;
background: #F0F0F5;
}
.liner {
display: inline-block;
width: 1px;
background: #999999;
height: 10px;
margin: 0 2px;
}
.content2 {
background: #ffffff;
min-height: 22.06rem;
.item-content {
padding: 0 1rem;
video {
margin: 0 auto;
height: 12.34rem;
background: rgba(51, 51, 51, 1);
}
.text {
// height:2.09rem;
font-size: 12px;
font-family: PingFang-SC-Medium;
color: rgba(153, 153, 153, 1);
line-height: 1.25rem;
overflow: hidden;
/*内容超出后隐藏*/
text-overflow: ellipsis;
/* 超出内容显示为省略号*/
// white-space: nowrap;/*文本不进行换行*/
}
} }
}
.evaluation-title { img {
line-height: 2rem; border: none;
height: 2rem; outline: none;
font-size: 0.94rem; }
font-family: PingFang-SC-Medium;
color: rgba(51, 51, 51, 1);
border-bottom: 1px solid #EEEEEE;
}
.right { .isEdit::after {
float: right; // flex: 1; position: absolute;
// text-align: right; top: 0;
margin-left: auto; left: 0;
&::before { right: 0;
bottom: 0;
content: ""; content: "";
clear: both; box-sizing: border-box;
z-index: 2;
border: 1px dashed yellowgreen;
background-color: transparent;
border: 1px dashed white;
} }
}
.evaluation-item { .isEdited::after {
padding-top: 15px; border: 1px dashed yellowgreen;
.title { animation: border 2s ease-in-out infinite;
font-size: 14px;
line-height: 20px;
display: flex;
img {
display: inline-block;
border-radius: 50px;
width: 40px;
height: 40px;
} }
.item-name {
margin-left: 1rem; .container {
line-height: 20px; padding: 0 45px;
background: linear-gradient(to right, #32295E, #5277AB);
height: 450px;
width: 800px;
margin: 0 auto;
color: white;
box-sizing: border-box;
overflow: hidden;
} }
.title {
height: 50px;
line-height: 50px;
padding: 0 0px;
border-bottom: #eeeeee 1px solid;
position: relative;
} }
}
.padding { .name {
padding: 0 1rem; /* padding: 0 20px; */
} border-bottom: #eeeeee 1px solid;
padding: 10px 0px;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
margin-bottom: 17px;
font-family: Arial, Helvetica, sans-serif;
.rj-textarea { }
display: block;
width: 100%;
height: 152px;
background: #F0F0F5;
border: none;
outline: none;
margin-top: 10px;
border-radius: 1px;
padding: 5px;
box-sizing: border-box;
}
.hidden-border .hairline-top { .name>span {
display: none !important; font-size: 36.25px;
} }
.color { .name span {
color: #01B888 !important; display: inline-block;
} min-width: 30px;
.color2 { }
color: #BBBBBB !important;
}
.color3 {
color: #666666 !important;
}
.xuanze { .bottom {
color: #BBBBBB; display: flex;
font-size: 12px; justify-content: space-between;
} /* padding-top: 20px; */
}
.mint-cell-value { .bottom img {
color: #BBBBBB !important; height: 280px;
font-size: 15px; width: 280px;
} }
.mint-cell-title {
color: #333333; .bottom-left {}
}
.mint-cell img {
vertical-align:middle;
margin-right: -6px;
}
.mint-datetime-cancel { .bottom-right {
box-sizing: border-box; padding-top: 20px;
text-align: left !important; }
padding-left: 15px;
color: #BBBBBB !important;
} .bottom-right .bottom-right-item {
.mint-datetime-action { height: 30px;
line-height: inherit !important; line-height: 30px;
} margin-bottom: 10px;
.mint-datetime-confirm { }
box-sizing: border-box;
text-align: right !important;
padding-right: 15px;
color: #01B888 !important; .bottom-right .item-name {
} display: inline-block;
.picker-toolbar { height: 30px;
height: 50px !important; line-height: 30px;
line-height: 50px; overflow: hidden;
} padding: 0 5px;
width: 60px;
}
.progress { .bottom-right .item-des {
position: fixed; display: inline-block;
top: 37px; height: 30px;
left: 0; line-height: 30px;
z-index: 30; padding: 0 5px;
} width: 220px;
overflow: hidden;
letter-spacing: 1px;
/* overflow: hidden; */
}
.mint-cell { body {
min-height: 55px; display: flex;
} align-items: center;
justify-content: center;
height: 100vh;
}
.mint-cell:last-child .mint-cell-wrapper { .h2-right {
background-image: none !important; display: flex;
} align-items: center;
font-size: 20px;
.mint-cell-wrapper { }
background-position: bottom left !important;
}
.mint-msgbox-message {
font-size: 11px!important;
line-height: 1.5 !important;
}
.hidden-input { .h2-right img {
outline: none; height: 42px;
text-align: right; width: 42px;
border: none; }
font-size: 15px;
color: #666666;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: #BBBBBB;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #BBBBBB;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #BBBBBB;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #BBBBBB;
}
.ye-tips {
height: 35px;
line-height: 35px;
color: #A27F26;
font-size: 13px;
background: rgba(254, 249, 219, 1);
}
*::-webkit-scrollbar {
display: none;
}
div::-webkit-scrollbar {
display: none;
}
html::-webkit-scrollbar {
display: none;
}
body::-webkit-scrollbar {
display: none;
}
.text-hidden {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
max-width: 220px;
}
.bold {
// font-weight: 500;
}
.jiancheng .mint-cell-wrapper {
background: none;
}
.bgf0-container {
position: absolute;
background: #f0f0f5;
}
.app-container {
} .right-icon {
\ No newline at end of file margin-left: 25px;
/* height: 32px; */
}
/* .delay */
@keyframes bgani {
0% {
background: linear-gradient(to right, #32295E, #5277AB);
}
25% {
background: linear-gradient(to right, #32295E , rgb(82,119,185));
}
50% {
background: linear-gradient(to right, #32295E, rgb(82,119,197));
}
75% {
background: linear-gradient(to right, #32295E, rgb(82,119,164));
}
100% {
background: linear-gradient(to right, #32295E, #5277AB);
}
}
.bgani {
animation-name: bgani;
animation-duration: 5s;
animation-iteration-count: infinite;
}
src/assets/index.css deleted 100644 → 0
html {
font-size: 16px;
}
@media only screen and (min-width: 401px) {
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px) {
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px) {
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px) {
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px) {
html {
font-size: 40px !important;
}
}
html,body {
min-height: 100%;
width: 100%;
background: white;
}
html::-webkit-scrollbar{
width:0px;
display: none;
opacity: 0;
}
body::-webkit-scrollbar{
width:0px;
display: none;
opacity: 0;
}
div::-webkit-scrollbar{
width:0px;
display: none;
opacity: 0;
}
body {
/* font-family: "Helvetica Neue", Helvetica, "STHeiTi", sans-serif; */
font-family: PingFang SC,Helvetica Neue,Helvetica,Arial,Hiragino Sans GB,Heiti SC,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
overflow-x: hidden;
overflow-y: auto;
font-size: 0.7rem;
}
.clear {
zoom: 1;
}
.clear:after {
content: '';
display: block;
clear: both;
}
.fl {
float: left;
}
.fr {
float: right;
}
.viewport {
max-width: 640px;
margin: 0 auto;
overflow-x: hidden;
}
.button-balanced {
background: #01B888 !important;
}
.mint-header-title {
color: #333333 !important;
}
.mint-header {
background: white;
}
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
\ No newline at end of file
src/components/login.vue
<template> <template>
<div class="login-container"> <div>login</div>
<div class="top">
<div class="text">加入如荐，工作就在身边!</div>
</div>
<div class="login-content">
<mt-field label="姓名" placeholder="请填写" :disableClear="true" v-model="name"></mt-field>
<mt-field
label="性别"
placeholder="请选择"
@click.native="showActionSheetSex"
readonly
:disabled="true"
:disableClear="true"
v-model="sex"
>
<img src="/static/img/right.png" width="24" height="24">
</mt-field>
<mt-field
label="年龄"
placeholder="请选择"
@click.native="showActionSheetAge"
readonly
:disabled="true"
:disableClear="true"
v-model="age"
>
<img src="/static/img/right.png" width="24" height="24">
</mt-field>
<mt-field
label="手机"
placeholder="请输入常用手机号"
:attr="{ maxlength: 11 }"
type="number"
v-model="phone"
></mt-field>
<mt-field
label="验证码"
:disableClear="true"
:attr="{ maxlength: 6}"
type="number"
v-model="number"
>
<div class>
<span @click="sendcode" v-if="is_disabled">获取验证码</span>
<span v-else>{{time}}s</span>
</div>
</mt-field>
</div>
<div class="btn-container">
<mt-button @click.native="next" type="danger" size="large" :disabled="is_disabled">进入如荐</mt-button>
</div>
<div class="tips">
进入如荐代表你已同意
<span @click="goAgree" path="/useagree" class="color">《如荐用户协议》</span>
</div>
<my-popup
@callbackvalue="enter"
@cancel="cancel"
v-bind:popupVisible="popupVisible"
:popupData="popupData"
></my-popup>
</div>
</template> </template>
<script> <script>
import myPopup from "@/views/myPopup.vue";
import ENUM from "src/config/enum";
import { isPhone } from "@/utils";
import { updateInfo, selectType } from "src/api/city";
import { sendCode, login } from "src/api/company";
import axios from "axios";
import downVue from "./down.vue";
export default { export default {
components: {
ENUM,
myPopup
},
data: () => {
return {
number: "",
phone: "",
name: "",
sex: "",
age: "",
is_disabled: true,
time: 60,
key: "",
popupData: [],
popupVisible: false
};
},
methods: {
sendcode() {
if (!isPhone(this.phone)) {
this.$toast({
message: "请填写正确的手机号",
position: "bottom",
duration: 2000
});
return;
}
sendCode(this.phone).then(res => {
if (res.data.status == 1) {
this.is_disabled = false;
this.time = 60;
this.time--;
window.timer = setInterval(() => {
this.time--;
if (this.time == 0) {
window.clearInterval(window.timer);
this.is_disabled = true;
this.number = "";
}
}, 1000);
}
});
},
showActionSheetSex(theme) {
this.popupData = [
{
flex: 1,
values: ["女", "男"],
defaultIndex: 1,
textAlign: "center"
}
];
this.popupVisible = true;
this.key = "sex";
},
showActionSheetAge() {
var values = [];
for (var i = 16; i <= 65; i++) {
values.push(i);
}
this.popupData = [
{
flex: 1,
values: values,
defaultIndex: 0,
value: "",
textAlign: "center"
}
];
this.popupVisible = true;
this.key = "age";
},
enter(value) {
console.log(value);
this[this.key] = value;
this.popupVisible = false;
},
cancel() {
this.popupVisible = false;
},
goAgree() {
this.$router.push({
path: "/useagree"
});
},
next() {
if (this.name == "" || this.name == "请填写") {
this.$toast({
message: "请填写姓名",
position: "middle",
duration: 2000
});
} else if (this.sex == "" || this.sex == "请选择") {
this.$toast({
message: "请选择性别",
position: "middle",
duration: 2000
});
} else if (this.age == "" || this.age == "请选择") {
this.$toast({
message: "请选择年龄",
position: "middle",
duration: 2000
});
} else if (!isPhone(this.phone)) {
this.$toast({
message: "请填写正确的手机号",
position: "middle",
duration: 2000
});
} else if (this.number == "") {
this.$toast({
message: "请填写验证码",
position: "middle",
duration: 2000
});
} else {
login(parseInt(this.phone), this.number, this.$route.query.qrid).then(
res => {
if (res.data.status == 1 && !res.data.data.type) {
this.$store.dispatch("setUserInfo", res.data.data);
updateInfo(
this.name,
this.sex,
this.age,
"",
"",
this.$store.getters.userInfo.ticket,
"",
"",
"/static/img/logo.png"
).then(res => {
selectType(1, this.$store.getters.userInfo.ticket)
.then(res => {
this.$router.push({
path: "/down"
});
})
.catch(() => {});
});
} else {
if (
res.data.data == "registered" ||
res.data.errorMessage.indexOf("手机号已注册") != -1 ||
res.data.data.type
) {
this.$toast({
message: "此手机号已注册，可通过APP直接登录 然后直接进入到 APP 下载页面",
position: "middle",
duration: 2000
});
this.$router.push({
path: "/down"
});
} else {
this.$toast({
message: "" + res.data.errorMessage,
position: "middle",
duration: 2000
});
}
}
}
);
}
}
}
};
</script>
<style lang="scss" scoped>
.login-container {
background: white;
height: 100vh;
padding-top: 60px;
box-sizing: border-box;
.top {
padding: 0 20px;
display: block;
align-items: center;
text-align: center;
height: 25px;
.text {
font-size: 19px;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: rgba(51, 51, 51, 1);
font-size: 19px;
color: #333333;
}
margin-bottom: 35px;
}
.login-content {
position: relative;
input {
text-align: right;
}
.mint-field-core {
text-align: right;
}
.code {
position: absolute;
right: 20px;
bottom: 15px;
color: #666666;
font-size: 13px;
}
}
.mint-cell-wrapper {
padding: 0 !important;
margin: 0 20px !important;
width: 100% !important;
}
.btn-container {
padding: 50px 20px 15px;
}
.tips {
padding-left: 20px;
color: #cccccc;
font-size: 12px;
}
} }
</style> </script>
<style> <style>
.login-container .mint-cell-wrapper {
padding: 0 !important;
margin: 0 20px !important;
width: 100% !important;
}
.login-container input:disabled {
background-color: #fff;
color: #333333;
opacity: 1;
/* -webkit-text-fill-color:#333333 ; */
-webkit-opacity: 1;
}
  .login-container .mint-field-core {
font-size: 15px;
}
.login-container .mint-button--danger {
background-color: #01b888;
}
.login-content input {
position: relative;
text-align: right;
}
.login-content .mint-cell:last-child .mint-cell-wrapper {
background-image: linear-gradient(
180deg,
#d9d9d9,
#d9d9d9 50%,
transparent 50%
) !important;
}
</style> </style>
src/main.js
// The Vue build version to load with the `import` command // The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' import Vue from 'vue'
import router from './router'
// import Vonic from 'vonic'
import App from './App' import App from './App'
import store from './store' import store from './store'
import mintUi from 'mint-ui' import mintUi from 'mint-ui'
import '@/assets/app.scss' import '@/assets/app.scss'
import './assets/index.css'
import 'mint-ui/lib/style.css' import 'mint-ui/lib/style.css'
Vue.use(mintUi) Vue.use(mintUi)
Vue.config.productionTip = false Vue.config.productionTip = false
/* eslint-disable no-new */ /* eslint-disable no-new */
window.router = router
new Vue({ new Vue({
el: '#app', el: '#app',
router, // router,
store, store,
components: { components: {
App App
......
template.html 0 → 100644
This diff is collapsed. Click to expand it.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment