16 changed files with 417 additions and 245 deletions
			
			
		@ -1,52 +1,52 @@
					 | 
				
			||||
<template> | 
				
			||||
	<view class="container"> | 
				
			||||
		<s-header :title="title" :isTab="isTab" :isCustom="isCustom"> | 
				
			||||
			<slot name="header"></slot> | 
				
			||||
		</s-header> | 
				
			||||
		<view class="view"> | 
				
			||||
			<view class="inner"> | 
				
			||||
				<slot></slot> | 
				
			||||
			</view> | 
				
			||||
		</view> | 
				
			||||
		<s-tabber v-if="isTab" :selected="selected" /> | 
				
			||||
	</view> | 
				
			||||
  <view class="container"> | 
				
			||||
    <s-header :title="title" :isTab="isTab" :isCustom="isCustom" @goback="$emit('goback')"> | 
				
			||||
      <slot name="header"></slot> | 
				
			||||
    </s-header> | 
				
			||||
    <view class="view"> | 
				
			||||
      <view class="inner"> | 
				
			||||
        <slot></slot> | 
				
			||||
      </view> | 
				
			||||
    </view> | 
				
			||||
    <s-tabber v-if="isTab" :selected="selected" /> | 
				
			||||
  </view> | 
				
			||||
</template> | 
				
			||||
 | 
				
			||||
<script> | 
				
			||||
export default { | 
				
			||||
	name: 'cs-page', | 
				
			||||
	props: { | 
				
			||||
		selected: Number, | 
				
			||||
		title: String, | 
				
			||||
		isTab: { | 
				
			||||
			type: Boolean, | 
				
			||||
			default: false | 
				
			||||
		}, | 
				
			||||
		isCustom: { | 
				
			||||
			type: Boolean, | 
				
			||||
			default: false | 
				
			||||
		} | 
				
			||||
	}, | 
				
			||||
	data() { | 
				
			||||
		return {} | 
				
			||||
	} | 
				
			||||
  name: 'cs-page', | 
				
			||||
  props: { | 
				
			||||
    selected: Number, | 
				
			||||
    title: String, | 
				
			||||
    isTab: { | 
				
			||||
      type: Boolean, | 
				
			||||
      default: false | 
				
			||||
    }, | 
				
			||||
    isCustom: { | 
				
			||||
      type: Boolean, | 
				
			||||
      default: false | 
				
			||||
    } | 
				
			||||
  }, | 
				
			||||
  data() { | 
				
			||||
    return {} | 
				
			||||
  } | 
				
			||||
} | 
				
			||||
</script> | 
				
			||||
 | 
				
			||||
<style lang="scss" scoped> | 
				
			||||
.container { | 
				
			||||
	display: grid; | 
				
			||||
	grid-template-columns: 1fr; | 
				
			||||
	grid-template-rows: auto 1fr auto; | 
				
			||||
	height: 100vh; | 
				
			||||
	width: 100vw; | 
				
			||||
	display: grid; | 
				
			||||
	.view { | 
				
			||||
		position: relative; | 
				
			||||
		.inner { | 
				
			||||
			position: absolute; | 
				
			||||
			inset: 0; | 
				
			||||
		} | 
				
			||||
	} | 
				
			||||
  display: grid; | 
				
			||||
  grid-template-columns: 1fr; | 
				
			||||
  grid-template-rows: auto 1fr auto; | 
				
			||||
  height: 100vh; | 
				
			||||
  width: 100vw; | 
				
			||||
  display: grid; | 
				
			||||
  .view { | 
				
			||||
    position: relative; | 
				
			||||
    .inner { | 
				
			||||
      position: absolute; | 
				
			||||
      inset: 0; | 
				
			||||
    } | 
				
			||||
  } | 
				
			||||
} | 
				
			||||
</style> | 
				
			||||
					 | 
				
			||||
@ -1,106 +1,133 @@
					 | 
				
			||||
