Skip to content

html / danzhai-sign

Go to a project
Commit ba9710e2 by hank
Options

bug

parent 835da4a1
Showing with 80 additions and 73 deletions
src/views/Home.vue
...@@ -3,47 +3,82 @@ ...@@ -3,47 +3,82 @@
<img alt="Vue logo" src="../assets/logo.png" class="logo"> <img alt="Vue logo" src="../assets/logo.png" class="logo">
<div class="form-box"> <div class="form-box">
<div class="item"> <div class="item">
<img src="../assets/icon1.png" alt=""> <img src="../assets/icon1.png" alt>
<myInput v-if="isUse == 1" msg="请输入您的真实姓名" ref="input1" class="input" reg=/^[^0-9]+$/g :isUse="isUse" :value="name" palc="您的姓名*"/> <myInput v-if="isUse == 1" msg="请输入您的真实姓名" ref="input1" class="input" reg=/^[^0-9]+$/g :isUse="isUse" :value="name" palc="您的姓名*"/>
<input v-if="isUse == 0" type="text" class="input" v-model="name" readonly> <input
v-if="isUse == 0"
type="text"
class="input"
v-model="name"
readonly
>
</div> </div>
<div class="item"> <div class="item">
<img src="../assets/icon2.png" alt=""> <img src="../assets/icon2.png" alt>
<myInput v-if="isUse == 1" msg="手机号格式有误" ref="input2" class="input" reg=/^1[3456789]\d{9}$/ :isUse="isUse" :value="phoneNumber" palc="您的电话号码*" @blur.native="blur"/> <myInput v-if="isUse == 1" msg="手机号格式有误" ref="input2" class="input" reg=/^1[3456789]\d{9}$/ :isUse="isUse" :value="phoneNumber" palc="您的电话号码*" @blur.native="blur"/>
<input v-if="isUse == 0" type="text" class="input" v-model="phoneNumber" readonly> <input
v-if="isUse == 0"
type="text"
class="input"
v-model="phoneNumber"
readonly
>
</div> </div>
<div class="item"> <div class="item">
<img src="../assets/icon3.png" alt=""> <img src="../assets/icon3.png" alt>
<!-- <input type="text" v-model="address1" class="input" placeholder="您所在的城市*" readonly @click="showPopup"> --> <!-- <input type="text" v-model="address1" class="input" placeholder="您所在的城市*" readonly @click="showPopup"> -->
<p @click="showPopup" class="input m0" :class="{'color' : address1 == '您所在的城市*'}">{{address1}}</p> <p
@click="showPopup"
class="input m0"
:class="{'color' : address1 == '您所在的城市*'}"
>{{address1}}</p>
</div> </div>
<div class="item"> <div class="item">
<img src="" alt=""> <img src alt>
<myInput v-if="isUse == 1" msg="" ref="input4" class="input" reg="" :isUse="isUse" :value="addressDetail" palc="您的详细地址" @blur.native="blur"/> <myInput
v-if="isUse == 1"
msg
ref="input4"
class="input"
reg
:isUse="isUse"
:value="addressDetail"
palc="您的详细地址"
@blur.native="blur"
/>
<input v-if="isUse == 0" type="text" class="input" v-model="addressDetail" readonly> <input v-if="isUse == 0" type="text" class="input" v-model="addressDetail" readonly>
</div> </div>
<div class="item"> <div class="item">
<img src="../assets/icon4.png" alt=""> <img src="../assets/icon4.png" alt>
<myInput v-if="isUse == 1" msg="" ref="input3" class="input" reg="" :isUse="isUse" :value="danwei" palc="您的摄协单位(选填)" @blur.native="blur"/> <myInput
v-if="isUse == 1"
msg
ref="input3"
class="input"
reg
:isUse="isUse"
:value="danwei"
palc="您的摄协单位(选填)"
@blur.native="blur"
/>
<input v-if="isUse == 0 && danwei" type="text" class="input" v-model="danwei" readonly> <input v-if="isUse == 0 && danwei" type="text" class="input" v-model="danwei" readonly>
</div> </div>
<div class="item" v-if="number && number != -1"> <div class="item" v-if="number && number != -1">
<img src="../assets/icon5.png" alt=""> <img src="../assets/icon5.png" alt>
<!-- <span>摄影证号</span> --> <!-- <span>摄影证号</span> -->
<input type="text" class="input" :value="'摄影证号: ' + number" readonly> <input type="text" class="input" :value="'摄影证号: ' + number" readonly>
</div> </div>
</div> </div>
<div class="btn-box"> <div class="btn-box">
<button :class="btnClass" @click="save">{{isUse == 1 ? '签到' : ((isPhoto== 1) ? '我的摄影证' : '已签到')}}</button> <button
<!-- <button class="log" @click="toricheng">摄影月赛</button> --> :class="btnClass"
@click="save"
>{{isUse == 1 ? '签到' : ((isPhoto== 1) ? '我的摄影证' : '已签到')}}</button>
<button class="log" @click="toricheng">摄影月赛</button>
<!-- <router-link to="http://mr-static.maxrocky.com/h5/wanda/dzgp" tag="button" class="log">查看日程</router-link> --> <!-- <router-link to="http://mr-static.maxrocky.com/h5/wanda/dzgp" tag="button" class="log">查看日程</router-link> -->
</div> </div>
<img src="../assets/bottom.png" alt="" class="bottom"> <img src="../assets/bottom.png" alt class="bottom">
<mt-popup <mt-popup class="select" v-model="popupVisible" position="bottom">
class="select"
v-model="popupVisible"
position="bottom"
>
<div class="noy"> <div class="noy">
<p class="no" @click="handleNot">取消</p> <p class="no" @click="handleNot">取消</p>
<p class="yes" @click="handleYes">确定</p> <p class="yes" @click="handleYes">确定</p>
...@@ -144,43 +179,14 @@ export default { ...@@ -144,43 +179,14 @@ export default {
this.slots[2].values = Object.keys(obj2) this.slots[2].values = Object.keys(obj2)
this.slots[4].values = Object.keys(obj3) this.slots[4].values = Object.keys(obj3)
//初始化数据 //初始化数据
this.getInfo()
//分享
let url = location.href.split('#')[0]
this.$http.post('new/contest/wechat/info', {
url: url,
type: 1
}, res => {
console.log(res)
if(!res.data) {
return
}
wx.config({
debug: false, // 开启调试模式,
appId: res.data.data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
signature: res.data.data.signature,// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
})
wx.ready(() => {
wx.onMenuShareAppMessage({ // 分享给朋友 ,在config里面填写需要使用的JS接口列表，然后这个方法才可以用
title: '云上丹寨摄影创作季在线签到', // 分享标题
desc: '为丹寨摄影月赛疯狂打CALL', // 分享描述
link: 'http://wanda-qj.maxrocky.com/sign/index#/', // 分享链接
imgUrl: 'http://wanda-qj.maxrocky.com/sign/share.jpg', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function() {
// 用户确认分享后执行的回调函数
}, },
cancel: function() { cancel: function() {
// 用户取消分享后执行的回调函数 // 用户取消分享后执行的回调函数
} }
}); });
wx.onMenuShareTimeline({ //分享朋友圈 wx.onMenuShareTimeline({ //分享朋友圈
title: '云上丹寨摄影创作季在线签到', // 分享标题 title: '云上丹寨摄影证在线申请', // 分享标题
link: 'http://wanda-qj.maxrocky.com/sign/index#/', link: 'http://wanda-qj.maxrocky.com/sign/index#/',
imgUrl: 'http://wanda-qj.maxrocky.com/sign/share.jpg', // 分享图标 imgUrl: 'http://wanda-qj.maxrocky.com/sign/share.jpg', // 分享图标
success: function() { success: function() {
...@@ -204,7 +210,7 @@ export default { ...@@ -204,7 +210,7 @@ export default {
this.address1 = res.data.data.area this.address1 = res.data.data.area
this.addressDetail = res.data.data.address this.addressDetail = res.data.data.address
this.danwei = res.data.data.company this.danwei = res.data.data.company
// this.isPhoto = res.data.data.is_passport this.isPhoto = res.data.data.is_passport
this.number = res.data.data.number this.number = res.data.data.number
// alert(res.data.data.company) // alert(res.data.data.company)
// alert(res.data.data.is_passport) // alert(res.data.data.is_passport)
...@@ -263,7 +269,7 @@ export default { ...@@ -263,7 +269,7 @@ export default {
if(res.data.code == 0){ if(res.data.code == 0){
Toast('签到成功') Toast('签到成功')
_this.isUse = 0; _this.isUse = 0;
// _this.isPhoto = 1; _this.isPhoto = 1;
this.getInfo() this.getInfo()
}else{ }else{
Toast(res.msg) Toast(res.msg)
...@@ -346,7 +352,8 @@ export default { ...@@ -346,7 +352,8 @@ export default {
} }
</script> </script>
<style> <style>
html, body{ html,
body {
/* height: 100%; */ /* height: 100%; */
width: 100%; width: 100%;
/* overflow: hidden; */ /* overflow: hidden; */
...@@ -364,63 +371,63 @@ input::-webkit-input-placeholder, ...@@ -364,63 +371,63 @@ input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { textarea::-webkit-input-placeholder {
color: #757575; color: #757575;
} }
.picker{ .picker {
width: 100vw; width: 100vw;
} }
.home{ .home {
width: 100vw; width: 100vw;
min-height: 100vh; min-height: 100vh;
background: linear-gradient(#c0dae4, #ffffff); background: linear-gradient(#c0dae4, #ffffff);
background-image: url(../assets/bg.png); background-image: url(../assets/bg.png);
background-size: cover; background-size: cover;
.logo{ .logo {
width: 44vw; width: 44vw;
top: 10vw; top: 10vw;
position: relative; position: relative;
left: 50%; left: 50%;
margin-left: -22vw; margin-left: -22vw;
} }
.form-box{ .form-box {
position: relative; position: relative;
top: 25vw; top: 25vw;
box-sizing: border-box; box-sizing: border-box;
padding: 0 8vw; padding: 0 8vw;
.item{ .item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 3vw; margin-bottom: 3vw;
img{ img {
width: 4.3vw; width: 4.3vw;
height: auto height: auto;
} }
.input{ .input {
width: 74vw; width: 74vw;
border: none; border: none;
background: none; background: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.2);
padding: 4vw 0; padding: 4vw 0;
outline: none; outline: none;
&.m0{ &.m0 {
margin: 0; margin: 0;
} }
&.color{ &.color {
color: #757575; color: #757575;
} }
&:focus{ &:focus {
border-bottom: 1px solid rgb(18, 129, 170); border-bottom: 1px solid rgb(18, 129, 170);
} }
} }
} }
} }
.btn-box{ .btn-box {
box-sizing: border-box; box-sizing: border-box;
padding: 10vw 8vw 0; padding: 10vw 8vw 0;
display: flex; display: flex;
justify-content: center; // justify-content: center;
top: 30vw; top: 30vw;
position: relative; position: relative;
button{ button {
width: 36vw; width: 36vw;
height: 10.7vw; height: 10.7vw;
line-height: 10.7vw; line-height: 10.7vw;
...@@ -430,24 +437,24 @@ textarea::-webkit-input-placeholder { ...@@ -430,24 +437,24 @@ textarea::-webkit-input-placeholder {
background: none; background: none;
color: #1281aa; color: #1281aa;
border-radius: 1vw; border-radius: 1vw;
&.normal{ &.normal {
color: #fff; color: #fff;
background: #1281aa; background: #1281aa;
} }
&.active{ &.active {
color: #fff; color: #fff;
background: rgba($color: #1281aa, $alpha: .2); background: rgba($color: #1281aa, $alpha: 0.2);
border: none; border: none;
} }
} }
} }
.bottom{ .bottom {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
z-index: -1; z-index: -1;
} }
.noy{ .noy {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
......
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