ptrbz8h3l
/
canteen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

筛选

Browse Source
develop
宣奇瑞 1 year ago
parent 989a87aaaa
commit 6fa9b3f843
24 changed files with 3180 additions and 41 deletions
Show Stats Download Patch File Download Diff File

138
components/ay-banner/banner.vue
Unescape View File

@ -0,0 +1,138 @@
<template>
<swiper class="box" :style="style" circular @change="swiperChange" autoplay="true" interval="3000" indicator-dots="true"
:indicator-active-color="themeColor">
<swiper-item v-for="(item, index) in list" :key="index" class="box-item" @click="toDetailPage({index: index,id:item.id})">
<image :style="style_img" :src="item.img" @error="onImageError(item)" />
</swiper-item>
</swiper>
</template>
<script>
export default {
props: {
list: {
type: Array,
default () {
return []
}
},
padding: {
type: Number,
default: 0
},
isBack: {
type: [Boolean, String],
default: false
},
height: {
type: Number,
default: 0
},
borderRadius: {
type: Number,
default: 0
},
themeColor: {
type: String,
default: '#FFFFFF',
},
},
computed: {
style() {
let that = this ;
var height = parseInt(that.height);
var padding = parseInt(that.padding);
var style = '' ;
if(height>0){
style = `height:${height}rpx;`;
}
if(padding>0){
style += `padding:0rpx ${padding}rpx;`;
}
return style ;
},
style_img(){
let that = this ;
var borderRadius = that.borderRadius;
var style = '' ;
if(borderRadius>0){
style += `border-radius:${borderRadius}rpx;`;
}
return style ;
},
},
watch: {
},
data() {
return {
};
},
methods: {
swiperChange(e){
this.$emit('swiperChange', e);
},
//详情页
toDetailPage(item) {
let that = this ;
let list = that.list ;
let index = item.index ;
let data = {
curIndex: index,
item : list[index] ,
list: list
};
this.$emit('toDetailPage', data);
},
onImageError(item, index) {
//虽触发，但不会显示默认的图片
this.error = null; //这个暂没有发现作用
let obj = {
index: index,
list: this.list
};
this.$emit('Error', obj);
},
}
}
</script>
<style lang="scss">
swiper,
swiper-item{
box-sizing: border-box;
}
uni-image {
width: 100%;
height: 100%;
}
.box {
width: 100%;
height: 340upx;
.box-item {
width: 100%;
height: 100%;
padding: 0 0upx;
overflow: hidden;
}
image {
width: 100%;
height: 100%;
// border-radius: 20upx;
}
}
</style>

147
components/mxl-Dybg/Dybg.vue
Unescape View File

