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

@@ -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 {

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 })
}
})
},
})
}

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 })
}
})
},
})
}

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>>({})