250 lines
7.4 KiB
Vue
250 lines
7.4 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<u-navbar :is-back="true" back-icon-color="#333333"
|
||
|
|
title="通过朋友验证" :title-bold="true" :title-size="34"
|
||
|
|
:background="{ background: '#ffffff' }"
|
||
|
|
title-color="#404133" :border-bottom="false">
|
||
|
|
</u-navbar>
|
||
|
|
<view class="">
|
||
|
|
<scroll-view :scroll-x="false" :scroll-y="true" class="u-p-t-10 u-p-b-30"
|
||
|
|
:style="'width:100%;height:'+scrollviewHeight+'px'">
|
||
|
|
<view class="u-p-l-40 u-p-r-40">
|
||
|
|
<view class="u-p-l-20 u-title-color u-font-28">
|
||
|
|
<text>设置备注</text>
|
||
|
|
</view>
|
||
|
|
<view class="inputBox">
|
||
|
|
<u-input :custom-style="customInputStyle"
|
||
|
|
v-model="form.nickName" type="text"
|
||
|
|
:border="false" :height="60" :clearable="false"/>
|
||
|
|
</view>
|
||
|
|
<view class="u-title-color u-p-l-30 u-m-t-10">
|
||
|
|
<text>
|
||
|
|
<text style="font-size: 28rpx;">"{{form.userRemark}}"</text>
|
||
|
|
<text style="color: #36648b;margin-left: 20rpx;">选词填入</text>
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<view class="u-m-t-30 u-p-l-40 u-p-r-40">
|
||
|
|
<view class="u-p-l-20 u-title-color u-font-28">
|
||
|
|
<text>添加标签与描述</text>
|
||
|
|
</view>
|
||
|
|
<view style="background-color: #f0f0f0;border-radius: 16rpx;margin-top: 20rpx;font-size: 32rpx;">
|
||
|
|
<view class="u-flex u-row-between u-col-center" style="padding:16rpx 26rpx;">
|
||
|
|
<view class="u-p-20 label-font">
|
||
|
|
<text>标签</text>
|
||
|
|
</view>
|
||
|
|
<view class="u-p-20">
|
||
|
|
<u-icon name="arrow-right" color="#909399" :size="32"></u-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<u-gap :height="1" bg-color="#e5e8ec"></u-gap>
|
||
|
|
<view class="u-flex u-row-between u-col-center" style="padding:16rpx 26rpx;">
|
||
|
|
<view class="u-p-20 label-font">
|
||
|
|
<text>描述</text>
|
||
|
|
</view>
|
||
|
|
<view class="u-p-20">
|
||
|
|
<u-icon name="arrow-right" color="#909399" :size="32"></u-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="u-m-t-30 u-p-l-40 u-p-r-40">
|
||
|
|
<view class="u-p-l-20 u-title-color u-font-28">
|
||
|
|
<text>设置朋友权限</text>
|
||
|
|
</view>
|
||
|
|
<view style="background-color: #f0f0f0;border-radius: 16rpx;margin-top: 20rpx;font-size: 32rpx;">
|
||
|
|
<view class="u-flex u-row-between u-col-center"
|
||
|
|
@click="changePower(0)"
|
||
|
|
style="padding:16rpx 26rpx;">
|
||
|
|
<view class="u-p-20 label-font">
|
||
|
|
<text>聊天、朋友圈、微信运动等</text>
|
||
|
|
</view>
|
||
|
|
<view class="u-p-20" v-show="form.friendPower==0">
|
||
|
|
<u-icon name="checkbox-mark" color="#19be6b" :size="32"></u-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<u-gap :height="1" bg-color="#e5e8ec"></u-gap>
|
||
|
|
<view class="u-flex u-row-between u-col-center"
|
||
|
|
@click="changePower(1)"
|
||
|
|
style="padding:16rpx 26rpx;">
|
||
|
|
<view class="u-p-20 label-font">
|
||
|
|
<text>仅聊天</text>
|
||
|
|
</view>
|
||
|
|
<view class="u-p-20" v-show="form.friendPower==1">
|
||
|
|
<u-icon name="checkbox-mark" color="#19be6b" :size="32"></u-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="u-m-t-30 u-p-l-40 u-p-r-40" v-if="form.friendPower==0">
|
||
|
|
<view class="u-p-l-20 u-title-color u-font-28">
|
||
|
|
<text>朋友圈和状态</text>
|
||
|
|
</view>
|
||
|
|
<view style="background-color: #f0f0f0;border-radius: 16rpx;margin-top: 20rpx;font-size: 32rpx;">
|
||
|
|
<view class="u-flex u-row-between u-col-center" style="padding:16rpx 26rpx;">
|
||
|
|
<view class="u-p-20 label-font">
|
||
|
|
<text>不让他(她)看</text>
|
||
|
|
</view>
|
||
|
|
<view class="u-p-20">
|
||
|
|
<u-switch v-model="form.forbidSelf" :size="40" active-color="#19be6b" inactive-color="#eee"></u-switch>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<u-gap :height="1" bg-color="#e5e8ec"></u-gap>
|
||
|
|
<view class="u-flex u-row-between u-col-center" style="padding:16rpx 26rpx;">
|
||
|
|
<view class="u-p-20 label-font">
|
||
|
|
<text>不看他(她)</text>
|
||
|
|
</view>
|
||
|
|
<view class="u-p-20">
|
||
|
|
<u-switch v-model="form.forbidHis" :size="40" active-color="#19be6b" inactive-color="#eee"></u-switch>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
<view :style="'height:'+footerHeight+'px'"
|
||
|
|
class="u-flex u-row-center u-col-top footerbox">
|
||
|
|
<u-button type="success" :custom-style="customBtnStyle" @click="submitApply">完成</u-button>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<u-popup v-model="loadingShow"
|
||
|
|
:mask-close-able="false" :mask="false"
|
||
|
|
mode="center" border-radius="20" width="250rpx" height="250rpx">
|
||
|
|
<view class="u-flex u-row-center u-col-center"
|
||
|
|
style="flex-direction: column; text-align: center;
|
||
|
|
background-color: #000000;color: #ffffff;height: 250rpx;width: 250rpx;">
|
||
|
|
<view v-if="loadingStep==1">
|
||
|
|
<view>
|
||
|
|
<!-- <u-circle-progress :percent="100" bg-color="none"
|
||
|
|
inactive-color="#909399"
|
||
|
|
active-color="#ffffff"
|
||
|
|
:border-width="6"
|
||
|
|
:duration="1000" :width="100">
|
||
|
|
</u-circle-progress> -->
|
||
|
|
<u-loading mode="circle" :size="80" color="#909399"></u-loading>
|
||
|
|
</view>
|
||
|
|
<view class="u-m-t-20 u-font-32" style="font-weight: 420rpx;">正在处理...</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="loadingStep==2">
|
||
|
|
<view>
|
||
|
|
<u-icon name="checkmark" color="#ffffff" :size="80"></u-icon>
|
||
|
|
</view>
|
||
|
|
<view class="u-m-t-20 u-font-32" style="font-weight: 420rpx;">已通过验证</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</u-popup>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
scrollviewHeight:0,
|
||
|
|
footerHeight:0,
|
||
|
|
customInputStyle:{
|
||
|
|
fontSize:'32rpx',
|
||
|
|
color:'#909399',
|
||
|
|
paddingLeft:'10rpx'
|
||
|
|
},
|
||
|
|
form:{
|
||
|
|
id:'3',
|
||
|
|
avatar:'/static/image/default/default-user/3.jpg',
|
||
|
|
nickName:'王工',
|
||
|
|
signature:'',
|
||
|
|
userRemark:'你好,美女',
|
||
|
|
address:'浙江 杭州',
|
||
|
|
sex:0,
|
||
|
|
friendPower:0,
|
||
|
|
forbidSelf:false,
|
||
|
|
forbidHis:false,
|
||
|
|
},
|
||
|
|
customBtnStyle:{
|
||
|
|
padding:'20rpx 40rpx',
|
||
|
|
width:'300rpx'
|
||
|
|
},
|
||
|
|
loadingShow:false,
|
||
|
|
loadingStep:1,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created:function(){
|
||
|
|
let pageHeight= this.$u.sys().windowHeight;
|
||
|
|
this.scrollviewHeight=pageHeight*0.783;
|
||
|
|
this.footerHeight=pageHeight*0.09;
|
||
|
|
},
|
||
|
|
onLoad:function(option){
|
||
|
|
let that=this;
|
||
|
|
/* let param=JSON.parse(decodeURIComponent(option.personInfo));
|
||
|
|
this.form=param; */
|
||
|
|
this.form=this.yyy_current_user;
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
friendNameFocus:function(){
|
||
|
|
let that=this;
|
||
|
|
},
|
||
|
|
changePower:function(status){
|
||
|
|
let that=this;
|
||
|
|
},
|
||
|
|
submitApply:function(){
|
||
|
|
let that=this;
|
||
|
|
that.loadingStep=1;
|
||
|
|
that.loadingShow=true;
|
||
|
|
setTimeout(function(){
|
||
|
|
that.loadingStep=2;
|
||
|
|
setTimeout(function(){
|
||
|
|
that.loadingShow=false;
|
||
|
|
uni.navigateTo({
|
||
|
|
animationType:'slide-in-left',
|
||
|
|
url:'/pages/find/shake/friend_home?personInfo='+encodeURIComponent(JSON.stringify(that.form))
|
||
|
|
});
|
||
|
|
/* that.$u.route({
|
||
|
|
url:'/pages/find/shake/friend_home',
|
||
|
|
animationType:'slide-in-left',
|
||
|
|
params:{
|
||
|
|
personInfo:encodeURIComponent(JSON.stringify(that.form))
|
||
|
|
},
|
||
|
|
}) */
|
||
|
|
},400)
|
||
|
|
},800);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.inputBox{
|
||
|
|
background-color: #f0f0f0;
|
||
|
|
border-radius: 16rpx;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
padding:16rpx 26rpx;
|
||
|
|
font-size: 32rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footerbox{
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0px;
|
||
|
|
width: 100%;
|
||
|
|
background-color: #ffffff;
|
||
|
|
//opacity: 0.7;
|
||
|
|
}
|
||
|
|
.label-font{
|
||
|
|
font-size: 34rpx;
|
||
|
|
color: #000000;
|
||
|
|
font-weight: 420;
|
||
|
|
}
|
||
|
|
.u-title-color{
|
||
|
|
color: #606266 !important;
|
||
|
|
font-size: 30rpx;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style lang="scss">
|
||
|
|
page{
|
||
|
|
background-color: #ffffff;
|
||
|
|
}
|
||
|
|
</style>
|