yovinchen/sl-express
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
shuhongfan
2023-09-04 16:40:17 +08:00
commit cf5ac25c14
8267 changed files with 1305066 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
project-wl-siji-uniapp-vue3/pages/api/index.js Normal file
View File

@@ -0,0 +1,100 @@
import {
request,
requestUpload
} from "../../utils/request.js"
/**
*
* 任务的相关接口
*/
// 获取任务列表（包含待提货、在途、已完成）
export const GetTasksList = (params) =>
request({
url: '/tasks/list',
method: 'get',
params
})
// 获取任务详情
export const GetTaskDetails = (jobId) =>
request({
url: `/tasks/details/${jobId}`,
method: 'get',
})
// 获取任务详情 - 订单
export const GetTaskDetailsOrders = (params) =>
request({
url: `/tasks/orders`,
method: 'get',
params
})
// 延迟提货 - 提交
export const PutDelay = (params) =>
request({
url: `/tasks/delay`,
method: 'put',
params
})
// 联系调度中心电话
export const GetPhone = () =>
request({
url: `/tasks/dispatchCenterPhone`,
method: 'get',
})
// 提货
export const TakeDelivery = (params) =>
request({
url: `/tasks/takeDelivery`,
method: 'post',
params
})
// 上报异常
export const Exception = (params) =>
request({
url: `/tasks/exception`,
method: 'post',
params
})
// 异常详情
export const ExceptionDetails = (id) =>
request({
url: `/tasks/exception/${id}`,
method: 'get',
})
// 回车等级
export const TruckRegistration = (params) =>
request({
url: `/tasks/truckRegistration`,
method: 'post',
params
})
// 交付
export const Deliver = (params) =>
request({
url: `/tasks/deliver`,
method: 'post',
params
})
// 图片上传
export const upload = (params) =>
requestUpload({
url: `/files/imageUpload`,
method: 'post',
data:params,
params
})
// 上报位置
export const PositionUpload = (params) =>
request({
url: `/track/upload`,
method: 'put',
data:params,
params
})

23
project-wl-siji-uniapp-vue3/pages/api/news.js Normal file
View File

@@ -0,0 +1,23 @@
import {
request
} from "../../utils/request.js"
// 公告/公告详情/系统通知列表公用接口
export const getNewList = (params) =>
request({
url: `/messages/page`, //3代表快递员端接口
method: 'get',
params
})
// 标记已读
export const msgRead= (id) =>
request({
url: `/messages/${id}`,
method: 'put'
})
// 全部已读
export const msgAllRead= (params) =>
request({
url: `/messages/readAll?ids=${params}`,
method: 'put',
params
})

84
project-wl-siji-uniapp-vue3/pages/api/user.js Normal file
View File

@@ -0,0 +1,84 @@
import {
request
} from "../../utils/request.js"
// 手机号登录
export const phoneLogins = (params) =>
request({
url: `/login/phone`,
method: 'post',
params
})
// 账号登录
export const userLogins = (params) =>
request({
url: `/login/account`,
method: 'post',
params
})
// 发送短信验证码
export const getsmsCode = (params) =>
request({
url: `/users/sendCode`,
method: 'post',
params
})
// 验证码效验
export const checksmsCode = (params) =>
request({
url: `/users/verifyCode`,
method: 'post',
params
})
// 绑定手机号
export const bindPhone = (params) =>
request({
url: `/users/editPhone`,
method: 'put',
params
})
// 修改密码
export const changePass = (params) =>
request({
url: `/users/editPassword`,
method: 'put',
params
})
// 获取用户信息
export const getUserInfo = (params) =>
request({
url: `/users`,
method: 'get',
params
})
// 我的相关接口研发
// 车辆信息
export const getCarInfo = (params) =>
request({
url: `/users/truck`,
method: 'get',
params
})
// 任务数据
export const getTaskData = (params) =>
request({
url: `/users/taskReport`,
method: 'get',
params
})
// 修改手机号
export const uptPhone = (params) =>
request({
url: `/users/editPhone`,
method: 'put',
params
})
// 修改密码
export const uptPassword = (params) =>
request({
url: `/users/editPassword`,
method: 'put',
params
})

53
project-wl-siji-uniapp-vue3/pages/index/components/DetailsBaseInfo.vue Normal file
View File

@@ -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
View 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>

55
project-wl-siji-uniapp-vue3/pages/index/components/OrderCont.vue Normal file
View File

@@ -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>

42
project-wl-siji-uniapp-vue3/pages/index/components/RouteCont.vue Normal file
View File

@@ -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>

71
project-wl-siji-uniapp-vue3/pages/index/components/refisterCards.vue Normal file
View File

@@ -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>

191
project-wl-siji-uniapp-vue3/pages/index/delayed.vue Normal file
View File

@@ -0,0 +1,191 @@
<!-- 延迟交货 -->
<template>
<!-- end -->
<view class="pageBox">
<!-- title -->
<DetailsNav title="延迟提货"></DetailsNav>
<!-- 取件状态列表 -->
<view class="container">
<view class="delayedCont">
<view class="lineBoder">
<text>原定时间</text>
<text class="label">{{ orgTime }}</text>
</view>
<view class="lineBoder">
<text>延迟时间</text>
<picker
mode="time"
:value="time"
start="09:01"
end="21:01"
@change="bindTimeChange"
>
<view class="uni-input timeInfo">
<text>{{ time }}</text>
<image
class="iconImg"
src="../../static/sj_open_rit.png"
mode=""
></image>
</view>
</picker>
</view>
<view class="">
<textarea
class="textInput"
v-model="formData.delayReason"
placeholder-style="color:#818181"
placeholder="请输入延迟提货原因"
/>
</view>
<view class="butCont">
<text
class="button buttonDis1"
v-show="formData.delayReason == '' || time == '不可超过两小时'"
>提交</text
>
<text
class="button"
v-show="formData.delayReason != '' && time != '不可超过两小时'"
@click="formActioin()"
>提交</text
>
</view>
</view>
</view>
<!-- end -->
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
// 导入接口
import { PutDelay } from '@/pages/api/index.js';
// 导入组件
import DetailsNav from '@/components/DetailsNav/index.vue';
// 主体部分
// ------定义变量------
const orgTime = ref(); // 原定提货时间
const time = ref('不可超过两小时');
// 提交数据
const formData = ref({
id: '',
delayTime: '',
delayReason: '',
});
// ------生命周期------
onMounted(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1].$page.options;
orgTime.value = currentPage.time;
formData.value.id = currentPage.id;
});
// ------定义方法------
const bindTimeChange = (e) => {
time.value = e.detail.value;
};
// 延迟提货提交
const formActioin = async () => {
const data = formData.value;
// 延迟时间必选
if (time.value == '不可超过两小时') {
uni.showToast({
title: '请选择延迟时间！',
duration: 1000,
icon: 'none',
});
return;
}
// 请填写延迟提货原因
if (data.delayReason.trim() == '') {
uni.showToast({
title: '请填写延迟提货原因！',
duration: 1000,
icon: 'none',
});
return;
}
// 网络慢的时候添加按钮loading
let times = setTimeout(() => {
uni.showLoading({
title: 'loading',
mask:true
});
}, 500);
// 原始时间
const lastTime = orgTime.value;
// 替换处理 延迟的实际时间
data.delayTime = lastTime.replace(/(\d+){2}(:\d+){1}/, time.value);
// 延迟提货
await PutDelay(formData.value)
.then((res) => {
if (res.code === 200) {
// 操作成功后清除loading
setTimeout(function () {
uni.hideLoading();
}, 500);
clearTimeout(times);
uni.showToast({
title: '延迟提货提交成功',
duration: 1000,
icon: 'none',
});
setTimeout(() => {
uni.navigateTo({
url: '/pages/index/index',
});
}, 500);
} else {
uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none',
});
}
})
.catch((err) => {});
};
</script>
<style lang="scss">
@import url('@/styles/theme.scss');
.delayedCont {
background-color: var(--neutral-color-white);
margin: 30rpx;
padding: 30rpx 30rpx 40rpx 30rpx;
border-radius: 20rpx;
font-size: var(--font-size-14);
.lineBoder {
display: flex;
justify-content: space-between;
padding: 40rpx 0;
border-bottom: solid 1px var(--neutral-color-cancel);
.label {
color: var(--neutral-color-font);
}
}
.textInput {
font-size: var(--font-size-14);
background-color: var(--neutral-color-cancel);
width: 100%;
border-radius: 20rpx;
margin-top: 40rpx;
padding: 30rpx;
box-sizing: border-box;
}
.butCont {
width: 60%;
margin: 40rpx auto 0 auto;
}
.timeInfo {
display: flex;
line-height: 48rpx;
.iconImg {
width: 48rpx;
height: 48rpx;
}
}
}
</style>

338
project-wl-siji-uniapp-vue3/pages/index/details.vue Normal file
View File

@@ -0,0 +1,338 @@
<!-- 待提货 - 详情 -->
<template>
<!-- 详情 -->
<view class="details">
<DetailsNav title="任务详情"></DetailsNav>
<!-- 取件状态列表 -->
<view class="container">
<!-- 垂直滚动区域 scroll和swiper的高度都要给且是一样的高度-->
<scroll-view scroll-y="true" class="swiperH">
<view class="cont" v-if="Object.keys(itemData).length > 0">
<!-- 通用卡片组件 - 待提货 - 带开关 -->
<CardCont title="基本信息" :open="true">
<DetailsBaseInfo :itemData="itemData"></DetailsBaseInfo>
</CardCont>
<CardCont title="车辆司机信息">
<view class="carInfo">
<view class="line">
<text class="tit">车牌号</text>
<text class="ritEl">{{ itemData.licensePlate }}</text>
</view>
<view class="line">
<text class="tit">司机姓名</text>
<text class="ritEl">{{ itemData.driverName }}</text>
</view>
</view>
</CardCont>
<CardCont title="运输路线">
<RouteCont :itemData="itemData" type="route"></RouteCont>
</CardCont>
<CardCont title="物品信息" :label="`共计: ${amount}单`">
<OrderCont
:itemData="orders"
@searchHandle="searchHandle"
></OrderCont>
</CardCont>
<CardCont title="提货信息">
<view class="upPicCont">
<view class="title">请拍照上传回单凭证</view>
<uni-file-picker
v-model="cargoPickUpPicture"
fileMediatype="image"
mode="grid"
limit="3"
@select="selectA"
/>
</view>
<view class="upPicCont">
<view class="title">请拍照上传货品照片</view>
<uni-file-picker
v-model="cargoPicture"
fileMediatype="image"
mode="grid"
limit="3"
@select="selectB"
/>
</view>
</CardCont>
</view>
<!-- 无数据显示 -->
<view v-if="Object.keys(itemData).length === 0">
<EmptyPage emptyInfo="暂无数据!" />
</view>
<!-- end -->
</scroll-view>
</view>
<!-- end -->
</view>
<!-- footer -->
<view class="footCont">
<view class="footButCan">
<text class="buttonCancel" @click="delayedHandle()">延迟提货</text>
</view>
<view class="footBut">
<text v-show="isTake" class="button" @click="takeGoods()">提货</text>
<text v-show="!isTake" class="buttonDis1">提货</text>
</view>
</view>
<!-- end -->
</template>
<script setup>
import {
ref,
reactive,
onMounted,
onUpdated,
watch,
watchEffect,
computed,
inject,
} from 'vue';
import { useStore } from 'vuex';
import { positionUploadHandle } from '@/utils/index.js';
// 导入接口
import {
GetTaskDetails,
GetTaskDetailsOrders,
TakeDelivery,
} from '@/pages/api/index.js';
// 导入组件
import DetailsNav from '@/components/DetailsNav/index.vue';
import EmptyPage from '@/components/EmptyPage/index.vue';
import DetailsBaseInfo from './components/DetailsBaseInfo.vue';
import OrderCont from './components/OrderCont.vue';
import RouteCont from './components/RouteCont.vue';
// 主体部分
import CardCont from '@/components/CardCont/index.vue';
// 接口调用
import { upload } from '@/pages/api/index.js';
// ------定义变量------
const store = useStore(); //vuex获取储存数据
const itemData = ref([]);
const orders = ref([]); // 货物信息列表
const amount = ref(0); // 货物信息总数
const id = ref(''); // 任务Id
const cargoPickUpPicture = ref([]); // 提货凭证
const cargoPicture = ref([]); // 货物照片
const isTake = ref(true); // 是否可提货
const taskId = ref('');
// ------生命周期------
onMounted(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1].$page.options;
id.value = currentPage.id;
getDetailsInfo();
});
// 监听是否可以提货
watchEffect(
[
cargoPickUpPicture,
() => {
isTake.value = cargoPickUpPicture.length > 0 && cargoPicture.length > 0;
},
],
[
cargoPicture,
() => {
isTake.value = cargoPickUpPicture.length > 0 && cargoPicture.length > 0;
},
]
);
// ------定义方法------
// 获取任务详情的数据
const getDetailsInfo = async () => {
// 获取任务详情的数据
await GetTaskDetails(id.value)
.then((res) => {
const { data } = res;
if (res.code === 200) {
itemData.value = data;
getOrders(data.transportTaskId);
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none',
});
}
})
.catch((err) => {});
};
// 获取物品订单信息
const getOrders = async (orderId, transportOrderId = '') => {
const params = {
transportOrderId,
taskId: orderId,
page: 1,
pageSize: 100,
};
await GetTaskDetailsOrders(params)
.then((res) => {
if (res.code === 200) {
amount.value = res.data.counts ? res.data.counts : 0;
orders.value = res.data.items;
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none',
});
}
})
.catch((err) => {});
};
// 物品信息搜索
function searchHandle(transportOrderId) {
getOrders(itemData.value.transportTaskId, transportOrderId);
}
// 延迟提货
function delayedHandle() {
const data = itemData.value;
uni.navigateTo({
url: `/pages/index/delayed?id=${data.id}&time=${data.planDepartureTime}`,
});
}
// 提货
async function takeGoods() {
const cargoPickUpPictureStr = cargoPickUpPicture.value
.map((n) => n.path)
.join();
const cargoPictureStr = cargoPicture.value.map((n) => n.path).join();
const params = {
id: id.value,
cargoPickUpPicture: cargoPickUpPictureStr,
cargoPicture: cargoPictureStr,
};
// 网络慢的时候添加按钮loading
let times = setTimeout(() => {
uni.showLoading({
title: 'loading',
mask:true
});
}, 500);
await TakeDelivery(params)
.then((res) => {
if (res.code === 200) {
// 提货之后上报位置
positionUploadHandle(true);
// 操作成功后清除loading
setTimeout(function () {
uni.hideLoading();
}, 500);
clearTimeout(times);
uni.showToast({
title: '提货完成',
duration: 1000,
icon: 'none',
});
uni.redirectTo({
url: '/pages/index/index',
});
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none',
});
}
})
.catch((err) => {});
}
// 文件上传
async function uploadHande(e, type) {
await upload(e)
.then((res) => {
if (res.code === 200) {
if (res.data) {
isTake.value = true;
const name = res.data.split('/')[res.data.split('/').length - 1]; // .at(-1) 新语法APP不支持
let data = {
url: res.data,
name,
extName: name.split('.')[name.split('.').length - 1],
};
if (type == 'cargoPickUpPicture') {
cargoPickUpPicture.value = [...cargoPickUpPicture.value, data];
} else {
cargoPicture.value = [...cargoPicture.value, data];
}
}
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none',
});
}
})
.catch((err) => {
uni.showToast({
title: '图片上传失败！请联系管理员',
duration: 1000,
icon: 'none',
});
});
}
// 文件选择并上传 - 回单凭证上传
async function selectA(e) {
cargoPickUpPicture.value = [];
const tempFiles = e.tempFiles[0];
if (
tempFiles.size < 1024 * 5 * 1024 &&
(tempFiles.extname == 'png' ||
tempFiles.extname == 'jpg' ||
tempFiles.extname == 'jpeg' ||
tempFiles.extname == 'gif')
) {
uploadHande(e, 'cargoPickUpPicture');
} else {
uni.showToast({
title: '上传图片大小不能超过5M，格式需为jpg、png、gif',
duration: 2000,
icon: 'none',
});
}
}
// 文件选择并上传 - 货品照片上传
async function selectB(e) {
cargoPicture.value = [];
const tempFiles = e.tempFiles[0];
if (
tempFiles.size < 1024 * 5 * 1024 &&
(tempFiles.extname == 'png' ||
tempFiles.extname == 'jpg' ||
tempFiles.extname == 'jpeg' ||
tempFiles.extname == 'gif')
) {
uploadHande(e, 'cargoPicture');
} else {
uni.showToast({
title: '上传图片大小不能超过5M，格式需为jpg、png、gif',
duration: 2000,
icon: 'none',
});
}
}
</script>
<style src="./index.scss" lang="scss"></style>
<style lang="scss" scoped>
.details {
height: calc(100vh - 120rpx);
.swiperH {
height: calc(100vh - 210rpx);
padding-bottom: 26rpx;
}
}
</style>

378
project-wl-siji-uniapp-vue3/pages/index/detailsRoad.vue Normal file
View File

