测试
This commit is contained in:
aihe
parent
378be0587c
commit
14b8e6ed47
@ -6,6 +6,18 @@
|
||||
margin-left: 28rpx;
|
||||
margin-right: 28rpx;
|
||||
}
|
||||
%blcok {
|
||||
margin-top: 30rpx;
|
||||
border-radius: 30rpx;
|
||||
padding: 26rpx 30rpx;
|
||||
}
|
||||
.blcok {
|
||||
@extend %blcok;
|
||||
}
|
||||
.blcok-white{
|
||||
@extend %blcok;
|
||||
background-color: #fff;
|
||||
}
|
||||
.com-radius {
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
@ -27,6 +39,11 @@
|
||||
.w-full{
|
||||
width: 100%;
|
||||
}
|
||||
.flex-column-center{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
/************* 动画 /**************/
|
||||
|
||||
96
components/tpx-tabs/tpx-tabs.vue
Normal file
96
components/tpx-tabs/tpx-tabs.vue
Normal file
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-row justify="start">
|
||||
<view v-for="(item) in list" @click="handleChangeTab(item)"
|
||||
:class="`sta-item ${value == item.val?'active':''} stai-${mode}`">
|
||||
<view class="stai-text">
|
||||
{{item.title}}
|
||||
<view class="stai-chk-line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</u-row>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
list: {
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
value: {
|
||||
default () {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
mode: {
|
||||
default () {
|
||||
return 'primary' // primary info
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onHide() {
|
||||
|
||||
},
|
||||
destroyed() {},
|
||||
|
||||
methods: {
|
||||
handleChangeTab(cur){
|
||||
this.$emit('tabchange', cur.val)
|
||||
this.$emit('update:value', cur.val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.sta-item {
|
||||
flex: 1;
|
||||
padding: 0 0 30rpx 0;
|
||||
margin-right: 30rpx;
|
||||
position: relative;
|
||||
font-size: 28rpx;
|
||||
color: #FFF;
|
||||
opacity: 0.8;
|
||||
.stai-text {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
opacity: 1;
|
||||
.stai-text {
|
||||
.stai-chk-line{
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
bottom: -30rpx;
|
||||
left: 0;
|
||||
margin-left: 10%;
|
||||
width: 80%;
|
||||
height: 4rpx;
|
||||
background: #FFF;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.stai-primary{
|
||||
color: #0E0708;
|
||||
&.active {
|
||||
.stai-chk-line{
|
||||
background: $u-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,140 @@
|
||||
<template>
|
||||
啊实打实
|
||||
<view class="com-jianju pos-rlt" style="padding-top: 2rpx;">
|
||||
<view class="blcok" style="background-color: #0E0708;">
|
||||
<u-row>
|
||||
<image style="height: 28rpx;width: 34rpx;margin-right: 20rpx;" :src="getCdnUrl(`post/gangbo.png`)"></image>
|
||||
<u-text size="24" color="#fff" text="下单后会有业务员及时联系您，请保持电话畅通!"></u-text>
|
||||
</u-row>
|
||||
</view>
|
||||
|
||||
<view class="blcok-white">
|
||||
<view>
|
||||
<u-row custom-style="position:relative;" align="top" justify="between">
|
||||
<view>
|
||||
<image style="height: 50rpx;width: 42rpx;" :src="getCdnUrl(`post/ji.png`)"></image>
|
||||
</view>
|
||||
<view style="flex: 1;padding: 0 30rpx;">
|
||||
<u-text text="寄件人信息" size="28" :bold="true"></u-text>
|
||||
<view style="margin: 8rpx 0 0 0;">
|
||||
<u-text text="请新建您的寄件地址信息" size="22" color="#999"></u-text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-column-center">
|
||||
<image style="height: 32rpx;width: 28rpx;" :src="getCdnUrl(`post/adress.png`)"></image>
|
||||
<u-text align="center" text="地址薄" size="22" :bold="true" margin="8rpx 0 0 0"></u-text>
|
||||
</view>
|
||||
<view style="position: absolute;left: 20rpx;bottom: -20rpx;top: 46rpx;">
|
||||
<u-line custom-style="height:100%;" direction="col" dashed="true"></u-line>
|
||||
</view>
|
||||
</u-row>
|
||||
<view style="padding-left: 76rpx;">
|
||||
<u-line margin="20rpx 0"></u-line>
|
||||
</view>
|
||||
<u-row custom-style="position:relative;" align="top" justify="between">
|
||||
<view style="position: absolute;left: 20rpx;top: -20rpx;bottom: 100%;">
|
||||
<u-line custom-style="height:100%;" direction="col" dashed="true"></u-line>
|
||||
</view>
|
||||
<view>
|
||||
<image style="height: 50rpx;width: 42rpx;" :src="getCdnUrl(`post/shou.png`)"></image>
|
||||
</view>
|
||||
<view style="flex: 1;padding: 0 30rpx;">
|
||||
<u-text text="收件人信息" size="28" :bold="true"></u-text>
|
||||
<view style="margin: 8rpx 0 0 0;">
|
||||
<u-text text="请填写收件人国家、姓名，电话" size="22" color="#999"></u-text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-column-center">
|
||||
<image style="height: 32rpx;width: 28rpx;" :src="getCdnUrl(`post/adress.png`)"></image>
|
||||
<u-text align="center" text="地址薄" size="22" :bold="true" margin="8rpx 0 0 0"></u-text>
|
||||
</view>
|
||||
</u-row>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="blcok-white">
|
||||
<view style="width: 80%;">
|
||||
<tpx-tabs :list="sendTypeList" v-model:value="submitParam.type"
|
||||
@tabchange="(val)=> { }"
|
||||
>
|
||||
</tpx-tabs>
|
||||
</view>
|
||||
|
||||
<view >
|
||||
<view style="padding: 30rpx 0;border-bottom: 2rpx solid #F6F6F6;;">
|
||||
<u-row>
|
||||
<view>
|
||||
<u-text text="目的国" size="28" :bold="true"></u-text>
|
||||
</view>
|
||||
<u-row style="flex: 1;" justify="end" align="center">
|
||||
<u-text align="right" margin="0 12rpx 0 0" size="22" text="柬埔寨"></u-text>
|
||||
<u-icon size="22" name="arrow-right" color="#333"></u-icon>
|
||||
</u-row>
|
||||
</u-row>
|
||||
</view>
|
||||
|
||||
<view style="padding: 30rpx 0;border-bottom: 2rpx solid #F6F6F6;;">
|
||||
<u-row>
|
||||
<view>
|
||||
<u-text text="选择线路" size="28" :bold="true"></u-text>
|
||||
</view>
|
||||
<u-row style="flex: 1;" justify="end" align="center">
|
||||
<u-text align="right" margin="0 12rpx 0 0" size="22" color="#999" text="请选择"></u-text>
|
||||
<u-icon size="22" name="arrow-right" color="#333"></u-icon>
|
||||
</u-row>
|
||||
</u-row>
|
||||
</view>
|
||||
|
||||
<view style="padding: 30rpx 0;border-bottom: 2rpx solid #F6F6F6;;">
|
||||
<u-row>
|
||||
<view>
|
||||
<u-text text="货物信息(必填)" size="28" :bold="true"></u-text>
|
||||
</view>
|
||||
<u-row style="flex: 1;" justify="end" align="center">
|
||||
<u-text align="right" margin="0 12rpx 0 0" size="22" color="#999" text="填写物品信息"></u-text>
|
||||
<u-icon size="22" name="arrow-right" color="#333"></u-icon>
|
||||
</u-row>
|
||||
</u-row>
|
||||
</view>
|
||||
|
||||
<view style="padding: 30rpx 0;border-bottom: 2rpx solid #F6F6F6;;">
|
||||
<u-row>
|
||||
<view>
|
||||
<u-text text="重量/体积" size="28" :bold="true"></u-text>
|
||||
</view>
|
||||
<u-row style="flex: 1;" justify="end" align="center">
|
||||
<u-text align="right" margin="0 12rpx 0 0" size="22" color="#999" text="填写重量体积"></u-text>
|
||||
<u-icon size="22" name="arrow-right" color="#333"></u-icon>
|
||||
</u-row>
|
||||
</u-row>
|
||||
</view>
|
||||
|
||||
<view style="padding: 30rpx 0;border-bottom: 2rpx solid #F6F6F6;;">
|
||||
<u-row>
|
||||
<view>
|
||||
<u-text text="期望上门时间 " size="28" :bold="true"></u-text>
|
||||
</view>
|
||||
<u-row style="flex: 1;" justify="end" align="center">
|
||||
<u-text align="right" margin="0 12rpx 0 0" size="22" text="1小时内"></u-text>
|
||||
<u-icon size="22" name="arrow-right" color="#333"></u-icon>
|
||||
</u-row>
|
||||
</u-row>
|
||||
</view>
|
||||
|
||||
<view style="padding: 30rpx 0;border-bottom: 2rpx solid #F6F6F6;;">
|
||||
<u-row>
|
||||
<view>
|
||||
<u-text text="付款方式" size="28" :bold="true"></u-text>
|
||||
</view>
|
||||
<u-row style="flex: 1;" justify="end" align="center">
|
||||
<u-text align="right" margin="0 12rpx 0 0" size="22" text="1现金/月结"></u-text>
|
||||
<u-icon size="22" name="arrow-right" color="#333"></u-icon>
|
||||
</u-row>
|
||||
</u-row>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 日历 -->
|
||||
<!-- @close="handleSwitchCladar()" -->
|
||||
<u-calendar title="请选择日期范围" color="#B12D29" rowHeight="90" closeOnClickOverlay :show="showCladar" :defaultDate="''" @confirm="handleClaOk" @close="handleSwitchCladar"
|
||||
@ -20,7 +155,15 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showCladar: false
|
||||
sendTypeList: [
|
||||
{ title: '上门取件', val: 1},
|
||||
{ title: '仓库收货', val: 2},
|
||||
{ title: '整柜提货', val: 3}
|
||||
],
|
||||
showCladar: false,
|
||||
submitParam: {
|
||||
type: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
@ -48,6 +191,9 @@
|
||||
if(!this.showCladar) {
|
||||
|
||||
}
|
||||
},
|
||||
handleSendTypeChange(item) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,20 +6,16 @@
|
||||
<u-search placeholder="请输入运单号/订单号" v-model="searchParam.keyword" height="56" search-icon-size="40"
|
||||
:clearabled="true" @change="(e)=> { handleSearchParamChange() }" :show-action="false"></u-search>
|
||||
</view>
|
||||
<view class="com-jianju" style="padding-top: 10rpx;">
|
||||
<u-row justify="between">
|
||||
<u-col span="10">
|
||||
|
||||
<view class="com-jianju" style="padding-top: 40rpx;">
|
||||
<u-row justify="between" align="top">
|
||||
<u-col span="9">
|
||||
<!-- 订单状态 -->
|
||||
<u-row justify="start">
|
||||
<view v-for="(orsItem) in ordStatusList" @click="handleSearchParamChange('ordStatus', orsItem.val)"
|
||||
:class="'sta-item ' + (searchParam.ordStatus == orsItem.val?'active':'')"
|
||||
>
|
||||
<view class="stai-text">
|
||||
{{orsItem.title}}
|
||||
(<text>0</text>)
|
||||
</view>
|
||||
</view>
|
||||
</u-row>
|
||||
<tpx-tabs :list="ordStatusList" v-model:value="searchParam.ordStatus"
|
||||
@tabchange="(val)=> { handleSearchParamChange() }" mode="info"
|
||||
>
|
||||
(<text>0</text>)
|
||||
</tpx-tabs>
|
||||
</u-col>
|
||||
<u-col span="2">
|
||||
<!-- 更多查询条件 -->
|
||||
@ -97,71 +93,76 @@
|
||||
|
||||
<view class="pg-body">
|
||||
|
||||
<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom()" class="pgb-cont pos-abt-all"
|
||||
<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom()" class="pos-abt-all"
|
||||
>
|
||||
<!-- 列表数据 -->
|
||||
<view v-for="(orItem) in ordList" class="ord-list-item">
|
||||
<u-row justify="between">
|
||||
<u-col span="11">
|
||||
<u-row @click="handleDealItem(orItem, { type: 2 })">
|
||||
<u-text :text="'运单号：'+ 'T7080304038'" size="26"></u-text>
|
||||
<view style="flex:1;">
|
||||
<u-icon name="file-text" size="32" custom-style=""></u-icon>
|
||||
</view>
|
||||
</u-row>
|
||||
</u-col>
|
||||
<u-icon @click="handleDealItem(orItem, { type: 3 })" name="trash"></u-icon>
|
||||
</u-row>
|
||||
|
||||
<u-row custom-style="margin-top: 30rpx;" justify="center">
|
||||
<u-col span="4">
|
||||
<u-text :text="'中国上海'" size="30" :bold="true" align="center"></u-text>
|
||||
<u-text :text="'张三'" size="26" color="#999" margin="20rpx 0 0 0" align="center"></u-text>
|
||||
</u-col>
|
||||
<u-col span="4" justify="center" align="center" custom-style="text-align: center;">
|
||||
<image style="width: 70rpx;height: 14rpx;" :src="getCdnUrl('search/toline.png')"></image>
|
||||
<!-- getCdnUrl('search/toline-grey.png') -->
|
||||
<u-text :text="'待付款'" align="center" size="22" margin="10rpx 0 0 0"></u-text>
|
||||
</u-col>
|
||||
<u-col span="4">
|
||||
<u-text :text="'越南'" size="30" :bold="true" align="center"></u-text>
|
||||
<u-text :text="'李四'" size="26" color="#999" margin="20rpx 0 0 0" align="center"></u-text>
|
||||
</u-col>
|
||||
</u-row>
|
||||
|
||||
<u-text :text="'签收时间：' + '2022-04-30 15:25'" color="#999" size="22" margin="30rpx 0 0 0"></u-text>
|
||||
|
||||
<u-line color="#DEDEDE" margin="30rpx 0 0 0"></u-line>
|
||||
|
||||
<u-row justify="end" custom-style="margin-top:20rpx;">
|
||||
<view style="display: inline-block;">
|
||||
<u-row>
|
||||
<u-button shape="circle" type="primary" :plain="true" custom-style="height: 54rpx;margin-left: 12rpx;white-space: nowrap;">进仓确认</u-button>
|
||||
<u-button shape="circle" type="primary" custom-style="height: 54rpx;margin-left: 12rpx;white-space: nowrap;">再来一单</u-button>
|
||||
<!-- <u-button shape="circle" type="primary" :plain="true" custom-style="height: 54rpx;margin-left: 16rpx;">单据</u-button> -->
|
||||
<u-button @click="handleDealItem(orItem, { type: 4 })" shape="circle" type="primary" :plain="true" custom-style="height: 54rpx;margin-left: 12rpx;">取消</u-button>
|
||||
<u-button shape="circle" type="primary" :plain="true" custom-style="height: 54rpx;margin-left: 12rpx;">去付款</u-button>
|
||||
</u-row>
|
||||
</view>
|
||||
|
||||
</u-row>
|
||||
|
||||
<view class="pgb-cont">
|
||||
<!-- 列表数据 -->
|
||||
<view v-for="(orItem) in ordList" class="ord-list-item">
|
||||
<u-row justify="between">
|
||||
<u-col span="11">
|
||||
<u-row @click="handleDealItem(orItem, { type: 2 })">
|
||||
<u-text :text="'运单号：'+ 'T7080304038'" size="26"></u-text>
|
||||
<view style="flex:1;">
|
||||
<u-icon name="file-text" size="32" custom-style=""></u-icon>
|
||||
</view>
|
||||
</u-row>
|
||||
</u-col>
|
||||
<u-icon @click="handleDealItem(orItem, { type: 3 })" name="trash"></u-icon>
|
||||
</u-row>
|
||||
|
||||
<u-row custom-style="margin-top: 30rpx;" justify="center">
|
||||
<u-col span="4">
|
||||
<u-text :text="'中国上海'" size="30" :bold="true" align="center"></u-text>
|
||||
<u-text :text="'张三'" size="26" color="#999" margin="20rpx 0 0 0"
|
||||
align="center"></u-text>
|
||||
</u-col>
|
||||
<u-col span="4" justify="center" align="center" custom-style="text-align: center;">
|
||||
<image style="width: 70rpx;height: 14rpx;" :src="getCdnUrl('search/toline.png')">
|
||||
</image>
|
||||
<!-- getCdnUrl('search/toline-grey.png') -->
|
||||
<u-text :text="'待付款'" align="center" size="22" margin="10rpx 0 0 0"></u-text>
|
||||
</u-col>
|
||||
<u-col span="4">
|
||||
<u-text :text="'越南'" size="30" :bold="true" align="center"></u-text>
|
||||
<u-text :text="'李四'" size="26" color="#999" margin="20rpx 0 0 0"
|
||||
align="center"></u-text>
|
||||
</u-col>
|
||||
</u-row>
|
||||
|
||||
<u-text :text="'签收时间：' + '2022-04-30 15:25'" color="#999" size="22"
|
||||
margin="30rpx 0 0 0"></u-text>
|
||||
|
||||
<u-line color="#DEDEDE" margin="30rpx 0 0 0"></u-line>
|
||||
|
||||
<u-row justify="end" custom-style="margin-top:20rpx;">
|
||||
<view style="display: inline-block;">
|
||||
<u-row>
|
||||
<u-button shape="circle" type="primary" :plain="true"
|
||||
custom-style="height: 54rpx;margin-left: 12rpx;white-space: nowrap;">进仓确认</u-button>
|
||||
<u-button shape="circle" type="primary"
|
||||
custom-style="height: 54rpx;margin-left: 12rpx;white-space: nowrap;">再来一单</u-button>
|
||||
<!-- <u-button shape="circle" type="primary" :plain="true" custom-style="height: 54rpx;margin-left: 16rpx;">单据</u-button> -->
|
||||
<u-button @click="handleDealItem(orItem, { type: 4 })" shape="circle" type="primary"
|
||||
:plain="true" custom-style="height: 54rpx;margin-left: 12rpx;">取消</u-button>
|
||||
<u-button shape="circle" type="primary" :plain="true"
|
||||
custom-style="height: 54rpx;margin-left: 12rpx;">去付款</u-button>
|
||||
</u-row>
|
||||
</view>
|
||||
|
||||
</u-row>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<u-loadmore icon-size="28" font-size="28" margin-top="30" v-if="showLoadMore || loadedAll"
|
||||
:status="loadedAll ? 'nomore' : 'loading'" />
|
||||
|
||||
<!-- 空数据页 -->
|
||||
<view v-if="ordList.length == 0" style="padding-top: 100rpx;">
|
||||
<u-empty text="无数据" :icon="getCdnUrl('kong.png')" textSize="28" width="86" height="97">
|
||||
</u-empty>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<u-loadmore icon-size="28" font-size="28" margin-top="30" v-if="showLoadMore || loadedAll" :status="loadedAll ? 'nomore' : 'loading'" />
|
||||
|
||||
<!-- 空数据页 -->
|
||||
<view v-if="ordList.length == 0" style="padding-top: 100rpx;">
|
||||
<u-empty
|
||||
text="无数据"
|
||||
:icon="getCdnUrl('kong.png')"
|
||||
textSize="28"
|
||||
width="86" height="97"
|
||||
>
|
||||
</u-empty>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
@ -191,7 +192,7 @@
|
||||
...JSON.parse(JSON.stringify({ ordStaEnum, ordStatusList, payTypeEnum, payTypeList, dlvTypeEnum, dlvTypeList, dateTypeEnum, dateTypeList })),
|
||||
searchParam: {
|
||||
keyword: '',
|
||||
ordStatus: 1 // 订单状态， 1：寄件； 2：收件； 3：待付款；
|
||||
ordStatus: ordStatusList[0].val // 订单状态， 1：寄件； 2：收件； 3：待付款；
|
||||
},
|
||||
showSearchMore: false,
|
||||
showCladar: false,
|
||||
@ -252,7 +253,10 @@
|
||||
this.showSearchMore = !this.showSearchMore
|
||||
},
|
||||
handleSearchParamChange(key, val) {
|
||||
this.searchParam[key] = val
|
||||
if(key) {
|
||||
this.searchParam[key] = val
|
||||
}
|
||||
|
||||
},
|
||||
async handleDealItem(item, deal = { type: '1' }) {
|
||||
switch (deal.type){
|
||||
@ -339,36 +343,7 @@
|
||||
.pgb-cont{
|
||||
padding: 30rpx;
|
||||
}
|
||||
.sta-item {
|
||||
flex: 1;
|
||||
padding: 30rpx 0 30rpx 0;
|
||||
margin-right: 30rpx;
|
||||
position: relative;
|
||||
font-size: 28rpx;
|
||||
color: #FFF;
|
||||
opacity: 0.8;
|
||||
.stai-text{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
&.active{
|
||||
font-weight: 600;
|
||||
opacity: 1;
|
||||
.stai-text{
|
||||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
bottom: -30rpx;
|
||||
left: 50%;
|
||||
margin-left: -32rpx;
|
||||
width: 64rpx;
|
||||
height: 6rpx;
|
||||
background: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.ord-list-item{
|
||||
box-shadow: 0rpx 3rpx 12rpx 0rpx rgba(139,139,139,0.06);
|
||||
border-radius: 20rpx;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user