@ -0,0 +1,147 @@
<template>
<div class="CPT_DYBG" :style="bg + 'height:' + height">
<div class="body">
<!-- 头部留白区域 -->
<slot></slot>
</div>
<div class="background">
<div
class="circle"
:class="'move' + i"
v-for="(it, i) in circle"
:style="{
width: it.size + unit,
height: it.size + unit,
top: it.position[0] + unit,
left: it.position[1] + unit,
backgroundColor: colorful ? it.color : circleColor,
filter: blur > 0 ? 'blur(' + blur + unit + ')' : null,
mixBlendMode: circleMode,
}"
:key="i"
></div>
</div>
</div>
</template>
<script>
export default {
name: "CPT_DYBG",
props: {
bg: {
type: String,
default: "background-image:linear-gradient(to right, #ec6e66, #ff4a57);",
},
//高度继承父级100%高度，也可写固定px/rpx
height: {
type: String,
default: "100%",
},
//小圆模糊度
blur: {
type: Number,
default: 0,
},
//小圆数量
number: {
type: Number,
default: 10,
},
//小圆颜色，为数组时，会随机分配给小圆，自行测试
circleColor: {
type: [Array, String],
default: "rgba(255,255,255,0.1)",
},
//小圆的颜色混合模式，写css3 mixBlendMode参数
circleMode: {
type: String,
default: "color-dodge",
},
//小圆参数，单位模式rpx，可在data里更改unit
circleOptions: {
type: Object,
default: () => ({
maxSize: 400, //最大直径
maxX: 400, //最大横移距离
maxY: 700, //最大竖移距离
}),
},
},
computed: {
colorful: function () {
let color = this.circleColor;
if (Array.isArray(color)) {
return true;
}
},
},
data() {
return {
unit: "rpx",
speedMode: ["ease-in", "ease-out", "ease-in-out", "linear"], //移动模式
circle: [],
};
},
created() {
this.creatCircle();
},
methods: {
creatCircle() {
let n = this.number,
{ maxSize, maxX, maxY } = this.circleOptions,
circleColor = this.circleColor,
colorful = this.colorful,
circle = [];
for (let i = 0; i < n; i++) {
circle.push({
size: this.getRandomInt(maxSize),
position: [this.getRandomInt(maxX), this.getRandomInt(maxY)],
color: colorful ? this.getRandomColor() : null,
});
}
this.circle = circle;
setTimeout(() => {
//刷新该组件时，快速还原，无刷新则可删除
uni.stopPullDownRefresh();
}, 500);
},
//一个v值，一个最小值，生成不小于最小值的随机值
getRandomInt(v, min) {
min = min ? min : 0;
return parseInt(Math.random() * v + min);
},
getRandomColor() {
let color = this.circleColor,
len = color.length,
r = color[parseInt(Math.random() * len)];
console.log(r)
return r;
},
},
};
</script>
<style lang="scss" scoped>
@import "./ani.scss";
.CPT_DYBG {
overflow: hidden;
position: relative;
.body {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
z-index: 1;
}
.background {
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
.circle {
position: absolute;
border-radius: 50%;
}
}
}
</style>

61
components/mxl-Dybg/ani.scss
Unescape View File

@ -0,0 +1,61 @@
$time:2;
.move0{animation: move0 $time*5s linear infinite;}
.move1{animation: move1 $time*6s ease-in infinite;}
.move2{animation: move2 $time*7s ease-out infinite;}
.move3{animation: move3 $time*8s ease-in-out infinite;}
.move4{animation: move4 $time*9s ease-in infinite;}
.move5{animation: move5 $time*10s ease-in infinite;}
.move6{animation: move6 $time*11s linear infinite;}
.move7{animation: move7 $time*12s ease-in-out infinite;}
.move8{animation: move8 $time*13s ease-out infinite;}
//设定好的小圆运行方式
//小程序无法动态添加keyframes
//若是web，可通过document动态插入keyframes
//动态插入的效果更好，更强，更嗨皮
//向有小程序实现方式的大伙伴请教
@keyframes move0{
0%{transform:translate3d(0,0,0)}
50%{transform:translate3d(400,10rpx,0)}
100%{transform:translate3d(0,0,0)}
}
@keyframes move1{
0%{transform:translate3d(0,0,0)}
50%{transform:translate3d(0,500rpx,0)}
100%{transform:translate3d(0,0,0)}
}
@keyframes move2{
0%{transform:translate3d(0,0,0)}
50%{transform:translate3d(400rpx,800rpx,0)}
100%{transform:translate3d(0,0,0)}
}
@keyframes move3{
0%{transform:translate3d(0,0,0)}
50%{transform:translate3d(200rpx,200rpx,0)}
100%{transform:translate3d(0,0,0)}
}
@keyframes move4{
0%{transform:translate3d(0,0,0)}
50%{transform:translate3d(100rpx,700rpx,0)}
100%{transform:translate3d(0,0,0)}
}
@keyframes move5{
0%{transform:translate3d(0,0,0)}
50%{transform:translate3d(400rpx,100rpx,0)}
100%{transform:translate3d(0,0,0)}
}
@keyframes move6{
0%{transform:translate3d(0,0,0)}
50%{transform:translate3d(200rpx,10rpx,0)}
100%{transform:translate3d(0,0,0)}
}
@keyframes move7{
0%{transform:translate3d(0,0,0)}
50%{transform:translate3d(200rpx,500rpx,0)}
100%{transform:translate3d(0,0,0)}
}
@keyframes move8{
0%{transform:translate3d(0,0,0)}
50%{transform:translate3d(0,500rpx,0)}
100%{transform:translate3d(0,0,0)}
}

