193 lines
6.4 KiB
Vue
193 lines
6.4 KiB
Vue
<template>
|
|
<view class="li-mine-page">
|
|
<SafeAreaTop />
|
|
<view class="li-flex li-justify-between li-items-center li-w-94% li-mx-auto li-mt-60">
|
|
<view class="li-flex li-items-center">
|
|
<view class="li-flex li-items-end li-mr-20">
|
|
<image class="li-w-100 li-h-100 li-rd-50% border-4-white" :src="user_info.avatar" mode="">
|
|
</image>
|
|
</view>
|
|
<view class="li-flex li-flex-col">
|
|
<text class="li-text-38 li-text-#000000 li-mb-2">{{user_info.realname}}</text>
|
|
<text class="li-text-24 li-text-#b1bbc7">{{user_info.owner.name}}</text>
|
|
</view>
|
|
</view>
|
|
<image class="li-w-240 li-h-240" :src="mine_back" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="li-w-70% li-ml-50 li-flex li-justify-between li-items-center">
|
|
<view class="li-flex li-flex-col li-justify-center li-items-center" v-for="(item,index) in incomeList"
|
|
:key="index">
|
|
<text class="li-text-#b1bbc7 li-text-24">{{item.title}}</text>
|
|
<text class="li-text-#010B3E li-text-34 li-mt-6 li-font-bold">{{item.number}}</text>
|
|
</view>
|
|
</view>
|
|
<!-- card -->
|
|
<view
|
|
class="li-w-94% li-mx-auto li-flex li-justify-between li-items-center li-py-20 !li-rd-tl-30 !li-rd-tr-30 li-mt-20"
|
|
:style="{backgroundImage:`url(${card_back})`,backgroundSize:'cover',backgroundPosition:'center',borderRadius:'15rpx'}">
|
|
<view class="li-text-#FFFFFF li-flex li-flex-col li-justify-start li-ml-50">
|
|
<text class="li-text-#F8C883 li-text-24">账户余额</text>
|
|
<view class="li-flex li-items-center li-pb-14">
|
|
<text class="li-text-#F2F7FD li-font-bold li-text-32">1120.00</text>
|
|
<text class="li-text-#BBBDDA li-text-20 li-ml-4 li-pt-8">元</text>
|
|
</view>
|
|
</view>
|
|
<view class="li-mr-50">
|
|
<wd-button custom-class="custom-shadow" size="small"> 提现 </wd-button>
|
|
</view>
|
|
</view>
|
|
<!-- 宫格 -->
|
|
<view class="li-w-94% li-mx-auto li-grid-bg li-h-250 li-rd-20 li-mt-26">
|
|
<view class="li-flex li-justify-between li-items-center li-pt-20 li-mx-20">
|
|
<text class="li-text-#19171B li-text-32">待处理工单</text>
|
|
<view class="li-text-#B2B2B2 li-flex li-items-center li-text-24">查看更多<text
|
|
class="ri-arrow-right-s-line"></text></view>
|
|
</view>
|
|
<view class="li-flex li-justify-between li-items-center li-mx-40 li-mt-30">
|
|
<view class="li-flex li-flex-col li-justify-center li-items-center" v-for="(item,index) in workList"
|
|
:key="index">
|
|
<wd-badge :hidden="item.number > 0 ? false:true" :modelValue="item.number" top='5' right="-2"
|
|
:max='99'>
|
|
<image class="li-w-60 li-h-60" :src="item.icon" mode=""></image>
|
|
</wd-badge>
|
|
<text class="li-text-#706e70 li-text-26">{{item.title}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="li-w-94% li-mx-auto li-mt-26 li-bg-white li-rd-20 li-pb-20">
|
|
<view class="li-flex li-justify-between li-items-center li-pt-20 li-mx-20 li-pb-10">
|
|
<text class="li-text-#19171B li-text-32">常用功能</text>
|
|
</view>
|
|
<wd-grid class="" :column="4" :clickable="true">
|
|
<wd-grid-item use-icon-slot use-text-slot v-for="(item,index) in frequentlyList" :key="index">
|
|
<template #icon>
|
|
<wd-badge :hidden="item.number > 0 ? false:true" :modelValue="item.number" top='5' right="-2"
|
|
:max='99'>
|
|
<image class="li-w-50 li-h-50" :src="item.icon" mode=""></image>
|
|
</wd-badge>
|
|
</template>
|
|
<template #text>
|
|
<text class="li-text-#706e70 li-text-24 li-mt-20">{{item.title}}</text>
|
|
</template>
|
|
</wd-grid-item>
|
|
</wd-grid>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import SafeAreaTop from '@/components/SafeAreaTop/index.vue'
|
|
import { onShow, onReachBottom, Uni } from "@dcloudio/uni-app"
|
|
import { ref } from "vue"
|
|
declare const uni : Uni
|
|
|
|
const user_info = ref({
|
|
"realname": "里派",
|
|
"avatar": "/static/m_avatar.png",
|
|
"owner": {
|
|
"name": "里派（杭州）网络科技有限公司"
|
|
}
|
|
})
|
|
|
|
const mine_back = uni.$globalData?.RESOURCE_URL + 'mine/mine-back1.png'
|
|
const card_back = uni.$globalData?.RESOURCE_URL + 'mine/card-back.png'
|
|
|
|
const incomeList = ref([
|
|
{
|
|
title: '今日收益',
|
|
number: '60.00'
|
|
}, {
|
|
title: '本月收益',
|
|
number: '300.00'
|
|
}, {
|
|
title: '累计收益',
|
|
number: '6890.00'
|
|
}
|
|
])
|
|
const workList = ref([
|
|
{
|
|
title: '待入库',
|
|
number: 12,
|
|
icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/chuku.png'
|
|
}, {
|
|
title: '待配送',
|
|
number: 11,
|
|
icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/peisong.png'
|
|
}, {
|
|
title: '待报修',
|
|
number: 0,
|
|
icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/baoxiu.png'
|
|
}, {
|
|
title: '待催缴',
|
|
number: 0,
|
|
icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/cuijiao.png'
|
|
}
|
|
])
|
|
const frequentlyList = ref([
|
|
{
|
|
title: '投诉管理',
|
|
number: 0,
|
|
icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/tousu.png'
|
|
}, {
|
|
title: '巡检任务',
|
|
number: 11,
|
|
icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/xunjian.png'
|
|
}, {
|
|
title: '资产盘点',
|
|
number: 0,
|
|
icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/pandian.png'
|
|
}, {
|
|
title: '门禁申请',
|
|
number: 0,
|
|
icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/menjin.png'
|
|
},
|
|
{
|
|
title: '设置',
|
|
number: 0,
|
|
icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/shezhi.png'
|
|
}
|
|
])
|
|
|
|
onShow(async () => {
|
|
const userInfo = await uni.$store.state.userInfos
|
|
userInfo.realname && (user_info.value.realname = userInfo.realname)
|
|
userInfo.avatar && (user_info.value.avatar = userInfo.avatar)
|
|
userInfo.owner.name && (user_info.value.owner.name = userInfo.owner.name)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.li-mine-page {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background: linear-gradient(to bottom,
|
|
rgba(197, 224, 253, 1.0) 0%,
|
|
rgba(197, 224, 253, 0.8) 20%,
|
|
rgba(248, 248, 248, 1.0) 40%,
|
|
rgba(248, 248, 248, 1.0) 60%,
|
|
rgba(242, 243, 247, 1.0) 80%,
|
|
rgba(242, 243, 247, 1.0) 100%);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.li-grid-bg {
|
|
background: linear-gradient(to bottom,
|
|
rgba(197, 224, 253, 0.2) 0%,
|
|
rgba(197, 224, 253, 0.1) 10%,
|
|
rgba(255, 255, 255, 1.0) 40%,
|
|
rgba(255, 255, 255, 1.0) 60%,
|
|
rgba(255, 255, 255, 1.0) 80%,
|
|
rgba(255, 255, 255, 1.0) 100%);
|
|
}
|
|
|
|
.custom-shadow {
|
|
color: #764914 !important;
|
|
background: linear-gradient(to right, #f9dbb7, #f9c580) !important;
|
|
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
|
}
|
|
|
|
::v-deep .wd-badge__content {
|
|
border: none !important;
|
|
}
|
|
</style> |