@@ -0,0 +1,378 @@
<!-- 在途 - 详情 -->
<template>
<!-- 详情 -->
<view class="details">
<DetailsNav title="任务详情"></DetailsNav>
<!-- 取件状态列表 -->
<view class="container">
<!-- 垂直滚动区域 scroll和swiper的高度都要给且是一样的高度-->
<scroll-view scroll-y="true" class="swiperH">
<view class="cont" v-if="Object.keys(itemData).length > 0">
<!-- 通用卡片组件 - 在途 - 带开关 -->
<CardCont title="基本信息" :open="true">
<DetailsBaseInfo :itemData="itemData"></DetailsBaseInfo>
</CardCont>
<!-- 司机信息 -->
<CardCont title="车辆司机信息">
<view class="carInfo">
<view class="line">
<text class="tit">车牌号</text>
<text class="ritEl">{{ itemData.licensePlate }}</text>
</view>
<view class="line">
<text class="tit">司机姓名</text>
<text class="ritEl">{{ itemData.driverName }}</text>
</view>
</view>
</CardCont>
<CardCont title="运输路线">
<RouteCont :itemData="itemData"></RouteCont>
</CardCont>
<!-- 物品信息 -->
<CardCont title="物品信息" :label="`共计: ${amount}单`">
<OrderCont
:itemData="orders"
@searchHandle="searchHandle"
></OrderCont>
</CardCont>
<!-- 异常信息 -->
<CardCont title="异常信息">
<view v-for="(item, index) in itemData.exception" :key="index">
<view class="delay">
<view class="info">
<view class="line">
<text>上报时间 </text
><text class="desc"> {{ item.exceptionTime }} </text>
</view>
<view class="line">
<text>异常类型 </text
><text class="desc"> {{ item.exceptionType }} </text>
</view>
<view class="line">
<text>继续运输 </text
><text class="desc"> {{ item.processResults }} </text>
</view>
</view>
<image
@click="ExceptionHandle('?id=' + item.exceptionId)"
class="goInfoIcon"
src="../../static/sj_open_rit.png"
mode=""
></image>
</view>
</view>
</CardCont>
<!-- 交货信息 -->
<CardCont title="交货信息">
<view class="upPicCont">
<view class="title">请拍照上传回单凭证</view>
<uni-file-picker
v-model="cargoPickUpPicture"
fileMediatype="image"
mode="grid"
limit="3"
@select="selectA"
/>
</view>
<view class="upPicCont">
<view class="title">请拍照上传货品照片</view>
<uni-file-picker
v-model="cargoPicture"
fileMediatype="image"
mode="grid"
limit="3"
@select="selectB"
/>
</view>
</CardCont>
</view>
<!-- 无数据显示 -->
<view v-if="Object.keys(itemData).length === 0">
<EmptyPage emptyInfo="暂无数据!" />
</view>
<!-- end -->
</scroll-view>
</view>
<!-- end -->
</view>
<!-- footer -->
<view class="footCont">
<view class="footButCan">
<text class="buttonCancel" @click="ExceptionHandle()">上报异常</text>
</view>
<view class="footBut">
<text v-show="isTake" class="button" @click="takeGoods()">交付</text>
<text v-show="!isTake" class="buttonDis1">交付</text>
</view>
</view>
<!-- end -->
</template>
<script>
export default {
mounted() {
// #ifdef APP-NVUE
const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
// #endif
// #ifndef APP-NVUE
const eventChannel = this.getOpenerEventChannel();
// #endif
eventChannel.emit('acceptDataFromOpenedPage', {
data: 'data from test page',
});
eventChannel.emit('someEvent', {
data: 'data from test page for someEvent',
});
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage');
},
};
</script>
<script setup>
import { ref, reactive, onMounted, watchEffect } from 'vue';
import { useStore } from 'vuex';
import { positionUploadHandle } from '@/utils/index.js';
// 导入接口
import {
GetTaskDetails,
GetTaskDetailsOrders,
Deliver,
} from '@/pages/api/index.js';
// 导入组件
import DetailsNav from '@/components/DetailsNav/index.vue';
import EmptyPage from '@/components/EmptyPage/index.vue';
import DetailsBaseInfo from './components/DetailsBaseInfo.vue';
import OrderCont from './components/OrderCont.vue';
import RouteCont from './components/RouteCont.vue';
// 接口调用
import { upload } from '@/pages/api/index.js';
// 主体部分
import CardCont from '@/components/CardCont/index.vue';
// ------定义变量------
const store = useStore(); //vuex获取储存数据
const itemData = ref([]);
const orders = ref([]); // 货物信息列表
const amount = ref(0); // 货物信息总数
const id = ref(''); // 任务Id
const cargoPickUpPicture = ref([]); // 提货凭证
const cargoPicture = ref([]); // 货物照片
const isTake = ref(false);
// ------生命周期------
onMounted(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1].$page.options;
id.value = currentPage.id;
getDetailsInfo();
getOrders();
});
// 监听是否可以提货
watchEffect(
[
cargoPickUpPicture,
() => {
isTake.value = cargoPickUpPicture.length > 0 && cargoPicture.length > 0;
},
],
[
cargoPicture,
() => {
isTake.value = cargoPickUpPicture.length > 0 && cargoPicture.length > 0;
},
]
);
// ------定义方法------
// 获取任务详情的数据
const getDetailsInfo = async () => {
// 获取任务详情的数据
await GetTaskDetails(id.value)
.then((res) => {
const { data } = res;
if (res.code === 200) {
itemData.value = data;
getOrders(data.transportTaskId);
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none',
});
}
})
.catch((err) => {});
};
// 获取物品订单信息
const getOrders = async (orderId, transportOrderId = '') => {
const params = {
transportOrderId,
taskId: orderId,
page: 1,
pageSize: 100,
};
await GetTaskDetailsOrders(params)
.then((res) => {
if (res.code === 200) {
amount.value = res.data.counts ? res.data.counts : 0;
orders.value = res.data.items;
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none',
});
}
})
.catch((err) => {});
};
// 物品信息搜索
function searchHandle(transportOrderId) {
getOrders(itemData.value.transportTaskId, transportOrderId);
}
// 上报异常 、异常详情
function ExceptionHandle(src) {
uni.showToast({
title: '上报异常暂时接口还在实现中！',
duration: 1000,
icon: 'none',
});
return false;
const url = src ? `/pages/index/exception${src}` : '/pages/index/exception';
uni.navigateTo({ url });
}
// 交付
async function takeGoods() {
const cargoPickUpPictureStr = cargoPickUpPicture.value
.map((n) => n.path)
.join();
const cargoPictureStr = cargoPicture.value.map((n) => n.path).join();
const params = {
id: id.value,
transportCertificate: cargoPickUpPictureStr,
deliverPicture: cargoPictureStr,
};
// 网络慢的时候添加按钮loading
let times = setTimeout(() => {
uni.showLoading({
title: 'loading',
mask:true
});
}, 500);
await Deliver(params)
.then((res) => {
if (res.code === 200) {
// 交付之后 上报位置
positionUploadHandle(true);
// 操作成功后清除loading
setTimeout(function () {
uni.hideLoading();
}, 500);
clearTimeout(times);
uni.showToast({
title: '提货完成',
duration: 1000,
icon: 'none',
});
uni.redirectTo({
url: '/pages/index/index',
});
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none',
});
}
})
.catch((err) => {});
}
// 图片上传
const imageValue = ref([]);
const upImg = ref(null);
// 文件上传
async function uploadHande(e, type) {
await upload(e)
.then((res) => {
if (res.code === 200) {
if (res.data) {
isTake.value = true;
const name = res.data.split('/')[res.data.split('/').length - 1]; // .at(-1) 新语法APP不支持
let data = {
url: res.data,
name,
extName: name.split('.')[name.split('.').length - 1],
};
if (type == 'cargoPickUpPicture') {
cargoPickUpPicture.value = [...cargoPickUpPicture.value, data];
} else {
cargoPicture.value = [...cargoPicture.value, data];
}
}
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none',
});
}
})
.catch((err) => {
uni.showToast({
title: '图片上传失败！请联系管理员',
duration: 1000,
icon: 'none',
});
});
}
// 文件选择并上传 - 回单凭证上传
async function selectA(e) {
cargoPickUpPicture.value = [];
const tempFiles = e.tempFiles[0];
if (
tempFiles.size < 1024 * 5 * 1024 &&
(tempFiles.extname == 'png' ||
tempFiles.extname == 'jpg' ||
tempFiles.extname == 'jpeg' ||
tempFiles.extname == 'gif')
) {
uploadHande(e, 'cargoPickUpPicture');
} else {
uni.showToast({
title: '上传图片大小不能超过5M，格式需为jpg、png、gif',
duration: 2000,
icon: 'none',
});
}
}
// 文件选择并上传 - 货品照片上传
async function selectB(e) {
cargoPicture.value = [];
const tempFiles = e.tempFiles[0];
if (
tempFiles.size < 1024 * 5 * 1024 &&
(tempFiles.extname == 'png' ||
tempFiles.extname == 'jpg' ||
tempFiles.extname == 'jpeg' ||
tempFiles.extname == 'gif')
) {
uploadHande(e, 'cargoPicture');
} else {
uni.showToast({
title: '上传图片大小不能超过5M，格式需为jpg、png、gif',
duration: 2000,
icon: 'none',
});
}
}
</script>
<style src="./index.scss" lang="scss"></style>
<style lang="scss" scoped>
.details {
height: calc(100vh - 120rpx);
.swiperH {
height: calc(100vh - 240rpx);
padding-bottom: 26rpx;
}
}
</style>

189
project-wl-siji-uniapp-vue3/pages/index/detailsSuccess.vue Normal file
View File

@@ -0,0 +1,189 @@
<!-- 已完成 - 详情 -->
<template>
<!-- 详情 -->
<view class="details">
<DetailsNav title="任务详情"></DetailsNav>
<!-- 取件状态列表 -->
<view class="container">
<!-- 垂直滚动区域 scroll和swiper的高度都要给且是一样的高度-->
<scroll-view scroll-y="true" class="successSwiperH">
<view class="cont" v-if="Object.keys(itemData).length > 0">
<!-- 通用卡片组件 - 待提货 - 带开关 -->
<CardCont title="基本信息" :open="true">
<DetailsBaseInfo :itemData="itemData"></DetailsBaseInfo>
</CardCont>
<CardCont title="车辆司机信息">
<view class="carInfo">
<view class="line"> <text class="tit">车牌号</text> <text class="ritEl">{{itemData.licensePlate}}</text>
</view>
<view class="line"> <text class="tit">司机姓名</text> <text class="ritEl">{{itemData.driverName}}</text>
</view>
</view>
</CardCont>
<CardCont title="运输路线">
<RouteCont :itemData="itemData" type="route"></RouteCont>
</CardCont>
<CardCont title="物品信息" :label="`共计: ${amount}单`">
<OrderCont :itemData="orders" @searchHandle="searchHandle"></OrderCont>
</CardCont>
<CardCont title="提货凭证">
<view class="upPicCont">
<div class="tit">回单凭证</div>
<view class="upPicContImg">
<img class="image" v-for="item in itemData.cargoPickUpPicture" :src="item" alt="" srcset="">
</view>
</view>
<view class="upPicCont">
<div class="tit">提货照片</div>
<view class="upPicContImg">
<img class="image" v-for="item in itemData.cargoPicture" :src="item" alt="" srcset="">
</view>
</view>
</CardCont>
<CardCont title="交货信息">
<view class="upPicCont">
<div class="tit">回单凭证</div>
<view class="upPicContImg">
<img class="image" v-for="item in itemData.deliverPicture" :src="item" alt="" srcset="">
</view>
</view>
<view class="upPicCont">
<div class="tit">货品照片</div>
<view class="upPicContImg">
<img class="image" v-for="item in itemData.transportCertificate" :src="item" alt="" srcset="">
</view>
</view>
</CardCont>
<CardCont title="异常信息">
</CardCont>
</view>
<!-- 无数据显示 -->
<view v-if="Object.keys(itemData).length === 0">
<EmptyPage emptyInfo="暂无数据!" />
</view>
<!-- end -->
</scroll-view>
</view>
<!-- end -->
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
onUpdated,
watch,
watchEffect,
computed,
inject
} from 'vue';
import {
useStore
} from 'vuex';
// 导入接口
import {
GetTaskDetails,
GetTaskDetailsOrders,
TakeDelivery
} from '@/pages/api/index.js';
// 导入组件
import DetailsNav from '@/components/DetailsNav/index.vue'
import EmptyPage from '@/components/EmptyPage/index.vue'
import DetailsBaseInfo from './components/DetailsBaseInfo.vue'
import OrderCont from './components/OrderCont.vue'
import RouteCont from './components/RouteCont.vue'
// 主体部分
import CardCont from '@/components/CardCont/index.vue';
// 接口调用
import {
upload
} from '@/pages/api/index.js'
// ------定义变量------
const store = useStore(); //vuex获取储存数据
const itemData = ref({});
const orders = ref([]); // 货物信息列表
const amount = ref(0); // 货物信息总数
const id = ref('') // 任务Id
const cargoPickUpPicture = ref([]) // 提货凭证
const cargoPicture = ref([]) // 货物照片
const isTake = ref(true) // 是否可提货
const taskId = ref('')
// ------生命周期------
onMounted(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1].$page.options;
id.value = currentPage.id;
getDetailsInfo();
});
// ------定义方法------
// 获取任务详情的数据
const getDetailsInfo = async () => {
// 获取任务详情的数据
await GetTaskDetails(id.value)
.then(res => {
const {
data
} = res
if (res.code === 200) {
itemData.value = data
getOrders(data.transportTaskId)
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none'
});
}
})
.catch(err => {});
};
// 获取物品订单信息
const getOrders = async (orderId, transportOrderId='' ) => {
const params = {
transportOrderId,
taskId: orderId,
page: 1,
pageSize: 100
}
await GetTaskDetailsOrders(params)
.then(res => {
if (res.code === 200) {
amount.value = res.data.counts ? res.data.counts : 0
orders.value = res.data.items
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none'
});
}
})
.catch(err => {});
}
// 物品信息搜索
function searchHandle(transportOrderId) {
getOrders(itemData.value.transportTaskId, transportOrderId)
}
</script>
<style src="./index.scss" lang="scss"></style>
<style lang="scss" scoped>
.details {
.successSwiperH {
height: calc(100vh - 160rpx);
padding-bottom: 26rpx;
}
}
</style>

279
project-wl-siji-uniapp-vue3/pages/index/exception.vue Normal file
View File

@@ -0,0 +1,279 @@
<!-- 上报异常 -->
<template>
<!-- end -->
<view class="pageBox">
<!-- title -->
<DetailsNav :title="title"></DetailsNav>
<!-- 取件状态列表 -->
<view class="container">
<view class="delayedCont">
<view class="lineBoder">
<text>异常时间</text>
<text v-if="type == 'details'">{{ exceptionsDeta.time }}</text>
<!-- <text v-else class="label">请选择</text> -->
<uni-datetime-picker
v-else
type="datetime"
v-model="exceptionsDeta.time"
:clear-icon="false"
/>
</view>
<view class="lineBoder">
<text>上报位置</text>
<text v-if="type == 'details'">{{ exceptionsDeta.province }}</text>
<text v-else class="label">请选择</text>
</view>
<view class="lineBoder">
<text>异常类型</text>
<text v-if="type == 'details'">{{ exceptionsDeta.type }}</text>
<view v-else class="label">
<Select :options="typeOptions"></Select>
</view>
</view>
<view v-if="type == 'details'" class="lineBoder noborder">
<view class="" style="width: 100%">
<view>
<text>异常描述</text>
</view>
<view>
<text class="desc">{{ exceptionsDeta.description }}</text>
</view>
</view>
</view>
<view v-else class="lineBoder">
<view class="" style="width: 100%">
<text>异常描述</text>
<textarea
class="textInput"
v-model="formData.delayReason"
placeholder-style="color:#818181"
placeholder="请输入异常描述"
/>
</view>
</view>
</view>
<view class="delayedCont">
<view :class="{ upPicCont: true, setBottom: type == 'details' }">
<view class="title">上传图片（最多6张）</view>
<view v-if="type == 'details'" class="exceptionImages">
<image
class="exceptionImage"
v-for="(item, index) in exceptionsDeta.images"
:src="item"
key="index"
mode=""
></image>
</view>
<uni-file-picker
v-else
v-model="imageValue"
fileMediatype="image"
mode="grid"
@select="select"
@progress="progress"
@success="success"
@fail="fail"
/>
</view>
</view>
</view>
<!-- end -->
<view class="footCont positionBot" style="justify-content: center">
<view class="footBut" style="width: 400rpx; flex: initial">
<text class="button" @click="exceptionHandle()">提交</text>
</view>
</view>
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
// 导入接口
import { Exception, ExceptionDetails } from '@/pages/api/index.js';
// 导入组件
import DetailsNav from '@/components/DetailsNav/index.vue';
import Select from '@/components/Select/index.vue';
// 主体部分
// ------定义变量------
const imageValue = ref([]); // 上次图片
const type = ref('add'); // 类型
const title = ref('上报异常'); // 标题
const exceptionId = ref(''); // 异常的id - 详情
const exceptionsDeta = ref({});
// 类型
const typeOptions = [
{ title: '发动机启动困难', value: '1' },
{ title: '不着车，漏油', value: '2' },
{ title: '照明失灵', value: '3' },
{ title: '有异常响动', value: '4' },
{ title: '排烟异常、温度异常', value: '5' },
{ title: '其他问题', value: '6' },
];
// 提交数据
const formData = ref({
id: '',
delayTime: '',
delayReason: '',
});
// ------生命周期------
onMounted(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1].$page.options;
if (Object.keys(currentPage).length > 0) {
type.value = 'details';
title.value = '异常详情';
exceptionId.value = currentPage.exceptionId;
getDetails();
} else {
type.value = 'add';
title.value = '上报异常';
}
});
// ------定义方法------
// 上报异常
const exceptionHandle = async () => {
// 网络慢的时候添加按钮loading
let times = setTimeout(() => {
uni.showLoading({
title: 'loading',
mask:true
});
}, 500);
// 上报异常
await Exception(formData)
.then((res) => {
if (res.code === 200) {
// 操作成功后清除loading
setTimeout(function () {
uni.hideLoading();
}, 500);
clearTimeout(times);
uni.showToast({
title: '提交成功',
duration: 1000,
icon: 'none',
});
setTimeout(() => {
uni.navigateTo({
url: '/pages/index/index',
});
}, 500);
} else {
uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none',
});
}
})
.catch((err) => {});
};
// 获取异常详情数据
async function getDetails() {
await ExceptionDetails({ exceptionId: exceptionId })
.then((res) => {
if (res.code === 200) {
const data = res.data;
data.images = [
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2411191727687.jpg&refer=http%3A%2F%2Fimg.duoziwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658645143&t=8fed835d7336cac9b3fedb170766a678',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F03%2F26%2FB1371.jpg&refer=http%3A%2F%2Fimg.duoziwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658645178&t=07a6e8bcc05b75d3dd86c369c70f7274',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F03%2F26%2FB2154.jpg&refer=http%3A%2F%2Fimg.duoziwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658645143&t=54afc59b141abad9f7799f005e20c944',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.duoziwang.com%2F2019%2F05%2F08211345608033.jpg&refer=http%3A%2F%2Fimg.duoziwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658645143&t=c8a2aa7a7bd874381fbb98bc4223e6fe',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F03%2F26%2FB1365.jpg&refer=http%3A%2F%2Fimg.duoziwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658645143&t=55b411cc1ad4aea58cef44fe11438f72',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.duoziwang.com%2F2019%2F04%2F07090912704156.jpg&refer=http%3A%2F%2Fimg.duoziwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658645143&t=fa6d42ffb721c66f1e42548895a64e89',
];
exceptionsDeta.value = res.data;
} else {
uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none',
});
}
})
.catch((err) => {});
}
// 获取上传状态
function select(e) {
console.log('选择文件：', e);
}
// 获取上传进度
function progress(e) {
console.log('上传进度：', e);
}
// 上传成功
function success(e) {
console.log('上传成功');
}
// 上传失败
function fail(e) {
console.log('上传失败：', e);
}
</script>
<style src="./index.scss" lang="scss"></style>
<style lang="scss">
@import url('@/styles/theme.scss');
.delayedCont {
background-color: var(--neutral-color-white);
margin: 30rpx;
padding: 30rpx 30rpx 40rpx 30rpx;
border-radius: 20rpx;
font-size: var(--font-size-14);
.lineBoder {
display: flex;
justify-content: space-between;
padding: 40rpx 0;
border-bottom: solid 1px var(--neutral-color-cancel);
.label {
color: var(--neutral-color-font);
}
}
.noborder {
border: none;
}
.desc {
display: inline-block;
padding-top: 40rpx;
}
.textInput {
font-size: var(--font-size-14);
background-color: var(--neutral-color-cancel);
width: 100%;
border-radius: 20rpx;
margin-top: 40rpx;
padding: 30rpx;
box-sizing: border-box;
}
.butCont {
width: 60%;
margin: 40rpx auto 0 auto;
}
.exceptionImages {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.exceptionImage {
width: 26vw;
height: 26vw;
margin-bottom: 3vw;
}
}
.setBottom {
margin-bottom: 0;
}
::v-deep .uni-input-placeholder {
text-align: right;
}
}
.positionBot {
position: fixed;
width: 100%;
bottom: 0;
}
</style>

