281 lines
5.0 KiB
Vue
281 lines
5.0 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="user_box">
|
|
<u-form :model="form" ref="uForm" label-position="top">
|
|
<u-form-item label="姓名">
|
|
<u-input v-model="form.name" height="60rpx" placeholder="可商议" />
|
|
</u-form-item>
|
|
<u-form-item label="出生日期">
|
|
<u-input v-model="form.data" height="60rpx" placeholder="请填写 (必填)" />
|
|
</u-form-item>
|
|
<u-form-item label="地址">
|
|
<u-input v-model="form.address" height="60rpx" placeholder="请填写 (选填)" />
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
<!-- 实名认证 -->
|
|
<view class="user_upload">
|
|
<view class="upload_name">实名认证</view>
|
|
|
|
<view class="upload_box">
|
|
<view class="upload" v-for="(item,index) in upload_list" :key="item.id">
|
|
<view class="box">
|
|
<view class="upload_image">
|
|
<image :src="item.image"></image>
|
|
</view>
|
|
<view class="upload_tit">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 缴纳保证金 -->
|
|
<view class="deposit">
|
|
<view class="deposit_left">
|
|
<view class="deposit_name">缴纳保证金</view>
|
|
<view class="deposit_tit">满足订单量及好评率即可申请退还保证金</view>
|
|
</view>
|
|
<view class="deposit_right">
|
|
￥200
|
|
</view>
|
|
</view>
|
|
<!-- checkbox -->
|
|
<view class="sure_submit">
|
|
<u-checkbox-group>
|
|
<u-checkbox v-model="checked" shape="circle">同意并接受《跑腿代购服务用户协议》</u-checkbox>
|
|
</u-checkbox-group>
|
|
</view>
|
|
<!-- 底部 tabbar -->
|
|
<view class="tabbar">
|
|
<view class="tabbar_price">
|
|
支付:<text>￥200</text>
|
|
</view>
|
|
<view class="tabbar_btn">
|
|
<view class="btn">注册并支付</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
form: {
|
|
name: '',
|
|
data: '',
|
|
address: ''
|
|
},
|
|
upload_list: [{
|
|
id: 1,
|
|
name: '请拍摄身份证正面',
|
|
image: '../../../static/login/add.png'
|
|
}, {
|
|
id: 1,
|
|
name: '请拍摄身份证反面',
|
|
image: '../../../static/login/add.png'
|
|
}, {
|
|
id: 1,
|
|
name: '请拍摄手持身份证正面',
|
|
image: '../../../static/login/add.png'
|
|
}]
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
body {
|
|
background: #F5F5F5;
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
}
|
|
|
|
.user_box {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
height: 360rpx;
|
|
background: #ffffff;
|
|
margin-top: 30rpx;
|
|
border-radius: 18rpx;
|
|
padding-top: 10rpx;
|
|
}
|
|
|
|
.u-form-item {
|
|
padding: 0rpx 0 !important;
|
|
font-weight: bold !important;
|
|
/* margin-left: 40rpx !important; */
|
|
line-height: 40rpx !important;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.u-input__input {
|
|
font-size: 25rpx !important;
|
|
font-weight: 400 !important;
|
|
}
|
|
|
|
/* 实名认证 */
|
|
.user_upload {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
/* height: 500rpx; */
|
|
background: #ffffff;
|
|
margin-top: 50rpx;
|
|
border-radius: 18rpx;
|
|
}
|
|
|
|
.upload_name {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
font-size: 27rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.upload_box {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.upload {
|
|
width: 100%;
|
|
height: 300rpx;
|
|
border: 1rpx dashed;
|
|
margin-bottom: 37rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.box {
|
|
width: 300rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.upload_image image {
|
|
width: 73rpx;
|
|
height: 60rpx;
|
|
}
|
|
|
|
.upload_tit {
|
|
font-size: 23rpx;
|
|
color: #353535;
|
|
}
|
|
|
|
/* 缴纳保证金 */
|
|
.deposit {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
height: 135rpx;
|
|
margin-top: 20rpx;
|
|
background: #FFFFFF;
|
|
display: flex;
|
|
border-radius: 18rpx;
|
|
}
|
|
|
|
.deposit_left {
|
|
flex: 2;
|
|
margin-left: 25rpx;
|
|
margin-top: 25rpx;
|
|
}
|
|
|
|
.deposit_name {
|
|
color: #FF9707;
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
|
|
.deposit_tit {
|
|
font-size: 22rpx;
|
|
color: #999999;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.deposit_right {
|
|
flex: 1;
|
|
color: #F1413D;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
margin-right: 25rpx;
|
|
}
|
|
|
|
.sure_submit {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
height: 100rpx;
|
|
display: flex;
|
|
justify-content: left;
|
|
align-items: center;
|
|
margin-bottom: 90rpx;
|
|
}
|
|
|
|
/* checkbox */
|
|
.u-checkbox__label {
|
|
font-size: 23rpx !important;
|
|
color: #888888 !important;
|
|
}
|
|
|
|
.u-checkbox__icon-wrap--circle {
|
|
width: 26rpx !important;
|
|
height: 26rpx !important;
|
|
}
|
|
|
|
/* 底部 tabbar */
|
|
.tabbar {
|
|
width: 100%;
|
|
height: 100rpx;
|
|
background: #ffffff;
|
|
position: fixed;
|
|
bottom: 0rpx;
|
|
left: 0rpx;
|
|
right: 0rpx;
|
|
display: flex;
|
|
}
|
|
|
|
.tabbar_price {
|
|
flex: 1;
|
|
margin-left: 50rpx;
|
|
display: flex;
|
|
justify-content: left;
|
|
align-items: center;
|
|
color: black;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
|
|
.tabbar_price text {
|
|
color: red;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.tabbar_btn {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.btn {
|
|
background: #ff6a04;
|
|
border-radius: 41rpx;
|
|
width: 220rpx;
|
|
height: 74rpx;
|
|
text-align: center;
|
|
line-height: 74rpx;
|
|
color: white;
|
|
font-size: 25rpx;
|
|
letter-spacing: 1rpx;
|
|
}
|
|
|
|
|
|
</style>
|