first commit
This commit is contained in:
sexygoat
217
pages/device-exchange/device-exchange.vue
Normal file
217
pages/device-exchange/device-exchange.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user