liumin
/
NewZkgj
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

登记表样式

dev
J_yt 2 years ago
parent
f70c4855fa
commit
7e82c43ee4
1 changed files with 282 additions and 244 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +282
    -244
      pages/mine/registerForm.vue

+ 282
- 244
pages/mine/registerForm.vue View File

@@ -1,4 +1,4 @@
<template>
<template>
<view class="cented-box"> <view class="cented-box">
<!-- 背景图 --> <!-- 背景图 -->
<image class="bg-img" src="@/static/images/screenCode/screen_bg.png" mode=""></image> <image class="bg-img" src="@/static/images/screenCode/screen_bg.png" mode=""></image>
@@ -10,9 +10,9 @@
</view> </view>
<view class="rside"> <view class="rside">
<image src="@/static/images/screenCode/screen_note.png" mode=""></image> <image src="@/static/images/screenCode/screen_note.png" mode=""></image>
</view>
</view>
</view>
</view>
<!-- 表单 --> <!-- 表单 -->
<view class="container"> <view class="container">
<view class="chented"> <view class="chented">
@@ -26,26 +26,33 @@
<view class="titleimg"></view> <view class="titleimg"></view>
</view> </view>
</view> </view>
<view class="chented"> <view class="chented">
<view class="title"> <view class="title">
<view class="titletext">客户性别</view> <view class="titletext">客户性别</view>
<view class="titletext2 displayclick" style="display: flex;align-items: center;padding-left: 10rpx;">
<!-- <view class="titletext2 displayclick"
style="display: flex;align-items: center;padding-left: 10rpx;">
<view class="sexRadio" @click="changeSex(1)" :class="{active:parames.sex == 1}">男士</view> <view class="sexRadio" @click="changeSex(1)" :class="{active:parames.sex == 1}">男士</view>
<view class="sexRadio" @click="changeSex(2)" :class="{active:parames.sex == 2}">女士</view> <view class="sexRadio" @click="changeSex(2)" :class="{active:parames.sex == 2}">女士</view>
</view>
</view> -->
<u-radio-group v-model="parames.sex">
<view style="display: flex;align-items: center;">
<u-radio :name="1" shape="circle">男士</u-radio>
<u-radio :name="2" shape="circle">女士</u-radio>
</view>
</u-radio-group>
</view> </view>
<view class="title"> <view class="title">
<view class="titletext">到访人数</view> <view class="titletext">到访人数</view>
<view class="titletext2" style="display: flex;align-items: center;justify-content: space-around;"> <view class="titletext2" style="display: flex;align-items: center;justify-content: space-around;">
<view class="num" v-for="i in 6" :key="i" :class="{active:parames.howMany == i+1}"
<view class="num" v-for="i in 4" :key="i" :class="{active:parames.howMany == i+1}"
@click="changeHowMany(i+1)"> @click="changeHowMany(i+1)">
{{i + 1}} {{i + 1}}
</view> </view>
</view> </view>
</view> </view>
<!-- <view class="title" @click="Buildingselection()">
<!-- <view class="title" @click="Buildingselection()">
<view class="titletext">到访途径</view> <view class="titletext">到访途径</view>
<view class="titletext2" <view class="titletext2"
style="font-size: 30rpx;font-weight: 400;color: #B2B2B2;line-height: 110rpx;padding-left: 10rpx;"> style="font-size: 30rpx;font-weight: 400;color: #B2B2B2;line-height: 110rpx;padding-left: 10rpx;">
@@ -57,181 +64,211 @@
</view> </view>
</view> --> </view> -->
</view> </view>
<button class="clive" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="verifyPass">提交</button>
<button class="clive" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
v-if="verifyPass">提交</button>
<view class="clive" @click="save" v-else>提交</view> <view class="clive" @click="save" v-else>提交</view>
<view class="dengji"> <view class="dengji">
<view class="d-lside"> <view class="d-lside">
入场登记 入场登记
</view> </view>
<view class="d-rside"> <view class="d-rside">
<view class="top"> <view class="top">
<text class="t-time">15:00:20</text>
<text class="date">2021/03/22</text>
<text class="t-time">{{$u.timeFormat(new Date(), 'hh:MM:ss')}}</text>
<text class="date">{{$u.timeFormat(new Date(), 'yyyy/mm/dd')}}</text>
</view> </view>
<view class="address">望京SOHO</view> <view class="address">望京SOHO</view>
</view> </view>
</view> </view>
<view class="bottoms"> <view class="bottoms">
<u-checkbox v-model="checked">我已阅读并同意</u-checkbox> <u-checkbox v-model="checked">我已阅读并同意</u-checkbox>
<text class="books" @click="toMess">《用户隐私协议》</text>
<text class="books" @click="openModel">《用户隐私协议》</text>
</view> </view>
</view> </view>
<u-modal v-model="modelShow" @confirm="readOk">
<view class="slot-content">
<rich-text :nodes="content"></rich-text>
</view>
</u-modal>
<view class="tips"> <view class="tips">
疫情防控 人人有责 疫情防控 人人有责
</view>
<u-select :mask-close-able="false" v-model="Showhiddenunits" mode="single-column" :list="list"
@cancel="cancel" @confirm="confirm"></u-select>
</view>
</template>

