我的界面和权限展示修改

mixin/index.js

@@ -16,6 +16,9 @@ module.exports = {
   computed: {
     tabbarList(){
       return store.state.user.tabbarList
+    },
+    userInfo(){//个人信息
+      return this.$store.state.user.userInfo
     }
   },
   filters: {
@@ -36,13 +39,11 @@ module.exports = {
   data() {
     return {
       globalImgUrls:globalImgUrls,// 图片资源
-      userInfo:{},//个人信息
       globalBgMusic:uni.getBackgroundAudioManager()
     };
   },
   onLoad() {},
   onShow(){
-    this.userInfo=this.$store.state.user.userInfo
     this.handleActivityListPageRefresh()
     this.$store.dispatch('getTabBar')
     this.handleSetTabBarItem()

pages-user/permissionList.vue

@@ -0,0 +1,91 @@
+<template>
+  <view class="select-variety-page">
+      <view class="flex variety-list">
+          <view class="variety-item" v-for="(item,index) in list" :key="item.name">
+              <image class="variety-img" :src="item.pic_url" mode="aspectFill"></image>
+              <view class="variety-name">{{item.name}}</view>
+          </view>
+      </view>
+  </view>
+</template>
+
+<script>
+import {apiGetPermissionList} from '@/api/common'
+export default {
+    computed: {
+        list(){
+            let hasArr=[]
+            this.userInfo.permission_list&&this.userInfo.permission_list.forEach(item=>{
+                item.permission_list.forEach(item2=>{
+                    hasArr.push(item2.name)
+                })
+            })
+            let arr=this.reslist.filter(item=>{
+                if(hasArr.find((e)=>e===item.permission_name)) return item
+            })
+
+            return arr
+        }
+    },
+    data () {
+        return {
+            reslist:[]
+        }
+    },
+    
+    onLoad(options){
+        this.getList()
+    },
+    methods: {
+        async getList(){
+            const res=await apiGetPermissionList()
+            if(res.code===200){
+                this.reslist=res.data
+                // let hasArr=[]
+                // this.$store.state.user.userInfo.permissiom_list&&this.$store.state.user.userInfo.permissiom_list.forEach(item=>{
+                //     console.log(item);
+                //     item.permission_list.forEach(item2=>{
+                //         console.log(item2.name);
+                //         hasArr.push(item2.name)
+                //     })
+                // })
+                // console.log(hasArr);
+                // this.list=res.data.filter(item=>{
+                //     if(hasArr.find((e)=>e===item.name)) return item
+                // })
+            }
+        },
+
+        
+    }
+}
+</script>
+
+<style lang="scss">
+.variety-list{
+    padding: 50rpx 68rpx;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    text-decoration: none;
+    .variety-item{
+        margin-bottom: 30rpx;
+        position: relative;
+        width: 188rpx;
+    }
+    .variety-img{
+        width: 188rpx;
+        height: 188rpx;
+        background-color: $global-bg-color-grey;
+        border-radius: 8rpx;
+    }
+    .variety-name{
+        text-align: center;
+    }
+    // 使用伪类 补充一个元素
+    &::after{
+        content: "";
+        height: 0;
+        width: 188rpx;
+    }
+}
+</style>

pages.json

@@ -86,6 +86,18 @@
 					}
 				}
 			]
+		},
+		// 用户模块
+		{
+			"root": "pages-user",
+			"pages": [
+				{
+					"path": "permissionList",
+					"style":{
+						"navigationBarTitleText": "品种权限"
+					}
+				}
+			]
 		}
 	],
 		

pages/activity/activity.vue

@@ -60,11 +60,11 @@
                     <image class="avatar" :src="item.speakerHeadPic" mode="aspectFill"></image>
                     <view class="content">
                         <view class="flex icon-box">
-                            <template v-if="item.activityTypeId===3&&item.city">
+                            <template v-if="item.firstActivityTypeId===3&&item.city">
                                 <image src='../../static/position.png'></image>
                                 <text>{{item.city}}</text>
                             </template>
