123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205 |
- <template>
- <div class="sj_history">
- <van-tabs :active="active" color="rgba(138, 5, 84, 1)" @change="onChange">
- <van-tab title="待签到"></van-tab>
- <van-tab title="待入场"></van-tab>
- <van-tab title="装卸中"></van-tab>
- <van-tab title="已完成"></van-tab>
- <van-tab title="已过期"></van-tab>
- <van-tab title="已取消"></van-tab>
- <van-tab title="全部"></van-tab>
- </van-tabs>
- <div class="list">
- <div class="list-item" v-for="item in list" :key="item.id">
- <div class="status qd" v-if="item.status == 0">待签到</div>
- <div class="status rz" v-if="item.status == 1">待入厂</div>
- <div class="status zx" v-if="item.status == 2">装卸中</div>
- <div class="status wc" v-if="item.status == 3">已完成</div>
- <div class="status gq" v-if="item.status == 4">已过期</div>
- <div class="status qx" v-if="item.status == 5">已取消</div>
- <div
- class="time"
- @click="jumpPage('/pages/subPackages/sj_history/edit?id=' + item.id)"
- >
- {{ item.reservationDate }}
- {{ item.timeStart + "~" + item.timeEnd }} 装货
- </div>
- <div class="info">{{ item.loadNum }}个托盘</div>
- <div class="info1">车辆:{{ item.carNo }}/{{ item.carType }}</div>
- <div class="info1">司机:{{ item.driverName }}</div>
- <div v-if="item.status == 5" class="info1 qxrq">
- 取消日期:2024-07-31 15:00
- </div>
- <div class="bottborder"></div>
- <div class="foot-btn">
- <van-button
- color="rgba(138, 5, 84, 1)"
- plain
- type="default"
- size="small"
- @click="cancelRow(item)"
- >取消</van-button
- >
- <van-button
- style="margin-left: 24rpx"
- color="rgba(138, 5, 84, 1)"
- type="default"
- size="small"
- @click="
- jumpPage('/pages/subPackages/sj_history/edit?id=' + item.id)
- "
- >修改</van-button
- >
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import { reservationListPage } from "@/js_sdk/sjTools.js";
- import { getUserLocalStorageInfo } from "@/js_sdk/localUserInfo.js";
- export default {
- data() {
- return {
- searchData: {
- pageNum: 1,
- pageSize: 10,
- status: 0,
- },
- total: 0,
- list: [],
- };
- },
- onLoad() {
- console.log(getUserLocalStorageInfo().user.id);
- this.searchData.userId = getUserLocalStorageInfo().user.id;
- this.reservationListPage();
- },
- onReachBottom() {
- // 触底加载更多
- this.searchData.pageNum += 1;
- this.reservationListPage();
- },
- methods: {
- cancelRow(e) {
- console.log(e);
- },
- onChange(e) {
- console.log(e);
- this.list = [];
- let statusList = {
- 0: 0,
- 1: 1,
- 2: 2,
- 3: 3,
- 4: 4,
- 5: 5,
- 6: null,
- };
- this.searchData.status = statusList[e.detail.index];
- this.reservationListPage();
- },
- async reservationListPage() {
- let { data } = await reservationListPage(this.searchData);
- console.log(data);
- if (this.list.length != data.total) {
- this.list.push(...data.list);
- }
- },
- jumpPage(path) {
- console.log(path);
- uni.navigateTo({
- url: path,
- fail: (fail) => {},
- });
- },
- },
- };
- </script>
- <style lang="scss">
- .sj_history {
- .list {
- .list-item {
- padding: 24rpx 32rpx;
- background: #ffffff;
- position: relative;
- margin-top: 24rpx;
- .foot-btn {
- display: flex;
- justify-content: flex-end;
- padding-top: 16rpx;
- .van-button {
- border-radius: 30rpx 30rpx 30rpx 30rpx;
- }
- }
- .bottborder {
- padding-bottom: 24rpx;
- border-bottom: 2rpx solid #e8edf5;
- }
- .info {
- font-weight: 400;
- font-size: 28rpx;
- color: #333333;
- }
- .info1 {
- margin-top: 8rpx;
- font-weight: 400;
- font-size: 28rpx;
- color: #666666;
- }
- .qxrq {
- color: rgba(142, 139, 228, 1);
- }
- .time {
- font-weight: 400;
- font-size: 32rpx;
- color: #333333;
- margin-bottom: 8rpx;
- }
- .status {
- width: 144rpx;
- height: 56rpx;
- text-align: center;
- line-height: 56rpx;
- border-top-right-radius: 5%;
- border-bottom-left-radius: 50%;
- position: absolute;
- top: -1rpx;
- right: 0;
- font-weight: 400;
- font-size: 28rpx;
- }
- .qd {
- background: rgba(3, 101, 249, 0.2);
- color: #0365f9;
- }
- .rc {
- background: rgba(255, 184, 0, 0.3);
- color: #d99f00;
- }
- .zx {
- background: rgba(138, 5, 84, 0.2);
- color: #8a0554;
- }
- .wc {
- background: rgba(34, 181, 101, 0.2);
- color: #22b565;
- }
- .gq {
- color: #c7191f;
- background: rgba(199, 25, 31, 0.2);
- }
- .qx {
- color: #888888;
- background: rgba(136, 136, 136, 0.3);
- }
- }
- }
- }
- </style>
|