init
This commit is contained in:
shuhongfan
@@ -0,0 +1,53 @@
|
||||
<!-- 基本信息 - 已完成详情、在途详情、待提货详情 -->
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="baseInfo">
|
||||
<view class="addrCont">
|
||||
<view class="startAddr">{{itemData.startAddress}}</view>
|
||||
<view class="endAddr">{{itemData.endAddress}}</view>
|
||||
</view>
|
||||
<view class="carInfo">
|
||||
<view class="line"> <text>任务编号</text> <text class="ritEl">{{itemData.transportTaskId}}</text> </view>
|
||||
<view class="line"> <text>联系人</text> <text class="ritEl">{{itemData.startHandover}}</text> </view>
|
||||
<view class="line">
|
||||
<text>联系电话</text>
|
||||
<view class="phoneCont">
|
||||
<text class="ritEl">{{itemData.startHandoverPhone}}</text>
|
||||
<image @click="callPhone(itemData.startHandoverPhone)" class="phone" src="../../../static/sj_phone.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line"> <text>提货时间</text> <text class="ritEl">{{itemData.planDepartureTime}}</text> </view>
|
||||
<view class="line"> <text>预计送达时间</text> <text class="ritEl">{{itemData.planArrivalTime}}</text> </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup >
|
||||
// 获取父组件值、方法
|
||||
const props = defineProps({
|
||||
itemData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
// 拨打电话
|
||||
const callPhone = (phone) => {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style src="../index.scss" lang="scss"></style>
|
||||
<style lang="scss">
|
||||
.phoneCont{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.phone{
|
||||
position: relative;
|
||||
padding-left: 10rpx;
|
||||
top: -4rpx;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
190
project-wl-siji-uniapp-vue3/pages/index/components/ItemList.vue
Normal file
190
project-wl-siji-uniapp-vue3/pages/index/components/ItemList.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<!-- 任务首页-包含待提货、在途、已完成 -->
|
||||
<template>
|
||||
<view class="">
|
||||
<scroll-view scroll-x="true" class="tabScroll" :scroll-into-view="scrollinto" :scroll-with-animation="true">
|
||||
<view v-for="(item, index) in tabBars" :key="index" :id="'tab' + index" class="scroll-row-item" @click="changeTab(index)">
|
||||
<view :class="tabIndex == index ? 'scroll-row-item-act' : ''">
|
||||
<text class="line"></text>
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 已完成页面 搜索框 - start -->
|
||||
<view class="searchCont" v-if="tabIndex == 2">
|
||||
<SearchInput inputKey="orderId" @searchHandle="searchHandle" ></SearchInput>
|
||||
<view class="timeSearch">
|
||||
<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" rangeSeparator="至" />
|
||||
<view v-show="!isSearch" class="searchBut" @click="searchHandle('time')">
|
||||
<text class="button min" >筛选</text>
|
||||
</view>
|
||||
<view v-show="isSearch" class="searchBut">
|
||||
<text class="button buttonDis1 min">筛选</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 已完成页面 搜索框 - end -->
|
||||
<!-- 滑块内容 对应的是顶部选项卡的切换 :current="tabIndex" 设置的是y方向上可以滚动-->
|
||||
<view class="container">
|
||||
<!-- 垂直滚动区域 scroll和swiper的高度都要给且是一样的高度-->
|
||||
<scroll-view scroll-y="true" class="swiperH" :class="{finshSwiperH: tabIndex == 2}" @scrolltolower="scrolltoupperHandle" :lower-threshold="10">
|
||||
<view class="marg" v-if="itemData.length > 0">
|
||||
<!-- 通用卡片组件 - 待提货、在途 -->
|
||||
<Card v-for="(item, index) in itemData" :data="item" :src="filterUrl(item)" :key="item.id" :type="tabIndex" />
|
||||
</view>
|
||||
<!-- 无数据显示 -->
|
||||
<view v-if="itemData.length === 0 && !loading">
|
||||
<EmptyPage :emptyInfo="emptyInfo" />
|
||||
</view>
|
||||
<!-- end -->
|
||||
<!-- 下拉加载更多Lodding -->
|
||||
<view v-if="loading">
|
||||
<uni-load-more :status="moreStatus" />
|
||||
</view>
|
||||
<!-- end -->
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup >
|
||||
import { ref, reactive, onMounted, watchEffect, provide } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
// 组件
|
||||
import Card from '@/components/Card/index.vue'
|
||||
// 取件信息
|
||||
import EmptyPage from '@/components/EmptyPage/index.vue';
|
||||
// searchInput
|
||||
import SearchInput from '@/components/SearchInput/index.vue';
|
||||
|
||||
// 获取父组件值、方法
|
||||
const props = defineProps({
|
||||
itemData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
moreStatus:{
|
||||
type: String,
|
||||
default: 'loading'
|
||||
},
|
||||
loading:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
// ------定义变量------
|
||||
const scrollinto = ref('tab0'); //tab切换
|
||||
const store = useStore();
|
||||
const tabIndex = ref(store.state.taskStatus); //当前tab
|
||||
const scrollH = ref(0); //滚动高度
|
||||
const emptyInfo = ref('未找到相关任务');
|
||||
const tabBars = reactive(['待提货', '在途', '已完成']);
|
||||
const emit = defineEmits(['setTabIndex','searchSubmit']);
|
||||
const page = ref();
|
||||
const pageSize = ref();
|
||||
const taskId = ref(''); // 任务ID
|
||||
const isSearch = ref(true) // 搜索是否可点
|
||||
const range = ref() // 日期选择
|
||||
const orderId = ref('') // 搜索
|
||||
|
||||
// 将对应Id 做provide处理 方便后面使用
|
||||
|
||||
provide('taskId', taskId)
|
||||
|
||||
// ------生命周期------
|
||||
onMounted(() => {
|
||||
// 获取屏幕信息
|
||||
uni.getSystemInfo({
|
||||
success: function(res) {
|
||||
// 获取元素信息
|
||||
let info = uni.createSelectorQuery().select('.swiperH');
|
||||
info
|
||||
.boundingClientRect(function(data) {
|
||||
//data - 各种参数
|
||||
scrollH.value = data.height + 140;
|
||||
})
|
||||
.exec();
|
||||
}
|
||||
});
|
||||
});
|
||||
// 监听日期变更 调试是否可筛选状态
|
||||
watchEffect(() => {
|
||||
if (range.value){
|
||||
isSearch.value = false
|
||||
}
|
||||
})
|
||||
// ------定义方法------
|
||||
|
||||
// 卡片点击去往对应详情的url 处理
|
||||
const filterUrl = (item) => {
|
||||
let src = ''
|
||||
if (tabIndex.value == 0){
|
||||
src = `/pages/index/details?id=${item.id}`
|
||||
} else {
|
||||
switch (Number(item.status)){
|
||||
case 1: // 待提货
|
||||
src = `/pages/index/details?id=${item.id}`
|
||||
break;
|
||||
case 2: // 在途
|
||||
src = `/pages/index/detailsRoad?id=${item.id}`
|
||||
break;
|
||||
case 4: // 已交付
|
||||
src = `/pages/index/refister?id=${item.transportTaskId}&time=${item.actualDepartureTime}`
|
||||
break;
|
||||
case 6: // 已完成（已等级）- 交付之后需要回车等记
|
||||
src = `/pages/index/detailsSuccess?id=${item.id}`
|
||||
break;
|
||||
default: // 3 改派 、5 作废
|
||||
src = ``
|
||||
break;
|
||||
}
|
||||
}
|
||||
return src
|
||||
}
|
||||
// 搜索按钮
|
||||
function searchHandle(type){
|
||||
const params = type == 'time' ? range : type
|
||||
emit('searchSubmit', params)
|
||||
}
|
||||
// 上拉刷新
|
||||
function scrolltoupperHandle(){
|
||||
emit('setTabIndex', tabIndex.value)
|
||||
}
|
||||
// tab选项卡切换轮播
|
||||
const changeTab = index => {
|
||||
// 点击的还是当前数据的时候直接return
|
||||
if (tabIndex.value == index) {
|
||||
return;
|
||||
}
|
||||
tabIndex.value = index;
|
||||
emit('setTabIndex', index)
|
||||
// 滑动
|
||||
// scrollinto.value = 'tab' + index;
|
||||
};
|
||||
//
|
||||
function maskClick(time){
|
||||
console.log(time)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style src="../index.scss" lang="scss"></style>
|
||||
<style lang="scss">
|
||||
.searchCont{
|
||||
background-color: #fff;
|
||||
padding: 0rpx 30rpx 30rpx 30rpx;
|
||||
.searchBut{
|
||||
width: 180rpx;
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
.timeSearch{
|
||||
display: flex;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
::v-deep .uniui-clear::before{
|
||||
display: none;
|
||||
}
|
||||
::v-deep .uni-input-wrapper{
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,55 @@
|
||||
<!-- 订单列表 - 已完成、待提货、在途的详情页面中使用 -->
|
||||
<template>
|
||||
<view class="orderCont">
|
||||
<view class="search">
|
||||
<uni-icons class="searchIcon" @click="search()" type="search"></uni-icons>
|
||||
<input type="text" class="searchInput" @input="onKeyInput" @confirm="search" confirm-type="search" placeholder="请输入运单号" />
|
||||
</view>
|
||||
<view class="items">
|
||||
<view class="item" v-for="item in itemData">
|
||||
<text class="odd">{{item.id}}</text>
|
||||
<text class="piece">{{item.count}} 件</text>
|
||||
<text class="weight">{{item.totalWeight}} kg</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup >
|
||||
import { ref } from 'vue'
|
||||
// 获取父组件值、方法
|
||||
const props = defineProps({
|
||||
itemData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
searchHandle: {
|
||||
type: Function(),
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['searchHandle']);
|
||||
|
||||
// 订单号
|
||||
const orderId = ref('')
|
||||
|
||||
// 搜索按钮
|
||||
const search = ()=>{
|
||||
if(orderId.value == ''){
|
||||
uni.showToast({
|
||||
title: '请输入运单号',
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
return
|
||||
}
|
||||
emit('searchHandle', orderId.value)
|
||||
}
|
||||
// 输入值记录到orderId
|
||||
const onKeyInput = (event) => {
|
||||
orderId.value = event.detail.value
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style src="../index.scss" lang="scss"></style>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!-- 运算路线 -->
|
||||
<template>
|
||||
<view class="routeItem" >
|
||||
<view class="routeLine">
|
||||
<view class="routePoint">
|
||||
<view class="tit"> <text>{{itemData.startProvince}}</text> </view>
|
||||
<view class=""> <text>{{itemData.startCity}}</text> </view>
|
||||
</view>
|
||||
<view class="route">
|
||||
<view class="line" style="">
|
||||
<image class="LineImg" src="../../../static/sj_route_line.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="routePoint">
|
||||
<view class="tit"> <text>{{itemData.endProvince}}</text> </view>
|
||||
<view class=""> <text>{{itemData.endCity}}</text> </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="navigat" v-if="type == 'navigation'">
|
||||
<image class="naviIcon" src="../../../static/sj_navigation.png" mode=""></image>
|
||||
<view class="" @click="() => openMap(itemData.startAddress,itemData.endAddress, '开始导航')">
|
||||
<text>开始导航</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup >
|
||||
import { openMap } from '@/utils/index.js'
|
||||
// 获取父组件值、方法
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
default: 'navigation'
|
||||
},
|
||||
itemData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style src="../index.scss" lang="scss"></style>
|
||||
@@ -0,0 +1,71 @@
|
||||
|
||||
<!-- 单选按钮组件 - 回车登记页面使用 -->
|
||||
<template>
|
||||
<view class="refisterCards">
|
||||
<view class="title">
|
||||
{{data.title}}
|
||||
</view>
|
||||
<view class="items">
|
||||
<view class="item" v-for="(item, index) in data.data" :key="index" @click="activeHandel(item, index)">
|
||||
<view :class="{buttonDel: true, buttonAct: actVal == item}">
|
||||
<text>{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 布局填充用 -->
|
||||
<view v-if="data.data.length % 3 == 1 || data.data.length % 3 == 2" class="item"></view>
|
||||
<view v-if="data.data.length % 3 == 1" class="item"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup >
|
||||
import {ref} from 'vue'
|
||||
// 获取父组件值、方法
|
||||
const props = defineProps({
|
||||
// 展示源数据
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
// 设置默认值
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 选择数据的key
|
||||
choiceKey: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['choiceHandel'])
|
||||
|
||||
// 标记选择项
|
||||
let actVal = ref(props.value)
|
||||
|
||||
// 点击选中
|
||||
function activeHandel(val, index){
|
||||
actVal.value = val
|
||||
const param = {key: props.choiceKey, value:index+1, keyInt:val}
|
||||
emit('choiceHandel', param)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.refisterCards{
|
||||
.title{
|
||||
color: #2A2929;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.items{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.item{
|
||||
width: 29.5%;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user