<template> | 
				
			||||
	<cs-page :selected="4" isTab isCustom> | 
				
			||||
		<template #header> | 
				
			||||
			<view class="header"> | 
				
			||||
				<u--image src="/static/favicon.png" width="20px" height="20px" mode="aspectFit"></u--image> | 
				
			||||
				<view class="title">个人中心</view> | 
				
			||||
			</view> | 
				
			||||
		</template> | 
				
			||||
		<scroll-view class="owner-container" scroll-y> | 
				
			||||
			<view class="section wd-flex wd-flex-row wd-justify-between wd-items-center" @tap="edit"> | 
				
			||||
				<view class="wd-flex wd-flex-col" style="gap: 4px"> | 
				
			||||
					<view class="wd-flex wd-flex-row" style="gap: 8px"> | 
				
			||||
						<text class="wd-font-800">姓名</text> | 
				
			||||
						<u-tag text="部门" shape="circle" bgColor="#000" borderColor="#000" size="mini"></u-tag> | 
				
			||||
					</view> | 
				
			||||
					<view class="">手机号</view> | 
				
			||||
				</view> | 
				
			||||
				<view class="wd-flex wd-flex-row" style="gap: 10px"> | 
				
			||||
					<u-avatar src="/static/images/avatar.jpg"></u-avatar> | 
				
			||||
					<u-icon name="arrow-right"></u-icon> | 
				
			||||
				</view> | 
				
			||||
			</view> | 
				
			||||
			<view class="section wd-flex wd-flex-row wd-justify-between"> | 
				
			||||
				<view class="wd-flex wd-flex-row" style="gap: 8px"> | 
				
			||||
					<u--image src="/static/images/owner/message.png" width="20px" height="20px" mode="aspectFit"></u--image> | 
				
			||||
					<text class="wd-font-800">消息通知</text> | 
				
			||||
				</view> | 
				
			||||
				<view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px"> | 
				
			||||
					<u-count-to :startVal="30" :endVal="500" fontSize="14px" separator=","></u-count-to> | 
				
			||||
					<u-icon name="arrow-right"></u-icon> | 
				
			||||
				</view> | 
				
			||||
			</view> | 
				
			||||
			<view class="section wd-flex wd-flex-row wd-justify-between"> | 
				
			||||
				<view class="wd-flex wd-flex-row" style="gap: 8px"> | 
				
			||||
					<u--image src="/static/images/owner/edit.png" width="20px" height="20px" mode="aspectFit"></u--image> | 
				
			||||
					<text class="wd-font-800">执法记录</text> | 
				
			||||
				</view> | 
				
			||||
				<view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px"> | 
				
			||||
					<u-count-to :startVal="30" :endVal="500" fontSize="14px" separator=","></u-count-to> | 
				
			||||
					<u-icon name="arrow-right"></u-icon> | 
				
			||||
				</view> | 
				
			||||
			</view> | 
				
			||||
			<view class="section wd-flex wd-flex-row wd-justify-between"> | 
				
			||||
				<view class="wd-flex wd-flex-row" style="gap: 8px"> | 
				
			||||
					<u--image src="/static/images/owner/list.png" width="20px" height="20px" mode="aspectFit"></u--image> | 
				
			||||
					<text class="wd-font-800">政策法规</text> | 
				
			||||
				</view> | 
				
			||||
				<view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px"> | 
				
			||||
					<u-count-to :startVal="30" :endVal="500" fontSize="14px" separator=","></u-count-to> | 
				
			||||
					<u-icon name="arrow-right"></u-icon> | 
				
			||||
				</view> | 
				
			||||
			</view> | 
				
			||||
			<view class="section wd-flex wd-flex-row wd-justify-between"> | 
				
			||||
				<view class="wd-flex wd-flex-row" style="gap: 8px"> | 
				
			||||
					<u--image src="/static/images/owner/phone.png" width="20px" height="20px" mode="aspectFit"></u--image> | 
				
			||||
					<text class="wd-font-800">内部专线</text> | 
				
			||||
				</view> | 
				
			||||
				<view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px"> | 
				
			||||
					<text>点击呼叫</text> | 
				
			||||
					<u-icon name="arrow-right"></u-icon> | 
				
			||||
				</view> | 
				
			||||
			</view> | 
				
			||||
		</scroll-view> | 
				
			||||
	</cs-page> | 
				
			||||
  <cs-page :selected="4" isTab isCustom> | 
				
			||||
    <template #header> | 
				
			||||
      <view class="header"> | 
				
			||||
        <u--image src="/static/favicon.png" width="20px" height="20px" mode="aspectFit"></u--image> | 
				
			||||
        <view class="title">个人中心</view> | 
				
			||||
      </view> | 
				
			||||
    </template> | 
				
			||||
    <scroll-view class="owner-container" scroll-y> | 
				
			||||
      <view class="section wd-flex wd-flex-row wd-justify-between wd-items-center" @tap="edit"> | 
				
			||||
        <view class="wd-flex wd-flex-col" style="gap: 4px"> | 
				
			||||
          <view class="wd-flex wd-flex-row" style="gap: 8px"> | 
				
			||||
            <text class="wd-font-800">{{ user.realName }}</text> | 
				
			||||
            <u-tag :text="user.dept.name" shape="circle" bgColor="#000" borderColor="#000" size="mini"></u-tag> | 
				
			||||
          </view> | 
				
			||||
          <view class="moblie">{{ user.mobile }}</view> | 
				
			||||
        </view> | 
				
			||||
        <view class="wd-flex wd-flex-row" style="gap: 10px"> | 
				
			||||
          <u-avatar :src="user.avatar"></u-avatar> | 
				
			||||
          <u-icon name="arrow-right"></u-icon> | 
				
			||||
        </view> | 
				
			||||
      </view> | 
				
			||||
      <view class="section wd-flex wd-flex-row wd-justify-between"> | 
				
			||||
        <view class="wd-flex wd-flex-row" style="gap: 8px"> | 
				
			||||
          <u--image src="/static/images/owner/message.png" width="20px" height="20px" mode="aspectFit"></u--image> | 
				
			||||
          <text class="wd-font-800">消息通知</text> | 
				
			||||
        </view> | 
				
			||||
        <view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px"> | 
				
			||||
          <u-count-to :startVal="30" :endVal="500" fontSize="14px" separator=","></u-count-to> | 
				
			||||
          <u-icon name="arrow-right"></u-icon> | 
				
			||||
        </view> | 
				
			||||
      </view> | 
				
			||||
      <view class="section wd-flex wd-flex-row wd-justify-between"> | 
				
			||||
        <view class="wd-flex wd-flex-row" style="gap: 8px"> | 
				
			||||
          <u--image src="/static/images/owner/edit.png" width="20px" height="20px" mode="aspectFit"></u--image> | 
				
			||||
          <text class="wd-font-800">执法记录</text> | 
				
			||||
        </view> | 
				
			||||
        <view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px"> | 
				
			||||
          <u-count-to :startVal="30" :endVal="500" fontSize="14px" separator=","></u-count-to> | 
				
			||||
          <u-icon name="arrow-right"></u-icon> | 
				
			||||
        </view> | 
				
			||||
      </view> | 
				
			||||
      <view class="section wd-flex wd-flex-row wd-justify-between"> | 
				
			||||
        <view class="wd-flex wd-flex-row" style="gap: 8px"> | 
				
			||||
          <u--image src="/static/images/owner/list.png" width="20px" height="20px" mode="aspectFit"></u--image> | 
				
			||||
          <text class="wd-font-800">政策法规</text> | 
				
			||||
        </view> | 
				
			||||
        <view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px"> | 
				
			||||
          <u-count-to :startVal="30" :endVal="500" fontSize="14px" separator=","></u-count-to> | 
				
			||||
          <u-icon name="arrow-right"></u-icon> | 
				
			||||
        </view> | 
				
			||||
      </view> | 
				
			||||
      <view class="section wd-flex wd-flex-row wd-justify-between" @click="invite"> | 
				
			||||
        <view class="wd-flex wd-flex-row" style="gap: 8px"> | 
				
			||||
          <u--image src="/static/images/owner/phone.png" width="20px" height="20px" mode="aspectFit"></u--image> | 
				
			||||
          <text class="wd-font-800">企业入驻</text> | 
				
			||||
        </view> | 
				
			||||
        <view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px"> | 
				
			||||
          <u-icon name="arrow-right"></u-icon> | 
				
			||||
        </view> | 
				
			||||
      </view> | 
				
			||||
      <view class="section wd-flex wd-flex-row wd-justify-between"> | 
				
			||||
        <view class="wd-flex wd-flex-row" style="gap: 8px"> | 
				
			||||
          <u--image src="/static/images/owner/phone.png" width="20px" height="20px" mode="aspectFit"></u--image> | 
				
			||||
          <text class="wd-font-800">内部专线</text> | 
				
			||||
        </view> | 
				
			||||
        <view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px"> | 
				
			||||
          <text>点击呼叫</text> | 
				
			||||
          <u-icon name="arrow-right"></u-icon> | 
				
			||||
        </view> | 
				
			||||
      </view> | 
				
			||||
    </scroll-view> | 
				
			||||
  </cs-page> | 
				
			||||