2
components/mxl-Dybg/intro.md
Unescape View File

@ -0,0 +1,2 @@
# DYBG [BETA1]
#### 一个简单的动态背景生成器

66
components/mxl-Dybg/test.vue
Unescape View File

@ -0,0 +1,66 @@
<template>
<div class="testPage">
<div class="dybgArea">
<Dybg
ref="dybg"
:blur="blur"
:circleMode="circleMode"
:circleColor="circleColor"
:bg="bg"
>
<div class="dyContent">
<div>
<h2>DYBG</h2>
<p>-- 动态背景 --</p>
</div>
</div>
</Dybg>
</div>
</div>
</template>
<script>
export default {
name: "testPage",
data() {
return {
blur: 5, //小圆模糊值,0/不传则不模糊
bg: "background-image:linear-gradient(to right, #ec6e66, #ff4a57);", //背景颜色，可当style属性写任何样式，必须以;结尾
circleMode: "color-dodge", //css3 mixBlendMode参数
circleColor: "rgba(237,185,59,0.2)", //移动的小圆颜色，为数组时，会随机分配给小圆
};
},
onPullDownRefresh(){
this.$refs.dybg.creatCircle();
},
created() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.textPage {
height: 100vh;
overflow: hidden;
}
.dybgArea {
height: 600rpx;
.dyContent {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
h2 {
text-align: center;
font-size: 50rpx;
font-weight: lighter;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 8rpx 8rpx rgba(0,0,0,0.2);
}
p {
font-size: 30rpx;
color: rgba(255, 255, 255, 0.5);
text-shadow: 0 4rpx 4rpx rgba(0,0,0,0.1);
}
}
}
</style>

95
components/xiu-imageBox/index.vue
Unescape View File

@ -0,0 +1,95 @@
<template>
<img :src="captchaSrc" @click="onClick" :class="isRotate ? 'run' : ''" :style="{
width:width ? width +'rpx' : '100%',
height:height ? height +'rpx' : '100%',
marginTop:marginTop ? marginTop +'rpx' : '',
marginBottom:marginBottom ? marginBottom +'rpx' : '',
marginLeft:marginLeft ? marginLeft +'rpx' : '',
marginRight:marginRight ? marginRight +'rpx' : '',
borderRadius:borderRadius ? borderRadius +'rpx' : '',
opacity: opacity ? opacity : '',
'background-size': `${width ? width+'rpx':'100%'} ${height ? height+'rpx':'100%'}`
}" alt="-">
</template>
<script>
export default {
name: 'imageBox',
props: {
src: {
type: String,
default: ''
},
width: {
type: String,
default: ''
},
height: {
type: String,
default: ''
},
marginTop: {
type: String,
default: ''
},
marginBottom: {
type: String,
default: ''
},
marginLeft: {
type: String,
default: ''
},
marginRight: {
type: String,
default: ''
},
borderRadius: {
type: String,
default: ''
},
opacity: {
type: String,
default: ''
},
isRotate: {
type: Boolean,
default: false
},
},
data() {
return {
}
},
computed: {
captchaSrc() {
try{
if (this.src.indexOf('data:image/png;') !== -1) {
return this.src.replace(/[\r\n]/g, "")
} else {
return this.src
}
}catch(err){
console.info('err-----------------------',err)
}
}
},
methods: {
onClick() {
this.$emit('click')
}
}
}
</script>
<style lang="scss" scoped>
@keyframes rotate {
0%{-webkit-transform:rotate(0deg);}
25%{-webkit-transform:rotate(90deg);}
50%{-webkit-transform:rotate(180deg);}
75%{-webkit-transform:rotate(270deg);}
100%{-webkit-transform:rotate(360deg);}
}
.run { animation: rotate 2s linear infinite; }
</style>

