213 lines
6.8 KiB
Vue
213 lines
6.8 KiB
Vue
<template>
|
|
<tpx-page>
|
|
<view style="position: relative;background-color: #fff;">
|
|
<view class="customer_nav_bar">
|
|
<!-- 这里是状态栏 -->
|
|
</view>
|
|
<image class="hdbg" :src="getCdnUrl(`sdg/hdbg.png`)"/>
|
|
<view class="pg-container">
|
|
<view class="header" >
|
|
<u-text size="40" :bold="true" text="探路物流 速运全球" color="#fff"></u-text>
|
|
<u-text margin="22rpx 0 0 0" size="24" :bold="true" text="省钱，省时，省力" color="#fff"></u-text>
|
|
<!-- <button class="btn-ljyy" type="primary">立即预约</button> -->
|
|
<view style="height: 50rpx;"></view>
|
|
|
|
<view class="btnlist1">
|
|
<u-row>
|
|
<u-col v-for="(mbItem, mIndex) in mainBtnlist" span="6" align="center" @click="goto(mbItem.url)">
|
|
<view :class="'mb-item ' + (mIndex+1 == mainBtnlist.length ?'noborder': '') ">
|
|
<u-row align="center" justify="center">
|
|
<image class="tb1" style="width: 92rpx;height: 73rpx;" :src="mbItem.icon"/>
|
|
<view class="neirong">
|
|
<u-text size="32" :bold="true" color="#fff" :text="mbItem.title"></u-text>
|
|
<u-text size="22" margin="15rpx 0 0 0" color="#999" :text="mbItem.subTitle"></u-text>
|
|
</view>
|
|
</u-row>
|
|
</view>
|
|
</u-col>
|
|
</u-row>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="pbody">
|
|
<view class="btnlist2">
|
|
<u-row gutter="20" custom-style="flex-wrap: wrap;">
|
|
<u-col v-for="tlItem in toolBtnlist" span="6" @click="handleToolItemClict(tlItem)">
|
|
<view style="margin: 0 0 20rpx 0;background: #F6F6F6;padding: 30rpx 28rpx;border-radius: 20rpx;position: relative;">
|
|
<u-row justify="between" >
|
|
<view class="neirong">
|
|
<u-text size="28" :bold="true" color="#0E0708" :text="tlItem.title"></u-text>
|
|
<u-text size="22" margin="15rpx 0 0 0" color="#999" :text="tlItem.subTitle"></u-text>
|
|
</view>
|
|
<image :src="tlItem.icon" style="height: 50rpx; width: 50rpx;" mode="aspectFit"/>
|
|
</u-row>
|
|
</view>
|
|
</u-col>
|
|
</u-row>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view v-show="showFollow" class="pfoot">
|
|
<u-row justify="between">
|
|
<u-text size="24" color="#fff" text="关注探路者官方公众号，实时接收物流信息"></u-text>
|
|
<u-button type="primary" custom-style="width: 120rpx;border-radius: 30rpx;margin: 0;font-size: 26rpx;" size="mini">去关注</u-button>
|
|
</u-row>
|
|
<official-account style="opacity: 0;" class="pos-abt-all" @load="officialOnload" @error="officialOnError"></official-account>
|
|
</view>
|
|
<!-- #endif -->
|
|
|
|
</view>
|
|
</view>
|
|
</tpx-page>
|
|
</template>
|
|
<script>
|
|
|
|
import getCdnUrl from "@/common/getCdnUrl"
|
|
import { goto, scanCode } from "@/common/untool"
|
|
import * as apiService from "@/common/api"
|
|
|
|
export default {
|
|
props: {
|
|
// hasLeftWin: {
|
|
// type: Boolean
|
|
// }
|
|
},
|
|
computed: {
|
|
kefuH5Url() {
|
|
return this.$store.getters.kefuH5Url
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
mainBtnlist: [
|
|
{ title: '下单寄件', subTitle: "上门揽件/寄仓库", icon: getCdnUrl(`sdg/btn-send.png`), url: 'post/post' },
|
|
{ title: '专属小哥', subTitle: "下单给专属业务员", icon: getCdnUrl(`sdg/btn-bindbr.png`), url: 'user/exclusiveCourier' }
|
|
],
|
|
toolBtnlist: [
|
|
{ title: '进仓单', subTitle: "货物进仓信息", icon: getCdnUrl(`sdg/t-jcd.png`), url: 'warehousing/list' },
|
|
{ title: '运费时效', subTitle: "运费预估，时效查看", icon: getCdnUrl(`sdg/t-shisuan.png`), url: 'post/freightCalculate' },
|
|
{ title: '运单列表', subTitle: "寄件，收件运单", icon: getCdnUrl(`sdg/t-dingdan.png`), url: 'tabBar/search/search' },
|
|
{ title: '网点查询', subTitle: "查看收寄件网点", icon: getCdnUrl(`sdg/t-wangdain.png`), url: 'service/list' },
|
|
{ title: '地址簿', subTitle: "收件 寄件地址管理", icon: getCdnUrl(`sdg/t-dizhi.png`), url: 'address/list' },
|
|
// { title: '信息速递', subTitle: "快递信息列表", icon: getCdnUrl(`sdg/t-xuzhi.png`), url: 'service/articlelist' },
|
|
// { title: 'HSCODE', subTitle: "海关归类信息", icon: getCdnUrl(`sdg/t-HS.png`), url: '' },
|
|
// { title: 'RECP', subTitle: "优惠税率安排查询", icon: getCdnUrl(`sdg/t-RE.png`), url: '' },
|
|
// { title: '扫码寄件', subTitle: "扫描条码发货", icon: getCdnUrl(`sdg/t-saoma.png`), url: 'action:scan' },
|
|
{ title: '快递查询', subTitle: "快递单跟踪查询", icon: getCdnUrl(`sdg/t-yundan.png`), url: 'post/query' },
|
|
{ title: '客服', subTitle: "与在线客服交流", icon: getCdnUrl(`sdg/t-yundan.png`), url: 'action:kefu', },
|
|
],
|
|
showFollow: false
|
|
}
|
|
},
|
|
onShareAppMessage() {
|
|
return {
|
|
title: '探路物流 速运全球',
|
|
// path: 'TODO'
|
|
}
|
|
},
|
|
methods: {
|
|
getCdnUrl,
|
|
goto,
|
|
async handleToolItemClict(item) {
|
|
if(item.url == 'action:scan') {
|
|
this.handleCheckOpenPost()
|
|
} else if(item.url == 'action:kefu') {
|
|
this.gotoWebview({ url: `${this.kefuH5Url}` })
|
|
} else {
|
|
goto(item.url)
|
|
}
|
|
},
|
|
async handleCheckOpenPost(){
|
|
const code = await scanCode()
|
|
let res = await apiService.scanCheckBillCode({ billCode: code })
|
|
if(res?.data?.billCode) {
|
|
let cpData = { billCode: res.data.billCode }
|
|
this.goto(`post/post?defaultSubParams=${encodeURIComponent(JSON.stringify(cpData))}&type=create`)
|
|
}
|
|
},
|
|
officialOnload(e) {
|
|
// this.showFollow = true // 先隐藏
|
|
console.log('公众号组件加载成功===', e.detail.status)
|
|
},
|
|
officialOnError(e) {
|
|
console.log('公众号组件加载失败===', e.detail.status)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '@/common/uni-nvue.scss';
|
|
</style>
|
|
<style scoped lang="scss">
|
|
.hdbg{
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 720rpx;
|
|
}
|
|
.pg-container{
|
|
position: relative;
|
|
z-index: 2;
|
|
overflow-x: hidden;
|
|
}
|
|
.header{
|
|
padding: 0 28rpx;
|
|
.btn-ljyy{
|
|
margin-left: 0;
|
|
width: 144rpx;
|
|
margin-top: 40rpx;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.btnlist1 {
|
|
margin-top: 38rpx;
|
|
background: linear-gradient(0deg, #1D1818 0%, #0E0708 100%);
|
|
border-radius: 30rpx 30rpx 0rpx 0rpx;
|
|
padding: 36rpx 24rpx 22rpx 24rpx;
|
|
|
|
}
|
|
}
|
|
.mb-item{
|
|
width: 100%;
|
|
position: relative;
|
|
border-right: 2rpx solid rgba(255,255,255,0.5);
|
|
&.noborder{
|
|
border-right: 0;
|
|
}
|
|
}
|
|
.pbody{
|
|
background: #FFFFFF;
|
|
border-radius: 30rpx;
|
|
padding: 40rpx 28rpx 100rpx 28rpx;
|
|
.btnlist2{
|
|
|
|
.neirong{
|
|
margin-left: 22rpx;
|
|
}
|
|
}
|
|
}
|
|
.pfoot {
|
|
position: fixed;
|
|
bottom: 20rpx;
|
|
left: 28rpx;
|
|
right: 28rpx;
|
|
padding: 20rpx 8rpx 20rpx 26rpx;
|
|
background: #0E0708;
|
|
border-radius: 36rpx;
|
|
}
|
|
</style>
|