104 lines
3.3 KiB
Vue
104 lines
3.3 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<view v-if="!isCustomExpress" style="color: #606266;">
|
||
|
|
<text>{{ lastUpdateTime || '-' }}</text>
|
||
|
|
<view v-if="lastStatus" class="ellipsis" style="max-width: 400rpx; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-size: 26rpx;">
|
||
|
|
{{ lastStatus }}
|
||
|
|
</view>
|
||
|
|
<view v-else style="font-size: 26rpx; color: #999; display: inline-block;">未发货或无法获取</view>
|
||
|
|
</view>
|
||
|
|
<view v-else>
|
||
|
|
<text @click="openDialog" style="color:#409EFF;text-decoration:underline;">{{ lastUpdateTime || '点击填写' }}</text>
|
||
|
|
<text @click="openDialog" style="color:#409EFF;text-decoration:underline; margin-left: 16rpx;">{{ lastStatus || '点击填写' }}</text>
|
||
|
|
</view>
|
||
|
|
<uni-popup ref="statusPopup" type="bottom">
|
||
|
|
<view class="popup-content popup-bottom">
|
||
|
|
<view class="form-row">
|
||
|
|
<text>物流状态</text>
|
||
|
|
<uni-easyinput v-model="form.lastStatus" placeholder="请输入物流状态" />
|
||
|
|
</view>
|
||
|
|
<view class="form-row">
|
||
|
|
<text>更新时间</text>
|
||
|
|
<uni-datetime-picker v-model="form.lastUpdateTime" type="datetime" :clear-icon="false" placeholder="请选择更新时间" />
|
||
|
|
</view>
|
||
|
|
<view class="popup-actions">
|
||
|
|
<uni-button @click="closeDialog">取消</uni-button>
|
||
|
|
<uni-button type="primary" @click="handleSave">确定</uni-button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</uni-popup>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { EExpressType } from '@/util/enums';
|
||
|
|
export default {
|
||
|
|
name: 'ExpressStatusEditor',
|
||
|
|
props: {
|
||
|
|
lastStatus: String,
|
||
|
|
lastUpdateTime: String,
|
||
|
|
expressType: String
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
form: {
|
||
|
|
lastStatus: '',
|
||
|
|
lastUpdateTime: ''
|
||
|
|
},
|
||
|
|
EExpressType
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
isCustomExpress() {
|
||
|
|
if (!this.EExpressType || typeof this.EExpressType !== 'object') {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
const expressTypeList = Object.values(this.EExpressType);
|
||
|
|
return !expressTypeList.includes(this.expressType);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
openDialog() {
|
||
|
|
this.form.lastStatus = this.lastStatus || '';
|
||
|
|
this.form.lastUpdateTime = this.lastUpdateTime || '';
|
||
|
|
this.$refs.statusPopup.open();
|
||
|
|
},
|
||
|
|
closeDialog() {
|
||
|
|
this.$refs.statusPopup.close();
|
||
|
|
},
|
||
|
|
handleSave() {
|
||
|
|
if (!this.form.lastStatus || !this.form.lastUpdateTime) {
|
||
|
|
uni.showToast({ title: '请填写完整物流状态和更新时间', icon: 'none' });
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.$emit('update:lastStatus', this.form.lastStatus);
|
||
|
|
this.$emit('update:lastUpdateTime', this.form.lastUpdateTime);
|
||
|
|
this.$emit('save', {
|
||
|
|
lastStatus: this.form.lastStatus,
|
||
|
|
lastUpdateTime: this.form.lastUpdateTime
|
||
|
|
});
|
||
|
|
this.closeDialog();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.ellipsis {
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
.popup-content { padding: 20rpx; }
|
||
|
|
.popup-bottom {
|
||
|
|
width: 100vw;
|
||
|
|
background: #fff;
|
||
|
|
border-top-left-radius: 24rpx;
|
||
|
|
border-top-right-radius: 24rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.form-row { display: flex; align-items: center; margin-bottom: 16rpx; }
|
||
|
|
.form-row text { width: 120rpx; }
|
||
|
|
.popup-actions { display: flex; justify-content: flex-end; gap: 20rpx; margin-top: 20rpx; }
|
||
|
|
</style>
|