217 lines
6.4 KiB
Vue
217 lines
6.4 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view v-if="!exchangeData && !loading" class="empty-state">
|
|
<view class="empty-icon">🔄</view>
|
|
<view class="empty-title">暂无换货记录</view>
|
|
<view class="empty-desc">当前账号下暂无设备换货记录</view>
|
|
</view>
|
|
|
|
<view v-else-if="exchangeData" class="card exchange-card">
|
|
<view class="exchange-header flex-row-sb">
|
|
<view class="exchange-no">{{ exchangeData.exchange_no }}</view>
|
|
<view class="tag-apple" :class="getStatusClass(exchangeData.status)">{{ exchangeData.status_text }}</view>
|
|
</view>
|
|
|
|
<view class="exchange-info">
|
|
<view class="info-row flex-row-sb">
|
|
<view class="info-label">换货原因</view>
|
|
<view class="info-value">{{ exchangeData.exchange_reason }}</view>
|
|
</view>
|
|
<view class="info-row flex-row-sb">
|
|
<view class="info-label">申请时间</view>
|
|
<view class="info-value">{{ formatTime(exchangeData.created_at) }}</view>
|
|
</view>
|
|
<view class="info-row flex-row-sb" v-if="exchangeData.recipient_name">
|
|
<view class="info-label">收件人</view>
|
|
<view class="info-value">{{ exchangeData.recipient_name }}</view>
|
|
</view>
|
|
<view class="info-row flex-row-sb" v-if="exchangeData.recipient_phone">
|
|
<view class="info-label">联系电话</view>
|
|
<view class="info-value">{{ exchangeData.recipient_phone }}</view>
|
|
</view>
|
|
<view class="info-row flex-row-sb" v-if="exchangeData.recipient_address">
|
|
<view class="info-label">收货地址</view>
|
|
<view class="info-value address-value">{{ exchangeData.recipient_address }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="exchange-actions" v-if="exchangeData.status === 1">
|
|
<button class="btn-apple btn-primary" @tap="openPopup">填写信息</button>
|
|
</view>
|
|
</view>
|
|
|
|
<up-popup :show="showPopup" mode="center" @close="showPopup=false">
|
|
<view class="popup-content">
|
|
<view class="popup-title">填写换货信息</view>
|
|
<view class="form-item">
|
|
<view class="form-label">收件人姓名</view>
|
|
<up-input placeholder="请输入收件人姓名" border="surround" v-model="form.recipient_name" />
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">收件人电话</view>
|
|
<up-input placeholder="请输入收件人电话" border="surround" v-model="form.recipient_phone" />
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">收货地址</view>
|
|
<up-input placeholder="请输入详细收货地址" border="surround" v-model="form.recipient_address" />
|
|
</view>
|
|
<view class="popup-btn-group">
|
|
<button class="btn-apple btn-secondary" @tap="showPopup=false">取消</button>
|
|
<button class="btn-apple btn-primary" @tap="submitExchange">提交</button>
|
|
</view>
|
|
</view>
|
|
</up-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
import { exchangeApi } from '@/api/index.js';
|
|
import { useUserStore } from '@/store/index.js';
|
|
|
|
const userStore = useUserStore();
|
|
|
|
let exchangeData = reactive(null);
|
|
let loading = ref(false);
|
|
let showPopup = ref(false);
|
|
let form = reactive({
|
|
recipient_name: '',
|
|
recipient_phone: '',
|
|
recipient_address: ''
|
|
});
|
|
|
|
const getStatusClass = (status) => {
|
|
const classMap = {
|
|
1: 'tag-warning',
|
|
2: 'tag-primary',
|
|
3: 'tag-success',
|
|
4: 'tag-success',
|
|
5: 'tag-danger'
|
|
};
|
|
return classMap[status] || '';
|
|
};
|
|
|
|
const formatTime = (time) => {
|
|
if (!time) return '-';
|
|
return time.split('T').join(' ').slice(0, 19);
|
|
};
|
|
|
|
const loadExchange = async () => {
|
|
loading.value = true;
|
|
try {
|
|
const data = await exchangeApi.getPending(userStore.state.identifier);
|
|
if (data) {
|
|
exchangeData.splice(0, exchangeData.length, data);
|
|
}
|
|
} catch (e) {
|
|
console.error('加载换货记录失败', e);
|
|
}
|
|
loading.value = false;
|
|
};
|
|
|
|
const openPopup = () => {
|
|
form.recipient_name = exchangeData?.recipient_name || '';
|
|
form.recipient_phone = exchangeData?.recipient_phone || '';
|
|
form.recipient_address = exchangeData?.recipient_address || '';
|
|
showPopup.value = true;
|
|
};
|
|
|
|
const submitExchange = async () => {
|
|
if (!form.recipient_name) {
|
|
uni.showToast({ title: '请输入收件人姓名', icon: 'none' });
|
|
return;
|
|
}
|
|
if (!form.recipient_phone) {
|
|
uni.showToast({ title: '请输入收件人电话', icon: 'none' });
|
|
return;
|
|
}
|
|
if (!form.recipient_address) {
|
|
uni.showToast({ title: '请输入收货地址', icon: 'none' });
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await exchangeApi.submitShippingInfo(
|
|
exchangeData.id,
|
|
form.recipient_name,
|
|
form.recipient_phone,
|
|
form.recipient_address
|
|
);
|
|
uni.showToast({ title: '提交成功', icon: 'success' });
|
|
showPopup.value = false;
|
|
loadExchange();
|
|
} catch (e) {
|
|
console.error('提交换货信息失败', e);
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
loadExchange();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 120rpx 40rpx;
|
|
min-height: 60vh;
|
|
.empty-icon { font-size: 120rpx; margin-bottom: 30rpx; opacity: 0.6; }
|
|
.empty-title { font-size: 32rpx; font-weight: 600; color: var(--text-primary); margin-bottom: 16rpx; }
|
|
.empty-desc { font-size: 26rpx; color: var(--text-tertiary); text-align: center; margin-bottom: 40rpx; }
|
|
.empty-btn { width: 100%; max-width: 400rpx; }
|
|
}
|
|
|
|
.exchange-card {
|
|
.exchange-header {
|
|
margin-bottom: var(--space-md);
|
|
.exchange-no { font-size: 28rpx; font-weight: 600; color: var(--text-primary); }
|
|
}
|
|
|
|
.exchange-info {
|
|
.info-row {
|
|
padding: var(--space-xs) 0;
|
|
.info-label { font-size: 24rpx; color: var(--text-tertiary); }
|
|
.info-value { font-size: 24rpx; color: var(--text-primary); }
|
|
.address-value { max-width: 400rpx; text-align: right; }
|
|
}
|
|
}
|
|
|
|
.exchange-actions {
|
|
margin-top: var(--space-lg);
|
|
padding-top: var(--space-md);
|
|
border-top: 1rpx solid var(--gray-200);
|
|
.btn-apple { width: 100%; }
|
|
}
|
|
}
|
|
}
|
|
|
|
.popup-content {
|
|
width: 600rpx;
|
|
padding: 30rpx;
|
|
.popup-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
text-align: center;
|
|
margin-bottom: var(--space-lg);
|
|
}
|
|
.form-item {
|
|
margin-bottom: var(--space-md);
|
|
.form-label {
|
|
font-size: 26rpx;
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--space-xs);
|
|
}
|
|
}
|
|
.popup-btn-group {
|
|
display: flex;
|
|
gap: var(--space-md);
|
|
margin-top: var(--space-lg);
|
|
.btn-apple { flex: 1; }
|
|
}
|
|
}
|
|
</style> |