admin/jurong_circle_frontdesk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式修改以及接口完善

Browse Source
This commit is contained in:
dzl
2025-10-24 16:15:40 +08:00
parent 545c90f13b
commit 34c866b221
7 changed files with 60 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/views/MainPage.vue
View File

@@ -79,6 +79,7 @@
@close="closeWelcomeDialog"
center
class="welcome-dialog"
:lock-scroll="false"
>
<div class="welcome-content">
<div class="welcome-icon">🎉</div>

25
src/views/MyProfile.vue
View File

@@ -26,12 +26,9 @@
<span class="username">{{ userStore.user?.username || '用户' }}</span>
<div class="user-role">
<template v-if="accountInfo.distribution">
<el-tag v-if="accountInfo.user_type==='agent_directly'" type="primary">直营代理</el-tag>
<el-tag v-if="accountInfo.user_type==='directly_operated'" type="primary">直营商户</el-tag>
<el-tag v-if="accountInfo.user_type==='agent'" type="primary">代理</el-tag>
<el-tag v-if="accountInfo.user_type==='user'" type="primary">融豆商户</el-tag>
<el-tag type="primary">{{ getUserType(accountInfo.user_type) }}</el-tag>
</template>
<el-tag v-else type="primary">普通用户</el-tag>
<el-tag v-if="!accountInfo.distribution" type="primary">普通用户</el-tag>
</div>
</template>
<template v-else>
@@ -301,6 +298,21 @@ export default {
{image: "/imgs/profile/icon/kabaoguanli.png", text: "卡包管理", path: "/couponmanage"},
]);
const getUserType = (type) => {
switch (type) {
case 'agent_directly':
return '直营代理';
case 'directly_operated':
return '直营商户';
case 'agent':
return '代理';
case 'user':
return '融豆商户';
default:
return '普通用户';
}
}
// 加载账户信息
const loadAccountInfo = async () => {
try {
@@ -664,7 +676,8 @@ export default {
handleDistributeChange,
showAgreement,
userStore,
getImageUrl
getImageUrl,
getUserType,
};
}
};

2
src/views/MyShop.vue
View File

