|
|
@@ -4,27 +4,119 @@
|
|
|
* @Author: dream
|
|
|
* @Date: 2021-03-31 18:03:25
|
|
|
* @LastEditors: dream
|
|
|
- * @LastEditTime: 2021-04-01 11:28:40
|
|
|
+ * @LastEditTime: 2021-04-01 18:37:35
|
|
|
-->
|
|
|
<template>
|
|
|
- <view class="delivery-order-detail-main">
|
|
|
- <view class="head-area"><text class="status-title">待发货</text></view>
|
|
|
+ <view class="delivery-order-detail-main" :style="{ paddingBottom: `${pagePaddingBottom}px`}">
|
|
|
+ <u-navbar title="发货单详情" is-back :is-fixed="false" :border-bottom="false" title-color="#ffffff" back-icon-color="#ffffff" :background="{ background: '#1677FF' }" />
|
|
|
+ <view class="head-area"><text class="status-title">{{detail.status | statusFilter}}</text></view>
|
|
|
+ <view class="warehouse-info iph-bg-fff">
|
|
|
+ <view class="u-flex u-border-bottom u-p-b-32">
|
|
|
+ <view class="u-flex-1 u-font-30 u-line-42 text-weight-500">仓库：{{detail.warehouse}}</view>
|
|
|
+ <view class="u-flex" @click="callPhone">
|
|
|
+ <view class="phone-icon iph-icon-phone u-m-r-4"></view>
|
|
|
+ <view class="primary-color u-font-24 u-line-34">联系我们</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="u-flex u-p-t-24">
|
|
|
+ <view class="u-font-22 u-line-32 u-flex-1">发货单号：{{detail.invoiceId}}</view>
|
|
|
+ <view class="order-time u-font-22 u-line-32">{{detail.invoiceTime | timeFilter}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="good-list iph-bg-fff">
|
|
|
+ <block v-for="(item, index) in goodList" :key="index">
|
|
|
+ <view class="u-p-t-32 u-p-b-32 good-card u-border-bottom">
|
|
|
+ <iph-good-card :value="item" :showType="3" />
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ <iph-fixed-bottom @getHeight="getFooterHeight">
|
|
|
+ <view class="footer iph-bg-fff">
|
|
|
+ <button class="confirm-receipt-btn">确认收货</button>
|
|
|
+ </view>
|
|
|
+ </iph-fixed-bottom>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import dayjs from 'dayjs'
|
|
|
+import iphGoodCard from '../../components/iphGoodCard.vue'
|
|
|
+import IphFixedBottom from '../../components/iphFixedBottom.vue'
|
|
|
export default {
|
|
|
+ components: { iphGoodCard, IphFixedBottom },
|
|
|
name: 'deliveryOrderDetail',
|
|
|
data () {
|
|
|
return {
|
|
|
-
|
|
|
+ pagePaddingBottom: 0,
|
|
|
+ detail: {
|
|
|
+ invoiceId: '123132434234243',
|
|
|
+ invoiceTime: '2021-04-01 00:00:00',
|
|
|
+ status: 1,
|
|
|
+ warehouse: '浙江仓库',
|
|
|
+ phone: '15988117467'
|
|
|
+ },
|
|
|
+ goodList: [{
|
|
|
+ img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=288400877,2749955263&fm=26&gp=0.jpg',
|
|
|
+ name: '华硕天选',
|
|
|
+ spce: '一件',
|
|
|
+ salesPrice: 468,
|
|
|
+ originalPrice: 480,
|
|
|
+ num: 1
|
|
|
+ }, {
|
|
|
+ img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=288400877,2749955263&fm=26&gp=0.jpg',
|
|
|
+ name: '两行文案两行文案两行文案两行文案两行文案两行文案',
|
|
|
+ spce: '1件/1000套',
|
|
|
+ salesPrice: 468,
|
|
|
+ originalPrice: 480,
|
|
|
+ num: 1
|
|
|
+ }, {
|
|
|
+ img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=288400877,2749955263&fm=26&gp=0.jpg',
|
|
|
+ name: '华硕天选',
|
|
|
+ spce: '一件',
|
|
|
+ salesPrice: 468,
|
|
|
+ originalPrice: 480,
|
|
|
+ num: 1
|
|
|
+ }, {
|
|
|
+ img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=288400877,2749955263&fm=26&gp=0.jpg',
|
|
|
+ name: '两行文案两行文案两行文案两行文案两行文案两行文案',
|
|
|
+ spce: '1件/1000套',
|
|
|
+ salesPrice: 468,
|
|
|
+ originalPrice: 480,
|
|
|
+ num: 1
|
|
|
+ }]
|
|
|
}
|
|
|
},
|
|
|
onLoad () {
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
+ getFooterHeight (val) {
|
|
|
+ this.pagePaddingBottom = val + 8
|
|
|
+ },
|
|
|
+ callPhone () {
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: this.detail.phone
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ statusFilter (val) {
|
|
|
+ const statusText = {
|
|
|
+ 1: '待发货',
|
|
|
+ 2: '待收货',
|
|
|
+ 3: '已收货'
|
|
|
+ }
|
|
|
+ return statusText[val]
|
|
|
+ },
|
|
|
+ timeFilter (val) {
|
|
|
+ const nowYear = dayjs().year()
|
|
|
+ const valYear = dayjs(val).year()
|
|
|
+ if (nowYear === valYear) {
|
|
|
+ return dayjs(val).format('MM-DD HH:mm')
|
|
|
+ } else {
|
|
|
+ return dayjs(val).format('YYYY-MM-DD HH:mm')
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -32,9 +124,9 @@ export default {
|
|
|
<style lang="scss" scoped>
|
|
|
.delivery-order-detail-main {
|
|
|
.head-area {
|
|
|
- padding: 24px 24px 0;
|
|
|
+ padding: 0 24px;
|
|
|
height: 282px;
|
|
|
- background: linear-gradient(180deg, #1677FF 0%, #7CB1FB 55%, #F5F5F5 100%);
|
|
|
+ background: linear-gradient(180deg, $u-type-primary 0%, $iph-type-light 55%, $iph-base-bg 100%);
|
|
|
.status-title {
|
|
|
font-size: 56px;
|
|
|
font-weight: 500;
|
|
|
@@ -42,5 +134,40 @@ export default {
|
|
|
color: $iph-standby-text;
|
|
|
}
|
|
|
}
|
|
|
+ .warehouse-info {
|
|
|
+ margin: -186px 24px 0;
|
|
|
+ padding: 32px 32px 24px;
|
|
|
+ border-radius: 12px;
|
|
|
+ .phone-icon {
|
|
|
+ width: 34px;
|
|
|
+ height: 34px;
|
|
|
+ }
|
|
|
+ .order-time {
|
|
|
+ color: $iph-desc-text;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .good-list {
|
|
|
+ margin: 16px 24px 0;
|
|
|
+ padding: 0 32px;
|
|
|
+ border-radius: 12px;
|
|
|
+ .good-card {
|
|
|
+ &:last-child {
|
|
|
+ &::after {
|
|
|
+ border-bottom-width: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer {
|
|
|
+ padding: 24px;
|
|
|
+ .confirm-receipt-btn {
|
|
|
+ padding: 22px;
|
|
|
+ font-size: 32px;
|
|
|
+ line-height: 44px;
|
|
|
+ color: $iph-standby-text;
|
|
|
+ background-color: $u-type-primary;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
