|
|
@@ -0,0 +1,289 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import { getPickUpById } from '@/services/waybillPickUpOrder'
|
|
|
+import type { PickUpDetailItem } from '@/types/waybillPickUp'
|
|
|
+import { onShow } from '@dcloudio/uni-app'
|
|
|
+import { ref } from 'vue'
|
|
|
+
|
|
|
+// 获取屏幕边界到安全区域距离
|
|
|
+const { safeAreaInsets } = uni.getSystemInfoSync()
|
|
|
+
|
|
|
+// 接收页面参数
|
|
|
+const query = defineProps<{
|
|
|
+ id: string
|
|
|
+}>()
|
|
|
+
|
|
|
+// 获取商品详情信息
|
|
|
+const details = ref<PickUpDetailItem[]>()
|
|
|
+const getOrderByIdData = async () => {
|
|
|
+ const res = await getPickUpById(query.id)
|
|
|
+ details.value = res.data.details
|
|
|
+}
|
|
|
+
|
|
|
+// 页面加载
|
|
|
+onShow(() => {
|
|
|
+ getOrderByIdData()
|
|
|
+})
|
|
|
+
|
|
|
+// 点击图片时
|
|
|
+const onTapImage = (url: string) => {
|
|
|
+ // 大图预览
|
|
|
+ uni.previewImage({
|
|
|
+ current: url,
|
|
|
+ urls: goods.value!.mainPictures,
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 联系客户
|
|
|
+const contactClient = () => {
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: '13200000000',
|
|
|
+ })
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <scroll-view enable-back-to-top scroll-y class="viewport">
|
|
|
+ <view class="detail panel">
|
|
|
+ <view class="title">
|
|
|
+ <text>运单列表</text>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="properties">
|
|
|
+ <view v-for="item in details" :key="item.id" class="item">
|
|
|
+ <navigator :url="`/pages/pickup/waybillPickUpDetail?waybill_no=${item.waybill_no}`">
|
|
|
+ <view class="order_no_state">
|
|
|
+ <view>
|
|
|
+ <text>{{ item.waybill_no }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="order_state">
|
|
|
+ <text :class="'state-' + item.status">{{ item.status_text }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </navigator>
|
|
|
+ <view class="info">
|
|
|
+ <view>
|
|
|
+ 预估重量：
|
|
|
+ <text>{{ item.estimated_weight }}KG</text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ Ups 取件码：
|
|
|
+ <text>{{ item.ups_prn || '无' }}</text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ Ups 准备时间：
|
|
|
+ <text>{{ item.ups_ready_time || '无' }}</text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ Ups 截止时间：
|
|
|
+ <text>{{ item.ups_close_time || '无' }}</text>
|
|
|
+ </view>
|
|
|
+ <view> 面单 </view>
|
|
|
+ </view>
|
|
|
+ <view class="title label">
|
|
|
+ <text
|
|
|
+ >物品清单
|
|
|
+ <text class="bln" v-if="!item.goods.length">无</text>
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view v-for="(good, g) in item.goods" :key="g" class="goods">
|
|
|
+ <view
|
|
|
+ >类型：
|
|
|
+ <text>{{ good.category_name }}</text>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ >名称：
|
|
|
+ <text>{{ good.goods_name }}</text>
|
|
|
+ <text style="color: #666666; font-size: 22rpx">{{ ' x' + good.qty }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view
|
|
|
+ >价格：
|
|
|
+ <text>￡{{ good.price }}</text>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ >合计：
|
|
|
+ <text>￡{{ good.amount }}</text>
|
|
|
+ </view>
|
|
|
+ <!-- <image
|
|
|
+ class="image"
|
|
|
+ v-for="item in good.images"
|
|
|
+ :key="item"
|
|
|
+ mode="widthFix"
|
|
|
+ :src="item"
|
|
|
+ ></image> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 图片详情 -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ <!-- 用户操作 -->
|
|
|
+ <view
|
|
|
+ v-if="details"
|
|
|
+ class="contact-client"
|
|
|
+ :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"
|
|
|
+ >
|
|
|
+ <view class="buttons">
|
|
|
+ <view @tap="contactClient" class="payment"> 联系客户 </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+page {
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.viewport {
|
|
|
+ background-color: #ffffff;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.panel {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 90rpx;
|
|
|
+ line-height: 1;
|
|
|
+ padding: 30rpx 60rpx 30rpx 6rpx;
|
|
|
+ position: relative;
|
|
|
+ text {
|
|
|
+ padding-left: 10rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 600;
|
|
|
+ border-left: 4rpx solid #27ba9b;
|
|
|
+ }
|
|
|
+ navigator {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ .bln {
|
|
|
+ border-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .label {
|
|
|
+ height: auto;
|
|
|
+ padding: 6rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.arrow {
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ right: 30rpx;
|
|
|
+ content: '\e6c2';
|
|
|
+ color: #ccc;
|
|
|
+ font-family: 'erabbit' !important;
|
|
|
+ font-size: 32rpx;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 商品详情 */
|
|
|
+.detail {
|
|
|
+ padding-left: 20rpx;
|
|
|
+ padding-bottom: 78rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ .content {
|
|
|
+ margin-left: -20rpx;
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .properties {
|
|
|
+ padding: 0 20rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ line-height: 2;
|
|
|
+ margin: 10rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 26rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #fff;
|
|
|
+ color: #333;
|
|
|
+ box-shadow: 0 0rpx 10rpx rgba(200, 200, 200, 0.5);
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ .order_no_state {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #eeeeee;
|
|
|
+ padding: 20rpx;
|
|
|
+ .order_state {
|
|
|
+ font-size: 24rpx;
|
|
|
+ .state-2 {
|
|
|
+ color: #2979ff;
|
|
|
+ }
|
|
|
+ .state-3 {
|
|
|
+ color: #1c67da;
|
|
|
+ }
|
|
|
+ .state-4 {
|
|
|
+ color: #f3a73f;
|
|
|
+ }
|
|
|
+ .state-5 {
|
|
|
+ color: #18bc37;
|
|
|
+ }
|
|
|
+ .state-6 {
|
|
|
+ color: #f3a73f;
|
|
|
+ }
|
|
|
+ .state-7 {
|
|
|
+ color: #01b075;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ }
|
|
|
+ .goods {
|
|
|
+ margin: 10rpx 20rpx;
|
|
|
+ padding: 10rpx;
|
|
|
+ border: 1rpx solid #eaeaea;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 底部联系客户 */
|
|
|
+.contact-client {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: calc((var(--window-bottom)));
|
|
|
+ z-index: 1;
|
|
|
+ background-color: #fff;
|
|
|
+ height: 72rpx;
|
|
|
+ border-top: 1rpx solid #eaeaea;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: content-box;
|
|
|
+ .buttons {
|
|
|
+ display: flex;
|
|
|
+ background-color: #27ba9b;
|
|
|
+ flex: 1;
|
|
|
+ justify-content: center;
|
|
|
+ & > view {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 72rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
