288 lines
8.4 KiB
Vue
288 lines
8.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 @click="toPages({type:'userInfo'})" 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?user_info?.avatar:'/static/m_avatar.png'" 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">0.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 @click="withdrawal" 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 @click="toPages({type:'all'})" 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" @click="toPages({type:item.type})">
|
|
<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"
|
|
@itemclick="toPages({type:item.type})">
|
|
<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>
|
|
<!-- 顶部提示条（成功/失败消息提示） -->
|
|
<wd-toast />
|
|
</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"
|
|
import { useToast } from '@/uni_modules/wot-design-uni'
|
|
import { userInfo } from '@/api/login'
|
|
const Toast = useToast()
|
|
declare const uni : Uni
|
|
|
|
const user_info = ref({})
|
|
|
|
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: 0,
|
|
icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/chuku.png',
|
|
type: 'warehousing',
|
|
}, {
|
|
title: '待配送',
|
|
number: 0,
|
|
icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/peisong.png',
|
|
type: 'my_order_F2',
|
|
}, {
|
|
title: '待报修',
|
|
number: 0,
|
|
icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/baoxiu.png',
|
|
type: 'my_order_F6',
|
|
}, {
|
|
title: '待催缴',
|
|
number: 0,
|
|
icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/cuijiao.png',
|
|
type: 'call'
|
|
}
|
|
])
|
|
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/pandian.png',
|
|
// type: 'protocol'
|
|
// },
|
|
{
|
|
title: '隐私政策',
|
|
number: 0,
|
|
icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/menjin.png',
|
|
type: 'privacy'
|
|
},
|
|
{
|
|
title: '设置',
|
|
number: 0,
|
|
icon: uni.$globalData?.RESOURCE_URL + 'mine/icon/shezhi.png',
|
|
type: 'setting'
|
|
}
|
|
])
|
|
|
|
const withdrawal = () => {
|
|
Toast.info('暂无余额')
|
|
|
|
}
|
|
|
|
|
|
|
|
const toPages = (item) => {
|
|
switch (item.type) {
|
|
case 'all':
|
|
// 查看更多工单
|
|
uni.navigateTo({
|
|
url: '/pagesA/my_order/list'
|
|
});
|
|
break;
|
|
case 'warehousing':
|
|
// 入库
|
|
uni.navigateTo({
|
|
url: '/pagesA/warehousing/index'
|
|
});
|
|
break;
|
|
case 'my_order_F2':
|
|
// 待配送
|
|
uni.navigateTo({
|
|
url: '/pagesA/my_order/list?type=1&status=1'
|
|
});
|
|
break;
|
|
case 'my_order_F6':
|
|
// 待维修
|
|
uni.navigateTo({
|
|
url: '/pagesA/my_order/list?type=2&status=1'
|
|
});
|
|
break;
|
|
case 'call':
|
|
// 入库
|
|
// uni.navigateTo({
|
|
// url: '/pagesB/call/index'
|
|
// });
|
|
Toast.info('暂无缴费记录')
|
|
break;
|
|
case 'protocol':
|
|
// 用户协议
|
|
uni.navigateTo({
|
|
url: '/pagesB/agreement/index?type=1'
|
|
});
|
|
break;
|
|
case 'privacy':
|
|
// 隐私政策
|
|
uni.navigateTo({
|
|
url: '/pagesB/agreement/index?type=2'
|
|
});
|
|
break;
|
|
case 'setting':
|
|
// 隐私政策
|
|
uni.navigateTo({
|
|
url: '/pagesB/setting/index'
|
|
});
|
|
break;
|
|
case 'userInfo':
|
|
// 隐私政策
|
|
uni.navigateTo({
|
|
url: '/pagesB/setting/editInfo'
|
|
});
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
const getUserInfo = async () => {
|
|
const res = await userInfo()
|
|
user_info.value = res.data
|
|
}
|
|
|
|
|
|
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)
|
|
|
|
getUserInfo()
|
|
})
|
|
</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> |