-                            <template v-if="item.activityTypeId===1&&item.hasPlayBack">
+                            <template v-if="item.firstActivityTypeId===1&&item.hasPlayBack">
                                 <image src='../../static/hf.png'></image>
                                 <text>回放</text>
                             </template>
@@ -533,6 +533,7 @@ export default {
                 border-radius: 50%;
                 margin-right: 30rpx;
                 flex-shrink: 0;
+                border: 1px solid $global-border-color;
             }
             .title {
                 font-size: $global-font-size-lg;
@@ -547,7 +548,7 @@ export default {
                 margin: 20rpx 0;
             }
             .time {
-                font-size: $global-font-size-mini;
+                font-size: $global-font-size-sm;
                 color: $global-text-color-999;
             }
         }

pages/user/user.vue

@@ -1,33 +1,41 @@
 <template>
 	<view class="user-page">
-		<view class="flex base-info-wrap">
+		<view class="top-box">
+			<view class="flex">
 			<view class="avatar">
 				<open-data type="userAvatarUrl"></open-data>
 			</view>
 			<view>
-				<view style="margin-top:6px;margin-bottom:18px" v-if="userInfo.mobile">手机号：{{userInfo.mobile}}</view>
-				<view style="margin-top:6px;margin-bottom:18px" v-else>邮箱：{{userInfo.email}}</view>
-				<view>姓名：{{userInfo.real_name||'--'}}</view>
+				<view class="user-name">{{userInfo.real_name||'--'}}</view>
+				<view class="tel" v-if="userInfo.mobile">{{userInfo.mobile}}</view>
+				<view class="tel" v-else>{{userInfo.email}}</view>
+			</view>
+			</view>
+			<view class="flex company">
+				<image src="../../static/company.png" mode="widthFix"/>
+				<text>{{userInfo.company_name||'--'}}</text>
 			</view>
 		</view>
-		<view class="main-info-wrap">
-			<view class="title">我的信息</view>
-			<view class="info-list">
-				<view class="flex item">
-					<text class="label">公司名称：</text>
-					<text>{{userInfo.company_name||'--'}}</text>
-				</view>
-				<view class="flex item">
-					<text class="label">品种权限：</text>
-					<template v-if="userInfo.permission_list.length==0">
-						<text>暂无权限</text>
-						<van-button custom-class="apply-btn" plain round color="#DDAA6A" size="small" @click="handleGoApplyPermission">立即申请</van-button>
-					</template>
-					<view>{{permissionList}}</view>
+		<view class="content">
+			<view class="flex item-card">
+				<image src="../../static/user-icon-1.png" mode="widthFix" />
+				<text class="label">品种权限：</text>
+				<block v-if="userInfo.permission_list.length==0">
+				<text style="color:#666666">暂无权限</text>
+				<van-button custom-class="apply-btn" plain round color="#DDAA6A" size="small" @click="handleGoApplyPermission">立即申请</van-button>
+				</block>
+				<view v-else class="right-text" @click="handleToUserPermission">
+					<text>查看</text>
+					<van-icon name="arrow"></van-icon>
 				</view>
 			</view>
-			<view class="tips" v-if="userInfo.permission_list.length!=0">服务截止日期：{{lastTime}}</view>
+			<view class="flex item-card">
+				<image src="../../static/calendar.png" mode="widthFix" />
+				<text class="label">服务截止日期：</text>
+				<text class="right-text">{{lastTime}}</text>
+			</view>
 		</view>
+		
 	</view>
 </template>
 
@@ -36,25 +44,22 @@
 	import {apiLastApplyRecord} from '@/api/user'
 	export default {
 		computed: {
-			permissionList(){
-				let arr=[]
+			lastTime(){
 				let timeArr=[]
 				this.userInfo.permission_list&&this.userInfo.permission_list.forEach(item=>{
 					item.permission_list.forEach(item2=>{
-						arr.push(item2.name)
 						timeArr.push(new Date(item2.end_date))
 					})
 				})
 
 				let maxTime=Math.max(...timeArr)
-				this.lastTime=moment(maxTime).format('YYYY.MM.DD')
 
-				return arr.join('、')
+				return moment(maxTime).format('YYYY.MM.DD')
 			}	
 		},
 		data () {
 			return {
-				lastTime:""		
+				
 			}
 		},
 		onShow() {
@@ -74,63 +79,83 @@
 						})
 					}
 				}		
