2025-04-09 09:34:27 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<view class="supply-chain-wrapper">
|
|
|
|
|
|
<view v-if="show" class="supply-chain-container" style="margin-top: var(--status-bar-height);">
|
|
|
|
|
|
<!-- 头部 -->
|
|
|
|
|
|
<view class="header">
|
|
|
|
|
|
<view class="back-icon" @tap="closePage">
|
2025-04-17 17:18:35 +08:00
|
|
|
|
<text class="uni-icons-arrow-left" style="font-size: 26px; color: #333;"></text>
|
2025-04-09 09:34:27 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
<view class="title">供应链采购</view>
|
|
|
|
|
|
<view class="close-icon" @tap="closePage">
|
2025-04-17 17:18:35 +08:00
|
|
|
|
<text class="uni-icons-close" style="font-size: 24px; color: #333;"></text>
|
2025-04-09 09:34:27 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
2025-04-17 17:18:35 +08:00
|
|
|
|
<!-- 加载状态 -->
|
|
|
|
|
|
<view v-if="loading && packages.length === 0" class="loading-container">
|
2025-05-13 16:55:47 +08:00
|
|
|
|
<!-- <u-loading size="34" mode="circle" color="#CA8A04"></u-loading> -->
|
2025-04-17 17:18:35 +08:00
|
|
|
|
<text class="loading-text">加载中...</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 错误提示 -->
|
|
|
|
|
|
<view v-else-if="error" class="error-container">
|
|
|
|
|
|
<u-icon name="error-circle" size="40" color="#ff4d4f"></u-icon>
|
|
|
|
|
|
<text class="error-text">{{error}}</text>
|
|
|
|
|
|
<button class="retry-button" @tap="fetchVendorList">重试</button>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
2025-04-09 09:34:27 +08:00
|
|
|
|
<!-- 套餐卡片区域 -->
|
2025-04-17 17:18:35 +08:00
|
|
|
|
<view v-else class="package-list">
|
2025-04-09 09:34:27 +08:00
|
|
|
|
<view
|
|
|
|
|
|
v-for="item in packages"
|
|
|
|
|
|
:key="item.id"
|
|
|
|
|
|
class="package-card"
|
|
|
|
|
|
@tap="openPackageDetail(item)"
|
|
|
|
|
|
>
|
|
|
|
|
|
<view class="package-content">
|
|
|
|
|
|
<view class="cart-icon">
|
|
|
|
|
|
<text class="cart-text">
|
|
|
|
|
|
<u-icon name="shopping-cart" size='35px' color='#CA8A04'></u-icon>
|
|
|
|
|
|
</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="package-info">
|
|
|
|
|
|
<view class="package-name">
|
|
|
|
|
|
{{item.name}}
|
2025-04-17 17:18:35 +08:00
|
|
|
|
<text v-if="item.tags && item.tags.length > 0" class="special-tag">{{item.tags[0]}}</text>
|
2025-04-09 09:34:27 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
<view class="package-price">
|
|
|
|
|
|
<text class="price-value">¥{{item.price}}</text>
|
|
|
|
|
|
<text class="original-price" v-if="item.originalPrice !== item.price">¥{{item.originalPrice}}</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="advance-payment" v-if="item.advancePayment">预付款: ¥{{item.advancePayment}}</view>
|
|
|
|
|
|
</view>
|
2025-04-17 17:18:35 +08:00
|
|
|
|
<view class="discount-tag" v-if="item.discount">{{(parseFloat(item.discount) * 10).toFixed(2)}}折</view>
|
2025-04-09 09:34:27 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
2025-04-17 17:18:35 +08:00
|
|
|
|
|
|
|
|
|
|
<!-- 加载更多 -->
|
|
|
|
|
|
<view class="load-more" v-if="hasMore">
|
|
|
|
|
|
<u-loadmore
|
|
|
|
|
|
:status="loadMoreStatus"
|
|
|
|
|
|
@loadmore="loadMore"
|
|
|
|
|
|
icon-type="flower"
|
|
|
|
|
|
color="#CA8A04"
|
|
|
|
|
|
></u-loadmore>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 无数据提示 -->
|
|
|
|
|
|
<view v-if="packages.length === 0 && !loading" class="no-data">
|
|
|
|
|
|
<u-empty text="暂无供应商数据" mode="data"></u-empty>
|
|
|
|
|
|
</view>
|
2025-04-09 09:34:27 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 套餐详情页面 -->
|
|
|
|
|
|
<supply-item-detail
|
|
|
|
|
|
:show="showPackageDetail"
|
|
|
|
|
|
:package-data="currentPackage"
|
|
|
|
|
|
@close="closePackageDetail"
|
|
|
|
|
|
></supply-item-detail>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import SupplyItemDetail from './SupplyItemDetail.vue';
|
2025-04-17 17:18:35 +08:00
|
|
|
|
import { supplyApi } from '../api/modules/supply';
|
2025-04-09 09:34:27 +08:00
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
|
name: 'SupplyChainPurchase',
|
|
|
|
|
|
components: {
|
|
|
|
|
|
'supply-item-detail': SupplyItemDetail
|
|
|
|
|
|
},
|
|
|
|
|
|
props: {
|
|
|
|
|
|
show: {
|
|
|
|
|
|
type: Boolean,
|
|
|
|
|
|
default: false
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
// 套餐数据
|
2025-04-17 17:18:35 +08:00
|
|
|
|
packages: [],
|
2025-04-09 09:34:27 +08:00
|
|
|
|
// 套餐详情页面
|
|
|
|
|
|
showPackageDetail: false,
|
|
|
|
|
|
// 当前选中的套餐
|
2025-04-17 17:18:35 +08:00
|
|
|
|
currentPackage: null,
|
|
|
|
|
|
// 分页相关
|
|
|
|
|
|
currentPage: 1,
|
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
|
total: 0,
|
|
|
|
|
|
hasMore: true,
|
|
|
|
|
|
// 加载状态
|
|
|
|
|
|
loading: false,
|
|
|
|
|
|
loadMoreStatus: 'loading', // 'loading', 'nomore', 'loadmore'
|
|
|
|
|
|
// 错误信息
|
|
|
|
|
|
error: null
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
watch: {
|
|
|
|
|
|
show(newVal) {
|
|
|
|
|
|
if (newVal && this.packages.length === 0) {
|
|
|
|
|
|
this.fetchVendorList();
|
|
|
|
|
|
}
|
2025-04-09 09:34:27 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
closePage() {
|
|
|
|
|
|
this.$emit('close');
|
|
|
|
|
|
},
|
|
|
|
|
|
// 打开套餐详情
|
|
|
|
|
|
openPackageDetail(packageData) {
|
|
|
|
|
|
this.currentPackage = packageData;
|
|
|
|
|
|
this.showPackageDetail = true;
|
|
|
|
|
|
},
|
|
|
|
|
|
// 关闭套餐详情
|
|
|
|
|
|
closePackageDetail() {
|
|
|
|
|
|
this.showPackageDetail = false;
|
2025-04-17 17:18:35 +08:00
|
|
|
|
},
|
|
|
|
|
|
// 获取供应商套餐数据
|
|
|
|
|
|
async fetchVendorList(isLoadMore = false) {
|
|
|
|
|
|
if (this.loading) return;
|
|
|
|
|
|
|
|
|
|
|
|
this.loading = true;
|
|
|
|
|
|
if (!isLoadMore) this.error = null;
|
|
|
|
|
|
|
|
|
|
|
|
if (!isLoadMore) {
|
|
|
|
|
|
uni.showLoading({
|
|
|
|
|
|
title: '加载中...',
|
|
|
|
|
|
mask: true
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
|
const response = await supplyApi.getVendorList(this.currentPage, this.pageSize);
|
|
|
|
|
|
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
|
|
|
// 处理返回的数据，注意接口返回的数据有嵌套的list字段
|
|
|
|
|
|
const list = response.data.list || [];
|
|
|
|
|
|
const newPackages = list.map(item => ({
|
|
|
|
|
|
id: item.id,
|
|
|
|
|
|
userId: item.userId,
|
|
|
|
|
|
companyId: item.companyId,
|
|
|
|
|
|
name: item.name,
|
|
|
|
|
|
price: parseFloat(item.price).toFixed(2),
|
|
|
|
|
|
originalPrice: parseFloat(item.originalPrice).toFixed(2),
|
|
|
|
|
|
discount: item.discount,
|
|
|
|
|
|
advancePayment: item.advancePayment ? parseFloat(item.advancePayment).toFixed(2) : '',
|
|
|
|
|
|
tags: item.tags,
|
|
|
|
|
|
description: item.description,
|
|
|
|
|
|
cover: item.cover,
|
|
|
|
|
|
status: item.status,
|
|
|
|
|
|
createTime: item.createTime,
|
|
|
|
|
|
updateTime: item.updateTime
|
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
|
if (isLoadMore) {
|
|
|
|
|
|
this.packages = [...this.packages, ...newPackages];
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.packages = newPackages;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 更新分页信息
|
|
|
|
|
|
this.total = response.data.total || 0;
|
|
|
|
|
|
this.hasMore = this.packages.length < this.total;
|
|
|
|
|
|
this.loadMoreStatus = this.hasMore ? 'loadmore' : 'nomore';
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.error = response.msg || '获取数据失败';
|
|
|
|
|
|
}
|
|
|
|
|
|
} catch (err) {
|
|
|
|
|
|
this.error = '获取供应商数据失败，请稍后重试';
|
|
|
|
|
|
console.error('获取供应商数据错误:', err);
|
|
|
|
|
|
} finally {
|
|
|
|
|
|
this.loading = false;
|
|
|
|
|
|
if (!isLoadMore) uni.hideLoading();
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
// 加载更多
|
|
|
|
|
|
loadMore() {
|
|
|
|
|
|
if (!this.hasMore || this.loading) return;
|
|
|
|
|
|
|
|
|
|
|
|
this.loadMoreStatus = 'loading';
|
|
|
|
|
|
this.currentPage++;
|
|
|
|
|
|
this.fetchVendorList(true);
|
2025-04-09 09:34:27 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
.supply-chain-container {
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
z-index: 10000;
|
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.header {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
padding: 12px 15px;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
border-bottom: 1px solid #eee;
|
|
|
|
|
|
position: sticky;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.back-icon {
|
|
|
|
|
|
width: 60px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
|
font-size: 17px;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.close-icon {
|
|
|
|
|
|
width: 60px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.package-list {
|
|
|
|
|
|
padding: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.package-card {
|
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
|
|
|
|
|
|
border: 1px solid #FFEDA0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.package-card:hover {
|
|
|
|
|
|
background-color: #FFFEF0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.package-content {
|
|
|
|
|
|
padding: 18px 15px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.cart-icon {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
width: 50px;
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
background-color: #FFFDD0;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.cart-text {
|
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
|
color: #E8A317;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.package-info {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
padding-left: 0;
|
|
|
|
|
|
margin-right: 45px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.package-name {
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.package-price {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: baseline;
|
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.price-value {
|
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
color: #E8A317;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.original-price {
|
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
|
color: #999;
|
|
|
|
|
|
text-decoration: line-through;
|
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.advance-payment {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
color: #666;
|
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.discount-tag {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: 15px;
|
|
|
|
|
|
top: 50%;
|
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
|
padding:0 20px;
|
|
|
|
|
|
height: 30px;
|
|
|
|
|
|
background-color: #FFE55A;
|
|
|
|
|
|
color: #c35300;
|
|
|
|
|
|
border-radius: 30px;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.special-tag {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
|
padding: 2px 6px;
|
|
|
|
|
|
background-color: #FFDF32;
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
line-height: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.supply-chain-wrapper {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
2025-04-17 17:18:35 +08:00
|
|
|
|
|
|
|
|
|
|
/* 加载状态 */
|
|
|
|
|
|
.loading-container {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
padding: 60px 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.loading-text {
|
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
color: #666;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 错误提示 */
|
|
|
|
|
|
.error-container {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
padding: 60px 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.error-text {
|
|
|
|
|
|
margin: 15px 0;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
color: #ff4d4f;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.retry-button {
|
|
|
|
|
|
padding: 6px 20px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
background-color: #CA8A04;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 加载更多 */
|
|
|
|
|
|
.load-more {
|
|
|
|
|
|
padding: 10px 0;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 无数据提示 */
|
|
|
|
|
|
.no-data {
|
|
|
|
|
|
padding: 40px 0;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
2025-04-09 09:34:27 +08:00
|
|
|
|
</style>
|