257
project-wl-siji-uniapp-vue3/pages/index/index.scss Normal file
View File

@@ -0,0 +1,257 @@
.container{
border-radius: 20rpx;
.swiperH{
height: calc(100vh - 270rpx);
padding-bottom: 30rpx;
box-sizing: border-box;
}
.finshSwiperH{
height: calc(100vh - 460rpx);
}
.cont{
padding:0 30rpx;
}
}
// 首页 - 通用 - 左右结构
.carInfo{
.line{
.tit{
display: inline-block;
min-width: 120rpx;
}
display: flex;
justify-content: space-between;
color: var(--neutral-color-font);
font-size: var(--font-size-14);
line-height: 60rpx;
.ritEl{
color: var(--neutral-color-main);
}
}
}
// 详情-基本信息
.baseInfo{
.addrCont{
font-weight: 400;
font-size: 28rpx;
color: var(--neutral-color-font);
letter-spacing: 0.32rpx;
padding-bottom: 40rpx;
margin-bottom: 20rpx;
border-bottom: 1px solid var(--neutral-color-segmentation);
position: relative;
&:before{
position: absolute;
left: 18rpx;
color:var(--neutral-color-white);
text-align: center;
content: '';
display: inline-block;
width: 0px;
height: 56%;
border-left: dashed 2px var(--neutral-color-border);
border-radius: 11px;
}
.startAddr{
padding-left: 66rpx;
position: relative;
margin-bottom: 20rpx;
line-height: 44rpx;
&:before{
position: absolute;
font-size: 22rpx;
left: 0;
color:var(--neutral-color-white);
text-align: center;
content: '起';
display: inline-block;
width: 22px;
height: 22px;
background: var(--neutral-color-main);
border-radius: 11px;
}
}
.endAddr{
padding-left: 66rpx;
position: relative;
line-height: 44rpx;
&:before{
font-size: 22rpx;
position: absolute;
left: 0;
color: var(--neutral-color-white);
text-align: center;
content: '止';
display: inline-block;
width: 22px;
height: 22px;
background: var(--essential-color-red);
border-radius: 11px;
}
}
}
}
// 详情-运算路线
.routeItem{
display: flex;
justify-content: center;
align-items: center;
.navigat{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0rpx 0rpx 0rpx 40rpx;
border-left: 2rpx solid #EEEEEE;
margin-left: 20rpx;
font-size: var(--font-size-12);
.naviIcon{
width: 64rpx;
height: 64rpx;
}
}
.routeLine{
display: flex;
justify-content: space-between;
padding:0 20rpx;
flex:1;
.route{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
font-weight: 400;
font-size: var(--font-size-12);
color: var(--neutral-color-main);
flex: 1;
.line{
width: 80%;
.LineImg{
width: 72rpx;
height: 32rpx;
}
}
}
.routePoint{
text-align: center;
font-weight: 400;
font-size: var(--font-size-14);
color: var(--neutral-color-main);
line-height: 60rpx;
.tit{
font-weight: 600;
font-size: var(--font-size-16);
color: var(--neutral-color-main);
}
}
}
}
// 详情-物品信息
.orderCont{
.search{
margin-bottom: 20rpx;
position: relative;
.searchIcon{
position: absolute;
left: 20rpx;
top: 18rpx;
}
.searchInput{
background-color: var(--neutral-color-cancel);
border-radius: 32rpx;
font-size: var(--font-size-12);
line-height: 64rpx;
height: 64rpx;
padding: 0 20rpx 0 60rpx;
}
}
.items{
.item{
display: flex;
justify-content: space-between;
font-size: 28rpx;
line-height: 60rpx;
color: var(--neutral-color-main);
.odd{
flex: 1;
}
.piece, .weight{
text-align: right;
width: 200rpx;
}
}
}
}
// 详情-异常信息
.delay{
display: flex;
font-size: var(--font-size-14);
align-items: center;
border-bottom: solid 2rpx var(--neutral-color-background);
padding: 20rpx 0;
.info{
flex: 1;
color: var(--neutral-color-main);
.line{
line-height: 60rpx;
.desc{
padding-left: 40rpx;
color: var(--neutral-color-font);
}
}
}
.goInfoIcon{
width: 48rpx;
height: 48rpx;
}
}
// 图片上传
.upPicCont{
margin-bottom: 32rpx;
.title{
font-weight: 400;
font-size: var(--font-size-14);
color: var(--neutral-color-font);
margin-bottom: 32rpx;
}
.file-picker__box-content{
border:none;
background: var(--neutral-color-cancel);
}
// 已完成的详情图片回显
.tit{
font-size: 28rpx;
margin-bottom: 20rpx;
}
.upPicContImg{
display: flex;
.image{
width: 180rpx;
height: 180rpx;
margin:0 30rpx 30rpx 0;
}
.image:nth-child(3){
margin-right: 0;
}
}
}
// 详情 - 底部的两按钮
.footCont{
display: flex;
background-color: var(--neutral-color-white);
padding: 20rpx 30rpx;
box-sizing: border-box;
.footButCan{
flex: 125;
margin-right: 30rpx;
}
.footBut{
flex: 200;
}
}

148
project-wl-siji-uniapp-vue3/pages/index/index.vue Normal file
View File

@@ -0,0 +1,148 @@
<!-- 待提货-首页 -->
<template>
<!-- end -->
<view class="pageBox">
<!-- 取件状态列表 -->
<ItemList :itemData="itemData.value" @setTabIndex="setTabIndex" @searchSubmit="searchHandle" :loadding="loading" :moreStatus="moreStatus" />
<!-- end -->
</view>
<!-- footer -->
<UniFooter :pagePath="'pages/index/index'"></UniFooter>
<!-- end -->
</template>
<script>
export default {
name: 'list',
// 上拉刷新
onPullDownRefresh() {
uni.stopPullDownRefresh();
}
};
</script>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { useStore } from 'vuex';
// 导入接口
import { GetTasksList, GetTaskDetails, PositionUpload } from '@/pages/api/index.js';
import { positionsUploadInit } from '@/utils/index.js';
// 导入组件
// 底部导航
import UniFooter from '@/components/Footer/index.vue';
// 主体部分
import ItemList from './components/ItemList.vue';
// ------定义变量------
const store = useStore(); //vuex获取储存数据
const itemData = reactive([]);
const tabIndex = ref(store.state.taskStatus); //当前tab
const moreStatus = ref('loading'); //加载更多状态 loading more noMore
const loading = ref(false); // 是否展示加载更多
const date = new Date();
const year = date.getFullYear();
const month = computed(() => {
const mt = date.getMonth();
if (mt > 0 && mt < 10) {
return '0' + mt;
} else if (mt == 0) {
return 12;
} else {
return mt;
}
});
const month1 = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
const params = reactive({
status: tabIndex != 2 ? tabIndex.value + 1 : 4,
transportTaskId: '', // 运单号 非必传
page: 1,
pageSize: 10
});
const pages = ref(0); // 总页数
// ------生命周期------
onMounted(() => {
// 上报位置 进入首页立即上报
positionsUploadInit();
getNewData();
});
// ------定义方法------
const isSendRequest = ref(false); // 是否继续发送请求
// 获取任务列表
const getNewData = async type => {
if (isSendRequest.value) {
return;
}
loading.value = true;
let infoParams = {};
if (store.state.taskStatus === 2) {
infoParams = {
...params,
startTime: month.value == 12 ? `${year - 1}-${month.value}-${day}` : `${year}-${month.value}-${day}`,
endTime: `${year}-${month1}-${day}`
};
} else {
infoParams = {
...params
};
}
await GetTasksList(infoParams)
.then(res => {
if (res.code == 200) {
const { data } = res;
// 搜索数据处理
if (type && type == 'search') {
params.page = 1;
params.pageSize = 10;
itemData.value = data.items ? data.items : [];
} else {
// items == null 会报错 把他处理掉
const items = data.items == null ? [] : data.items;
// 从第一页请求 清空之前的数据
params.page == 1 ? (itemData.value = undefined) : null;
// 下拉数据合并
itemData.value = itemData.value ? [...itemData.value, ...items] : items;
// 如果 当前页面的数据已经全部数据了 那么停止拿数据
if (data.counts == 0) {
isSendRequest.value = true;
}
}
loading.value = false;
counts.value = data.pages;
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none'
});
}
})
.catch(err => {});
};
// 切换 1待提货、2在途、4已完成
const setTabIndex = index => {
const tab = store.state.taskStatus;
store.commit('setTaskStatus', index);
// 下拉加载和切换的时候处理分页参数
params.page = tab == index ? params.page + 1 : 1;
params.status = index != 2 ? index + 1 : 6;
isSendRequest.value = false;
getNewData();
};
// 已完成搜索
const searchHandle = val => {
// 已完成列表提交搜索
if (typeof val == 'string') {
params.transportTaskId = val;
} else {
params.startTime = val.value[0];
params.endTime = val.value[1];
}
getNewData('search');
};
</script>
<style src="./index.scss" lang="scss"></style>

222
project-wl-siji-uniapp-vue3/pages/index/refister.vue Normal file
View File

@@ -0,0 +1,222 @@
<!-- 回车登记 -->
<template>
<view>
<!-- 详情 -->
<view class="refister">
<DetailsNav title="回车登记"></DetailsNav>
<view class="container">
<!-- 垂直滚动区域 scroll和swiper的高度都要给且是一样的高度-->
<scroll-view scroll-y="true" class="swiperH">
<view class="boxBg">
<view class="infoCard">
<view class="line">
<text>出车时间</text>
<text>{{startTime}}</text>
</view>
<view class="line">
<text>回车时间</text>
<uni-datetime-picker type="datetime" v-model="params.endTime" :clear-icon="false" @change="changeLog" />
</view>
</view>
<!-- 通用卡片组件 - 待提货 - 带开关 -->
<CardCont title="车辆违章" type="redio" redioKey="isBreakRules" @redioChange = "redioChange">
<refisterCards :data="breakRulesType" :value="breakRulesType.data[0]" choiceKey="breakRulesType" @choiceHandel = "choiceHandel" />
<refisterCards :data="penaltyAmount" :value="penaltyAmount.data[0]" choiceKey="penaltyAmount" @choiceHandel = "choiceHandel" />
<refisterCards :data="deductPoints" :value="deductPoints.data[0]" choiceKey="deductPoints" @choiceHandel = "choiceHandel" />
</CardCont>
<CardCont title="车辆故障" type="redio" redioKey="isFault" @redioChange = "redioChange">
<!-- 车辆是否可用 -->
<refisterCards :data="isAvailable" :value="isAvailable.data[0]" choiceKey="isAvailable" @choiceHandel = "choiceHandel" />
<!-- 故障类型 -->
<refisterCards :data="faultType" :value="faultType.data[0]" choiceKey="faultType" @choiceHandel = "choiceHandel" />
<TextArea placeholder="请简单描述故障"></TextArea>
<ImageUpload title="请拍照" @uploadImage="uploadImage" tit='faultImages'></ImageUpload>
</CardCont>
<CardCont title="车辆事故" type="redio" redioKey="isAccident" @redioChange = "redioChange">
<refisterCards :data="accidentType" :value="accidentType.data[0]" choiceKey="accidentType" @choiceHandel = "choiceHandel" />
<TextArea placeholder="请简单描述故障"></TextArea>
<ImageUpload title="请拍照" @uploadImage="uploadImage" tit='accidentImages'></ImageUpload>
</CardCont>
</view>
</scroll-view>
</view>
<!-- end -->
</view>
<!-- footer -->
<view class="footCont">
<view class="footBut">
<text class="button" v-show="params.endTime != '' && (params.endTime).length == 19 " @click="submit()">交车</text>
<text class="button buttonDis1" v-show="params.endTime == '' || (params.endTime).length < 19" >交车</text>
</view>
</view>
<!-- end -->
</view>
</template>
<script setup>
import { ref, reactive, onMounted, onUpdated, watch, watchEffect, computed, inject } from 'vue';
// 导入接口
import { TruckRegistration } from '@/pages/api/index.js';
// 导入组件
import DetailsNav from '@/components/DetailsNav/index.vue'
import CardCont from '@/components/CardCont/index.vue';
import refisterCards from './components/refisterCards.vue'
import ImageUpload from '@/components/ImageUpload/index.vue'
import TextArea from '@/components/TextArea/index.vue'
// ------定义变量------
const startTime = ref('')
const breakRulesType = {
title: '违章类型',
data: ['闯红灯', '无证驾驶', '超载', '酒后驾驶', '超速驾驶']
}
const penaltyAmount = {
title: '罚款金额',
data: ['0元', '100元', '200元', '300元', '500元', '1000元', '2000元']
}
const deductPoints = {
title: '扣分',
data: ['0分', '1分', '2分', '3分', '6分', '12分']
}
const isAvailable = {
title: '车辆是否可用',
data: ['是', '否']
}
const faultType = {
title: '故障类型',
data: ['启动困难', '不着车', '漏油', '漏水', '照明失灵', '有异响', '排烟异常', '温度异常', '其他']
}
const accidentType = {
title: '事故类型',
data: ['直行事故', '追尾事故', '超车事故', '左转弯事故', '右转弯事故', '弯道事故', '坡道事故', '会车事故', '其他']
}
let params = reactive({
id: '',
startTime: '', //出车时间
endTime: '', //回车时间
isBreakRules: false, //违章
breakRulesType: 1, //违章类型
penaltyAmount: 1, //罚款金额
deductPoints: 1, //扣分
isFault: false, //是否有故障
isAvailable: true, //车辆是否可用
faultType: 1, //故障类型
faultImages: '', //故障图片
isAccident: false, // 是否有事故
accidentType: 1,
accidentImages: '' // 事故图片
})
// ------生命周期------
onMounted(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1].$page.options;
startTime.value = currentPage.time;
params.startTime = currentPage.time;
params.id = currentPage.id
});
// ------定义方法------
// 回车登级-交车数据提交
async function submit() {
// 网络慢的时候添加按钮loading
let times =
setTimeout(()=>{
uni.showLoading({
title: 'loading',
mask:true
});
},500)
await TruckRegistration(params)
.then(res => {
if (res.code === 200) {
// 操作成功后清除loading
setTimeout(function () {
uni.hideLoading();
}, 500);
clearTimeout(times)
uni.showToast({
title: '回车登记数据提交成功！',
duration: 1000,
icon: 'none'
});
uni.navigateTo({
url: '/pages/index/index'
})
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none'
});
}
})
.catch(err => {});
}
// 是否打开相关的违章、故障、事故并赋值到params
function redioChange(item){
params[item.key] = item.value == 2 ? true : false
}
// 图片上传
const uploadImage = (item) => {
if (item.key == 'accidentImages'){
params.accidentImages = params.accidentImages == '' ? item.value : params.accidentImages + ',' + item.value
} else {
params.faultImages = params.faultImages == '' ? item.value : params.faultImages + ',' + item.value
}
}
// 回车时间
function changeLog(e){
if (e.length < 19){
uni.showToast({
title: '请选择回车时间(包含日期及时间)',
duration: 3000,
icon: 'none'
});
}
}
// 选择违章的数据
function choiceHandel(item){
if (item.key == 'isAvailable'){
params[item.key] = item.value == 1 ? true : false
} else {
params[item.key] = item.value
}
}
</script>
<style src="./index.scss" lang="scss"></style>
<style lang="scss">
.refister .container{
padding-top: 30rpx;
font-size: var(--font-size-14);
.infoCard{
background: #FFFFFF;
border-radius: 20rpx;
padding:0 30rpx;
.line{
display: flex;
justify-content: space-between;
line-height: 60rpx;
border-bottom: solid 2rpx #EEEEEE;
padding: 20rpx 0;
.desc{
color: #818181;
}
}
.line:last-child{
border: none;
}
}
::v-deep .uni-input-placeholder{
text-align: right;
}
}
</style>

130
project-wl-siji-uniapp-vue3/pages/login/index.scss Normal file
View File

@@ -0,0 +1,130 @@
body,
uni-page-body,
uni-page-head,
.uni-page-head {
background-color: var(--neutral-color-white);
}
.loginBox {
padding: 100rpx 34rpx 0 66rpx;
.tit {
line-height: 66rpx;
font-weight: 600;
font-size: 48rpx;
color: var(--neutral-color-main);
letter-spacing: 0;
display: flex;
padding-bottom: 52rpx;
text {
flex: 1;
}
.text {
font-weight: 500;
margin-right: 30rpx;
font-size: 32rpx;
color: var(--essential-color-red);
text-align: right;
line-height: 50rpx;
padding-top: 14rpx;
icon {
background: url(../../static/icon_go.png) no-repeat;
background-size: contain;
width: 20rpx;
height: 20rpx;
margin-left: 14rpx;
vertical-align: unset;
}
}
}
.loginMain {
::v-deep .uni-input-input{
color: var(--neutral-color-main);
}
padding-right: 32rpx;
.item {
::v-deep .is-input-border {
padding: 30rpx 0;
font-weight: 400;
font-size: 32rpx;
line-height: 40rpx;
color: #797979;
letter-spacing: 0.36rpx;
border: 0 none;
border-bottom: 1px solid var(--neutral-color-background);
position: relative;
border-radius: 0;
.uni-easyinput__placeholder-class {
font-size: 32rpx;
color: var(--neutral-color-font);
letter-spacing: 0.36rpx;
}
.uni-easyinput__content-input {
padding-left: 0 !important;
font-size: 32rpx;
}
}
::v-deep .is-input-error-border {
border-bottom: 1px solid var(--essential-color-red);
margin-bottom: 44rpx;
}
::v-deep .content-clear-icon{
padding: 0;
font-size: 28rpx !important;
line-height: 46rpx;
}
::v-deep .uniui-eye-filled{
background: url(@/static/icon-close.png) 50% 50% no-repeat;
background-size: contain;
&:before{
color:transparent;
}
}
::v-deep .uniui-eye-slash-filled{
background: url(@/static/icon-open.png) 50% 50% no-repeat;
background-size: contain;
&:before{
color:transparent;
}
}
}
::v-deep .uni-forms-item__inner {
padding-bottom: 0;
}
::v-deep .uni-error-message {
bottom: -10rpx;
}
::v-deep .content-clear-icon {
margin-right: 30rpx;
}
.inputW{
::v-deep .is-input-border{
padding-right: 166rpx;
}
}
.codeBox {
position: absolute;
right: 40rpx;
top: 34rpx;
font-size: 28rpx;
}
}
.setUrl{
font-size: 24rpx;
color: #ccc;
line-height: 48rpx;
text-align: center;
margin-top: 40rpx;
}
}
.item {
icon {
position: absolute;
width: 32rpx;
height: 32rpx;
right: 0;
top: 40rpx;
}
}
.fontCol {
color: var(--neutral-color-font);
}

