增加音乐,摇一摇,服务等页面
This commit is contained in:
cansnow
@@ -0,0 +1,249 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user