149 lines
4.2 KiB
Vue
149 lines
4.2 KiB
Vue
<template>
|
|
<view style="position: relative;">
|
|
<view class="customer_nav_bar">
|
|
<!-- 这里是状态栏 -->
|
|
</view>
|
|
<image class="hdbg" :src="getCdnUrl(`mine/hdbg.png`)"/>
|
|
|
|
<view class="pg-container">
|
|
|
|
<view class="com-jianju" style="margin-top: 30rpx;">
|
|
<u-row align="center" >
|
|
<u-col span="11">
|
|
<u-row>
|
|
<u-avatar size="120"></u-avatar>
|
|
<u-col custom-style="padding-left: 24rpx;">
|
|
<u-text text="张三" color="#fff" :bold="true" size="36"></u-text>
|
|
<u-text margin="10rpx 0 0 0" text="13712345678" color="#fff" size="26"></u-text>
|
|
</u-col>
|
|
</u-row>
|
|
</u-col>
|
|
<u-col span="1" align="end">
|
|
<image style="height: 32rpx;width: 32rpx;" :src="getCdnUrl(`mine/right.png`)"/>
|
|
</u-col>
|
|
</u-row>
|
|
</view>
|
|
|
|
|
|
<view class="com-jianju" style="margin-top: 50rpx;">
|
|
<u-row justify="between">
|
|
<u-col v-for="(mbItem, mIndex) in mainBtnlist" span="5.8"
|
|
customStyle="background: linear-gradient(0deg, #1D1818 0%, #0E0708 100%);border-radius: 20rpx;padding: 30rpx;"
|
|
>
|
|
<u-row justify="center">
|
|
<image mode="aspectFit" style="width: 92rpx;height: 76rpx;" :src="mbItem.icon"/>
|
|
<view style="margin-left: 22rpx;">
|
|
<u-text size="28rpx" color="#fff" :bold="true" :text="mbItem.title"></u-text>
|
|
<u-text size="24rpx" color="#999" margin= "15rpx 0 0 0" :text="mbItem.subTitle"></u-text>
|
|
</view>
|
|
</u-row>
|
|
</u-col>
|
|
</u-row>
|
|
</view>
|
|
|
|
<view class="com-jianju pb-block" style="margin-top: 30rpx;padding: 10rpx 0;">
|
|
<u-row justify="start" custom-style="flex-wrap: wrap;">
|
|
<u-col span="3" v-for="tlItem in toolBtnlist" align="center"
|
|
@click="handlePageRedirect(tlItem)"
|
|
>
|
|
<u-col align="center" justify="center" custom-style="padding: 20rpx 0;display: flex;">
|
|
<image :src="tlItem.icon" style="height: 66rpx;width: 66rpx" mode="aspectFit"/>
|
|
<view style="font-size: 24rpx;margin-top: 20rpx;">{{tlItem.title}}</view>
|
|
</u-col>
|
|
</u-col>
|
|
</u-row>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import getCdnUrl from "@/common/getCdnUrl"
|
|
import { goto } from "@/common/untool"
|
|
export default {
|
|
props: {
|
|
// hasLeftWin: {
|
|
// type: Boolean
|
|
// }
|
|
},
|
|
data() {
|
|
return {
|
|
mainBtnlist: [
|
|
{ title: '186单', subTitle: "寄件", icon: getCdnUrl(`mine/jijian.png`), url: '' },
|
|
{ title: '186单', subTitle: "收件", icon: getCdnUrl(`mine/shjian.png`), url: '' }
|
|
],
|
|
toolBtnlist: [
|
|
{ title: '运单列表', subTitle: "", icon: getCdnUrl(`mine/ydlib.png`), url: 'tabBar/search/search' },
|
|
{ title: '进仓单', subTitle: "", icon: getCdnUrl(`mine/jcdan.png`), url: '' },
|
|
{ title: '协议', subTitle: "", icon: getCdnUrl(`mine/xieyi.png`), url: '' },
|
|
{ title: '账单查询', subTitle: "", icon: getCdnUrl(`mine/zhdancha.png`), url: 'bill/list' },
|
|
{ title: '地址簿', subTitle: "", icon: getCdnUrl(`mine/dizhi.png`), url: 'address/list' },
|
|
{ title: '快件查询', subTitle: "", icon: getCdnUrl(`mine/kjcha.png`), url: '' },
|
|
{ title: '投诉建议', subTitle: "", icon: getCdnUrl(`mine/tousu.png`), url: 'complaint/complaint' },
|
|
{ title: '实名填写', subTitle: "", icon: getCdnUrl(`mine/shiming.png`), url: 'user/certification' }
|
|
]
|
|
}
|
|
},
|
|
onShareAppMessage() {
|
|
return {
|
|
title: '探路物流 速运全球',
|
|
// path: 'TODO'
|
|
}
|
|
},
|
|
methods: {
|
|
getCdnUrl,
|
|
handlePageRedirect(item) {
|
|
item.url && goto(item.url)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '@/common/uni-nvue.scss';
|
|
</style>
|
|
<style scoped lang="scss">
|
|
page{
|
|
background-color: #F6F6F6;
|
|
}
|
|
.hdbg{
|
|
position: absolute;
|
|
height: 636rpx;
|
|
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;
|
|
}
|
|
.fjhw{
|
|
margin-top: 20rpx;
|
|
height: 162rpx;
|
|
width: 328rpx;
|
|
}
|
|
}
|
|
|
|
.pb-block{
|
|
background: #FFF;
|
|
border-radius: 20px;
|
|
}
|
|
</style>
|