Leadfyy.co
/
blindDate
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

实名认证/客服/上传身份信息/我的收藏/福利中心/编辑资料/关注公众号/设置/桃花/红线等页面完成

master
石可 5 years ago
parent
f9e21367f7
commit
de4c0c21ab
12 changed files with 1172 additions and 12 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 62
      pages.json
  2. 74
      pages/my/authentication.vue
  3. 11
      pages/my/collect.vue
  4. 135
      pages/my/editInfo.vue
  5. 0
      pages/my/exclusiveMatch.vue
  6. 52
      pages/my/index.vue
  7. 197
      pages/my/memberDetails.vue
  8. 49
      pages/my/officialAccount.vue
  9. 131
      pages/my/service.vue
  10. 155
      pages/my/setting.vue
  11. 227
      pages/my/uploadInfo.vue
  12. 91
      pages/my/welfare.vue

62
pages.json
View File

@ -39,12 +39,72 @@
} }
}, },
{ {
"path": "pages/my/exclusive-match",
"path": "pages/my/exclusiveMatch",
"style": { "style": {
"navigationBarTitleText": "专属红娘", "navigationBarTitleText": "专属红娘",
"navigationBarBackgroundColor": "#FE3EA5", "navigationBarBackgroundColor": "#FE3EA5",
"navigationBarTextStyle": "white" "navigationBarTextStyle": "white"
} }
},
{
"path": "pages/my/authentication",
"style": {
"navigationBarTitleText": "实名认证"
}
},
{
"path": "pages/my/service",
"style": {
"navigationBarTitleText": "客服"
}
},
{
"path": "pages/my/uploadInfo",
"style": {
"navigationBarTitleText": "上传身份证信息"
}
},
{
"path": "pages/my/collect",
"style": {
"navigationBarTitleText": "我的收藏"
}
},
{
"path": "pages/my/editInfo",
"style": {
"navigationBarTitleText": "编辑资料"
}
},
{
"path": "pages/my/welfare",
"style": {
"navigationBarTitleText": "福利中心"
}
},
{
"path": "pages/my/memberDetails",
"style": {
"navigationBarTitleText": "会员详情"
}
},
{
"path": "pages/my/officialAccount",
"style": {
"navigationBarTitleText": "关注公众号"
}
},
{
"path": "pages/my/setting",
"style": {
"navigationBarTitleText": "设置"
}
},
{
"path": "pages/my/setting",
"style": {
"navigationBarTitleText": "VIP会员"
}
} }
], ],
"globalStyle": { "globalStyle": {

74
pages/my/authentication.vue
View File

@ -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>

11
pages/my/collect.vue
View File

@ -0,0 +1,11 @@
<template>
<view>
<lf-userList></lf-userList>
</view>
</template>
<script>
</script>
<style>
</style>

135
pages/my/editInfo.vue
View File

@ -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
pages/my/exclusive-match.vue → pages/my/exclusiveMatch.vue
View File

52
pages/my/index.vue
View File

@ -8,20 +8,20 @@
<image src="../../static/logo.png" mode="widthFix" class="head-pic"></image> <image src="../../static/logo.png" mode="widthFix" class="head-pic"></image>
</view> </view>
<view class="head-left"> <view class="head-left">
<view class="head-name">编号：73894 <u-icon name="arrow-right lf-m-l-20"></u-icon></view>
<view class="head-name" @click="$url('/pages/my/editInfo')">编号：73894 <u-icon name="arrow-right lf-m-l-20"></u-icon></view>
<view class="head-text">资料审核中</view> <view class="head-text">资料审核中</view>
</view> </view>
</view> </view>
<view class="lf-bg-white span-btn1">
<view class="lf-bg-white span-btn1" @click="$url('/pages/my/exclusiveMatch')">
获得红线 获得红线
</view> </view>
</view> </view>
<view class="lf-row-between" style="height: 98rpx;padding: 0 32rpx;"> <view class="lf-row-between" style="height: 98rpx;padding: 0 32rpx;">
<view class="lf-row-round lf-flex-column">
<view class="lf-row-round lf-flex-column" @click="showRedthread()">
<view class="lf-font-32 lf-color-white">0</view> <view class="lf-font-32 lf-color-white">0</view>
<view class="lf-font-24 lf-color-white lf-p-t-20">红线</view> <view class="lf-font-24 lf-color-white lf-p-t-20">红线</view>
</view> </view>
<view class="lf-row-round lf-flex-column">
<view class="lf-row-round lf-flex-column" @click="showPeachblossom()">
<view class="lf-font-32 lf-color-white">5</view> <view class="lf-font-32 lf-color-white">5</view>
<view class="lf-font-24 lf-color-white lf-p-t-20">桃花</view> <view class="lf-font-24 lf-color-white lf-p-t-20">桃花</view>
</view> </view>
@ -81,16 +81,46 @@
data() { data() {
return { return {
list: [ list: [
{name: '我的红娘',icon:'github-circle-fill',path: '/pages/my/exclusive-match'},
{name: '实名认证',icon:'email'},
{name: '我的收藏',icon:'qzone'},
{name: '我的红娘',icon:'github-circle-fill',path: '/pages/my/exclusiveMatch'},
{name: '实名认证',icon:'email',path: '/pages/my/authentication'},
{name: '我的收藏',icon:'qzone',path: '/pages/my/collect'},
{name: '我的动态',icon:'moments'}, {name: '我的动态',icon:'moments'},
{name: '福利中心',icon:'red-packet'},
{name: '公众号',icon:'google-circle-fill'},
{name: '联系客服',icon:'kefu-ermai'},
{name: '设置',icon:'setting'}
{name: '福利中心',icon:'red-packet',path:'/pages/my/welfare'},
{name: '公众号',icon:'google-circle-fill',path:'/pages/my/officialAccount'},
{name: '联系客服',icon:'kefu-ermai',path: '/pages/my/service'},
{name: '设置',icon:'setting',path: '/pages/my/setting'}
] ]
} }
},
methods: {
showRedthread() {
uni.showModal({
title: '红线说明',
content: '红线可以用来联系其他会员，对方不接受则24小时后退还红线',
showCancel: false,
cancelText: '我知道了',
confirmColor: '#E21196',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
}
}
});
},
showPeachblossom() {
uni.showModal({
title: '桃花说明',
content: '桃花可以用来发布动态、评论等，签到可以获得桃花',
showCancel: false,
cancelText: '我知道了',
confirmColor: '#E21196',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
}
}
});
}
} }
} }
</script> </script>

197
pages/my/memberDetails.vue
View File

@ -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>

49
pages/my/officialAccount.vue
View File

@ -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>

131
pages/my/service.vue
View File

@ -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>

155
pages/my/setting.vue
View File

@ -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>

227
pages/my/uploadInfo.vue
View File

@ -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>

91
pages/my/welfare.vue
View File

@ -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