code-image-backup-public/lilishop-uniapp
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git synced 2026-11-13 04:18:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 更新购物车页面，增强商品展示与交互体验。
- 调整订单页面的状态反馈与用户操作逻辑，确保信息清晰。
- 改进组件样式与布局，提升整体用户体验。
- 修复多个页面中的样式与功能问题，确保一致性与流畅性。
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
Download Patch File Download Diff File Expand all files Collapse all files

22
pages/mine/address/address.scss
View File

@@ -20,6 +20,9 @@
padding: 2rpx 20rpx;
}
.list {
padding-bottom: calc(140rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
.item:hover {
background: #ededed;
}
@@ -115,21 +118,28 @@
}
}
.btn-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
padding: 20rpx 30rpx calc(20rpx + constant(safe-area-inset-bottom));
padding: 20rpx 30rpx calc(20rpx + env(safe-area-inset-bottom));
background: $page-color-base;
box-sizing: border-box;
}
.btn {
background: $light-color;
position: fixed;
width: 690rpx;
bottom: calc(60rpx + constant(safe-area-inset-bottom));
bottom: calc(60rpx + env(safe-area-inset-bottom));
width: 100%;
height: 80rpx;
left: 30rpx;
font-size: 30rpx;
color: #fff;
border-radius: 40rpx;
display: flex;
align-items: center;
justify-content: center;
z-index: 99;
overflow: hidden;
.btn-text {

35
pages/mine/address/address.vue
View File

@@ -27,8 +27,8 @@
<view class="relative">
<view class="alifont icon-bianji-copy"></view>
<text class="mr-40" @click="addAddress(item.id)">编辑</text>
<view class="alifont icon-lajitong"></view>
<text @click="removeAddress(item.id)">删除</text>
<view class="alifont icon-lajitong" @click.stop="removeAddress(item.id)"></view>
<text @click.stop="removeAddress(item.id)">删除</text>
</view>
</view>
</view>
@@ -38,7 +38,6 @@
<u-icon name="plus-circle" color="#ffffff" size="18"></u-icon>
<text class="btn-text">添加新收货人</text>
</view>
<u-action-sheet :list="removeList" :tips="tips" v-model:show="showAction" @click="deleteAddressMessage"></u-action-sheet>
</view>
</template>
@@ -52,10 +51,6 @@ import * as API_Address from '@/api/address.js'
const store = useStore()
const addressList = ref<any[]>([])
const showAction = ref(false)
const removeList = [{ text: '确定' }]
const tips = { text: '确定要删除该收货人信息吗？' }
const removeId = ref('')
const routerVal = ref<Record<string, string>>({})
const params = { pageNumber: 1, pageSize: 1000 }
@@ -94,18 +89,20 @@ function getAddressList() {
}
function removeAddress(id: string) {
removeId.value = id
showAction.value = true
}
function deleteAddressMessage() {
API_Address.deleteAddress(removeId.value).then((res) => {
if (res.statusCode == 200) {
uni.showToast({ icon: 'none', title: '删除成功' })
getAddressList()
} else {
uni.showToast({ icon: 'none', title: res.data.message, duration: 2000 })
}
uni.showModal({
title: '提示',
content: '确定要删除该收货人信息吗？',
success: (res) => {
if (!res.confirm) return
API_Address.deleteAddress(id).then((result) => {
if (result.statusCode == 200) {
uni.showToast({ icon: 'none', title: '删除成功' })
getAddressList()
} else {
uni.showToast({ icon: 'none', title: result.data.message, duration: 2000 })
}
})
},
})
}

45
pages/mine/address/addressManage.vue
View File

@@ -26,20 +26,19 @@
<view class="relative">
<view class="alifont icon-bianji-copy"></view>
<text class="mr-40" @click="addAddress(item.id)">编辑</text>
<view class="alifont icon-lajitong"></view>
<text @click="removeAddress(item.id)">删除</text>
<view class="alifont icon-lajitong" @click.stop="removeAddress(item.id)"></view>
<text @click.stop="removeAddress(item.id)">删除</text>
</view>
</view>
</view>
<view style="height: 100px"></view>
</view>
<view class="btn" @click="addAddress('')">
<u-icon name="plus-circle" color="#ffffff" size="18"></u-icon>
<text class="btn-text">添加新收货人</text>
<view class="btn-bar">
<view class="btn" @click="addAddress('')">
<u-icon name="plus-circle" color="#ffffff" size="18"></u-icon>
<text class="btn-text">添加新收货人</text>
</view>
</view>
<u-action-sheet :list="removeList" :tips="tips" v-model:show="showAction" @click="deleteAddressMessage"></u-action-sheet>
</view>
</template>
@@ -53,10 +52,6 @@ import * as API_Address from '@/api/address.js'
const store = useStore()
const addressList = ref<any[]>([])
const showAction = ref(false)
const removeList = [{ text: '确定' }]
const tips = { text: '确定要删除该收货人信息吗？' }
const removeId = ref('')
const routerVal = ref<Record<string, string>>({})
const params = { pageNumber: 1, pageSize: 1000 }
@@ -96,18 +91,20 @@ function getAddressList() {
}
function removeAddress(id: string) {
removeId.value = id
showAction.value = true
}
function deleteAddressMessage() {
API_Address.deleteAddress(removeId.value).then((res) => {
if (res.statusCode == 200) {
uni.showToast({ icon: 'none', title: '删除成功' })
getAddressList()
} else {
uni.showToast({ icon: 'none', title: res.data.message, duration: 2000 })
}
uni.showModal({
title: '提示',
content: '确定要删除该收货人信息吗？',
success: (res) => {
if (!res.confirm) return
API_Address.deleteAddress(id).then((result) => {
if (result.statusCode == 200) {
uni.showToast({ icon: 'none', title: '删除成功' })
getAddressList()
} else {
uni.showToast({ icon: 'none', title: result.data.message, duration: 2000 })
}
})
},
})
}

10
pages/mine/address/storeAddress.vue
View File

@@ -16,7 +16,13 @@
</view>
<view style="height: 100px"></view>
</view>
<u-action-sheet :list="removeList" :tips="tips" v-model:show="showAction" @click="deleteAddressMessage"></u-action-sheet>
<u-action-sheet
:actions="removeList"
:description="tips.text"
cancel-text="取消"
v-model:show="showAction"
@select="deleteAddressMessage"
></u-action-sheet>
</view>
</template>
@@ -31,7 +37,7 @@ const store = useStore()
const storeAddressList = ref<any[]>([])
const showAction = ref(false)
const removeList = [{ text: '确定' }]
const removeList = [{ name: '确定' }]
const tips = { text: '确定要删除该收货人信息吗？' }
const removeId = ref('')
const routerVal = ref<Record<string, string>>({})

177
pages/mine/myTracks.vue
View File

@@ -10,55 +10,46 @@
<view class="light-color edit" @click="isEdit = !isEdit">{{ !isEdit ? '编辑' : '完成'}}</view>
</template>
</u-navbar>
<view class="tracks-tip">
<u-icon name="volume" color="#f9ae3d" size="19"></u-icon>
<text class="tracks-tip-text">右划删除浏览记录</text>
</view>
<u-empty text="暂无历史记录" style="margin-top:200rpx;" mode="history" v-if="isEmpty"></u-empty>
<view v-else class="tracks-list">
<block v-for="(item, index) in trackList" :key="index">
<view
class="myTracks-title"
v-if="getStoreName(item)"
@click="navigateToStore(item)"
>{{ getStoreName(item) }}</view>
<u-swipe-action class="myTracks-swipe">
<u-swipe-action-item
:show="item.show"
:name="index"
@click="deleteTracks"
@open="openSwipe"
:options="swipeOptions"
>
<view class="myTracks-item">
<u-checkbox-group v-if="isEdit" class="store-line-check">
<u-checkbox
usedAlone
shape="circle"
:active-color="lightColor"
v-model:checked="item.checked"
@change="onTrackCheckChange(item)"
></u-checkbox>
</u-checkbox-group>
<view class="myTracks-item-img" @click.stop="navigateToDetail(item)">
<image class="track-thumb" :src="item.thumbnail"></image>
</view>
<view class="myTracks-item-content" @click.stop="navigateToDetail(item)">
<view class="myTracks-item-title">
{{ item.goodsName }}
</view>
<view class="myTracks-item-price">
￥{{ unitPrice(item.price) }}
</view>
</view>
<view v-else class="tracks-list" :class="{ 'is-editing': isEdit }">
<u-swipe-action
v-for="(item, index) in trackList"
:key="item.id || index"
class="myTracks-swipe"
>
<u-swipe-action-item
:show="item.show"
:name="index"
@click="deleteTracks"
@open="openSwipe"
:options="swipeOptions"
>
<view class="myTracks-item">
<u-checkbox-group v-if="isEdit" class="store-line-check">
<u-checkbox
usedAlone
shape="circle"
:active-color="lightColor"
v-model:checked="item.checked"
@change="onTrackCheckChange(item)"
></u-checkbox>
</u-checkbox-group>
<view class="myTracks-item-img" @click.stop="navigateToDetail(item)">
<image v-if="item.thumbnail" class="track-thumb-img" mode="aspectFill" :src="item.thumbnail"></image>
</view>
</u-swipe-action-item>
</u-swipe-action>
<view class="myTracks-divider"></view>
</block>
<view v-if="isEdit" class="submit" @click="deleteSelectedTracks">
删除所选
</view>
<view class="myTracks-item-content" @click.stop="navigateToDetail(item)">
<view class="myTracks-item-title">{{ item.goodsName }}</view>
<view
v-if="getStoreName(item)"
class="myTracks-item-store"
@click.stop="navigateToStore(item)"
>{{ getStoreName(item) }}</view>
<view class="myTracks-item-price">￥{{ unitPrice(item.price) }}</view>
</view>
</view>
</u-swipe-action-item>
</u-swipe-action>
<view v-if="isEdit" class="submit" @click="deleteSelectedTracks">删除所选</view>
</view>
</view>
@@ -226,28 +217,30 @@ function deleteTracks(e: any, ids?: any) {
.myTracks {
width: 100%;
min-height: 100vh;
background: #f5f5f5;
padding-top: 2rpx;
}
.tracks-tip {
display: flex;
align-items: center;
padding: 18rpx 24rpx;
background: #fdf6ec;
}
.tracks-tip-text {
margin-left: 10rpx;
font-size: 28rpx;
color: #f9ae3d;
line-height: 1.4;
box-sizing: border-box;
}
.tracks-list {
width: 100%;
padding: 20rpx 24rpx 40rpx;
box-sizing: border-box;
&.is-editing {
padding-bottom: calc(140rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
}
}
.myTracks-swipe {
display: block;
margin-bottom: 20rpx;
border-radius: 16rpx;
overflow: hidden;
background: #fff;
}
.myTracks-swipe,
:deep(.u-swipe-action),
:deep(.u-swipe-action-item),
:deep(.u-swipe-action-item__content) {
@@ -256,25 +249,12 @@ function deleteTracks(e: any, ids?: any) {
:deep(.u-swipe-action-item__content) {
overflow: hidden;
}
.myTracks-title {
width: 100%;
height: 110rpx;
padding: 0 20rpx;
font-size: 28rpx;
color: #666;
font-weight: bold;
background-color: #fff;
display: flex;
align-items: center;
box-sizing: border-box;
background: #fff;
}
.myTracks-item {
width: 100%;
min-height: 226rpx;
padding: 30rpx 20rpx;
padding: 24rpx;
background-color: #fff;
box-sizing: border-box;
display: flex;
@@ -287,13 +267,17 @@ function deleteTracks(e: any, ids?: any) {
}
.myTracks-item-img {
width: 160rpx;
height: 160rpx;
margin-right: 20rpx;
flex-shrink: 0;
border-radius: 12rpx;
background: #f3f4f6;
overflow: hidden;
.track-thumb {
width: 130rpx;
height: 130rpx;
border-radius: 8rpx;
.track-thumb-img {
width: 100%;
height: 100%;
display: block;
}
}
@@ -301,27 +285,38 @@ function deleteTracks(e: any, ids?: any) {
.myTracks-item-content {
flex: 1;
min-width: 0;
min-height: 160rpx;
display: flex;
flex-direction: column;
justify-content: center;
justify-content: space-between;
}
.myTracks-item-title {
font-size: 28rpx;
color: #333;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.myTracks-item-store {
margin-top: 8rpx;
font-size: 24rpx;
color: #999;
line-height: 1.4;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.myTracks-item-price {
font-size: 28rpx;
margin-top: 12rpx;
font-size: 32rpx;
font-weight: 600;
color: $light-color;
padding-top: 10rpx;
}
.myTracks-divider {
width: 100%;
height: 20rpx;
background: #f5f5f5;
line-height: 1.2;
}
.edit {

66
pages/mine/set/personMsg.vue
View File

@@ -56,7 +56,6 @@
<view class="bottom">
<view class="submit" @click="submit">保存</view>
<view class="submit light" @click="quiteLoginOut">退出登录</view>
</view>
<u-datetime-picker
@@ -84,7 +83,6 @@
import { ref, reactive, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useStore } from '@/store'
import { quiteLoginOut } from '@/utils/filters.js'
import { saveUserInfo } from '@/api/members.js'
import { upload } from '@/api/common.js'
import storage from '@/utils/storage.js'
@@ -211,31 +209,40 @@ onShow(() => {
})
</script>
<style lang="scss" scoped>
<style lang="scss">
page {
background: #fff;
background: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.person-msg {
min-height: 100vh;
background: #fff;
padding-bottom: 180rpx;
background: #f5f5f5;
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
box-sizing: border-box;
}
.head {
padding: 40rpx 0 20rpx;
color: $font-color-light;
font-size: $font-sm;
margin-bottom: 20rpx;
padding: 48rpx 0 32rpx;
background: #fff;
color: #999;
font-size: 24rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 2em;
image {
width: 144rpx;
height: 144rpx;
border-radius: 50%;
background: #f3f4f6;
}
view {
margin-top: 16rpx;
line-height: 1.4;
}
}
@@ -244,13 +251,13 @@ page {
}
:deep(.u-form-item) {
padding: 0 30rpx;
min-height: 100rpx;
padding: 0 32rpx;
}
:deep(.u-form-item__body) {
min-height: 100rpx;
min-height: 108rpx;
align-items: center;
padding: 16rpx 0 !important;
}
:deep(.u-form-item__body__left__content__label) {
@@ -258,8 +265,13 @@ page {
color: #333;
}
:deep(.u-form-item__body__right) {
min-width: 0;
}
:deep(.u-form-item__body__right__content__slot) {
flex: 1;
min-width: 0;
display: flex;
justify-content: flex-end;
align-items: center;
@@ -271,7 +283,8 @@ page {
:deep(.u-input__content__field-wrapper__field) {
font-size: 28rpx !important;
color: #666 !important;
color: #333 !important;
text-align: right;
}
.sex-row {
@@ -288,16 +301,20 @@ page {
.form-value {
width: 100%;
min-width: 0;
text-align: right;
font-size: 28rpx;
color: #666;
color: #333;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.bind-mobile {
width: 100%;
text-align: right;
font-size: 28rpx;
color: $main-color;
color: $light-color;
}
.bottom {
@@ -307,10 +324,10 @@ page {
bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 24rpx 30rpx calc(24rpx + env(safe-area-inset-bottom));
padding: 16rpx 32rpx calc(16rpx + env(safe-area-inset-bottom));
background: #fff;
box-sizing: border-box;
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.submit {
@@ -318,18 +335,9 @@ page {
height: 80rpx;
line-height: 80rpx;
text-align: center;
border-radius: 100px;
border-radius: 40rpx;
font-size: 30rpx;
background: $light-color;
color: #fff;
}
.submit + .submit {
margin-left: 24rpx;
}
.light {
background: rgba($color: $light-color, $alpha: 0.2) !important;
color: $light-color !important;
}
</style>