304 lines
8.2 KiB
Vue
304 lines
8.2 KiB
Vue
<template>
|
|
<tpx-page>
|
|
<view style="position: relative;background-color: #fff;">
|
|
<view class="customer_nav_bar">
|
|
<!-- 这里是状态栏 -->
|
|
</view>
|
|
<image class="hdbg" :src="getCdnUrl(`home/hdbg.png`)"/>
|
|
|
|
<view class="pg-container">
|
|
|
|
<view class="com-jianju" style="margin-top: 10rpx;">
|
|
<u-row align="center" >
|
|
<u-col @click="goto(`tabBar/mine/mine`)" span="11">
|
|
<u-row>
|
|
<u-avatar size="66" :src="userInfo.avatar"></u-avatar>
|
|
<u-text margin="0 0 0 16rpx" :text="userInfo.nickName" color="#fff" size="24"></u-text>
|
|
</u-row>
|
|
</u-col>
|
|
<u-col span="1" align="end">
|
|
<image style="height: 36rpx;width: 44rpx;" :src="getCdnUrl(`home/saoma.png`)"/>
|
|
</u-col>
|
|
</u-row>
|
|
</view>
|
|
|
|
<view class="header com-jianju">
|
|
<u-row justify="between">
|
|
<u-col span="5">
|
|
<u-text size="40" :bold="true" text="香港服装专线" color="#fff"></u-text>
|
|
<button type="primary" class="btn-ljyy">了解详情</button>
|
|
</u-col>
|
|
<image class="fjhw" :src="getCdnUrl(`home/huowu.png`)"/>
|
|
</u-row>
|
|
</view>
|
|
|
|
|
|
<view class="pbody">
|
|
|
|
<u-row justify="center" align="center">
|
|
<u-col v-for="(tjItem, ijIndex) in tjList" span="3" align="center"
|
|
:custom-style="'border-right: 2rpx solid #E8E8E8;' + (ijIndex+1 == tjList.length ?'border-right:0;': '')"
|
|
@click="goto(tjItem.url)"
|
|
>
|
|
<u-text align="center" color="#B12D29" :bold="true" size="36rpx" :text="tjItem.value"></u-text>
|
|
<u-text align="center" color="#666" size="24" :text="tjItem.title"></u-text>
|
|
</u-col>
|
|
</u-row>
|
|
|
|
<view v-if="staticDataList.length > 0" class="com-jianju btnlist1">
|
|
<u-row>
|
|
<u-col v-for="(mbItem, mIndex) in staticDataList" :span="6"
|
|
:custom-style="'border-right: 2rpx solid rgba(255,255,255,0.5);' + (mIndex+1 == staticDataList.length ?'border-right:0;': '')"
|
|
>
|
|
<u-row align="center" justify="center" @click="goto(mbItem.url)">
|
|
<image mode="aspectFit" style="width: 92rpx;height: 76rpx;" :src="mbItem.icon"/>
|
|
<view class="neirong">
|
|
<u-text size="24rpx" color="#fff" :text="mbItem.title"></u-text>
|
|
<u-text size="28rpx" color="#fff" :bold="true" margin= "15rpx 0 0 0" :text="mbItem.subTitle"></u-text>
|
|
</view>
|
|
</u-row>
|
|
</u-col>
|
|
</u-row>
|
|
</view>
|
|
|
|
<view class="nours com-jianju">
|
|
<u-row justify="between">
|
|
<u-col span="11">
|
|
<u-row>
|
|
<image style="height: 30rpx;width:30rpx" :src="getCdnUrl(`home/laba.png`)"/>
|
|
<image style="height: 24rpx; width: 110rpx;margin-left: 10rpx;" :src="getCdnUrl(`home/ggchxun.png`)"/>
|
|
|
|
<u-notice-bar :text="noticeList" @click="handleNoticeClick" icon=""
|
|
direction="column" speed="250" bgColor="#F6F6F6" duration="3000"
|
|
fontSize="26" color="#000"
|
|
></u-notice-bar>
|
|
|
|
</u-row>
|
|
</u-col>
|
|
<u-icon name="arrow-right" size="20"></u-icon>
|
|
</u-row>
|
|
</view>
|
|
|
|
<view class="com-jianju">
|
|
<u-text :bold="true" size="32" color="#333" margin="40rpx 0 0 0" text="网点扫描"></u-text>
|
|
</view>
|
|
<view class="btnlist2 com-jianju">
|
|
<u-row justify="start" gutter="18" custom-style="flex-wrap: wrap;">
|
|
<u-col v-for="tlItem in toolBtnlist" span="3" @click="goto(tlItem.url)">
|
|
<view class="dlb-item">
|
|
<image :src="tlItem.icon" style="height: 46rpx;width: 46rpx" mode="aspectFit"/>
|
|
<view class="pt-20 font-26">{{tlItem.title}}</view>
|
|
</view>
|
|
</u-col>
|
|
</u-row>
|
|
<view v-if="toolBtnlist.length == 0">
|
|
<tpx-empty size="sm"></tpx-empty>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<tpx-dialog v-model:show="noticeDetailDialog.show" title="公告详情" type="type-dialog">
|
|
<view style="min-height: 100rpx;width: 620rpx; max-height:calc(75vh);overflow: auto;">
|
|
<rich-text :nodes="noticeDetailDialog.content"></rich-text>
|
|
</view>
|
|
</tpx-dialog>
|
|
</tpx-page>
|
|
</template>
|
|
<script>
|
|
import { dealBtnMap } from "@/common/enum"
|
|
import * as apiService from "@/common/api"
|
|
import { getAuthList, authCodeEnum } from "@/common/authCode"
|
|
|
|
export default {
|
|
computed: {
|
|
userInfo() {
|
|
return this.$store.getters.userInfo
|
|
},
|
|
tjList(){
|
|
let { orderStat } = this.staticInfo
|
|
let list = [
|
|
{ title: '未接单', value: orderStat.waitTakeNum, key: "", url: 'tabBar/order/order?waybillStatType=1' },
|
|
{ title: '已接收', value: orderStat.takeNum, key: "", url: 'tabBar/order/order?waybillStatType=2' },
|
|
{ title: '派送中', value: orderStat.dispNum, key: "" },
|
|
{ title: '已签收', value: orderStat.signedNum, key: "" }
|
|
]
|
|
return list
|
|
},
|
|
staticDataList(){
|
|
let { commStat } = this.staticInfo
|
|
let list = [
|
|
{ title: '计提预估', subTitle: commStat.estMoney, icon: this.getCdnUrl(`home/jityugu.png`), url: '', code: authCodeEnum.jiTiYuGu },
|
|
{ title: '待回款', subTitle: commStat.waitPay, icon: this.getCdnUrl(`home/daihuikuan.png`), url: 'bill/list', code: authCodeEnum.daiHuiKuan }
|
|
]
|
|
list = getAuthList({ list, _thisPage: this })
|
|
return list
|
|
},
|
|
toolBtnlist(){
|
|
let list = [
|
|
{ ...dealBtnMap.lanShou },
|
|
{ ...dealBtnMap.shouHuo },
|
|
{ ...dealBtnMap.faJianScan },
|
|
{ ...dealBtnMap.daoJianScan },
|
|
{ ...dealBtnMap.yunDanLuRu },
|
|
{ ...dealBtnMap.qianShouScan },
|
|
{...dealBtnMap.fenBoScan},
|
|
{...dealBtnMap.paiJianScan},
|
|
{...dealBtnMap.yunDanXiuGai},
|
|
{ ...dealBtnMap.baoJiaShiSuan },
|
|
{ ...dealBtnMap.wenTiJian },
|
|
{ ...dealBtnMap.daoPaiScan },
|
|
{ ...dealBtnMap.woDeErWeiMa },
|
|
{ ...dealBtnMap.mianDanDayin },
|
|
{ ...dealBtnMap.kuaiJianGenZong }
|
|
]
|
|
list = getAuthList({ list, _thisPage: this })
|
|
return list
|
|
}
|
|
},
|
|
props: {
|
|
// hasLeftWin: {
|
|
// type: Boolean
|
|
// }
|
|
},
|
|
data() {
|
|
return {
|
|
noticeList: [],
|
|
noticeRes: [],
|
|
noticeDetailDialog: {
|
|
show: false,
|
|
content: ''
|
|
},
|
|
staticInfo: {
|
|
commStat: {},
|
|
orderStat: {},
|
|
},
|
|
}
|
|
},
|
|
onShareAppMessage() {
|
|
return {
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.initData()
|
|
},
|
|
onShow(){
|
|
this.initData()
|
|
},
|
|
methods: {
|
|
async initData(){
|
|
this.getLatestNotices()
|
|
this.getAppHomeStatData()
|
|
},
|
|
async getLatestNotices(){
|
|
let res = await apiService.getLatestNotices()
|
|
this.noticeRes = res.rows
|
|
this.noticeList = this.noticeRes.map(t=> t.noticeTitle)
|
|
},
|
|
async getAppHomeStatData(){
|
|
let res = await apiService.getAppHomeStatData()
|
|
this.staticInfo = res.data
|
|
},
|
|
handleNoticeClick(index) {
|
|
let noticeContent = this.noticeRes[index].noticeContent
|
|
this.noticeDetailDialog = {
|
|
show: true,
|
|
content: noticeContent
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '@/common/uni-nvue.scss';
|
|
</style>
|
|
<style scoped lang="scss">
|
|
.com-jianju {
|
|
margin-left: 28rpx;
|
|
margin-right: 28rpx;
|
|
}
|
|
.hdbg{
|
|
position: absolute;
|
|
height: 400rpx;
|
|
top: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
}
|
|
.pg-container{
|
|
position: relative;
|
|
z-index: 2;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.header{
|
|
color: #FFF;
|
|
.btn-ljyy{
|
|
margin-left: 0;
|
|
width: 144rpx;
|
|
margin-top: 26rpx;
|
|
box-sizing: content-box;
|
|
background: #FFF;
|
|
border-radius: 21rpx;
|
|
font-size: 24rpx;
|
|
color: #B12D29;
|
|
padding: 8rpx 0;
|
|
text-align: center;
|
|
line-height: normal;
|
|
border: 0;
|
|
&::after{
|
|
border: 0;
|
|
}
|
|
}
|
|
.fjhw{
|
|
margin-top: 20rpx;
|
|
height: 162rpx;
|
|
width: 328rpx;
|
|
}
|
|
}
|
|
|
|
.pbody{
|
|
background: #FFF;
|
|
border-radius: 30rpx;
|
|
padding-top: 40rpx;
|
|
padding-bottom: 80rpx;
|
|
|
|
.tj-tl2{
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
.btnlist1 {
|
|
margin-top: 38rpx;
|
|
background: linear-gradient(0deg, #1D1818 0%, #0E0708 100%);
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
.neirong{
|
|
margin-left: 22rpx;
|
|
}
|
|
}
|
|
|
|
.nours {
|
|
margin-top: 40rpx;
|
|
background: #F6F6F6;
|
|
border-radius: 20rpx;
|
|
padding: 18rpx 22rpx;
|
|
}
|
|
|
|
.btnlist2{
|
|
margin-top: 40rpx;
|
|
}
|
|
}
|
|
.dlb-item{
|
|
margin-top:20rpx;
|
|
flex-direction: column;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 2rpx solid #F6F6F6;
|
|
border-radius: 16rpx;
|
|
height: 140rpx;
|
|
}
|
|
</style>
|