代码优化提交
This commit is contained in:
wong
41
Store_vue/api/modules/supply.js
Normal file
41
Store_vue/api/modules/supply.js
Normal file
@@ -0,0 +1,41 @@
|
||||
import { request, requestWithRetry } from '../config'
|
||||
|
||||
// 供应链相关API
|
||||
export const supplyApi = {
|
||||
// 获取供应商列表
|
||||
getVendorList: (page, pageSize) => {
|
||||
return request({
|
||||
url: '/v1/store/vendor/list',
|
||||
method: 'GET',
|
||||
data: {
|
||||
page: page || 1,
|
||||
page_size: pageSize || 10
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 获取供应商详情
|
||||
getVendorDetail: (id) => {
|
||||
return request({
|
||||
url: '/v1/store/vendor/detail',
|
||||
method: 'GET',
|
||||
data: {
|
||||
id: id
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 提交订单
|
||||
submitOrder: (packageId) => {
|
||||
return request({
|
||||
url: '/v1/store/vendor/order',
|
||||
method: 'POST',
|
||||
header: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
data: {
|
||||
packageId: packageId
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -3,11 +3,11 @@
|
||||
<!-- 头部 -->
|
||||
<view class="header">
|
||||
<view class="back-icon" @tap="closePage">
|
||||
<u-icon name="arrow-left" color="#333" size="26"></u-icon>
|
||||
<text class="uni-icons-arrow-left" style="font-size: 26px; color: #333;"></text>
|
||||
</view>
|
||||
<view class="title">{{packageData.name}}</view>
|
||||
<view class="close-icon" @tap="closePage">
|
||||
<u-icon name="close" color="#333" size="24"></u-icon>
|
||||
<text class="uni-icons-close" style="font-size: 24px; color: #333;"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -216,17 +216,6 @@
|
||||
background-color: #f5f7fa;
|
||||
z-index: 10000;
|
||||
overflow-y: auto;
|
||||
transform-origin: right;
|
||||
animation: slideInFromRight 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideInFromRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<view class="side-menu-mask" @tap="closeSideMenu"></view>
|
||||
<view class="side-menu">
|
||||
<view class="side-menu-header">
|
||||
<text class="side-menu-title">艺施赋能</text>
|
||||
<text class="side-menu-title">美业赋能</text>
|
||||
<text class="close-icon" @tap="closeSideMenu">
|
||||
<u-icon name="close" color="#333" size="24"></u-icon>
|
||||
</text>
|
||||
@@ -488,18 +488,6 @@
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: slideIn 0.3s ease;
|
||||
overflow-y: auto;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.side-menu-header {
|
||||
|
||||
@@ -4,16 +4,29 @@
|
||||
<!-- 头部 -->
|
||||
<view class="header">
|
||||
<view class="back-icon" @tap="closePage">
|
||||
<u-icon name="arrow-left" color="#333" size="26"></u-icon>
|
||||
<text class="uni-icons-arrow-left" style="font-size: 26px; color: #333;"></text>
|
||||
</view>
|
||||
<view class="title">供应链采购</view>
|
||||
<view class="close-icon" @tap="closePage">
|
||||
<u-icon name="close" color="#333" size="24"></u-icon>
|
||||
<text class="uni-icons-close" style="font-size: 24px; color: #333;"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view v-if="loading && packages.length === 0" class="loading-container">
|
||||
<u-loading size="34" mode="circle" color="#CA8A04"></u-loading>
|
||||
<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>
|
||||
|
||||
<!-- 套餐卡片区域 -->
|
||||
<view class="package-list">
|
||||
<view v-else class="package-list">
|
||||
<view
|
||||
v-for="item in packages"
|
||||
:key="item.id"
|
||||
@@ -29,7 +42,7 @@
|
||||
<view class="package-info">
|
||||
<view class="package-name">
|
||||
{{item.name}}
|
||||
<text v-if="item.specialTag" class="special-tag">{{item.specialTag}}</text>
|
||||
<text v-if="item.tags && item.tags.length > 0" class="special-tag">{{item.tags[0]}}</text>
|
||||
</view>
|
||||
<view class="package-price">
|
||||
<text class="price-value">¥{{item.price}}</text>
|
||||
@@ -37,9 +50,24 @@
|
||||
</view>
|
||||
<view class="advance-payment" v-if="item.advancePayment">预付款: ¥{{item.advancePayment}}</view>
|
||||
</view>
|
||||
<view class="discount-tag" v-if="item.discount">{{item.discount}}</view>
|
||||
<view class="discount-tag" v-if="item.discount">{{(parseFloat(item.discount) * 10).toFixed(2)}}折</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -54,6 +82,7 @@
|
||||
|
||||
<script>
|
||||
import SupplyItemDetail from './SupplyItemDetail.vue';
|
||||
import { supplyApi } from '../api/modules/supply';
|
||||
|
||||
export default {
|
||||
name: 'SupplyChainPurchase',
|
||||
@@ -69,163 +98,28 @@
|
||||
data() {
|
||||
return {
|
||||
// 套餐数据
|
||||
packages: [
|
||||
{
|
||||
id: 1,
|
||||
name: '基础套餐',
|
||||
price: '2980',
|
||||
originalPrice: '3725',
|
||||
discount: '8折',
|
||||
specialTag: '',
|
||||
advancePayment: '745',
|
||||
services: [
|
||||
{
|
||||
name: '头部护理SPA',
|
||||
price: '598',
|
||||
originalPrice: '718',
|
||||
duration: '60分钟',
|
||||
image: '/static/spa1.png'
|
||||
},
|
||||
{
|
||||
name: '臂油SPA',
|
||||
price: '618',
|
||||
originalPrice: '838',
|
||||
duration: '90分钟',
|
||||
image: '/static/spa2.png'
|
||||
},
|
||||
{
|
||||
name: '法/LAWF型颜度护理',
|
||||
price: '1580',
|
||||
originalPrice: '1896',
|
||||
duration: '120分钟',
|
||||
image: '/static/spa3.png'
|
||||
}
|
||||
],
|
||||
details: [
|
||||
{ label: '采购额度', value: '3000元' },
|
||||
{ label: '套餐时长', value: '30天' },
|
||||
{ label: '采购种类', value: '标准品类' }
|
||||
],
|
||||
privileges: [
|
||||
'标准采购价格',
|
||||
'7天内发货',
|
||||
'基础供应商渠道'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '进级套餐',
|
||||
price: '6980',
|
||||
originalPrice: '9971',
|
||||
discount: '7折',
|
||||
specialTag: '',
|
||||
advancePayment: '',
|
||||
services: [
|
||||
{
|
||||
name: '进阶头部护理SPA',
|
||||
price: '898',
|
||||
originalPrice: '1218',
|
||||
duration: '90分钟',
|
||||
image: '/static/spa1.png'
|
||||
},
|
||||
{
|
||||
name: '全身SPA',
|
||||
price: '1618',
|
||||
originalPrice: '2138',
|
||||
duration: '120分钟',
|
||||
image: '/static/spa2.png'
|
||||
},
|
||||
{
|
||||
name: '高级LAWF型颜度护理',
|
||||
price: '2880',
|
||||
originalPrice: '3596',
|
||||
duration: '150分钟',
|
||||
image: '/static/spa3.png'
|
||||
},
|
||||
{
|
||||
name: '肌肤管理',
|
||||
price: '1290',
|
||||
originalPrice: '1590',
|
||||
duration: '60分钟',
|
||||
image: '/static/spa4.png'
|
||||
}
|
||||
],
|
||||
details: [
|
||||
{ label: '采购额度', value: '7000元' },
|
||||
{ label: '套餐时长', value: '30天' },
|
||||
{ label: '采购种类', value: '全部品类' }
|
||||
],
|
||||
privileges: [
|
||||
'优惠采购价格',
|
||||
'3天内发货',
|
||||
'优质供应商渠道',
|
||||
'专属采购顾问'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '尊享套餐',
|
||||
price: '19800',
|
||||
originalPrice: '33000',
|
||||
discount: '6折',
|
||||
specialTag: '品优惠',
|
||||
advancePayment: '',
|
||||
services: [
|
||||
{
|
||||
name: '尊享头部护理SPA',
|
||||
price: '1298',
|
||||
originalPrice: '1818',
|
||||
duration: '120分钟',
|
||||
image: '/static/spa1.png'
|
||||
},
|
||||
{
|
||||
name: '尊享全身SPA',
|
||||
price: '2618',
|
||||
originalPrice: '3738',
|
||||
duration: '180分钟',
|
||||
image: '/static/spa2.png'
|
||||
},
|
||||
{
|
||||
name: '奢华LAWF型颜度护理',
|
||||
price: '4880',
|
||||
originalPrice: '6996',
|
||||
duration: '210分钟',
|
||||
image: '/static/spa3.png'
|
||||
},
|
||||
{
|
||||
name: '尊享肌肤管理',
|
||||
price: '2490',
|
||||
originalPrice: '3290',
|
||||
duration: '90分钟',
|
||||
image: '/static/spa4.png'
|
||||
},
|
||||
{
|
||||
name: '私人定制美容方案',
|
||||
price: '5990',
|
||||
originalPrice: '8990',
|
||||
duration: '全天候',
|
||||
image: '/static/spa5.png'
|
||||
}
|
||||
],
|
||||
details: [
|
||||
{ label: '采购额度', value: '20000元' },
|
||||
{ label: '套餐时长', value: '30天' },
|
||||
{ label: '采购种类', value: '全部品类(含限定)' }
|
||||
],
|
||||
privileges: [
|
||||
'最优采购价格',
|
||||
'24小时内发货',
|
||||
'顶级供应商渠道',
|
||||
'一对一专属顾问',
|
||||
'供应链优化方案',
|
||||
'库存管理系统'
|
||||
]
|
||||
}
|
||||
],
|
||||
packages: [],
|
||||
// 套餐详情页面
|
||||
showPackageDetail: false,
|
||||
// 当前选中的套餐
|
||||
currentPackage: null
|
||||
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();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -240,6 +134,72 @@
|
||||
// 关闭套餐详情
|
||||
closePackageDetail() {
|
||||
this.showPackageDetail = false;
|
||||
},
|
||||
// 获取供应商套餐数据
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -255,17 +215,6 @@
|
||||
background-color: #fff;
|
||||
z-index: 10000;
|
||||
overflow-y: auto;
|
||||
transform-origin: right;
|
||||
animation: slideInFromRight 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideInFromRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -421,4 +370,54 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
@@ -4,73 +4,134 @@
|
||||
<!-- 头部 -->
|
||||
<view class="header">
|
||||
<view class="back-icon" @tap="closePage">
|
||||
<u-icon name="arrow-left" color="#333" size="26"></u-icon>
|
||||
<text class="uni-icons-arrow-left" style="font-size: 26px; color: #333;"></text>
|
||||
</view>
|
||||
<view class="title">{{packageData.name}}</view>
|
||||
<view class="title">{{detailData.name || packageData.name}}</view>
|
||||
<view class="close-icon" @tap="closePage">
|
||||
<u-icon name="close" color="#333" size="24"></u-icon>
|
||||
<text class="uni-icons-close" style="font-size: 24px; color: #333;"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 套餐价格信息 -->
|
||||
<view class="price-card">
|
||||
<view class="price-title">套餐价格</view>
|
||||
<view class="price-info">
|
||||
<view class="current-price">
|
||||
<text class="price-symbol">¥</text>
|
||||
<text class="price-value">{{packageData.price}}</text>
|
||||
<!-- 加载状态 -->
|
||||
<view v-if="loading" class="loading-container">
|
||||
<u-loading size="34" mode="circle" color="#FF6600"></u-loading>
|
||||
<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="fetchVendorDetail">重试</button>
|
||||
</view>
|
||||
|
||||
<template v-else>
|
||||
<!-- 套餐价格信息 -->
|
||||
<view class="price-card">
|
||||
<view class="price-title">套餐价格</view>
|
||||
<view class="price-info">
|
||||
<view class="current-price">
|
||||
<text class="price-symbol">¥</text>
|
||||
<text class="price-value">{{detailData.price || packageData.price}}</text>
|
||||
</view>
|
||||
<view class="original-price" v-if="(detailData.originalPrice || packageData.originalPrice) !== (detailData.price || packageData.price)">¥{{detailData.originalPrice || packageData.originalPrice}}</view>
|
||||
</view>
|
||||
<view class="advance-info" v-if="detailData.advancePayment || packageData.advancePayment">
|
||||
预付款: ¥{{detailData.advancePayment || packageData.advancePayment}}
|
||||
</view>
|
||||
|
||||
<!-- 标签 -->
|
||||
<view class="tags-container" v-if="detailData.tags && detailData.tags.length > 0">
|
||||
<view class="tag-item" v-for="(tag, index) in detailData.tags" :key="index">
|
||||
{{tag}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 描述信息 -->
|
||||
<view class="description" v-if="detailData.description">
|
||||
{{detailData.description}}
|
||||
</view>
|
||||
<view class="original-price" v-if="packageData.originalPrice !== packageData.price">¥{{packageData.originalPrice}}</view>
|
||||
</view>
|
||||
<view class="advance-info" v-if="packageData.advancePayment">
|
||||
预付款: ¥{{packageData.advancePayment}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 套餐内容 -->
|
||||
<view class="service-section">
|
||||
<view class="section-title">套餐内容</view>
|
||||
<view class="service-count">共{{packageData.services ? packageData.services.length : 0}}服务</view>
|
||||
|
||||
<!-- 服务列表 -->
|
||||
<view class="service-list">
|
||||
<view
|
||||
v-for="(service, index) in packageData.services"
|
||||
:key="index"
|
||||
class="service-item"
|
||||
>
|
||||
<view class="service-left">
|
||||
<view class="service-icon">
|
||||
<u-icon name="heart" color="#FF6600" size="24"></u-icon>
|
||||
<!-- 项目列表 -->
|
||||
<view class="service-section" v-if="detailData.projects && detailData.projects.length > 0">
|
||||
<view class="section-title">项目列表</view>
|
||||
<view class="service-count">共{{detailData.projects.length}}个项目</view>
|
||||
|
||||
<!-- 项目列表 -->
|
||||
<view class="service-list">
|
||||
<view
|
||||
v-for="(project, index) in detailData.projects"
|
||||
:key="project.id"
|
||||
class="service-item"
|
||||
>
|
||||
<view class="service-left">
|
||||
<image v-if="project.image" :src="project.image" mode="aspectFill" class="service-image"></image>
|
||||
<view v-else class="service-icon">
|
||||
<u-icon name="heart" color="#FF6600" size="24"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="service-right">
|
||||
<view class="service-name">{{service.name}}</view>
|
||||
<view class="service-price">
|
||||
<text class="price-symbol">¥</text>
|
||||
<text class="service-price-value">{{service.price}}</text>
|
||||
<text class="service-original-price" v-if="service.originalPrice">¥{{service.originalPrice}}</text>
|
||||
<view class="service-right">
|
||||
<view class="service-name">{{project.name}}</view>
|
||||
<view class="service-price">
|
||||
<text class="price-symbol">¥</text>
|
||||
<text class="service-price-value">{{project.price}}</text>
|
||||
<text class="service-original-price" v-if="project.originalPrice">¥{{project.originalPrice}}</text>
|
||||
</view>
|
||||
<view class="service-duration" v-if="project.duration">{{project.duration}}分钟</view>
|
||||
<view class="service-detail" v-if="project.detail">{{project.detail}}</view>
|
||||
</view>
|
||||
<view class="service-duration">{{service.duration}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 购买按钮 -->
|
||||
<view class="buy-button-container">
|
||||
<button class="buy-button" @tap="handleBuy">立即购买</button>
|
||||
</view>
|
||||
|
||||
<!-- 购买说明 -->
|
||||
<view class="buy-notice">
|
||||
<text class="notice-text">订单将由操作人处理，详情请联系客服</text>
|
||||
</view>
|
||||
|
||||
<!-- 原始服务列表 (如果没有项目列表，则显示原有的服务列表) -->
|
||||
<view class="service-section" v-else-if="packageData.services && packageData.services.length > 0">
|
||||
<view class="section-title">套餐内容</view>
|
||||
<view class="service-count">共{{packageData.services.length}}个服务</view>
|
||||
|
||||
<!-- 服务列表 -->
|
||||
<view class="service-list">
|
||||
<view
|
||||
v-for="(service, index) in packageData.services"
|
||||
:key="index"
|
||||
class="service-item"
|
||||
>
|
||||
<view class="service-left">
|
||||
<view class="service-icon">
|
||||
<u-icon name="heart" color="#FF6600" size="24"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="service-right">
|
||||
<view class="service-name">{{service.name}}</view>
|
||||
<view class="service-price">
|
||||
<text class="price-symbol">¥</text>
|
||||
<text class="service-price-value">{{service.price}}</text>
|
||||
<text class="service-original-price" v-if="service.originalPrice">¥{{service.originalPrice}}</text>
|
||||
</view>
|
||||
<view class="service-duration">{{service.duration}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 购买按钮 -->
|
||||
<view class="buy-button-container">
|
||||
<button class="buy-button" @tap="handleBuy">立即购买</button>
|
||||
</view>
|
||||
|
||||
<!-- 购买说明 -->
|
||||
<view class="buy-notice">
|
||||
<text class="notice-text">订单将由操作人处理，详情请联系客服</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { supplyApi } from '../api/modules/supply';
|
||||
|
||||
export default {
|
||||
name: 'SupplyItemDetail',
|
||||
props: {
|
||||
@@ -113,28 +174,100 @@
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 详情数据
|
||||
detailData: {},
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 错误信息
|
||||
error: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(newVal) {
|
||||
if (newVal && this.packageData && this.packageData.id) {
|
||||
this.fetchVendorDetail();
|
||||
}
|
||||
},
|
||||
'packageData.id'(newVal) {
|
||||
if (newVal && this.show) {
|
||||
this.fetchVendorDetail();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closePage() {
|
||||
this.$emit('close');
|
||||
},
|
||||
// 获取供应商详情
|
||||
async fetchVendorDetail() {
|
||||
if (this.loading || !this.packageData || !this.packageData.id) return;
|
||||
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
|
||||
try {
|
||||
const response = await supplyApi.getVendorDetail(this.packageData.id);
|
||||
|
||||
if (response.code === 200) {
|
||||
this.detailData = response.data;
|
||||
} else {
|
||||
this.error = response.msg || '获取详情失败';
|
||||
console.error('获取详情失败:', response.msg);
|
||||
}
|
||||
} catch (err) {
|
||||
this.error = '获取详情失败，请稍后重试';
|
||||
console.error('获取详情错误:', err);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
handleBuy() {
|
||||
uni.showLoading({
|
||||
title: '处理中...'
|
||||
});
|
||||
|
||||
// 模拟购买流程
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
// 获取packageId
|
||||
const packageId = this.detailData.id || this.packageData.id;
|
||||
if (!packageId) {
|
||||
uni.showToast({
|
||||
title: '购买成功',
|
||||
icon: 'success'
|
||||
title: '参数错误',
|
||||
icon: 'none'
|
||||
});
|
||||
uni.hideLoading();
|
||||
return;
|
||||
}
|
||||
|
||||
// 提交订单
|
||||
supplyApi.submitOrder(packageId)
|
||||
.then(response => {
|
||||
uni.hideLoading();
|
||||
if (response.code === 200) {
|
||||
uni.showToast({
|
||||
title: '购买成功',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 延迟关闭页面
|
||||
setTimeout(() => {
|
||||
this.closePage();
|
||||
}, 1500);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: response.msg || '购买失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
uni.hideLoading();
|
||||
console.error('订单提交错误:', err);
|
||||
uni.showToast({
|
||||
title: '购买失败，请稍后重试',
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
|
||||
// 延迟关闭页面
|
||||
setTimeout(() => {
|
||||
this.closePage();
|
||||
}, 1500);
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -150,17 +283,6 @@
|
||||
background-color: #f5f7fa;
|
||||
z-index: 10000;
|
||||
overflow-y: auto;
|
||||
transform-origin: right;
|
||||
animation: slideInFromRight 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideInFromRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -242,11 +364,35 @@
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tags-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
background-color: #FCF0E3;
|
||||
color: #FF6600;
|
||||
font-size: 12px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.service-section {
|
||||
margin: 15px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@@ -258,7 +404,7 @@
|
||||
|
||||
.service-count {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
@@ -298,6 +444,12 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.service-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.service-right {
|
||||
flex: 1;
|
||||
}
|
||||
@@ -331,6 +483,13 @@
|
||||
.service-duration {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.service-detail {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.buy-button-container {
|
||||
@@ -365,4 +524,42 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.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: #FF6600;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -285,17 +285,6 @@
|
||||
background-color: #f5f7fa;
|
||||
z-index: 10000;
|
||||
overflow-y: auto;
|
||||
transform-origin: right;
|
||||
animation: slideInFromRight 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideInFromRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
|
||||
Reference in New Issue
Block a user