137
project-wl-siji-uniapp-vue3/pages/login/index.vue Normal file
View File

@@ -0,0 +1,137 @@
<!-- 手机号登录页面 -->
<template>
<!-- 公用nav -->
<view class="navBox"><uni-nav-bar title="神领物流" :border="false" /></view>
<!-- end -->
<view class="loginBox">
<view class="tit">
<text>手机号登录</text>
<text class="text" @click="goLogin">
账号登录
<icon></icon>
</text>
</view>
<!-- 登录表单 手机号、验证码 -->
<view class="loginMain">
<uni-forms ref="customForm" :rules="customRules" :modelValue="fromInfo">
<uni-forms-item name="phone"><uni-easyinput class="item" v-model="fromInfo.phone" placeholder="请输入手机号" /></uni-forms-item>
<uni-forms-item name="verifyCode">
<uni-easyinput class="item inputW" v-model="fromInfo.verifyCode" placeholder="请输入验证码" />
<view class="codeBox">
<text class="code" v-show="codeInfo.show" @click="getCode">获取验证码</text>
<text class="code fontCol" v-show="!codeInfo.show">{{ codeInfo.times }}s后重新获取</text>
</view>
</uni-forms-item>
</uni-forms>
<!-- 按钮 -->
<view class="btnBox" style="padding-top:100rpx;">
<text class="button"
:class="fromInfo.phone.length === 0 || fromInfo.verifyCode.length === 0 ? 'buttonDis1' : 'button'"
@click="handleSubmit"
>登 录</text>
</view>
<!-- end -->
</view>
<!-- end -->
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useStore } from 'vuex';
// 接口
import { phoneLogins, getUserInfo, getsmsCode } from '../api/user.js';
// 验证
import { validatePhone, timeCountdown, isPhone } from '@/utils/validate';
// ------定义变量------
const store = useStore(); //vuex获取储存数据
const customForm = ref();
const isVerifySuccess = ref(false);
// 表单数据
const fromInfo = reactive({
phone: '', //手机号
verifyCode: '' // 验证码
});
// 验证码倒计时数据
const codeInfo = reactive({
show: true,
timer: null,
times: 60
});
// 表单校验
const customRules = reactive({
phone: {
rules: [
{
required: true,
validateFunction: validatePhone,
errorMessage: '请输入手机号'
}
]
},
verifyCode: {
rules: [
{
required: true,
errorMessage: '请输入验证码'
}
]
}
});
// ------生命周期------
onMounted(() => {});
// ------定义方法------
// 获取验证码
const getCode = async () => {
let p = fromInfo.phone;
isVerifySuccess.value = isPhone(p);
if (isVerifySuccess.value) {
timeCountdown(codeInfo);
const parent = {
phone: phone.value
};
} else {
return uni.showToast({
title: '手机号输入错误！请重新输入',
duration: 1000,
icon: 'none'
});
}
};
// 登录
const handleSubmit = async() => {
// 表单校验
const valid = await customForm.value.validate();
if (valid) {
// 登录接口
await phoneLogins(fromInfo)
.then(res => {
if (res.code === 200) {
store.commit('user/setToken', res.token);
// 通过vuex获取用户信息
store.dispatch('user/GetUsersInfo')
// 跳转到首页
uni.redirectTo({
url: '/pages/index/index'
});
} else {
return uni.showToast({
title: res.data.msg,
duration: 1000,
icon: 'none'
});
// 密码输入错误！请重新输入
// 账号输入错误！请重新输入
}
})
.catch(err => {});
}
};
// 去手机登录页面
const goLogin = () => {
uni.redirectTo({
url: '/pages/login/user'
});
};
</script>
<style src="./index.scss" lang="scss" scoped></style>

150
project-wl-siji-uniapp-vue3/pages/login/user.vue Normal file
View File

@@ -0,0 +1,150 @@
<!-- 用户密码登录 -->
<template>
<!-- 公用nav -->
<view class="navBox"><uni-nav-bar title="神领物流" :border="false" /></view>
<!-- end -->
<view class="loginBox">
<view class="tit">
<text>账号登录</text>
<text class="text" @click="goLogin">
手机号登录
<icon></icon>
</text>
</view>
<!-- 登录表单 -->
<view class="loginMain">
<uni-forms ref="customForm" :rules="customRules" :modelValue="fromInfo">
<uni-forms-item name="account"><uni-easyinput class="item" v-model="fromInfo.account" placeholder="请输入账号" /></uni-forms-item>
<uni-forms-item name="password">
<uni-easyinput class="item" :type="showPassword ? 'text' : 'password'" v-model="fromInfo.password" placeholder="请输入密码" />
</uni-forms-item>
</uni-forms>
<!-- 按钮 -->
<view class="btnBox" style="padding-top:100rpx;">
<text class="button"
:class="fromInfo.account.length === 0 || fromInfo.password.length === 0 ? 'buttonDis1' : 'button'"
@click="handleSubmit"
>登 录</text>
</view>
<!-- 更新请求Url - 教学需求 -->
<view class="setUrl" @click="inputDialogToggle">
配置请求url
</view>
<uni-popup ref="inputDialog" type="dialog">
<uni-popup-dialog ref="inputClose" mode="input" title="配置URL" :value="baseURL"
placeholder="请输入baseURL" @confirm="dialogInputConfirm"></uni-popup-dialog>
</uni-popup>
<!-- 更新请求Url - 教学需求 -->
<!-- end -->
</view>
<!-- end -->
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useStore } from 'vuex';
// 接口
import { userLogins, getUserInfo } from '../api/user.js';
// ------定义变量------
const store = useStore(); //vuex获取储存数据
const showPassword = ref(false); //控制密码右侧图标显示隐藏
const customForm = ref(); //表单校验
// 表单数据
const fromInfo = reactive({
account: 'hzsj', //账号
password: '123456' // 密码
});
// 表单校验
const customRules = reactive({
account: {
rules: [
{
required: true,
errorMessage: '请输入手机号'
}
]
},
password: {
rules: [
{
required: true,
errorMessage: '请输入验证码'
}
]
}
});
// ------声明周期------
onMounted(() => {
// 进入登录页面配置默认的请求url
// uni.setStorageSync('baseUrl', '')
// 处理定时上报位置的定时器
clearInterval(uni.getStorageSync('positions').timer)
uni.setStorageSync('positions', null)
});
// ------定义方法------
// 登录
const handleSubmit = async () => {
// // 表单校验
const valid = await customForm.value.validate();
if (valid) {
// 网络慢的时候添加按钮loading
let times =
setTimeout(()=>{
uni.showLoading({
title: 'loading',
mask:true
});
},500)
// 登录接口
await userLogins(fromInfo)
.then(res => {
if (res.code === 200) {
// 操作成功后清除loading
setTimeout(function () {
uni.hideLoading();
}, 500);
clearTimeout(times)
store.commit('user/setToken', res.data);
// 通过vuex获取用户信息
store.dispatch('user/GetUsersInfo')
// 跳转到首页
uni.navigateTo({
url: '/pages/index/index'
});
} else {
return uni.showToast({
title: res.data.msg || '请求失败！',
duration: 1000,
icon: 'none'
});
}
})
.catch(err => {});
}
};
// 去手机登录页面
const goLogin = () => {
uni.navigateTo({
url: '/pages/login/index'
});
};
// 设置密码
const handlePwd = () => {
showPassword.value = !showPassword.value;
};
// 打开设置Url窗口
const baseURL = ref(uni.getStorageSync('baseUrl'))
const inputDialog = ref(null)
const inputDialogToggle = () => {
inputDialog.value.open()
}
// 报错配置的Url
const dialogInputConfirm = (val) => {
baseURL.value = val
uni.setStorageSync('baseUrl', val)
}
</script>
<style src="./index.scss" lang="scss" scoped></style>

106
project-wl-siji-uniapp-vue3/pages/message/components/announcement.vue Normal file
View File

@@ -0,0 +1,106 @@
<!-- 公告 -->
<template>
<!-- 垂直滚动区域 scroll和swiper的高度都要给且是一样的高度-->
<scroll-view scroll-y="true" @scrolltolower="lower">
<view v-if="itemData.length > 0">
<view class="boxCon">
<view class="tabConList">
<view class="item" v-for="(item, index) in itemData" :key="index">
<view @click="handleClick(item)">
<view class="text" :class="item.isRead===0 ? 'active' : ''">
<icon></icon>
{{ item.title }}
</view>
<text class="time">{{ item.created }}</text>
</view>
</view>
</view>
</view>
<!-- 暂时先不做，后期做 -->
<!-- <ReachBottom v-if="loading" :loadingText="loadingText"></ReachBottom> -->
</view>
<!-- 无数据显示 -->
<view v-else>
<EmptyPage :emptyInfo="emptyData"></EmptyPage>
</view>
<!-- end -->
</scroll-view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { taskTimeFormat } from '@/utils/index.js';
// 接口api
import { getNewList, msgRead } from '@/pages/api/news.js';
// 导入组件
//空页面
import EmptyPage from '@/components/EmptyPage/index.vue';
// 下拉提示
import ReachBottom from '@/components/reach-bottom/index.vue';
// ------定义变量------
let loadingText = ref('');
let loading = ref(false);
let itemData = ref([]); //列表数据
const emptyData = '暂无数据'
// 获取父组件数据
const props = defineProps({
scrollH: {
type: Number,
default: 0
}
});
// ------定义变量------
const emit = defineEmits(['handleSearch']); //子组件向父组件事件传递
// ------生命周期------
onMounted(() => {
init();
});
// ------定义方法------
const init = () => {
getList();
};
// 请求参数
const params = ref({
contentType: '200',
page: 1,
pageSize: 10
})
// 获取系统通知列表
const getList = async () => {
await getNewList(params.value)
.then(res => {
if (res.code === 200) {
itemData.value = res.data.items;
}
})
.catch(err => {
return uni.showToast({
title: err.msg,
duration: 1000,
icon: 'none'
});
});
};
const dataAdd = () => {
this.loadingText = '没有更多了';
this.loading = true;
};
// 下拉加载
const lower = () => {
loadingText.value = '数据加载中...';
loading.value = true;
dataAdd();
};
// 标记已读
const handleClick = async item => {
await msgRead(item.id)
};
//把数据、方法暴漏给父组件
defineExpose({
getList
});
</script>
<style>
</style>

147
project-wl-siji-uniapp-vue3/pages/message/components/notification.vue Normal file
View File

@@ -0,0 +1,147 @@
<!-- 系统通知 -->
<template>
<!-- 垂直滚动区域 scroll和swiper的高度都要给且是一样的高度-->
<scroll-view scroll-y="true" class="scrollSet">
<!-- 列表 -->
<view class=" newBox">
<scroll-view scroll-y="true" :style="{ height: scrollH + 'px' }" v-if="itemData.length>0">
<view class="systemList">
<view class="boxBg item" v-for="(item, index) in itemData" :key="index">
<view class="tit" :class="item.isRead === 0 ? 'active' : ''">
您有一个新的运输任务
<icon></icon>
</view>
<view class="address" v-html="item.content"></view>
<view class="time">
<text> {{item.created}}</text>
<button class="uni-btn redBtn" @click="handleDetail(item)">查看详情</button>
</view>
</view>
</view>
<view style="height: 50rpx;">
<!-- 下面的加载更多有问题 先占位 -->
</view>
</scroll-view>
<view v-else><EmptyPage :emptyData="emptyData"></EmptyPage></view>
</view>
</scroll-view>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import { onReachBottom } from '@dcloudio/uni-app';
import { taskTimeFormat } from '@/utils/index.js';
// 接口 api
import { getNewList, msgRead, msgAllRead } from '@/pages/api/news.js';
// 导入组件
//空页面
import EmptyPage from '@/components/EmptyPage/index.vue';
// 下拉提示
import ReachBottom from '@/components/reach-bottom/index.vue';
// ------定义变量------
const pages = getCurrentPages(); //获取加载的页面，获取当前页面路由信息uniapp 做安卓不支持 vue-router
const currentPage = pages[pages.length - 1].$page.options; //获取当前页面的对象
const title = currentPage.title; //nav标题
const type = currentPage.type; //当前派件类型
const loadMore = ref(); //定义子组件的ref,可以调取子组件的值
const emptyData = ref('暂无消息');
const rithtText = ref('全部已读');
let pageNumber = ref(1);
let pageSize = ref(10);
let totalPage = ref(0);
let reload = ref(false);
let scrollH = ref(null); //滚动高度
let currentPageData = ref([]);
let itemData = ref([]);
let ids = ref([])
// 监听上拉触底事件
onReachBottom(() => {
totalPage.value = Math.ceil(itemData.value.length / pageSize.value); //计算总页数
totalPage.value = totalPage.value == 0 ? 1 : totalPage.value;
if (pageNumber.value >= totalPage.value) {
loadMore.value.status= 'noMore';
return false;
} else {
loadMore.value.status = 'loading';
let times = setTimeout(() => {
pageNumber.value++;
let begin = (pageNumber.value - 1) * pageSize.value;
let end = pageNumber.value * pageSize.value;
currentPageData.value = [...currentPageData.value, ...itemData.value.slice(begin, end)];
}, 1000); //因为接口没做分页，所以做了数据分页处理，这里延时一秒在加载方法有个loading效果
}
});
// ------生命周期------
onMounted(() => {
getList();
});
// ------定义方法------
const params = ref({
contentType: '201',
page: 1,
pageSize: 10
})
// 获取系统通知列表
const getList = async () => {
await getNewList(params.value)
.then(res => {
if (res.code === 200) {
itemData.value = res.data.items;
}
})
.catch(err => {
return uni.showToast({
title: err.msg,
duration: 1000,
icon: 'none'
});
});
};
// 进入详情，标记已读
const handleDetail = async item => {
await msgRead(item.id)
.then(res => {
uni.navigateTo({
url: '/pages/message/details?obj=' + JSON.stringify(item)
});
})
.catch(err => {
return uni.showToast({
title: err.msg,
duration: 1000,
icon: 'none'
});
});
};
// 全部已读 - 功能暂未实现
const handleAll = async () => {
itemData.value.map(val => {
if(val.isRead===0){
ids.value.push(val.id);
}
});
await msgAllRead(ids.value)
.then(res => {
getList(type)
})
.catch(err => {
return uni.showToast({
title: err.msg,
duration: 1000,
icon: 'none'
});
});
};
// 返回上一页
const goBack = () => {
uni.redirectTo({
url: '/pages/news/index?tabIndex=1'
});
};
</script>
<style src="./../index.scss" lang="scss"></style>

66
project-wl-siji-uniapp-vue3/pages/message/details.vue Normal file
View File

@@ -0,0 +1,66 @@
<!-- 消息的详情 -->
<template>
<!-- 自定义头部 -->
<DetailsNav :title="title"></DetailsNav>
<!-- end -->
<!-- 正文 -->
<view class=" newDetail">
<view class="tit">{{ objData.title }}</view>
<view class="time">{{ taskTimeFormat(objData.created) }}</view>
<view>{{ objData.content }}</view>
</view>
<!-- end -->
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { taskTimeFormat } from '@/utils/index.js';
// 接口api
import { getNewList } from '@/pages/api/news.js';
// 导入组件
// 导航组件
import DetailsNav from '@/components/DetailsNav/index.vue'
// ------定义变量------
const title = ref('详情'); //nav标题
const pages = getCurrentPages(); //获取加载的页面，获取当前页面路由信息uniapp 做安卓不支持 vue-router
const currentPage = pages[pages.length - 1]; //获取当前页面的对象
let objData = ref(JSON.parse(currentPage.$page.options.obj)); //基本数据 获取列表页传过来的详情页，此页没有详情接口
// ------生命周期------
onMounted(e => {});
// ------定义方法------
// 返回上一页
const goBack = () => {
uni.redirectTo({
url: '/pages/news/index'
});
};
</script>
<style lang="scss" scoped>
body,
uni-page-body,
uni-page-head,
.uni-page-head {
background-color:#fff !important;
}
.pageBox{
box-shadow: inset 0 22rpx 22rpx 0 rgba(162,162,162,0.06);
}
.newDetail{
padding: 40rpx 32rpx 60rpx 32rpx;
color: var(--neutral-color-font);
line-height: 48rpx;
font-size: var(--font-size-13);
.tit{
line-height: 60rpx;
font-size: var(--font-size-16);
color: var(--neutral-color-main);
font-weight: 600;
}
.time{
font-size: var(--font-size-12);
padding: 4rpx 0 28rpx;
}
}
</style>

130
project-wl-siji-uniapp-vue3/pages/message/index.scss Normal file
View File

@@ -0,0 +1,130 @@
body,
uni-page-body {
background: var(--neutral-color-background) !important;
}
.newBox {
.tabScroll {
background: var(--neutral-color-white);
::v-deep .uni-scroll-view-content {
font-size: var(--font-size-14) !important;
.scroll-row-item {
flex: 1;
text-align: center;
margin-right: 0;
}
}
}
}
::v-deep .newConBox {
.item {
line-height: 40rpx;
padding: 0 28rpx;
color: var(--neutral-color-font);
position: relative;
font-size: var(--font-size-12);
.navigator-wrap{
uni-navigator{
display: flex;
align-items: center;
}
}
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
padding: 32rpx 0 28rpx;
border-bottom: 1px solid var(--neutral-color-background);
view{
&:first-child{
color: var(--neutral-color-main);
font-size: var(--font-size-14);
padding-bottom: 4rpx;
}
}
}
.icon {
width: 64rpx;
height: 64rpx;
margin-right: 36rpx;
position: relative;
&.send {
// background: url(@/static/icon17.png);
background-size: contain;
}
&.income {
// background: url(@/static/icon18.png);
background-size: contain;
}
&.cancel {
// background: url(@/static/icon19.png);
background-size: contain;
}
&.active {
color: var(--neutral-color-main);
icon {
position: absolute;
right: -14rpx;
top: 2rpx;
width: 14rpx;
height: 14rpx;
border-radius: 50%;
margin-right: 12rpx;
background: var(--essential-color-red);
}
}
}
.time{
position: absolute;
top: 32rpx;
right: 44rpx;
}
}
}
// 详情
.scrollSet{
height: calc(100vh - 300rpx);
}
// 系统列表
.systemList{
.item{
padding:32rpx 32rpx 40rpx 32rpx;
color: var(--neutral-color-font);
line-height: 52rpx;
margin-top: 40rpx;
.tit{
line-height: 40rpx;
padding-bottom: 26rpx;
color: var(--neutral-color-main);
border-bottom: 1px solid #f4f4f4;
margin-bottom: 26rpx;
font-weight: 400;
font-size: 28rpx;
}
.time{
display: flex;
align-items: center;
font-size: 24rpx;
text{
flex:1
}
.redBtn{
display: inline-block;
width: 162rpx;
height: 48rpx;
line-height: 48rpx;
border: 2rpx solid #EF4F3F;
font-size: 24rpx;
}
}
.address{
font-size: 26rpx;
line-height: 40rpx;
margin-bottom: 18rpx;
}
}
}

