refactor: 优化购物车与订单页面逻辑

- 更新购物车页面,增强商品展示与交互体验。
- 调整订单页面的状态反馈与用户操作逻辑,确保信息清晰。
- 改进组件样式与布局,提升整体用户体验。
- 修复多个页面中的样式与功能问题,确保一致性与流畅性。
This commit is contained in:
pikachu1995@126.com
2026-09-29 10:22:57 +08:00
parent 0bffe81c6b
commit a3193c3b68
19 changed files with 1631 additions and 1480 deletions

View File

@@ -11,15 +11,21 @@
<div class="step-list">
<div
class="step-item"
:class="{ active: current == index }"
v-for="(item, index) in entrySteps"
:key="index"
:class="{ active: current == index, done: current > index }"
v-for="(item, index) in flowSteps"
:key="item.value"
>
{{ item.title }}
<div class="step-mark">{{ index + 1 }}</div>
<div class="step-title">{{ item.title }}</div>
</div>
</div>
<div class="submit" @click="keepOn()">开始填写</div>
<div class="notice" @click="getEntryNotice">查看店铺入驻协议</div>
<div v-if="statusTip" class="status-tip" :class="statusTip.value">
{{ statusTip.title }}
</div>
<div class="actions">
<div v-if="showFillButton" class="submit" @click="keepOn()">开始填写</div>
<div class="notice" @click="getEntryNotice">查看店铺入驻协议</div>
</div>
</div>
</div>
</template>
@@ -36,8 +42,15 @@ const store = useStore()
const themeStyle = computed(() => getThemeStyle(store.state.theme))
const current = ref(999)
const current = ref(-1)
const companyData = ref<any>('')
const showFillButton = computed(() => companyData.value?.storeDisable !== 'OPEN')
const flowSteps = computed(() =>
entrySteps.value.filter((item) => item.value === 'APPLY' || item.value === 'APPLYING')
)
const statusTip = computed(() =>
entrySteps.value.find((item) => item.value !== 'APPLY' && item.value !== 'APPLYING')
)
const entrySteps = ref([
{
@@ -137,54 +150,103 @@ page {
}
.entry-content {
padding: 32rpx 80rpx calc(40rpx + env(safe-area-inset-bottom));
padding: 48rpx 48rpx calc(40rpx + env(safe-area-inset-bottom));
box-sizing: border-box;
}
.title {
line-height: 1.2;
font-weight: 500;
font-size: 56rpx;
color: #333;
font-weight: 600;
font-size: 48rpx;
color: #222;
}
.step-list {
margin: 80rpx 0;
margin-top: 64rpx;
}
.step-item {
padding: 30rpx 20rpx;
font-size: 40rpx;
font-weight: bold;
color: #666;
display: flex;
align-items: center;
padding: 18rpx 0;
color: #999;
}
.step-item.active {
.step-mark {
width: 48rpx;
height: 48rpx;
margin-right: 20rpx;
border-radius: 50%;
background: #f2f2f2;
color: #999;
font-size: 26rpx;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.step-title {
font-size: 32rpx;
font-weight: 500;
line-height: 1.4;
}
.step-item.done .step-mark,
.step-item.active .step-mark {
background: var(--theme-light, #ff6b35);
color: #fff;
}
.step-item.done .step-title {
color: #333;
}
.step-item.active .step-title {
color: var(--theme-light, #ff6b35);
}
.status-tip {
margin-top: 24rpx;
padding: 24rpx 28rpx;
border-radius: 16rpx;
font-size: 28rpx;
line-height: 1.5;
color: var(--theme-light, #ff6b35);
background: var(--theme-light-10, rgba(255, 107, 53, 0.1));
border-radius: 20rpx;
}
.status-tip.REFUSED {
color: var(--theme-primary, #ff3c2a);
background: #fff1f0;
}
.status-tip.CLOSED {
color: #666;
background: #f5f5f5;
}
.actions {
margin-top: 72rpx;
}
.submit,
.notice {
font-weight: bold;
font-size: 28rpx;
height: 92rpx;
height: 88rpx;
line-height: 88rpx;
text-align: center;
letter-spacing: 4rpx;
line-height: 92rpx;
border-radius: 20rpx;
font-size: 30rpx;
border-radius: 44rpx;
}
.submit {
color: #fff;
margin-top: 120rpx;
background: var(--theme-light, #ff6b35);
margin-bottom: 24rpx;
}
.notice {
margin-top: 40rpx;
color: #333;
background: $bg-color;
background: #f5f5f5;
}
</style>