aike/emis-sapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新页面

Browse Source
This commit is contained in:
aihe 2023-12-06 02:05:39 +08:00
parent 39b21258a3
commit bbf48ebac5
3 changed files with 201 additions and 373 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
common/custom.scss
View File

@ -1,3 +1,78 @@
.customer_nav_bar {
min-height: var(--status-bar-height);
padding-top: 60rpx;
}
.com-jianju {
margin-left: 28rpx;
margin-right: 28rpx;
}
.flex-column-center{
display: flex;
flex-direction: column;
align-items: center;
}
.com-section{
position: relative;
font-size: 32rpx;
font-weight: bold;
padding-left: 10rpx;
&::before{
content: ' ';
position: absolute;
left: 0;
top: 6rpx;
height: 26rpx;
width: 3rpx;
border-radius: 2rpx;
background-color: $uni-color-primary;
}
}
.smp-tag{
margin: 0 20rpx 20rpx 0; display: inline-block;
}
.pos-rlt{
position: relative;
}
.h-full{
height: 100%;
}
.w-full{
width: 100%;
}
%blcok {
margin-top: 30rpx;
border-radius: 30rpx;
padding: 26rpx 30rpx;
}
.blcok {
@extend %blcok;
}
.blcok-white{
@extend %blcok;
background-color: #fff;
}
.blcok-grey{
@extend %blcok;
background-color: #F6F6F6;
}
.blcok-white-noradius{
@extend %blcok;
background-color: #fff;
border-radius: 0;
}
.com-radius {
border-radius: 20rpx;
}
.pos-abt-all{
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.mt-10{ .mt-10{
margin-top: 10rpx; margin-top: 10rpx;
} }
@ -96,43 +171,6 @@
padding-right: 40rpx; padding-right: 40rpx;
} }
.customer_nav_bar {
min-height: var(--status-bar-height);
padding-top: 60rpx;
}
.com-jianju {
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;
}
.blcok-white-noradius{
@extend %blcok;
background-color: #fff;
border-radius: 0;
}
.com-radius {
border-radius: 20rpx;
}
.pos-abt-all{
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.font-22 { .font-22 {
font-size: 22rpx; font-size: 22rpx;
} }
@ -148,43 +186,16 @@
.clr-sub{ .clr-sub{
color: #999; color: #999;
} }
.radius-10{
border-radius: 10rpx;
}
.radius-20{
border-radius: 20rpx;
}
page{ page{
// font-size: 22rpx; // font-size: 22rpx;
} }
.pos-rlt{
position: relative;
}
.h-full{
height: 100%;
}
.w-full{
width: 100%;
}
.flex-column-center{
display: flex;
flex-direction: column;
align-items: center;
}
.com-section{
position: relative;
font-size: 32rpx;
font-weight: bold;
padding-left: 10rpx;
&::before{
content: ' ';
position: absolute;
left: 0;
top: 6rpx;
height: 26rpx;
width: 3rpx;
border-radius: 2rpx;
background-color: $uni-color-primary;
}
}
.smp-tag{
margin: 0 20rpx 20rpx 0; display: inline-block;
}
/************* 动画 /**************/ /************* 动画 /**************/
.animated{animation-duration: 0.5s;animation-fill-mode:both} .animated{animation-duration: 0.5s;animation-fill-mode:both}

415
pages/address/edit.vue
View File

@ -1,180 +1,120 @@
<template> <template>
<tpx-layout> <tpx-layout>
<template v-slot:header> <template v-slot:body>
<view class="customer_nav_bar"> <view class="com-jianju pos-rlt pb-30" style="padding-top: 2rpx;">
<view class="com-jianju" style="width: 490rpx;">
<!-- 关键字搜索框 -->
<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: 40rpx;"> <view class="blcok-white radius-20">
<u-row justify="between" align="top"> <u-textarea v-model="submitParam.otherDes" border="none" height="110" placeholder="粘贴或输入地址，点击“智能识别”自动拆分姓名、电话和地址" custom-style="border:0;padding: 0;"></u-textarea>
<u-col span="9"> <u-row justify="end">
<!-- 订单状态 --> <view class="mt-10">
<tpx-tabs :list="ordStatusList" v-model:value="searchParam.ordStatus" <u-button @click="handleAnsText()" type="primary" size="mini" shape="circle" custom-style="width: 130rpx;font-size: 24rpx;padding:0;">智能识别</u-button>
@tabchange="(val)=> { handleSearchParamChange() }" mode="info" </view>
>
(<text>0</text>)
</tpx-tabs>
</u-col>
<u-col span="2">
<!-- 更多查询条件 -->
<u-button @click="handleSearchMoreBtn()" :hairline="false" shape="circle" size="mini" custom-style="border-radius: 23rpx;">
<u-row justify="center">
<view :style="'padding-right: 4rpx;white-space: nowrap;' + (hasExtSchParam?'color: #B12D29;':'color: #666;')">
{{hasExtSchParam?'已':''}}筛选
</view>
<u-icon :name="showSearchMore?'arrow-up-fill':'arrow-down-fill'"
:color="(hasExtSchParam?'#B12D29':'color: #666')" size="18" custom-style="margin-top: 2rpx;"
></u-icon>
</u-row>
</u-button>
</u-col>
</u-row> </u-row>
</view> </view>
<!-- 状态搜索 --> <view class="blcok-white radius-20 mt-40">
<view v-if="showSearchMore" class="search-more-panel"> <u-row>
<view class="smp-body slideInDown animated fast"> <view>
<view class="smp-content"> <u-text text="国家" size="28" :bold="true"></u-text>
<view class="pos-abt-all" style="overflow-y: auto;">
<view style="padding: 0 0 30rpx 0">
<view>
<u-text text="快递状态" size="28" :bold="true" margin="0 0 20rpx 0"></u-text>
<view class="smp-tag" v-for="(dItem, dIndex) in dlvTypeList">
<u-tag :text="`${dItem.title}`" :plain="!dItem.checked" type="info" shape="circle" :bg-color="`${dItem.checked?'#de524e':''}`" :name="dIndex"
@click="handleCheckBoxClick(dItem)">
</u-tag>
</view>
</view>
<view>
<u-text text="付款方式" size="28" :bold="true" margin="20rpx 0 20rpx 0"></u-text>
<view class="smp-tag" v-for="(pItem, pIndex) in payTypeList">
<u-tag :text="`${pItem.title}`" :plain="!pItem.checked" type="info" shape="circle" :bg-color="`${pItem.checked?'#de524e':''}`" :name="pIndex"
@click="handleCheckBoxClick(pItem)">
</u-tag>
</view>
</view>
<view>
<u-text text="时间范围" size="28" :bold="true" margin="20rpx 0 20rpx 0"></u-text>
<view class="smp-tag" v-for="(daItem, daIndex) in dateTypeList"
v-show="!(tmpSearchParam.date && dateTypeEnum.custom == daItem.val)"
>
<u-tag
:text="`${daItem.title}`" :plain="!(daItem.val == tmpSearchParam.dateType)" type="info" shape="circle" :bg-color="`${daItem.val == tmpSearchParam.dateType?'#de524e':''}`"
@click="handleCheckDate(daItem)">
</u-tag>
</view>
<view v-if="tmpSearchParam.date" class="smp-tag" style="display: block;">
<view style="display: inline-block;">
<u-tag :text="`${tmpSearchParam.date}`" :plain="false" type="info" shape="circle" :bg-color="`#de524e`"
@click="handleSwitchCladar()">
</u-tag>
</view>
</view>
</view>
</view>
</view>
</view> </view>
<view class="smp-foot"> <u-row custom-style="flex: 1;" justify="end" align="center">
<u-row gutter="20" justify="between"> <u-icon size="22" name="arrow-down" color="#333"></u-icon>
<u-button @click="handleResetTempSearch()" shape="circle">重置</u-button> </u-row>
<view style="width: 40rpx;"></view> </u-row>
<u-button @click="handleConfirmTempSearch()" shape="circle" type="primary">确认</u-button> </view>
<view class="blcok-white radius-20">
<view class="">
<view style="margin-top: 10rpx;">
<u-row>
<u-col span="4">
<u-input shape="circle" placeholder="真实姓名" placeholder-style="color: #0E0708; " custom-style="border:0;border-radius: 20rpx;background-color: #F6F6F6;padding: 20rpx 30rpx;"></u-input>
</u-col>
<u-col offset="1" span="7">
<u-input shape="circle" placeholder="电话" placeholder-style="color: #0E0708; " custom-style="border:0;border-radius: 20rpx;background-color: #F6F6F6;padding: 20rpx 30rpx;"></u-input>
</u-col>
</u-row> </u-row>
</view> </view>
<view class="blcok-grey radius-20">
<u-row>
<view style="flex: 1;">
<u-text text="省市区" size="28" :bold="true"></u-text>
</view>
<u-row>
<u-icon size="22" name="arrow-down" color="#333"></u-icon>
</u-row>
</u-row>
</view>
<view class="mt-30">
<u-textarea shape="circle" placeholder="详细地址（例如**街道**号**）" placeholder-style="color: #0E0708; " custom-style="border:0;border-radius: 20rpx;background-color: #F6F6F6;padding: 20rpx 30rpx;" height="160"></u-textarea>
</view>
<view class="mt-30">
<u-input shape="circle" placeholder="电话" placeholder-style="color: #0E0708; " custom-style="border:0;border-radius: 20rpx;background-color: #F6F6F6;padding: 20rpx 30rpx;"></u-input>
</view>
<view class="mt-30">
<u-input shape="circle" placeholder="邮编" placeholder-style="color: #0E0708; " custom-style="border:0;border-radius: 20rpx;background-color: #F6F6F6;padding: 20rpx 30rpx;"></u-input>
</view>
<view class="mt-30">
<u-input shape="circle" placeholder="邮箱（选填）" placeholder-style="color: #0E0708; " custom-style="border:0;border-radius: 20rpx;background-color: #F6F6F6;padding: 20rpx 30rpx;"></u-input>
</view>
<view class="mt-30">
<u-input shape="circle" placeholder="公司名称（选填）" placeholder-style="color: #0E0708; " custom-style="border:0;border-radius: 20rpx;background-color: #F6F6F6;padding: 20rpx 30rpx;"></u-input>
</view>
</view> </view>
</view> </view>
<view class="mt-30 pl-30 pr-30">
<u-row justify="between">
<view>
<u-checkbox-group v-model="radiovalue1" placement="column" @change="handleFormChange()">
<u-checkbox
shape="circle"
size="28" label="默认地址" active-color="#B12D29" la
label-size="24" hange="handleFormChange()"
>
</u-checkbox>
</u-checkbox-group>
</view>
<view>
<u-text text="清空" size="24" color="#0E0708"></u-text>
</view>
</u-row>
</view>
</view> </view>
</template> </template>
<template v-slot:body> <template v-slot:footer>
<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom()" class="pos-abt-all" <view class="blcok-white-noradius">
> <u-button @click="handleSubmit()" type="primary" size="large" shape="circle"
<view class="pgb-cont"> custom-style="height:80rpx;font-size: 30rpx;"
<!-- 列表数据 --> >确定</u-button>
<view v-for="(orItem) in ordList" class="ord-list-item"> </view>
<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>
</scroll-view>
</template> </template>
</tpx-layout> </tpx-layout>
<!-- 日历 -->
<!-- @close="handleSwitchCladar()" -->
<u-calendar title="请选择日期范围" color="#B12D29" mode="range" rowHeight="90" closeOnClickOverlay :show="showCladar" :defaultDate="tmpSearchParam.date.split('~')" @confirm="handleClaOk" @close="handleSwitchCladar"
></u-calendar>
</template> </template>
<script> <script>
import getCdnUrl from "@/common/getCdnUrl" import getCdnUrl from "@/common/getCdnUrl"
import { ordStaEnum, ordStatusList, payTypeEnum, payTypeList, dlvTypeEnum, dlvTypeList, dateTypeEnum, dateTypeList } from "@/common/enum" import {
import { goto, setClipboardData, confirmModal, showLoading } from "@/common/untool" ordStaEnum,
ordStatusList,
payTypeEnum,
payTypeList,
dlvTypeEnum,
dlvTypeList,
dateTypeEnum,
dateTypeList
} from "@/common/enum"
import {
goto
} from "@/common/untool"
export default { export default {
props: { props: {
// hasLeftWin: { // hasLeftWin: {
@ -182,30 +122,14 @@
// } // }
}, },
computed: { computed: {
hasExtSchParam() {
return Object.values(this.tmpSearchParam).filter(v=> !!v).length > 0
},
}, },
data() { data() {
return { return {
...JSON.parse(JSON.stringify({ ordStaEnum, ordStatusList, payTypeEnum, payTypeList, dlvTypeEnum, dlvTypeList, dateTypeEnum, dateTypeList })), submitParam: {
searchParam: { type: 1,
keyword: '', otherDes: ''
ordStatus: ordStatusList[0].val // 订单状态， 1：寄件； 2：收件； 3：待付款； }
},
showSearchMore: false,
showCladar: false,
tmpSearchParam: {
postStatus: '', // 快递状态
payType: '', // 支付类型
dateType: '', // 日期类型
date: '' // 日期
},
ordList: [
{},{},{},{},{},{},{},{}
],
showLoadMore: false,
loadedAll: false
} }
}, },
onShareAppMessage() { onShareAppMessage() {
@ -218,146 +142,37 @@
this.initData(); this.initData();
}, },
onUnload() { onUnload() {
}, },
methods: { methods: {
getCdnUrl, getCdnUrl,
initData(){ initData() {
// showLoading() // uni.showLoading({
setTimeout(() => { // title: '加载中'
uni.stopPullDownRefresh(); // });
}, 300);
}, },
setListData() { handleAnsText(){
}, },
handleFormChange(){
onScrollBottom() {
console.log("onScrollBottom");
if (this.loadedAll) {
return;
}
this.showLoadMore = true;
setTimeout(() => {
this.setListData();
}, 300);
},
handleSearchMoreBtn(){
if(!this.showLoadMore) {
// 回显更多条件
Object.keys(this.tmpSearchParam).map(t=> {
this.tmpSearchParam[t] = this.searchParam[t] || ''
})
}
this.showSearchMore = !this.showSearchMore
},
handleSearchParamChange(key, val) {
if(key) {
this.searchParam[key] = val
}
}, },
async handleDealItem(item, deal = { type: '1' }) { handleSubmit() {
switch (deal.type){
case 1: // 跳转
break;
case 2: // 复制订单号
setClipboardData('xxxxxxx')
break;
case 3: // 删除
await confirmModal('确认要删除吗?')
break;
case 4: // 取消
await confirmModal('确认要取消吗?')
break;
default:
break;
}
}, },
handleResetTempSearch(){
Object.keys(this.tmpSearchParam).map(t=> {
this.tmpSearchParam[t] = ''
})
},
handleConfirmTempSearch(){
Object.assign(this.searchParam, this.tmpSearchParam)
// Object.keys(this.tmpSearchParam).map(t=> {
// this.searchParam[t] = this.tmpSearchParam[t]
// })
},
handleCheckBoxClick(item, key){
item.checked = !item.checked
},
handleCheckDate(item) {
let newVal = item.val
if(newVal == dateTypeEnum.custom) {
this.handleSwitchCladar()
} else {
newVal == this.tmpSearchParam.dateType && (newVal = '')
this.tmpSearchParam.date = ''
}
this.tmpSearchParam.dateType = newVal
},
handleClaOk(res){
const ary = Object.values(res)
const val = [ary[0], ary[ary.length-1]].join("~")
this.handleSwitchCladar()
this.tmpSearchParam.date = val
},
handleSwitchCladar() {
this.showCladar = !this.showCladar
if(!this.showCladar) {
!this.tmpSearchParam.date && (this.tmpSearchParam.dateType = '')
}
}
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
@import '@/common/uni-nvue.scss'; @import '@/common/uni-nvue.scss';
page { page {
background-color: #F6F6F6; background-color: #F6F6F6;
height: 100% !important; height: 100% !important;
} }
.customer_nav_bar {
// padding-top: --status-bar-height;
padding-top: 80rpx;
background-color: #B12D29;
position: relative;
}
</style> </style>
<style scoped lang="scss"> <style scoped lang="scss">
.pgb-cont{
padding: 30rpx;
}
.ord-list-item{
box-shadow: 0rpx 3rpx 12rpx 0rpx rgba(139,139,139,0.06);
border-radius: 20rpx;
padding: 22rpx 30rpx;
background-color: #fff;
margin-bottom: 30rpx;
}
.search-more-panel{
overflow: hidden;
position: absolute;
left: 0;
right: 0;
height: calc(70vh);
z-index: 200;
}
.smp-body{
padding: 30rpx;
display: flex;
flex-direction: column;
height: 100%;
background-color: #FFF;
border-radius: 0 0 30rpx 30rpx;
box-sizing: border-box;
}
.smp-content{
flex: 1;
position: relative;
}
</style> </style>

8
pages/post/post.vue
View File

@ -204,9 +204,11 @@
<u-row justify="between"> <u-row justify="between">
<view> <view>
<u-row align="top"> <u-row align="top">
<u-checkbox size="22" labelSize="22" v-model="agreePrivateRule" label="我已同意接受" <u-checkbox-group v-model="agreePrivateRule" placement="column" @change="handleFormChange()">
label-color=":#999" activeColor="#B12D29" <u-checkbox size="22" labelSize="22" v-model="agreePrivateRule" label="我已同意接受"
custom-style="margin-bottom: 10rpx;"></u-checkbox> label-color=":#999" activeColor="#B12D29"
custom-style="margin-bottom: 10rpx;"></u-checkbox>
</u-checkbox-group>
<view class="pl-10" style="padding-top: 6rpx;"> <view class="pl-10" style="padding-top: 6rpx;">
<u-text text="《快件运单契约条款》" size="22"></u-text> <u-text text="《快件运单契约条款》" size="22"></u-text>
</view> </view>