@@ -367,9 +367,9 @@ export default {
font-weight: 600;
color: var(--dark-color);
padding: 16px;
background-color: #cae5ff;
border-radius: 8px;
margin-bottom: 16px; /* 增加与分类项的间距 */
text-align: center;
}
.category-items-vertical {

32
src/views/Orders.vue
View File

@@ -39,7 +39,7 @@
<!-- 订单列表 -->
<div class="orders-content">
<div v-loading="loading" class="orders-list">
<div v-if="filteredOrders.length === 0" class="empty-state">
<div v-if="orders.length === 0" class="empty-state">
<el-icon size="60"><Box /></el-icon>
<p>{{ getEmptyText() }}</p>
<el-button type="primary" @click="$router.push('/shop')">
@@ -48,7 +48,7 @@
</div>
<div v-else class="orders-container">
<div v-for="order in filteredOrders" :key="order.id" class="order-card">
<div v-for="order in orders" :key="order.id" class="order-card">
<!-- 订单头部 -->
<div class="order-header">
<div class="order-info">
@@ -300,7 +300,8 @@
<div class="value">
<span class="detail-price-group">
<img src='/imgs/profile/rongdou.png' alt="融豆" class="cost-rongdou-icon" />
<span>{{ orderDetail.totalRongdou }}</span>
<!-- <span>{{ order.totalRongdou }}</span> -->
<span>{{ orderDetail.realPay.rongdou }}{{ orderDetail.realPay.points }}</span>
</span>
</div>
</div>
@@ -331,7 +332,7 @@ const userStore = useUserStore()
// 响应式数据
const loading = ref(false)
const loadingMore = ref(false)
const selectedStatus = ref('all')
const selectedStatus = ref('')
const orders = ref([])
const page = ref(1)
const hasMore = ref(true)
@@ -343,7 +344,7 @@ const submittingReview = ref(false)
// 状态标签
const statusTabs = ref([
{ label: '全部', value: 'all', count: 0 },
{ label: '全部', value: '', count: 0 },
{ label: '待发货', value: 'pending', count: 0 },
{ label: '待支付', value: 'pre_order', count: 0 },
{ label: '已发货', value: 'shipped', count: 0 },
@@ -352,21 +353,22 @@ const statusTabs = ref([
])
// 计算属性
const filteredOrders = computed(() => {
/* const filteredOrders = computed(() => {
if (selectedStatus.value === 'all') {
return orders.value
}
return orders.value.filter(order => order.status === selectedStatus.value)
})
}) */
// 方法
const selectStatus = (status) => {
selectedStatus.value = status
getOrders()
}
const getEmptyText = () => {
const textMap = {
all: '暂无订单',
'': '暂无订单',
pending: '暂无待发货订单',
pre_order: '暂无待支付订单',
shipped: '暂无已发货订单',
@@ -409,6 +411,8 @@ const getStatusText = (status) => {
return textMap[status] || '未知状态'
}
const chooseStatus = ref('')
const formatDate = (date) => {
return new Date(date).toLocaleDateString('zh-CN')
}
@@ -549,7 +553,11 @@ const viewOrderDetail = (orderId) => {
totalQuantity: order.totalQuantity,
items: order.items || [],
shippingAddress: order.shippingAddress || null,
trackingNumber: order.trackingNumber || null
trackingNumber: order.trackingNumber || null,
realPay: {
rongdou: order.real_rongdou,
points: order.real_points
}
}
console.log('设置的订单详情数据:', orderDetail.value)
@@ -572,13 +580,15 @@ const getOrders = async (isLoadMore = false) => {
const {data} = await api.get('/orders', {
params: {
page: page.value,
limit: 10
limit: 10,
status: selectedStatus.value || null
}
})
console.log(data,'response');
// console.log(data,'response');
// 映射后端数据结构到前端需要的格式
const mappedOrders = data.data.orders.map(order => ({
...order,
id: order.id,
orderNumber: order.order_no,
createdAt: order.created_at,

8
src/views/PayLoading.vue
View File

@@ -61,7 +61,7 @@
<img :src="item.image" :alt="item.name" class="product-image" />
<div class="product-info">
<div class="product-name">{{ item.name }}</div>
<div class="product-spec">{{ item.specification || '默认规格' }}</div>
<!-- <div class="product-spec">{{ item.specification || '默认规格' }}</div> -->
<div class="product-price">
<div class="item-price-container">
<div class="item-main-price">
@@ -99,7 +99,7 @@
<span class="label">商品总价：</span>
<span class="value">
<img src='/imgs/profile/rongdou.png' alt="融豆" class="cost-rongdou-icon" />
{{ orderData.totalAmount || 0 }}
{{ orderData.total_rongdou || 0 }}
</span>
</div>
<div class="cost-item">
@@ -113,7 +113,7 @@
<span class="label">总计：</span>
<span class="value">
<img src='/imgs/profile/rongdou.png' alt="融豆" class="cost-rongdou-icon" />
{{ orderData.totalAmount || 0 }}
{{ orderData.total_rongdou + orderData.shippingFee || 0 }}
</span>
</div>
</div>
@@ -195,6 +195,7 @@ const fetchOrderData = async () => {
const data = response.data.data
const order = data.order || data
orderData.value = {
...order,
orderNumber: order.order_no || 'ORD' + Date.now(),
createTime: order.created_at || new Date().toISOString(),
totalAmount: order.total_amount || 0,
@@ -219,6 +220,7 @@ const fetchOrderData = async () => {
quantity: item.quantity || 1
}))
}
console.log(1,orderData.value)
} else {
throw new Error(response.data.message || '获取订单信息失败')
}

17
src/views/ProductDetail.vue
View File

@@ -44,7 +44,6 @@
ref="carouselRef"
:autoplay="false"
:initial-index="currentIndex"
type="card"
height="300px"
indicator-position="outside"
@change="handleCarouselChange"
@@ -476,7 +475,7 @@ watch(
<style scoped>
.product-detail-page {
min-height: 100vh;
background: linear-gradient(to bottom, #72c9ffae, #f3f3f3);
background:#e2e6f7;
}
.navbar {
@@ -485,8 +484,7 @@ watch(
justify-content: space-between;
padding: 0 16px;
height: 56px;
background: white;
border-bottom: 1px solid #eee;
background: rgb(173, 199, 255);
position: sticky;
top: 0;
z-index: 100;
@@ -524,15 +522,15 @@ watch(
}
.product-images {
padding: 20px;
background: transparent;
margin-top: -10px;
padding: 10px;
background: #f8f9ff;
}
.product-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
object-fit: contain;
}
/* 小图容器样式 */
@@ -552,6 +550,7 @@ watch(
justify-content: center;
justify-items: center;
margin-top: -5px;
}
.small-images::-webkit-scrollbar {
@@ -623,7 +622,7 @@ watch(
.rongdou-price {
font-size: 28px;
font-weight: 700;
color: #ff6b35;
color: #305DEF;
}
.sub-price {

7
src/views/Shop.vue
View File

@@ -221,11 +221,14 @@ onMounted(() => {
.shop-content {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(2, 153px);
justify-content: center;
justify-items: center;
column-gap: 26px;
row-gap: 14px;
align-self: center;
margin-top: 14px;
width: 100%;
}
.product-content {
@@ -235,7 +238,7 @@ onMounted(() => {
background-color: #fff;
display: flex;
flex-direction: column;
justify-self: center;
/* justify-self: center; */
}
.product-content-img {