feat：评价区改造
This commit is contained in:
+1
-1
@@ -336,7 +336,7 @@ export default {
|
||||
id: 5,
|
||||
title: '地址管理',
|
||||
url: 'https://static.tbmall.xin/static/mine/tool_dz.png',
|
||||
path: '/pages/mine_package/mine_address/mine_address'
|
||||
path: '/pages/mine_package/mine_address/mine_address?moduleType=1'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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({
|
||||
|
||||
@@ -1,276 +1,371 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<TopSafe bgColor="#fff"></TopSafe>
|
||||
<view class="search-view">
|
||||
<view class="head-view">
|
||||
<u-icon size="30rpx" name="arrow-left" @click="onBack" color="#333"></u-icon>
|
||||
<view class="search-box">
|
||||
<input class="input-view wx-width" v-model="searchInput"></input>
|
||||
<!-- <u-input class="input-view wx-width"
|
||||
v-model="searchInput"></u-input> -->
|
||||
<view class="search-btn flex-c" @click="onSearch">
|
||||
<text class="text-32 text-white">搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="top-view mt-24">
|
||||
<view class="flex-r-lr">
|
||||
<text class="text-32 text-bold text-zu">搜索历史</text>
|
||||
<u-icon size="40rpx" name="trash" @click="isDel = !isDel" color="#333"></u-icon>
|
||||
</view>
|
||||
<view class="history-view" v-if="historyList.length">
|
||||
<view class="history-box flex-c mt-24 mr-32" v-for="(item, index) in historyList" :key="item">
|
||||
<text class="text-24 text-fu line-h" @click="onText(item)">{{ item }}</text>
|
||||
<u-icon size="32rpx" class="close-pos" v-if="isDel" @click="onDel(index)" name="close-circle"
|
||||
color="#333"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="history-on-data flex-c" v-else>
|
||||
<text class="text-40 text-bold">暂无历史记录</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-view">
|
||||
<view class="bottom-head">
|
||||
<text class="text-32 text-bold text-zu">商品展示</text>
|
||||
</view>
|
||||
<view class="bottom-scroll" v-if="dataList.length">
|
||||
<ShopItem :obj="item" class="mt-24" @click="onJump(item)" v-for="(item, index) in dataList"
|
||||
:key="item.id"></ShopItem>
|
||||
</view>
|
||||
<view class="bottom-scroll-no " v-else>
|
||||
<text class="text-48 text-bold" style="margin-top:200rpx">暂无数据</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<DownPopup></DownPopup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUserInfo } from '@/api/auth.js';
|
||||
import Header from '@/components/common/header.vue';
|
||||
import TopSafe from '@/components/common/top-safe.nvue'
|
||||
import DownPopup from '@/components/common/down-popup.vue';
|
||||
import { searchList } from '@/api/product.js'
|
||||
import ShopItem from './components/shop-item.vue'
|
||||
import func from '@/utils/func.js';
|
||||
|
||||
export default {
|
||||
components: { Header, TopSafe, DownPopup, ShopItem },
|
||||
data() {
|
||||
return {
|
||||
searchInput: '',
|
||||
historyList: [],
|
||||
isDel: false,
|
||||
dataList: [],
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
// this.isSignContract()
|
||||
// this.getSignContract()
|
||||
|
||||
let arr = uni.getStorageSync('history') || '';
|
||||
if (arr) {
|
||||
this.historyList = arr.split(',');
|
||||
} else {
|
||||
this.historyList = [];
|
||||
}
|
||||
},
|
||||
onJump(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/other_package/productInfo/productInfo?id=' + item.id,
|
||||
})
|
||||
},
|
||||
onBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
onSearch() {
|
||||
if (!this.searchInput) {
|
||||
return;
|
||||
}
|
||||
this.onAdd();
|
||||
let params = {
|
||||
keyword: this.searchInput
|
||||
}
|
||||
searchList(params).then((res) => {
|
||||
this.dataList = res.data;
|
||||
console.log('res', res)
|
||||
})
|
||||
},
|
||||
onDel(index) {
|
||||
this.historyList.splice(index, 1);
|
||||
this.onSave()
|
||||
},
|
||||
onAdd() {
|
||||
|
||||
if (this.searchInput) {
|
||||
let bool = false;
|
||||
this.historyList.forEach(item => {
|
||||
if (item == this.searchInput) {
|
||||
bool = true;
|
||||
}
|
||||
})
|
||||
if (!bool) {
|
||||
this.historyList.unshift(this.searchInput);
|
||||
if (this.historyList.length > 15) {
|
||||
this.historyList.pop();
|
||||
}
|
||||
this.onSave();
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
onText(item) {
|
||||
this.searchInput = item;
|
||||
},
|
||||
onSave() {
|
||||
if (this.historyList.length) {
|
||||
uni.setStorageSync('history', this.historyList.join(','));
|
||||
} else {
|
||||
uni.setStorageSync('history', '');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-view {
|
||||
width: 100%;
|
||||
height: calc(100% - var(--status-bar-height));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.top-view {
|
||||
width: 100%;
|
||||
min-height: 150rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
|
||||
.history-on-data {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
.history-view {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.history-box {
|
||||
position: relative;
|
||||
padding: 8rpx 22rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #7932FE;
|
||||
|
||||
.close-pos {
|
||||
right: -20rpx;
|
||||
position: absolute;
|
||||
top: -40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-view {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.bottom-head {
|
||||
height: 50rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bottom-scroll {
|
||||
width: 100%;
|
||||
height: calc(100vh - 50rpx - 324rpx - 4rpx - 88rpx - var(--status-bar-height));
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.bottom-scroll-no {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.head-view {
|
||||
width: 100%;
|
||||
height: 118rpx;
|
||||
min-height: 118rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
/* #ifdef MP-WEIXIN */
|
||||
padding-top: 80rpx !important;
|
||||
height: auto !important;
|
||||
min-height: calc(118rpx + 80rpx) !important;
|
||||
/* #endif */
|
||||
|
||||
.search-box {
|
||||
width: 100%;
|
||||
height: 84rpx;
|
||||
min-height: 16rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 16rpx;
|
||||
border: 2rpx solid #7932FE;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
width: 156rpx;
|
||||
height: 100%;
|
||||
border-radius: 16rpx;
|
||||
background: linear-gradient(270deg, #B164FB 0%, #7934F6 100%);
|
||||
}
|
||||
|
||||
.input-view {
|
||||
height: 72rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 30rpx !important;
|
||||
border-radius: 36rpx;
|
||||
margin-left: 12rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* #ifdef MP-WEIXIN */
|
||||
.wx-width {
|
||||
width: 350rpx !important;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 顶部安全距离 -->
|
||||
<TopSafe bgColor="#ffffff"></TopSafe>
|
||||
|
||||
<!-- 1. 自定义导航栏：左边返回箭头，中间“商品搜索”标题 -->
|
||||
<view class="custom-navbar">
|
||||
<view class="nav-back flex-c" @click="onBack">
|
||||
<u-icon name="arrow-left" size="36rpx" color="#333333"></u-icon>
|
||||
</view>
|
||||
<view class="nav-title">商品搜索</view>
|
||||
<view class="nav-right"></view>
|
||||
</view>
|
||||
|
||||
<!-- 2. 搜索框部分：放大镜 + 输入框 + 右侧紫色搜索按钮 -->
|
||||
<view class="search-bar-box">
|
||||
<view class="search-inner">
|
||||
<u-icon name="search" size="36rpx" color="#999999" class="search-icon"></u-icon>
|
||||
<input
|
||||
class="search-input"
|
||||
v-model="searchInput"
|
||||
placeholder="请输入商品关键字"
|
||||
placeholder-style="color: #999999; font-size: 28rpx;"
|
||||
confirm-type="search"
|
||||
@confirm="onSearch"
|
||||
/>
|
||||
<view class="search-btn flex-c" @click="onSearch">
|
||||
<text class="search-btn-text">搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 3. 历史搜索部分 -->
|
||||
<view class="history-container">
|
||||
<view class="history-header flex-r-lr">
|
||||
<text class="section-title">历史搜索</text>
|
||||
<u-icon name="trash" size="38rpx" color="#999999" @click="toggleDel"></u-icon>
|
||||
</view>
|
||||
|
||||
<!-- 历史记录标签列表 -->
|
||||
<view class="history-tags flex-r" v-if="historyList.length">
|
||||
<view
|
||||
class="history-tag-item flex-r"
|
||||
v-for="(item, index) in historyList"
|
||||
:key="index"
|
||||
@click="onText(item)"
|
||||
>
|
||||
<text class="tag-text">{{ item }}</text>
|
||||
<u-icon
|
||||
name="close-circle-fill"
|
||||
size="28rpx"
|
||||
color="#999999"
|
||||
class="del-icon"
|
||||
v-if="isDel"
|
||||
@click.stop="onDel(index)"
|
||||
></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 无历史记录时显示 -->
|
||||
<view class="history-empty" v-else>
|
||||
<text class="empty-text">暂无搜索内容</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 4. 猜你喜欢部分 -->
|
||||
<view class="recommend-container">
|
||||
<view class="recommend-header">
|
||||
<text class="section-title">猜你喜欢</text>
|
||||
</view>
|
||||
<!-- 猜你喜欢下面的列表按要求空着 -->
|
||||
<view class="recommend-list">
|
||||
<view class="product-grid" v-if="dataList && dataList.length">
|
||||
<ShopItem
|
||||
:obj="item"
|
||||
class="product-item"
|
||||
@click="onJump(item)"
|
||||
v-for="item in dataList"
|
||||
:key="item.id"
|
||||
></ShopItem>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<DownPopup></DownPopup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUserInfo } from '@/api/auth.js';
|
||||
import Header from '@/components/common/header.vue';
|
||||
import TopSafe from '@/components/common/top-safe.nvue';
|
||||
import DownPopup from '@/components/common/down-popup.vue';
|
||||
import { searchList } from '@/api/product.js';
|
||||
import ShopItem from './components/shop-item.vue';
|
||||
import func from '@/utils/func.js';
|
||||
|
||||
export default {
|
||||
components: { Header, TopSafe, DownPopup, ShopItem },
|
||||
data() {
|
||||
return {
|
||||
searchInput: '',
|
||||
historyList: [],
|
||||
isDel: false,
|
||||
dataList: [],
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
let arr = uni.getStorageSync('history') || '';
|
||||
if (arr) {
|
||||
this.historyList = arr.split(',').filter(item => item.trim() !== '');
|
||||
} else {
|
||||
this.historyList = [];
|
||||
}
|
||||
},
|
||||
onJump(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/other_package/productInfo/productInfo?id=' + item.id,
|
||||
});
|
||||
},
|
||||
onBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
onSearch() {
|
||||
if (!this.searchInput || !this.searchInput.trim()) {
|
||||
return;
|
||||
}
|
||||
this.onAdd();
|
||||
let params = {
|
||||
keyword: this.searchInput.trim()
|
||||
};
|
||||
searchList(params).then((res) => {
|
||||
this.dataList = res.data || [];
|
||||
});
|
||||
},
|
||||
onDel(index) {
|
||||
this.historyList.splice(index, 1);
|
||||
this.onSave();
|
||||
if (this.historyList.length === 0) {
|
||||
this.isDel = false;
|
||||
}
|
||||
},
|
||||
toggleDel() {
|
||||
if (this.historyList.length > 0) {
|
||||
this.isDel = !this.isDel;
|
||||
}
|
||||
},
|
||||
onAdd() {
|
||||
if (this.searchInput && this.searchInput.trim()) {
|
||||
let val = this.searchInput.trim();
|
||||
let index = this.historyList.indexOf(val);
|
||||
if (index > -1) {
|
||||
this.historyList.splice(index, 1);
|
||||
}
|
||||
this.historyList.unshift(val);
|
||||
if (this.historyList.length > 15) {
|
||||
this.historyList.pop();
|
||||
}
|
||||
this.onSave();
|
||||
}
|
||||
},
|
||||
onText(item) {
|
||||
this.searchInput = item;
|
||||
this.onSearch();
|
||||
},
|
||||
onSave() {
|
||||
if (this.historyList.length) {
|
||||
uni.setStorageSync('history', this.historyList.join(','));
|
||||
} else {
|
||||
uni.setStorageSync('history', '');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 避免全局 .content 的 align-items: center 导致元素全挤在中间 */
|
||||
.page-container {
|
||||
width: 750rpx;
|
||||
min-width: 750rpx;
|
||||
max-width: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.custom-navbar {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
|
||||
.nav-back {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #1a1a1a;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
width: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 搜索框 */
|
||||
.search-bar-box {
|
||||
width: 100%;
|
||||
padding: 16rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.search-inner {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 8rpx 0 28rpx;
|
||||
box-sizing: border-box;
|
||||
border: 2rpx solid #efefef;
|
||||
|
||||
.search-icon {
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
height: 64rpx;
|
||||
padding: 0 32rpx;
|
||||
background: linear-gradient(270deg, #b164fb 0%, #7934f6 100%);
|
||||
border-radius: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.search-btn-text {
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 历史搜索 */
|
||||
.history-container {
|
||||
width: 100%;
|
||||
padding: 32rpx 32rpx 16rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.history-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.history-tags {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
|
||||
.history-tag-item {
|
||||
padding: 10rpx 28rpx;
|
||||
background-color: #f5f5f7;
|
||||
border-radius: 30rpx;
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.tag-text {
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.del-icon {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.history-empty {
|
||||
margin-top: 16rpx;
|
||||
width: 100%;
|
||||
|
||||
.empty-text {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 猜你喜欢 */
|
||||
.recommend-container {
|
||||
width: 100%;
|
||||
padding: 32rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.recommend-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.recommend-list {
|
||||
width: 100%;
|
||||
margin-top: 24rpx;
|
||||
|
||||
.product-grid {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,454 @@
|
||||
<template>
|
||||
<view class="sort_warp" :class="platformType ? '' : 'iosplatformType'">
|
||||
<TopSafe></TopSafe>
|
||||
<view class="sort_header">
|
||||
<!-- 分类切换 -->
|
||||
<view class="sort_category_header">
|
||||
<view :class="selCategory === 1
|
||||
? 'category_item category_item_sel'
|
||||
: 'category_item'
|
||||
" @click="checkCategory(1)">
|
||||
<view>分类</view>
|
||||
<view v-if="selCategory === 1" class="category_item_sel_but"></view>
|
||||
</view>
|
||||
<!-- <view :class="selCategory === 2 ? 'category_item category_item_sel':'category_item'" @click="checkCategory(2)">
|
||||
<view>品牌</view>
|
||||
<view v-if="selCategory === 2" class="category_item_sel_but"></view>
|
||||
</view> -->
|
||||
</view>
|
||||
<!-- 搜索 -->
|
||||
<view style="width: 200rpx" @click="jumpSearch" class="jump-search">
|
||||
<up-search shape="square" bgColor="#EEEEEEFF" color="#666666FF" :showAction="false"
|
||||
placeholder="搜索"></up-search>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-menu-wrap">
|
||||
<!-- 左侧类别 -->
|
||||
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
|
||||
<view v-for="(item, index) in tabbarList" :key="index" class="u-tab-item"
|
||||
:class="[current == index ? 'u-tab-item-active' : '']" :data-current="index"
|
||||
@tap.stop="swichMenu(item, index)">
|
||||
<text class="u-line-1">{{ item.name }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 商品类别数据 -->
|
||||
<scroll-view scroll-y class="right-box" :scroll-top="rightScrollTop">
|
||||
<!-- banner图 -->
|
||||
<view style="padding: 0rpx 20rpx" v-if="bannerList && bannerList.length > 0">
|
||||
<up-swiper :list="bannerList" height="80px"></up-swiper>
|
||||
</view>
|
||||
<view class="page-view">
|
||||
<!-- 这里还有一层循环 -->
|
||||
<up-loading-page :loading="tabbarContentLoading"></up-loading-page>
|
||||
<view class="class-item" v-for="(item, index) in tabbarContentList" :key="index">
|
||||
<view class="item-title">
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
<view class="item-container" v-if="item.foods && item.foods.length !== 0">
|
||||
<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="item1.id || index1" @click="jumpInfo(item1)">
|
||||
<image class="item-menu-image" :src="item1.icon ? item1.icon : '/static/common/def_img.jpg'"
|
||||
mode="aspectFill" lazy-load>
|
||||
</image>
|
||||
<view class="item-menu-name">{{ item1.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="not_order_warp">
|
||||
<view class="not_order_warp_img"><up-image src="https://static.tbmall.xin/static/not_shopping.png"
|
||||
width="100" height="100" bgColor="#f1f6ff00"></up-image></view>
|
||||
<view class="not_order_msg_warp">暂无分类，快去添加吧~</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- #ifndef H5 || MP-WEIXIN-->
|
||||
<CustomTabBar :tabIndex="1" />
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCascadeCategory, getCarouselImage } from "@/api/common.js";
|
||||
import CustomTabBar from "@/components/custom-tab-bar.vue";
|
||||
import { APP_PAGE_TYPE } from "@/utils/enumUtils.js";
|
||||
import TopSafe from '@/components/common/top-safe.nvue';
|
||||
|
||||
export default {
|
||||
components: { CustomTabBar, TopSafe },
|
||||
data() {
|
||||
return {
|
||||
selCategory: 1,
|
||||
scrollTop: 0, //tab标题的滚动条位置
|
||||
rightScrollTop: 0, // 右侧内容的滚动条位置
|
||||
current: null, // 预设当前项的值
|
||||
menuHeight: 0, // 左边菜单的高度
|
||||
menuItemHeight: 0, // 左边菜单item的高度
|
||||
bannerList: [],
|
||||
tabbarList: [], // 左侧的主分类
|
||||
tabbarContentList: [], // 右侧内容的分类
|
||||
tabbarContentLoading: false,
|
||||
platformType: true,
|
||||
isFromSortShop: false,
|
||||
};
|
||||
},
|
||||
|
||||
onShow() {
|
||||
/*#ifdef APP-PLUS*/
|
||||
uni.hideTabBar({
|
||||
animation: false,
|
||||
});
|
||||
const appUpdate = uni.getStorageSync("platform");
|
||||
this.platformType = appUpdate == "android" ? "ANDROID" : "IOS";
|
||||
/*#endif*/
|
||||
|
||||
const isBackFromSortShop = this.isFromSortShop;
|
||||
this.isFromSortShop = false;
|
||||
|
||||
this.getSort(0).then((resp) => {
|
||||
if (resp && resp.length !== 0) {
|
||||
this.tabbarList = resp;
|
||||
let targetIndex = 0;
|
||||
let fData = resp[0];
|
||||
|
||||
if (isBackFromSortShop) {
|
||||
const sortId = uni.getStorageSync("sortId");
|
||||
if (sortId && sortId !== 0) {
|
||||
resp.forEach((item, index) => {
|
||||
if (item.id === sortId) {
|
||||
fData = item;
|
||||
targetIndex = index;
|
||||
}
|
||||
});
|
||||
} else if (this.current !== null && this.current >= 0 && this.current < resp.length) {
|
||||
targetIndex = this.current;
|
||||
fData = resp[targetIndex];
|
||||
}
|
||||
} else {
|
||||
uni.removeStorageSync("sortId");
|
||||
this.current = 0;
|
||||
this.scrollTop = 0;
|
||||
targetIndex = 0;
|
||||
fData = resp[0];
|
||||
}
|
||||
|
||||
this.swichMenu(fData, targetIndex, true);
|
||||
}
|
||||
});
|
||||
this.getCarouselImage();
|
||||
},
|
||||
methods: {
|
||||
checkCategory(val) {
|
||||
this.selCategory = val;
|
||||
},
|
||||
// 查询轮播图
|
||||
async getCarouselImage() {
|
||||
const params = {
|
||||
pageUi: APP_PAGE_TYPE.SORT,
|
||||
};
|
||||
const resp = await getCarouselImage(params);
|
||||
if (resp && resp.bizcode === 100) {
|
||||
const data = resp.data || [];
|
||||
this.bannerList =
|
||||
data.length !== 0 ? data.map((obj) => obj.carouselImage) : [];
|
||||
}
|
||||
},
|
||||
jumpSearch(item) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/rwa_package/insights/search",
|
||||
});
|
||||
},
|
||||
jumpInfo(item) {
|
||||
console.log(item, "item");
|
||||
this.isFromSortShop = true;
|
||||
// uni.navigateTo({
|
||||
// url: `/pages/other_package/productInfo/productInfo?id=${item.id}`,
|
||||
// })
|
||||
uni.navigateTo({
|
||||
url: `/pages/rwa_package/shop/sort-shop?id=${item.id}&name=${item.name}`,
|
||||
});
|
||||
},
|
||||
// 查询分类
|
||||
async getSort(pId) {
|
||||
|
||||
const params = {
|
||||
parentId: pId,
|
||||
};
|
||||
console.log('查询分类', params, pId);
|
||||
const resp = await getCascadeCategory(params);
|
||||
if (resp && resp.bizcode === 100) {
|
||||
return resp.data;
|
||||
}
|
||||
return [];
|
||||
},
|
||||
getImg() {
|
||||
return Math.floor(Math.random() * 35);
|
||||
},
|
||||
// 点击左边的栏目切换
|
||||
async swichMenu(item, index, force = false) {
|
||||
console.log('点击左边的栏目切换', item, index, "item, index");
|
||||
if (!force && index == this.current && this.tabbarContentList.length > 0) return;
|
||||
if (item && item.id) {
|
||||
uni.setStorageSync("sortId", item.id);
|
||||
}
|
||||
this.rightScrollTop = 0;
|
||||
this.tabbarContentLoading = true;
|
||||
const firstData = await this.getSort(item.id);
|
||||
for (let fItem of firstData) {
|
||||
const twoData = await this.getSort(fItem.id);
|
||||
fItem.foods = twoData;
|
||||
}
|
||||
this.tabbarContentList = firstData;
|
||||
this.current = index;
|
||||
// 如果为0，意味着尚未初始化
|
||||
if (this.menuHeight == 0 || this.menuItemHeight == 0) {
|
||||
await this.getElRect("menu-scroll-view", "menuHeight");
|
||||
await this.getElRect("u-tab-item", "menuItemHeight");
|
||||
}
|
||||
// 将菜单活动item垂直居中
|
||||
this.scrollTop =
|
||||
index * this.menuItemHeight +
|
||||
this.menuItemHeight / 2 -
|
||||
this.menuHeight / 2;
|
||||
this.tabbarContentLoading = false;
|
||||
},
|
||||
|
||||
// 获取一个目标元素的高度
|
||||
getElRect(elClass, dataVal) {
|
||||
return new Promise((resolve) => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query
|
||||
.select("." + elClass)
|
||||
.fields({ size: true }, (res) => {
|
||||
if (!res) {
|
||||
setTimeout(() => {
|
||||
this.getElRect(elClass, dataVal).then(resolve);
|
||||
}, 10);
|
||||
return;
|
||||
}
|
||||
this[dataVal] = res.height;
|
||||
resolve(res);
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
},
|
||||
// 分享给朋友
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: 'TB聚合商城', // 分享标题
|
||||
path: '/pages/sort/sort' // 分享路径
|
||||
}
|
||||
},
|
||||
// 分享到朋友圈
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: 'TB聚合商城',
|
||||
query: ''
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sort_warp {
|
||||
height: 100vh;
|
||||
/* #ifdef H5 */
|
||||
height: calc(100vh - var(--window-top, 0px) - var(--window-bottom, 0px));
|
||||
/* #endif */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.sort_header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx 10rpx;
|
||||
flex-shrink: 0;
|
||||
background-color: #fff;
|
||||
z-index: 10;
|
||||
|
||||
/* #ifdef MP-WEIXIN */
|
||||
margin-top: 80rpx;
|
||||
/* #endif */
|
||||
|
||||
.sort_category_header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.jump-search {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.category_item {
|
||||
width: 140rpx;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.category_item_sel {
|
||||
font-size: 44rpx;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.category_item_sel_but {
|
||||
height: 8rpx;
|
||||
width: 50rpx;
|
||||
background: $app-bt-bj;
|
||||
margin-top: 4rpx;
|
||||
margin-left: 12%;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sort_content {}
|
||||
|
||||
.u-menu-wrap {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.u-search-inner {
|
||||
background-color: rgb(234, 234, 234);
|
||||
border-radius: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10rpx 16rpx;
|
||||
}
|
||||
|
||||
.u-search-text {
|
||||
font-size: 26rpx;
|
||||
color: $u-tips-color;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.u-tab-view {
|
||||
width: 200rpx;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
background: #f6f6f6;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
/* #ifdef APP-PLUS */
|
||||
padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
|
||||
/* #endif */
|
||||
/* #ifndef APP-PLUS */
|
||||
padding-bottom: 0rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.u-tab-item {
|
||||
height: 110rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
color: #444;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
padding: 0 10rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.u-tab-item-active {
|
||||
position: relative;
|
||||
color: #000;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.u-tab-item-active::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-left: 4px solid $app-bt-bj;
|
||||
height: 32rpx;
|
||||
left: 0;
|
||||
top: 39rpx;
|
||||
}
|
||||
|
||||
.right-box {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
background-color: rgb(250, 250, 250);
|
||||
box-sizing: border-box;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
/* #ifdef APP-PLUS */
|
||||
padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
|
||||
/* #endif */
|
||||
/* #ifndef APP-PLUS */
|
||||
padding-bottom: 0rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.page-view {
|
||||
padding: 16rpx;
|
||||
}
|
||||
|
||||
.class-item {
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #fff;
|
||||
padding: 16rpx;
|
||||
border-radius: 8rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 26rpx;
|
||||
color: $u-main-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.item-menu-name {
|
||||
font-weight: normal;
|
||||
font-size: 24rpx;
|
||||
color: $u-main-color;
|
||||
margin-top: 10rpx;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.item-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.thumb-box {
|
||||
width: 33.333333%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.item-menu-image {
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
</style>
|
||||
+857
-454
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,406 @@
|
||||
<template>
|
||||
<view class="content-two">
|
||||
<view class="top-header-container">
|
||||
<TopSafe></TopSafe>
|
||||
<view class="head-view">
|
||||
<view class="head-search" @click="onJumpSearch">
|
||||
<u-icon size="24" name="search" color="#999"></u-icon>
|
||||
<text class="text-28 text-fu" style="margin-left: 12rpx">搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tab-box">
|
||||
<view class="tab-item" v-for="(item, index) in tabArr" :key="item.id" @click="onTab(item.id)">
|
||||
|
||||
<image :src="curTab == item.id ? item.iconActive : item.icon" mode="aspectFill" class="tab-img">
|
||||
</image>
|
||||
<view class="tab-name" :style="{
|
||||
color: curTab == item.id ? '#7A35F6' : '#666',
|
||||
}">{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<mescroll-uni ref="mescrollRef" :top="mescrollTop" :bottom="mescrollBottom" :safearea="isApp"
|
||||
@down="downCallback" @up="upCallback" :up="upOption" :down="downOption" @init="mescrollInit">
|
||||
<view class="setting-view">
|
||||
<view class="name-box">
|
||||
<!-- 原来单个 v-for 替换成两列 -->
|
||||
<view class="mescrollUniView">
|
||||
<view class="fall-col">
|
||||
<ParityProductItem v-for="(item, i) in leftList" :key="item.id" :obj="item" @ok="onJumpShop"
|
||||
style="margin-top: 24rpx" />
|
||||
</view>
|
||||
<view class="fall-col">
|
||||
<ParityProductItem v-for="(item, i) in rightList" :key="item.id" :obj="item"
|
||||
@ok="onJumpShop" style="margin-top: 24rpx" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-uni>
|
||||
<!-- #ifndef H5 || MP-WEIXIN-->
|
||||
<CustomTabBar :tabIndex="2" />
|
||||
<!-- #endif -->
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from "@/components/common/header.vue";
|
||||
import TopSafe from "@/components/common/top-safe.nvue";
|
||||
import MyBtn from "@/components/common/my-btn.vue";
|
||||
import ParityProductItem from "@/components/shop/parity-product-item.vue";
|
||||
import { searchList, getGoodsTags } from "@/api/product.js";
|
||||
import CustomTabBar from "@/components/custom-tab-bar.vue";
|
||||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||||
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
|
||||
|
||||
export default {
|
||||
mixins: [MescrollMixin],
|
||||
components: { Header, TopSafe, MyBtn, ParityProductItem, CustomTabBar, MescrollUni },
|
||||
computed: {
|
||||
isApp() {
|
||||
// #ifdef APP-PLUS
|
||||
return true;
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
return false;
|
||||
// #endif
|
||||
},
|
||||
mescrollTop() {
|
||||
// #ifdef MP-WEIXIN
|
||||
return '400rpx';
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
return '260rpx';
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0;
|
||||
return (statusBarHeight * 2 + 248) + 'rpx';
|
||||
// #endif
|
||||
},
|
||||
mescrollBottom() {
|
||||
// #ifdef APP-PLUS
|
||||
return '100rpx';
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
return '0rpx';
|
||||
// #endif
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataList: [],
|
||||
tabArr: [
|
||||
{
|
||||
id: 7,
|
||||
name: '信任专享',
|
||||
icon: 'https://static.tbmall.xin/static/new-home/xinren.png',
|
||||
iconActive: 'https://static.tbmall.xin/static/new-home/xinren_active.png',
|
||||
}, {
|
||||
id: 15,
|
||||
name: '全网爆款',
|
||||
icon: 'https://static.tbmall.xin/static/new-home/baokuan.png',
|
||||
iconActive: 'https://static.tbmall.xin/static/new-home/baokuan_active.png',
|
||||
}, {
|
||||
id: 16,
|
||||
name: '低价好物',
|
||||
icon: 'https://static.tbmall.xin/static/new-home/cart.png',
|
||||
iconActive: 'https://static.tbmall.xin/static/new-home/cart_active.png',
|
||||
}, {
|
||||
id: 6,
|
||||
name: '品牌特卖',
|
||||
icon: 'https://static.tbmall.xin/static/new-home/huiyuan.png',
|
||||
iconActive: 'https://static.tbmall.xin/static/new-home/huiyuan_active.png',
|
||||
},
|
||||
],
|
||||
curTab: 7,
|
||||
upOption: {
|
||||
auto: false,
|
||||
page: {
|
||||
size: 10, // 每页数据的数量,默认10
|
||||
},
|
||||
noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
|
||||
empty: {
|
||||
tip: `空空如也`,
|
||||
},
|
||||
textColor: "#333",
|
||||
bgColor: "rgba(0,0,0,0)",
|
||||
},
|
||||
downOption: {
|
||||
auto: false,
|
||||
textColor: "#333",
|
||||
bgColor: "rgba(0,0,0,0)",
|
||||
},
|
||||
leftList: [],
|
||||
rightList: [],
|
||||
mescroll: null,
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log("+++++", options)
|
||||
if (options.index) {
|
||||
this.curTab = options.index;
|
||||
}
|
||||
this.getSearchList()
|
||||
},
|
||||
onShow() {
|
||||
/*#ifdef APP-PLUS*/
|
||||
uni.hideTabBar({
|
||||
animation: false,
|
||||
});
|
||||
/*#endif*/
|
||||
if (this.tabArr.length > 0) {
|
||||
const sortParams = uni.getStorageSync('sortParams');
|
||||
if (sortParams) {
|
||||
const targetIndex = this.tabArr.find(item => item.name === sortParams.value)?.id;
|
||||
uni.removeStorageSync('sortParams');
|
||||
if (targetIndex) {
|
||||
this.curTab = targetIndex;
|
||||
this.dataList = [];
|
||||
this.downCallback();
|
||||
}
|
||||
} else {
|
||||
|
||||
this.getSearchList()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 查询分类列表
|
||||
*/
|
||||
async getSortList() {
|
||||
const resp = await getGoodsTags({ type: 5 });
|
||||
if (resp && resp.bizcode === 100) {
|
||||
this.tabArr = resp.data.sort((a, b) => a.sort - b.sort);
|
||||
this.$nextTick(() => {
|
||||
this.applySortParams();
|
||||
this.downCallback();
|
||||
});
|
||||
}
|
||||
},
|
||||
applySortParams() {
|
||||
const sortParams = uni.getStorageSync('sortParams');
|
||||
if (sortParams && this.tabArr.length > 0) {
|
||||
uni.removeStorageSync('sortParams');
|
||||
const targetIndex = this.tabArr.findIndex(item => item.name === sortParams.value);
|
||||
if (targetIndex !== -1 && targetIndex !== this.curTab) {
|
||||
this.curTab = targetIndex;
|
||||
this.dataList = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
mescrollInit(mescroll) {
|
||||
this.mescroll = mescroll;
|
||||
},
|
||||
upCallback(page) {
|
||||
let pageNum = page.num;
|
||||
let pageSize = page.size;
|
||||
|
||||
let params = {
|
||||
type: 2,
|
||||
page: page.num,
|
||||
pageSize: page.size,
|
||||
isPar: true,
|
||||
tag: this.curTab
|
||||
};
|
||||
|
||||
searchList(params).then((res) => {
|
||||
let curPageLen = res.data.length;
|
||||
if (page.num === 1) this.dataList = [];
|
||||
this.dataList = this.dataList.concat(res.data);
|
||||
|
||||
this.waterfall();
|
||||
this.mescroll.endBySize(curPageLen, res.data.total);
|
||||
});
|
||||
},
|
||||
downCallback() {
|
||||
this.mescroll && this.mescroll.resetUpScroll();
|
||||
},
|
||||
onTab(index) {
|
||||
if (index != this.curTab) {
|
||||
this.curTab = index;
|
||||
console.log("----", this.curTab)
|
||||
this.dataList = [];
|
||||
this.mescroll && this.mescroll.scrollTo(0, 0);
|
||||
this.downCallback();
|
||||
}
|
||||
},
|
||||
async getSearchList() {
|
||||
const params = {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
isPar: true,
|
||||
tag: this.curTab
|
||||
};
|
||||
|
||||
const resp = await searchList(params);
|
||||
if (resp && resp.bizcode === 100) {
|
||||
this.dataList = resp.data || [];
|
||||
this.waterfall();
|
||||
}
|
||||
},
|
||||
waterfall() {
|
||||
this.leftList = this.dataList
|
||||
.map((item, index) => {
|
||||
if (index % 2 == 0) return item;
|
||||
return null;
|
||||
})
|
||||
.filter(Boolean);
|
||||
this.rightList = this.dataList
|
||||
.map((item, index) => {
|
||||
if (index % 2 != 0) return item;
|
||||
return null;
|
||||
})
|
||||
.filter(Boolean);
|
||||
console.log(this.leftList, this.rightList);
|
||||
},
|
||||
|
||||
onJumpSearch() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/rwa_package/insights/search",
|
||||
});
|
||||
},
|
||||
onJumpShop(id) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/other_package/productInfo/productInfo?id=" + id,
|
||||
});
|
||||
},
|
||||
onShare() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/other_package/invite_friends/invite_friends",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content-two {
|
||||
min-height: 100vh;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.top-header-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
background-color: #fff;
|
||||
|
||||
/* #ifdef MP-WEIXIN */
|
||||
padding-top: 40rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.head-view {
|
||||
width: 100%;
|
||||
min-height: 88rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
|
||||
.head-search {
|
||||
width: 100%;
|
||||
height: 76rpx;
|
||||
padding: 0 24rpx;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
background-color: #f7f7f7;
|
||||
align-items: center;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-box {
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
min-height: 80rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
overflow-x: auto;
|
||||
|
||||
.tab-item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.tab-img {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
|
||||
.tab-name {
|
||||
font-size: 28rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-view {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
min-height: 80rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
overflow-x: auto;
|
||||
|
||||
.tab-list {
|
||||
margin-right: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 60rpx;
|
||||
min-height: 60rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 48rpx;
|
||||
height: 6rpx;
|
||||
background-color: #7a35f6;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-view {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 32rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.name-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.mescrollUniView {
|
||||
width: calc(100vw - 48rpx);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.fall-col {
|
||||
width: 332rpx;
|
||||
/* 与 ParityProductItem 宽度一致 */
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -14,7 +14,8 @@
|
||||
<image :src="curTab == item.id ? item.iconActive : item.icon" mode="aspectFill" class="tab-img">
|
||||
</image>
|
||||
<view class="tab-name" :style="{
|
||||
color: curTab == item.id ? '#7A35F6' : '#666',
|
||||
color: curTab == item.id ? getTabColor(item) : '#999',
|
||||
fontWeight: curTab == item.id ? 'bold' : 'normal'
|
||||
}">{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -23,15 +24,19 @@
|
||||
@up="upCallback" :up="upOption" :down="downOption" @init="mescrollInit">
|
||||
<view class="setting-view">
|
||||
<view class="name-box">
|
||||
<!-- 原来单个 v-for 替换成两列 -->
|
||||
<view class="mescrollUniView">
|
||||
<!-- 传1: 图2单列展示 / 传2: 图1双列瀑布流 -->
|
||||
<view class="single-col" v-if="itemType == 1">
|
||||
<ParityProductItem v-for="(item, i) in dataList" :key="item.id" :obj="item" :type="itemType"
|
||||
:tag-name="curTabName" :tag-color="curTabColor" @ok="onJumpShop" style="margin-top: 24rpx" />
|
||||
</view>
|
||||
<view class="mescrollUniView" v-else>
|
||||
<view class="fall-col">
|
||||
<ParityProductItem v-for="(item, i) in leftList" :key="item.id" :obj="item" @ok="onJumpShop"
|
||||
style="margin-top: 24rpx" />
|
||||
<ParityProductItem v-for="(item, i) in leftList" :key="item.id" :obj="item" :type="itemType"
|
||||
:tag-name="curTabName" :tag-color="curTabColor" @ok="onJumpShop" style="margin-top: 24rpx" />
|
||||
</view>
|
||||
<view class="fall-col">
|
||||
<ParityProductItem v-for="(item, i) in rightList" :key="item.id" :obj="item" @ok="onJumpShop"
|
||||
style="margin-top: 24rpx" />
|
||||
<ParityProductItem v-for="(item, i) in rightList" :key="item.id" :obj="item" :type="itemType"
|
||||
:tag-name="curTabName" :tag-color="curTabColor" @ok="onJumpShop" style="margin-top: 24rpx" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -58,6 +63,15 @@ export default {
|
||||
mixins: [MescrollMixin],
|
||||
components: { Header, TopSafe, MyBtn, ParityProductItem, CustomTabBar, MescrollUni },
|
||||
computed: {
|
||||
curTabItem() {
|
||||
return this.tabArr.find(item => item.id == this.curTab) || this.tabArr[0] || {};
|
||||
},
|
||||
curTabName() {
|
||||
return this.curTabItem.name || '信任精选';
|
||||
},
|
||||
curTabColor() {
|
||||
return this.getTabColor(this.curTabItem);
|
||||
},
|
||||
isApp() {
|
||||
// #ifdef APP-PLUS
|
||||
return true;
|
||||
@@ -89,26 +103,31 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
itemType: 1, // 1: 图2样式, 2: 图1样式
|
||||
dataList: [],
|
||||
tabArr: [
|
||||
{
|
||||
id: 7,
|
||||
name: '信任专享',
|
||||
name: '信任精选',
|
||||
color: '#7A35F6',
|
||||
icon: 'https://static.tbmall.xin/static/new-home/xinren.png',
|
||||
iconActive: 'https://static.tbmall.xin/static/new-home/xinren_active.png',
|
||||
}, {
|
||||
id: 15,
|
||||
name: '全网爆款',
|
||||
color: '#FF2A2A',
|
||||
icon: 'https://static.tbmall.xin/static/new-home/baokuan.png',
|
||||
iconActive: 'https://static.tbmall.xin/static/new-home/baokuan_active.png',
|
||||
}, {
|
||||
id: 16,
|
||||
name: '低价好物',
|
||||
color: '#FF9800',
|
||||
icon: 'https://static.tbmall.xin/static/new-home/cart.png',
|
||||
iconActive: 'https://static.tbmall.xin/static/new-home/cart_active.png',
|
||||
}, {
|
||||
id: 6,
|
||||
name: '品牌特卖',
|
||||
color: '#333333',
|
||||
icon: 'https://static.tbmall.xin/static/new-home/huiyuan.png',
|
||||
iconActive: 'https://static.tbmall.xin/static/new-home/huiyuan_active.png',
|
||||
},
|
||||
@@ -160,12 +179,21 @@ export default {
|
||||
this.downCallback();
|
||||
}
|
||||
} else {
|
||||
|
||||
this.getSearchList()
|
||||
this.getSearchList();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getTabColor(item) {
|
||||
if (!item) return '#7A35F6';
|
||||
if (item.color) return item.color;
|
||||
const name = item.name || '';
|
||||
if (name.includes('信任')) return '#7A35F6';
|
||||
if (name.includes('爆款')) return '#FF2A2A';
|
||||
if (name.includes('低价') || name.includes('好物')) return '#FF9800';
|
||||
if (name.includes('品牌') || name.includes('特卖')) return '#333333';
|
||||
return '#7A35F6';
|
||||
},
|
||||
/**
|
||||
* 查询分类列表
|
||||
*/
|
||||
@@ -278,7 +306,7 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.content-two {
|
||||
min-height: 100vh;
|
||||
background-color: #fff;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.top-header-container {
|
||||
@@ -389,6 +417,12 @@ export default {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.single-col {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mescrollUniView {
|
||||
width: calc(100vw - 48rpx);
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user