108
project-wl-siji-uniapp-vue3/pages/message/index.vue Normal file
View File

@@ -0,0 +1,108 @@
<!-- 消息页面 -->
<template>
<!-- 自定义头部 -->
<view class="navHead"></view>
<!-- end -->
<!-- 列表 -->
<view class="pageBox newBox">
<!-- 搜索列表 -->
<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" >
<view :class="tabIndex == index ? 'scroll-row-item-act' : ''" @click="changeTab(index)">
<text class="line"></text>
{{ item }}
</view>
</view>
</scroll-view>
<!-- 滑块内容 对应的是顶部选项卡的切换 :current="tabIndex" 设置的是y方向上可以滚动-->
<view class="homeSwiper">
<!-- 公告 -->
<Announcement v-show="tabIndex == 0" ref="announcement"></Announcement>
<!-- end -->
<!-- 系统通知 -->
<Notification v-show="tabIndex == 1" ref="notificat" @getTabIndex="getTabIndex"></Notification>
<!-- end -->
<!-- </swiper> -->
</view>
<!-- end -->
</view>
<!-- footer -->
<UniFooter :pagePath="'pages/index/index'" ></UniFooter>
<!-- end -->
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import {taskTimeFormat} from '@/utils/index.js';
// 导入组件
// 导航组件
//空页面
import EmptyPage from '@/components/EmptyPage/index.vue';
// 下拉提示
import ReachBottom from '@/components/reach-bottom/index.vue'
// 公告列表
import Announcement from './components/announcement.vue';
// 系统通知
import Notification from './components/notification.vue';
// 底部导航
import UniFooter from '@/components/Footer/index.vue';
// ------定义变量------
const announcement = ref()//定义ref
const notificat = ref()
const title = ref('消息'); //nav标题
const emptyInfo = ref('- 没有找到相关内容 -');
const tabBars = reactive(['公告', '系统通知']);
let scrollinto = ref('tab0'); //tab切换
let tabIndex = ref(1); //当前tab
let scrollH = ref(0); //滚动高度
// ------生命周期------
onMounted(() => {
// init()
// 获取屏幕信息
uni.getSystemInfo({
success: res => {
scrollH.value = res.windowHeight - uni.upx2px(630);
}
});
});
// ------定义方法------
const init = () => {
getList()
};
// tab选项卡切换轮播
const changeTab = index => {
// 点击的还是当前数据的时候直接return
if (tabIndex.value == index) {
return;
}
// 触发tab切换接口
if(index===0){
announcement.value.getList()
}else{
// notificat.value.getOjb()
}
tabIndex.value = index;
// 滑动
scrollinto.value = 'tab' + index;
};
// 触发选项卡事件
const onChangeSwiperTab = e => {
changeTab(e.detail.current);
};
// 获取子组件传来的tabindex
const getTabIndex =(val)=>{
tabIndex.value = val
}
// 返回上一页
const goBack = () => {
uni.redirectTo({
url: '/pages/index/index'
});
};
</script>
<style src="./index.scss" lang="scss"></style>

43
project-wl-siji-uniapp-vue3/pages/start/index.scss Normal file
View File

@@ -0,0 +1,43 @@
.starPage{
background: url(@/static/goin.png) center center no-repeat;
background-size: contain;
width: 100vw;
height: 100vh;
.page{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.tit{
width: 38rpx;
line-height: 40rpx;
font-size: 28rpx;
margin: 0 auto;
letter-spacing: 0.42rpx;
text-align: center;
text{
display: block;
padding:0 0 10rpx 0;
}
}
.map{
background: url(@/static/star.png) no-repeat;
background-size: contain;
width: 320rpx;
height: 232rpx;
margin-top: 80rpx;
margin-bottom: 142rpx;
}
.logo{
background: url(@/static/logo.png) no-repeat;
background-size: contain;
width: 242rpx;
height: 94rpx;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
bottom: 5%;
}
}

24
project-wl-siji-uniapp-vue3/pages/start/index.vue Normal file
View File

@@ -0,0 +1,24 @@
<!-- 启动页 -->
<template>
<view class="starPage"></view>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
name: 'StarPage',
setup: props => {
onMounted(() => {
const times = setTimeout(() => {
uni.redirectTo({
url: '/pages/login/user'
});
clearTimeout(times);
}, 1000);
});
return {};
}
};
</script>
<style src="./index.scss" lang="scss" scoped></style>

42
project-wl-siji-uniapp-vue3/pages/user/carrier.vue Normal file
View File

@@ -0,0 +1,42 @@
<!-- 我的-主页 -->
<template>
<!-- end -->
<view class="userContainer">
<DetailsNav :title="title"></DetailsNav>
<!-- 车辆信息 -->
<CarInfo v-if="type == 'carInfo'" ></CarInfo>
<!-- 任务数据 -->
<TaskData v-if="type == 'taskData'" ></TaskData>
<!-- 系统设置-->
<SystmSet v-if="type == 'systmSet'" ></SystmSet>
</view>
<!-- end -->
</template>
<script setup>
import { ref, onMounted } from 'vue';
// 导航
import DetailsNav from '@/components/DetailsNav/index.vue';
import CarInfo from './components/CarInfo.vue';
import TaskData from './components/TaskData.vue';
import SystmSet from './components/SystmSet.vue';
// ------定义变量------
const title = ref('车辆信息')
const type = ref('')
// 生命周期中的一些 初始化信息
onMounted(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1].$page.options;
type.value = currentPage.type;
title.value = currentPage.title;
});
</script>
<style lang="scss" scoped>
.carInfo{
}
</style>

16
project-wl-siji-uniapp-vue3/pages/user/components/Calendar/changelog.md Normal file
View File

@@ -0,0 +1,16 @@
## 1.4.5（2022-02-25）
- 修复 条件编译 nvue 不支持的 css 样式
## 1.4.4（2022-02-25）
- 修复 条件编译 nvue 不支持的 css 样式
## 1.4.3（2021-09-22）
- 修复 startDate、 endDate 属性失效的 bug
## 1.4.2（2021-08-24）
- 新增 支持国际化
## 1.4.1（2021-08-05）
- 修复 弹出层被 tabbar 遮盖 bug
## 1.4.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.3.16（2021-05-12）
- 新增 组件示例地址
## 1.3.15（2021-02-04）
- 调整为uni_modules目录规范

546
project-wl-siji-uniapp-vue3/pages/user/components/Calendar/components/uni-calendar/calendar.js Normal file
View File

@@ -0,0 +1,546 @@
/**
* @1900-2100区间内的公历、农历互转
* @charset UTF-8
* @github https://github.com/jjonline/calendar.js
* @Author Jea杨(JJonline@JJonline.Cn)
* @Time 2014-7-21
* @Time 2016-8-13 Fixed 2033hex、Attribution Annals
* @Time 2016-9-25 Fixed lunar LeapMonth Param Bug
* @Time 2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
* @Version 1.0.3
* @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
* @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
*/
/* eslint-disable */
var calendar = {
/**
* 农历1900-2100的润大小信息表
* @Array Of Property
* @return Hex
*/
lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900-1909
0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910-1919
0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920-1929
0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930-1939
0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940-1949
0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950-1959
0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960-1969
0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, // 1970-1979
0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980-1989
0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, // 1990-1999
0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000-2009
0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010-2019
0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020-2029
0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030-2039
0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040-2049
/** Add By JJonline@JJonline.Cn**/
0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050-2059
0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060-2069
0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070-2079
0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080-2089
0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090-2099
0x0d520], // 2100
/**
* 公历每个月份的天数普通表
* @Array Of Property
* @return Number
*/
solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
/**
* 天干地支之天干速查表
* @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
* @return Cn string
*/
Gan: ['\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678'],
/**
* 天干地支之地支速查表
* @Array Of Property
* @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
* @return Cn string
*/
Zhi: ['\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149', '\u620c', '\u4ea5'],
/**
* 天干地支之地支速查表<=>生肖
* @Array Of Property
* @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
* @return Cn string
*/
Animals: ['\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21', '\u72d7', '\u732a'],
/**
* 24节气速查表
* @Array Of Property
* @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
* @return Cn string
*/
solarTerm: ['\u5c0f\u5bd2', '\u5927\u5bd2', '\u7acb\u6625', '\u96e8\u6c34', '\u60ca\u86f0', '\u6625\u5206', '\u6e05\u660e', '\u8c37\u96e8', '\u7acb\u590f', '\u5c0f\u6ee1', '\u8292\u79cd', '\u590f\u81f3', '\u5c0f\u6691', '\u5927\u6691', '\u7acb\u79cb', '\u5904\u6691', '\u767d\u9732', '\u79cb\u5206', '\u5bd2\u9732', '\u971c\u964d', '\u7acb\u51ac', '\u5c0f\u96ea', '\u5927\u96ea', '\u51ac\u81f3'],
/**
* 1900-2100各年的24节气日期速查表
* @Array Of Property
* @return 0x string For splice
*/
sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f',
'97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
'97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
'97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
'97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
'97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
'9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
'97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
'97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
'7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
'9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
'97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
'9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
'9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
'9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
'977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
'977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
'977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
'7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
'7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
'665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'],
/**
* 数字转中文速查表
* @Array Of Property
* @trans ['日','一','二','三','四','五','六','七','八','九','十']
* @return Cn string
*/
nStr1: ['\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341'],
/**
* 日期转农历称呼速查表
* @Array Of Property
* @trans ['初','十','廿','卅']
* @return Cn string
*/
nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'],
/**
* 月份转农历称呼速查表
* @Array Of Property
* @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
* @return Cn string
*/
nStr3: ['\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', '\u51ac', '\u814a'],
/**
* 返回农历y年一整年的总天数
* @param lunar Year
* @return Number
* @eg:var count = calendar.lYearDays(1987) ;//count=387
*/
lYearDays: function (y) {
var i; var sum = 348
for (i = 0x8000; i > 0x8; i >>= 1) { sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0 }
return (sum + this.leapDays(y))
},
/**
* 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
* @param lunar Year
* @return Number (0-12)
* @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
*/
leapMonth: function (y) { // 闰字编码 \u95f0
return (this.lunarInfo[y - 1900] & 0xf)
},
/**
* 返回农历y年闰月的天数 若该年没有闰月则返回0
* @param lunar Year
* @return Number (0、29、30)
* @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
*/
leapDays: function (y) {
if (this.leapMonth(y)) {
return ((this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29)
}
return (0)
},
/**
* 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
* @param lunar Year
* @return Number (-1、29、30)
* @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
*/
monthDays: function (y, m) {
if (m > 12 || m < 1) { return -1 }// 月份参数从1至12，参数错误返回-1
return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29)
},
/**
* 返回公历(!)y年m月的天数
* @param solar Year
* @return Number (-1、28、29、30、31)
* @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
*/
solarDays: function (y, m) {
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
var ms = m - 1
if (ms == 1) { // 2月份的闰平规律测算后确认返回28或29
return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28)
} else {
return (this.solarMonth[ms])
}
},
/**
* 农历年份转换为干支纪年
* @param lYear 农历年的年份数
* @return Cn string
*/
toGanZhiYear: function (lYear) {
var ganKey = (lYear - 3) % 10
var zhiKey = (lYear - 3) % 12
if (ganKey == 0) ganKey = 10// 如果余数为0则为最后一个天干
if (zhiKey == 0) zhiKey = 12// 如果余数为0则为最后一个地支
return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1]
},
/**
* 公历月、日判断所属星座
* @param cMonth [description]
* @param cDay [description]
* @return Cn string
*/
toAstro: function (cMonth, cDay) {
var s = '\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf'
var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22]
return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + '\u5ea7'// 座
},
/**
* 传入offset偏移量返回干支
* @param offset 相对甲子的偏移量
* @return Cn string
*/
toGanZhi: function (offset) {
return this.Gan[offset % 10] + this.Zhi[offset % 12]
},
/**
* 传入公历(!)y年获得该年第n个节气的公历日期
* @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
* @return day Number
* @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
*/
getTerm: function (y, n) {
if (y < 1900 || y > 2100) { return -1 }
if (n < 1 || n > 24) { return -1 }
var _table = this.sTermInfo[y - 1900]
var _info = [
parseInt('0x' + _table.substr(0, 5)).toString(),
parseInt('0x' + _table.substr(5, 5)).toString(),
parseInt('0x' + _table.substr(10, 5)).toString(),
parseInt('0x' + _table.substr(15, 5)).toString(),
parseInt('0x' + _table.substr(20, 5)).toString(),
parseInt('0x' + _table.substr(25, 5)).toString()
]
var _calday = [
_info[0].substr(0, 1),
_info[0].substr(1, 2),
_info[0].substr(3, 1),
_info[0].substr(4, 2),
_info[1].substr(0, 1),
_info[1].substr(1, 2),
_info[1].substr(3, 1),
_info[1].substr(4, 2),
_info[2].substr(0, 1),
_info[2].substr(1, 2),
_info[2].substr(3, 1),
_info[2].substr(4, 2),
_info[3].substr(0, 1),
_info[3].substr(1, 2),
_info[3].substr(3, 1),
_info[3].substr(4, 2),
_info[4].substr(0, 1),
_info[4].substr(1, 2),
_info[4].substr(3, 1),
_info[4].substr(4, 2),
_info[5].substr(0, 1),
_info[5].substr(1, 2),
_info[5].substr(3, 1),
_info[5].substr(4, 2)
]
return parseInt(_calday[n - 1])
},
/**
* 传入农历数字月份返回汉语通俗表示法
* @param lunar month
* @return Cn string
* @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
*/
toChinaMonth: function (m) { // 月 => \u6708
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
var s = this.nStr3[m - 1]
s += '\u6708'// 加上月字
return s
},
/**
* 传入农历日期数字返回汉字表示法
* @param lunar day
* @return Cn string
* @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
*/
toChinaDay: function (d) { // 日 => \u65e5
var s
switch (d) {
case 10:
s = '\u521d\u5341'; break
case 20:
s = '\u4e8c\u5341'; break
break
case 30:
s = '\u4e09\u5341'; break
break
default :
s = this.nStr2[Math.floor(d / 10)]
s += this.nStr1[d % 10]
}
return (s)
},
/**
* 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
* @param y year
* @return Cn string
* @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
*/
getAnimal: function (y) {
return this.Animals[(y - 4) % 12]
},
/**
* 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
* @param y solar year
* @param m solar month
* @param d solar day
* @return JSON object
* @eg:console.log(calendar.solar2lunar(1987,11,01));
*/
solar2lunar: function (y, m, d) { // 参数区间1900.1.31~2100.12.31
// 年份限定、上限
if (y < 1900 || y > 2100) {
return -1// undefined转换为数字变为NaN
}
// 公历传参最下限
if (y == 1900 && m == 1 && d < 31) {
return -1
}
// 未传参 获得当天
if (!y) {
var objDate = new Date()
} else {
var objDate = new Date(y, parseInt(m) - 1, d)
}
var i; var leap = 0; var temp = 0
// 修正ymd参数
var y = objDate.getFullYear()
var m = objDate.getMonth() + 1
var d = objDate.getDate()
var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) / 86400000
for (i = 1900; i < 2101 && offset > 0; i++) {
temp = this.lYearDays(i)
offset -= temp
}
if (offset < 0) {
offset += temp; i--
}
// 是否今天
var isTodayObj = new Date()
var isToday = false
if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {
isToday = true
}
// 星期几
var nWeek = objDate.getDay()
var cWeek = this.nStr1[nWeek]
// 数字表示周几顺应天朝周一开始的惯例
if (nWeek == 0) {
nWeek = 7
}
// 农历年
var year = i
var leap = this.leapMonth(i) // 闰哪个月
var isLeap = false
// 效验闰月
for (i = 1; i < 13 && offset > 0; i++) {
// 闰月
if (leap > 0 && i == (leap + 1) && isLeap == false) {
--i
isLeap = true; temp = this.leapDays(year) // 计算农历闰月天数
} else {
temp = this.monthDays(year, i)// 计算农历普通月天数
}
// 解除闰月
if (isLeap == true && i == (leap + 1)) { isLeap = false }
offset -= temp
}
// 闰月导致数组下标重叠取反
if (offset == 0 && leap > 0 && i == leap + 1) {
if (isLeap) {
isLeap = false
} else {
isLeap = true; --i
}
}
if (offset < 0) {
offset += temp; --i
}
// 农历月
var month = i
// 农历日
var day = offset + 1
// 天干地支处理
var sm = m - 1
var gzY = this.toGanZhiYear(year)
// 当月的两个节气
// bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
var firstNode = this.getTerm(y, (m * 2 - 1))// 返回当月「节」为几日开始
var secondNode = this.getTerm(y, (m * 2))// 返回当月「节」为几日开始
// 依据12节气修正干支月
var gzM = this.toGanZhi((y - 1900) * 12 + m + 11)
if (d >= firstNode) {
gzM = this.toGanZhi((y - 1900) * 12 + m + 12)
}
// 传入的日期的节气与否
var isTerm = false
var Term = null
if (firstNode == d) {
isTerm = true
Term = this.solarTerm[m * 2 - 2]
}
if (secondNode == d) {
isTerm = true
Term = this.solarTerm[m * 2 - 1]
}
// 日柱 当月一日与 1900/1/1 相差天数
var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10
var gzD = this.toGanZhi(dayCyclical + d - 1)
// 该日期所属的星座
var astro = this.toAstro(m, d)
return { 'lYear': year, 'lMonth': month, 'lDay': day, 'Animal': this.getAnimal(year), 'IMonthCn': (isLeap ? '\u95f0' : '') + this.toChinaMonth(month), 'IDayCn': this.toChinaDay(day), 'cYear': y, 'cMonth': m, 'cDay': d, 'gzYear': gzY, 'gzMonth': gzM, 'gzDay': gzD, 'isToday': isToday, 'isLeap': isLeap, 'nWeek': nWeek, 'ncWeek': '\u661f\u671f' + cWeek, 'isTerm': isTerm, 'Term': Term, 'astro': astro }
},
/**
* 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
* @param y lunar year
* @param m lunar month
* @param d lunar day
* @param isLeapMonth lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
* @return JSON object
* @eg:console.log(calendar.lunar2solar(1987,9,10));
*/
lunar2solar: function (y, m, d, isLeapMonth) { // 参数区间1900.1.31~2100.12.1
var isLeapMonth = !!isLeapMonth
var leapOffset = 0
var leapMonth = this.leapMonth(y)
var leapDay = this.leapDays(y)
if (isLeapMonth && (leapMonth != m)) { return -1 }// 传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) { return -1 }// 超出了最大极限值
var day = this.monthDays(y, m)
var _day = day
// bugFix 2016-9-25
// if month is leap, _day use leapDays method
if (isLeapMonth) {
_day = this.leapDays(y, m)
}
if (y < 1900 || y > 2100 || d > _day) { return -1 }// 参数合法性效验
// 计算农历的时间差
var offset = 0
for (var i = 1900; i < y; i++) {
offset += this.lYearDays(i)
}
var leap = 0; var isAdd = false
for (var i = 1; i < m; i++) {
leap = this.leapMonth(y)
if (!isAdd) { // 处理闰月
if (leap <= i && leap > 0) {
offset += this.leapDays(y); isAdd = true
}
}
offset += this.monthDays(y, i)
}
// 转换闰月农历 需补充该年闰月的前一个月的时差
if (isLeapMonth) { offset += day }
// 1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
var stmap = Date.UTC(1900, 1, 30, 0, 0, 0)
var calObj = new Date((offset + d - 31) * 86400000 + stmap)
var cY = calObj.getUTCFullYear()
var cM = calObj.getUTCMonth() + 1
var cD = calObj.getUTCDate()
return this.solar2lunar(cY, cM, cD)
}
}
export default calendar