<script>
var app = getApp();
</view>
<u-select :mask-close-able="false" v-model="Showhiddenunits" mode="single-column" :list="list" @cancel="cancel"
@confirm="confirm"></u-select>
</view>
</template>
<script>
var util = require("../../utils/util.js");
var config = require("../../config");
var app = getApp();
var config = require("@/config"); var config = require("@/config");
let domain = require("@/utils/domain")
export default {
data() {
return {
Showhiddenunits: false,
list: [{
label: '自然到访',
value: '自然到访'
},
{
label: '渠道推荐',
value: '渠道推荐'
},
],
parames: {
name: '',
sex: 1,
sourceName: null,
howMany: 1,
projectId: '',
phone:'',
projectId:'',
projectName:'xxx'
},
daitiReceptionobj: {},
verifyPass:false,
qrCodeUrl:'',
checked: false, // 是否同意隐私协议
};
},
onLoad(options){
const sceneStr = decodeURIComponent(options.scene);
console.log(options)
this.parames.projectId = sceneStr
},
watch:{
parames:{
deep:true,
handler(newV){
if (newV.name.length == 0) {
this.verifyPass = false;
}else{
this.verifyPass = true;
}
}
}
},
let domain = require("@/utils/domain")
export default {
data() {
return {
Showhiddenunits: false,
list: [{
label: '自然到访',
value: '自然到访'
},
{
label: '渠道推荐',
value: '渠道推荐'
},
],
parames: {
name: '',
sex: 1,
sourceName: null,
howMany: 1,
projectId: '',
phone: '',
projectId: '',
projectName: 'xxx'
},
daitiReceptionobj: {},
verifyPass: false,
qrCodeUrl: '',
checked: false, // 是否同意隐私协议
content:"",
modelShow:false,
};
},
onLoad(options) {
const sceneStr = decodeURIComponent(options.scene);
console.log(options)
this.parames.projectId = sceneStr
this.initFetch()
},
watch: {
parames: {
deep: true,
handler(newV) {
if (newV.name.length == 0) {
this.verifyPass = false;
} else {
this.verifyPass = true;
}
}
}
},
methods: { methods: {
toMess() {
uni.navigateTo({
url: `/pages/mine/messageDetails`
initFetch(){
let appid = uni.getAccountInfoSync().miniProgram.appId;
uni.request({
url: config.service.privacyAgr,
method: "GET",
data:{
id:appid
},
header: {
'content-type': 'application/json',
'Access-Token': uni.getStorageSync('weapp_session_login_data').token
},
success: (res) => {
console.log(res)
}
}) })
},
save() {
if (this.parames.name.length == 0) {
uni.showToast({
icon: "none",
title: "姓名不能为空"
})
return;
}
},
getPhoneNumber(e){
this.qrCodeUrl = domain.baseUrl
if(e.detail.errMsg=="getPhoneNumber:ok"){
let data = {
code:e.detail.code,
appid:uni.getAccountInfoSync().miniProgram.appId,
}
uni.request({
url:this.qrCodeUrl + '/code/loginSessionKey',
method:"GET",
data,
success:(res)=> {
console.log(res.data.data)
let phoneNum = JSON.parse(res.data.data).phone_info.phoneNumber
this.parames.phone = phoneNum
if(this.parames.phone!=null && this.parames.phone!=""){
if(this.parames.name.length>8){
uni.showToast({
icon: "none",
title: "不能超过8个汉字"
})
}else{
uni.request({
url:this.qrCodeUrl + '/customer/codeAdd',
method:"POST",
data:this.parames,
header: {
'content-type': 'application/json',
'Access-Token': uni.getStorageSync('weapp_session_login_data').token
},
success: (addres) => {
if(addres.data.code == 10000){
uni.reLaunch({
url:'/pages/mine/registerResult'
})
}else{
uni.showToast({
icon: "none",
title: addres.data.message
})
}
}
})
}
}
}
})
}else{
return;
}
},
changeSex(sex) {
this.parames.sex = sex;
},
changeHowMany(num) {
this.parames.howMany = num;
},
Buildingselection() {
this.Showhiddenunits = true;
},
cancel() {
this.Showhiddenunits = false;
},
confirm(e) {
this.parames.sourceName = e[0].value;
this.Showhiddenunits = false;
},
}
};
</script>
},
openModel(){
this.modelShow = true;
},
readOk(){
this.checked = true;
},
save() {
if (this.parames.name.length == 0) {
uni.showToast({
icon: "none",
title: "姓名不能为空"
})
return;
}
},
getPhoneNumber(e) {
this.qrCodeUrl = domain.baseUrl
if (e.detail.errMsg == "getPhoneNumber:ok") {
let data = {
code: e.detail.code,
appid: uni.getAccountInfoSync().miniProgram.appId,
}
uni.request({
url: this.qrCodeUrl + '/code/loginSessionKey',
method: "GET",
data,
success: (res) => {
console.log(res.data.data)
let phoneNum = JSON.parse(res.data.data).phone_info.phoneNumber
this.parames.phone = phoneNum
if (this.parames.phone != null && this.parames.phone != "") {
if (this.parames.name.length > 8) {
uni.showToast({
icon: "none",
title: "不能超过8个汉字"
})
} else {
uni.request({
url: this.qrCodeUrl + '/customer/codeAdd',
method: "POST",
data: this.parames,
header: {
'content-type': 'application/json',
'Access-Token': uni.getStorageSync(
'weapp_session_login_data').token
},
success: (addres) => {
if (addres.data.code == 10000) {
uni.reLaunch({
url: '/pages/mine/registerResult'
})
} else {
uni.showToast({
icon: "none",
title: addres.data.message
})
}
}
})
}
}
}
})
} else {
return;
}
},
changeSex(sex) {
this.parames.sex = sex;
},
changeHowMany(num) {
this.parames.howMany = num;
},
Buildingselection() {
this.Showhiddenunits = true;
},
cancel() {
this.Showhiddenunits = false;
},
confirm(e) {
this.parames.sourceName = e[0].value;
this.Showhiddenunits = false;
},
}
};
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
.cented-box { .cented-box {
position: relative; position: relative;
padding: 0 0 50rpx 0; padding: 0 0 50rpx 0;
@@ -239,51 +276,51 @@
min-height: calc(100vh - var(--window-top)); min-height: calc(100vh - var(--window-top));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.bg-img { .bg-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: -1; z-index: -1;
position: absolute; position: absolute;
} }
.header { .header {
margin: 0 0 40rpx 0; margin: 0 0 40rpx 0;
width: 100%; width: 100%;
display: flex; display: flex;
.lside { .lside {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.text { .text {
color: #fff; color: #fff;
font-size: 100rpx; font-size: 100rpx;
font-weight: 800; font-weight: 800;
} }
.top { .top {
font-size: 76rpx; font-size: 76rpx;
} }
} }
.rside { .rside {
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
image { image {
width: 306rpx; width: 306rpx;
height: 302rpx; height: 302rpx;
} }
} }
} }
.container { .container {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
@@ -291,30 +328,30 @@
height: 900rpx; height: 900rpx;
background: #fff; background: #fff;
border-radius: 16rpx; border-radius: 16rpx;
.chented { .chented {
padding: 0 30rpx; padding: 0 30rpx;
width: 100%; width: 100%;
.title { .title {
width: 100%; width: 100%;
height: 110rpx; height: 110rpx;
border-bottom: 1rpx solid #E0E0E0; border-bottom: 1rpx solid #E0E0E0;
display: flex; display: flex;
align-items: center; align-items: center;
.titletext { .titletext {
width: 21%; width: 21%;
font-size: 30rpx; font-size: 30rpx;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
} }
.titletext2 { .titletext2 {
width: 71%; width: 71%;
} }
.titletext-input { .titletext-input {
width: 100%; width: 100%;
height: 110rpx; height: 110rpx;
@@ -324,11 +361,11 @@
line-height: 110rpx; line-height: 110rpx;
padding-left: 10rpx; padding-left: 10rpx;
} }
.titleimg { .titleimg {
width: 8%; width: 8%;
text-align: right; text-align: right;
.titleimg1 { .titleimg1 {
width: 16rpx; width: 16rpx;
height: 36rpx; height: 36rpx;
@@ -336,7 +373,7 @@
} }
} }
} }
.clive { .clive {
margin: 100rpx auto 0; margin: 100rpx auto 0;
width: 610rpx; width: 610rpx;
@@ -348,13 +385,13 @@
border-radius: 8rpx; border-radius: 8rpx;
font-size: 32rpx; font-size: 32rpx;
} }
.dengji { .dengji {
margin: 60rpx 0 0 0; margin: 60rpx 0 0 0;
padding: 0 30rpx; padding: 0 30rpx;
width: 100%; width: 100%;
display: flex; display: flex;
.d-lside { .d-lside {
padding: 0 20rpx; padding: 0 20rpx;
height: 88rpx; height: 88rpx;
@@ -364,19 +401,19 @@
font-size: 36rpx; font-size: 36rpx;
font-weight: 500; font-weight: 500;
} }
.d-rside { .d-rside {
padding: 0 20rpx; padding: 0 20rpx;
height: 88rpx; height: 88rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.top { .top {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
font-size: 24rpx; font-size: 24rpx;
color: #333330; color: #333330;
.t-time { .t-time {
margin-right: 20rpx; margin-right: 20rpx;
font-size: 36rpx; font-size: 36rpx;
@@ -384,18 +421,18 @@
color: #333331; color: #333331;
} }
} }
} }
} }
.bottoms { .bottoms {
position: absolute; position: absolute;
bottom: 30rpx; bottom: 30rpx;
padding: 0 30rpx; padding: 0 30rpx;
width: 100%; width: 100%;
.books { .books {
margin-left: -24rpx; margin-left: -24rpx;
color: #2671E2; color: #2671E2;
@@ -403,7 +440,7 @@
} }
} }
} }
.tips { .tips {
margin: 40rpx 0 0 0; margin: 40rpx 0 0 0;
width: 100%; width: 100%;
@@ -412,56 +449,57 @@
font-size: 30rpx; font-size: 30rpx;
} }
} }
.sexRadio {
color: #BFBFBF;
border: 1rpx solid #BFBFBF;
font-size: 24upx;
width: 120rpx;
height: 60rpx;
text-align: center;
display: flex;
align-items: center;
justify-content: center;

&:last-child {
margin-left: 20rpx;
}

&.active {
background: #2B6FFF;
color: #fff;
border-color: #2B6FFF;
}
}

.num {
width: 50rpx;
height: 50rpx;
background: rgba(43, 110, 253, 0.1);
color: #2B6EFD;
font-size: 30rpx;
display: flex;
align-items: center;
justify-content: center;

&.active {
background: #2B6EFD;
color: #FFFFFF;
}
}

.Pinspeak {
width: 100%;
height: 92rpx;
border-bottom: 1rpx solid #E0E0E0;
font-size: 32rpx;
font-weight: bold;
color: #333333;
text-indent: 30rpx;
line-height: 92rpx;
background: #FFFFFF;
margin-top: 20rpx;
padding-left: 10rpx;
}
.sexRadio {
color: #BFBFBF;
border: 1rpx solid #BFBFBF;
font-size: 24upx;
width: 120rpx;
height: 60rpx;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
&:last-child {
margin-left: 20rpx;
}
&.active {
background: #2B6FFF;
color: #fff;
border-color: #2B6FFF;
}
}
.num {
width: 74rpx;
height: 74rpx;
border-radius: 8rpx;
background: rgba(43, 110, 253, 0.1);
color: #2B6EFD;
font-size: 32rpx;
display: flex;
align-items: center;
justify-content: center;
&.active {
background: #2B6EFD;
color: #FFFFFF;
}
}
.Pinspeak {
width: 100%;
height: 92rpx;
border-bottom: 1rpx solid #E0E0E0;
font-size: 32rpx;
font-weight: bold;
color: #333333;
text-indent: 30rpx;
line-height: 92rpx;
background: #FFFFFF;
margin-top: 20rpx;
padding-left: 10rpx;
}
</style> </style>

Write Preview
Loading…
Cancel
Save