fix: 修复海报面板提示与加载样式

- 更新海报面板提示,仅在有海报列表时显示相关信息。
- 调整加载样式,优化布局与对齐,提升用户体验。
- 修改按钮样式,确保一致性与可读性。
This commit is contained in:
pikachu1995@126.com
2026-09-30 16:50:43 +08:00
parent a3193c3b68
commit 74d186ff36
3 changed files with 481 additions and 466 deletions

View File

@@ -1,6 +1,6 @@
<template> <template>
<view class="poster-panel"> <view class="poster-panel">
<view class="poster-hint">点击海报预览后可保存到相册</view> <view v-if="posterList.length" class="poster-hint">点击海报预览后可保存到相册</view>
<view v-if="loading" class="loading-wrap"> <view v-if="loading" class="loading-wrap">
<text class="loading-text">海报生成中...</text> <text class="loading-text">海报生成中...</text>
@@ -465,23 +465,38 @@ function saveCurrentPoster() {
} }
.loading-wrap { .loading-wrap {
padding: 120rpx 0; display: flex;
text-align: center; flex-direction: column;
align-items: center;
padding: 80rpx 48rpx;
box-sizing: border-box;
} }
.loading-text { .loading-text {
display: block;
width: 100%;
color: #999; color: #999;
font-size: 28rpx; font-size: 28rpx;
line-height: 1.6;
text-align: center;
}
.retry-btn {
margin-top: 32rpx;
} }
.retry-btn, .retry-btn,
.save-btn { .save-btn {
display: inline-block; display: inline-flex;
padding: 12rpx 40rpx; align-items: center;
border-radius: 30rpx; justify-content: center;
height: 64rpx;
padding: 0 40rpx;
border-radius: 32rpx;
background: linear-gradient(90deg, #ff9f3f, #ff6b35); background: linear-gradient(90deg, #ff9f3f, #ff6b35);
color: #fff; color: #fff;
font-size: 26rpx; font-size: 26rpx;
white-space: nowrap;
} }
.poster-swiper { .poster-swiper {

View File

@@ -1,135 +1,135 @@
<template> <template>
<view class="address"> <view class="address">
<u-empty class="empty" v-if="addressList.length == 0" text="暂无收货地址" mode="address"></u-empty> <u-empty class="empty" v-if="addressList.length == 0" text="暂无收货地址" mode="address"></u-empty>
<view class="list" v-else> <view class="list" v-else>
<view class="item c-content" v-for="(item, index) in addressList" :key="index"> <view class="item c-content" v-for="(item, index) in addressList" :key="index">
<view class="basic" @click="selectAddressData(item)"> <view class="basic" @click="selectAddressData(item)">
<text>{{ item.name }}</text> <text>{{ item.name }}</text>
<text>{{ item.mobile }}</text> <text>{{ item.mobile }}</text>
<text class="default" v-show="item.isDefault">默认</text> <text class="default" v-show="item.isDefault">默认</text>
<view> <view>
<div class="region"> <div class="region">
<span v-if="item.consigneeAddressPath[0]">{{item.consigneeAddressPath[0]}}</span> <span v-if="item.consigneeAddressPath[0]">{{item.consigneeAddressPath[0]}}</span>
<span v-if="item.consigneeAddressPath[1]">{{item.consigneeAddressPath[1]}}</span> <span v-if="item.consigneeAddressPath[1]">{{item.consigneeAddressPath[1]}}</span>
<span v-if="item.consigneeAddressPath[2]">{{item.consigneeAddressPath[2]}}</span> <span v-if="item.consigneeAddressPath[2]">{{item.consigneeAddressPath[2]}}</span>
<span v-if="item.consigneeAddressPath[3]">{{item.consigneeAddressPath[3]}}</span> <span v-if="item.consigneeAddressPath[3]">{{item.consigneeAddressPath[3]}}</span>
<span>{{ item.detail }}</span> <span>{{ item.detail }}</span>
</div> </div>
</view> </view>
</view> </view>
<view class="edit"> <view class="edit">
<view class="relative" @click="setDefault(item)"> <view class="relative" @click="setDefault(item)">
<view v-if="item.isDefault" class="alifont icon-xuanzhong"></view> <view v-if="item.isDefault" class="alifont icon-xuanzhong"></view>
<text v-else class="unchecked"></text> <text v-else class="unchecked"></text>
<text>{{ item.isDefault ? "默认地址" : "设为默认" }}</text> <text>{{ item.isDefault ? "默认地址" : "设为默认" }}</text>
</view> </view>
<view class="relative"> <view class="relative">
<view class="alifont icon-bianji-copy"></view> <view class="alifont icon-bianji-copy"></view>
<text class="mr-40" @click="addAddress(item.id)">编辑</text> <text class="mr-40" @click="addAddress(item.id)">编辑</text>
<view class="alifont icon-lajitong" @click.stop="removeAddress(item.id)"></view> <view class="alifont icon-lajitong" @click.stop="removeAddress(item.id)"></view>
<text @click.stop="removeAddress(item.id)">删除</text> <text @click.stop="removeAddress(item.id)">删除</text>
</view> </view>
</view> </view>
</view> </view>
<view style="height: 100px"></view> <view style="height: 100px"></view>
</view> </view>
<view class="btn" @click="addAddress('')"> <view class="btn" @click="addAddress('')">
<u-icon name="plus-circle" color="#ffffff" size="18"></u-icon> <u-icon name="plus-circle" color="#ffffff" size="18"></u-icon>
<text class="btn-text">添加新收货人</text> <text class="btn-text">添加新收货人</text>
</view> </view>
</view> </view>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { onLoad, onShow, onPullDownRefresh } from '@dcloudio/uni-app' import { onLoad, onShow, onPullDownRefresh } from '@dcloudio/uni-app'
import { useStore } from '@/store' import { useStore } from '@/store'
import * as API_Trade from '@/api/trade' import * as API_Trade from '@/api/trade'
import * as API_Address from '@/api/address.js' import * as API_Address from '@/api/address.js'
const store = useStore() const store = useStore()
const addressList = ref<any[]>([]) const addressList = ref<any[]>([])
const routerVal = ref<Record<string, string>>({}) const routerVal = ref<Record<string, string>>({})
const params = { pageNumber: 1, pageSize: 1000 } const params = { pageNumber: 1, pageSize: 1000 }
onPullDownRefresh(() => { onPullDownRefresh(() => {
addressList.value = [] addressList.value = []
getAddressList() getAddressList()
}) })
onLoad((val) => { onLoad((val) => {
routerVal.value = val || {} routerVal.value = val || {}
}) })
onShow(() => { onShow(() => {
addressList.value = [] addressList.value = []
getAddressList() getAddressList()
}) })
function hideLoadingIfNeeded() { function hideLoadingIfNeeded() {
if (store.state.isShowToast) uni.hideLoading() if (store.state.isShowToast) uni.hideLoading()
} }
async function selectAddressData(val: any) { async function selectAddressData(val: any) {
await API_Trade.setAddressId(val.id, routerVal.value.way) await API_Trade.setAddressId(val.id, routerVal.value.way)
uni.navigateBack({ delta: 1 }) uni.navigateBack({ delta: 1 })
} }
function getAddressList() { function getAddressList() {
uni.showLoading() uni.showLoading()
API_Address.getAddressList(params.pageNumber, params.pageSize).then((res) => { API_Address.getAddressList(params.pageNumber, params.pageSize).then((res) => {
res.data.result.records.forEach((item: any) => { res.data.result.records.forEach((item: any) => {
item.consigneeAddressPath = item.consigneeAddressPath.split(',') item.consigneeAddressPath = item.consigneeAddressPath.split(',')
}) })
addressList.value = res.data.result.records addressList.value = res.data.result.records
hideLoadingIfNeeded() hideLoadingIfNeeded()
}) })
} }
function removeAddress(id: string) { function removeAddress(id: string) {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
content: '确定要删除该收货人信息吗?', content: '确定要删除该收货人信息吗?',
success: (res) => { success: (res) => {
if (!res.confirm) return if (!res.confirm) return
API_Address.deleteAddress(id).then((result) => { API_Address.deleteAddress(id).then((result) => {
if (result.statusCode == 200) { if (result.statusCode == 200) {
uni.showToast({ icon: 'none', title: '删除成功' }) uni.showToast({ icon: 'none', title: '删除成功' })
getAddressList() getAddressList()
} else { } else {
uni.showToast({ icon: 'none', title: result.data.message, duration: 2000 }) uni.showToast({ icon: 'none', title: result.data.message, duration: 2000 })
} }
}) })
}, },
}) })
} }
function addAddress(id: string) { function addAddress(id: string) {
if (id) { if (id) {
uni.navigateTo({ uni.navigateTo({
url: `/pages/mine/address/add?id=${id}&way=${routerVal.value.way}&type=order`, url: `/pages/mine/address/add?id=${id}&way=${routerVal.value.way}&type=order`,
}) })
} else { } else {
uni.navigateTo({ uni.navigateTo({
url: `/pages/mine/address/add?way=${routerVal.value.way}&type=order`, url: `/pages/mine/address/add?way=${routerVal.value.way}&type=order`,
}) })
} }
} }
function setDefault(item: any) { function setDefault(item: any) {
delete item.updateBy delete item.updateBy
delete item.updateTime delete item.updateTime
delete item.deleteFlag delete item.deleteFlag
if (!item.isDefault) item.isDefault = true if (!item.isDefault) item.isDefault = true
API_Address.editAddress(item).then(() => { API_Address.editAddress(item).then(() => {
uni.showToast({ title: '设置默认地址成功', icon: 'none' }) uni.showToast({ title: '设置默认地址成功', icon: 'none' })
getAddressList() getAddressList()
}) })
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./address.scss"; @import "./address.scss";
</style> </style>

View File

@@ -1,325 +1,325 @@
<template> <template>
<view class="myTracks"> <view class="myTracks">
<u-navbar <u-navbar
title="我的足迹" title="我的足迹"
:fixed="true" :fixed="true"
:placeholder="true" :placeholder="true"
:auto-back="true" :auto-back="true"
> >
<template #right> <template #right>
<view class="light-color edit" @click="isEdit = !isEdit">{{ !isEdit ? '编辑' : '完成'}}</view> <view class="light-color edit" @click="isEdit = !isEdit">{{ !isEdit ? '编辑' : '完成'}}</view>
</template> </template>
</u-navbar> </u-navbar>
<u-empty text="暂无历史记录" style="margin-top:200rpx;" mode="history" v-if="isEmpty"></u-empty> <u-empty text="暂无历史记录" style="margin-top:200rpx;" mode="history" v-if="isEmpty"></u-empty>
<view v-else class="tracks-list" :class="{ 'is-editing': isEdit }"> <view v-else class="tracks-list" :class="{ 'is-editing': isEdit }">
<u-swipe-action <u-swipe-action
v-for="(item, index) in trackList" v-for="(item, index) in trackList"
:key="item.id || index" :key="item.id || index"
class="myTracks-swipe" class="myTracks-swipe"
> >
<u-swipe-action-item <u-swipe-action-item
:show="item.show" :show="item.show"
:name="index" :name="index"
@click="deleteTracks" @click="deleteTracks"
@open="openSwipe" @open="openSwipe"
:options="swipeOptions" :options="swipeOptions"
> >
<view class="myTracks-item"> <view class="myTracks-item">
<u-checkbox-group v-if="isEdit" class="store-line-check"> <u-checkbox-group v-if="isEdit" class="store-line-check">
<u-checkbox <u-checkbox
usedAlone usedAlone
shape="circle" shape="circle"
:active-color="lightColor" :active-color="lightColor"
v-model:checked="item.checked" v-model:checked="item.checked"
@change="onTrackCheckChange(item)" @change="onTrackCheckChange(item)"
></u-checkbox> ></u-checkbox>
</u-checkbox-group> </u-checkbox-group>
<view class="myTracks-item-img" @click.stop="navigateToDetail(item)"> <view class="myTracks-item-img" @click.stop="navigateToDetail(item)">
<image v-if="item.thumbnail" class="track-thumb-img" mode="aspectFill" :src="item.thumbnail"></image> <image v-if="item.thumbnail" class="track-thumb-img" mode="aspectFill" :src="item.thumbnail"></image>
</view> </view>
<view class="myTracks-item-content" @click.stop="navigateToDetail(item)"> <view class="myTracks-item-content" @click.stop="navigateToDetail(item)">
<view class="myTracks-item-title">{{ item.goodsName }}</view> <view class="myTracks-item-title">{{ item.goodsName }}</view>
<view <view
v-if="getStoreName(item)" v-if="getStoreName(item)"
class="myTracks-item-store" class="myTracks-item-store"
@click.stop="navigateToStore(item)" @click.stop="navigateToStore(item)"
>{{ getStoreName(item) }}</view> >{{ getStoreName(item) }}</view>
<view class="myTracks-item-price">¥{{ unitPrice(item.price) }}</view> <view class="myTracks-item-price">¥{{ unitPrice(item.price) }}</view>
</view> </view>
</view> </view>
</u-swipe-action-item> </u-swipe-action-item>
</u-swipe-action> </u-swipe-action>
<view v-if="isEdit" class="submit" @click="deleteSelectedTracks">删除所选</view> <view v-if="isEdit" class="submit" @click="deleteSelectedTracks">删除所选</view>
</view> </view>
</view> </view>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed } from 'vue' import { ref, computed } from 'vue'
import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app' import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { useStore } from '@/store' import { useStore } from '@/store'
import { unitPrice } from '@/utils/filters.js' import { unitPrice } from '@/utils/filters.js'
import { myTrackList, deleteHistoryListId } from '@/api/members.js' import { myTrackList, deleteHistoryListId } from '@/api/members.js'
import { getStoreBaseInfo } from '@/api/store.js' import { getStoreBaseInfo } from '@/api/store.js'
const store = useStore() const store = useStore()
const lightColor = computed(() => store.getters.lightColor) const lightColor = computed(() => store.getters.lightColor)
const isEdit = ref(false) const isEdit = ref(false)
const isEmpty = ref(false) const isEmpty = ref(false)
const params = ref({ const params = ref({
pageNumber: 1, pageNumber: 1,
pageSize: 10, pageSize: 10,
order: 'desc', order: 'desc',
sort: 'updateTime', sort: 'updateTime',
}) })
const swipeOptions = [{ text: '删除', style: { backgroundColor: '#dd524d' } }] const swipeOptions = [{ text: '删除', style: { backgroundColor: '#dd524d' } }]
const trackList = ref<any[]>([]) const trackList = ref<any[]>([])
const storeNameMap = ref<Record<string, string>>({}) const storeNameMap = ref<Record<string, string>>({})
onReachBottom(() => { onReachBottom(() => {
params.value.pageNumber++ params.value.pageNumber++
fetchTrackList() fetchTrackList()
}) })
onShow(() => { onShow(() => {
params.value.pageNumber = 1 params.value.pageNumber = 1
trackList.value = [] trackList.value = []
fetchTrackList() fetchTrackList()
}) })
onPullDownRefresh(() => { onPullDownRefresh(() => {
params.value.pageNumber = 1 params.value.pageNumber = 1
trackList.value = [] trackList.value = []
fetchTrackList() fetchTrackList()
}) })
function getStoreName(item: any) { function getStoreName(item: any) {
return item.storeName || storeNameMap.value[item.storeId] || '' return item.storeName || storeNameMap.value[item.storeId] || ''
} }
async function enrichStoreNames(records: any[]) { async function enrichStoreNames(records: any[]) {
const storeIds = [ const storeIds = [
...new Set( ...new Set(
records records
.filter((item) => !item.storeName && item.storeId) .filter((item) => !item.storeName && item.storeId)
.map((item) => item.storeId) .map((item) => item.storeId)
), ),
].filter((storeId) => !storeNameMap.value[storeId]) ].filter((storeId) => !storeNameMap.value[storeId])
await Promise.all( await Promise.all(
storeIds.map(async (storeId) => { storeIds.map(async (storeId) => {
try { try {
const res = await getStoreBaseInfo(storeId) const res = await getStoreBaseInfo(storeId)
const name = res.data?.result?.storeName const name = res.data?.result?.storeName
if (name) { if (name) {
storeNameMap.value[storeId] = name storeNameMap.value[storeId] = name
} }
} catch { } catch {
// ignore // ignore
} }
}) })
) )
} }
function onTrackCheckChange(_val: any) { function onTrackCheckChange(_val: any) {
// 勾选状态由 v-model:checked 维护 // 勾选状态由 v-model:checked 维护
} }
function deleteSelectedTracks() { function deleteSelectedTracks() {
const ids = trackList.value.filter((item) => item.checked).map((item) => item.goodsId) const ids = trackList.value.filter((item) => item.checked).map((item) => item.goodsId)
if (!ids.length) { if (!ids.length) {
uni.showToast({ title: '请选择删除数据', icon: 'none' }) uni.showToast({ title: '请选择删除数据', icon: 'none' })
return return
} }
deleteTracks(0, ids) deleteTracks(0, ids)
} }
function navigateToStore(val: any) { function navigateToStore(val: any) {
uni.navigateTo({ url: `/pages/product/shopPage?id=${val.storeId}` }) uni.navigateTo({ url: `/pages/product/shopPage?id=${val.storeId}` })
} }
function openSwipe(index: number) { function openSwipe(index: number) {
trackList.value[index].show = true trackList.value[index].show = true
trackList.value.forEach((val, idx) => { trackList.value.forEach((val, idx) => {
if (index !== idx) val.show = false if (index !== idx) val.show = false
}) })
} }
function navigateToDetail(item: any) { function navigateToDetail(item: any) {
uni.navigateTo({ uni.navigateTo({
url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`, url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
}) })
} }
function fetchTrackList() { function fetchTrackList() {
uni.showLoading({ title: '加载中' }) uni.showLoading({ title: '加载中' })
myTrackList(params.value).then(async (res) => { myTrackList(params.value).then(async (res) => {
uni.stopPullDownRefresh() uni.stopPullDownRefresh()
uni.hideLoading() uni.hideLoading()
if (res.statusCode === 200) { if (res.statusCode === 200) {
const records = res.data.result.records || [] const records = res.data.result.records || []
records.forEach((item: any) => { records.forEach((item: any) => {
item.show = false item.show = false
item.checked = false item.checked = false
}) })
if (!records.length) { if (!records.length) {
if (trackList.value.length === 0) { if (trackList.value.length === 0) {
isEmpty.value = true isEmpty.value = true
} }
} else { } else {
isEmpty.value = false isEmpty.value = false
await enrichStoreNames(records) await enrichStoreNames(records)
trackList.value.push(...records) trackList.value.push(...records)
} }
} }
}) })
} }
function deleteTracks(e: any, ids?: any) { function deleteTracks(e: any, ids?: any) {
const index = typeof e === 'object' ? (e.name != null ? e.name : e.index) : e const index = typeof e === 'object' ? (e.name != null ? e.name : e.index) : e
const goodsId = ids || trackList.value[index]?.goodsId const goodsId = ids || trackList.value[index]?.goodsId
if (!goodsId) return if (!goodsId) return
deleteHistoryListId(goodsId).then((res) => { deleteHistoryListId(goodsId).then((res) => {
if (res.data.code === 200) { if (res.data.code === 200) {
trackList.value = [] trackList.value = []
params.value.pageNumber = 1 params.value.pageNumber = 1
fetchTrackList() fetchTrackList()
} else { } else {
uni.showToast({ uni.showToast({
title: res.data.message, title: res.data.message,
duration: 2000, duration: 2000,
icon: 'none', icon: 'none',
}) })
} }
}) })
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.submit { .submit {
position: fixed; position: fixed;
bottom: calc(20rpx + constant(safe-area-inset-bottom)); bottom: calc(20rpx + constant(safe-area-inset-bottom));
bottom: calc(20rpx + env(safe-area-inset-bottom)); bottom: calc(20rpx + env(safe-area-inset-bottom));
left: 10%; left: 10%;
width: 80%; width: 80%;
height: 80rpx; height: 80rpx;
color: #fff; color: #fff;
border-radius: 100px; border-radius: 100px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: $light-color; background: $light-color;
z-index: 99; z-index: 99;
} }
.myTracks { .myTracks {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
background: #f5f5f5; background: #f5f5f5;
padding-top: 2rpx; padding-top: 2rpx;
box-sizing: border-box; box-sizing: border-box;
} }
.tracks-list { .tracks-list {
padding: 20rpx 24rpx 40rpx; padding: 20rpx 24rpx 40rpx;
box-sizing: border-box; box-sizing: border-box;
&.is-editing { &.is-editing {
padding-bottom: calc(140rpx + constant(safe-area-inset-bottom)); padding-bottom: calc(140rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(140rpx + env(safe-area-inset-bottom)); padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
} }
} }
.myTracks-swipe { .myTracks-swipe {
display: block; display: block;
margin-bottom: 20rpx; margin-bottom: 20rpx;
border-radius: 16rpx; border-radius: 16rpx;
overflow: hidden; overflow: hidden;
background: #fff; background: #fff;
} }
:deep(.u-swipe-action), :deep(.u-swipe-action),
:deep(.u-swipe-action-item), :deep(.u-swipe-action-item),
:deep(.u-swipe-action-item__content) { :deep(.u-swipe-action-item__content) {
width: 100%; width: 100%;
} }
:deep(.u-swipe-action-item__content) { :deep(.u-swipe-action-item__content) {
overflow: hidden; overflow: hidden;
background: #fff; background: #fff;
} }
.myTracks-item { .myTracks-item {
width: 100%; width: 100%;
padding: 24rpx; padding: 24rpx;
background-color: #fff; background-color: #fff;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.store-line-check { .store-line-check {
margin-right: 16rpx; margin-right: 16rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.myTracks-item-img { .myTracks-item-img {
width: 160rpx; width: 160rpx;
height: 160rpx; height: 160rpx;
margin-right: 20rpx; margin-right: 20rpx;
flex-shrink: 0; flex-shrink: 0;
border-radius: 12rpx; border-radius: 12rpx;
background: #f3f4f6; background: #f3f4f6;
overflow: hidden; overflow: hidden;
.track-thumb-img { .track-thumb-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
} }
} }
.myTracks-item-content { .myTracks-item-content {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
min-height: 160rpx; min-height: 160rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
} }
.myTracks-item-title { .myTracks-item-title {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
line-height: 1.4; line-height: 1.4;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
overflow: hidden; overflow: hidden;
} }
.myTracks-item-store { .myTracks-item-store {
margin-top: 8rpx; margin-top: 8rpx;
font-size: 24rpx; font-size: 24rpx;
color: #999; color: #999;
line-height: 1.4; line-height: 1.4;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.myTracks-item-price { .myTracks-item-price {
margin-top: 12rpx; margin-top: 12rpx;
font-size: 32rpx; font-size: 32rpx;
font-weight: 600; font-weight: 600;
color: $light-color; color: $light-color;
line-height: 1.2; line-height: 1.2;
} }
.edit { .edit {
padding-right: 32rpx; padding-right: 32rpx;
} }
</style> </style>