</template> | 
				
			||||
 | 
				
			||||
<script> | 
				
			||||
import { mapGetters } from 'vuex' | 
				
			||||
import { getUserProfile } from '@/api/system/user.js' | 
				
			||||
export default { | 
				
			||||
	data() { | 
				
			||||
		return {} | 
				
			||||
	}, | 
				
			||||
	methods: { | 
				
			||||
		edit() { | 
				
			||||
			uni.navigateTo({ | 
				
			||||
				url: '/sub/owner/edit', | 
				
			||||
				fail: (err) => { | 
				
			||||
					console.log(err) | 
				
			||||
				} | 
				
			||||
			}) | 
				
			||||
		} | 
				
			||||
	} | 
				
			||||
  data() { | 
				
			||||
    return { | 
				
			||||
      user: {} | 
				
			||||
    } | 
				
			||||
  }, | 
				
			||||
  computed: {}, | 
				
			||||
  onShow() { | 
				
			||||
    this.init() | 
				
			||||
  }, | 
				
			||||
  methods: { | 
				
			||||
    init() { | 
				
			||||
      getUserProfile().then(res => { | 
				
			||||
        this.user = res.data | 
				
			||||
      }) | 
				
			||||
    }, | 
				
			||||
    edit() { | 
				
			||||
      uni.navigateTo({ | 
				
			||||
        url: '/sub/owner/edit' | 
				
			||||
      }) | 
				
			||||
    }, | 
				
			||||
    invite() { | 
				
			||||
      uni.navigateTo({ | 
				
			||||
        url: '/sub/owner/invite' | 
				
			||||
      }) | 
				
			||||
    } | 
				
			||||
  } | 
				
			||||
} | 
				
			||||
