12 changed files with 1172 additions and 12 deletions
-
62pages.json
-
74pages/my/authentication.vue
-
11pages/my/collect.vue
-
135pages/my/editInfo.vue
-
0pages/my/exclusiveMatch.vue
-
52pages/my/index.vue
-
197pages/my/memberDetails.vue
-
49pages/my/officialAccount.vue
-
131pages/my/service.vue
-
155pages/my/setting.vue
-
227pages/my/uploadInfo.vue
-
91pages/my/welfare.vue
@ -0,0 +1,74 @@ |
|||
<template> |
|||
<view class="lf-w-100 lf-h-100"> |
|||
<view class="authen-top"> |
|||
<view class="lf-color-white"><u-icon name="integral-fill lf-m-r-15 lf-font-38"></u-icon>尚未实名认证</view> |
|||
<view class="lf-font-28 lf-color-white">无法使用：发布动态，查看高级资料等进阶功能</view> |
|||
</view> |
|||
<view class="lf-row-between lf-p-l-32 lf-p-r-32 lf-m-b-30"> |
|||
<view class="authen-btn lf-font-32" @click="$url('/pages/my/memberDetails')">预览主页</view> |
|||
<view class="authen-btn lf-font-32 pink-btn" @click="$url('/pages/my/uploadInfo')">马上认证</view> |
|||
</view> |
|||
<view class="lf-color-777 lf-font-24 lf-row-center" style="margin-bottom: 60rpx;"> |
|||
已有医生、银行、教师、外贸、IT等单身完成认证 |
|||
</view> |
|||
<view class="lf-p-l-32 lf-p-r-32" style="margin-bottom: 50rpx;"> |
|||
<view class="lf-color-222 lf-font-32 lf-m-b-20 authen-title lf-p-l-20">为什么要实名认证</view> |
|||
<view class="lf-color-777 lf-font-28"> |
|||
为给大家创建一个真实安全的优质的脱单环境，确保会员真诚相亲，每个都是人工审核 |
|||
</view> |
|||
</view> |
|||
<view class="lf-p-l-32 lf-p-r-32"> |
|||
<view class="lf-color-222 lf-font-32 lf-m-b-20 authen-title lf-p-l-20">100%隐私安全</view> |
|||
<view class="lf-color-777 lf-font-28"> |
|||
认证信息仅用于官方审核，自动添加图片水印 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style> |
|||
.authen-top { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-evenly; |
|||
align-items: center; |
|||
width: 686rpx; |
|||
height: 185rpx; |
|||
background: #E21196; |
|||
border-radius: 10rpx; |
|||
margin: 30rpx auto; |
|||
} |
|||
.authen-btn { |
|||
width: 333rpx; |
|||
height: 100rpx; |
|||
border-radius: 10rpx; |
|||
border: 1rpx solid #555555; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
color: #555555; |
|||
} |
|||
|
|||
.pink-btn { |
|||
color: #E21196!important; |
|||
border: 1px solid #E21196!important; |
|||
} |
|||
|
|||
.authen-title { |
|||
position: relative; |
|||
} |
|||
|
|||
.authen-title::after { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 8rpx; |
|||
width: 8rpx; |
|||
height: 30rpx; |
|||
background: #E21196; |
|||
border-radius: 4rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,11 @@ |
|||
<template> |
|||
<view> |
|||
<lf-userList></lf-userList> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,135 @@ |
|||
<template> |
|||
<view class="lf-w-100 lf-h-100"> |
|||
<view class="edit-head"> |
|||
<view> |
|||
<image src="../../static/logo.png" mode="aspectFill" style="width: 150rpx;height: 150rpx;border-radius: 10rpx;"></image> |
|||
</view> |
|||
<view class="lf-font-32 lf-color-222"> |
|||
点击上传形象照 |
|||
</view> |
|||
<view class="lf-font-28 lf-color-777 lf-p-l-32 lf-p-r-32"> |
|||
确保个人形象照片为本人清晰正脸照，一张良好的形象照更能吸引到别人哦 |
|||
</view> |
|||
</view> |
|||
<view class="edit-tag"> |
|||
<view class="lf-row-between lf-w-100 lf-m-b-30"> |
|||
<view class="lf-color-222 lf-font-32 authen-title lf-p-l-20">为什么要实名认证</view> |
|||
<view class="lf-font-28 lf-color-777">去编辑<u-icon name="arrow-right lf-m-l-15 lf-font-22"></u-icon></view> |
|||
</view> |
|||
<view class="lf-color-777 lf-font-28"> |
|||
为给大家创建一个真实安全的优质的脱单环境，确保会员真诚相亲，每个都是人工审核 |
|||
</view> |
|||
</view> |
|||
<view class="edit-tag edit-tag1"> |
|||
<view class="lf-row-between lf-w-100 lf-m-b-30"> |
|||
<view class="lf-color-222 lf-font-32 authen-title lf-p-l-20">基本资料</view> |
|||
<view class="lf-font-28 lf-color-777">去完善<u-icon name="arrow-right lf-m-l-15 lf-font-22"></u-icon></view> |
|||
</view> |
|||
<view class="lf-color-777 lf-font-28 tag-content"> |
|||
<view class="personal-tag">其他省市</view> |
|||
<view class="personal-tag">未婚</view> |
|||
<view class="personal-tag">180cm</view> |
|||
<view class="personal-tag">70kg</view> |
|||
</view> |
|||
</view> |
|||
<view class="edit-tag edit-tag1"> |
|||
<view class="lf-row-between lf-w-100 lf-m-b-30"> |
|||
<view class="lf-color-222 lf-font-32 authen-title lf-p-l-20">工作经济家庭</view> |
|||
<view class="lf-font-28 lf-color-777">去完善<u-icon name="arrow-right lf-m-l-15 lf-font-22"></u-icon></view> |
|||
</view> |
|||
<view class="lf-color-777 lf-font-28 tag-content"> |
|||
<view class="personal-tag">已购车无贷款</view> |
|||
<view class="personal-tag">本科</view> |
|||
<view class="personal-tag">6万-8万</view> |
|||
</view> |
|||
</view> |
|||
<view class="edit-tag edit-tag1"> |
|||
<view class="lf-row-between lf-w-100 lf-m-b-30"> |
|||
<view class="lf-color-222 lf-font-32 authen-title lf-p-l-20">择偶要求</view> |
|||
<view class="lf-font-28 lf-color-777">去完善<u-icon name="arrow-right lf-m-l-15 lf-font-22"></u-icon></view> |
|||
</view> |
|||
<view class="lf-color-777 lf-font-28 tag-content"> |
|||
<view class="personal-tag">未婚</view> |
|||
<view class="personal-tag">180cm</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
background-color: #F5F5F5; |
|||
} |
|||
.tag-content { |
|||
width: 686rpx; |
|||
flex-wrap: wrap; |
|||
display: flex; |
|||
} |
|||
|
|||
.edit-tag1 { |
|||
height: 100%!important; |
|||
} |
|||
|
|||
.personal-tag { |
|||
width: max-content; |
|||
padding: 8rpx 25rpx; |
|||
height: 55rpx; |
|||
border-radius: 28rpx; |
|||
border: 1rpx solid #E21196; |
|||
color: #E21196; |
|||
font-size: 28rpx; |
|||
margin-right: 15rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
&:nth-child(4n) { |
|||
margin-right: 0; |
|||
} |
|||
&:nth-child(n + 5) { |
|||
margin-top: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.edit-head { |
|||
background-color: white; |
|||
height: 400rpx; |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
} |
|||
.edit-tag { |
|||
width: 686rpx; |
|||
height: 215rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 10rpx; |
|||
margin: 30rpx auto; |
|||
display: flex; |
|||
flex-direction: column; |
|||
/* justify-content: space-around; */ |
|||
padding: 30rpx; |
|||
} |
|||
|
|||
.edit-tag1 { |
|||
height: 190rpx!important; |
|||
} |
|||
|
|||
.authen-title { |
|||
position: relative; |
|||
} |
|||
|
|||
.authen-title::after { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 8rpx; |
|||
width: 8rpx; |
|||
height: 30rpx; |
|||
background: #E21196; |
|||
border-radius: 4rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,197 @@ |
|||
<template> |
|||
<view class="lf-w-100 lf-h-100"> |
|||
<view class="content lf-bg-white lf-m-b-30" style="padding: 0rpx"> |
|||
<view class="list lf-p-l-32 lf-p-r-32"> |
|||
<lf-image class="avatar" src="@/static/logo.png"></lf-image> |
|||
<view class="info"> |
|||
<view class="lf-flex-1"> |
|||
<text>编号：83927</text> |
|||
<u-icon name="tags" class="lf-m-l-10"></u-icon> |
|||
</view> |
|||
<view class="lf-flex-1 lf-m-t-16">24岁·牛·180cm·本科·未婚</view> |
|||
<view class="lf-flex-1 lf-m-t-16">自有公司·金融/证券/保险·50万以上</view> |
|||
</view> |
|||
<view class="star"> |
|||
<u-icon name="star-fill lf-font-40" style="color: #D1D1D1;"></u-icon> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="info-content"> |
|||
<view class="lf-color-222 lf-font-32 authen-title lf-p-l-20">信息资料</view> |
|||
<view class="lf-row-between lf-m-t-30" v-for="(item,index) of list" :key="index"> |
|||
<view class="lf-color-333 lf-font-28">{{item.title}}</view> |
|||
<view class="lf-color-333 lf-font-28">{{item.content}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-p-l-32 lf-p-r-32 info-tag"> |
|||
<view class="lf-color-222 lf-font-32 lf-m-b-30 authen-title lf-p-l-20">家庭与房车</view> |
|||
<view class="lf-color-333 lf-font-28"> |
|||
了解Ta的购车、住房情况和家庭成员资料 |
|||
</view> |
|||
<view class="lf-font-24 lf-m-t-20" style="color: #E21196;"> |
|||
实名认证后可查看>> |
|||
</view> |
|||
</view> |
|||
<view class="lf-p-l-32 lf-p-r-32 info-tag" style="margin-bottom: 130rpx;"> |
|||
<view class="lf-color-222 lf-font-32 lf-m-b-30 authen-title lf-p-l-20">择偶要求</view> |
|||
<view class="lf-color-333 lf-font-28"> |
|||
了解Ta的婚史、身高、年龄等各项择偶要求 |
|||
</view> |
|||
<view class="lf-font-24 lf-m-t-20" style="color: #E21196;"> |
|||
实名认证后可查看>> |
|||
</view> |
|||
</view> |
|||
<view class="tabbar-bottom"> |
|||
<view class="lf-row-between"> |
|||
<view class="lf-flex-column" style="align-items: center;"> |
|||
<view> |
|||
<u-icon name="kefu-ermai lf-font-32 lf-color-555"></u-icon> |
|||
</view> |
|||
<view class="lf-color-555 lf-font-24"> |
|||
客服 |
|||
</view> |
|||
</view> |
|||
<view class="lf-flex-column" style="align-items: center;margin-left: 50rpx;"> |
|||
<view> |
|||
<u-icon name="share lf-font-32 lf-color-555"></u-icon> |
|||
</view> |
|||
<view class="lf-color-555 lf-font-24"> |
|||
分享 |
|||
</view> |
|||
</view> |
|||
<view class="lf-flex-column" style="align-items: center;margin-left: 50rpx;"> |
|||
<view> |
|||
<u-icon name="more-dot-fill lf-font-32 lf-color-555"></u-icon> |
|||
</view> |
|||
<view class="lf-color-555 lf-font-24"> |
|||
更多 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view> |
|||
<button class="tabbar-btn">联系Ta</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
list: [ |
|||
{title: '编号',content: '839748'}, |
|||
{title: '性别',content: '男'}, |
|||
{title: '婚史',content: '未婚'}, |
|||
{title: '年龄',content: '24岁（1996-10）'}, |
|||
{title: '身高',content: '180'}, |
|||
{title: '体重',content: '70'}, |
|||
{title: '属相',content: '鼠'}, |
|||
{title: '星座',content: '天秤座'}, |
|||
{title: '户籍',content: '其他省市'}, |
|||
{title: '学历',content: '本科'}, |
|||
{title: '单位性质',content: '私企'}, |
|||
{title: '所属行业',content: '广告/设计/传媒'}, |
|||
{title: '年薪',content: '6万-8万'}, |
|||
{title: '居住地区',content: '其他省市'}, |
|||
] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
background-color: #F5F5F5; |
|||
} |
|||
.tabbar-bottom { |
|||
width: 100%; |
|||
background-color: white; |
|||
height: 110rpx; |
|||
position: fixed; |
|||
bottom: 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 15rpx 32rpx; |
|||
} |
|||
.tabbar-btn { |
|||
width: 362rpx; |
|||
height: 88rpx; |
|||
background: #E21196; |
|||
color: white; |
|||
border-radius: 45rpx; |
|||
} |
|||
.info-content { |
|||
width: 686rpx; |
|||
height: 100%; |
|||
background: #FFFFFF; |
|||
border-radius: 10rpx; |
|||
margin: 0 auto; |
|||
padding: 30rpx; |
|||
} |
|||
.authen-title { |
|||
position: relative; |
|||
font-size: 32rpx; |
|||
color: #131315; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.info-tag { |
|||
width: 686rpx; |
|||
height: 100%; |
|||
background: #FFFFFF; |
|||
border-radius: 10rpx; |
|||
margin: 30rpx auto; |
|||
padding: 30rpx; |
|||
} |
|||
|
|||
.authen-title::after { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 8rpx; |
|||
width: 8rpx; |
|||
height: 30rpx; |
|||
background: #E21196; |
|||
border-radius: 4rpx; |
|||
} |
|||
.content{ |
|||
width: 100%; |
|||
height: max-content; |
|||
box-sizing: border-box; |
|||
.list{ |
|||
padding: 30rpx 0; |
|||
display: flex; |
|||
width: 100%; |
|||
height: max-content; |
|||
display: flex; |
|||
align-items: center; |
|||
.avatar{ |
|||
width: 150rpx; |
|||
height: 150rpx; |
|||
border-radius: 10rpx; |
|||
margin-right: 15rpx; |
|||
background-color: #EEEEEE; |
|||
} |
|||
.info{ |
|||
flex: auto; |
|||
min-height: 150rpx; |
|||
max-width: 522rpx; |
|||
display: flex; |
|||
align-content: space-between; |
|||
flex-wrap: wrap; |
|||
flex-direction: column; |
|||
} |
|||
} |
|||
} |
|||
.star { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px 2rpx 10rpx 5rpx rgba(226, 17, 150, 0.05); |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,49 @@ |
|||
<template> |
|||
<view class="lf-w-100 lf-h-100"> |
|||
<view class="official-content"> |
|||
<view class="tips"> |
|||
· 你与Ta的距离可能只是相差一个公众号，每日推送优质男女会员。 |
|||
</view> |
|||
<view class="tips"> |
|||
· 往期推荐会员，发现更多小程序上没有的会员资料，想多了解Ta就来这里看看。 |
|||
</view> |
|||
<view class="tips"> |
|||
· 报名上头条，展现最美的自己，吸引更多的异性，脱单就是要自信，你本来就很优秀。 |
|||
</view> |
|||
<view class="lf-row-center"> |
|||
<button class="official-btn">点击关注</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style> |
|||
page { |
|||
background-color: #F5F5F5; |
|||
} |
|||
.official-content { |
|||
width: 686rpx; |
|||
height: 510rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 10rpx; |
|||
margin: 30rpx auto; |
|||
padding: 30rpx; |
|||
} |
|||
.tips { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
.official-btn { |
|||
width: 626rpx; |
|||
height: 90rpx; |
|||
background: #E21196; |
|||
border-radius: 10rpx; |
|||
color: white; |
|||
font-size: 32rpx; |
|||
margin-top: 30rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,131 @@ |
|||
<template> |
|||
<view class="lf-w-100 lf-h-100"> |
|||
<view class="pure_top"> |
|||
<view class="tips-top"> |
|||
<view class="lf-m-r-20"> |
|||
<image src="../../static/logo.png" style="width: 98rpx;height: 112rpx;" mode="aspectFill"></image> |
|||
</view> |
|||
<view> |
|||
<view class="lf-color-555 lf-font-26">添加专属客服，咨询使用问题，投诉不正当会员，专属人工客服将为您服务</view> |
|||
<view class="lf-color-555 lf-font-26 lf-m-t-20">线下红娘服务，私人订制服务，全方位助您脱单</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="qrcode-content"> |
|||
<view class="lf-row-between lf-p-l-30 lf-p-r-30 content-title"> |
|||
<view class="lf-flex"> |
|||
<u-icon name="weixin-fill lf-m-r-15 lf-font-38"></u-icon><text class="lf-font-28 lf-color-222">微信：gyw38283</text> |
|||
</view> |
|||
<view class="content-btn" @click="copy(gyw38283)"> |
|||
复制 |
|||
</view> |
|||
</view> |
|||
<view class="qr-code"> |
|||
<tki-qrcode ref="qrcode" @result="qrR" :val="checkArea" :size="270" unit="px" background="#fff" |
|||
foreground="#000" pdground="#000" :onval="true" :loadMake="true" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
|
|||
<script> |
|||
import tkiQrcode from "tki-qrcode" // 二维码生成器 |
|||
export default { |
|||
components: { |
|||
tkiQrcode |
|||
}, |
|||
data() { |
|||
return { |
|||
base64Img: '', |
|||
checkArea: 'USI782936437829' |
|||
} |
|||
}, |
|||
methods: { |
|||
//二维码回调 |
|||
qrR(data) { |
|||
this.base64Img = data; |
|||
}, |
|||
// 点击复制 |
|||
copy(text) { |
|||
uni.setClipboardData({ |
|||
data: text |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page { |
|||
background-color: #F5F5F5; |
|||
} |
|||
.pure_top { |
|||
width: 100%; |
|||
height: 210rpx; |
|||
position: relative; |
|||
z-index: -1; |
|||
} |
|||
|
|||
.pure_top::after { |
|||
content: ''; |
|||
width: 140%; |
|||
height: 210rpx; |
|||
position: absolute; |
|||
left: -20%; |
|||
top: 0; |
|||
z-index: -1; |
|||
border-radius: 0 0 55% 55%; |
|||
background: linear-gradient(180deg, #FE3EA5 0%, #FE7749 100%); |
|||
} |
|||
|
|||
.tips-top { |
|||
width: 686rpx; |
|||
height: 252rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
margin: 0 auto; |
|||
position: relative; |
|||
top: 60rpx; |
|||
padding: 50rpx 40rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.qrcode-content { |
|||
width: 686rpx; |
|||
height: 703rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
margin: 0 auto; |
|||
margin-top: 133rpx; |
|||
} |
|||
|
|||
.content-btn { |
|||
width: 122rpx; |
|||
height: 55rpx; |
|||
border-radius: 28rpx; |
|||
border: 1rpx solid #777777; |
|||
font-size: 24rpx; |
|||
color: #777; |
|||
font-weight: 400; |
|||
text-align: center; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
letter-spacing: 1rpx; |
|||
} |
|||
|
|||
.content-title { |
|||
height: 100rpx; |
|||
border-bottom: 1rpx solid #F5F5F5; |
|||
} |
|||
|
|||
.qr-code { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin: 30rpx 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,155 @@ |
|||
<template> |
|||
<view class="lf-w-100 lf-h-100"> |
|||
<view class="tag-list"> |
|||
<view class="switch-tag"> |
|||
<view class="lf-flex-column"> |
|||
<view class="lf-font-32 lf-color-222"> |
|||
实名联系我 |
|||
</view> |
|||
<view class="lf-font-26 lf-color-777 lf-m-t-10"> |
|||
已实名用户才能联系你 |
|||
</view> |
|||
</view> |
|||
<view> |
|||
<u-switch slot="right" v-model="switchVal"></u-switch> |
|||
</view> |
|||
</view> |
|||
<view class="switch-tag"> |
|||
<view class="lf-flex-column"> |
|||
<view class="lf-font-32 lf-color-222"> |
|||
资料显示 |
|||
</view> |
|||
<view class="lf-font-26 lf-color-777 lf-m-t-10"> |
|||
其他人可看你的资料，关闭资料请联系客服 |
|||
</view> |
|||
</view> |
|||
<view> |
|||
<u-switch slot="right" v-model="switchVal1"></u-switch> |
|||
</view> |
|||
</view> |
|||
<view class="switch-tag"> |
|||
<view class="lf-flex-column"> |
|||
<view class="lf-font-32 lf-color-222"> |
|||
动态同步 |
|||
</view> |
|||
<view class="lf-font-26 lf-color-777 lf-m-t-10"> |
|||
其他人可看你的资料，关闭资料请联系客服 |
|||
</view> |
|||
</view> |
|||
<view> |
|||
<u-switch slot="right" v-model="switchVal2"></u-switch> |
|||
</view> |
|||
</view> |
|||
<view class="switch-tag"> |
|||
<view class="lf-flex-column"> |
|||
<view class="lf-font-32 lf-color-222"> |
|||
联系通知 |
|||
</view> |
|||
<view class="lf-font-26 lf-color-777 lf-m-t-10"> |
|||
其他人可看你的资料，关闭资料请联系客服 |
|||
</view> |
|||
</view> |
|||
<view> |
|||
<u-switch slot="right" v-model="switchVal3"></u-switch> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="flr-setting"></view> |
|||
<view class="setting-list"> |
|||
<view class="setting-tag"> |
|||
<view class="lf-color-222 lf-font-32"> |
|||
服务协议与隐私条款 |
|||
</view> |
|||
<view> |
|||
<u-icon name="arrow-right lf-color-777"></u-icon> |
|||
</view> |
|||
</view> |
|||
<view class="setting-tag"> |
|||
<view class="lf-color-222 lf-font-32"> |
|||
关于我们 |
|||
</view> |
|||
<view> |
|||
<u-icon name="arrow-right lf-color-777"></u-icon> |
|||
</view> |
|||
</view> |
|||
<view class="setting-tag"> |
|||
<view class="lf-color-222 lf-font-32"> |
|||
退出登录 |
|||
</view> |
|||
<view> |
|||
<u-icon name="arrow-right lf-color-777"></u-icon> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
switchVal: false, |
|||
switchVal1: false, |
|||
switchVal2: false, |
|||
switchVal3: false, |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
background-color: #F5F5F5; |
|||
} |
|||
.flr-setting { |
|||
width: 100%; |
|||
height: 20rpx; |
|||
background: #F5F5F5; |
|||
} |
|||
.switch-tag:first-child { |
|||
border-top: 1rpx solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
.switch-tag:last-child::after { |
|||
border:none; |
|||
} |
|||
.switch-tag { |
|||
width: 100%; |
|||
background-color: white; |
|||
height: 152rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 31rpx 32rpx; |
|||
position: relative; |
|||
/* border-bottom: 1rpx solid rgba(0, 0, 0, 0.1); */ |
|||
} |
|||
.switch-tag::after { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: 0; |
|||
width: 686rpx; |
|||
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
.setting-tag{ |
|||
height: 105rpx; |
|||
width: 100%; |
|||
background-color: white; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 30rpx 32rpx; |
|||
align-items: center; |
|||
position: relative; |
|||
} |
|||
|
|||
.setting-tag::after { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: 0; |
|||
width: 686rpx; |
|||
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.setting-tag:last-child::after { |
|||
border:none; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,227 @@ |
|||
<template> |
|||
<view class="lf-w-100 lf-h-100"> |
|||
<view class="lf-row-between lf-p-t-30 lf-p-b-30 lf-p-l-32 lf-p-r-32 title-border"> |
|||
<view class="input-title"> |
|||
<text style="color: #E21196;">*</text> |
|||
<text class="lf-m-l-10" style="color: #131315;">真实姓名</text> |
|||
</view> |
|||
<view> |
|||
<input type="text" placeholder="请填写真实姓名" style="text-align: right;" /> |
|||
</view> |
|||
</view> |
|||
<view class="lf-row-between lf-p-t-30 lf-p-b-30 lf-p-l-32 lf-p-r-32"> |
|||
<view class="input-title"> |
|||
<text style="color: #E21196;">*</text> |
|||
<text class="lf-m-l-10" style="color: #131315;">身份证号</text> |
|||
</view> |
|||
<view> |
|||
<input type="text" placeholder="请填写身份证号" style="text-align: right;" /> |
|||
</view> |
|||
</view> |
|||
<view class="flr"></view> |
|||
<view> |
|||
<view class="lf-color-777 lf-font-32 lf-p-t-30 lf-p-b-30 lf-p-l-32"> |
|||
请根据示例图上传清晰照片 |
|||
</view> |
|||
<view class="authen-pic"> |
|||
<view> |
|||
<image src="../../static/logo.png" mode="aspectFill" style="width: 200rpx;height: 135rpx;"></image> |
|||
</view> |
|||
<view @tap="ChooseImage"> |
|||
<view> |
|||
<u-icon name="camera-fill" style="font-size: 80rpx;"></u-icon> |
|||
</view> |
|||
<view class="lf-color-999 lf-font-24">点击上传照片</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-row-center lf-font-28 lf-m-t-20"> |
|||
<text style="color: #E21196;">*</text><text class="lf-m-l-10 lf-color-222">上传身份证正面</text> |
|||
</view> |
|||
<view class="authen-pic" style="margin-top: 60rpx;"> |
|||
<view> |
|||
<image src="../../static/logo.png" mode="aspectFill" style="width: 200rpx;height: 135rpx;"></image> |
|||
</view> |
|||
<view @tap="ChooseImage"> |
|||
<view> |
|||
<u-icon name="camera-fill" style="font-size: 80rpx;"></u-icon> |
|||
</view> |
|||
<view class="lf-color-999 lf-font-24">点击上传照片</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-row-center lf-font-28 lf-m-t-20"> |
|||
<text style="color: #E21196;">*</text><text class="lf-m-l-10 lf-color-222">上传身份证反面</text> |
|||
</view> |
|||
|
|||
<view class="apply-btn"> |
|||
申请认证 |
|||
</view> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
hostImg: '', |
|||
frontPic: '', |
|||
backPic: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
checkImgInfo(tempFilePath, suc){ |
|||
uni.getImageInfo({ |
|||
src: tempFilePath, |
|||
success (res) { |
|||
let type = res.type; |
|||
console.log('checkImgInfo...', type); |
|||
if(type == 'png' || type == 'jpeg' || type == 'jpg'){ |
|||
suc && suc(true); |
|||
} else { |
|||
suc && suc(false); |
|||
} |
|||
}, |
|||
fail(err) { |
|||
suc && suc(false); |
|||
} |
|||
}) |
|||
}, |
|||
// 选择图片 |
|||
ChooseImage(e) { |
|||
let that = this; |
|||
uni.chooseImage({ |
|||
count: 1, |
|||
sizeType: ['original'], // 可以指定是原图original还是压缩图compressed ，默认二者都有 |
|||
sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有 |
|||
success: res => { |
|||
that.hostImg = res.tempFilePaths[0]; |
|||
let tempFile = res.tempFiles.shift(); |
|||
let tempFilePath = res.tempFilePaths.shift(); |
|||
console.log('临时路径',res) |
|||
that.checkImgInfo(tempFilePath, (res) => { |
|||
// 过滤不是图片不是png、jpeg 格式 |
|||
if(res){ |
|||
if(tempFile.size > 10000000){ |
|||
uni.showModal({ |
|||
title: '', |
|||
content: '您选择的图片过大：'+ (tempFile.size / 1024000).toFixed(2) +"M，请点击确定重新上传", |
|||
success: res2 => { |
|||
if(res2.confirm){ |
|||
uni.chooseImage({ |
|||
count: 1, |
|||
sizeType: ['compressed'], |
|||
sourceType: ['album', 'camera'], |
|||
success: (res3) => { |
|||
console.log(res3) |
|||
let tempFilePath = res3.tempFilePaths.shift(); |
|||
that.frontPic = res3.tempFilePaths |
|||
that.is_wx_reduce = true; |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
} else{ |
|||
that.frontPic = res3.tempFilePaths |
|||
} |
|||
} else { |
|||
uni.showModal({ |
|||
title: '', |
|||
content: '选择的图片须为jpg、jpeg或png格式', |
|||
showCancel: false, |
|||
confirmColor: '#1697EE' |
|||
}) |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 上传图片到服务器 |
|||
upload(url){ |
|||
let that = this; |
|||
let uploads = []; |
|||
// 商品banner图上传 |
|||
if (that.img_list.length > 0) { |
|||
for (let i = 0; i < that.img_list.length; i++) { |
|||
let upload_img = new Promise((resolve, reject) => { |
|||
that.uploadFile(that.img_list[i], (res) => { |
|||
resolve(res); |
|||
}, (err) => { |
|||
reject(err); |
|||
}); |
|||
}) |
|||
uploads.push(upload_img); |
|||
} |
|||
} |
|||
if(uploads.length == 0) { |
|||
that.realSubmitInfo([]); |
|||
return |
|||
} |
|||
Promise.all(uploads).then((result) => { |
|||
let img_url_list = []; |
|||
if(result.length > 0){ |
|||
img_url_list = result; |
|||
} |
|||
if(img_url_list) { |
|||
that.realSubmitInfo(img_url_list); |
|||
} |
|||
|
|||
|
|||
}).catch(err => { |
|||
that.is_publish = false; // 恢复提交按钮 |
|||
uni.showModal({ |
|||
title: '', |
|||
content: '图片上传失败，请重新提交', |
|||
confirmColor: '#1697EE' |
|||
}) |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.apply-btn { |
|||
width: 686rpx; |
|||
height: 100rpx; |
|||
background: #E21196; |
|||
border-radius: 60rpx; |
|||
margin: 0 auto; |
|||
font-size: 36rpx; |
|||
color: white; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-top: 60rpx; |
|||
} |
|||
.flr{ |
|||
width: 100%; |
|||
height: 20rpx; |
|||
background: #F5F5F5; |
|||
} |
|||
.title-border { |
|||
border-bottom: 1rpx solid rgba(0,0,0,0.1); |
|||
border-top: 1rpx solid rgba(0,0,0,0.1) ; |
|||
} |
|||
.input-title { |
|||
font-size: 32rpx; |
|||
color: #131315; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.authen-pic { |
|||
width: 686rpx; |
|||
height: 349rpx; |
|||
background: #F5F5F5; |
|||
border-radius: 10rpx; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,91 @@ |
|||
<template> |
|||
<view class="lf-w-100 lf-h-100"> |
|||
<view class="pure_top"> |
|||
<view class="tips-top"> |
|||
<view class="lf-font-60" style="color: #E21196;">10</view> |
|||
<view class="lf-font-28 lf-color-555">可用桃花</view> |
|||
</view> |
|||
</view> |
|||
<view class="change-tag"> |
|||
<view> |
|||
<view class="change-top"></view> |
|||
<view class="change-bottom">兑换</view> |
|||
</view> |
|||
<view> |
|||
<view class="change-top"></view> |
|||
<view class="change-bottom">兑换</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
background-color: #F5F5F5; |
|||
} |
|||
|
|||
.tips-top { |
|||
width: 686rpx; |
|||
height: 252rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
margin: 0 auto; |
|||
position: relative; |
|||
top: 60rpx; |
|||
padding: 50rpx 40rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.change-tag { |
|||
width: 686rpx; |
|||
margin: 133rpx auto; |
|||
height: 338rpx; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-content: center; |
|||
} |
|||
|
|||
.change-top { |
|||
width: 333rpx; |
|||
height: 250rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 10rpx 10rpx 0 0; |
|||
} |
|||
|
|||
.change-bottom { |
|||
width: 333rpx; |
|||
height: 88rpx; |
|||
background: #E21196; |
|||
border-radius: 0 0 10rpx 10rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 32rpx; |
|||
color: white; |
|||
} |
|||
|
|||
.pure_top { |
|||
width: 100%; |
|||
height: 210rpx; |
|||
position: relative; |
|||
z-index: -1; |
|||
} |
|||
|
|||
.pure_top::after { |
|||
content: ''; |
|||
width: 140%; |
|||
height: 210rpx; |
|||
position: absolute; |
|||
left: -20%; |
|||
top: 0; |
|||
z-index: -1; |
|||
border-radius: 0 0 55% 55%; |
|||
background: linear-gradient(180deg, #FE3EA5 0%, #FE7749 100%); |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue