|
|
@@ -0,0 +1,296 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="授权管理" title-color="#101010">
|
|
|
+ <view slot="right" @click="deleteShow=!deleteShow">
|
|
|
+ <img src="@/assets/img/riLine-list-settings-line.svg" alt="" />
|
|
|
+ </view>
|
|
|
+ </u-navbar>
|
|
|
+ <view class="search">
|
|
|
+ <u-search placeholder="搜索授权用户" :show-action="false" v-model="keyword"></u-search>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 列表 -->
|
|
|
+ <view class="member-list">
|
|
|
+ <view class="item" v-for="item in 15" >
|
|
|
+ <view class="photo">
|
|
|
+ <img src="@/assets/img/PEokWS2@3x.png" alt="" />
|
|
|
+ </view>
|
|
|
+ <view class="infos">
|
|
|
+ <view class="name">
|
|
|
+ 杨静云
|
|
|
+ </view>
|
|
|
+ <view class="tel">
|
|
|
+ 19729922849
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="button" v-if="!deleteShow">
|
|
|
+ 权限管理
|
|
|
+ </view>
|
|
|
+ <!-- 单选框 -->
|
|
|
+ <view class="radio-box" v-if="deleteShow">
|
|
|
+
|
|
|
+ <label class="radio">
|
|
|
+ <radio value="" /><text></text>
|
|
|
+ </label>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="bottom">
|
|
|
+ <view class="button qr-code">
|
|
|
+ <img src="@/assets/img/riLine-qr-code-line 1.svg" alt="" /> 授权二维码
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="button list-button">
|
|
|
+ <img src="@/assets/img/riLine-contacts-line.svg" alt="" /> 申请人列表
|
|
|
+ <view class="bot">
|
|
|
+ 8
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 删除 -->
|
|
|
+ <view class="delete" v-if="deleteShow" @click="deletePopup=true">
|
|
|
+ <view class="icon">
|
|
|
+ <img src="@/assets/img/riLine-delete-bin-7-line 1.svg" alt="" />
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 删除
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 删除确认弹框 -->
|
|
|
+ <u-popup v-model="deletePopup" mode="bottom" border-radius="12">
|
|
|
+ <view class="popup">
|
|
|
+ <view class="headline">
|
|
|
+ 删除定时
|
|
|
+ </view>
|
|
|
+ <view class="hint">
|
|
|
+ 要删除选中的定时吗？
|
|
|
+ </view>
|
|
|
+ <view class="btn-box">
|
|
|
+ <view class="cancel" @click="deletePopup=false">
|
|
|
+ 取消
|
|
|
+ </view>
|
|
|
+ <view class="confirm" >
|
|
|
+ 确认删除
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ keyword:"",
|
|
|
+ deleteShow:false,
|
|
|
+ deletePopup:false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ page{
|
|
|
+ padding-bottom: 100px;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ /deep/.u-slot-right {
|
|
|
+ padding-right: 32rpx;
|
|
|
+ padding-left: 16rpx;
|
|
|
+ line-height: 30px;
|
|
|
+ background-color: #fff;
|
|
|
+ img {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search{
|
|
|
+ border-bottom: 1px solid rgba(242,242,242,1);
|
|
|
+ background: #fff;
|
|
|
+ padding:24rpx;
|
|
|
+ position:sticky;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 80rpx;
|
|
|
+ z-index: 991;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 列表
|
|
|
+ .member-list{
|
|
|
+ background: #fff;
|
|
|
+ .item{
|
|
|
+ padding: 32rpx 0;
|
|
|
+ margin: 0 32rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid rgba(244,244,244,1);;
|
|
|
+ }
|
|
|
+ .photo{
|
|
|
+ img{
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .infos{
|
|
|
+ margin-left: 16rpx;
|
|
|
+ .name{
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ .tel{
|
|
|
+ color: rgba(119,119,119,1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .button{
|
|
|
+ width: 144rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: rgba(22,119,255,1);
|
|
|
+ color: rgba(255,255,255,1);
|
|
|
+ text-align: center;
|
|
|
+ margin-left: auto;
|
|
|
+ }
|
|
|
+ .radio-box{
|
|
|
+ margin-left: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .bottom{
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 20rpx 32rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ img{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+ .button{
|
|
|
+ width: 328rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .qr-code{
|
|
|
+
|
|
|
+ background-color: rgba(22,119,255,1);
|
|
|
+ color: rgba(255,255,255,1);
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ .list-button{
|
|
|
+ background-color: rgba(222,225,228,1);
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .bot{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: rgba(244,60,50,1);
|
|
|
+ color: rgba(255,255,255,1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ top: -10rpx;
|
|
|
+ right:-10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 删除
|
|
|
+.delete {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 120rpx;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup {
|
|
|
+ padding: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .headline {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hint {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-box {
|
|
|
+ margin-top: 82rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .cancel {
|
|
|
+ width: 328rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(222, 225, 228, 1);
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirm {
|
|
|
+ width: 328rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(255, 68, 68, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
