|
@@ -100,7 +100,7 @@
|
|
|
</view>
|
|
</view>
|
|
|
</block>
|
|
</block>
|
|
|
|
|
|
|
|
- <!-- 花束分类(category/list,平铺展示) -->
|
|
|
|
|
|
|
+ <!-- 花束分类(category/list 平铺):无图标,名称水平+垂直居中 -->
|
|
|
<view
|
|
<view
|
|
|
v-for="cat in bouquetCategories"
|
|
v-for="cat in bouquetCategories"
|
|
|
:key="cat.id"
|
|
:key="cat.id"
|
|
@@ -109,22 +109,7 @@
|
|
|
:data-id="cat.id"
|
|
:data-id="cat.id"
|
|
|
@tap.stop="onBouquetNavTapByEvent"
|
|
@tap.stop="onBouquetNavTapByEvent"
|
|
|
>
|
|
>
|
|
|
- <image
|
|
|
|
|
- v-if="getBouquetIcon(cat)"
|
|
|
|
|
- class="bouquet-cate-icon"
|
|
|
|
|
- :src="getBouquetIcon(cat)"
|
|
|
|
|
- mode="aspectFill"
|
|
|
|
|
- />
|
|
|
|
|
- <view
|
|
|
|
|
- class="bouquet-cate-name-wrap"
|
|
|
|
|
- :id="'bouquet-name-wrap-' + cat.id"
|
|
|
|
|
- >
|
|
|
|
|
- <text
|
|
|
|
|
- class="bouquet-cate-name"
|
|
|
|
|
- :class="{ 'bouquet-cate-name--fill': bouquetNameFillMap[cat.id] }"
|
|
|
|
|
- :id="'bouquet-name-' + cat.id"
|
|
|
|
|
- >{{ cat.categoryName }}</text>
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ <text class="bouquet-cate-name">{{ cat.categoryName }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 花材置底(默认收起) -->
|
|
<!-- 花材置底(默认收起) -->
|
|
@@ -411,8 +396,6 @@ export default {
|
|
|
},
|
|
},
|
|
|
itemExpanded: false,
|
|
itemExpanded: false,
|
|
|
bouquetCategories: [],
|
|
bouquetCategories: [],
|
|
|
- /** 花束分类名是否占满行:true 居中,false 靠左 */
|
|
|
|
|
- bouquetNameFillMap: {},
|
|
|
|
|
itemClassList: [],
|
|
itemClassList: [],
|
|
|
activeNav: { type: '', id: '' },
|
|
activeNav: { type: '', id: '' },
|
|
|
noticeList: [],
|
|
noticeList: [],
|
|
@@ -613,10 +596,8 @@ export default {
|
|
|
} else {
|
|
} else {
|
|
|
this.bouquetCategories = []
|
|
this.bouquetCategories = []
|
|
|
}
|
|
}
|
|
|
- this.syncBouquetNameAlign()
|
|
|
|
|
}).catch(() => {
|
|
}).catch(() => {
|
|
|
this.bouquetCategories = []
|
|
this.bouquetCategories = []
|
|
|
- this.bouquetNameFillMap = {}
|
|
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
/** 花材分类与商品:item/index(与 pages/item/item 同源) */
|
|
/** 花材分类与商品:item/index(与 pages/item/item 同源) */
|
|
@@ -721,55 +702,6 @@ export default {
|
|
|
if (id === undefined || id === null || id === '') return
|
|
if (id === undefined || id === null || id === '') return
|
|
|
this.selectNav('bouquet', id)
|
|
this.selectNav('bouquet', id)
|
|
|
},
|
|
},
|
|
|
- /** 花束分类名单行高度(px),用于判断是否换行 */
|
|
|
|
|
- getBouquetNameLineHeightPx() {
|
|
|
|
|
- const sys = uni.getSystemInfoSync()
|
|
|
|
|
- return (26 * 1.3 / 750) * sys.windowWidth
|
|
|
|
|
- },
|
|
|
|
|
- /**
|
|
|
|
|
- * 测量花束分类名:占满一行或换行时居中,短文本靠左
|
|
|
|
|
- * 先按靠左渲染,再根据文字区域与容器宽度比较切换样式
|
|
|
|
|
- */
|
|
|
|
|
- syncBouquetNameAlign() {
|
|
|
|
|
- const cats = this.bouquetCategories
|
|
|
|
|
- if (!cats.length) {
|
|
|
|
|
- this.bouquetNameFillMap = {}
|
|
|
|
|
- return
|
|
|
|
|
- }
|
|
|
|
|
- this.bouquetNameFillMap = {}
|
|
|
|
|
- this.$nextTick(() => {
|
|
|
|
|
- const query = uni.createSelectorQuery().in(this)
|
|
|
|
|
- cats.forEach((cat) => {
|
|
|
|
|
- query.select(`#bouquet-name-wrap-${cat.id}`).boundingClientRect()
|
|
|
|
|
- query.select(`#bouquet-name-${cat.id}`).boundingClientRect()
|
|
|
|
|
- })
|
|
|
|
|
- query.exec((res) => {
|
|
|
|
|
- if (!res || !res.length) return
|
|
|
|
|
- const map = {}
|
|
|
|
|
- const lineH = this.getBouquetNameLineHeightPx()
|
|
|
|
|
- cats.forEach((cat, index) => {
|
|
|
|
|
- const wrap = res[index * 2]
|
|
|
|
|
- const text = res[index * 2 + 1]
|
|
|
|
|
- if (!wrap || !text || !wrap.width) {
|
|
|
|
|
- map[cat.id] = false
|
|
|
|
|
- return
|
|
|
|
|
- }
|
|
|
|
|
- const fillsWidth = text.width >= wrap.width - 4
|
|
|
|
|
- const isMultiLine = text.height > lineH * 1.35
|
|
|
|
|
- map[cat.id] = fillsWidth || isMultiLine
|
|
|
|
|
- })
|
|
|
|
|
- this.bouquetNameFillMap = map
|
|
|
|
|
- })
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- /** 花束分类图标地址 */
|
|
|
|
|
- getBouquetIcon(cat) {
|
|
|
|
|
- const img = cat.img || cat.cover || cat.smallCover || ''
|
|
|
|
|
- if (!img) return ''
|
|
|
|
|
- if (img.indexOf('http') === 0) return img
|
|
|
|
|
- const base = (this.constant.imgUrl || '').replace(/\/$/, '')
|
|
|
|
|
- return `${base}/${String(img).replace(/^\//, '')}`
|
|
|
|
|
- },
|
|
|
|
|
selectNav(type, id) {
|
|
selectNav(type, id) {
|
|
|
if (this.activeNav.type === type && String(this.activeNav.id) === String(id)) {
|
|
if (this.activeNav.type === type && String(this.activeNav.id) === String(id)) {
|
|
|
return
|
|
return
|
|
@@ -1338,56 +1270,36 @@ export default {
|
|
|
background: #fff;
|
|
background: #fff;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-/* 花束分类项(category/list 平铺) */
|
|
|
|
|
|
|
+/* 花束分类项:无图标,名称水平+垂直居中 */
|
|
|
.nav-item {
|
|
.nav-item {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
min-height: 96upx;
|
|
min-height: 96upx;
|
|
|
- padding: 16upx 12upx 16upx 14upx;
|
|
|
|
|
|
|
+ padding: 16upx 12upx;
|
|
|
font-size: 26upx;
|
|
font-size: 26upx;
|
|
|
color: #333;
|
|
color: #333;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.nav-item--bouquet {
|
|
.nav-item--bouquet {
|
|
|
flex-direction: row;
|
|
flex-direction: row;
|
|
|
- justify-content: flex-start;
|
|
|
|
|
|
|
+ justify-content: center;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- padding: 16upx 8upx 16upx 14upx;
|
|
|
|
|
|
|
+ padding: 16upx 12upx;
|
|
|
background: #fff;
|
|
background: #fff;
|
|
|
border-top: 1upx solid #f5f5f5;
|
|
border-top: 1upx solid #f5f5f5;
|
|
|
border-right: 1upx solid #f5f5f5;
|
|
border-right: 1upx solid #f5f5f5;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.bouquet-cate-icon {
|
|
|
|
|
- width: 44upx;
|
|
|
|
|
- height: 44upx;
|
|
|
|
|
- border-radius: 8upx;
|
|
|
|
|
- flex-shrink: 0;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.bouquet-cate-name-wrap {
|
|
|
|
|
- flex: 1;
|
|
|
|
|
- width: 0;
|
|
|
|
|
- min-width: 0;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: row;
|
|
|
|
|
- justify-content: flex-start;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
.bouquet-cate-name {
|
|
.bouquet-cate-name {
|
|
|
|
|
+ width: 100%;
|
|
|
max-width: 100%;
|
|
max-width: 100%;
|
|
|
font-size: 26upx;
|
|
font-size: 26upx;
|
|
|
line-height: 1.3;
|
|
line-height: 1.3;
|
|
|
- text-align: left;
|
|
|
|
|
- word-break: break-all;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-/* 占满一行或换行时:名称区域拉满并居中 */
|
|
|
|
|
-.bouquet-cate-name--fill {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
|
|
+ word-break: break-all;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
text-overflow: ellipsis;
|
|
|
display: -webkit-box;
|
|
display: -webkit-box;
|