|
|
@@ -1,5 +1,31 @@
|
|
|
<template>
|
|
|
<view class="app-content">
|
|
|
+ <!-- 价格类型切换：相册 / 商城 -->
|
|
|
+ <view class="modern-tabs-container">
|
|
|
+ <view class="modern-tabs">
|
|
|
+ <view
|
|
|
+ class="modern-tab"
|
|
|
+ :class="{ 'active': priceType === 0 }"
|
|
|
+ @click="switchPriceTab(0)"
|
|
|
+ >
|
|
|
+ <view class="tab-content">
|
|
|
+ <text class="tab-icon">🏷️</text>
|
|
|
+ <text class="tab-text">相册</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="modern-tab"
|
|
|
+ :class="{ 'active': priceType === 1 }"
|
|
|
+ @click="switchPriceTab(1)"
|
|
|
+ >
|
|
|
+ <view class="tab-content">
|
|
|
+ <text class="tab-icon">💰</text>
|
|
|
+ <text class="tab-text">商城</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
<view class="list-wrap">
|
|
|
<block v-if="!$util.isEmpty(list.data)">
|
|
|
<block v-for="(item, index) in list.data" :key="item.id">
|
|
|
@@ -25,7 +51,7 @@
|
|
|
<view class="app-size-28 app-color-0" style="font-size: 28upx; font-weight: bold">{{ item.name || item.goodsName }}</view>
|
|
|
</view>
|
|
|
|
|
|
- <view class="list-det" style="position: absolute; bottom: 10upx; left: 122upx">
|
|
|
+ <view class="list-det" style="position: absolute; bottom: 15upx; left: 122upx">
|
|
|
<view v-if="item.priceType == 1" class="app-size-28 app-color-0" style="font-size: 24upx">¥{{ item.price }}</view>
|
|
|
<view v-else class="app-size-28 app-color-0" style="font-size: 24upx; border: 1px solid #ccc; border-radius: 30upx; padding: 3upx 15upx"
|
|
|
>没价格</view
|
|
|
@@ -97,6 +123,7 @@ export default {
|
|
|
mixins: [list],
|
|
|
data() {
|
|
|
return {
|
|
|
+ priceType: 0, // 0 相册（无价格），1 商城（有价格）
|
|
|
draggedIndex: -1,
|
|
|
draggedItem: null,
|
|
|
dragOffsetY: 0,
|
|
|
@@ -149,7 +176,8 @@ export default {
|
|
|
const params = {
|
|
|
cId: this.option.id,
|
|
|
page: this.list.page,
|
|
|
- pageSize: this.list.pageSize
|
|
|
+ pageSize: this.list.pageSize,
|
|
|
+ priceType: this.priceType
|
|
|
};
|
|
|
|
|
|
return getListB(params)
|
|
|
@@ -163,6 +191,13 @@ export default {
|
|
|
this.list.loading = false;
|
|
|
});
|
|
|
},
|
|
|
+ // 切换 相册 / 商城
|
|
|
+ switchPriceTab(value) {
|
|
|
+ if (this.priceType === value) return;
|
|
|
+ this.priceType = value;
|
|
|
+ this.resetList();
|
|
|
+ this._list();
|
|
|
+ },
|
|
|
|
|
|
// 响应 touchmove 事件并实时更新 transform 样式
|
|
|
transformStyle(index) {
|
|
|
@@ -488,6 +523,89 @@ export default {
|
|
|
min-height: calc(100vh - 100upx);
|
|
|
padding-bottom: 100upx;
|
|
|
}
|
|
|
+/* 现代化标签样式 */
|
|
|
+.modern-tabs-container {
|
|
|
+ padding: 8upx 10upx 12upx;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.modern-tabs {
|
|
|
+ display: flex;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 14upx;
|
|
|
+ padding: 6upx;
|
|
|
+ box-shadow: 0 2upx 12upx rgba(0, 0, 0, 0.06);
|
|
|
+ border: 2upx solid #f0f2f5;
|
|
|
+ position: relative;
|
|
|
+ z-index: 5;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.modern-tab {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ padding: 14upx 0;
|
|
|
+ position: relative;
|
|
|
+ transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
|
|
|
+ border-radius: 12upx;
|
|
|
+ margin: 0 2upx;
|
|
|
+ background-color: #fafafa;
|
|
|
+ border: 2upx solid #f2f4f7;
|
|
|
+ box-shadow: none;
|
|
|
+ .tab-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .tab-icon {
|
|
|
+ font-size: 32upx;
|
|
|
+ margin-bottom: 4upx;
|
|
|
+ display: block;
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ &.active .tab-icon {
|
|
|
+ filter: brightness(1.15);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ .tab-text {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #666;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ background: linear-gradient(135deg, #10b981 0%, #09C567 100%);
|
|
|
+ box-shadow: 0 4upx 12upx rgba(16, 185, 129, 0.25);
|
|
|
+ transform: none;
|
|
|
+ border-color: rgba(16, 185, 129, 0.25);
|
|
|
+ .tab-text {
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 28upx;
|
|
|
+ }
|
|
|
+ /* 底部圆角指示条 */
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 6upx;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 40%;
|
|
|
+ height: 6upx;
|
|
|
+ border-radius: 6upx;
|
|
|
+ background: rgba(255, 255, 255, 0.9);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /* 未选中态悬停（H5 生效，其它端无影响） */
|
|
|
+ &:not(.active):hover {
|
|
|
+ background-color: #f6f7f9;
|
|
|
+ border-color: #e9ecef;
|
|
|
+ }
|
|
|
+ &:active {
|
|
|
+ transform: scale(0.98);
|
|
|
+ }
|
|
|
+}
|
|
|
.list-wrap {
|
|
|
position: relative;
|
|
|
background-color: #fff;
|