24
main.js
Unescape View File

@ -12,23 +12,21 @@ const app = new Vue({
}) })
app.$mount() app.$mount()
// #endif // #endif
import { $http } from '@escook/request-miniprogram' //import { $http } from '@escook/request-miniprogram'
uni.$http = $http // uni.$http = $http
// 配置请求根路径 // // 配置请求根路径
$http.baseUrl = '' // $http.baseUrl = ''
// 请求开始之前做一些事情 // // 请求开始之前做一些事情
$http.beforeRequest = function (options) { // $http.beforeRequest = function (options) {
uni.showLoading({ // uni.showLoading({
title: '数据加载中...', // title: '数据加载中...',
}) // })
} // }
// 请求完成之后做一些事情 // 请求完成之后做一些事情
$http.afterRequest = function () {
uni.hideLoading()
}
// #ifdef VUE3 // #ifdef VUE3
import { createSSRApp } from 'vue' import { createSSRApp } from 'vue'
export function createApp() { export function createApp() {

6
pages.json
Unescape View File

@ -84,8 +84,10 @@
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
} },{
] "path" : "filterList/filterList",
"style" :{}
}]
}], }],
"tabBar": { "tabBar": {
"color": "#a9a9a9", "color": "#a9a9a9",

4
pages/home/home.vue
Unescape View File

@ -5,8 +5,8 @@
</view> </view>
<swiper :class="swiper" :indicator-dots="true " :autoplay="true" :interval="3000" :duration="1000" <swiper :class="swiper" :indicator-dots="true " :autoplay="true" :interval="3000" :duration="1000"
:circular="true"> :circular="true">
<swiper-item v-for="(item,i) in swiperList" :key="i"> <swiper-item v-for="(dishes,i) in swiperList" :key="i" @click="gotoDetail(dishes)">
<image class="image" :src="item.image_src"></image> <image class="image" :src="dishes.image_src"></image>
</swiper-item> </swiper-item>
</swiper> </swiper>
<view class="dishes-list"> <view class="dishes-list">

178
pages/search/search.vue
Unescape View File

@ -1,37 +1,191 @@
<template> <template>
<view> <view>
<button @click="getDishes()">筛选菜品</button> <button style="margin: 60px 90px;" @click="showPopClick">点击弹框</button>
<m-tabbar native=""></m-tabbar> <!-- pop-show:是否显示弹框 color:主题色 classList：分类数组 @changeClick：数据发生变化 @sureClick：筛选确认 @hideClick：隐藏事件 -->
<cc-rightPopup :pop-show="popShow" :colors="colors" :classList="classList" @change="changeClick"
@sureClick="sureClick" @hideClick="hideright" @getDishes="getDishes"></cc-rightPopup>
<view class="dish-list">
<view class="product-list">
<view class="dish" v-for="(dishes, i) in dishList" :key="i" @click="gotoDetail(dishes)">
<image class="image" mode="widthFix" :src="dishes.dish_src"></image>
<view class="name">{{dishes.dish_name}}</view>
</view>
</view>
<view class="loading-text">{{}}</view>
</view>
<m-tabbar native=""></m-tabbar>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
colors: '#fa436a',
popShow: false,
labelList: [],
dishList: [],
classList: [{
name: '菜品标签',
id: 1,
child: [{
label: "面",
id: 10,
current: false
}, {
label: "鸡肉",
id: 11,
current: false
}, {
label: "牛肉",
id: 12,
current: false
}; }, {
label: "米饭",
id: 13,
current: false
}, {
label: "鸭肉",
id: 14,
current: false
}]
}]
}
}, },
onLoad() { onLoad() {
const sysInfo = uni.getSystemInfoSync()
// 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
this.wh = sysInfo.windowHeight - 50
}, },
methods: { methods: {
async getDishes() { gotoDetail(item) {
console.log(item._id)
uni.navigateTo({
url: '/subpkg/dishDetail/dishDetail?_id=' + encodeURIComponent(JSON.stringify(item._id))
})
},
getDishes() {
let that = this
uniCloud.callFunction({ uniCloud.callFunction({
name:'getDishes', name: "getDishes",
data:{ data: {
api:'getByLabels', api: "getByLabels",
labels:['鸡肉','米饭'] labels: that.labelList
}, },
success(res) { success: function(res) {
console.log(res) console.log("执行")
that.dishList = res.result
} }
}) })
} },
changeClick(arr) {
// 适配小程序 样式需要在父级改变
this.classList = arr;
},
showPopClick() {
this.popShow = true;
},
hideright() {
this.popShow = true;
},
sureClick(paramDict, selArr) {
this.labelList=[]
this.classList.forEach(item => {
item.child.forEach(ele => {
if (ele.current == true) {
this.labelList.push(ele.label)
}
});
})
this.popShow = false;
},
} }
} }
</script> </script>
<style lang="scss">
<style>
.dish-list {
padding-top: 10px;
}
.loading-text {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 30px;
color: #979797;
font-size: 12px;
}
.product-list {
width: 92%;
padding: 0 4% 3vw 4%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.product {
width: 48%;
border-radius: 10px;
background-color: #fff;
margin: 0 0 7px 0;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}
.image {
width: 100%;
width: 150px;
height:150px;
border-radius: 0px 10px 0 0;
}
.name {
width: 92%;
padding: 5px 4%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-align: justify;
overflow: hidden;
font-size: 15px;
}
.info {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 92%;
padding: 5px 4% 5px 4%;
}
.price {
color: #e65339;
font-size: 15px;
font-weight: 600;
}
.label {
color: #807c87;
font-size: 12px;
}
</style> </style>

104
subpkg/filterList/filterList.vue
Unescape View File

@ -0,0 +1,104 @@
<template>
<view>
<view class="dish-list">
<view class="product-list">
<view class="dish" v-for="(dishes, i) in labelList" :key="i" @click="gotoDetail(dishes)">
<image mode="widthFix" :src="dishes.dish_src"></image>
<view class="name">{{dishes.dish_name}}</view>
<view class="info">
<view class="price">{{}}</view>
<view class="label">{{}}</view>
</view>
</view>
</view>
<view class="loading-text">{{}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
labelList:[]
}
},onLoad() {
const sysInfo = uni.getSystemInfoSync()
// 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
this.wh = sysInfo.windowHeight - 50
},
methods: {
goToDetail(item) {
console.log(item._id)
uni.navigateTo({
url: '/subpkg/dishDetail/dishDetail?_id=' +encodeURIComponent(JSON.stringify(item._id))
})
}
}
}
</script>
<style>
.dish-list {}
.loading-text {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 30px;
color: #979797;
font-size: 12px;
}
.product-list {
width: 92%;
padding: 0 4% 3vw 4%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.dish {
width: 48%;
border-radius: 10px;
background-color: #fff;
margin: 0 0 7px 0;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}
.image {
width: 100%;
border-radius: 10px 10px 0 0;
}
.name {
width: 92%;
padding: 5px 4%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-align: justify;
overflow: hidden;
font-size: 15px;
}
.info {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 92%;
padding: 5px 4% 5px 4%;
}
.price {
color: #e65339;
font-size: 15px;
font-weight: 600;
}
.label{
color: #807c87;
font-size: 12px;
}
</style>

8
uniCloud-aliyun/cloudfunctions/getSwiperImage/index.js
Unescape View File

@ -4,22 +4,22 @@ exports.main = async (event, context) => {
{ {
image_src:"https://mp-defb5411-d0ae-4685-93ad-4a81e1f126fc.cdn.bspapp.com/dishes_image/黄焖鸡.png", image_src:"https://mp-defb5411-d0ae-4685-93ad-4a81e1f126fc.cdn.bspapp.com/dishes_image/黄焖鸡.png",
image_name:"黄焖鸡", image_name:"黄焖鸡",
image_id:"650e8592fe975fba5a6660d6" _id:"650e8592fe975fba5a6660d6"
}, },
{ {
image_src:"https://mp-defb5411-d0ae-4685-93ad-4a81e1f126fc.cdn.bspapp.com/dishes_image/分米鸡.png", image_src:"https://mp-defb5411-d0ae-4685-93ad-4a81e1f126fc.cdn.bspapp.com/dishes_image/分米鸡.png",
image_name:"分米鸡", image_name:"分米鸡",
image_id:"650e8610a09a9bd68ba734ed" _id:"650e8610a09a9bd68ba734ed"
}, },
{ {
image_src:"https://mp-defb5411-d0ae-4685-93ad-4a81e1f126fc.cdn.bspapp.com/dishes_image/炒鸡.png", image_src:"https://mp-defb5411-d0ae-4685-93ad-4a81e1f126fc.cdn.bspapp.com/dishes_image/炒鸡.png",
image_name:"炒鸡", image_name:"炒鸡",
image_id:"650e8646466d416d308b56da" _id:"650e8646466d416d308b56da"
}, },
{ {
image_src:"https://mp-defb5411-d0ae-4685-93ad-4a81e1f126fc.cdn.bspapp.com/dishes_image/广式烧鸭饭.png", image_src:"https://mp-defb5411-d0ae-4685-93ad-4a81e1f126fc.cdn.bspapp.com/dishes_image/广式烧鸭饭.png",
image_name:"广式烧鸭饭", image_name:"广式烧鸭饭",
image_id:"650e8749fe975fba5a66a5f4" _id:"650e8749fe975fba5a66a5f4"
} }
] ]
//返回数据给客户端 //返回数据给客户端