+			},
+
+			handleToUserPermission(){
+				uni.navigateTo({ url: '/pages-user/permissionList' })
 			}
 		}
 	}
 </script>
 
 <style lang="scss">
-	.base-info-wrap{
-			width: 100%;
-			height: 393rpx;
-			background-color: #373634;
-			padding-top: 99rpx;
-			padding-left: 50rpx;
-			color: $global-text-color-white;
-			font-size: $global-font-size-lg;
-			font-weight: bold;
-			.avatar{
-				width: 154rpx;
-				height: 154rpx;
-				border-radius: 16rpx;
-				overflow: hidden;
-				margin-right: 40rpx;
-			}
+	.user-page{
+		min-height: calc(100vh - calc(50px + constant(safe-area-inset-bottom)));
+    	min-height: calc(100vh - calc(50px + env(safe-area-inset-bottom)));
+		background-color: #EDEDED;
+	}
+	.top-box{
+		height: 392rpx;
+		background-color: #fff;
+		padding: 98rpx 50rpx 0 50rpx;
+		.avatar{
+			width: 154rpx;
+			height: 154rpx;
+			border-radius: 16rpx;
+			overflow: hidden;
+			margin-right: 40rpx;
 		}
-	.main-info-wrap{
-		width: calc(100% - 68rpx);
-		min-height: 561rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-top: -30rpx;
-		padding: 30rpx;
-		background-color: $global-bg-color;
-		box-shadow: 0px 3rpx 12rpx rgba(0, 0, 0, 0.16);
-		border-radius: 16rpx;
-		.title{
-			font-size: $global-font-size-lg;
+		.user-name{
+			font-size: 24px;
 			font-weight: bold;
-			padding-bottom: 30rpx;
-			border-bottom: 1px solid $global-border-color;
+			color: #060606;
 		}
-		.tips{
-			font-size: $global-font-size-sm;
-			color: $global-text-color-999;
-			margin-top: 20rpx;
+		.tel{
+			margin-top: 26rpx;
+			color: #999;
+		}
+		.company{
+			margin-top: 50rpx;
+			image{
+				width: 32rpx;
+				margin-right: 8rpx;
+			}
+			color:#DBA665;
 		}
 	}
-	.info-list{
-		min-height: 300rpx;
-		.item{
-			margin-top: 40rpx;
+	.content{
+		background-color: #fff;
+		margin-top: 12rpx;
+		padding: 0 34rpx;
+		.item-card{
+			position: relative;
+			padding: 30rpx 0;
+			border-bottom: 1px solid $global-border-color;
+			image{
+				width: 36rpx;
+			}
 			.label{
-				flex-shrink: 0;
+				font-weight: bold;
+				margin-left: 20rpx;
 			}
 			.apply-btn{
-				font-size: $global-font-size-sm;
-				height: 48rpx;
-				margin-left: 20rpx;
+				position: absolute;
+				top: 50%;
+				right: 0;
+				transform: translateY(-50%);
+				height: 50rpx;
+				width: 156rpx;
 			}
+			.right-text{
+				position: absolute;
+				top: 50%;
+				right: 0;
+				transform: translateY(-50%);
+				color: #666666;
+			}
+		}
+		.item-card:last-child{
+			border: none;
 		}
 	}
 </style>

style/common.scss

@@ -19,7 +19,7 @@ view{
 
 /* 卡片列表样式 */
 .global-list-card{
-    border: 1px solid rgba(112, 112, 112, 0.2);
+    border: 1px solid rgba(112, 112, 112, 0.05);
     box-shadow: 3rpx 3rpx 12rpx rgba(161, 161, 161, 0.14);
     border-radius: 16rpx;
     overflow: hidden;