12
project-wl-siji-uniapp-vue3/pages/user/components/Calendar/components/uni-calendar/i18n/en.json Normal file
View File

@@ -0,0 +1,12 @@
{
"uni-calender.ok": "ok",
"uni-calender.cancel": "cancel",
"uni-calender.today": "today",
"uni-calender.MON": "MON",
"uni-calender.TUE": "TUE",
"uni-calender.WED": "WED",
"uni-calender.THU": "THU",
"uni-calender.FRI": "FRI",
"uni-calender.SAT": "SAT",
"uni-calender.SUN": "SUN"
}

8
project-wl-siji-uniapp-vue3/pages/user/components/Calendar/components/uni-calendar/i18n/index.js Normal file
View File

@@ -0,0 +1,8 @@
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}

12
project-wl-siji-uniapp-vue3/pages/user/components/Calendar/components/uni-calendar/i18n/zh-Hans.json Normal file
View File

@@ -0,0 +1,12 @@
{
"uni-calender.ok": "确定",
"uni-calender.cancel": "取消",
"uni-calender.today": "今日",
"uni-calender.SUN": "周日",
"uni-calender.MON": "周一",
"uni-calender.TUE": "周二",
"uni-calender.WED": "周三",
"uni-calender.THU": "周四",
"uni-calender.FRI": "周五",
"uni-calender.SAT": "周六"
}

12
project-wl-siji-uniapp-vue3/pages/user/components/Calendar/components/uni-calendar/i18n/zh-Hant.json Normal file
View File

@@ -0,0 +1,12 @@
{
"uni-calender.ok": "確定",
"uni-calender.cancel": "取消",
"uni-calender.today": "今日",
"uni-calender.SUN": "日",
"uni-calender.MON": "一",
"uni-calender.TUE": "二",
"uni-calender.WED": "三",
"uni-calender.THU": "四",
"uni-calender.FRI": "五",
"uni-calender.SAT": "六"
}

188
project-wl-siji-uniapp-vue3/pages/user/components/Calendar/components/uni-calendar/uni-calendar-item.vue Normal file
View File

