charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat：评价区改造

Browse Source
This commit is contained in:
charles
2026-08-06 18:50:25 +08:00
parent 8225be60c6
commit aa20d121f7
13 changed files with 3323 additions and 1325 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/mine_package/mine_address/mine_address.vue
+366 -74
View File
@@ -1,34 +1,117 @@
<template>
<view class="mine_address_warp">
<Header :leftTitle="$t('address.title')" left-path-type="switchTab" left-path="/pages/mine/mine" />
<view v-for="item in addressList" :key="item.id" class="address_item"
v-if="addressList && addressList.length !== 0">
<view class="address_item_info">
<view>{{ item.name }}</view>
<view style="margin-left: 20rpx;">{{ item.phone }}</view>
</view>
<view class="address_item_address">
{{ item.countryName }} {{ item.provinceName }} {{ item.cityName }} {{ item.areaName }} {{
item.townshipName }} {{ item.address }}
</view>
<view class="address_operate">
<up-checkbox :customStyle="{}" label="已默认" name="agree" usedAlone :checked="item.isDefault"
shape="circle" activeColor="#FF7C41" @change="isDefaultChange(item)">
</up-checkbox>
<view class="operate_item">
<view class="operate_" @click="deleteAddressFun(item)">删除</view>
<view class="operate_" @click="updateAddress(item)">修改</view>
<view class="mine_address_page">
<!-- 顶部导航栏 (白色底) -->
<view class="header_box">
<Header :leftTitle="headerTitle" leftPath="1" />
</view>
<!-- 页面内容容器 -->
<view class="content_container">
<!-- ===== 样式2 (moduleType == 2): 展示原地址卡片 + 选择新的收货地址卡片 ===== -->
<template v-if="moduleType == 2 || moduleType == '2'">
<!-- 原地址卡片 -->
<view v-if="currentOriginalAddress" class="card_wrapper">
<view class="card_header">
<text class="card_title">原地址</text>
</view>
<view class="address_item original_item">
<view class="address_info">
<text class="name">{{ currentOriginalAddress.name }}</text>
<text class="phone">{{ currentOriginalAddress.phone }}</text>
</view>
<view class="address_detail">
{{ formatAddress(currentOriginalAddress) }}
</view>
</view>
</view>
<!-- 选择新的收货地址卡片 -->
<view class="card_wrapper">
<view class="card_header">
<text class="card_title">选择新的收货地址</text>
</view>
<view v-if="addressList && addressList.length > 0" class="address_list">
<view
v-for="(item, index) in addressList"
:key="item.id || index"
class="address_item"
:class="{ 'border_bottom': index !== addressList.length - 1 }"
@click="selectAddress(item)"
>
<view class="address_info">
<text class="name">{{ item.name }}</text>
<text class="phone">{{ item.phone }}</text>
</view>
<view class="address_detail">
{{ formatAddress(item) }}
</view>
<view class="address_operate">
<view class="default_check" @click.stop="isDefaultChange(item)">
<view class="check_icon" :class="{ checked: isItemDefault(item) }">
<text v-if="isItemDefault(item)" class="check_mark">✓</text>
</view>
<text class="check_label">已默认</text>
</view>
<view class="operate_btns">
<view class="btn_item" @click.stop="deleteAddressFun(item)">删除</view>
<view class="btn_item" @click.stop="updateAddress(item)">修改</view>
</view>
</view>
</view>
</view>
<!-- 暂无地址 -->
<view v-else class="empty_wrapper">
<image src="/pages/other_package/static/not_search.png" class="empty_img" mode="aspectFit" />
<text class="empty_text">暂无地址，快去添加吧~</text>
</view>
</view>
</template>
<!-- ===== 样式1 (moduleType == 1 / 默认): 单卡片列表 ===== -->
<template v-else>
<view v-if="addressList && addressList.length > 0" class="card_wrapper">
<view
v-for="(item, index) in addressList"
:key="item.id || index"
class="address_item"
:class="{ 'border_bottom': index !== addressList.length - 1 }"
>
<view class="address_info">
<text class="name">{{ item.name }}</text>
<text class="phone">{{ item.phone }}</text>
</view>
<view class="address_detail">
{{ formatAddress(item) }}
</view>
<view class="address_operate">
<view class="default_check" @click.stop="isDefaultChange(item)">
<view class="check_icon" :class="{ checked: isItemDefault(item) }">
<text v-if="isItemDefault(item)" class="check_mark">✓</text>
</view>
<text class="check_label">已默认</text>
</view>
<view class="operate_btns">
<view class="btn_item" @click.stop="deleteAddressFun(item)">删除</view>
<view class="btn_item" @click.stop="updateAddress(item)">修改</view>
</view>
</view>
</view>
</view>
<!-- 暂无地址 -->
<view v-else class="empty_wrapper">
<image src="/pages/other_package/static/not_search.png" class="empty_img" mode="aspectFit" />
<text class="empty_text">暂无地址，快去添加吧~</text>
</view>
</template>
</view>
<!-- 底部固定新增按钮 -->
<view class="bottom_btn_bar">
<view class="add_btn" @click="jumpAddAddress">
新增地址
</view>
</view>
<view v-else class="not_order_warp">
<view class="not_order_warp_img"><up-image src="/pages/other_package/static/not_search.png" width="100" height="100"
bgColor="#f1f6ff00"></up-image></view>
<view class="not_order_msg_warp">暂无地址，快去添加吧~</view>
</view>
<view class="add_but" @click="jumpAddAddress">
新增地址
</view>
</view>
</template>
@@ -37,61 +120,121 @@ import { getAddress, setAddressDefault, deleteAddress } from '@/api/address.js';
import Header from '@/components/header.vue';
export default {
components: { Header },
data() {
return {
addressList: [],
options: [
{ text: '删除' }
]
moduleType: '1', // 1: 图一模式 (默认), 2: 图二模式
originalId: '',
passedOriginalAddress: null,
addressList: []
};
},
computed: {
headerTitle() {
if (this.$t && typeof this.$t === 'function') {
try {
const title = this.$t('address.title');
if (title && title !== 'address.title') return title;
} catch (e) {}
}
return '地址管理';
},
currentOriginalAddress() {
if (this.passedOriginalAddress) {
return this.passedOriginalAddress;
}
if (this.originalId && this.addressList && this.addressList.length > 0) {
const found = this.addressList.find(item => String(item.id) === String(this.originalId));
if (found) return found;
}
if (this.addressList && this.addressList.length > 0) {
const defaultItem = this.addressList.find(item => this.isItemDefault(item));
return defaultItem || this.addressList[0];
}
return null;
}
},
onLoad(options) {
if (options) {
const typeVal = options.moduleType || options.type || options.mode || options.style || options.pageType || '1';
this.moduleType = String(typeVal);
if (options.originalId || options.addressId || options.id) {
this.originalId = options.originalId || options.addressId || options.id;
}
if (options.originalAddress) {
try {
this.passedOriginalAddress = JSON.parse(decodeURIComponent(options.originalAddress));
} catch (e) {
console.error('Parse originalAddress error:', e);
}
}
}
},
components: { Header },
onShow() {
this.getAddressList();
},
methods: {
// 格式化完整地址显示
formatAddress(item) {
if (!item) return '';
const parts = [
item.countryName,
item.provinceName,
item.cityName,
item.areaName,
item.townshipName,
item.address
].filter(Boolean);
return parts.join(' ') || item.address || '';
},
// 判断是否为默认地址
isItemDefault(item) {
if (!item) return false;
return item.isDefault === true || item.isDefault === 1 || item.isDefault === '1';
},
// 添加地址
jumpAddAddress() {
uni.navigateTo({
url: '/pages/mine_package/mine_address_add/mine_address_add',
})
url: '/pages/mine_package/mine_address_add/mine_address_add'
});
},
// 查询地址
// 查询地址列表
async getAddressList() {
const res = await getAddress();
if (res && res.bizcode === 100) {
this.addressList = res.data;
this.addressList = res.data || [];
}
},
// 设为默认地址
async isDefaultChange(item) {
const params = {
id: item.id,
}
id: item.id
};
const res = await setAddressDefault(params);
if (res && res.bizcode === 100) {
this.getAddressList();
}
},
// 删除地址
// 删除地址确认
deleteAddressFun(item) {
const then = this;
const that = this;
uni.showModal({
title: '提示',
content: '是否要删除该地址？',
success: function (res) {
if (res.confirm) {
then.deleteAddress(item);
that.deleteAddress(item);
}
}
});
},
// 删除的方法
// 执行删除
async deleteAddress(item) {
const params = {
id: item.id,
}
id: item.id
};
const respon = await deleteAddress(params);
if (respon && respon.bizcode === 100) {
this.getAddressList();
@@ -100,59 +243,208 @@ export default {
// 修改地址
updateAddress(item) {
uni.navigateTo({
url: '/pages/mine_package/mine_address_add/mine_address_add?id=' + item.id,
})
url: '/pages/mine_package/mine_address_add/mine_address_add?id=' + item.id
});
},
// 选择地址（针对模式2）
selectAddress(item) {
uni.$emit('selectAddress', item);
if (this.moduleType == 2 || this.moduleType == '2') {
uni.navigateBack({
fail: () => {}
});
}
}
}
}
};
</script>
<style lang="scss" scoped>
.mine_address_warp {
height: calc(100vh - 188rpx);
overflow-y: auto;
.mine_address_page {
min-height: 100vh;
background-color: $app-bj;
padding: 30rpx;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.header_box {
background-color: #FFFFFF;
position: sticky;
top: 0;
z-index: 99;
::v-deep .header_ {
background-color: #FFFFFF;
}
}
.content_container {
padding: 24rpx;
padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
flex: 1;
}
.card_wrapper {
background: #FFFFFF;
border-radius: 24rpx;
padding: 0 30rpx;
margin-bottom: 24rpx;
overflow: hidden;
}
.card_header {
padding: 24rpx 0 20rpx;
border-bottom: 1rpx solid #F0F0F0;
.card_title {
font-size: 28rpx;
color: #888888;
font-weight: 400;
}
}
.address_item {
background: #FFFFFF;
border-radius: 24rpx;
padding: 30rpx;
margin-bottom: 30rpx;
padding: 30rpx 0;
&.border_bottom {
border-bottom: 1rpx solid #F0F0F0;
}
&.original_item {
padding: 24rpx 0 30rpx;
}
}
.address_item_info {
font-weight: bold;
font-size: 32rpx;
color: #222222;
.address_info {
display: flex;
align-items: center;
.name {
font-size: 28rpx;
color: #333333;
font-weight: 400;
}
.phone {
font-size: 28rpx;
color: #333333;
margin-left: 20rpx;
font-weight: 400;
}
}
.address_item_address {
font-weight: 500;
font-size: 26rpx;
color: #666666;
margin-top: 10rpx;
.address_detail {
font-size: 32rpx;
font-weight: 600;
color: #1A1A1A;
margin-top: 12rpx;
line-height: 1.4;
word-break: break-all;
}
.address_operate {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 30rpx;
margin-top: 24rpx;
}
.operate_item {
.default_check {
display: flex;
align-items: center;
.check_icon {
width: 36rpx;
height: 36rpx;
border-radius: 50%;
border: 2rpx solid #CCCCCC;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12rpx;
box-sizing: border-box;
transition: all 0.2s ease;
&.checked {
background: linear-gradient(135deg, #9747FF 0%, #7934F6 100%);
border-color: #7934F6;
}
.check_mark {
color: #FFFFFF;
font-size: 22rpx;
font-weight: bold;
line-height: 1;
}
}
.check_label {
font-size: 26rpx;
color: #333333;
}
}
.operate_ {
padding: 10rpx 30rpx;
background: #F3F3F3;
border-radius: 25rpx;
font-size: 24rpx;
color: #222222;
margin-left: 20rpx;
.operate_btns {
display: flex;
align-items: center;
.btn_item {
padding: 10rpx 28rpx;
background: #F3F3F5;
border-radius: 30rpx;
font-size: 24rpx;
color: #333333;
margin-left: 16rpx;
line-height: 1.2;
display: flex;
align-items: center;
justify-content: center;
}
}
.empty_wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100rpx 0;
.empty_img {
width: 200rpx;
height: 200rpx;
}
.empty_text {
margin-top: 20rpx;
font-size: 28rpx;
color: #999999;
}
}
.bottom_btn_bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #F5F5F5;
padding: 20rpx 30rpx;
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
z-index: 100;
box-sizing: border-box;
.add_btn {
height: 88rpx;
background: linear-gradient(90deg, #8A38F5 0%, #A855F7 100%);
border-radius: 16rpx;
color: #FFFFFF;
font-size: 32rpx;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 12rpx rgba(121, 52, 246, 0.25);
}
}
</style>
pages/mine_package/mine_order/mine_order.vue
+72 -3
View File
@@ -99,7 +99,7 @@
<view>共{{ item.buyNum }}件,合计￥{{ item.sumAmount }}</view>
</view> -->
<view class="collect_msg" v-if="item.buyDeductionValue">共{{ item.buyNum }}件,合计数字积分{{ item.buyDeductionValue
}}
}}
+￥{{ item.sumAmount }}</view>
<view class="collect_msg" v-if="!item.buyDeductionValue">运费:￥{{ item.postage }},商品总价:￥{{ item.sumAmount }}
</view>
@@ -133,6 +133,14 @@
查看售后
</view>
<!-- 修改地址按钮 (待发货/待收货状态) -->
<view class="operate_comm operate_but_3" v-if="
([MINE_ORDER_TYPE.UNSHIPPED, MINE_ORDER_TYPE.NOT_RECEIVE].includes(form.type) ||
[ORDER_TYPE.UNSHIPPED, ORDER_TYPE.NOT_RECEIVE].includes(item.status)) && item.modifyShippingAddressStatus == 0
" @click="changeOrderAddress(item)">
修改地址
</view>
<view :class="[
'operate_comm',
form.type === MINE_ORDER_TYPE.UNPAID
@@ -141,7 +149,7 @@
]" v-if="!item.isAfter && form.type !== MINE_ORDER_TYPE.AFTER_SALE && item.status !== 5"
@click="onSaleAfter(item)">
{{
form.type === MINE_ORDER_TYPE.UNPAID ? "取消支付" : "去售后"
form.type === MINE_ORDER_TYPE.UNPAID ? "取消支付" : "申请售后"
}}
</view>
@@ -306,7 +314,9 @@ import {
afterSaleDetail,
cancelOrder,
orderLogistics,
deleteOrderQuery
deleteOrderQuery,
updateOrderAddress,
applyUpdateAddress
} from "@/api/order.js";
import dayjs from "dayjs";
import { formatDate1, copyData } from "@/utils/index.js";
@@ -318,6 +328,16 @@ import { RETURN_REASON_LIST } from "@/pages/mine_package/mine_order/emun/index.j
export default {
components: { DownPopup, afterSales, refundPopup },
created() {
uni.$on('selectAddress', this.onSelectAddressForOrder);
},
beforeUnmount() {
uni.$off('selectAddress', this.onSelectAddressForOrder);
},
beforeDestroy() {
uni.$off('selectAddress', this.onSelectAddressForOrder);
},
computed: {
MINE_ORDER_TYPE() {
return MINE_ORDER_TYPE;
@@ -346,6 +366,7 @@ export default {
},
data() {
return {
changingOrder: null,
salesServer: 1, //为1展示申请售后 2:选择退货原因 3.退货退款申请,4.退款申请失败
orderTypeList: [
{
@@ -479,6 +500,54 @@ export default {
url: "/pages/rwa_package/kefu/kefu?scene=order",
});
},
// 修改订单地址：跳转至 mine_address 页面 (moduleType=2)
changeOrderAddress(item) {
this.changingOrder = item;
const originalId = item.addressId || item.address?.id || (item.address && item.address.id) || '';
let url = `/pages/mine_package/mine_address/mine_address?moduleType=2`;
if (originalId) {
url += `&originalId=${originalId}`;
}
if (item.address) {
try {
url += `&originalAddress=${encodeURIComponent(JSON.stringify(item.address))}`;
} catch (e) { }
}
uni.navigateTo({ url });
},
// 选择新地址后的回调处理，选择后直接返回此页面并触发接口修改
async onSelectAddressForOrder(addressObj) {
if (!this.changingOrder || !addressObj) return;
const order = this.changingOrder;
this.changingOrder = null;
try {
const params = {
orderId: order.id, // 订单ID
addrId: addressObj.id // 选中地址ID
};
console.log("选择新地址后的回调处理，选择后直接返回此页面并触发接口修改", params)
const res = await applyUpdateAddress(params);
if (res && res.bizcode === 100) {
if (this.$refs.uToastRef) {
this.$refs.uToastRef.show({
type: 'success',
message: '地址修改成功'
});
} else {
uni.showToast({
title: '地址修改成功',
icon: 'success'
});
}
}
} catch (e) {
console.error('updateOrderAddress error:', e);
}
this.form.page = 1;
this.loadData();
},
// 售后
onSaleAfter(item) {
console.log("售后---1", item, this.form.type);
pages/mine_package/mine_order_info/mine_order_info.vue
+465 -457
View File
File diff suppressed because it is too large Load Diff
pages/mine_package/mine_settings/mine_settings.vue
+1 -1
View File
@@ -122,7 +122,7 @@ export default {
// 地址
if (type === "address") {
uni.navigateTo({
url: '/pages/mine_package/mine_address/mine_address'
url: '/pages/mine_package/mine_address/mine_address?moduleType=1'
})
} else if (type === "aboutUs") {
uni.navigateTo({