sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.更多组件开发

master
sws 2023-09-04 19:05:36 +08:00
parent 24f1ae8dfb
commit e2a91d49ad
7 changed files with 206 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/iconfont/iconfont.vue
View File

@ -25,7 +25,7 @@
/* iconfont.css全局注册需要将src切换成绝对路径 */
/* @/static/icon/ */
/* @import url("@/static/icon/iconfont.css"); */
@import url('https://at.alicdn.com/t/c/font_4227145_vyq5c0hv99s.css');
@import url('https://at.alicdn.com/t/c/font_4227145_sacmbmp2ve.css');
.iconfont {
display: inline-block;

58
components/more/more.vue
View File

@ -1,58 +0,0 @@
<template>
<view>
<view class="more cr-black padding-top-main padding-bottom-sm flex-row flex-warp align-c" @click="open_popup">
<text>更多</text>
<iconfont name="icon-icon-fenlei-more"></iconfont>
</view>
<!-- 弹窗 -->
<component-popup :propShow="popup_status" :propIsBar="propIsBar" propPosition="top" :propMask="false" propTop="182rpx" @onclose="quick_close_event">
<slot></slot>
</component-popup>
</view>
</template>
<script>
import componentPopup from "../popup/popup";
export default {
name: "more",
components: {
componentPopup
},
props: {
},
data() {
return {
popup_status: false,
propIsBar: false
};
},
methods: {
// 打开弹窗
open_popup() {
this.setData({
popup_status: true
});
},
// 关闭弹窗
quick_close_event(e) {
this.setData({
popup_status: false
});
},
}
}
</script>
<style scoped>
.more {
width: 30rpx;
background-color: #fff;
padding: 20rpx;
position: absolute;
top: 0;
bottom: 0;
right: 0;
z-index: 101;
}
</style>

89
components/nav-more/nav-more.vue Normal file
View File

@ -0,0 +1,89 @@
<template>
<view>
<view class="more cr-black padding-top-main padding-bottom-sm flex-row flex-warp align-c" @click="open_popup">
<text>更多</text>
<iconfont name="icon-icon-fenlei-more"></iconfont>
</view>
<!-- 弹窗 -->
<component-popup :propShow="popup_status" :propIsBar="propIsBar" propPosition="top" :propMask="false" :propTop="propTop" @onclose="quick_close_event">
<view class="padding-vertical-lg">
<view class="padding-left-main padding-bottom-main">全部分类</view>
<view class="divider-b">
<slot></slot>
</view>
<view class="tc padding-top-lg" @click="quick_close_event">
<text>点击收起</text>
<iconfont name="icon-icon-fenlei-top"></iconfont>
</view>
</view>
</component-popup>
</view>
</template>
<script>
import componentPopup from "../popup/popup";
export default {
name: "more",
components: {
componentPopup
},
props: {
propData: {
type: Array,
default: () => {
return []
}
},
propTop: {
type: String,
default: ''
},
propStatus: {
type: Boolean,
default: false
}
},
watch: {
propStatus(newVal, oldVal) {
if (newVal !== oldVal) {
this.setData({
popup_status: newVal
});
}
}
},
data() {
return {
popup_status: false,
propIsBar: false
};
},
methods: {
// 打开弹窗
open_popup() {
this.$emit('open-popup', true);
},
// 关闭弹窗
quick_close_event(e) {
this.setData({
popup_status: false
});
},
}
}
</script>
<style scoped>
.more {
width: 30rpx;
background-color: #fff;
padding: 15rpx 20rpx;
position: absolute;
top: 0;
bottom: 0;
right: 0;
z-index: 101;
white-space: normal;
word-break: break-all;
}
</style>

47
pages/goods-category/goods-category.css
View File

@ -88,25 +88,50 @@
* 商品列表模式
*/
.category-content.goods-model {
padding-top: 150rpx;
padding-top: 182rpx;
}
.top-nav {
height: 150rpx;
height: 182rpx;
top: 0;
left: 0;
z-index: 2;
z-index: 3;
}
.top-nav-scroll {
width: calc(100% - 70rpx);
}
.top-nav .icon-content {
width: 80rpx;
height: 80rpx;
width: 92rpx;
height: 92rpx;
padding: 1px;
}
.top-nav-scroll .item:first-of-type {
padding-left: 16rpx;
}
.top-nav .item {
height: 180rpx;
padding: 0 15rpx;
padding: 20rpx 4rpx;
}
.nav-list-more {
width: 100%;
max-height: 550rpx;
overflow-y: auto;
}
.nav-list-more image {
width: 92rpx;
height: 92rpx;
border-radius: 50%;
margin-bottom: 10rpx;
}
.nav-list-more .item {
width: 20%;
padding: 20rpx 0;
}
.right-content-actual {
@ -115,8 +140,8 @@
.goods-right-content {
width: calc(100% - 200rpx);
height: calc(100% - 150rpx);
top: 150rpx;
height: calc(100% - 182rpx);
top: 182rpx;
right: 0;
background: #fff;
}
@ -135,8 +160,8 @@
}
.goods-list .goods-img {
width: 190rpx;
height: 190rpx !important;
width: 182rpx;
height: 182rpx !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}

45
pages/goods-category/goods-category.vue
View File

@ -33,18 +33,38 @@
<block v-if="category_show_level == 0">
<!-- 一级导航 -->
<view class="top-nav bg-white wh-auto pa br-b scroll-view-horizontal">
<scroll-view :scroll-x="true" :scroll-with-animation="true" :scroll-into-view="'one-nav-item-'+nav_active_index" class="ht-auto">
<scroll-view :scroll-x="true" :scroll-with-animation="true" :scroll-into-view="'one-nav-item-'+nav_active_index" class="top-nav-scroll">
<block v-for="(item, index) in category_list" :key="index">
<view :class="'text-size-sm item tc cr-base cp dis-inline-block ' + (nav_active_index == index ? 'cr-main border-color-main fw-b' : '')" :id="'one-nav-item-'+index"
:data-index="index" :data-itemtwoindex="-1" :data-itemthreeindex="-1" @tap="nav_event">
<view class="item tc cr-base cp dis-inline-block text-size-xss" :id="'one-nav-item-'+index" :data-index="index" :data-itemtwoindex="-1" :data-itemthreeindex="-1"
@tap="nav_event">
<view :class="'icon-content circle br auto ' + (nav_active_index == index ? 'border-color-main' : '')">
<image :src="((item[category_goods_model_icon_field] || null) == null) ? common_static_url+'images.png' : item[category_goods_model_icon_field]"
mode="aspectFit" class="icon dis-block auto wh-auto ht-auto circle"></image>
</view>
<view class="margin-top-xs">{{item.name}}</view>
<view class="padding-left-sm padding-right-sm round margin-top-xs" :class="nav_active_index == index ? 'bg-main border-color-main cr-white' : ''">{{item.name}}
</view>
</view>
</block>
</scroll-view>
<component-nav-more prop-top="98rpx" :prop-status="popupStatus" @open-popup="open_popup_event">
<view class="nav-list-more">
<view class="flex-row flex-warp align-c">
<block v-for="(item, index) in category_list" :key="index">
<view class="item tc cr-base cp text-size-xss" :id="'one-nav-item-'+index" :data-index="index" :data-itemtwoindex="-1" :data-itemthreeindex="-1"
@tap="nav_event">
<view :class="'icon-content circle br auto ' + (nav_active_index == index ? 'border-color-main' : '')">
<image :src="((item[category_goods_model_icon_field] || null) == null) ? common_static_url+'images.png' : item[category_goods_model_icon_field]"
mode="aspectFit" class="icon dis-block auto wh-auto ht-auto circle"></image>
</view>
<view class="dis-inline-block padding-left-sm padding-right-sm round margin-top-xs"
:class="nav_active_index == index ? 'bg-main border-color-main cr-white' : ''">
{{item.name}}
</view>
</view>
</block>
</view>
</view>
</component-nav-more>
</view>
<!-- 二级导航 -->
<view v-if="category_one_subset_count > 0" class="left-nav bg-white ht-auto">
@ -318,6 +338,7 @@
import componentBadge from "../../components/badge/badge";
import componentCartParaCurve from '../../components/cart-para-curve/cart-para-curve';
import componentUserBase from "../../components/user-base/user-base";
import componentNavMore from "../../components/nav-more/nav-more";
var common_static_url = app.globalData.get_static_url('common');
// 状态栏高度
@ -372,7 +393,8 @@
temp_opt_data: null,
// 标签插件
plugins_label_data: null,
themeColor: app.globalData.get_theme_color()
themeColor: app.globalData.get_theme_color(),
popupStatus: false
};
},
@ -384,7 +406,8 @@
componentPopup,
componentBadge,
componentCartParaCurve,
componentUserBase
componentUserBase,
componentNavMore
},
props: {},
@ -685,7 +708,8 @@
data_three_content: temp_data_three_content,
data_page: 1,
data_list_loding_status: 1,
data_list: []
data_list: [],
popupStatus: false
});
// 商品模式则读取商品
@ -695,6 +719,13 @@
}
},
// 打开弹窗
open_popup_event(e) {
this.setData({
popupStatus: true
});
},
// 分类事件
category_event(e) {
uni.navigateTo({

27
pages/plugins/brand/index/index.css
View File

@ -6,18 +6,29 @@
width: calc(100% - 70rpx);
}
.nav-list-more {
width: 100%;
max-height: 600rpx;
overflow-y: auto;
.nav-list .item:first-of-type {
margin-left: 16rpx;
}
.nav-list .item {
padding: 20rpx 18rpx;
padding: 20rpx 4rpx;
}
.nav-list-more image,
.nav-list image {
width: 92rpx;
height: 92rpx;
margin: 0 15rpx;
border-radius: 50%;
margin-bottom: 10rpx;
}
.nav-list-more {
width: 100%;
max-height: 550rpx;
overflow-y: auto;
}
.nav-list-more image {
width: 92rpx;
height: 92rpx;
border-radius: 50%;
@ -35,6 +46,7 @@
.data-list .item {
width: calc(50% - 10rpx);
margin-bottom: 20rpx;
text-align: center;
}
.data-list .item:nth-child(2n) {
@ -46,6 +58,7 @@
}
.data-list .item image {
width: 100%;
padding-top: 24rpx;
width: calc(100% - 48rpx);
height: 160rpx !important;
}

33
pages/plugins/brand/index/index.vue
View File

@ -6,25 +6,29 @@
<scroll-view v-if="(brand_category_list || null) != null && brand_category_list.length > 0" class="nav-list scroll-view-horizontal bg-white oh" scroll-x="true">
<view class="flex-row flex-nowrap align-c">
<block v-for="(item, index) in brand_category_list" :key="index">
<view :class="'item flex-col align-c ' + (nav_active_value == item.id ? 'cr-main' : '')" @tap="nav_event" :data-value="item.id">
<view class="item flex-col align-c text-size-xss" @tap="nav_event" :data-value="item.id">
<image :src="item.icon" mode="aspectFit"></image>
{{item.name}}
<view class="padding-left-sm padding-right-sm round" :class="nav_active_value == item.id ? 'bg-main cr-white' : ''">
{{item.name}}
</view>
</view>
</block>
</view>
</scroll-view>
<component-more>
<component-nav-more :prop-status="popupStatus" @open-popup="open_popup_event">
<view class="nav-list-more">
<view class="flex-row flex-warp align-c">
<block v-for="(item, index) in brand_category_list" :key="index">
<view :class="'item flex-col align-c ' + (nav_active_value == item.id ? 'cr-main' : '')" @tap="nav_event" :data-value="item.id">
<view class="item flex-col align-c text-size-xss" @tap="nav_event" :data-value="item.id">
<image :src="item.icon" mode="aspectFit"></image>
{{item.name}}
<view class="padding-left-sm padding-right-sm round" :class="nav_active_value == item.id ? 'bg-main cr-white' : ''">
{{item.name}}
</view>
</view>
</block>
</view>
</view>
</component-more>
</component-nav-more>
</view>
<!-- 列表 -->
@ -35,7 +39,6 @@
<image :src="item.logo" mode="aspectFit"></image>
<view class="padding-main tc">
<view class="single-text fw-b cr-base">{{item.name}}</view>
<view class="multi-text cr-grey margin-top-sm">{{item.describe}}</view>
</view>
</navigator>
</view>
@ -55,7 +58,7 @@
const app = getApp();
import componentNoData from "../../../../components/no-data/no-data";
import componentBottomLine from "../../../../components/bottom-line/bottom-line";
import componentMore from "../../../../components/more/more";
import componentNavMore from "../../../../components/nav-more/nav-more";
export default {
data() {
@ -69,14 +72,15 @@
brand_category_list: [],
nav_active_value: 0,
// 自定义分享信息
share_info: {}
share_info: {},
popupStatus: false,
};
},
components: {
componentNoData,
componentBottomLine,
componentMore
componentNavMore
},
props: {},
@ -154,10 +158,17 @@
// 导航事件
nav_event(e) {
this.setData({
nav_active_value: e.currentTarget.dataset.value || 0
nav_active_value: e.currentTarget.dataset.value || 0,
popupStatus: false
});
this.nav_active_handle();
},
// 打开弹窗
open_popup_event(e) {
this.setData({
popupStatus: true
});
},
// 导航选中处理
nav_active_handle() {