You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
342 lines
7.2 KiB
342 lines
7.2 KiB
10 months ago
|
<template>
|
||
|
|
<view class="user">
|
||
|
|
<view class="order-navbar">
|
||
|
|
<u-navbar title="会员管理" :border-bottom="false" :background="background"></u-navbar>
|
||
|
|
</view>
|
||
|
|
<view class="user-hd">
|
||
|
|
<view class="avater">
|
||
|
|
<image src="@/static/news/avater.png"></image>
|
||
|
|
</view>
|
||
|
|
<view class="info">
|
||
|
|
<!-- p会员 无p游客 -->
|
||
|
|
<view class="name">我是昵称<text class="p">游客</text></view>
|
||
|
|
<view class="desc">真实姓名：张三</view>
|
||
|
|
<view class="desc">18089800909</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="user-show">
|
||
|
|
<view class="a">
|
||
|
|
<text>余额(元）</text>¥0.00
|
||
|
|
</view>
|
||
|
|
<view class="a">
|
||
|
|
<text>积分(分）</text>0.00
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="user-order">
|
||
|
|
<view class="a">关联订单</view>
|
||
|
|
<view class="b">
|
||
|
|
<view class="num">99+</view>
|
||
|
|
<u-icon name="arrow-right"></u-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="user-do">
|
||
|
|
<view class="a">用户信息</view>
|
||
|
|
<view class="b">编辑信息</view>
|
||
|
|
</view>
|
||
|
|
<view class="user-bd">
|
||
|
|
<view class="item">
|
||
|
|
<view class="a">登录密码</view>
|
||
|
|
<view class="b"><view class="select select-on">****</view></view>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<view class="a">上级推广人</view>
|
||
|
|
<view class="b">
|
||
|
|
<view class="select select-on">张三</view>
|
||
|
|
<u-icon style="margin-left: 10rpx;" name="arrow-right"></u-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<view class="a">用户分组</view>
|
||
|
|
<view class="b">
|
||
|
|
<view class="select">请选择用户分组</view>
|
||
|
|
<u-icon style="margin-left: 10rpx;" name="arrow-right"></u-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<view class="a">用户标签</view>
|
||
|
|
<view class="b">
|
||
|
|
<view class="select">请选择用户分组</view>
|
||
|
|
<u-icon style="margin-left: 10rpx;" name="arrow-right"></u-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="items">
|
||
|
|
<view class="a">推广资格
|
||
|
|
<u-switch v-model="checked" active-color="#55BD6A" ></u-switch></view>
|
||
|
|
<view class="b">
|
||
|
|
指定分销模式下，开启或关闭用户的推广权限
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="items">
|
||
|
|
<view class="a">推广权限
|
||
|
|
<u-switch v-model="checked" active-color="#55BD6A" ></u-switch></view>
|
||
|
|
<view class="b">
|
||
|
|
指定分销模式下，开启或关闭用户的推广权限
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<view class="a">用户状态</view>
|
||
|
|
<view class="b">
|
||
|
|
<u-switch v-model="checked" active-color="#55BD6A" ></u-switch>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="user-fd">
|
||
|
|
<view class="b">
|
||
|
|
确认修改
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import img from "@/static/news/login-bg.png"
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
checked: true,
|
||
|
|
isScroll: true,
|
||
|
|
background: {
|
||
|
|
background: 'url('+ img+') center top no-repeat',
|
||
|
|
backgroundSize: '100%',
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onPageScroll(e){
|
||
|
|
if(e.scrollTop <= 44){
|
||
|
|
this.isScroll = true;
|
||
|
|
}else{
|
||
|
|
this.isScroll = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.user{
|
||
|
|
width: 100%;
|
||
|
|
padding: 0 0 150rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
overflow: hidden;
|
||
|
|
background: url(@/static/news/login-bg.png) center top no-repeat;
|
||
|
|
background-size: 100% auto;
|
||
|
|
min-height: 100vh;
|
||
|
|
&-hd{
|
||
|
|
padding: 60rpx 40rpx 30rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start;
|
||
|
|
.avater{
|
||
|
|
width: 114rpx;
|
||
|
|
height: 114rpx;
|
||
|
|
margin-right: 30rpx;
|
||
|
|
image{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.info{
|
||
|
|
flex: 1;
|
||
|
|
overflow: hidden;
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #5E5E5E;
|
||
|
|
line-height: 55rpx;
|
||
|
|
.name{
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #2A2A2A;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
text{
|
||
|
|
display: block;
|
||
|
|
width: 98rpx;
|
||
|
|
border: 1px solid #FFB950;
|
||
|
|
height: 40rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #FFB343;
|
||
|
|
line-height: 40rpx;
|
||
|
|
border-radius: 40rpx;
|
||
|
|
text-align: center;
|
||
|
|
margin-left: 20rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
&.p{
|
||
|
|
color: #F34A40;
|
||
|
|
border-color: #F34A40;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-show{
|
||
|
|
width: 704rpx;
|
||
|
|
height: 170rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 35rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
.a{
|
||
|
|
flex: 1;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 36rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #383838;
|
||
|
|
text-align: center;
|
||
|
|
&:first-child{
|
||
|
|
border-right: 1px solid #F3F3F3;
|
||
|
|
}
|
||
|
|
text{
|
||
|
|
display: block;
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #B2B2B2;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-order{
|
||
|
|
width: 704rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 25rpx 20rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-top: 16rpx;
|
||
|
|
.a{
|
||
|
|
}
|
||
|
|
.b{
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-end;
|
||
|
|
color: #9E9E9E;
|
||
|
|
.num{
|
||
|
|
width: 44rpx;
|
||
|
|
height: 44rpx;
|
||
|
|
background: #FF6257;
|
||
|
|
border-radius:44rpx;
|
||
|
|
line-height: 44rpx;
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 20rpx;
|
||
|
|
margin-right: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-do{
|
||
|
|
width: 704rpx;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 35rpx 25rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
.a{
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #A3A3A3;
|
||
|
|
}
|
||
|
|
.b{
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #307BF6;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-bd{
|
||
|
|
width: 704rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 0 20rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
.item{
|
||
|
|
padding: 25rpx 0;
|
||
|
|
border-top: 1px solid rgba(242,242,242,0.83);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
&:first-child{
|
||
|
|
border-top-color: #fff;
|
||
|
|
}
|
||
|
|
.a{
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #454545;
|
||
|
|
}
|
||
|
|
.b{
|
||
|
|
flex: 1;
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #9d9d9d;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-end;
|
||
|
|
.select{
|
||
|
|
&-on{
|
||
|
|
color:#454545;
|
||
|
|
}
|
||
|
|
color: #9d9d9d;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.items{
|
||
|
|
padding: 25rpx 0;
|
||
|
|
border-top: 1px solid rgba(242,242,242,0.83);
|
||
|
|
&:first-child{
|
||
|
|
border-top-color: #fff;
|
||
|
|
}
|
||
|
|
.a{
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #454545;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.b{
|
||
|
|
flex: 1;
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #9d9d9d;
|
||
|
|
text-align: left;
|
||
|
|
padding-top: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-fd{
|
||
|
|
width: 100%;
|
||
|
|
background-color: #fafafa;
|
||
|
|
box-sizing: border-box;
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
z-index: 200;
|
||
|
|
padding: 20rpx 40rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.b{
|
||
|
|
width: 630rpx;
|
||
|
|
line-height: 83rpx;
|
||
|
|
background: #FFAAA4;
|
||
|
|
border-radius: 83rpx;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|