</script> | 
				
			||||
 | 
				
			||||
<style lang="scss" scoped> | 
				
			||||
.header { | 
				
			||||
	display: flex; | 
				
			||||
	flex-flow: row nowrap; | 
				
			||||
	gap: 10px; | 
				
			||||
	align-items: center; | 
				
			||||
	.title { | 
				
			||||
		font-size: 16px; | 
				
			||||
	} | 
				
			||||
  display: flex; | 
				
			||||
  flex-flow: row nowrap; | 
				
			||||
  gap: 10px; | 
				
			||||
  align-items: center; | 
				
			||||
  .title { | 
				
			||||
    font-size: 16px; | 
				
			||||
  } | 
				
			||||
} | 
				
			||||
.owner-container { | 
				
			||||
	padding: 10px; | 
				
			||||
	height: 100%; | 
				
			||||
	.section { | 
				
			||||
		border-radius: $cs-border-radius; | 
				
			||||
		background: #fff; | 
				
			||||
		box-shadow: 0 0 4px 2px $cs-shadow-color; | 
				
			||||
		margin-bottom: $cs-gap; | 
				
			||||
		padding: 24px; | 
				
			||||
	} | 
				
			||||
  padding: 10px; | 
				
			||||
  height: 100%; | 
				
			||||
  .section { | 
				
			||||
    border-radius: $cs-border-radius; | 
				
			||||
    background: #fff; | 
				
			||||
    box-shadow: 0 0 4px 2px $cs-shadow-color; | 
				
			||||
    margin-bottom: $cs-gap; | 
				
			||||
    padding: 24px; | 
				
			||||
  } | 
				
			||||
  .moblie { | 
				
			||||
    color: $uni-text-color-grey; | 
				
			||||
  } | 
				
			||||
} | 
				
			||||
</style> | 
				
			||||
					 | 
				
			||||
@ -1,6 +1,12 @@
					 | 
				
			||||
// global | 
				
			||||
@import "./global.scss"; | 
				
			||||
@import './global.scss'; | 
				
			||||
// color-ui | 
				
			||||
@import "@/static/scss/colorui.css"; | 
				
			||||
@import '@/static/scss/colorui.css'; | 
				
			||||
// iconfont | 
				
			||||
@import "@/static/font/iconfont.css"; | 
				
			||||
@import '@/static/font/iconfont.css'; | 
				
			||||
 | 
				
			||||
.icon-box { | 
				
			||||
  padding: 5px; | 
				
			||||
  border-radius: 50%; | 
				
			||||
  box-shadow: 0 0 4px 2px $cs-shadow-color; | 
				
			||||
} | 
				
			||||
					 | 
				
			||||
@ -1,8 +1,10 @@
					 | 
				
			||||
const getters = { | 
				
			||||
  token: state => state.user.token, | 
				
			||||
  avatar: state => state.user.avatar, | 
				
			||||
  name: state => state.user.name, | 
				
			||||
  roles: state => state.user.roles, | 
				
			||||
  permissions: state => state.user.permissions | 
				
			||||
	token: state => state.user.token, | 
				
			||||
	avatar: state => state.user.avatar, | 
				
			||||
	name: state => state.user.name, | 
				
			||||
	roles: state => state.user.roles, | 
				
			||||
	permissions: state => state.user.permissions, | 
				
			||||
	userId: state => state.user.id, | 
				
			||||
	phone: state => state.user.phone | 
				
			||||
} | 
				
			||||
export default getters | 
				
			||||
export default getters | 
				
			||||
@ -1,8 +1,10 @@
					 | 
				
			||||
const constant = { | 
				
			||||
   avatar: 'vuex_avatar', | 
				
			||||
   name: 'vuex_name', | 
				
			||||
   roles: 'vuex_roles', | 
				
			||||
   permissions: 'vuex_permissions' | 
				
			||||
 } | 
				
			||||
	avatar: 'vuex_avatar', | 
				
			||||
	name: 'vuex_name', | 
				
			||||
	roles: 'vuex_roles', | 
				
			||||
	permissions: 'vuex_permissions', | 
				
			||||
	userId: 'vuex_userId', | 
				
			||||
	phone: 'vuex_phone' | 
				
			||||
} | 
				
			||||
 | 
				
			||||
 export default constant | 
				
			||||
export default constant | 
				
			||||
					Loading…
					
					
				
		Reference in new issue