Skip to content

visualcloud / Vmatrix-template

Go to a project
Commit 77ccb3df by hank
Options

模板编辑

parent e42adbbd
Showing with 275 additions and 1091 deletions
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<!--申明当前页面的编码集-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--网页关键词-->
<meta name="keywords" content="" />
<!--网页描述-->
<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" /> -->
<!--禁止自动识别电话号码-->
<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>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<div id="app"></div>
</body>
<script>
</head>
<body>
<div id="app"></div>
<!-- <von-app></von-app> -->
<!-- built files will be auto injected -->
</body>
</script>
<script>
</html>
// http://visual-clouds.bdideal.com/html/156050648981560a2f35feda34d66afe6765526670da2.html
// http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg
// window.myApp = new Vue({
// el: "#myApp",
// })
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>
\ No newline at end of file
src/App.vue
<template>
<div id="app">
<!-- <img src="./assets/logo.png"> -->
<transition :name="transitionName" class="child-view">
<router-view class="child-view"/>
</transition>
<page />
</div>
</template>
<script>
import page from "./components/page/index.vue";
console.log(page);
var self = null;
window.getQuery = function(key) {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
var strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
}
}
if (key) {
return theRequest[key] === "undefined" || theRequest[key] == "0"
? ""
: theRequest[key];
} else {
return theRequest;
}
};
export default {
name: 'App',
name: "App",
data() {
return {
transitionName: 'slide-left',
};
},
watch: {
$route: old => {
let isBack = self.$router.isBack;
if (isBack) {
self.transitionName = 'slide-right';
} else {
self.transitionName = 'slide-left';
}
// 做完回退动画后，要设置成前进动画，否则下次打开页面动画将还是回退
self.$router.isBack = false;
},
},
created() {
self = this;
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;
// });
return {};
},
components: {
page: page
}
};
</script>
......@@ -59,54 +46,11 @@ html {
font-size: 14px !important;
}
#app {
/* font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px; */
min-height: 100vh;
background: #f0f0f5;
/* min-height: 100vh; */
}
.child-view {
position: absolute;
width: 100%;
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>
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 {
background: white !important;
box-shadow: 2px 3px 3px rgba(240, 240, 242, 1);
.mint-header-title {
font-size: 18px;
height: 100%;
line-height: 41px;
// overflow: auto !important;
}
}
.mint-msgbox-title {
font-weight: normal;
}
.mint-cell-wrapper {
padding: 0 !important;
margin: 0 15px !important;
width: auto !important;
}
@font-face {
font-family: Pingfang;
src: url('http://visual-clouds.bdideal.com/html/156170435921582b04ee33fce4589808130a0b0d0e8e1.ttf'), url('http://visual-clouds.bdideal.com/html/156170435921582b04ee33fce4589808130a0b0d0e8e1.ttf');
}
.delay100 {
animation-delay: 100ms;
}
.delay200 {
animation-delay: 200ms;
}
.delay300 {
animation-delay: 300ms;
}
.delay400 {
animation-delay: 400ms;
}
.delay500 {
animation-delay: 500ms;
}
.delay600 {
animation-delay: 600ms;
}
.delay700 {
animation-delay: 700ms;
}
.app-container {
background: #f0f0f5;
}
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
font-family: Pingfang, Arial, Helvetica, sans-serif;
}
.mint-header {
background: white;
color: black;
}
.mint-cell:last-child {
background: none !important;
}
.padding-both {
background: white;
padding: 0 1rem;
}
@keyframes border {
0% {
opacity: 1;
}
.content {
display: flex; // justify-content: space-between; // width:53.57rem;
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);
}
}
25% {
opacity: 0.75;
}
.content img {
width: 50px;
height: 50px;
background: rgba(239, 239, 239, 1);
border-radius: 8px;
}
50% {
opacity: 0.5;
}
.content-center {
padding-left: 15px;
.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;
100% {
opacity: 0.25;
}
}
padding-bottom: 7px;
}
}
.content-right {
float: right;
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;
}
}
.isEdit {
position: relative;
.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;/*文本不进行换行*/
img {
border: none;
outline: none;
}
}
}
.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;
}
.isEdit::after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: "";
box-sizing: border-box;
z-index: 2;
border: 1px dashed yellowgreen;
background-color: transparent;
border: 1px dashed white;
.right {
float: right; // flex: 1;
// text-align: right;
margin-left: auto;
&::before {
content: "";
clear: both;
}
}
}
.evaluation-item {
padding-top: 15px;
.title {
font-size: 14px;
line-height: 20px;
display: flex;
img {
display: inline-block;
border-radius: 50px;
width: 40px;
height: 40px;
.isEdited::after {
border: 1px dashed yellowgreen;
animation: border 2s ease-in-out infinite;
}
.container {
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;
}
.item-name {
margin-left: 1rem;
line-height: 20px;
.name {
/* 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;
}
}
}
.padding {
padding: 0 1rem;
}
.name>span {
font-size: 36.25px;
}
.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;
}
.name span {
display: inline-block;
min-width: 30px;
}
.hidden-border .hairline-top {
display: none !important;
}
.color {
color: #01B888 !important;
}
.color2 {
color: #BBBBBB !important;
}
.color3 {
color: #666666 !important;
}
.bottom {
display: flex;
justify-content: space-between;
/* padding-top: 20px; */
}
.bottom img {
height: 280px;
width: 280px;
}
.xuanze {
color: #BBBBBB;
font-size: 12px;
}
.bottom-left {}
.mint-cell-value {
color: #BBBBBB !important;
font-size: 15px;
}
.mint-cell-title {
.bottom-right {
padding-top: 20px;
}
color: #333333;
}
.mint-cell img {
vertical-align:middle;
margin-right: -6px;
}
.bottom-right .bottom-right-item {
height: 30px;
line-height: 30px;
margin-bottom: 10px;
}
.mint-datetime-cancel {
box-sizing: border-box;
text-align: left !important;
padding-left: 15px;
color: #BBBBBB !important;
}
.mint-datetime-action {
line-height: inherit !important;
}
.mint-datetime-confirm {
box-sizing: border-box;
text-align: right !important;
padding-right: 15px;
color: #01B888 !important;
}
.picker-toolbar {
height: 50px !important;
line-height: 50px;
}
.bottom-right .item-name {
display: inline-block;
height: 30px;
line-height: 30px;
overflow: hidden;
padding: 0 5px;
width: 60px;
}
.progress {
position: fixed;
top: 37px;
left: 0;
z-index: 30;
}
.bottom-right .item-des {
display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 5px;
width: 220px;
overflow: hidden;
letter-spacing: 1px;
/* overflow: hidden; */
}
.mint-cell {
min-height: 55px;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.mint-cell:last-child .mint-cell-wrapper {
background-image: none !important;
}
.h2-right {
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 {
outline: none;
text-align: right;
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 {
.h2-right img {
height: 42px;
width: 42px;
}
}
\ No newline at end of file
.right-icon {
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>
<div class="login-container">
<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>
<div>login</div>
</template>
<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 {
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>
.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>
src/main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import router from './router'
// import Vonic from 'vonic'
import App from './App'
import store from './store'
import mintUi from 'mint-ui'
import '@/assets/app.scss'
import './assets/index.css'
import 'mint-ui/lib/style.css'
Vue.use(mintUi)
Vue.config.productionTip = false
/* eslint-disable no-new */
window.router = router
new Vue({
el: '#app',
router,
// router,
store,
components: {
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