图片路径调整
This commit is contained in:
@@ -1,3 +1,3 @@
|
|||||||
# 开发环境配置
|
# 开发环境配置
|
||||||
VITE_API_BASE_URL=/api
|
VITE_API_BASE_URL=/api
|
||||||
VITE_UPLOAD_BASE_URL=http://localhost:3000/api/upload
|
VITE_UPLOAD_BASE_URL=/api/upload
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
# 生产环境配置
|
# 生产环境配置
|
||||||
VITE_API_BASE_URL=https://www.zrbjr.com/api
|
VITE_API_BASE_URL=https://www.zrbjr.com/api
|
||||||
VITE_UPLOAD_BASE_URL=https://www.zrbjr.com/api/upload
|
VITE_UPLOAD_BASE_URL=https://minio.zrbjr.com/api/upload
|
||||||
# VITE_API_BASE_URL=http://114.55.111.44:3001/api
|
# VITE_API_BASE_URL=http://114.55.111.44:3001/api
|
||||||
# VITE_UPLOAD_BASE_URL=http://114.55.111.44:3001/api/upload
|
# VITE_UPLOAD_BASE_URL=http://114.55.111.44:3001/api/upload
|
||||||
|
|||||||
@@ -21,20 +21,31 @@ export const { baseURL, uploadURL } = config[env]
|
|||||||
|
|
||||||
// 获取完整的图片URL
|
// 获取完整的图片URL
|
||||||
export const getImageUrl = (imagePath) => {
|
export const getImageUrl = (imagePath) => {
|
||||||
|
// console.log('getImageUrl called with:', imagePath)
|
||||||
if (!imagePath) return ''
|
if (!imagePath) return ''
|
||||||
if (imagePath.startsWith('http')) return imagePath
|
if (imagePath.startsWith('http')) return imagePath
|
||||||
|
|
||||||
// 在开发环境下,直接返回相对路径,让Vite代理处理
|
// 如果图片路径以/uploads开头,直接返回原路径
|
||||||
|
if (imagePath.startsWith('/uploads')) {
|
||||||
|
// console.log('Image starts with /uploads, returning original path:', imagePath)
|
||||||
|
return imagePath
|
||||||
|
}
|
||||||
|
|
||||||
|
// 在开发环境下,也需要根据路径前缀处理
|
||||||
if (env === 'development') {
|
if (env === 'development') {
|
||||||
|
const cleanBaseURL = baseURL.replace(/\/$/, '')
|
||||||
const cleanImagePath = imagePath.startsWith('/') ? imagePath : `/${imagePath}`
|
const cleanImagePath = imagePath.startsWith('/') ? imagePath : `/${imagePath}`
|
||||||
return cleanImagePath
|
const fullUrl = `${cleanBaseURL}${cleanImagePath}`
|
||||||
|
console.log('Development environment, returning:', fullUrl)
|
||||||
|
return fullUrl
|
||||||
}
|
}
|
||||||
|
|
||||||
// 生产环境下使用完整URL
|
// 生产环境下使用完整URL
|
||||||
const cleanBaseURL = baseURL.replace(/\/$/, '')
|
const cleanBaseURL = baseURL.replace(/\/$/, '')
|
||||||
const cleanImagePath = imagePath.startsWith('/') ? imagePath : `/${imagePath}`
|
const cleanImagePath = imagePath.startsWith('/') ? imagePath : `/${imagePath}`
|
||||||
|
const fullUrl = `${cleanBaseURL}${cleanImagePath}`
|
||||||
|
|
||||||
return `${cleanBaseURL}${cleanImagePath}`
|
return fullUrl
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取上传配置
|
// 获取上传配置
|
||||||
|
|||||||
@@ -32,7 +32,7 @@
|
|||||||
<span class="price-label">实付</span>
|
<span class="price-label">实付</span>
|
||||||
<div class="price-container">
|
<div class="price-container">
|
||||||
<div class="main-price">
|
<div class="main-price">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="rongdou-icon" />
|
||||||
<span class="rongdou-price">{{ totalPrice }}</span>
|
<span class="rongdou-price">{{ totalPrice }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="sub-price">
|
<div class="sub-price">
|
||||||
@@ -130,6 +130,7 @@ import {
|
|||||||
ArrowRight
|
ArrowRight
|
||||||
} from '@element-plus/icons-vue'
|
} from '@element-plus/icons-vue'
|
||||||
import api from '@/utils/api'
|
import api from '@/utils/api'
|
||||||
|
import { getImageUrl } from '@/config'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|||||||
@@ -65,7 +65,7 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-image">
|
<div class="item-image">
|
||||||
<img :src="item.image || '/imgs/productdetail/商品主图.png'" :alt="item.name" />
|
<img :src="getImageUrl(item.product.image_url) || '/imgs/productdetail/商品主图.png'" :alt="item.name" />
|
||||||
</div>
|
</div>
|
||||||
<div class="item-info">
|
<div class="item-info">
|
||||||
<div class="item-name">{{ item.name }}</div>
|
<div class="item-name">{{ item.name }}</div>
|
||||||
@@ -140,6 +140,7 @@ import {
|
|||||||
Coin
|
Coin
|
||||||
} from '@element-plus/icons-vue'
|
} from '@element-plus/icons-vue'
|
||||||
import api from '@/utils/api'
|
import api from '@/utils/api'
|
||||||
|
import { getImageUrl } from '@/config'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
|
|||||||
@@ -54,7 +54,7 @@
|
|||||||
step="100"
|
step="100"
|
||||||
placeholder="请输入5000-50000之间的金额"
|
placeholder="请输入5000-50000之间的金额"
|
||||||
>
|
>
|
||||||
<template #prepend><img src="/imgs/profile/融豆.png" alt="融豆" class="bean-image"></template>
|
<template #prepend><img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="bean-image"></template>
|
||||||
</el-input>
|
</el-input>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -349,7 +349,7 @@
|
|||||||
:src="getImageUrl(transferDialog.voucher)"
|
:src="getImageUrl(transferDialog.voucher)"
|
||||||
:preview-src-list="[getImageUrl(transferDialog.voucher)]"
|
:preview-src-list="[getImageUrl(transferDialog.voucher)]"
|
||||||
alt="转账凭证"
|
alt="转账凭证"
|
||||||
fit="cover"
|
fit="contain"
|
||||||
:lazy="true"
|
:lazy="true"
|
||||||
>
|
>
|
||||||
<template #placeholder>
|
<template #placeholder>
|
||||||
|
|||||||
@@ -64,7 +64,7 @@
|
|||||||
<div class="balance-item">
|
<div class="balance-item">
|
||||||
<span class="balance-label">我的融豆</span>
|
<span class="balance-label">我的融豆</span>
|
||||||
<div class="balance-content">
|
<div class="balance-content">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="bean-image">
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="bean-image">
|
||||||
<div class="balance-value">{{ Math.abs(accountInfo.balance) }}</div>
|
<div class="balance-value">{{ Math.abs(accountInfo.balance) }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -137,6 +137,7 @@ import { useRouter } from 'vue-router';
|
|||||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||||
import { User, Plus } from '@element-plus/icons-vue';
|
import { User, Plus } from '@element-plus/icons-vue';
|
||||||
import api from '@/utils/api';
|
import api from '@/utils/api';
|
||||||
|
import { getImageUrl } from '@/config';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
@@ -144,6 +145,7 @@ export default {
|
|||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const avatarUrl = ref('');
|
const avatarUrl = ref('');
|
||||||
const newAvatar = ref('');
|
const newAvatar = ref('');
|
||||||
|
const uploadedAvatarData = ref(null);
|
||||||
const showAvatarUpload = ref(false);
|
const showAvatarUpload = ref(false);
|
||||||
const accountInfo = ref({ balance: '0.00', is_distribute: false });
|
const accountInfo = ref({ balance: '0.00', is_distribute: false });
|
||||||
const isLoading = ref(false);
|
const isLoading = ref(false);
|
||||||
@@ -177,10 +179,12 @@ export default {
|
|||||||
};
|
};
|
||||||
// 确保加载头像
|
// 确保加载头像
|
||||||
if (response.data.user?.avatar) {
|
if (response.data.user?.avatar) {
|
||||||
avatarUrl.value = response.data.data.avatar;
|
// 使用getImageUrl处理头像路径
|
||||||
|
const processedAvatarUrl = getImageUrl(response.data.user.avatar);
|
||||||
|
avatarUrl.value = processedAvatarUrl;
|
||||||
// 更新store中的头像
|
// 更新store中的头像
|
||||||
if(userStore.user) {
|
if(userStore.user) {
|
||||||
userStore.setUserAvatar(response.data.data.avatar);
|
userStore.setUserAvatar(processedAvatarUrl);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -258,7 +262,10 @@ export default {
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (response.data.success) {
|
if (response.data.success) {
|
||||||
newAvatar.value = response.data.url;
|
// 保存上传响应数据
|
||||||
|
uploadedAvatarData.value = response.data.data;
|
||||||
|
// 使用url作为显示地址
|
||||||
|
newAvatar.value = response.data.data.url;
|
||||||
ElMessage.success('头像上传成功');
|
ElMessage.success('头像上传成功');
|
||||||
} else {
|
} else {
|
||||||
ElMessage.error(response.data.message || '上传失败');
|
ElMessage.error(response.data.message || '上传失败');
|
||||||
@@ -272,26 +279,30 @@ export default {
|
|||||||
// 确认更新头像
|
// 确认更新头像
|
||||||
const confirmAvatarUpload = async () => {
|
const confirmAvatarUpload = async () => {
|
||||||
try {
|
try {
|
||||||
if (!newAvatar.value) {
|
if (!newAvatar.value || !uploadedAvatarData.value) {
|
||||||
ElMessage.error('请先选择头像');
|
ElMessage.error('请先选择头像');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 使用path提交给后端
|
||||||
|
const avatarPath = uploadedAvatarData.value.path;
|
||||||
const response = await api.put('/user/profile', {
|
const response = await api.put('/user/profile', {
|
||||||
avatar: newAvatar.value
|
avatar: avatarPath
|
||||||
});
|
});
|
||||||
|
|
||||||
if (response.data.success) {
|
if (response.data.success) {
|
||||||
avatarUrl.value = newAvatar.value;
|
// 使用url作为显示地址
|
||||||
// 更新用户store中的头像信息 - 修改这里
|
avatarUrl.value = uploadedAvatarData.value.url;
|
||||||
|
// 更新用户store中的头像信息
|
||||||
if(userStore.user) {
|
if(userStore.user) {
|
||||||
userStore.setUser({
|
userStore.setUser({
|
||||||
...userStore.user,
|
...userStore.user,
|
||||||
avatar: newAvatar.value
|
avatar: uploadedAvatarData.value.url
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
showAvatarUpload.value = false;
|
showAvatarUpload.value = false;
|
||||||
newAvatar.value = '';
|
newAvatar.value = '';
|
||||||
|
uploadedAvatarData.value = null;
|
||||||
ElMessage.success('头像更新成功');
|
ElMessage.success('头像更新成功');
|
||||||
} else {
|
} else {
|
||||||
ElMessage.error(response.data.message || '头像更新失败');
|
ElMessage.error(response.data.message || '头像更新失败');
|
||||||
@@ -334,6 +345,7 @@ export default {
|
|||||||
avatarUrl,
|
avatarUrl,
|
||||||
newAvatar,
|
newAvatar,
|
||||||
showAvatarUpload,
|
showAvatarUpload,
|
||||||
|
uploadedAvatarData,
|
||||||
accountInfo,
|
accountInfo,
|
||||||
isLoading,
|
isLoading,
|
||||||
functionItems,
|
functionItems,
|
||||||
@@ -343,7 +355,8 @@ export default {
|
|||||||
confirmAvatarUpload,
|
confirmAvatarUpload,
|
||||||
handleLogout,
|
handleLogout,
|
||||||
handleDistributeChange,
|
handleDistributeChange,
|
||||||
userStore
|
userStore,
|
||||||
|
getImageUrl
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -56,7 +56,7 @@
|
|||||||
<div class="product-name">{{ product.name }}</div>
|
<div class="product-name">{{ product.name }}</div>
|
||||||
<div class="product-price">
|
<div class="product-price">
|
||||||
<div class="main-price">
|
<div class="main-price">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="rongdou-icon" />
|
||||||
<span class="rongdou-price">{{ product.rongdou_price }}</span>
|
<span class="rongdou-price">{{ product.rongdou_price }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="sub-price">
|
<div class="sub-price">
|
||||||
@@ -162,7 +162,8 @@ export default {
|
|||||||
featuredProducts,
|
featuredProducts,
|
||||||
loading,
|
loading,
|
||||||
getUserPoints,
|
getUserPoints,
|
||||||
goToCategory
|
goToCategory,
|
||||||
|
getImageUrl
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -75,7 +75,7 @@
|
|||||||
<div class="item-price">
|
<div class="item-price">
|
||||||
<div class="item-price-container">
|
<div class="item-price-container">
|
||||||
<div class="item-main-price">
|
<div class="item-main-price">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="item-rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="item-rongdou-icon" />
|
||||||
<span class="item-rongdou-price">{{ item.rongdouPrice }}</span>
|
<span class="item-rongdou-price">{{ item.rongdouPrice }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-sub-price">
|
<div class="item-sub-price">
|
||||||
@@ -97,7 +97,7 @@
|
|||||||
<span>总计:</span>
|
<span>总计:</span>
|
||||||
<div class="total-price-group">
|
<div class="total-price-group">
|
||||||
<span class="total-rongdou">
|
<span class="total-rongdou">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="total-rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="total-rongdou-icon" />
|
||||||
{{ order.totalRongdou }}
|
{{ order.totalRongdou }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -255,7 +255,7 @@
|
|||||||
<div class="product-price">
|
<div class="product-price">
|
||||||
<div class="detail-item-price-container">
|
<div class="detail-item-price-container">
|
||||||
<div class="detail-item-main-price">
|
<div class="detail-item-main-price">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="detail-rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="detail-rongdou-icon" />
|
||||||
<span class="detail-rongdou-price">{{ item.rongdouPrice }}</span>
|
<span class="detail-rongdou-price">{{ item.rongdouPrice }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-item-sub-price">
|
<div class="detail-item-sub-price">
|
||||||
@@ -283,7 +283,7 @@
|
|||||||
<span class="label">商品总计:</span>
|
<span class="label">商品总计:</span>
|
||||||
<div class="value">
|
<div class="value">
|
||||||
<span class="detail-price-group">
|
<span class="detail-price-group">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="cost-rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="cost-rongdou-icon" />
|
||||||
<span>{{ orderDetail.totalRongdou }}</span>
|
<span>{{ orderDetail.totalRongdou }}</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -292,7 +292,7 @@
|
|||||||
<span class="label">实付:</span>
|
<span class="label">实付:</span>
|
||||||
<div class="value">
|
<div class="value">
|
||||||
<span class="detail-price-group">
|
<span class="detail-price-group">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="cost-rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="cost-rongdou-icon" />
|
||||||
<span>{{ orderDetail.totalRongdou }}</span>
|
<span>{{ orderDetail.totalRongdou }}</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -316,6 +316,7 @@ import {
|
|||||||
Plus
|
Plus
|
||||||
} from '@element-plus/icons-vue'
|
} from '@element-plus/icons-vue'
|
||||||
import api from '@/utils/api'
|
import api from '@/utils/api'
|
||||||
|
import { getImageUrl } from '@/config'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const userStore = useUserStore()
|
const userStore = useUserStore()
|
||||||
|
|||||||
@@ -74,7 +74,7 @@
|
|||||||
<!-- 积分+融豆混合支付 -->
|
<!-- 积分+融豆混合支付 -->
|
||||||
<div class="payment-price-container">
|
<div class="payment-price-container">
|
||||||
<div class="payment-main-price">
|
<div class="payment-main-price">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="payment-rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="payment-rongdou-icon" />
|
||||||
<span class="payment-rongdou-price">{{ totalRongdouPrice }}</span>
|
<span class="payment-rongdou-price">{{ totalRongdouPrice }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="payment-sub-price">
|
<div class="payment-sub-price">
|
||||||
@@ -87,7 +87,7 @@
|
|||||||
<!-- 仅融豆支付 -->
|
<!-- 仅融豆支付 -->
|
||||||
<div class="payment-price-container">
|
<div class="payment-price-container">
|
||||||
<div class="payment-main-price">
|
<div class="payment-main-price">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="payment-rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="payment-rongdou-icon" />
|
||||||
<span class="payment-rongdou-price">{{ totalRongdouPrice }}</span>
|
<span class="payment-rongdou-price">{{ totalRongdouPrice }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="payment-sub-price">
|
<div class="payment-sub-price">
|
||||||
@@ -100,7 +100,7 @@
|
|||||||
<!-- 仅积分支付 -->
|
<!-- 仅积分支付 -->
|
||||||
<div class="payment-price-container">
|
<div class="payment-price-container">
|
||||||
<div class="payment-main-price">
|
<div class="payment-main-price">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="payment-rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="payment-rongdou-icon" />
|
||||||
<span class="payment-rongdou-price">{{ totalRongdouPrice }}</span>
|
<span class="payment-rongdou-price">{{ totalRongdouPrice }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="payment-sub-price">
|
<div class="payment-sub-price">
|
||||||
@@ -113,7 +113,7 @@
|
|||||||
<!-- 未选择支付方式时的默认显示 -->
|
<!-- 未选择支付方式时的默认显示 -->
|
||||||
<div class="payment-price-container">
|
<div class="payment-price-container">
|
||||||
<div class="payment-main-price">
|
<div class="payment-main-price">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="payment-rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="payment-rongdou-icon" />
|
||||||
<span class="payment-rongdou-price">{{ totalRongdouPrice }}</span>
|
<span class="payment-rongdou-price">{{ totalRongdouPrice }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="payment-sub-price">
|
<div class="payment-sub-price">
|
||||||
@@ -129,7 +129,7 @@
|
|||||||
<span>积分:{{ paymentData.pointsAmount }}</span>
|
<span>积分:{{ paymentData.pointsAmount }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="paymentData.beansAmount > 0" class="breakdown-item">
|
<div v-if="paymentData.beansAmount > 0" class="breakdown-item">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="breakdown-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="breakdown-icon" />
|
||||||
<span>融豆:{{ paymentData.beansAmount }}</span>
|
<span>融豆:{{ paymentData.beansAmount }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -157,7 +157,7 @@
|
|||||||
<div class="item-price">
|
<div class="item-price">
|
||||||
<div class="item-price-container">
|
<div class="item-price-container">
|
||||||
<div class="item-main-price">
|
<div class="item-main-price">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="item-rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="item-rongdou-icon" />
|
||||||
<span class="item-rongdou-price">{{ item.rongdouPrice }}</span>
|
<span class="item-rongdou-price">{{ item.rongdouPrice }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-sub-price">
|
<div class="item-sub-price">
|
||||||
@@ -188,7 +188,7 @@
|
|||||||
}"
|
}"
|
||||||
@click="selectPaymentMethod('beans')"
|
@click="selectPaymentMethod('beans')"
|
||||||
>
|
>
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="payment-icon-img" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="payment-icon-img" />
|
||||||
<div class="payment-info">
|
<div class="payment-info">
|
||||||
<div class="payment-name">融豆支付</div>
|
<div class="payment-name">融豆支付</div>
|
||||||
<div class="payment-desc">
|
<div class="payment-desc">
|
||||||
@@ -233,7 +233,7 @@
|
|||||||
<div class="payment-icon-group">
|
<div class="payment-icon-group">
|
||||||
<el-icon class="payment-icon"><Coin /></el-icon>
|
<el-icon class="payment-icon"><Coin /></el-icon>
|
||||||
<span class="plus-sign">+</span>
|
<span class="plus-sign">+</span>
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="payment-icon-img" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="payment-icon-img" />
|
||||||
</div>
|
</div>
|
||||||
<div class="payment-info">
|
<div class="payment-info">
|
||||||
<div class="payment-name">积分+融豆</div>
|
<div class="payment-name">积分+融豆</div>
|
||||||
@@ -258,7 +258,7 @@
|
|||||||
<!-- 积分+融豆混合支付 -->
|
<!-- 积分+融豆混合支付 -->
|
||||||
<div class="bottom-price-container">
|
<div class="bottom-price-container">
|
||||||
<div class="bottom-main-price">
|
<div class="bottom-main-price">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="bottom-rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="bottom-rongdou-icon" />
|
||||||
<span class="bottom-rongdou-price">{{ paymentData.beansAmount }}</span>
|
<span class="bottom-rongdou-price">{{ paymentData.beansAmount }}</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="bottom-plus-sign">+</span>
|
<span class="bottom-plus-sign">+</span>
|
||||||
@@ -272,7 +272,7 @@
|
|||||||
<!-- 仅融豆支付 -->
|
<!-- 仅融豆支付 -->
|
||||||
<div class="bottom-price-container">
|
<div class="bottom-price-container">
|
||||||
<div class="bottom-main-price">
|
<div class="bottom-main-price">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="bottom-rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="bottom-rongdou-icon" />
|
||||||
<span class="bottom-rongdou-price">{{ paymentData.beansAmount }}</span>
|
<span class="bottom-rongdou-price">{{ paymentData.beansAmount }}</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="bottom-plus-sign" v-if="paymentData.pointsAmount > 0">+</span>
|
<span class="bottom-plus-sign" v-if="paymentData.pointsAmount > 0">+</span>
|
||||||
@@ -286,7 +286,7 @@
|
|||||||
<!-- 仅积分支付 -->
|
<!-- 仅积分支付 -->
|
||||||
<div class="bottom-price-container">
|
<div class="bottom-price-container">
|
||||||
<div class="bottom-main-price" v-if="paymentData.beansAmount > 0">
|
<div class="bottom-main-price" v-if="paymentData.beansAmount > 0">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="bottom-rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="bottom-rongdou-icon" />
|
||||||
<span class="bottom-rongdou-price">{{ paymentData.beansAmount || 0 }}</span>
|
<span class="bottom-rongdou-price">{{ paymentData.beansAmount || 0 }}</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="bottom-plus-sign" v-if="paymentData.beansAmount > 0 && paymentData.pointsAmount > 0">+</span>
|
<span class="bottom-plus-sign" v-if="paymentData.beansAmount > 0 && paymentData.pointsAmount > 0">+</span>
|
||||||
@@ -300,7 +300,7 @@
|
|||||||
<!-- 未选择支付方式时的默认显示 -->
|
<!-- 未选择支付方式时的默认显示 -->
|
||||||
<div class="bottom-price-container">
|
<div class="bottom-price-container">
|
||||||
<div class="bottom-main-price" v-if="paymentData.beansAmount > 0">
|
<div class="bottom-main-price" v-if="paymentData.beansAmount > 0">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="bottom-rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="bottom-rongdou-icon" />
|
||||||
<span class="bottom-rongdou-price">{{ paymentData.beansAmount || 0 }}</span>
|
<span class="bottom-rongdou-price">{{ paymentData.beansAmount || 0 }}</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="bottom-plus-sign" v-if="paymentData.beansAmount > 0 && paymentData.pointsAmount > 0">+</span>
|
<span class="bottom-plus-sign" v-if="paymentData.beansAmount > 0 && paymentData.pointsAmount > 0">+</span>
|
||||||
@@ -338,6 +338,7 @@ import {
|
|||||||
Check
|
Check
|
||||||
} from '@element-plus/icons-vue'
|
} from '@element-plus/icons-vue'
|
||||||
import api from '@/utils/api'
|
import api from '@/utils/api'
|
||||||
|
import { getImageUrl } from '@/config'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|||||||
@@ -65,7 +65,7 @@
|
|||||||
<div class="product-price">
|
<div class="product-price">
|
||||||
<div class="item-price-container">
|
<div class="item-price-container">
|
||||||
<div class="item-main-price">
|
<div class="item-main-price">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="item-rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="item-rongdou-icon" />
|
||||||
<span class="item-rongdou-price">{{ item.rongdou_price }}</span>
|
<span class="item-rongdou-price">{{ item.rongdou_price }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-sub-price">
|
<div class="item-sub-price">
|
||||||
@@ -79,7 +79,7 @@
|
|||||||
<div class="product-total">
|
<div class="product-total">
|
||||||
<div class="total-price-container">
|
<div class="total-price-container">
|
||||||
<div class="total-main-price">
|
<div class="total-main-price">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="total-rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="total-rongdou-icon" />
|
||||||
<span class="total-rongdou-price">{{ (item.rongdou_price * item.quantity) }}</span>
|
<span class="total-rongdou-price">{{ (item.rongdou_price * item.quantity) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="total-sub-price">
|
<div class="total-sub-price">
|
||||||
@@ -98,21 +98,21 @@
|
|||||||
<div class="cost-item">
|
<div class="cost-item">
|
||||||
<span class="label">商品总价:</span>
|
<span class="label">商品总价:</span>
|
||||||
<span class="value">
|
<span class="value">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="cost-rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="cost-rongdou-icon" />
|
||||||
{{ orderData.totalAmount || 0 }}
|
{{ orderData.totalAmount || 0 }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="cost-item">
|
<div class="cost-item">
|
||||||
<span class="label">运费:</span>
|
<span class="label">运费:</span>
|
||||||
<span class="value">
|
<span class="value">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="cost-rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="cost-rongdou-icon" />
|
||||||
{{ orderData.shippingFee || 0 }}
|
{{ orderData.shippingFee || 0 }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="cost-item total">
|
<div class="cost-item total">
|
||||||
<span class="label">总计:</span>
|
<span class="label">总计:</span>
|
||||||
<span class="value">
|
<span class="value">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="cost-rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="cost-rongdou-icon" />
|
||||||
{{ orderData.totalAmount || 0 }}
|
{{ orderData.totalAmount || 0 }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -133,6 +133,7 @@ import {
|
|||||||
Coin
|
Coin
|
||||||
} from '@element-plus/icons-vue'
|
} from '@element-plus/icons-vue'
|
||||||
import api from '@/utils/api'
|
import api from '@/utils/api'
|
||||||
|
import { getImageUrl } from '@/config'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|||||||
@@ -58,7 +58,7 @@
|
|||||||
<div class="product-price">
|
<div class="product-price">
|
||||||
<div class="price-container">
|
<div class="price-container">
|
||||||
<div class="main-price">
|
<div class="main-price">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="rongdou-icon" />
|
||||||
<span class="rongdou-price">{{ product.rongdou_price }}</span>
|
<span class="rongdou-price">{{ product.rongdou_price }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="sub-price">
|
<div class="sub-price">
|
||||||
@@ -719,6 +719,35 @@ watch(
|
|||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.quantity-selector :deep(.el-input-number) {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity-selector :deep(.el-input-number .el-input__wrapper) {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity-selector :deep(.el-input-number .el-input__inner) {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity-selector :deep(.el-input-number .el-input-number__decrease),
|
||||||
|
.quantity-selector :deep(.el-input-number .el-input-number__increase) {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: #409eff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity-selector :deep(.el-input-number .el-input-number__decrease:hover),
|
||||||
|
.quantity-selector :deep(.el-input-number .el-input-number__increase:hover) {
|
||||||
|
background: transparent;
|
||||||
|
color: #66b1ff;
|
||||||
|
}
|
||||||
|
|
||||||
.action-buttons {
|
.action-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
@@ -731,6 +760,35 @@ watch(
|
|||||||
|
|
||||||
.action-buttons .el-button {
|
.action-buttons .el-button {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
background: linear-gradient(135deg, #ff6b35, #ff8c42);
|
||||||
|
border: none;
|
||||||
|
border-radius: 25px;
|
||||||
|
color: white;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 14px 24px;
|
||||||
|
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons .el-button:hover {
|
||||||
|
background: linear-gradient(135deg, #ff5722, #ff7043);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons .el-button:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
box-shadow: 0 2px 10px rgba(255, 107, 53, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons .el-button:disabled {
|
||||||
|
background: linear-gradient(135deg, #ccc, #ddd);
|
||||||
|
color: #999;
|
||||||
|
cursor: not-allowed;
|
||||||
|
transform: none;
|
||||||
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-reviews {
|
.product-reviews {
|
||||||
|
|||||||
@@ -23,18 +23,18 @@
|
|||||||
style="min-height: 300px;"
|
style="min-height: 300px;"
|
||||||
>
|
>
|
||||||
<el-carousel-item v-for="(image, index) in firstProduct.images" :key="index">
|
<el-carousel-item v-for="(image, index) in firstProduct.images" :key="index">
|
||||||
<img :src="image" :alt="firstProduct.name" class="carousel-image" />
|
<img :src="getImageUrl(image)" :alt="firstProduct.name" class="carousel-image" />
|
||||||
</el-carousel-item>
|
</el-carousel-item>
|
||||||
</el-carousel>
|
</el-carousel>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="product-details">
|
<div class="product-details">
|
||||||
<img :src="firstProduct.image" :alt="firstProduct.name" class="small-image" />
|
<img :src="getImageUrl(firstProduct.image)" :alt="firstProduct.name" class="small-image" />
|
||||||
<div class="product-info">
|
<div class="product-info">
|
||||||
<span class="product-name">{{ firstProduct.name }}</span>
|
<span class="product-name">{{ firstProduct.name }}</span>
|
||||||
<div class="product-price">
|
<div class="product-price">
|
||||||
<div class="main-price">
|
<div class="main-price">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="rongdou-icon" />
|
||||||
<span class="rongdou-price">{{ firstProduct.rongdou_price }}</span>
|
<span class="rongdou-price">{{ firstProduct.rongdou_price }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="sub-price">
|
<div class="sub-price">
|
||||||
@@ -68,18 +68,18 @@
|
|||||||
style="min-height: 300px;"
|
style="min-height: 300px;"
|
||||||
>
|
>
|
||||||
<el-carousel-item v-for="(image, index) in (productDetailsCache[product.id]?.images || [])" :key="index">
|
<el-carousel-item v-for="(image, index) in (productDetailsCache[product.id]?.images || [])" :key="index">
|
||||||
<img :src="image" :alt="product.name" class="carousel-image" />
|
<img :src="getImageUrl(image)" :alt="product.name" class="carousel-image" />
|
||||||
</el-carousel-item>
|
</el-carousel-item>
|
||||||
</el-carousel>
|
</el-carousel>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="product-details">
|
<div class="product-details">
|
||||||
<img :src="product.image" :alt="product.name" class="small-image" />
|
<img :src="getImageUrl(product.image)" :alt="product.name" class="small-image" />
|
||||||
<div class="product-info">
|
<div class="product-info">
|
||||||
<span class="product-name">{{ product.name }}</span>
|
<span class="product-name">{{ product.name }}</span>
|
||||||
<div class="product-price">
|
<div class="product-price">
|
||||||
<div class="main-price">
|
<div class="main-price">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="rongdou-icon" />
|
||||||
<span class="rongdou-price">{{ product.rongdou_price }}</span>
|
<span class="rongdou-price">{{ product.rongdou_price }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="sub-price">
|
<div class="sub-price">
|
||||||
@@ -145,12 +145,7 @@ const getProducts = async () => {
|
|||||||
console.error('无法解析的商品数据格式:', data)
|
console.error('无法解析的商品数据格式:', data)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理商品图片路径
|
// 不需要预处理图片路径,在模板中使用getImageUrl处理
|
||||||
products.value.forEach(product => {
|
|
||||||
if (product.image) {
|
|
||||||
product.image = getImageUrl(product.image)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
console.log('解析后的商品数据:', products.value)
|
console.log('解析后的商品数据:', products.value)
|
||||||
|
|
||||||
@@ -174,13 +169,7 @@ const getFirstProduct = async () => {
|
|||||||
|
|
||||||
firstProduct.value = productRes.data.data.product
|
firstProduct.value = productRes.data.data.product
|
||||||
|
|
||||||
// 处理第一个商品的图片路径
|
// 不需要预处理图片路径,在模板中使用getImageUrl处理
|
||||||
if (firstProduct.value.image) {
|
|
||||||
firstProduct.value.image = getImageUrl(firstProduct.value.image)
|
|
||||||
}
|
|
||||||
if (firstProduct.value.images && Array.isArray(firstProduct.value.images)) {
|
|
||||||
firstProduct.value.images = firstProduct.value.images.map(img => getImageUrl(img))
|
|
||||||
}
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
ElMessage.error('获取商品详情失败')
|
ElMessage.error('获取商品详情失败')
|
||||||
console.log(error)
|
console.log(error)
|
||||||
@@ -244,13 +233,7 @@ const loadAllProductDetails = async () => {
|
|||||||
const newCache = { ...productDetailsCache.value }
|
const newCache = { ...productDetailsCache.value }
|
||||||
results.forEach(result => {
|
results.forEach(result => {
|
||||||
if (result) {
|
if (result) {
|
||||||
// 处理缓存商品的图片路径
|
// 不需要预处理图片路径,在模板中使用getImageUrl处理
|
||||||
if (result.product.image) {
|
|
||||||
result.product.image = getImageUrl(result.product.image)
|
|
||||||
}
|
|
||||||
if (result.product.images && Array.isArray(result.product.images)) {
|
|
||||||
result.product.images = result.product.images.map(img => getImageUrl(img))
|
|
||||||
}
|
|
||||||
newCache[result.id] = result.product
|
newCache[result.id] = result.product
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -65,7 +65,7 @@
|
|||||||
<h4 class="recommend-name">{{ product.name }}</h4>
|
<h4 class="recommend-name">{{ product.name }}</h4>
|
||||||
<div class="recommend-price-container">
|
<div class="recommend-price-container">
|
||||||
<div class="main-price">
|
<div class="main-price">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="rongdou-icon" />
|
||||||
<span class="rongdou-price">{{ product.rongdou_price }}</span>
|
<span class="rongdou-price">{{ product.rongdou_price }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="sub-price">
|
<div class="sub-price">
|
||||||
@@ -91,7 +91,7 @@
|
|||||||
<h4 class="recommend-name">{{ product.name }}</h4>
|
<h4 class="recommend-name">{{ product.name }}</h4>
|
||||||
<div class="recommend-price-container">
|
<div class="recommend-price-container">
|
||||||
<div class="main-price">
|
<div class="main-price">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="rongdou-icon" />
|
||||||
<span class="rongdou-price">{{ product.rongdou_price }}</span>
|
<span class="rongdou-price">{{ product.rongdou_price }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="sub-price">
|
<div class="sub-price">
|
||||||
@@ -140,7 +140,7 @@
|
|||||||
<h4 class="product-name">{{ product.name }}</h4>
|
<h4 class="product-name">{{ product.name }}</h4>
|
||||||
<div class="product-price">
|
<div class="product-price">
|
||||||
<div class="main-price">
|
<div class="main-price">
|
||||||
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
|
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="rongdou-icon" />
|
||||||
<span class="rongdou-price">{{ product.rongdou_price }}</span>
|
<span class="rongdou-price">{{ product.rongdou_price }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="sub-price">
|
<div class="sub-price">
|
||||||
|
|||||||
Reference in New Issue
Block a user