@@ -0,0 +1,188 @@
<template>
<view class="uni-calendar-item__weeks-box" :class="{
'uni-calendar-item--disable':weeks.disable,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay) ,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
}"
@click="choiceDate(weeks)">
<view class="uni-calendar-item__weeks-box-item">
<!-- <text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text> -->
<text class="uni-calendar-item__weeks-box-text" :class="{
'uni-calendar-item--isDay-text': weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">{{weeks.date}}</text>
<text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text" :class="{
'uni-calendar-item--isDay-text':weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
}">{{todayText}}</text>
<text v-if="lunar&&!weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text" :class="{
'uni-calendar-item--isDay-text':weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">{{weeks.isDay ? todayText : (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text>
<text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text" :class="{
'uni-calendar-item--extra':weeks.extraInfo.info,
'uni-calendar-item--isDay-text':weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">{{weeks.extraInfo.info}}</text>
</view>
</view>
</template>
<script>
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from './i18n/index.js'
const { t } = initVueI18n(messages)
export default {
emits:['change'],
props: {
weeks: {
type: Object,
default () {
return {}
}
},
calendar: {
type: Object,
default: () => {
return {}
}
},
selected: {
type: Array,
default: () => {
return []
}
},
lunar: {
type: Boolean,
default: false
}
},
computed: {
todayText() {
return t("uni-calender.today")
},
},
methods: {
choiceDate(weeks) {
this.$emit('change', weeks)
}
}
}
</script>
<style lang="scss" scoped>
$uni-font-size-base:14px;
$uni-text-color:#333;
$uni-font-size-sm:12px;
$uni-color-error: #EF4F3F;
$uni-opacity-disabled: 0.3;
$uni-text-color-disable:#c0c0c0;
$uni-color-primary: #EF4F3F;
.uni-calendar-item__weeks-box {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
}
.uni-calendar-item__weeks-box-text {
font-size: $uni-font-size-base;
color: $uni-text-color;
}
.uni-calendar-item__weeks-lunar-text {
font-size: $uni-font-size-sm;
color: $uni-text-color;
}
.uni-calendar-item__weeks-box-item {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
width: 100rpx;
height: 100rpx;
}
.uni-calendar-item__weeks-box-circle {
position: absolute;
top: 5px;
right: 5px;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $uni-color-error;
}
.uni-calendar-item--disable {
background-color: rgba(249, 249, 249, $uni-opacity-disabled);
color: $uni-text-color-disable;
}
.uni-calendar-item--isDay-text {
color: $uni-color-primary;
}
.uni-calendar-item--isDay {
background-color: $uni-color-primary;
opacity: 0.8;
color: #fff;
}
.uni-calendar-item--extra {
color: $uni-color-error;
opacity: 0.8;
}
.uni-calendar-item--checked {
background-color: $uni-color-primary;
color: #fff;
opacity: 0.8;
}
.uni-calendar-item--multiple {
background-color: $uni-color-primary;
color: #fff;
opacity: 0.8;
}
.uni-calendar-item--before-checked {
background-color: #ff5a5f;
color: #fff;
}
.uni-calendar-item--after-checked {
background-color: #ff5a5f;
color: #fff;
}
</style>

575
project-wl-siji-uniapp-vue3/pages/user/components/Calendar/components/uni-calendar/uni-calendar.vue Normal file
View File

@@ -0,0 +1,575 @@
<template>
<view class="uni-calendar">
<view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}" @click="clean"></view>
<view v-if="insert || show" class="uni-calendar__content" :class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow}">
<view v-if="!insert" class="uni-calendar__header uni-calendar--fixed-top">
<view class="uni-calendar__header-btn-box" @click="close">
<text class="uni-calendar__header-text uni-calendar--fixed-width">{{cancelText}}</text>
</view>
<view class="uni-calendar__header-btn-box" @click="confirm">
<text class="uni-calendar__header-text uni-calendar--fixed-width">{{okText}}</text>
</view>
</view>
<view class="uni-calendar__header">
<view class="uni-calendar__header-btn-box" @click.stop="pre">
<image src="@/static/sj_btn_data_lt.png" style="width: 30px;height: 30px;" mode=""></image>
<!-- <view class="uni-calendar__header-btn uni-calendar--left"></view> -->
</view>
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
<text class="uni-calendar__header-text">{{ (nowDate.year||'') +' 年 '+( nowDate.month||'') + '月'}} </text>
</picker>
<view class="uni-calendar__header-btn-box" @click.stop="next">
<image src="@/static/sj_btn_date_rt.png" style="width: 30px;height: 30px;" mode=""></image>
<!-- <view class="uni-calendar__header-btn uni-calendar--right"></view> -->
</view>
<!-- <text class="uni-calendar__backtoday" @click="backtoday">{{todayText}}</text> -->
</view>
<slot></slot>
<view class="uni-calendar__box">
<view v-if="showMonth" class="uni-calendar__box-bg">
<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
</view>
<view class="uni-calendar__weeks">
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{monText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{TUEText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{WEDText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{THUText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{FRIText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{SATText}}</text>
</view>
</view>
<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate"></calendar-item>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import Calendar from './util.js';
import calendarItem from './uni-calendar-item.vue'
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from './i18n/index.js'
const { t } = initVueI18n(messages)
/**
* Calendar 日历
* @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
* @tutorial https://ext.dcloud.net.cn/plugin?id=56
* @property {String} date 自定义当前时间，默认为今天
* @property {Boolean} lunar 显示农历
* @property {String} startDate 日期选择范围-开始日期
* @property {String} endDate 日期选择范围-结束日期
* @property {Boolean} range 范围选择
* @property {Boolean} insert = [true|false] 插入模式,默认为false
* @value true 弹窗模式
* @value false 插入模式
* @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
* @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
* @property {Boolean} showMonth 是否选择月份为背景
* @event {Function} change 日期改变，`insert :ture` 时生效
* @event {Function} confirm 确认选择`insert :false` 时生效
* @event {Function} monthSwitch 切换月份时触发
* @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
*/
export default {
components: {
calendarItem
},
emits:['close','confirm','change','monthSwitch'],
props: {
date: {
type: String,
default: ''
},
selected: {
type: Array,
default () {
return []
}
},
lunar: {
type: Boolean,
default: false
},
startDate: {
type: String,
default: ''
},
endDate: {
type: String,
default: ''
},
range: {
type: Boolean,
default: false
},
insert: {
type: Boolean,
default: true
},
showMonth: {
type: Boolean,
default: true
},
clearDate: {
type: Boolean,
default: true
}
},
data() {
return {
show: false,
weeks: [],
calendar: {},
nowDate: '',
aniMaskShow: false
}
},
computed:{
/**
* for i18n
*/
okText() {
return t("uni-calender.ok")
},
cancelText() {
return t("uni-calender.cancel")
},
todayText() {
return t("uni-calender.today")
},
monText() {
return t("uni-calender.MON")
},
TUEText() {
return t("uni-calender.TUE")
},
WEDText() {
return t("uni-calender.WED")
},
THUText() {
return t("uni-calender.THU")
},
FRIText() {
return t("uni-calender.FRI")
},
SATText() {
return t("uni-calender.SAT")
},
SUNText() {
return t("uni-calender.SUN")
},
},
watch: {
date(newVal) {
// this.cale.setDate(newVal)
this.init(newVal)
},
startDate(val){
this.cale.resetSatrtDate(val)
this.cale.setDate(this.nowDate.fullDate)
this.weeks = this.cale.weeks
},
endDate(val){
this.cale.resetEndDate(val)
this.cale.setDate(this.nowDate.fullDate)
this.weeks = this.cale.weeks
},
selected(newVal) {
this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
this.weeks = this.cale.weeks
}
},
created() {
// 获取日历方法实例
this.cale = new Calendar({
// date: new Date(),
selected: this.selected,
startDate: this.startDate,
endDate: this.endDate,
range: this.range,
})
// 选中某一天
// this.cale.setDate(this.date)
this.init(this.date)
// this.setDay
},
methods: {
// 取消穿透
clean() {},
bindDateChange(e) {
const value = e.detail.value + '-1'
const date = this.cale.getDate(value)
this.init(value)
this.$emit('monthSwitch', {
year:date.year,
month: Number(date.month)
})
},
/**
* 初始化日期显示
* @param {Object} date
*/
init(date) {
this.cale.setDate(date)
this.weeks = this.cale.weeks
this.nowDate = this.calendar = this.cale.getInfo(date)
},
/**
* 打开日历弹窗
*/
open() {
// 弹窗模式并且清理数据
if (this.clearDate && !this.insert) {
this.cale.cleanMultipleStatus()
// this.cale.setDate(this.date)
this.init(this.date)
}
this.show = true
this.$nextTick(() => {
setTimeout(() => {
this.aniMaskShow = true
}, 50)
})
},
/**
* 关闭日历弹窗
*/
close() {
this.aniMaskShow = false
this.$nextTick(() => {
setTimeout(() => {
this.show = false
this.$emit('close')
}, 300)
})
},
/**
* 确认按钮
*/
confirm() {
this.setEmit('confirm')
this.close()
},
/**
* 变化触发
*/
change() {
if (!this.insert) return
this.setEmit('change')
},
/**
* 选择月份触发
*/
monthSwitch() {
let {
year,
month
} = this.nowDate
this.$emit('monthSwitch', {
year,
month: Number(month)
})
},
/**
* 派发事件
* @param {Object} name
*/
setEmit(name) {
let {
year,
month,
date,
fullDate,
lunar,
extraInfo
} = this.calendar
this.$emit(name, {
range: this.cale.multipleStatus,
year,
month,
date,
fulldate: fullDate,
lunar,
extraInfo: extraInfo || {}
})
},
/**
* 选择天触发
* @param {Object} weeks
*/
choiceDate(weeks) {
if (weeks.disable) return
this.calendar = weeks
// 设置多选
this.cale.setMultiple(this.calendar.fullDate)
this.weeks = this.cale.weeks
this.change()
},
/**
* 回到今天
*/
backtoday() {
console.log(this.cale.getDate(new Date()).fullDate);
let date = this.cale.getDate(new Date()).fullDate
// this.cale.setDate(date)
this.init(date)
this.change()
},
/**
* 上个月
*/
pre() {
const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
this.setDate(preDate)
this.monthSwitch()
},
/**
* 下个月
*/
next() {
const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
this.setDate(nextDate)
this.monthSwitch()
},
/**
* 设置日期
* @param {Object} date
*/
setDate(date) {
this.cale.setDate(date)
this.weeks = this.cale.weeks
this.nowDate = this.cale.getInfo(date)
}
}
}
</script>
<style lang="scss" scoped>
$uni-bg-color-mask: rgba($color: #000000, $alpha: 0.4);
$uni-border-color: #EDEDED;
$uni-text-color: #333;
$uni-bg-color-hover:#f1f1f1;
$uni-font-size-base:14px;
$uni-text-color-placeholder: #808080;
$uni-color-subtitle: #555555;
$uni-text-color-grey:#999;
.uni-calendar {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.uni-calendar__mask {
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
background-color: $uni-bg-color-mask;
transition-property: opacity;
transition-duration: 0.3s;
opacity: 0;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
}
.uni-calendar--mask-show {
opacity: 1
}
.uni-calendar--fixed {
position: fixed;
/* #ifdef APP-NVUE */
bottom: 0;
/* #endif */
left: 0;
right: 0;
transition-property: transform;
transition-duration: 0.3s;
transform: translateY(460px);
/* #ifndef APP-NVUE */
bottom: calc(var(--window-bottom));
z-index: 99;
/* #endif */
}
.uni-calendar--ani-show {
transform: translateY(0);
}
.uni-calendar__content {
// background-color: #fff;
}
.uni-calendar__header {
margin: 30rpx;
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
height: 50px;
// border-bottom-color: $uni-border-color;
// border-bottom-style: solid;
// border-bottom-width: 1px;
}
.uni-calendar--fixed-top {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: space-between;
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 1px;
}
.uni-calendar--fixed-width {
width: 50px;
// padding: 0 15px;
}
.uni-calendar__backtoday {
position: absolute;
right: 0;
top: 25rpx;
padding: 0 5px;
padding-left: 10px;
height: 25px;
line-height: 25px;
font-size: 12px;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
color: $uni-text-color;
background-color: $uni-bg-color-hover;
}
.uni-calendar__header-text {
text-align: center;
width: 100px;
font-size: 18px;
font-weight: 500;
color: $uni-text-color;
}
.uni-calendar__header-btn-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
}
.uni-calendar__header-btn {
width: 10px;
height: 10px;
border-left-color: $uni-text-color-placeholder;
border-left-style: solid;
border-left-width: 2px;
border-top-color: $uni-color-subtitle;
border-top-style: solid;
border-top-width: 2px;
}
.uni-calendar--left {
transform: rotate(-45deg);
}
.uni-calendar--right {
transform: rotate(135deg);
}
.uni-calendar__weeks {
position: relative;
border-bottom: solid 2rpx #f4f4f4;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
border-bottom: solid 2rpx #f4f4f4;
}
.uni-calendar__weeks-item {
flex: 1;
}
.uni-calendar__weeks-day {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
height: 45px;
border-bottom-color: #F4F4F4;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.uni-calendar__weeks-day-text {
font-size: 12px;
color: #818181;
}
.uni-calendar__box {
position: relative;
background:#fff;
}
.uni-calendar__box-bg {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.uni-calendar__box-bg-text {
font-size: 200px;
font-weight: bold;
color: $uni-text-color-grey;
opacity: 0.1;
text-align: center;
/* #ifndef APP-NVUE */
line-height: 1;
/* #endif */
}
</style>

350
project-wl-siji-uniapp-vue3/pages/user/components/Calendar/components/uni-calendar/util.js Normal file
View File

@@ -0,0 +1,350 @@
import CALENDAR from './calendar.js'
class Calendar {
constructor({
date,
selected,
startDate,
endDate,
range
} = {}) {
// 当前日期
this.date = this.getDate(new Date()) // 当前初入日期
// 打点信息
this.selected = selected || [];
// 范围开始
this.startDate = startDate
// 范围结束
this.endDate = endDate
this.range = range
// 多选状态
this.cleanMultipleStatus()
// 每周日期
this.weeks = {}
// this._getWeek(this.date.fullDate)
}
/**
* 设置日期
* @param {Object} date
*/
setDate(date) {
this.selectDate = this.getDate(date)
this._getWeek(this.selectDate.fullDate)
}
/**
* 清理多选状态
*/
cleanMultipleStatus() {
this.multipleStatus = {
before: '',
after: '',
data: []
}
}
/**
* 重置开始日期
*/
resetSatrtDate(startDate) {
// 范围开始
this.startDate = startDate
}
/**
* 重置结束日期
*/
resetEndDate(endDate) {
// 范围结束
this.endDate = endDate
}
/**
* 获取任意时间
*/
getDate(date, AddDayCount = 0, str = 'day') {
if (!date) {
date = new Date()
}
if (typeof date !== 'object') {
date = date.replace(/-/g, '/')
}
const dd = new Date(date)
switch (str) {
case 'day':
dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
break
case 'month':
if (dd.getDate() === 31) {
dd.setDate(dd.getDate() + AddDayCount)
} else {
dd.setMonth(dd.getMonth() + AddDayCount) // 获取AddDayCount天后的日期
}
break
case 'year':
dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
break
}
const y = dd.getFullYear()
const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
return {
fullDate: y + '-' + m + '-' + d,
year: y,
month: m,
date: d,
day: dd.getDay()
}
}
/**
* 获取上月剩余天数
*/
_getLastMonthDays(firstDay, full) {
let dateArr = []
for (let i = firstDay; i > 0; i--) {
const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
dateArr.push({
date: beforeDate,
month: full.month - 1,
lunar: this.getlunar(full.year, full.month - 1, beforeDate),
disable: true
})
}
return dateArr
}
/**
* 获取本月天数
*/
_currentMonthDys(dateData, full) {
let dateArr = []
let fullDate = this.date.fullDate
for (let i = 1; i <= dateData; i++) {
let nowDate = full.year + '-' + (full.month < 10 ?
full.month : full.month) + '-' + (i < 10 ?
'0' + i : i)
// 是否今天
let isDay = fullDate === nowDate
// 获取打点信息
let info = this.selected && this.selected.find((item) => {
if (this.dateEqual(nowDate, item.date)) {
return item
}
})
// 日期禁用
let disableBefore = true
let disableAfter = true
if (this.startDate) {
// let dateCompBefore = this.dateCompare(this.startDate, fullDate)
// disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
disableBefore = this.dateCompare(this.startDate, nowDate)
}
if (this.endDate) {
// let dateCompAfter = this.dateCompare(fullDate, this.endDate)
// disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
disableAfter = this.dateCompare(nowDate, this.endDate)
}
let multiples = this.multipleStatus.data
let checked = false
let multiplesStatus = -1
if (this.range) {
if (multiples) {
multiplesStatus = multiples.findIndex((item) => {
return this.dateEqual(item, nowDate)
})
}
if (multiplesStatus !== -1) {
checked = true
}
}
let data = {
fullDate: nowDate,
year: full.year,
date: i,
multiple: this.range ? checked : false,
beforeMultiple: this.dateEqual(this.multipleStatus.before, nowDate),
afterMultiple: this.dateEqual(this.multipleStatus.after, nowDate),
month: full.month,
lunar: this.getlunar(full.year, full.month, i),
disable: !(disableBefore && disableAfter),
isDay
}
if (info) {
data.extraInfo = info
}
dateArr.push(data)
}
return dateArr
}
/**
* 获取下月天数
*/
_getNextMonthDays(surplus, full) {
let dateArr = []
for (let i = 1; i < surplus + 1; i++) {
dateArr.push({
date: i,
month: Number(full.month) + 1,
lunar: this.getlunar(full.year, Number(full.month) + 1, i),
disable: true
})
}
return dateArr
}
/**
* 获取当前日期详情
* @param {Object} date
*/
getInfo(date) {
if (!date) {
date = new Date()
}
const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
return dateInfo
}
/**
* 比较时间大小
*/
dateCompare(startDate, endDate) {
// 计算截止时间
startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
// 计算详细项的截止时间
endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
if (startDate <= endDate) {
return true
} else {
return false
}
}
/**
* 比较时间是否相等
*/
dateEqual(before, after) {
// 计算截止时间
before = new Date(before.replace('-', '/').replace('-', '/'))
// 计算详细项的截止时间
after = new Date(after.replace('-', '/').replace('-', '/'))
if (before.getTime() - after.getTime() === 0) {
return true
} else {
return false
}
}
/**
* 获取日期范围内所有日期
* @param {Object} begin
* @param {Object} end
*/
geDateAll(begin, end) {
var arr = []
var ab = begin.split('-')
var ae = end.split('-')
var db = new Date()
db.setFullYear(ab[0], ab[1] - 1, ab[2])
var de = new Date()
de.setFullYear(ae[0], ae[1] - 1, ae[2])
var unixDb = db.getTime() - 24 * 60 * 60 * 1000
var unixDe = de.getTime() - 24 * 60 * 60 * 1000
for (var k = unixDb; k <= unixDe;) {
k = k + 24 * 60 * 60 * 1000
arr.push(this.getDate(new Date(parseInt(k))).fullDate)
}
return arr
}
/**
* 计算阴历日期显示
*/
getlunar(year, month, date) {
return CALENDAR.solar2lunar(year, month, date)
}
/**
* 设置打点
*/
setSelectInfo(data, value) {
this.selected = value
this._getWeek(data)
}
/**
* 获取多选状态
*/
setMultiple(fullDate) {
let {
before,
after
} = this.multipleStatus
if (!this.range) return
if (before && after) {
this.multipleStatus.before = ''
this.multipleStatus.after = ''
this.multipleStatus.data = []
} else {
if (!before) {
this.multipleStatus.before = fullDate
} else {
this.multipleStatus.after = fullDate
if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
} else {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
}
}
}
this._getWeek(fullDate)
}
/**
* 获取每周数据
* @param {Object} dateData
*/
_getWeek(dateData) {
const {
year,
month
} = this.getDate(dateData)
let firstDay = new Date(year, month - 1, 1).getDay()
let currentDay = new Date(year, month, 0).getDate()
let dates = {
lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天
currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数
nextMonthDays: [], // 下个月开始几天
weeks: []
}
let canlender = []
const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))
canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
let weeks = {}
// 拼接数组 上个月开始几天 + 本月天数+ 下个月开始几天
for (let i = 0; i < canlender.length; i++) {
if (i % 7 === 0) {
weeks[parseInt(i / 7)] = new Array(7)
}
weeks[parseInt(i / 7)][i % 7] = canlender[i]
}
this.canlender = canlender
this.weeks = weeks
}
//静态方法
// static init(date) {
// if (!this.instance) {
// this.instance = new Calendar(date);
// }
// return this.instance;
// }
}
export default Calendar

88
project-wl-siji-uniapp-vue3/pages/user/components/Calendar/package.json Normal file
View File

@@ -0,0 +1,88 @@
{
"id": "uni-calendar",
"displayName": "uni-calendar 日历",
"version": "1.4.5",
"description": "日历组件",
"keywords": [
"uni-ui",
"uniui",
"日历",
"",
"打卡",
"日历选择"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}

103
project-wl-siji-uniapp-vue3/pages/user/components/Calendar/readme.md Normal file
View File

@@ -0,0 +1,103 @@
## Calendar 日历
> **组件名：uni-calendar**
> 代码块： `uCalendar`
日历组件
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 本组件农历转换使用的js是 [@1900-2100区间内的公历、农历互转](https://github.com/jjonline/calendar.js)
> - 仅支持自定义组件模式
> - `date`属性传入的应该是一个 String ，如： 2019-06-27 ，而不是 new Date()
> - 通过 `insert` 属性来确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件，但是为了区分模式，现使用两个事件，这里需要注意
> - 弹窗模式下无法阻止后面的元素滚动，如有需要阻止，请在弹窗弹出后，手动设置滚动元素为不可滚动
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
在 ``template`` 中使用组件
```html
<view>
<uni-calendar
:insert="true"
:lunar="true"
:start-date="'2019-3-2'"
:end-date="'2019-5-20'"
@change="change"
/>
</view>
```
### 通过方法打开日历
需要设置 `insert` 为 `false`
```html
<view>
<uni-calendar
ref="calendar"
:insert="false"
@confirm="confirm"
/>
<button @click="open">打开日历</button>
</view>
```
```javascript
export default {
data() {
return {};
},
methods: {
open(){
this.$refs.calendar.open();
},
confirm(e) {
console.log(e);
}
}
};
```
## API
### Calendar Props
| 属性名 | 类型 | 默认值| 说明 |
| | |
| date | String |- | 自定义当前时间，默认为今天 |
| lunar | Boolean | false | 显示农历 |
| startDate | String |- | 日期选择范围-开始日期 |
| endDate | String |- | 日期选择范围-结束日期 |
| range | Boolean | false | 范围选择 |
| insert | Boolean | false | 插入模式,可选值，ture：插入模式；false：弹窗模式；默认为插入模式 |
|clearDate |Boolean |true |弹窗模式是否清空上次选择内容 |
| selected | Array |- | 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}] |
|showMonth | Boolean | true | 是否显示月份为背景 |
### Calendar Events
| 事件名 | 说明 |返回值|
| | | |
| open | 弹出日历组件，`insert :false` 时生效|- |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar](https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar)

75
project-wl-siji-uniapp-vue3/pages/user/components/CarInfo.vue Normal file
View File

@@ -0,0 +1,75 @@
<!-- 车辆信息 -->
<template>
<!-- end -->
<view class="carInfo">
<image class="carImage" src="@/static/sj_demo_carImg.jpg" mode=""></image>
<view class="info">
<view class="line">
<text class="tit">车辆编号</text><text>{{data.id}}</text>
</view>
<view class="line">
<text class="tit">车辆号牌</text><text>{{data.licensePlate}}</text>
</view>
<view class="line">
<text class="tit">车型</text><text>{{data.truckType}}</text>
</view>
<view class="line">
<text class="tit">载重</text><text>{{data.allowableLoad}}吨</text>
</view>
</view>
</view>
<!-- end -->
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { getCarInfo } from '@/pages/api/user.js';
// ------定义变量------
const data = ref({});
// 生命周期 获取车辆信息
onMounted(async () => {
await getCarInfo()
.then(res => {
if (res.code == 200) {
if (res.data == null){
return false
}
data.value = res.data
} else {
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
}
})
.catch(err => {});
})
</script>
<style lang="scss" scoped>
.carInfo{
padding: 30rpx;
.carImage{
width: 100%;
border-radius: 16rpx;
}
.info{
background: var(--neutral-color-white);
border-radius: 20rpx;
padding:40rpx;
margin-top: 24rpx;
font-size: var(--font-size-14);
.line{
display: flex;
justify-content: space-between;
line-height: 80rpx;
color: var(--neutral-color-main);
.tit{
color: var(--neutral-color-font);
}
}
}
}
</style>

230
project-wl-siji-uniapp-vue3/pages/user/components/ChangePass.vue Normal file
View File

@@ -0,0 +1,230 @@
<!-- 更改密码 -->
<template>
<!-- 登录表单 手机号、验证码 -->
<view class="loginMain">
<uni-forms ref="customForm" :rules="customRules" :modelValue="fromInfo">
<uni-forms-item name="phone"><uni-easyinput class="item" v-model="fromInfo.phone" :clearable="false" placeholder="请输入已绑定手机号" /></uni-forms-item>
<uni-forms-item name="verifyCode">
<uni-easyinput class="item inputW" v-model="fromInfo.verifyCode" :clearable="false" placeholder="请输入验证码" />
<view class="codeBox">
<text class="code" v-show="codeInfo.show" @click="getCode">获取验证码</text>
<text class="code fontCol" v-show="!codeInfo.show">{{ codeInfo.times }}s后重新获取</text>
</view>
</uni-forms-item>
<uni-forms-item name="pass"><uni-easyinput class="item" v-model="fromInfo.pass" placeholder="请输入新密码" /></uni-forms-item>
</uni-forms>
<!-- 按钮 -->
<view class="btnBox" style="padding-top:100rpx;">
<text class="button"
:class="fromInfo.phone.length === 0 || fromInfo.verifyCode.length === 0 ? 'buttonDis1' : 'button'"
@click="handleSubmit"
>确认修改</text>
</view>
<!-- end -->
</view>
<!-- end -->
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useStore } from 'vuex';
import { validatePhone, timeCountdown, isPhone } from '@/utils/validate';
import { getsmsCode, changePass } from '@/pages/api/user.js'
//vuex获取储存数据
const store = useStore();
const customForm = ref();
const isVerifySuccess = ref(false);
// 表单数据
const fromInfo = reactive({
phone: '', //手机号
verifyCode: '' ,// 验证码
pass:'', // 新密码
});
// 验证码倒计时数据
const codeInfo = reactive({
show: true,
timer: null,
times: 60
});
// 表单校验
const customRules = reactive({
phone: {
rules: [
{
required: true,
validateFunction: validatePhone,
errorMessage: '请输入手机号'
}
]
},
verifyCode: {
rules: [
{
required: true,
errorMessage: '请输入验证码'
}
]
},
pass: {
rules: [
{
required: true,
validateFunction: validatePhone,
errorMessage: '请输入新密码'
}
]
},
});
// 获取验证码
const getCode = async () => {
let p = fromInfo.phone;
isVerifySuccess.value = isPhone(p);
if (isVerifySuccess.value) {
timeCountdown(codeInfo);
const parent = {
phone: phone.value
};
// 获取手机验证码
const {data} = await getsmsCode(parent)
if(ddata.code == 0 || data.code == 200){
uni.showToast({
title: '验证码已发送成功',
duration: 1000,
icon: 'none'
});
}else{
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
}
} else {
return uni.showToast({
title: '手机号输入错误！请重新输入',
duration: 1000,
icon: 'none'
});
}
};
// 修改密码提交
const handleSubmit = async() => {
// 表单校验
const valid = await customForm.value.validate();
if (valid) {
// 修改密码
await changePass(fromInfo)
.then(res => {
if (res.code === 200) {
// 密码修改成功 、重新登录
uni.showToast({
title: '密码修改成功！',
duration: 1000,
icon: 'none'
});
setTimeout(()=>{
goLogin()
}, 500)
} else {
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
// 密码输入错误！请重新输入
// 账号输入错误！请重新输入
}
})
.catch(err => {});
}
};
// 去手机登录页面
const goLogin = () => {
uni.redirectTo({
url: '/pages/login/user'
});
};
</script>
<style lang="scss" scoped>
.loginMain {
background-color: #fff;
height: calc(100vh - 90rpx);
::v-deep .uni-input-input{
color: var(--neutral-color-main);
}
padding: 66rpx;
.item {
::v-deep .is-input-border {
padding: 30rpx 0;
font-weight: 400;
font-size: 32rpx;
line-height: 40rpx;
color: #797979;
letter-spacing: 0.36rpx;
border: 0 none;
border-bottom: 1px solid var(--neutral-color-background);
position: relative;
border-radius: 0;
.uni-easyinput__placeholder-class {
font-size: 32rpx;
color: var(--neutral-color-font);
letter-spacing: 0.36rpx;
}
.uni-easyinput__content-input {
padding-left: 0 !important;
font-size: 32rpx;
}
}
::v-deep .is-input-error-border {
border-bottom: 1px solid var(--essential-color-red);
margin-bottom: 44rpx;
}
::v-deep .content-clear-icon{
padding: 0;
font-size: 28rpx !important;
line-height: 46rpx;
}
::v-deep .uniui-eye-filled{
background: url(@/static/icon-close.png) 50% 50% no-repeat;
background-size: contain;
&:before{
color:transparent;
}
}
::v-deep .uniui-eye-slash-filled{
background: url(@/static/icon-open.png) 50% 50% no-repeat;
background-size: contain;
&:before{
color:transparent;
}
}
}
::v-deep .uni-forms-item__inner {
padding-bottom: 0;
}
::v-deep .uni-error-message {
bottom: -10rpx;
}
::v-deep .content-clear-icon {
margin-right: 30rpx;
}
.inputW{
::v-deep .is-input-border{
padding-right: 166rpx;
}
}
.codeBox {
position: absolute;
right: 40rpx;
top: 34rpx;
font-size: 28rpx;
color: #818181;
border-left: solid 4rpx #f4f4f4;
padding-left: 20rpx;
}
}
</style>

260
project-wl-siji-uniapp-vue3/pages/user/components/ChangePhon.vue Normal file
View File

@@ -0,0 +1,260 @@
<!-- 更改手机号 -->
<template>
<!-- 登录表单 手机号、验证码 -->
<view class="loginMain">
<uni-forms ref="customForm" :rules="customRules" :modelValue="fromInfo">
<uni-forms-item name="phone">
<uni-easyinput class="item" v-model="fromInfo.phone" :clearable="false" :placeholder=" step == 1 ? '请输入已绑定手机号' : '请输入新手机号'" />
</uni-forms-item>
<uni-forms-item name="verifyCode">
<uni-easyinput class="item inputW" v-model="fromInfo.verifyCode" :clearable="false" placeholder="请输入验证码" />
<view class="codeBox">
<text class="code" v-show="codeInfo.show" @click="getCode">获取验证码</text>
<text class="code fontCol" v-show="!codeInfo.show">{{ codeInfo.times }}s后重新获取</text>
</view>
</uni-forms-item>
</uni-forms>
<!-- 按钮 -->
<view class="btnBox" style="padding-top:100rpx;">
<text class="button"
:class="fromInfo.phone.length === 0 || fromInfo.verifyCode.length === 0 ? 'buttonDis1' : 'button'"
@click="handleSubmit"
>{{step == 1 ? '下一步' : '确定绑定'}}</text>
</view>
<!-- end -->
</view>
<!-- end -->
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useStore } from 'vuex';
import { validatePhone, timeCountdown, isPhone } from '@/utils/validate';
import { getsmsCode, checksmsCode, bindPhone } from '@/pages/api/user.js'
//vuex获取储存数据
const store = useStore();
const customForm = ref();
const isVerifySuccess = ref(false);
const step = ref(1) // 1 换绑手机 老手机号验证 2 新手机号绑定
const time = ref(null) // 倒计时对象缓存 在切换下一步时清除用
// 表单数据
const fromInfo = reactive({
phone: '', //手机号
verifyCode: '' // 验证码
});
// 验证码倒计时数据
const codeInfo = reactive({
show: true,
timer: null,
times: 60
});
// 表单校验
const customRules = reactive({
phone: {
rules: [
{
required: true,
validateFunction: validatePhone,
errorMessage: '请输入手机号'
}
]
},
verifyCode: {
rules: [
{
required: true,
errorMessage: '请输入验证码'
}
]
}
});
// 获取验证码
const getCode = async () => {
let phone = fromInfo.phone;
isVerifySuccess.value = isPhone(phone);
if (isVerifySuccess.value) {
time.value = timeCountdown(codeInfo);
const parent = {
phone
};
// 获取手机验证码
const {data} = await getsmsCode(parent)
if(data.code == 0 || data.code == 200){
uni.showToast({
title: '验证码已发送成功',
duration: 1000,
icon: 'none'
});
}else{
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
}
} else {
return uni.showToast({
title: '手机号输入错误！请重新输入',
duration: 1000,
icon: 'none'
});
}
};
// 效验验证码通过进入下一步
const handleSubmit = async() => {
// 表单校验
const valid = await customForm.value.validate();
if (valid && step.value == 1) {
// 效验验证码
checkCode()
} else {
// 绑定手机号
bindPhoneHandle()
}
};
// 效验验证码
async function checkCode(){
// 效验验证码
await checksmsCode(fromInfo)
.then(res => {
if (res.code === 200) {
// 进入下一步
step.value = 2
// 清空输入框
fromInfo.phone = ''
fromInfo.verifyCode = ''
// 还原倒计时
codeInfo.show = true
codeInfo.times = 60
} else {
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
// 密码输入错误！请重新输入
// 账号输入错误！请重新输入
}
})
.catch(err => {});
}
// 绑定手机号
async function bindPhoneHandle(){
// 绑定手机号
await bindPhone(fromInfo)
.then(res => {
if (res.code === 200) {
// 绑定成功 重新登录
uni.showToast({
title: '绑定成功请重新登录！',
duration: 1000,
icon: 'none'
});
setTimeout(()=>{
goLogin()
}, 500)
goLogin()
} else {
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
// 密码输入错误！请重新输入
// 账号输入错误！请重新输入
}
})
.catch(err => {});
}
// 去手机登录页面
const goLogin = () => {
uni.redirectTo({
url: '/pages/login/user'
});
};
</script>
<style lang="scss" scoped>
.loginMain {
background-color: #fff;
height: calc(100vh - 90rpx);
::v-deep .uni-input-input{
color: var(--neutral-color-main);
}
padding: 66rpx;
.item {
::v-deep .is-input-border {
padding: 30rpx 0;
font-weight: 400;
font-size: 32rpx;
line-height: 40rpx;
color: #797979;
letter-spacing: 0.36rpx;
border: 0 none;
border-bottom: 1px solid var(--neutral-color-background);
position: relative;
border-radius: 0;
.uni-easyinput__placeholder-class {
font-size: 32rpx;
color: var(--neutral-color-font);
letter-spacing: 0.36rpx;
}
.uni-easyinput__content-input {
padding-left: 0 !important;
font-size: 32rpx;
}
}
::v-deep .is-input-error-border {
border-bottom: 1px solid var(--essential-color-red);
margin-bottom: 44rpx;
}
::v-deep .content-clear-icon{
padding: 0;
font-size: 28rpx !important;
line-height: 46rpx;
}
::v-deep .uniui-eye-filled{
background: url(@/static/icon-close.png) 50% 50% no-repeat;
background-size: contain;
&:before{
color:transparent;
}
}
::v-deep .uniui-eye-slash-filled{
background: url(@/static/icon-open.png) 50% 50% no-repeat;
background-size: contain;
&:before{
color:transparent;
}
}
}
::v-deep .uni-forms-item__inner {
padding-bottom: 0;
}
::v-deep .uni-error-message {
bottom: -10rpx;
}
::v-deep .content-clear-icon {
margin-right: 30rpx;
}
.inputW{
::v-deep .is-input-border{
padding-right: 166rpx;
}
}
.codeBox {
position: absolute;
right: 40rpx;
top: 34rpx;
font-size: 28rpx;
color: #818181;
border-left: solid 4rpx #f4f4f4;
padding-left: 20rpx;
}
}
</style>

