wgh/coreshoppro
1
0
Fork 0
mirror of http://git.coreshop.cn/jianweie/coreshoppro.git synced 2026-02-05 07:29:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

【调整】小程序前端移除【uni-icons】【uni-transition】组件，使用uview框架自带替换。

Browse Source
This commit is contained in:
大灰灰
2022-09-17 21:29:07 +08:00
parent 790237fa6c
commit 0929ed6bbf
6 changed files with 220 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CoreCms.Net.Uni-App/CoreShopProfessional-UniApp/components/fy-dropdown-item/fy-dropdown-item.scss
View File

@@ -8,4 +8,4 @@
.fy_dropdown-item_scroll{@include vue-flex(column);border-top: 1px solid #f2f2f2;} .fy_dropdown-item_scroll{@include vue-flex(column);border-top: 1px solid #f2f2f2;}
.fy_dropdown-item_scroll_cell{@include vue-flex(row);padding: 0 30rpx;justify-content: space-between;align-items: center;border-bottom: 1px solid #f6f6f6;background-color: #FFFFFF;} .fy_dropdown-item_scroll_cell{@include vue-flex(row);padding: 0 30rpx;justify-content: space-between;align-items: center;border-bottom: 1px solid #f6f6f6;background-color: #FFFFFF;}
.fy_cell_title{font-size: 30rpx;text-align: left;color: #909399;} .fy_cell_title{font-size: 26rpx;text-align: left;color: #909399;}

7
CoreCms.Net.Uni-App/CoreShopProfessional-UniApp/components/fy-dropdown-item/fy-dropdown-item.vue
View File

@@ -6,11 +6,10 @@
</template> </template>
<template v-else> <template v-else>
<scroll-view :scroll-y="true" class="fy_dropdown-item_scroll" :style="getScrollStyle"> <scroll-view :scroll-y="true" class="fy_dropdown-item_scroll" :style="getScrollStyle">
<view v-for="(item, index) in options" :key="index" @click.stop.prevent="cellClick(item.value)" class="fy_dropdown-item_scroll_cell" <view v-for="(item, index) in options" :key="index" @click.stop.prevent="cellClick(item.value)" class="fy_dropdown-item_scroll_cell"
:style="{'height': `${itemHeight}rpx`, 'line-height': `${itemHeight}rpx`}" :style="{'height': `${itemHeight}rpx`, 'line-height': `${itemHeight}rpx`}">
>
<text class="fy_cell_title" :style="{ color: value == item.value ? activeColor : inactiveColor }">{{ item.label }}</text> <text class="fy_cell_title" :style="{ color: value == item.value ? activeColor : inactiveColor }">{{ item.label }}</text>
<uni-icons v-if="value == item.value" type="checkmarkempty" size="22" :color="activeColor" /> <u-icon name="arrow-down" :color="activeColor" v-if="value == item.value" size="16"></u-icon>
</view> </view>
</scroll-view> </scroll-view>
</template> </template>

434
CoreCms.Net.Uni-App/CoreShopProfessional-UniApp/components/fy-dropdown/fy-dropdown.vue
View File

@@ -1,233 +1,231 @@
<template> <template>
<view class="fy_dropdown" @click.stop.prevent="() => {}"> <view class="fy_dropdown" @click.stop.prevent="() => {}">
<view :class="['fy_dropdown__menu', borderBottom ? 'fy_border-bottom' : '']" id="fy_dropdown__menu" :style="{ 'height': `${height}rpx`, 'background-color': backgroundColor }"> <view :class="['fy_dropdown__menu', borderBottom ? 'fy_border-bottom' : '']" id="fy_dropdown__menu" :style="{ 'height': `${height}rpx`, 'background-color': backgroundColor }">
<view class="fy_dropdown__menu_mian"> <view class="fy_dropdown__menu_mian">
<view class="fy_dropdown__menu__left" :style="{ height: `${height}rpx` }"> <view class="fy_dropdown__menu__left" :style="{ height: `${height}rpx` }">
<slot name="left"></slot> <slot name="left"></slot>
</view> </view>
<view class="fy_dropdown__menu__center"> <view class="fy_dropdown__menu__center">
<view class="fy_dropdown__menu__item" :style="{ height: `${height}rpx` }" v-for="(item, index) in menuList" :key="index" @click="handlerMenuClick(index, item.dropdownKey)"> <view class="fy_dropdown__menu__item" :style="{ height: `${height}rpx` }" v-for="(item, index) in menuList" :key="index" @click="handlerMenuClick(index, item.dropdownKey)">
<view class="fy_flex"> <view class="fy_flex">
<text class="fy_dropdown__menu__item__text" v-if="item.title" <text class="fy_dropdown__menu__item__text" v-if="item.title"
:style="{ color: item.disabled ? '#c0c4cc' : (index === current || highlightIndex == index) ? activeColor : inactiveColor, fontSize: `${titleSize}rpx` }" :style="{ color: item.disabled ? '#c0c4cc' : (index === current || highlightIndex == index) ? activeColor : inactiveColor, fontSize: `${titleSize}rpx` }">{{item.title}}</text>
>{{item.title}}</text> <view class="fy_dropdown__menu__item__arrow" :style="{'transform': index === current ? 'scale(0.8) rotate(180deg)' : 'scale(1) rotate(0deg)'}">
<view class="fy_dropdown__menu__item__arrow" :style="{'transform': index === current ? 'scale(0.8) rotate(180deg)' : 'scale(1) rotate(0deg)'}"> <u-icon :name="menuIcon" :color="index === current || highlightIndex == index ? activeColor : '#c0c4cc'" :size="menuIconSize"></u-icon>
<uni-icons :type="menuIcon" :size="menuIconSize" :color="index === current || highlightIndex == index ? activeColor : '#c0c4cc'" /> </view>
</view> </view>
</view> </view>
</view> </view>
</view> <view class="fy_dropdown__menu__right" :style="{ height: `${height}rpx` }">
<view class="fy_dropdown__menu__right" :style="{ height: `${height}rpx` }"> <slot name="right"></slot>
<slot name="right"></slot> </view>
</view> </view>
</view> </view>
</view> <u-transition :mode="['fade']" :show="active" :duration="duration" :customStyle="maskClass" @click="handlerMaskClick"></u-transition>
<u-transition :mode="['fade']" :show="active" :duration="duration" :customStyle="transClass">
<uni-transition :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="active" @click="handlerMaskClick" /> <view class="fy_dropdown__content__popup">
<uni-transition :mode-class="['fade']" :styles="transClass" :duration="duration" :show="active"> <slot></slot>
<view class="fy_dropdown__content__popup"> </view>
<slot></slot> </u-transition>
</view> </view>
</uni-transition>
</view>
</template> </template>
<script> <script>
/** /**
* dropdown 下拉菜单 * dropdown 下拉菜单
* @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景 * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
* @property {String} active-color 标题和选项卡选中的颜色（默认#00bcd4） * @property {String} active-color 标题和选项卡选中的颜色（默认#00bcd4）
* @property {String} inactive-color 标题和选项卡未选中的颜色（默认#606266） * @property {String} inactive-color 标题和选项卡未选中的颜色（默认#606266）
* @property {Boolean} close-on-click-mask 点击遮罩是否关闭菜单（默认true） * @property {Boolean} close-on-click-mask 点击遮罩是否关闭菜单（默认true）
* @property {Boolean} close-on-click-self 点击当前激活项标题是否关闭菜单（默认true） * @property {Boolean} close-on-click-self 点击当前激活项标题是否关闭菜单（默认true）
* @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300） * @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
* @property {String | Number} height 标题菜单的高度，单位任意（默认90） * @property {String | Number} height 标题菜单的高度，单位任意（默认90）
* @property {String | Number} border-radius 菜单展开内容下方的圆角值，单位任意（默认0） * @property {String | Number} border-radius 菜单展开内容下方的圆角值，单位任意（默认0）
* @property {Boolean} border-bottom 标题菜单是否显示下边框（默认false） * @property {Boolean} border-bottom 标题菜单是否显示下边框（默认false）
* @property {String | Number} title-size 标题的字体大小，单位任意，数值默认为rpx单位（默认28） * @property {String | Number} title-size 标题的字体大小，单位任意，数值默认为rpx单位（默认28）
* @event {Function} open 下拉菜单被打开时触发 * @event {Function} open 下拉菜单被打开时触发
* @event {Function} close 下拉菜单被关闭时触发 * @event {Function} close 下拉菜单被关闭时触发
* @example <fy-dropdown></fy-dropdown> * @example <fy-dropdown></fy-dropdown>
*/ */
export default { export default {
name: 'fy-dropdown', name: 'fy-dropdown',
props: { props: {
// 菜单标题和选项的激活态颜色 // 菜单标题和选项的激活态颜色
activeColor: { activeColor: {
type: String, default: '#00bcd4' type: String, default: '#00bcd4'
},
// 菜单标题和选项的未激活态颜色
inactiveColor: {
type: String, default: '#606266'
},
// 点击遮罩是否关闭菜单
closeOnClickMask: {
type: Boolean, default: true
},
// 点击当前激活项标题是否关闭菜单
closeOnClickSelf: {
type: Boolean, default: true
},
// 过渡时间
duration: {
type: [Number, String], default: 300
},
// 标题菜单的高度，单位任意，数值默认为rpx单位
height: {
type: [Number, String], default: 90
},
// 是否显示下边框
borderBottom: {
type: Boolean, default: false
},
// 标题的字体大小
titleSize: {
type: [Number, String], default: 28
},
// 菜单右侧的icon图标
menuIcon: {
type: String, default: 'arrowdown'
},
// 菜单右侧图标的大小
menuIconSize: {
type: [Number, String], default: 11
},
// 背景色
backgroundColor: {
type: String, default: 'transparent'
},
// 显示的菜单
menuList: {
type: Array, default() { return [] }
},
// h5的导航栏高度
H5NavBarHeight: {
type: Number, default: 44
},
},
data() {
return {
titleHeight: 40,
active: false, // 下拉菜单的状态
// 当前是第几个菜单处于激活状态，小程序中此处不能写成false或者""，否则后续将current赋值为0，
// 无能的TX没有使用===而是使用==判断，导致程序认为前后二者没有变化，从而不会触发视图更新
current: 99999,
currentKey: '',
// 让某个菜单保持高亮的状态
highlightIndex: 99999,
contentHeight: 0, // 内容高度
maskClass: { // 遮罩层样式
'position': 'fixed', 'bottom': 0, 'top': 0, 'left': 0, 'right': 0, 'backgroundColor': 'rgba(0, 0, 0, 0.6)', 'z-index': 999999
}, },
transClass: { // 内容弹框样式 // 菜单标题和选项的未激活态颜色
'position': 'fixed', 'left': 0, 'right': 0, 'top': 0, 'z-index': 999999 inactiveColor: {
type: String, default: '#606266'
}, },
// 点击遮罩是否关闭菜单
// #ifndef MP closeOnClickMask: {
childList: [], type: Boolean, default: true
// #endif },
timers: null // 点击当前激活项标题是否关闭菜单
} closeOnClickSelf: {
}, type: Boolean, default: true
created() { },
// #ifdef MP // 过渡时间
// 供子组件调用，不能在data中声明变量，否则在微信小程序会造成循环引用而报错 duration: {
this.childList = []; type: [Number, String], default: 300
// #endif },
}, // 标题菜单的高度，单位任意，数值默认为rpx单位
mounted() { height: {
this.$nextTick(()=>{ type: [Number, String], default: 90
this.titleHeight = uni.upx2px(this.height); },
}) // 是否显示下边框
}, borderBottom: {
methods: { type: Boolean, default: false
// 点击菜单 },
handlerMenuClick(index, dropdownKey) { // 标题的字体大小
// 判断是否被禁用 titleSize: {
if (this.menuList[index].disabled) return; type: [Number, String], default: 28
// 如果点击时的索引和当前激活项索引相同，意味着点击了激活项，需要收起下拉菜单 },
if (index == this.current && this.closeOnClickSelf) { // 菜单右侧的icon图标
return this.close(); menuIcon: {
} type: String, default: 'arrow-down'
},
// 菜单右侧图标的大小
menuIconSize: {
type: [Number, String], default: 11
},
// 背景色
backgroundColor: {
type: String, default: 'transparent'
},
// 显示的菜单
menuList: {
type: Array, default() { return [] }
},
// h5的导航栏高度
H5NavBarHeight: {
type: Number, default: 44
},
},
data() {
return {
titleHeight: 40,
clearTimeout(this.timers); active: false, // 下拉菜单的状态
this.timers = setTimeout(() => { // 当前是第几个菜单处于激活状态，小程序中此处不能写成false或者""，否则后续将current赋值为0，
this.open(index, dropdownKey); // 无能的TX没有使用===而是使用==判断，导致程序认为前后二者没有变化，从而不会触发视图更新
clearTimeout(this.timers); current: 99999,
}, 0); currentKey: '',
}, // 让某个菜单保持高亮的状态
// 打开下拉菜单 highlightIndex: 99999,
open(index, dropdownKey) { contentHeight: 0, // 内容高度
// 重置高亮索引，否则会造成多个菜单同时高亮
this.highlightIndex = 9999;
// 展开时，设置下拉内容的样式
// 标记展开状态以及当前展开项的索引
this.active = true;
this.current = index;
this.currentKey = dropdownKey;
this.getContentHeight(); maskClass: { // 遮罩层样式
'position': 'fixed', 'bottom': 0, 'top': 0, 'left': 0, 'right': 0, 'backgroundColor': 'rgba(0, 0, 0, 0.6)', 'z-index': 999999
},
transClass: { // 内容弹框样式
'position': 'fixed', 'left': 0, 'right': 0, 'top': 0, 'z-index': 999999
},
this.childList.forEach(item=>item.init()) // #ifndef MP
childList: [],
// #endif
timers: null
}
},
created() {
// #ifdef MP
// 供子组件调用，不能在data中声明变量，否则在微信小程序会造成循环引用而报错
this.childList = [];
// #endif
},
mounted() {
this.$nextTick(() => {
this.titleHeight = uni.upx2px(this.height);
})
},
methods: {
// 点击菜单
handlerMenuClick(index, dropdownKey) {
// 判断是否被禁用
if (this.menuList[index].disabled) return;
// 如果点击时的索引和当前激活项索引相同，意味着点击了激活项，需要收起下拉菜单
if (index == this.current && this.closeOnClickSelf) {
return this.close();
}
this.$emit('open', this.current); clearTimeout(this.timers);
}, this.timers = setTimeout(() => {
// 设置下拉菜单处于收起状态 this.open(index, dropdownKey);
close() { clearTimeout(this.timers);
this.$emit('close', this.current); }, 0);
// 设置为收起状态，同时current归位，设置为空字符串 },
this.active = false; // 打开下拉菜单
this.current = 99999; open(index, dropdownKey) {
this.currentKey = ''; // 重置高亮索引，否则会造成多个菜单同时高亮
this.highlightIndex = 9999;
// 展开时，设置下拉内容的样式
// 标记展开状态以及当前展开项的索引
this.active = true;
this.current = index;
this.currentKey = dropdownKey;
// #ifndef MP this.getContentHeight();
this.childList = [];
// #endif this.childList.forEach(item => item.init())
},
// 点击遮罩 this.$emit('open', this.current);
handlerMaskClick() { },
// 如果不允许点击遮罩，直接返回 // 设置下拉菜单处于收起状态
if (!this.closeOnClickMask) return; close() {
this.close(); this.$emit('close', this.current);
}, // 设置为收起状态，同时current归位，设置为空字符串
// 外部手动设置某个菜单高亮 this.active = false;
highlight(index = undefined) { this.current = 99999;
this.highlightIndex = index !== undefined ? index : 99999; this.currentKey = '';
},
// 获取下拉菜单内容的高度 // #ifndef MP
getContentHeight() { this.childList = [];
// #ifdef APP-NVUE // #endif
uni.createSelectorQuery().in(this).select('#fy_dropdown__menu').boundingClientRect().exec(rect => { },
const data = rect[0]; // 点击遮罩
const top = data.top + this.titleHeight + 'px'; handlerMaskClick() {
this.maskClass.top = top; // 如果不允许点击遮罩，直接返回
this.transClass.top = top; if (!this.closeOnClickMask) return;
}); this.close();
// #endif },
// 外部手动设置某个菜单高亮
// #ifdef H5 highlight(index = undefined) {
uni.createSelectorQuery().in(this).select('#fy_dropdown__menu').boundingClientRect().exec(rect => { this.highlightIndex = index !== undefined ? index : 99999;
const data = rect[0]; },
const top = data.top + this.titleHeight + this.H5NavBarHeight + 'px'; // 获取下拉菜单内容的高度
this.maskClass.top = top; getContentHeight() {
this.transClass.top = top; // #ifdef APP-NVUE
}); uni.createSelectorQuery().in(this).select('#fy_dropdown__menu').boundingClientRect().exec(rect => {
// #endif const data = rect[0];
const top = data.top + this.titleHeight + 'px';
// #ifndef APP-NVUE || H5 this.maskClass.top = top;
uni.createSelectorQuery().in(this).select('.fy_dropdown__menu').boundingClientRect(rect => { this.transClass.top = top;
const top = rect.top + this.titleHeight + 'px'; });
this.maskClass.top = top; // #endif
this.transClass.top = top;
}).exec() // #ifdef H5
// #endif uni.createSelectorQuery().in(this).select('#fy_dropdown__menu').boundingClientRect().exec(rect => {
} const data = rect[0];
} const top = data.top + this.titleHeight + this.H5NavBarHeight + 'px';
} this.maskClass.top = top;
this.transClass.top = top;
});
// #endif
// #ifndef APP-NVUE || H5
uni.createSelectorQuery().in(this).select('.fy_dropdown__menu').boundingClientRect(rect => {
const top = rect.top + this.titleHeight + 'px';
this.maskClass.top = top;
this.transClass.top = top;
}).exec()
// #endif
}
}
}
</script> </script>
<style lang="scss"> <style lang="scss">
@import './fy-dropdown.scss'; @import './fy-dropdown.scss';
</style> </style>

132
CoreCms.Net.Uni-App/CoreShopProfessional-UniApp/components/uni-icons/icons.js
View File

@@ -1,132 +0,0 @@
export default {
"pulldown": "\ue588",
"refreshempty": "\ue461",
"back": "\ue471",
"forward": "\ue470",
"more": "\ue507",
"more-filled": "\ue537",
"scan": "\ue612",
"qq": "\ue264",
"weibo": "\ue260",
"weixin": "\ue261",
"pengyouquan": "\ue262",
"loop": "\ue565",
"refresh": "\ue407",
"refresh-filled": "\ue437",
"arrowthindown": "\ue585",
"arrowthinleft": "\ue586",
"arrowthinright": "\ue587",
"arrowthinup": "\ue584",
"undo-filled": "\ue7d6",
"undo": "\ue406",
"redo": "\ue405",
"redo-filled": "\ue7d9",
"bars": "\ue563",
"chatboxes": "\ue203",
"camera": "\ue301",
"chatboxes-filled": "\ue233",
"camera-filled": "\ue7ef",
"cart-filled": "\ue7f4",
"cart": "\ue7f5",
"checkbox-filled": "\ue442",
"checkbox": "\ue7fa",
"arrowleft": "\ue582",
"arrowdown": "\ue581",
"arrowright": "\ue583",
"smallcircle-filled": "\ue801",
"arrowup": "\ue580",
"circle": "\ue411",
"eye-filled": "\ue568",
"eye-slash-filled": "\ue822",
"eye-slash": "\ue823",
"eye": "\ue824",
"flag-filled": "\ue825",
"flag": "\ue508",
"gear-filled": "\ue532",
"reload": "\ue462",
"gear": "\ue502",
"hand-thumbsdown-filled": "\ue83b",
"hand-thumbsdown": "\ue83c",
"hand-thumbsup-filled": "\ue83d",
"heart-filled": "\ue83e",
"hand-thumbsup": "\ue83f",
"heart": "\ue840",
"home": "\ue500",
"info": "\ue504",
"home-filled": "\ue530",
"info-filled": "\ue534",
"circle-filled": "\ue441",
"chat-filled": "\ue847",
"chat": "\ue263",
"mail-open-filled": "\ue84d",
"email-filled": "\ue231",
"mail-open": "\ue84e",
"email": "\ue201",
"checkmarkempty": "\ue472",
"list": "\ue562",
"locked-filled": "\ue856",
"locked": "\ue506",
"map-filled": "\ue85c",
"map-pin": "\ue85e",
"map-pin-ellipse": "\ue864",
"map": "\ue364",
"minus-filled": "\ue440",
"mic-filled": "\ue332",
"minus": "\ue410",
"micoff": "\ue360",
"mic": "\ue302",
"clear": "\ue434",
"smallcircle": "\ue868",
"close": "\ue404",
"closeempty": "\ue460",
"paperclip": "\ue567",
"paperplane": "\ue503",
"paperplane-filled": "\ue86e",
"person-filled": "\ue131",
"contact-filled": "\ue130",
"person": "\ue101",
"contact": "\ue100",
"images-filled": "\ue87a",
"phone": "\ue200",
"images": "\ue87b",
"image": "\ue363",
"image-filled": "\ue877",
"location-filled": "\ue333",
"location": "\ue303",
"plus-filled": "\ue439",
"plus": "\ue409",
"plusempty": "\ue468",
"help-filled": "\ue535",
"help": "\ue505",
"navigate-filled": "\ue884",
"navigate": "\ue501",
"mic-slash-filled": "\ue892",
"search": "\ue466",
"settings": "\ue560",
"sound": "\ue590",
"sound-filled": "\ue8a1",
"spinner-cycle": "\ue465",
"download-filled": "\ue8a4",
"personadd-filled": "\ue132",
"videocam-filled": "\ue8af",
"personadd": "\ue102",
"upload": "\ue402",
"upload-filled": "\ue8b1",
"starhalf": "\ue463",
"star-filled": "\ue438",
"star": "\ue408",
"trash": "\ue401",
"phone-filled": "\ue230",
"compose": "\ue400",
"videocam": "\ue300",
"trash-filled": "\ue8dc",
"download": "\ue403",
"chatbubble-filled": "\ue232",
"chatbubble": "\ue202",
"cloud-download": "\ue8e4",
"cloud-upload-filled": "\ue8e5",
"cloud-upload": "\ue8e6",
"cloud-download-filled": "\ue8e9",
"headphones":"\ue8bf",
"shop":"\ue609"
}

70
CoreCms.Net.Uni-App/CoreShopProfessional-UniApp/components/uni-icons/uni-icons.vue
View File

File diff suppressed because one or more lines are too long

BIN
CoreCms.Net.Uni-App/CoreShopProfessional-UniApp/components/uni-icons/uni.ttf
View File

Binary file not shown.