4
uni_modules/aki-particles/changelog.md
Unescape View File

@ -0,0 +1,4 @@
## 1.0.1（2021-08-08）
加了一个体验地址
## 1.0.0（2021-08-08）
首次发布

34
uni_modules/aki-particles/components/aki-particles/aki-particles.vue
Unescape View File

@ -0,0 +1,34 @@
<template>
<view>
<view id="particles" :style="'background-color: '+particlestyle.bgcolor+';z-index: '+particlestyle.zindex"></view>
</view>
</template>
<script>
import particles from '../../../../uni_modules/aki-particles/static/aki-particles/particles.js'
export default {
name:"akira-particles",
props:['particlestyle'],
mounted(){
particlesJS.load('particles','../../../../uni_modules/aki-particles/static/aki-particles/particles-'+this.particlestyle.style+'.json');
},
data() {
return {
};
}
}
</script>
<style lang="scss">
#particles{
position: absolute;
//z-index: 1;
width: 100%;
height: 100%;
// background-color: #000022;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
</style>

79
uni_modules/aki-particles/package.json
Unescape View File

@ -0,0 +1,79 @@
{
"id": "aki-particles",
"displayName": "粒子特效背景组件",
"version": "1.0.1",
"description": "用于页面背景的粒子特效组件，particles.js的uniapp封装，适合留白较多页面的背景美化，效果在下面的readme里有演示地址",
"keywords": [
"aki-particles",
"粒子",
"特效",
"particles"
],
"repository": "https://github.com/akirasen/aki-particles",
"engines": {
"HBuilderX": "^2.8.5"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": "50793655"
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "n",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "u",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "u",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "u"
},
"H5-pc": {
"Chrome": "y",
"IE": "u",
"Edge": "u",
"Firefox": "u",
"Safari": "y"
},
"小程序": {
"微信": "u",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

51
uni_modules/aki-particles/readme.md
Unescape View File

@ -0,0 +1,51 @@
# 粒子特效背景组件 aki-particles
## 前言
这个插件是VincentGarreau大神的[particles.js](https://github.com/VincentGarreau/particles.js)的uniapp封装。
做项目的时候发现留白的地方有点空，于是用了particles.js，然后感觉以后经常都能用上，就做成了组件，突然又想试试自己做插件，刚好是周末，就尝试了一下。
第一次写插件，有不专业的地方大家多多指教。有问题请联系QQ：50793655
[演示地址](https://static-35bf94ca-f0cc-4340-8c77-e0eb817d43cc.bspapp.com/)
## 开始使用
### template中使用
```
<aki-particles :particlestyle="particlestyle"></aki-particles>
```
### script中引用
导入插件
```
import akiparticles from '../../uni_modules/aki-particles/components/aki-particles/aki-particles.vue'//导入组件
```
组件声明
```
components:{"aki-particles":akiparticles}
```
配置参数
```
particlestyle:{
"style":"akira",
"zindex":-1,
"bgcolor":"#000022"
},
```
以上内容提供了几个简单的配置，
#### style
我除了提供了`akira`这个我自己用的样式，也把particles.js的几个官方样式引入了，
通过定义`style`的值，有`akira`，`default`，`bubble`，`nasa`，`nyancat`，`snow`几个样式可以选择；
#### zindex
`zindex`就如同字面意思，是设置粒子背景组件的层级，默认是-1，会被页面上的其他组件遮挡，导致点击和滑过效果无法呈现，可以同步设置页面其他组件层级，让鼠标事件可用；
#### bgcolor
`bgcolor`是背景颜色。
#### 自定义
如果想自己设计效果，可以修改`static/aki-particles`目录下和`style`对应的json文件，也可以复制一份，文件名中间的`snow`之类替换为你自己的，然后在`style`中设置你文件名关键字就可以了。
### 在UNIAPP默认模板中体验
index.vue中
`.content`需要注释掉
```
// align-items: center;
```
`.logo`、`.text-area`分别添加
```
z-index: 2;
```
`"zindex"`值改为:`1`

110
uni_modules/aki-particles/static/aki-particles/particles-akira.json
Unescape View File

@ -0,0 +1,110 @@
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#74b3d2"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": true,
"anim": {
"enable": true,
"speed": 1,
"opacity_min": 0,
"sync": false
}
},
"size": {
"value": 30,
"random": true,
"anim": {
"enable": false,
"speed": 4,
"size_min": 3,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 1,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 600
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "bubble"
},
"onclick": {
"enable": true,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 250,
"size": 0,
"duration": 2,
"opacity": 0,
"speed": 3
},
"repulse": {
"distance": 400,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}

110
uni_modules/aki-particles/static/aki-particles/particles-bubble.json
Unescape View File

@ -0,0 +1,110 @@
{
"particles": {
"number": {
"value": 6,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#1b1e34"
},
"shape": {
"type": "polygon",
"stroke": {
"width": 0,
"color": "#000"
},
"polygon": {
"nb_sides": 6
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.3,
"random": true,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 160,
"random": false,
"anim": {
"enable": true,
"speed": 10,
"size_min": 40,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 200,
"color": "#ffffff",
"opacity": 1,
"width": 2
},
"move": {
"enable": true,
"speed": 8,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "grab"
},
"onclick": {
"enable": false,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}

110
uni_modules/aki-particles/static/aki-particles/particles-default.json
Unescape View File

@ -0,0 +1,110 @@
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}

110
uni_modules/aki-particles/static/aki-particles/particles-nasa.json
Unescape View File

@ -0,0 +1,110 @@
{
"particles": {
"number": {
"value": 160,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 1,
"random": true,
"anim": {
"enable": true,
"speed": 1,
"opacity_min": 0,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 4,
"size_min": 0.3,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 1,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 600
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "bubble"
},
"onclick": {
"enable": true,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 250,
"size": 0,
"duration": 2,
"opacity": 0,
"speed": 3
},
"repulse": {
"distance": 400,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}

110
uni_modules/aki-particles/static/aki-particles/particles-nyancat.json
Unescape View File

@ -0,0 +1,110 @@
{
"particles": {
"number": {
"value": 100,
"density": {
"enable": false,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "star",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "http://wiki.lexisnexis.com/academic/images/f/fb/Itunes_podcast_icon_300.jpg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 4,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 14,
"direction": "left",
"random": false,
"straight": true,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 200,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}

110
uni_modules/aki-particles/static/aki-particles/particles-snow.json
Unescape View File

@ -0,0 +1,110 @@
{
"particles": {
"number": {
"value": 400,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#fff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": true,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 10,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 500,
"color": "#ffffff",
"opacity": 0.4,
"width": 2
},
"move": {
"enable": true,
"speed": 6,
"direction": "bottom",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "bubble"
},
"onclick": {
"enable": true,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 0.5
}
},
"bubble": {
"distance": 400,
"size": 4,
"duration": 0.3,
"opacity": 1,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}

1541
uni_modules/aki-particles/static/aki-particles/particles.js
View File

File diff suppressed because it is too large Load Diff

11
uni_modules/cc-rightPopup/components/cc-rightPopup/cc-rightPopup.vue
Unescape View File

@ -13,14 +13,14 @@
<!-- 选中分类条件 --> <!-- 选中分类条件 -->
<view v-for="(subItem, indexs) in item.child" :key="subItem.id" class="class_tag" <view v-for="(subItem, indexs) in item.child" :key="subItem.id" class="class_tag"
:style="{'color':(subItem.current ? '#fff':'#333'),'background':(subItem.current ? colors:''),'border-color':subItem.current ? colors:''}" :style="{'color':(subItem.current ? '#fff':'#333'),'background':(subItem.current ? colors:''),'border-color':subItem.current ? colors:''}"
@tap="setClass(item,subItem,index,indexs)">{{subItem.name}}</view> @tap="setClass(item,subItem,index,indexs)">{{subItem.label}}</view>
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
<view class="bottom_btn"> <view class="bottom_btn">
<view class="reset bottom_btnView" :style="'color:' + colors + ';border-color:' + colors" <view class="reset bottom_btnView" :style="'color:' + colors + ';border-color:' + colors"
@tap="onreset">重置</view> @tap="onreset">重置</view>
<view class="enter bottom_btnView" :style="'background:' + colors" @tap="onenter">确定</view> <button class="enter bottom_btnView" :style="'background:' + colors" @tap="onenter" @click="getHideLabel">确定</button>
</view> </view>
</view> </view>
@ -31,6 +31,7 @@
export default { export default {
mixins: [{ mixins: [{
methods: { methods: {
setData: function(obj, callback) { setData: function(obj, callback) {
let that = this; let that = this;
const handleData = (tepData, tepKey, afterKey) => { const handleData = (tepData, tepKey, afterKey) => {
@ -84,7 +85,7 @@
}], }],
data() { data() {
return { return {
labelList: [],
paramDict: { paramDict: {
minPrice: '', minPrice: '',
maxPrice: '' maxPrice: ''
@ -113,7 +114,9 @@
}, },
methods: { methods: {
getHideLabel(){
this.$emit("getDishes");
},
hideright() { hideright() {
this.$emit("hideClick"); this.$emit("hideClick");

Write Preview
Loading…
Cancel
Save