206
project-wl-siji-uniapp-vue3/pages/user/components/SystmSet.vue Normal file
View File

@@ -0,0 +1,206 @@
<!-- 我的- 系统设置 -->
<template>
<view class="systmSet">
<view class="navList">
<!-- <view class="line" @click="goDetails(`/pages/user/setCarrier?type=phone&title=换绑手机`)"> -->
<view class="line" @click="goDetails(``)">
<text>换绑手机</text>
<image class="icon" src="@/static/sj_open_rit.png" mode=""></image>
</view>
<view class="line" @click="goDetails(``)">
<!-- <view class="line" @click="goDetails(`/pages/user/setCarrier?type=pass&title=修改密码`)"> -->
<text>修改密码</text>
<image class="icon" src="@/static/sj_open_rit.png" mode=""></image>
</view>
<view class="line" @click="goDetails(`/pages/user/setCarrier?type=setMessage&title=消息通知设置`)">
<text>消息通知设置</text>
<image class="icon" src="@/static/sj_open_rit.png" mode=""></image>
</view>
<view class="line" @click="dialogToggle('clear', `清理缓存后会清空所有数据`, '清理')">
<text>清理缓存</text>
<image class="icon" src="@/static/sj_open_rit.png" mode=""></image>
</view>
</view>
<view class="navList">
<view class="back" @click="dialogToggle('back', '确定要退出登录？', '退出')">
<text>退出</text>
</view>
</view>
</view>
<!-- 提示窗示例 清理缓存、退出的提示 - start-->
<Popup ref="alertDialog" type="dialog">
<PopupDialog :type="msgType" cancelText="关闭" :confirmText="butText" :content="content" @confirm="confirmHandle"
@close="dialogClose"></PopupDialog>
</Popup>
<!-- 提示窗示例 清理缓存、退出的提示 - end-->
</template>
<script >
// 变量导入
import { ref, onMounted } from 'vue';
import Popup from '@/components/Popup/components/uni-popup/uni-popup.vue'
import PopupDialog from '@/components/Popup/components/uni-popup-dialog/uni-popup-dialog.vue'
export default {
data(){
return {
type:'clear',
msgType:'success',
content: '',
butText: '清理',
}
},
components:{
Popup,
PopupDialog
},
created() {
// 差量编译 只有在app中才纯在清理缓存的功能
// #ifdef APP-PLUS
this.formatSize()
// #endif
},
methods:{
// 计算缓存大小
formatSize() {
let that = this;
plus.cache.calculate(function(size) {
let sizeCache = parseInt(size);
if (sizeCache == 0) {
that.fileSizeString = "0B";
} else if (sizeCache < 1024) {
that.fileSizeString = sizeCache + "B";
} else if (sizeCache < 1048576) {
that.fileSizeString = (sizeCache / 1024).toFixed(2) + "KB";
} else if (sizeCache < 1073741824) {
that.fileSizeString = (sizeCache / 1048576).toFixed(2) + "MB";
} else {
that.fileSizeString = (sizeCache / 1073741824).toFixed(2) + "GB";
}
});
},
// 清楚缓存
clearCache() {
let that = this;
let os = plus.os.name;
that.formatSize();
if (parseInt(that.fileSizeString) <= 100){
uni.showToast({
icon:'none',
title: '没有缓存了',
duration: 2000
});
} else if (os == 'Android') {
let main = plus.android.runtimeMainActivity();
let sdRoot = main.getCacheDir();
let files = plus.android.invoke(sdRoot, "listFiles");
let len = files.length;
for (let i = 0; i < len; i++) {
let filePath = '' + files[i]; // 没有找到合适的方法获取路径，这样写可以转成文件路径
plus.io.resolveLocalFileSystemURL(filePath, function(entry) {
if (entry.isDirectory) {
entry.removeRecursively(function(entry) { //递归删除其下的所有文件及子目录
uni.showToast({
title: '缓存清理完成',
duration: 2000
});
that.formatSize(); // 重新计算缓存
}, function(e) {
console.log(e.message)
});
} else {
entry.remove();
}
}, function(e) {
console.log('文件路径读取失败')
});
}
} else { // ios
plus.cache.clear(function() {
uni.showToast({
title: '缓存清理完成',
duration: 2000
});
that.formatSize();
});
}
},
// 弹窗的点击事件设置对应的展示信息
dialogToggle(type, content, butText) {
this.type = type
this.content = content
this.butText = butText
this.$refs.alertDialog.open()
},
// 点击清理按钮清理缓存 点击退出直接退出
confirmHandle(){
this.type == 'clear' ? this.clearCache() : this.backlogin()
},
// 关闭弹窗
dialogClose(){
},
// 去详情页面
goDetails(url){
if (url == ''){
uni.showToast({
title: '抱歉 该功能暂未实现！',
duration: 2000,
icon: 'none'
});
return
}
uni.navigateTo({
url
})
},
// 退出登录
backlogin(){
this.goDetails('/pages/login/user')
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .uni-dialog-title{
padding:0;
}
::v-deep .uni-dialog-content{
padding: 80rpx 0 60rpx 0;
font-size: var(--font-size-16);
}
::v-deep .uni-dialog-content-text{
font-size: var(--font-size-16);
color: var(--neutral-color-main);
}
.systmSet{
.navList{
position: relative;
background: var(--neutral-color-white);
border-radius: 16rpx;
padding: 0rpx 48rpx;
margin: 40rpx 30rpx 80rpx 30rpx;
font-size: var(--font-size-16);
.line{
line-height: 114rpx;
border-bottom: solid 2rpx var(--neutral-color-cancel);
display: flex;
justify-content: space-between;
align-items: center;
.icon{
width: 48rpx;
height: 48rpx;
}
}
.line:last-child{
border: none;
}
}
.back{
text-align: center;
line-height: 120rpx;
font-size: var(--font-size-16);
}
}
</style>

107
project-wl-siji-uniapp-vue3/pages/user/components/TaskData.vue Normal file
View File

@@ -0,0 +1,107 @@
<!-- 车辆信息 -->
<template>
<view class="taskData">
<!-- 日历模块 - 使用uni的日历重写 - start -->
<Calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false" @monthSwitch="monthSwitch" >
<!-- 任务栏数据展示 -->
<view class="taskCont">
<TaskInfo :title="false" :data="taskData" class="task" />
</view>
</Calendar>
<!-- 日历模块 - start -->
</view>
</template>
<script setup>
// 模块、接口导入
import { ref,reactive, onMounted } from 'vue';
import TaskInfo from './TaskInfo.vue'
import Calendar from './Calendar/components/uni-calendar/uni-calendar.vue'
// 请求API
import { getTaskData } from '@/pages/api/user.js';
// ------定义变量------
// 日历的展示数据
const info = reactive({
lunar: true,
range: true,
insert: false,
selected: []
})
const taskData = ref({})
// 生命周期
onMounted(()=>{
const date = getDate(new Date())
getTask({year: date.year, month: date.month});
// 配置任务日历展示订单数量的数据处理 - 等日历展示处理后添加数据
setTimeout(() => {
info.date = getDate(new Date(),-30).fullDate
info.startDate = getDate(new Date(),-60).fullDate
info.endDate = getDate(new Date(),30).fullDate
info.selected = info.selected
}, 1000)
})
// 获取任务数据
async function getTask(params){
await getTaskData(params)
.then(res => {
if (res.code == 200) {
const { data } = res
// 任务数据赋值
taskData.value = data
// 日历中任务数量显示数据处理
info.selected = data.dailyMileage.map((n)=>{
if (getDate(n.dateTime).fullDate != getDate(new Date()).fullDate){
return {date: getDate(n.dateTime).fullDate, info: n.mileage}
}
}).filter(n => n != undefined)
} else {
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
}
})
.catch(err => {});
}
// 通过左右箭头(和确认)改变月份 从新请求数据
function monthSwitch(e) {
getTask(e)
}
// 日期处理
function getDate(date, AddDayCount = 0) {
if (!date) {
date = new Date()
}
if (typeof date !== 'object') {
date = date.replace(/-/g, '/')
}
const dd = new Date(date)
// 获取AddDayCount天后的日期
dd.setDate(dd.getDate() + AddDayCount)
const y = dd.getFullYear()
// 获取当前月份的日期，不足10补0
const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1
// 获取当前几号，不足10补0
const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate()
return {
fullDate: y + '-' + m + '-' + d,
year: y,
month: m,
date: d,
day: dd.getDay()
}
}
</script>
<style lang="scss" >
.taskCont{
position: relative;
margin-bottom: 40rpx;
.task{
top: 0;
border-radius: 0;
}
}
</style>

73
project-wl-siji-uniapp-vue3/pages/user/components/TaskInfo.vue Normal file
View File

@@ -0,0 +1,73 @@
<!-- 月度任务信息 -->
<template>
<view class="teskInfo">
<view class="title" v-if="title">
<text> - 本月任务 - </text>
</view>
<view class="info">
<view class="cl" >
<view class="num">{{data.taskAmounts}}</view>
<view class="title">任务总量</view>
</view>
<view class="cl">
<view class="num">{{data.completedAmounts}}</view>
<view class="title">完成任务量</view>
</view>
<view class="cl" >
<view class="num">{{data.transportMileage}}</view>
<view class="title">运输里程(km)</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
// 导航
import UniNav from '@/components/Nav/index.vue';
const props = defineProps({
title: { // 是否展示标题 两个地方用一个有一个没用
type: Boolean,
default: true
},
data: { // 任务数据
type: Object,
default:{}
}
});
</script>
<style lang="scss" scoped>
.teskInfo{
text-align: center;
position: relative;
z-index: 1;
top: -180rpx;
background: var(--neutral-color-white);
border-radius: 16rpx;
padding: 26rpx 48rpx;
.title{
padding-bottom: 20rpx;
}
.info{
display: flex;
text-align: center;
justify-content: space-between;
line-height: 48rpx;
color: var(--neutral-color-main);
.cl{
flex: 1;
.num{
line-height: 100rpx;
font-weight: 600;
font-size: var(--font-size-18);
}
.title{
font-size: var(--font-size-12);
}
}
}
}
</style>

67
project-wl-siji-uniapp-vue3/pages/user/index.scss Normal file
View File

@@ -0,0 +1,67 @@
@import url(@/styles/theme.scss);
.userContainer {
.topbackground{
position: relative;
overflow: hidden;
height: 42vh;
&::before{
content: "";
position: absolute;
left: -50%;
z-index: 1;
width: 200vw;
border-radius: 100%;
bottom: 0;
height: 80vh;
background-color: var(--essential-color-red);
}
}
.container{
padding: 30rpx;
}
.myInfo{
width: 80%;
position: absolute;
left: 50%;
transform: translate(-50%);
bottom: 200rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1;
color: var(--neutral-color-white);
font-size: var(--font-size-14);
line-height: 60rpx;
.title{
font-weight: 600;
font-size: var(--font-size-18);
line-height: 80rpx;
}
.userIcon{
width: 130rpx;
height: 130rpx;
}
}
.navList{
position: relative;
top: -150rpx;
background: var(--neutral-color-white);
border-radius: 16rpx;
padding: 0rpx 48rpx;
.line{
line-height: 116rpx;
border-bottom: solid 2rpx var(--neutral-color-cancel);
display: flex;
justify-content: space-between;
align-items: center;
.icon{
width: 48rpx;
height: 48rpx;
}
}
.line:last-child{
border: none;
}
}
}

107
project-wl-siji-uniapp-vue3/pages/user/index.vue Normal file
View File

@@ -0,0 +1,107 @@
<!-- 我的首页 -->
<template>
<!-- start -->
<view class="userContainer">
<!-- 我的信息 -->
<view class="topbackground">
<view class="myInfo">
<image src="@/static/sj_userIcon.png" class="userIcon" mode=""></image>
<text class="title">{{userInfo.name}}</text>
<text>司机编号：{{userInfo.number}}</text>
<text>手机号：{{userInfo.phone}}</text>
</view>
</view>
<view class="container">
<!-- 本月任务信息 -->
<TaskInfo :data="taskData" />
<!-- end -->
<!-- 取件状态列表 -->
<view class="navList">
<view class="line" @click="goDetails(`/pages/user/carrier?type=carInfo&title=车辆信息`)">
<text>车辆信息</text>
<image class="icon" src="../../static/sj_open_rit.png" mode=""></image>
</view>
<view class="line" @click="goDetails(`/pages/user/carrier?type=taskData&title=任务数据`)">
<text>任务数据</text>
<image class="icon" src="../../static/sj_open_rit.png" mode=""></image>
</view>
<view class="line" @click="goDetails(`/pages/user/carrier?type=systmSet&title=系统设置`)">
<text>系统设置</text>
<image class="icon" src="../../static/sj_open_rit.png" mode=""></image>
</view>
</view>
</view>
</view>
<!-- footer -->
<UniFooter :pagePath="'pages/index/index'"></UniFooter>
<!-- end -->
</template>
<script setup>
import { ref, onMounted } from 'vue';
// 导航
import UniNav from '@/components/Nav/index.vue';
// 任务详情组件
import TaskInfo from './components/TaskInfo.vue';
// 底部导航
import UniFooter from '@/components/Footer/index.vue';
// 请求API
import { getTaskData, getUserInfo } from '@/pages/api/user.js';
// ------定义变量------
// 任务数据
const taskData = ref({})
// 车辆详细
const userInfo = ref({})
// 生命周期 - 获取任务、用户数据
onMounted(()=>{
getUser()
getTask()
})
// 获取用户信息
async function getUser (){
await getUserInfo()
.then(res => {
if (res.code == 200) {
userInfo.value = res.data
} else {
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
}
})
.catch(err => {});
}
// 获取任务信息
async function getTask(){
const date = new Date()
const params = {
year: date.getFullYear(),
month: date.getMonth()+1 < 9 ? `0${date.getMonth()+1}` : date.getMonth()+1
}
await getTaskData(params)
.then(res => {
if (res.code == 200) {
taskData.value = res.data
} else {
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
}
})
.catch(err => {});
}
// 去往其他页面
function goDetails(url){
uni.navigateTo({
url
})
}
</script>
<style src="./index.scss" lang="scss" scoped></style>

77
project-wl-siji-uniapp-vue3/pages/user/setCarrier.vue Normal file
View File

@@ -0,0 +1,77 @@
<!-- 系统设置 容器页面 -->
<template>
<!-- end -->
<view class="userContainer">
<DetailsNav :title="title"></DetailsNav>
<!-- 换绑手机 -->
<!-- <CarInfo v-if="type == 'phone'" ></CarInfo> -->
<ChangePhon v-if="type == 'phone'" class="" />
<!-- 修改密码 -->
<ChangePass v-if="type == 'pass'" />
<!-- 消息通知设置-->
<!-- <SystmSet v-if="type == 'setMessage'" ></SystmSet> -->
<view v-if="type == 'setMessage'" class="setMessage">
<view class="desc"> <text>开启后，有新的任务通知你</text> </view>
<view class="set">
<text>允许给我推送任务通知</text>
<switch :checked='isMessage' color="#EF4F3F" @change="switchChange" />
</view>
</view>
</view>
<!-- end -->
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useStore } from 'vuex';
// 导航
import DetailsNav from '@/components/DetailsNav/index.vue';
import ChangePhon from './components/ChangePhon.vue';
import ChangePass from './components/ChangePass.vue';
// ------定义变量------
const store = useStore(); //vuex获取储存数据
const title = ref('车辆信息')
const type = ref('')
const isMessage = ref(true) // 是否允许消息通知
// 初始化信息
onMounted(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1].$page.options;
type.value = currentPage.type
title.value = currentPage.title
isMessage.value = store.state.isMessage
});
// 更改状态
const switchChange = function (e) {
// 全局报错
store.commit('setIsMessage', e.detail.value);
// 更新当前组件状态
isMessage.value = e.detail.value
}
</script>
<style lang="scss" scoped>
.setMessage{
padding-top: 40rpx;
.desc{
font-weight: 400;
font-size: 14px;
color: #818181;
padding: 20rpx 44rpx;
}
.set{
display: flex;
justify-content: space-between;
background-color: #ffffff;
font-weight: 400;
font-size: 16px;
padding: 30rpx 44rpx;
line-height: 64rpx;
color: #2A2929;
}
}
</style>