mirror of
http://git.coreshop.cn/jianweie/coreshoppro.git
synced 2025-12-06 18:33:27 +08:00
【移除】移除【custom-waterfalls-flow】瀑布流插件，启用【uv-waterfall】瀑布流插件。避免支付宝的适配问题。
This commit is contained in:
jianweie
@@ -1,95 +1,167 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 列表平铺两列三列 -->
|
||||
<view class="coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-trbl-18" v-if="coreshopData.parameters.column == '2' && coreshopData.parameters.display == 'list' || coreshopData.parameters.column == '3' && coreshopData.parameters.display == 'list'">
|
||||
<view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-min-height-30" v-if="coreshopData.parameters.lookTitle == 'true'">
|
||||
<view class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">{{coreshopData.parameters.title}}</view>
|
||||
<u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left" v-if="coreshopData.parameters.lookMore == 'true' && coreshopData.parameters.type == 'auto'" @click="goGoodsList({catId: coreshopData.parameters.classifyId,brandId:coreshopData.parameters.brandId})"></u-icon>
|
||||
<view class="" v-if="coreshopData.parameters.column == '2' && coreshopData.parameters.display == 'list' || coreshopData.parameters.column == '3' && coreshopData.parameters.display == 'list'">
|
||||
<view class="coreshop-padding-top-10 coreshop-padding-left-10 coreshop-padding-right-10 coreshop-margin-top-10 coreshop-margin-left-10 coreshop-margin-right-10 coreshop-bg-white coreshop-border-radius-trbl-18">
|
||||
<view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-min-height-30" v-if="coreshopData.parameters.lookTitle == 'true'">
|
||||
<view class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">{{coreshopData.parameters.title}}</view>
|
||||
<u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left" v-if="coreshopData.parameters.lookMore == 'true' && coreshopData.parameters.type == 'auto'" @click="goGoodsList({catId: coreshopData.parameters.classifyId,brandId:coreshopData.parameters.brandId})"></u-icon>
|
||||
</view>
|
||||
<view class="coreshop-divider">
|
||||
<view class="complete"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-divider">
|
||||
<view class="complete"></view>
|
||||
</view>
|
||||
<view class="coreshop-text-black">
|
||||
<custom-waterfalls-flow :value="coreshopData.parameters.list" :column="coreshopData.parameters.column" @wapperClick="wapperClick" @imageClick="imageClick">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="goods coreshop-padding-bottom-10 coreshop-bg-main" v-for="(item,index) in coreshopData.parameters.list" :key="index" slot="slot{{index}}">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-main coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray" v-if="coreshopData.parameters.column==2">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-divider" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view class="complete"></view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-font-11 coreshop-margin-top-10 coreshop-margin-bottom-5" :class="coreshopData.parameters.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<template v-slot:default="item">
|
||||
<view class="goods">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray" v-if="coreshopData.parameters.column==2">{{item.mktprice}}元</span>
|
||||
<view class="waterfall">
|
||||
<uv-waterfall ref="waterfall"
|
||||
v-model="coreshopData.parameters.list"
|
||||
:columnCount="coreshopData.parameters.column"
|
||||
:add-time="10"
|
||||
:left-gap="leftGap"
|
||||
:right-gap="rightGap"
|
||||
:column-gap="columnGap"
|
||||
@changeList="changeList">
|
||||
<!-- 第一列数据 -->
|
||||
<template v-slot:list1>
|
||||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||||
<view>
|
||||
<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
|
||||
<view class="goods coreshop-padding-bottom-10 coreshop-bg-main">
|
||||
<view class="waterfall-item__image" :style="[imageStyle(item,coreshopData.parameters.column)]">
|
||||
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-divider" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view class="complete"></view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-font-11 coreshop-margin-top-10 coreshop-margin-bottom-5" :class="coreshopData.parameters.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-main coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray" v-if="coreshopData.parameters.column==2">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-divider" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view class="complete"></view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-font-11 coreshop-margin-top-10 coreshop-margin-bottom-5" :class="coreshopData.parameters.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
<!-- 第二列数据 -->
|
||||
<template v-slot:list2 v-if="coreshopData.parameters.column>=2">
|
||||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||||
<view>
|
||||
<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
|
||||
<view class="goods coreshop-padding-bottom-10 coreshop-bg-main">
|
||||
<view class="waterfall-item__image" :style="[imageStyle(item,coreshopData.parameters.column)]">
|
||||
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
|
||||
</view>
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-main coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray" v-if="coreshopData.parameters.column==2">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-divider" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view class="complete"></view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-font-11 coreshop-margin-top-10 coreshop-margin-bottom-5" :class="coreshopData.parameters.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- 第三列数据 -->
|
||||
<template v-slot:list3 v-if="coreshopData.parameters.column>=3">
|
||||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||||
<view>
|
||||
<view v-for="(item, index) in list3" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
|
||||
<view class="goods coreshop-padding-bottom-10 coreshop-bg-main">
|
||||
<view class="waterfall-item__image" :style="[imageStyle(item,coreshopData.parameters.column)]">
|
||||
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
|
||||
</view>
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-main coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray" v-if="coreshopData.parameters.column==2">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-divider" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view class="complete"></view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-font-11 coreshop-margin-top-10 coreshop-margin-bottom-5" :class="coreshopData.parameters.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</uv-waterfall>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -217,7 +289,13 @@
|
||||
return {
|
||||
current: 0,
|
||||
pageCount: [],
|
||||
count: false
|
||||
count: false,
|
||||
list1: [],// 瀑布流第一列数据
|
||||
list2: [],// 瀑布流第二列数据
|
||||
list3: [],// 瀑布流第三列数据
|
||||
leftGap: 10,
|
||||
rightGap: 10,
|
||||
columnGap: 10
|
||||
};
|
||||
},
|
||||
name: "coreshopGoods",
|
||||
@@ -228,6 +306,18 @@
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
imageStyle(item, column) {
|
||||
return item => {
|
||||
const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
|
||||
const w = v / column;
|
||||
const rate = w / item.w;
|
||||
const h = rate * item.h;
|
||||
return {
|
||||
width: w + 'px',
|
||||
height: h + 'px'
|
||||
}
|
||||
}
|
||||
},
|
||||
pointSwitch() { return this.$store.state.config.pointSwitch },
|
||||
pointShowExchangePrice() { return this.$store.state.config.pointShowExchangePrice },
|
||||
pointDiscountedProportion() { return this.$store.state.config.pointDiscountedProportion },
|
||||
@@ -237,15 +327,13 @@
|
||||
pointShowPoint() { return this.$store.state.config.pointShowPoint },
|
||||
},
|
||||
methods: {
|
||||
// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
|
||||
changeList(e) {
|
||||
this[e.name].push(e.value);
|
||||
},
|
||||
change(e) {
|
||||
this.current = e.detail.current;
|
||||
},
|
||||
wapperClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
imageClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.count = this.coreshopData.parameters.list.length > 0;
|
||||
|
||||
@@ -228,86 +228,106 @@
|
||||
<view class="coreshop-margin-left-12 coreshop-margin-right-12 coreshop-text-gray">为您推荐</view>
|
||||
<view class="line-70"></view>
|
||||
</view>
|
||||
<view class="coreshop-margin-left-8 coreshop-margin-right-8 index-goods coreshop-margin-top-10" v-if="shopRecommendData.length > 0">
|
||||
<custom-waterfalls-flow :value="shopRecommendData" @wapperClick="wapperClick" @imageClick="imageClick">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="goods" v-for="(item,index) in shopRecommendData" :key="index" slot="slot{{index}}">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<template v-slot:default="item">
|
||||
<view class="goods">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
|
||||
<view class="waterfall " v-if="shopRecommendData.length > 0">
|
||||
<uv-waterfall ref="waterfall"
|
||||
v-model="shopRecommendData"
|
||||
:add-time="10"
|
||||
:left-gap="leftGap"
|
||||
:right-gap="rightGap"
|
||||
:column-gap="columnGap"
|
||||
@changeList="changeList">
|
||||
<!-- 第一列数据 -->
|
||||
<template v-slot:list1>
|
||||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||||
<view>
|
||||
<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
|
||||
<view class="coreshop-margin-bottom-10">
|
||||
<view class="waterfall-item__image" :style="[imageStyle(item)]">
|
||||
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
<!-- 第二列数据 -->
|
||||
<template v-slot:list2>
|
||||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||||
<view>
|
||||
<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
|
||||
<view class="coreshop-margin-bottom-10">
|
||||
<view class="waterfall-item__image" :style="[imageStyle(item)]">
|
||||
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
|
||||
</view>
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</uv-waterfall>
|
||||
</view>
|
||||
|
||||
|
||||
<u-popup class="coreshop-bottom-popup-box" :show="bottomModal" mode="bottom" height="70%" @close="hideModal" :closeable="true">
|
||||
<view class="radius coreshop-bg-white">
|
||||
<!--标题-->
|
||||
@@ -338,8 +358,6 @@
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
|
||||
|
||||
<!--占位底部距离-->
|
||||
<view class="coreshop-tabbar-height" />
|
||||
|
||||
@@ -434,6 +452,11 @@
|
||||
service: [],
|
||||
},
|
||||
timeData: {},
|
||||
list1: [],// 瀑布流第一列数据
|
||||
list2: [],// 瀑布流第二列数据
|
||||
leftGap: 10,
|
||||
rightGap: 10,
|
||||
columnGap: 10
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
@@ -514,14 +537,24 @@
|
||||
// #ifdef MP-WEIXIN || APP-PLUS || APP-PLUS-NVUE
|
||||
return this.$globalConstVars.apiBaseUrl + 'wap/' + page.route + '?id=' + this.goodsId + '&groupId=' + this.groupId;
|
||||
// #endif
|
||||
},
|
||||
imageStyle(item) {
|
||||
return item => {
|
||||
const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
|
||||
const w = v / 2;
|
||||
const rate = w / item.w;
|
||||
const h = rate * item.h;
|
||||
return {
|
||||
width: w + 'px',
|
||||
height: h + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
wapperClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
imageClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
|
||||
changeList(e) {
|
||||
this[e.name].push(e.value);
|
||||
},
|
||||
onChange(e) {
|
||||
this.timeData = e
|
||||
|
||||
@@ -337,83 +337,105 @@
|
||||
<view class="coreshop-margin-left-12 coreshop-margin-right-12 coreshop-text-gray">为您推荐</view>
|
||||
<view class="line-70"></view>
|
||||
</view>
|
||||
<view class="coreshop-margin-left-8 coreshop-margin-right-8 index-goods coreshop-margin-top-10" v-if="shopRecommendData.length > 0">
|
||||
<custom-waterfalls-flow :value="shopRecommendData" @wapperClick="wapperClick" @imageClick="imageClick">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="goods" v-for="(item,index) in shopRecommendData" :key="index" slot="slot{{index}}">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<template v-slot:default="item">
|
||||
<view class="goods">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
|
||||
|
||||
<view class="waterfall " v-if="shopRecommendData.length > 0">
|
||||
<uv-waterfall ref="waterfall"
|
||||
v-model="shopRecommendData"
|
||||
:add-time="10"
|
||||
:left-gap="leftGap"
|
||||
:right-gap="rightGap"
|
||||
:column-gap="columnGap"
|
||||
@changeList="changeList">
|
||||
<!-- 第一列数据 -->
|
||||
<template v-slot:list1>
|
||||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||||
<view>
|
||||
<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
|
||||
<view class="coreshop-margin-bottom-10">
|
||||
<view class="waterfall-item__image" :style="[imageStyle(item)]">
|
||||
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
<!-- 第二列数据 -->
|
||||
<template v-slot:list2>
|
||||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||||
<view>
|
||||
<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
|
||||
<view class="coreshop-margin-bottom-10">
|
||||
<view class="waterfall-item__image" :style="[imageStyle(item)]">
|
||||
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
|
||||
</view>
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</uv-waterfall>
|
||||
</view>
|
||||
|
||||
<!--占位底部距离-->
|
||||
@@ -576,6 +598,11 @@
|
||||
service: [],
|
||||
},
|
||||
timeData: {},
|
||||
list1: [],// 瀑布流第一列数据
|
||||
list2: [],// 瀑布流第二列数据
|
||||
leftGap: 10,
|
||||
rightGap: 10,
|
||||
columnGap: 10
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
@@ -671,19 +698,28 @@
|
||||
},
|
||||
defaultSpesDesc() {
|
||||
return this.product.defaultSpecificationDescription;
|
||||
},
|
||||
imageStyle(item) {
|
||||
return item => {
|
||||
const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
|
||||
const w = v / 2;
|
||||
const rate = w / item.w;
|
||||
const h = rate * item.h;
|
||||
return {
|
||||
width: w + 'px',
|
||||
height: h + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
wapperClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
imageClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
|
||||
changeList(e) {
|
||||
this[e.name].push(e.value);
|
||||
},
|
||||
onChange(e) {
|
||||
this.timeData = e
|
||||
},
|
||||
|
||||
// 立即购买
|
||||
buyNow(selectShop) {
|
||||
var that = this;
|
||||
|
||||
@@ -232,86 +232,106 @@
|
||||
<view class="coreshop-margin-left-12 coreshop-margin-right-12 coreshop-text-gray">为您推荐</view>
|
||||
<view class="line-70"></view>
|
||||
</view>
|
||||
<view class="coreshop-margin-left-8 coreshop-margin-right-8 index-goods coreshop-margin-top-10" v-if="shopRecommendData.length > 0">
|
||||
<custom-waterfalls-flow :value="shopRecommendData" @wapperClick="wapperClick" @imageClick="imageClick">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="goods" v-for="(item,index) in shopRecommendData" :key="index" slot="slot{{index}}">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<template v-slot:default="item">
|
||||
<view class="goods">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
|
||||
<view class="waterfall " v-if="shopRecommendData.length > 0">
|
||||
<uv-waterfall ref="waterfall"
|
||||
v-model="shopRecommendData"
|
||||
:add-time="10"
|
||||
:left-gap="leftGap"
|
||||
:right-gap="rightGap"
|
||||
:column-gap="columnGap"
|
||||
@changeList="changeList">
|
||||
<!-- 第一列数据 -->
|
||||
<template v-slot:list1>
|
||||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||||
<view>
|
||||
<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
|
||||
<view class="coreshop-margin-bottom-10">
|
||||
<view class="waterfall-item__image" :style="[imageStyle(item)]">
|
||||
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
<!-- 第二列数据 -->
|
||||
<template v-slot:list2>
|
||||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||||
<view>
|
||||
<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
|
||||
<view class="coreshop-margin-bottom-10">
|
||||
<view class="waterfall-item__image" :style="[imageStyle(item)]">
|
||||
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
|
||||
</view>
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</uv-waterfall>
|
||||
</view>
|
||||
|
||||
|
||||
<u-popup class="coreshop-bottom-popup-box" :show="bottomModal" mode="bottom" height="70%" @close="hideModal" :closeable="true">
|
||||
<view class="radius coreshop-bg-white">
|
||||
<!--标题-->
|
||||
@@ -438,6 +458,11 @@
|
||||
service: [],
|
||||
},
|
||||
timeData: {},
|
||||
list1: [],// 瀑布流第一列数据
|
||||
list2: [],// 瀑布流第二列数据
|
||||
leftGap: 10,
|
||||
rightGap: 10,
|
||||
columnGap: 10
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
@@ -519,13 +544,23 @@
|
||||
return this.$globalConstVars.apiBaseUrl + 'wap/' + page.route + '?id=' + this.groupId;
|
||||
// #endif
|
||||
},
|
||||
imageStyle(item) {
|
||||
return item => {
|
||||
const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
|
||||
const w = v / 2;
|
||||
const rate = w / item.w;
|
||||
const h = rate * item.h;
|
||||
return {
|
||||
width: w + 'px',
|
||||
height: h + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
wapperClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
imageClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
|
||||
changeList(e) {
|
||||
this[e.name].push(e.value);
|
||||
},
|
||||
onChange(e) {
|
||||
this.timeData = e
|
||||
|
||||
@@ -86,86 +86,113 @@
|
||||
</u-sticky>
|
||||
|
||||
|
||||
<view class="coreshop-margin-left-16 coreshop-margin-right-16 index-goods coreshop-margin-top-10" v-if="goodsList.length > 0">
|
||||
<custom-waterfalls-flow ref="waterfallsFlowRef" :value="goodsList" @wapperClick="wapperClick" @imageClick="imageClick">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="goods" v-for="(item,index) in goodsList" :key="index" slot="slot{{index}}">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="index-goods coreshop-margin-top-10" v-if="goodsList.length > 0">
|
||||
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<image class="coreshop-image-recommend-tags" src="/static/images/common/recommend.png" v-if="item.isRecommend"></image>
|
||||
<image class="coreshop-image-hot-tags" src="/static/images/common/hot.png" v-if="item.isHot"></image>
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<template v-slot:default="item">
|
||||
<view class="goods">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<image class="coreshop-image-recommend-tags" src="/static/images/common/recommend.png" v-if="item.isRecommend"></image>
|
||||
<image class="coreshop-image-hot-tags" src="/static/images/common/hot.png" v-if="item.isHot"></image>
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
<uv-waterfall ref="waterfall"
|
||||
v-model="goodsList"
|
||||
:add-time="10"
|
||||
:left-gap="leftGap"
|
||||
:right-gap="rightGap"
|
||||
:column-gap="columnGap"
|
||||
@changeList="changeList">
|
||||
<!-- 第一列数据 -->
|
||||
<template v-slot:list1>
|
||||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||||
<view>
|
||||
<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item">
|
||||
<view class="goods" @click="goGoodsDetail(item.id)">
|
||||
<view class="waterfall-item__image" :style="[imageStyle(item)]">
|
||||
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<image class="coreshop-image-recommend-tags" src="/static/images/common/recommend.png" v-if="item.isRecommend"></image>
|
||||
<image class="coreshop-image-hot-tags" src="/static/images/common/hot.png" v-if="item.isHot"></image>
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
<!-- 第二列数据 -->
|
||||
<template v-slot:list2>
|
||||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||||
<view>
|
||||
<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item">
|
||||
<view class="goods" @click="goGoodsDetail(item.id)">
|
||||
<view class="waterfall-item__image" :style="[imageStyle(item)]">
|
||||
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
|
||||
</view>
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<image class="coreshop-image-recommend-tags" src="/static/images/common/recommend.png" v-if="item.isRecommend"></image>
|
||||
<image class="coreshop-image-hot-tags" src="/static/images/common/hot.png" v-if="item.isHot"></image>
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</uv-waterfall>
|
||||
|
||||
<u-loadmore :status="loadStatus" :icon-type="loadIconType" :load-text="loadText" margin-top="20" margin-bottom="20" />
|
||||
</view>
|
||||
<!-- 无数据时默认显示 -->
|
||||
@@ -188,11 +215,15 @@
|
||||
id: '',
|
||||
showView: false,
|
||||
goodsList: [],
|
||||
list1: [],// 瀑布流第一列数据
|
||||
list2: [],// 瀑布流第二列数据
|
||||
leftGap: 10,
|
||||
rightGap: 10,
|
||||
columnGap: 10,
|
||||
|
||||
minPrice: '',
|
||||
maxPrice: '',
|
||||
|
||||
scrollTop: 0,
|
||||
|
||||
loadStatus: 'loadmore',
|
||||
loadIconType: 'flower',
|
||||
loadText: {
|
||||
@@ -344,6 +375,18 @@
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
imageStyle(item) {
|
||||
return item => {
|
||||
const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
|
||||
const w = v / 2;
|
||||
const rate = w / item.w;
|
||||
const h = rate * item.h;
|
||||
return {
|
||||
width: w + 'px',
|
||||
height: h + 'px'
|
||||
}
|
||||
}
|
||||
},
|
||||
pointSwitch() { return this.$store.state.config.pointSwitch },
|
||||
pointShowExchangePrice() { return this.$store.state.config.pointShowExchangePrice },
|
||||
pointDiscountedProportion() { return this.$store.state.config.pointDiscountedProportion },
|
||||
@@ -353,11 +396,9 @@
|
||||
pointShowPoint() { return this.$store.state.config.pointShowPoint },
|
||||
},
|
||||
methods: {
|
||||
wapperClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
imageClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
|
||||
changeList(e) {
|
||||
this[e.name].push(e.value);
|
||||
},
|
||||
//设置查询条件
|
||||
setSearchData: function (searchData, clear = false) {
|
||||
@@ -374,6 +415,7 @@
|
||||
},
|
||||
//点击综合排序
|
||||
comprehensive: function (value) {
|
||||
this.clearList();
|
||||
if (value) {
|
||||
this.searchData.order = {
|
||||
key: 'sort',
|
||||
@@ -386,6 +428,7 @@
|
||||
},
|
||||
//销量
|
||||
salesVolume: function (value) {
|
||||
this.clearList();
|
||||
this.priceSortDataValue = '';
|
||||
this.searchData.order = {
|
||||
key: 'buyCount',
|
||||
@@ -397,6 +440,7 @@
|
||||
},
|
||||
//价格排序
|
||||
priceSort: function (value) {
|
||||
this.clearList();
|
||||
this.salesVolumeDataValue = '';
|
||||
this.searchData.order = {
|
||||
key: 'price',
|
||||
@@ -406,6 +450,13 @@
|
||||
this.setSearchData(this.searchData, true);
|
||||
this.getGoods();
|
||||
},
|
||||
|
||||
clearList: function () {
|
||||
this.goodsList = [];
|
||||
this.$refs.waterfall.clear();
|
||||
this.list1 = [];
|
||||
this.list2 = [];
|
||||
},
|
||||
//设置查询价格区间
|
||||
// orderPrice: function(e) {
|
||||
// var reg = /^[0-9]+(.[0-9]{2})?$/;
|
||||
@@ -583,6 +634,8 @@
|
||||
},
|
||||
//取消筛选
|
||||
filterNo() {
|
||||
this.clearList();
|
||||
|
||||
this.ePrice = '';
|
||||
this.sPrice = '';
|
||||
for (let i = 0; i < this.catList.length; i++) {
|
||||
@@ -599,6 +652,7 @@
|
||||
},
|
||||
//确认筛选
|
||||
filterOk() {
|
||||
this.clearList();
|
||||
let data = this.searchData;
|
||||
|
||||
//获取分类
|
||||
|
||||
@@ -303,83 +303,104 @@
|
||||
<view class="coreshop-margin-left-12 coreshop-margin-right-12 coreshop-text-gray">为您推荐</view>
|
||||
<view class="line-70"></view>
|
||||
</view>
|
||||
<view class="coreshop-margin-left-8 coreshop-margin-right-8 index-goods coreshop-margin-top-10" v-if="shopRecommendData.length > 0">
|
||||
<custom-waterfalls-flow :value="shopRecommendData" @wapperClick="wapperClick" @imageClick="imageClick">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="goods" v-for="(item,index) in shopRecommendData" :key="index" slot="slot{{index}}">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<template v-slot:default="item">
|
||||
<view class="goods">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
|
||||
<view class="waterfall " v-if="shopRecommendData.length > 0">
|
||||
<uv-waterfall ref="waterfall"
|
||||
v-model="shopRecommendData"
|
||||
:add-time="10"
|
||||
:left-gap="leftGap"
|
||||
:right-gap="rightGap"
|
||||
:column-gap="columnGap"
|
||||
@changeList="changeList">
|
||||
<!-- 第一列数据 -->
|
||||
<template v-slot:list1>
|
||||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||||
<view>
|
||||
<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
|
||||
<view class="coreshop-margin-bottom-10">
|
||||
<view class="waterfall-item__image" :style="[imageStyle(item)]">
|
||||
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
<!-- 第二列数据 -->
|
||||
<template v-slot:list2>
|
||||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||||
<view>
|
||||
<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
|
||||
<view class="coreshop-margin-bottom-10">
|
||||
<view class="waterfall-item__image" :style="[imageStyle(item)]">
|
||||
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
|
||||
</view>
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</uv-waterfall>
|
||||
</view>
|
||||
|
||||
<!--占位底部距离-->
|
||||
@@ -562,6 +583,11 @@
|
||||
userAgentGrade: {},
|
||||
agentProducts: [],
|
||||
promotionList: [],
|
||||
list1: [],// 瀑布流第一列数据
|
||||
list2: [],// 瀑布流第二列数据
|
||||
leftGap: 10,
|
||||
rightGap: 10,
|
||||
columnGap: 10
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
@@ -666,13 +692,23 @@
|
||||
return this.$globalConstVars.apiBaseUrl + 'wap/' + page.route + '?id=' + this.goodsId;
|
||||
// #endif
|
||||
},
|
||||
imageStyle(item) {
|
||||
return item => {
|
||||
const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
|
||||
const w = v / 2;
|
||||
const rate = w / item.w;
|
||||
const h = rate * item.h;
|
||||
return {
|
||||
width: w + 'px',
|
||||
height: h + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
wapperClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
imageClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
|
||||
changeList(e) {
|
||||
this[e.name].push(e.value);
|
||||
},
|
||||
// 打开sku弹出
|
||||
openSkuPopup() {
|
||||
|
||||
@@ -102,8 +102,8 @@
|
||||
</view>
|
||||
</view>
|
||||
<!--<view class="coreshop-cell-item-ft" v-if="teamInfo.status==1">
|
||||
<u-button type="success" size="mini" @click="goInvition()">邀请拼单</u-button>
|
||||
</view>-->
|
||||
<u-button type="success" size="mini" @click="goInvition()">邀请拼单</u-button>
|
||||
</view>-->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -186,7 +186,7 @@
|
||||
</view>
|
||||
<view class="coreshop-text-black title-view" v-if="lading.status">
|
||||
<view class="title">提货码：</view>
|
||||
<view class="coreshop-text-right" @click="showQrcodeBox(lading.code)">
|
||||
<view class="coreshop-text-right" @click="showQrcodeBox(lading.code)">
|
||||
<text class="coreshop-text-red">{{lading.code|| ''}}</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -406,50 +406,104 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!--推荐列表-->
|
||||
<view class="coreshop-goods-group" v-if="otherData.length>0">
|
||||
<custom-waterfalls-flow :value="otherData" @wapperClick="wapperClick" @imageClick="imageClick">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="goods" v-for="(item,index) in otherData" :key="index" slot="slot{{index}}">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-10 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<template v-slot:default="item">
|
||||
<view class="goods">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-10 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
|
||||
<view class="waterfall " v-if="otherData.length > 0">
|
||||
<uv-waterfall ref="waterfall"
|
||||
v-model="otherData"
|
||||
:add-time="10"
|
||||
:left-gap="leftGap"
|
||||
:right-gap="rightGap"
|
||||
:column-gap="columnGap"
|
||||
@changeList="changeList">
|
||||
<!-- 第一列数据 -->
|
||||
<template v-slot:list1>
|
||||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||||
<view>
|
||||
<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
|
||||
<view class="coreshop-margin-bottom-10">
|
||||
<view class="waterfall-item__image" :style="[imageStyle(item)]">
|
||||
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
<!-- 第二列数据 -->
|
||||
<template v-slot:list2>
|
||||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||||
<view>
|
||||
<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
|
||||
<view class="coreshop-margin-bottom-10">
|
||||
<view class="waterfall-item__image" :style="[imageStyle(item)]">
|
||||
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
|
||||
</view>
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</uv-waterfall>
|
||||
</view>
|
||||
|
||||
<!--底部-->
|
||||
@@ -502,6 +556,11 @@
|
||||
code: ''
|
||||
}, //提货信息
|
||||
show: false,
|
||||
list1: [],// 瀑布流第一列数据
|
||||
list2: [],// 瀑布流第二列数据
|
||||
leftGap: 10,
|
||||
rightGap: 10,
|
||||
columnGap: 10
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
@@ -538,14 +597,30 @@
|
||||
orderCancelTime() {
|
||||
return this.$store.state.config.orderCancelTime || 60;
|
||||
},
|
||||
pointSwitch() { return this.$store.state.config.pointSwitch },
|
||||
pointShowExchangePrice() { return this.$store.state.config.pointShowExchangePrice },
|
||||
pointDiscountedProportion() { return this.$store.state.config.pointDiscountedProportion },
|
||||
pointExchangeModel() { return this.$store.state.config.pointExchangeModel },
|
||||
pointShowName() { return this.$store.state.config.pointShowName },
|
||||
pointGetModel() { return this.$store.state.config.pointGetModel },
|
||||
pointShowPoint() { return this.$store.state.config.pointShowPoint },
|
||||
imageStyle(item) {
|
||||
return item => {
|
||||
const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
|
||||
const w = v / 2;
|
||||
const rate = w / item.w;
|
||||
const h = rate * item.h;
|
||||
return {
|
||||
width: w + 'px',
|
||||
height: h + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
wapperClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
imageClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
|
||||
changeList(e) {
|
||||
this[e.name].push(e.value);
|
||||
},
|
||||
// 获取订单详情
|
||||
orderDetail() {
|
||||
|
||||
@@ -170,81 +170,105 @@
|
||||
<view class="coreshop-margin-left-12 coreshop-margin-right-12 coreshop-text-gray">为您推荐</view>
|
||||
<view class="line-70"></view>
|
||||
</view>
|
||||
<view class="coreshop-margin-left-16 coreshop-margin-right-16 index-goods coreshop-margin-top-10" v-if="shopRecommendData.length > 0">
|
||||
<custom-waterfalls-flow :value="shopRecommendData" @wapperClick="wapperClick" @imageClick="imageClick">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="goods" v-for="(item,index) in shopRecommendData" :key="index" slot="slot{{index}}">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">{{item.buyCount+'人付款'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<template v-slot:default="item">
|
||||
<view class="goods">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
|
||||
|
||||
<view class="waterfall " v-if="shopRecommendData.length > 0">
|
||||
<uv-waterfall ref="waterfall"
|
||||
v-model="shopRecommendData"
|
||||
:add-time="10"
|
||||
:left-gap="leftGap"
|
||||
:right-gap="rightGap"
|
||||
:column-gap="columnGap"
|
||||
@changeList="changeList">
|
||||
<!-- 第一列数据 -->
|
||||
<template v-slot:list1>
|
||||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||||
<view>
|
||||
<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
|
||||
<view class="coreshop-margin-bottom-10">
|
||||
<view class="waterfall-item__image" :style="[imageStyle(item)]">
|
||||
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">{{item.buyCount+'人付款'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
<!-- 第二列数据 -->
|
||||
<template v-slot:list2>
|
||||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||||
<view>
|
||||
<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item" @tap="goGoodsDetail(item.id)">
|
||||
<view class="coreshop-margin-bottom-10">
|
||||
<view class="waterfall-item__image" :style="[imageStyle(item)]">
|
||||
<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
|
||||
</view>
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</uv-waterfall>
|
||||
</view>
|
||||
|
||||
<!-- 分享弹窗 -->
|
||||
@@ -311,6 +335,11 @@
|
||||
service: [],
|
||||
},
|
||||
disabled: false,
|
||||
list1: [],// 瀑布流第一列数据
|
||||
list2: [],// 瀑布流第二列数据
|
||||
leftGap: 10,
|
||||
rightGap: 10,
|
||||
columnGap: 10
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
@@ -350,13 +379,23 @@
|
||||
pointShowName() { return this.$store.state.config.pointShowName },
|
||||
pointGetModel() { return this.$store.state.config.pointGetModel },
|
||||
pointShowPoint() { return this.$store.state.config.pointShowPoint },
|
||||
imageStyle(item) {
|
||||
return item => {
|
||||
const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
|
||||
const w = v / 2;
|
||||
const rate = w / item.w;
|
||||
const h = rate * item.h;
|
||||
return {
|
||||
width: w + 'px',
|
||||
height: h + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
wapperClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
imageClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
|
||||
changeList(e) {
|
||||
this[e.name].push(e.value);
|
||||
},
|
||||
onChange(e) {
|
||||
this.timeData = e
|
||||
|
||||
@@ -354,9 +354,7 @@ u-icon { line-height: 0; }
|
||||
}
|
||||
|
||||
/*通用列表样式*/
|
||||
.coreshop-list {
|
||||
/*& + .coreshop-list { margin-top: 15px; }*/
|
||||
& > .coreshop-list-item { transition: all .6s ease-in-out 0s; transform: translateX(0px);
|
||||
.coreshop-list { /*& + .coreshop-list { margin-top: 15px; }*/ & > .coreshop-list-item { transition: all .6s ease-in-out 0s; transform: translateX(0px);
|
||||
&.move-cur { transform: translateX(-130px); }
|
||||
.move { position: absolute; right: 0; display: flex; width: 130px; height: 100%; transform: translateX(100%);
|
||||
view { display: flex; flex: 1; justify-content: center; align-items: center; }
|
||||
@@ -721,7 +719,7 @@ u-icon { line-height: 0; }
|
||||
.cate-list { padding-left: 23rpx; padding-right: 20rpx; }
|
||||
.cate-list .item { margin-bottom: 32rpx; margin-right: 20rpx; text-align: center; }
|
||||
.cate-list .item:nth-child(5n) { margin-right: 0rpx; }
|
||||
.index-goods .goods { -webkit-column-break-inside: avoid; border-radius: 18rpx; break-inside: avoid; margin-bottom: 24rpx; width: 326rpx; }
|
||||
.index-goods .goods { -webkit-column-break-inside: avoid; border-radius: 18rpx; break-inside: avoid; margin-bottom: 24rpx; }
|
||||
.coreshop-title-294 { width: 294rpx; }
|
||||
|
||||
.coreshop-image-price-tags { height: 32rpx; margin-bottom: 4rpx; margin-right: 12rpx; vertical-align: middle; width: 98rpx; }
|
||||
|
||||
@@ -354,9 +354,7 @@ u-icon { line-height: 0; }
|
||||
}
|
||||
|
||||
/*通用列表样式*/
|
||||
.coreshop-list {
|
||||
/*& + .coreshop-list { margin-top: 15px; }*/
|
||||
& > .coreshop-list-item { transition: all .6s ease-in-out 0s; transform: translateX(0px);
|
||||
.coreshop-list { /*& + .coreshop-list { margin-top: 15px; }*/ & > .coreshop-list-item { transition: all .6s ease-in-out 0s; transform: translateX(0px);
|
||||
&.move-cur { transform: translateX(-130px); }
|
||||
.move { position: absolute; right: 0; display: flex; width: 130px; height: 100%; transform: translateX(100%);
|
||||
view { display: flex; flex: 1; justify-content: center; align-items: center; }
|
||||
@@ -692,7 +690,7 @@ u-icon { line-height: 0; }
|
||||
/*代理价格表格*/
|
||||
.goods-agent-box { border: 0.5px solid #c3c3c3; border-radius: 0px; margin-top: 12rpx; }
|
||||
.goods-agent-line { border-bottom: 0.5px solid #c3c3c3; display: flex;
|
||||
.name { background: #f3f3f3; border-right: 0.5px solid #c3c3c3; color: #616161; font-size: 12px; text-align: center; width: 216px;}
|
||||
.name { background: #f3f3f3; border-right: 0.5px solid #c3c3c3; color: #616161; font-size: 12px; text-align: center; width: 216px; }
|
||||
.productPrice { color: #2f2f2f; border-right: 0.5px solid #c3c3c3; font-size: 12px; width: 50px; text-align: center; }
|
||||
.agentGradePrice { color: #2f2f2f; border-right: 0.5px solid #c3c3c3; font-size: 12px; width: 50px; text-align: center; }
|
||||
.profit { color: #2f2f2f; font-size: 12px; width: 50px; text-align: center; }
|
||||
@@ -721,7 +719,7 @@ u-icon { line-height: 0; }
|
||||
.cate-list { padding-left: 23rpx; padding-right: 20rpx; }
|
||||
.cate-list .item { margin-bottom: 32rpx; margin-right: 20rpx; text-align: center; }
|
||||
.cate-list .item:nth-child(5n) { margin-right: 0rpx; }
|
||||
.index-goods .goods { -webkit-column-break-inside: avoid; border-radius: 18rpx; break-inside: avoid; margin-bottom: 24rpx; width: 326rpx; }
|
||||
.index-goods .goods { -webkit-column-break-inside: avoid; border-radius: 18rpx; break-inside: avoid; margin-bottom: 24rpx; }
|
||||
.coreshop-title-294 { width: 294rpx; }
|
||||
|
||||
.coreshop-image-price-tags { height: 32rpx; margin-bottom: 4rpx; margin-right: 12rpx; vertical-align: middle; width: 98rpx; }
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
## 1.0.7（2022-05-26）
|
||||
1. 优化局部改变数据更新问题，避免重新加载数据，只改变局部
|
||||
## 1.0.6（2022-04-18）
|
||||
1. 修改tab快速切换时会出现的BUG
|
||||
## 1.0.5（2022-04-18）
|
||||
1. 修复可能存在数据错误的BUG；
|
||||
2. 兼容，今后可以无需调用refresh()就可以更新数据；
|
||||
## 1.0.4（2022-04-18）
|
||||
1. 修复BUG；
|
||||
## 1.0.3（2022-04-15）
|
||||
1. 优化代码；
|
||||
2. 修改懒加载数据存在的BUG；
|
||||
## 1.0.1（2022-03-11）
|
||||
1. 增加隐藏图片字段的键名字段hideImageKey，默认hide
|
||||
2. 支持在列表中配置hide参数进行隐藏图片
|
||||
## 1.0.0（2022-03-09）
|
||||
使用最简单的思想实现瀑布流
|
||||
@@ -1,323 +0,0 @@
|
||||
<template>
|
||||
<view class="waterfalls-flow">
|
||||
<view v-for="(item,index) in data.column" :key="index" class="waterfalls-flow-column" :id="`waterfalls_flow_column_${index+1}`" :msg="msg" :style="{'width':w,'margin-left':index==0?0:m}">
|
||||
<view :class="['column-value',{'column-value-show':item2.o}]" v-for="(item2,index2) in columnValue(index)" :key="index2" :style="[s1]" @click.stop="wapperClick(item2)">
|
||||
<view class="inner" v-if="data.seat==1">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- #ifdef VUE2 -->
|
||||
<slot name="slot{{item2.index}}"></slot>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef VUE3 -->
|
||||
<slot :name="`slot${item2.index}`"></slot>
|
||||
<!-- #endif -->
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<slot v-bind="item2"></slot>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<image :class="['img',{'img-hide':item2[hideImageKey]==true||item2[hideImageKey]==1},{'img-error':!item2[data.imageKey]}]" :src="item2[data.imageKey]" mode="widthFix" @load="imgLoad(item2,index+1)" @error="imgError(item2,index+1)" @click.stop="imageClick(item2)"></image>
|
||||
<view class="inner" v-if="data.seat==2">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- #ifdef VUE2 -->
|
||||
<slot name="slot{{item2.index}}"></slot>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef VUE3 -->
|
||||
<slot :name="`slot${item2.index}`"></slot>
|
||||
<!-- #endif -->
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<slot v-bind="item2"></slot>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: Array,
|
||||
column: { // 列的数量
|
||||
type: [String, Number],
|
||||
default: 2
|
||||
},
|
||||
maxColumn: { // 最大列数
|
||||
type: [String, Number],
|
||||
default: 5
|
||||
},
|
||||
columnSpace: { // 列之间的间距 百分比
|
||||
type: [String, Number],
|
||||
default: 2
|
||||
},
|
||||
imageKey: { // 图片key
|
||||
type: [String],
|
||||
default: 'image'
|
||||
},
|
||||
hideImageKey: { // 隐藏图片key
|
||||
type: [String],
|
||||
default: 'hide'
|
||||
},
|
||||
seat: { // 文本的位置，1图片之上 2图片之下
|
||||
type: [String, Number],
|
||||
default: 2
|
||||
},
|
||||
listStyle: { // 单个展示项的样式：eg:{'background':'red'}
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: {
|
||||
list: this.value ? this.value : [],
|
||||
column: this.column < 2 ? 2 : this.column,
|
||||
columnSpace: this.columnSpace <= 5 ? this.columnSpace : 5,
|
||||
imageKey: this.imageKey,
|
||||
seat: this.seat
|
||||
},
|
||||
msg: 0,
|
||||
listInitStyle: {
|
||||
'border-radius': '12rpx',
|
||||
'margin-bottom': '20rpx',
|
||||
'background-color': '#fff'
|
||||
},
|
||||
adds: [], //预置数据
|
||||
isLoaded: true,
|
||||
curIndex: 0,
|
||||
isRefresh: true,
|
||||
flag: false,
|
||||
refreshDatas: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 计算列宽
|
||||
w() {
|
||||
const column_rate = `${100 / this.data.column - (+this.data.columnSpace)}%`;
|
||||
return column_rate;
|
||||
},
|
||||
// 计算margin
|
||||
m() {
|
||||
const column_margin = `${(100-(100 / this.data.column - (+this.data.columnSpace)).toFixed(5)*this.data.column)/(this.data.column-1)}%`;
|
||||
return column_margin;
|
||||
},
|
||||
// list样式
|
||||
s1() {
|
||||
return { ...this.listInitStyle, ...this.listStyle };
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 初始化
|
||||
this.refresh();
|
||||
},
|
||||
methods: {
|
||||
// 预加载图片
|
||||
loadImages(idx = 0) {
|
||||
let count = 0;
|
||||
const newList = this.data.list.filter((item, index) => index >= idx);
|
||||
for (let i = 0; i < newList.length; i++) {
|
||||
// #ifndef APP-PLUS
|
||||
uni.getImageInfo({
|
||||
src: `${newList[i][this.imageKey]}.jpg`,
|
||||
complete: res => {
|
||||
count++;
|
||||
if (count == newList.length) this.initValue(idx);
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
plus.io.getImageInfo({
|
||||
src: `${newList[i][this.imageKey]}.jpg`,
|
||||
complete: res => {
|
||||
count++;
|
||||
if (count == newList.length) this.initValue(idx);
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
// 刷新
|
||||
refresh() {
|
||||
if (!this.isLoaded) {
|
||||
this.refreshDatas = this.value;
|
||||
return false;
|
||||
};
|
||||
setTimeout(() => {
|
||||
this.refreshDatas = [];
|
||||
this.isRefresh = true;
|
||||
this.adds = [];
|
||||
this.data.list = this.value ? this.value : [];
|
||||
this.data.column = this.column < 2 ? 2 : this.column >= this.maxColumn ? this.maxColumn : this.column;
|
||||
this.data.columnSpace = this.columnSpace <= 5 ? this.columnSpace : 5;
|
||||
this.data.imageKey = this.imageKey;
|
||||
this.data.seat = this.seat;
|
||||
this.curIndex = 0;
|
||||
// 每列的数据初始化
|
||||
for (let i = 1; i <= this.data.column; i++) {
|
||||
this.data[`column_${i}_values`] = [];
|
||||
this.msg++;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.initValue(this.curIndex, 'refresh==>');
|
||||
})
|
||||
}, 1)
|
||||
},
|
||||
columnValue(index) {
|
||||
return this.data[`column_${index+1}_values`];
|
||||
},
|
||||
change(newValue) {
|
||||
for (let i = 0; i < this.data.list.length; i++) {
|
||||
const cv = this.data[`column_${this.data.list[i].column}_values`];
|
||||
for (let j = 0; j < cv.length; j++) {
|
||||
if (newValue[i] && i === cv[j].index) {
|
||||
this.data[`column_${this.data.list[i].column}_values`][j] = Object.assign(cv[j], newValue[i]);
|
||||
this.msg++;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
getMin(a, s) {
|
||||
let m = a[0][s];
|
||||
let mo = a[0];
|
||||
for (var i = a.length - 1; i >= 0; i--) {
|
||||
if (a[i][s] < m) {
|
||||
m = a[i][s];
|
||||
}
|
||||
}
|
||||
mo = a.filter(i => i[s] == m);
|
||||
return mo[0];
|
||||
},
|
||||
// 计算每列的高度
|
||||
getMinColumnHeight() {
|
||||
return new Promise(resolve => {
|
||||
const heightArr = [];
|
||||
for (let i = 1; i <= this.data.column; i++) {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select(`#waterfalls_flow_column_${i}`).boundingClientRect(data => {
|
||||
heightArr.push({ column: i, height: data.height });
|
||||
}).exec(() => {
|
||||
if (this.data.column <= heightArr.length) {
|
||||
resolve(this.getMin(heightArr, 'height'));
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
async initValue(i, from) {
|
||||
this.isLoaded = false;
|
||||
if (i >= this.data.list.length || this.refreshDatas.length) {
|
||||
this.msg++;
|
||||
this.loaded();
|
||||
return false;
|
||||
}
|
||||
const minHeightRes = await this.getMinColumnHeight();
|
||||
const c = this.data[`column_${minHeightRes.column}_values`];
|
||||
this.data.list[i].column = minHeightRes.column;
|
||||
c.push({ ...this.data.list[i], cIndex: c.length, index: i, o: 0 });
|
||||
this.msg++;
|
||||
},
|
||||
// 图片加载完成
|
||||
imgLoad(item, c) {
|
||||
const i = item.index;
|
||||
item.o = 1;
|
||||
this.$set(this.data[`column_${c}_values`], item.cIndex, JSON.parse(JSON.stringify(item)));
|
||||
this.initValue(i + 1);
|
||||
},
|
||||
// 图片加载失败
|
||||
imgError(item, c) {
|
||||
const i = item.index;
|
||||
item.o = 1;
|
||||
item[this.data.imageKey] = null;
|
||||
this.$set(this.data[`column_${c}_values`], item.cIndex, JSON.parse(JSON.stringify(item)));
|
||||
this.initValue(i + 1);
|
||||
},
|
||||
// 渲染结束
|
||||
loaded() {
|
||||
if (this.refreshDatas.length) {
|
||||
this.isLoaded = true;
|
||||
this.refresh();
|
||||
return false;
|
||||
}
|
||||
this.curIndex = this.data.list.length;
|
||||
if (this.adds.length) {
|
||||
this.data.list = this.adds[0];
|
||||
this.adds.splice(0, 1);
|
||||
this.initValue(this.curIndex);
|
||||
} else {
|
||||
if (this.data.list.length) this.$emit('loaded');
|
||||
this.isLoaded = true;
|
||||
this.isRefresh = false;
|
||||
}
|
||||
},
|
||||
// 单项点击事件
|
||||
wapperClick(item) {
|
||||
this.$emit('wapperClick', item);
|
||||
},
|
||||
// 图片点击事件
|
||||
imageClick(item) {
|
||||
this.$emit('imageClick', item);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
deep: true,
|
||||
handler(newValue, oldValue) {
|
||||
setTimeout(() => {
|
||||
this.$nextTick(() => {
|
||||
if (this.isRefresh) return false;
|
||||
if (this.isLoaded) {
|
||||
// if (newValue.length <= this.curIndex) return this.refresh();
|
||||
if (newValue.length <= this.curIndex) return this.change(newValue);
|
||||
this.data.list = newValue;
|
||||
this.$nextTick(() => {
|
||||
this.initValue(this.curIndex, 'watch==>');
|
||||
})
|
||||
} else {
|
||||
this.adds.push(newValue);
|
||||
}
|
||||
})
|
||||
}, 10)
|
||||
}
|
||||
},
|
||||
column(newValue) {
|
||||
this.refresh();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.waterfalls-flow {
|
||||
overflow: hidden;
|
||||
|
||||
&-column {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.column-value {
|
||||
width: 100%;
|
||||
font-size: 0;
|
||||
overflow: hidden;
|
||||
transition: opacity .4s;
|
||||
opacity: 0;
|
||||
|
||||
&-show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.inner {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
|
||||
&-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-error {
|
||||
background: #f2f2f2 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiAQMAAAAatXkPAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAAIZJREFUCNdlzjEKwkAUBNAfEGyCuYBkLyLuxRYW2SKlV1JSeA2tUiZg4YrLjv9PGsHqNTPMSAQuyAJgRDHSyvBPwtZoSJXakeJI9iuRLGDygdl6V0yKDtyMAeMPZySj8yfD+UapvRPj2JOwkyAooSV5IwdDjPdCPspe8LyTl9IKJvDETKKRv6vnlUasgg0fAAAAAElFTkSuQmCC) no-repeat center center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,445 +0,0 @@
|
||||
- <a href="#c1" title="概要">概要</a>
|
||||
- <a href="#c2" title="支持的平台">支持的平台</a>
|
||||
- <a href="#c3" title="使用方式">使用方式</a>
|
||||
- <a href="#c4" title="属性说明">属性说明</a>
|
||||
- <a href="#c5" title="事件说明">事件说明</a>
|
||||
- <a href="#c6" title="组件方法">组件方法</a>
|
||||
- <a href="#c7" title="refresh的使用示例">refresh的使用示例</a>
|
||||
- <a href="#c8" title="隐藏单项图片示例">隐藏单项图片示例</a>
|
||||
- <a href="#c9" title="完整示例">完整示例</a>
|
||||
- <a href="#c10" title="温馨提示">温馨提示</a>
|
||||
- <a href="#c11" title="关注我，不迷路">关注我，不迷路</a>
|
||||
- <a href="#c12" title="个人作品展示">个人作品展示</a>
|
||||
|
||||
<div id="c1"></div>
|
||||
|
||||
#### 概要
|
||||
|
||||
custom-waterfalls-flow是一个瀑布流插件，灵活配置、简单易用、兼容多端、同时兼容vue2和vue3。
|
||||
|
||||
最近在做项目的时候需要用到瀑布流，于是在插件市场找了一些，下载量最高的是用了定位来做的，我认为瀑布流可以不用定位去实现，于是我就自己写了该插件。经过反复的测试优化，最终搞定！
|
||||
|
||||
**设置列数：** 瀑布流的列数可以通过参数直接控制，实时监听，随改随生效。列数最小为2，最大默认为5，可以通过maxColumn参数去控制最大列数，理论上可以设置无限大，具体值自己拿捏。
|
||||
|
||||
**更新数据：** 瀑布流的每项数据，可以直接通过修改value，随改随生效，这样可以实现加载更多数据。已经渲染过的数据不会再次渲染，每次只会渲染新增的数据，这样避免了数据越多渲染越慢的情况。可以调用组件的```refresh()```方法进行数据刷新，注意vue2和vue3中调用子组件的方法有区别，也会在下面进行说明。
|
||||
|
||||
**展示方式：** 瀑布流可以是纯图片，可以使用插槽自定义文字描述，微信小程序与app、h5使用会有些区别，也会在下面具体说明。内容高度及排序都不用担心，会根据每项的内容高度自动计算。
|
||||
|
||||
**实现思路：** 通过配置列数，先渲染出每列，再计算每列的高度，最小的那列就加入一条数据进行渲染，然后再重复计算每列，高度小的加入数据...其实思路是很简单的。
|
||||
|
||||
uniapp插件市场地址：[https://ext.dcloud.net.cn/plugin?id=7594](https://ext.dcloud.net.cn/plugin?id=7594)
|
||||
|
||||
<div id="c2"></div>
|
||||
|
||||
#### 支持的平台
|
||||
|
||||
H5、app、微信小程序（这三个平台经过反复测试优化，兼容vue2和vue3）。
|
||||
|
||||
百度小程序：由于插槽不能循环渲染的限制，只支持纯图片瀑布流。
|
||||
|
||||
其他小程序：暂未测试，需要的可以自己测试和修改，思路肯定是没错的，主要是兼容插槽的问题。
|
||||
|
||||
nvue：暂不支持，后期可能会支持，目前需要的可以自己修改源码。
|
||||
|
||||
<div id="c3"></div>
|
||||
|
||||
#### 使用方式
|
||||
|
||||
**1、导入插件**
|
||||
|
||||
该组件符合uni_modules规范，使用Hbuilderx导入插件，导入到项目根目录中的uni_modules文件夹中。
|
||||
|
||||
**2、template中使用**
|
||||
|
||||
uni_modules规范在项目页面中直接使用，不需要单独引入注册组件。
|
||||
|
||||
***纯图片瀑布流使用***
|
||||
|
||||
```
|
||||
<template>
|
||||
<custom-waterfalls-flow :value="data.list"></custom-waterfalls-flow>
|
||||
</template>
|
||||
```
|
||||
|
||||
***微信小程序自定义内容使用***
|
||||
|
||||
微信小程序没有动态模板，使用for循环的方式进行渲染。
|
||||
|
||||
```
|
||||
<template>
|
||||
<custom-waterfalls-flow :value="data.list">
|
||||
<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
</custom-waterfalls-flow>
|
||||
</template>
|
||||
```
|
||||
|
||||
***h5、app端自定义内容使用***
|
||||
|
||||
使用作用域插槽实现
|
||||
|
||||
```
|
||||
<template>
|
||||
<custom-waterfalls-flow :value="data.list">
|
||||
<template v-slot:default="item">
|
||||
<view class="item">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
</template>
|
||||
</custom-waterfalls-flow>
|
||||
</template>
|
||||
```
|
||||
|
||||
***小程序、h5、app等多端自定义内容使用***
|
||||
|
||||
条件渲染-多端同时兼容
|
||||
|
||||
```
|
||||
<template>
|
||||
<custom-waterfalls-flow :value="data.list">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<template v-slot:default="item">
|
||||
<view class="item">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
</template>
|
||||
```
|
||||
|
||||
<div id="c4"></div>
|
||||
|
||||
#### 属性说明
|
||||
|
||||
参数|说明|类型|是否必填|可选值|默认值
|
||||
-|-|-|-|-|-|
|
||||
value|渲染的列表|Array|是|-|-
|
||||
column|列数|Number|否|2-maxColumn|2
|
||||
maxColumn|最大列数|Number|否|>2|5
|
||||
columnSpace|列之间的间距（单位是百分比）|Number|否|-|2
|
||||
imageKey|列表中的图片字段的键名|String|否|-|image
|
||||
hideImageKey|隐藏图片字段的键名|String|否|-|hide
|
||||
seat|自定义文字的位置,1-图片上方，2-图片下方|Number|否|1/2|2
|
||||
listStyle|单个展示项的样式|Object|否|示例：```{'background':'red'}```|-
|
||||
|
||||
<div id="c5"></div>
|
||||
|
||||
#### 事件说明
|
||||
|
||||
事件名称|说明|回调参数
|
||||
-|-|-|
|
||||
@loaded|图片加载完成事件|-
|
||||
@wapperClick|单项点击事件|单项对应参数
|
||||
@imageClick|图片点击事件|单项对应参数
|
||||
|
||||
<div id="c6"></div>
|
||||
|
||||
#### 组件方法
|
||||
|
||||
事件名称|说明|参数|使用场景
|
||||
-|-|-|-
|
||||
refresh|刷新数据，数据初始化，vue2中使用：```this.$refs.waterfallsFlowRef.refresh();```；vue3中使用：```const waterfallsFlowRef = ref(null);waterfallsFlowRef.value.refresh();```|-|下拉刷新等
|
||||
|
||||
<div id="c7"></div>
|
||||
|
||||
#### refresh的使用示例
|
||||
|
||||
***vue2中使用***
|
||||
|
||||
```
|
||||
<template>
|
||||
<view>
|
||||
<button class="btn" type="default" @click="reset()">刷新数据</button>
|
||||
<custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list"></custom-waterfalls-flow>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data:{
|
||||
list: [
|
||||
{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' },
|
||||
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
reset(){
|
||||
this.data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
|
||||
this.$refs.waterfallsFlowRef.refresh();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
***vue3中使用***
|
||||
|
||||
```
|
||||
<template>
|
||||
<view>
|
||||
<button class="btn" type="default" @click="reset()">刷新数据</button>
|
||||
<custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list"></custom-waterfalls-flow>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
const data = reactive({
|
||||
list: [
|
||||
{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' },
|
||||
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }
|
||||
]
|
||||
});
|
||||
const waterfallsFlowRef = ref(null);
|
||||
function reset(){
|
||||
data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
|
||||
waterfallsFlowRef.value.refresh();
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
<div id="c8"></div>
|
||||
|
||||
#### 隐藏单项图片示例
|
||||
|
||||
在数据列表中配置```hide:true```或者```hide:1```，就可以达到不显示图片的效果。支持使用参数hideImageKey自定义键名称，那就使用：```定义的键名称:true```或者```定义的键名称:1```。
|
||||
|
||||
```
|
||||
<template>
|
||||
<custom-waterfalls-flow :value="data.list">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<template v-slot:default="item">
|
||||
<view class="item">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
const data = reactive({
|
||||
list: [
|
||||
{ image: 'https://via.placeholder.com/200x500.png/ff0000',
|
||||
hide:1,title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' },
|
||||
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }
|
||||
]
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
<div id="c9"></div>
|
||||
|
||||
#### 完整示例
|
||||
|
||||
```
|
||||
<template>
|
||||
<view style="padding: 0 10rpx;">
|
||||
<view class="handle">
|
||||
<button class="btn" type="default" @click="add()">增加数据</button>
|
||||
<button class="btn" type="default" @click="changeColumn(1)">+列数({{column}})</button>
|
||||
<button class="btn" type="default" @click="changeColumn(0)">-列数({{column}})</button>
|
||||
<button class="btn" type="default" @click="reset()">刷新数据</button>
|
||||
</view>
|
||||
<custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list" :column="column" :columnSpace="1.5" :seat="2" @wapperClick="wapperClick" @imageClick="imageClick" @loaded="loaded">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<template v-slot:default="item">
|
||||
<view class="item">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
// #ifdef VUE3
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
const data = reactive({
|
||||
list: [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' },
|
||||
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' },
|
||||
{ image: 'https://via.placeholder.com/200x100.png/FFB6C1', title: '我是标题3', desc: '描述描述描述描述描述描述描述描述3' },
|
||||
{ image: 'https://via.placeholder.com/200x300.png/9400D3', title: '我是标题4', desc: '描述描述描述描述描述描述描述描述4' },
|
||||
{ image: 'https://via.placeholder.com/100x240.png/B0E0E6', title: '我是标题5', desc: '描述描述描述描述描述描述描述描述5' },
|
||||
{ image: 'https://via.placeholder.com/140x280.png/7FFFAA', title: '我是标题6', desc: '描述描述描述描述描述描述描述描述6' },
|
||||
{ image: 'https://via.placeholder.com/40x60.png/EEE8AA', title: '我是标题7', desc: '描述描述描述描述描述描述描述描述7' }]
|
||||
});
|
||||
const column = ref(3);
|
||||
|
||||
function add() {
|
||||
const newArr = [{ image: 'https://via.placeholder.com/58x100.png/FF7F50', title: '我是标题8', desc: '描述描述描述描述描述描述描述描述8' },
|
||||
{ image: 'https://via.placeholder.com/59x100.png/C0C0C0', title: '我是标题9', desc: '描述描述描述描述描述描述描述描述9' },
|
||||
{ image: 'https://via.placeholder.com/60x100.png/FAEBD7', title: '我是标题10', desc: '描述描述描述描述描述描述描述描述10' }];
|
||||
data.list = data.list.concat(newArr);
|
||||
}
|
||||
|
||||
function changeColumn(h) {
|
||||
column.value = !h ? column.value - 1 : column.value + 1;
|
||||
}
|
||||
|
||||
function loaded() {
|
||||
console.log('加载完成')
|
||||
}
|
||||
|
||||
function wapperClick(item) {
|
||||
console.log('单项点击事件', item)
|
||||
}
|
||||
|
||||
function imageClick(item) {
|
||||
console.log('图片点击事件', item)
|
||||
}
|
||||
const waterfallsFlowRef = ref(null);
|
||||
|
||||
function reset() {
|
||||
data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
|
||||
waterfallsFlowRef.value.refresh();
|
||||
}
|
||||
// #endif
|
||||
</script>
|
||||
<script>
|
||||
// #ifdef VUE2
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: {
|
||||
list: [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' },
|
||||
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' },
|
||||
{ image: 'https://via.placeholder.com/200x100.png/FFB6C1', title: '我是标题3', desc: '描述描述描述描述描述描述描述描述3' },
|
||||
{ image: 'https://via.placeholder.com/200x300.png/9400D3', title: '我是标题4', desc: '描述描述描述描述描述描述描述描述4' },
|
||||
{ image: 'https://via.placeholder.com/100x240.png/B0E0E6', title: '我是标题5', desc: '描述描述描述描述描述描述描述描述5' },
|
||||
{ image: 'https://via.placeholder.com/140x280.png/7FFFAA', title: '我是标题6', desc: '描述描述描述描述描述描述描述描述6' },
|
||||
{ image: 'https://via.placeholder.com/40x60.png/EEE8AA', title: '我是标题7', desc: '描述描述描述描述描述描述描述描述7' }]
|
||||
},
|
||||
column: 3
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
const newArr = [{ image: 'https://via.placeholder.com/58x100.png/FF7F50', title: '我是标题8', desc: '描述描述描述描述描述描述描述描述8' },
|
||||
{ image: 'https://via.placeholder.com/59x100.png/C0C0C0', title: '我是标题9', desc: '描述描述描述描述描述描述描述描述9' },
|
||||
{ image: 'https://via.placeholder.com/60x100.png/FAEBD7', title: '我是标题10', desc: '描述描述描述描述描述描述描述描述10' }]
|
||||
this.data.list = this.data.list.concat(newArr);
|
||||
},
|
||||
changeColumn(h) {
|
||||
this.column = !h ? this.column - 1 : this.column + 1;
|
||||
},
|
||||
loaded() {
|
||||
console.log('加载完成')
|
||||
},
|
||||
wapperClick(item) {
|
||||
console.log('单项点击事件', item)
|
||||
},
|
||||
imageClick(item) {
|
||||
console.log('图片点击事件', item)
|
||||
},
|
||||
reset() {
|
||||
this.data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
|
||||
this.$refs.waterfallsFlowRef.refresh();
|
||||
}
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
background-color: #f2f5f9;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.handle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 10rpx;
|
||||
|
||||
.btn {
|
||||
margin: 20rpx 10rpx;
|
||||
padding: 0 20rpx;
|
||||
background: #2878FF;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
|
||||
&::after {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 10rpx 10rpx 20rpx;
|
||||
|
||||
.title {
|
||||
line-height: 48rpx;
|
||||
font-size: 28rpx;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
<div id="c10"></div>
|
||||
|
||||
#### 温馨提示
|
||||
|
||||
1、该插件反复测试过微信小程序、h5、app-vue三个端，vue2和vue3都兼容，其他端可能需要测试改进。
|
||||
|
||||
2、该插件的使用hbuilderx版本最好升级到较新版本，我开发的版本是hbuilderx3.3.11.20220209。
|
||||
|
||||
3、对此插件或相关问题有好的建议，可以直接在评论区进行讨论。
|
||||
|
||||
4、希望遇到问题不要喷，也不要骂人，其实这种心情我能理解，写该插件也不是一时半会就完成了的，所以希望互相理解。只要有问题，我会第一时间回复解决。
|
||||
|
||||
5、对此插件有任何问题的可以在下方留言，我会第一时间回复和解决问题。还可以加QQ群进行前端技术交流 568984539，加群备注‘地区-名字-技术类型’。
|
||||
|
||||
#### 最后我想说：认为该插件对你有帮助的，记得收藏、好评，这样可以帮助到更多人哟！
|
||||
|
||||
---
|
||||
|
||||
<div id="c11"></div>
|
||||
|
||||
#### 关注我，不迷路
|
||||
|
||||
如果任何疑问的可以在评论区留言，还可以加QQ群交流：568984539，加群备注‘地区-名字-技术类型’。
|
||||
|
||||
更多前端等相关知识可关注我个人博客：https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343
|
||||
|
||||
<div id="c12"></div>
|
||||
|
||||
#### 个人作品展示
|
||||
|
||||
uniapp+vue3.2+unicloud开发微信小程序：**皮皮虎去水印**。
|
||||
|
||||
关注下方公众号：【**全网免费网盘资源**】、【**美团外卖饿了么天天领红包**】、【**去水印**】
|
||||
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
## 1.0.13（2023-12-06）
|
||||
1. 优化
|
||||
## 1.0.12（2023-12-06）
|
||||
1. 阻止事件冒泡处理
|
||||
## 1.0.11（2023-10-29）
|
||||
1. imgMode默认值改成aspectFit
|
||||
## 1.0.10（2023-08-13）
|
||||
1. 优化nvue，方便自定义图标
|
||||
## 1.0.9（2023-07-28）
|
||||
1. 修改几个对应错误图标的BUG
|
||||
## 1.0.8（2023-07-24）
|
||||
1. 优化 支持base64图片
|
||||
## 1.0.7（2023-07-17）
|
||||
1. 修复 uv-icon 恢复uv-empty相关的图标
|
||||
## 1.0.6（2023-07-13）
|
||||
1. 修复icon设置name属性对应图标错误的BUG
|
||||
## 1.0.5（2023-07-04）
|
||||
1. 更新图标，删除一些不常用的图标
|
||||
2. 删除base64，修改成ttf文件引入读取图标
|
||||
3. 自定义图标文档说明：https://www.uvui.cn/guide/customIcon.html
|
||||
## 1.0.4（2023-07-03）
|
||||
1. 修复主题颜色在APP不生效的BUG
|
||||
## 1.0.3（2023-05-24）
|
||||
1. 将线上ttf字体包替换成base64，避免加载时或者网络差时候显示白色方块
|
||||
## 1.0.2（2023-05-16）
|
||||
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.1（2023-05-10）
|
||||
1. 修复小程序中异常显示
|
||||
## 1.0.0（2023-05-04）
|
||||
新发版
|
||||
@@ -0,0 +1,160 @@
|
||||
export default {
|
||||
'uvicon-level': 'e68f',
|
||||
'uvicon-checkbox-mark': 'e659',
|
||||
'uvicon-folder': 'e694',
|
||||
'uvicon-movie': 'e67c',
|
||||
'uvicon-star-fill': 'e61e',
|
||||
'uvicon-star': 'e618',
|
||||
'uvicon-phone-fill': 'e6ac',
|
||||
'uvicon-phone': 'e6ba',
|
||||
'uvicon-apple-fill': 'e635',
|
||||
'uvicon-backspace': 'e64d',
|
||||
'uvicon-attach': 'e640',
|
||||
'uvicon-empty-data': 'e671',
|
||||
'uvicon-empty-address': 'e68a',
|
||||
'uvicon-empty-favor': 'e662',
|
||||
'uvicon-empty-car': 'e657',
|
||||
'uvicon-empty-order': 'e66b',
|
||||
'uvicon-empty-list': 'e672',
|
||||
'uvicon-empty-search': 'e677',
|
||||
'uvicon-empty-permission': 'e67d',
|
||||
'uvicon-empty-news': 'e67e',
|
||||
'uvicon-empty-history': 'e685',
|
||||
'uvicon-empty-coupon': 'e69b',
|
||||
'uvicon-empty-page': 'e60e',
|
||||
'uvicon-empty-wifi-off': 'e6cc',
|
||||
'uvicon-reload': 'e627',
|
||||
'uvicon-order': 'e695',
|
||||
'uvicon-server-man': 'e601',
|
||||
'uvicon-search': 'e632',
|
||||
'uvicon-more-dot-fill': 'e66f',
|
||||
'uvicon-scan': 'e631',
|
||||
'uvicon-map': 'e665',
|
||||
'uvicon-map-fill': 'e6a8',
|
||||
'uvicon-tags': 'e621',
|
||||
'uvicon-tags-fill': 'e613',
|
||||
'uvicon-eye': 'e664',
|
||||
'uvicon-eye-fill': 'e697',
|
||||
'uvicon-eye-off': 'e69c',
|
||||
'uvicon-eye-off-outline': 'e688',
|
||||
'uvicon-mic': 'e66d',
|
||||
'uvicon-mic-off': 'e691',
|
||||
'uvicon-calendar': 'e65c',
|
||||
'uvicon-trash': 'e623',
|
||||
'uvicon-trash-fill': 'e6ce',
|
||||
'uvicon-play-left': 'e6bf',
|
||||
'uvicon-play-right': 'e6b3',
|
||||
'uvicon-minus': 'e614',
|
||||
'uvicon-plus': 'e625',
|
||||
'uvicon-info-circle': 'e69f',
|
||||
'uvicon-info-circle-fill': 'e6a7',
|
||||
'uvicon-question-circle': 'e622',
|
||||
'uvicon-question-circle-fill': 'e6bc',
|
||||
'uvicon-close': 'e65a',
|
||||
'uvicon-checkmark': 'e64a',
|
||||
'uvicon-checkmark-circle': 'e643',
|
||||
'uvicon-checkmark-circle-fill': 'e668',
|
||||
'uvicon-setting': 'e602',
|
||||
'uvicon-setting-fill': 'e6d0',
|
||||
'uvicon-heart': 'e6a2',
|
||||
'uvicon-heart-fill': 'e68b',
|
||||
'uvicon-camera': 'e642',
|
||||
'uvicon-camera-fill': 'e650',
|
||||
'uvicon-more-circle': 'e69e',
|
||||
'uvicon-more-circle-fill': 'e684',
|
||||
'uvicon-chat': 'e656',
|
||||
'uvicon-chat-fill': 'e63f',
|
||||
'uvicon-bag': 'e647',
|
||||
'uvicon-error-circle': 'e66e',
|
||||
'uvicon-error-circle-fill': 'e655',
|
||||
'uvicon-close-circle': 'e64e',
|
||||
'uvicon-close-circle-fill': 'e666',
|
||||
'uvicon-share': 'e629',
|
||||
'uvicon-share-fill': 'e6bb',
|
||||
'uvicon-share-square': 'e6c4',
|
||||
'uvicon-shopping-cart': 'e6cb',
|
||||
'uvicon-shopping-cart-fill': 'e630',
|
||||
'uvicon-bell': 'e651',
|
||||
'uvicon-bell-fill': 'e604',
|
||||
'uvicon-list': 'e690',
|
||||
'uvicon-list-dot': 'e6a9',
|
||||
'uvicon-zhifubao-circle-fill': 'e617',
|
||||
'uvicon-weixin-circle-fill': 'e6cd',
|
||||
'uvicon-weixin-fill': 'e620',
|
||||
'uvicon-qq-fill': 'e608',
|
||||
'uvicon-qq-circle-fill': 'e6b9',
|
||||
'uvicon-moments-circel-fill': 'e6c2',
|
||||
'uvicon-moments': 'e6a0',
|
||||
'uvicon-car': 'e64f',
|
||||
'uvicon-car-fill': 'e648',
|
||||
'uvicon-warning-fill': 'e6c7',
|
||||
'uvicon-warning': 'e6c1',
|
||||
'uvicon-clock-fill': 'e64b',
|
||||
'uvicon-clock': 'e66c',
|
||||
'uvicon-edit-pen': 'e65d',
|
||||
'uvicon-edit-pen-fill': 'e679',
|
||||
'uvicon-email': 'e673',
|
||||
'uvicon-email-fill': 'e683',
|
||||
'uvicon-minus-circle': 'e6a5',
|
||||
'uvicon-plus-circle': 'e603',
|
||||
'uvicon-plus-circle-fill': 'e611',
|
||||
'uvicon-file-text': 'e687',
|
||||
'uvicon-file-text-fill': 'e67f',
|
||||
'uvicon-pushpin': 'e6d1',
|
||||
'uvicon-pushpin-fill': 'e6b6',
|
||||
'uvicon-grid': 'e68c',
|
||||
'uvicon-grid-fill': 'e698',
|
||||
'uvicon-play-circle': 'e6af',
|
||||
'uvicon-play-circle-fill': 'e62a',
|
||||
'uvicon-pause-circle-fill': 'e60c',
|
||||
'uvicon-pause': 'e61c',
|
||||
'uvicon-pause-circle': 'e696',
|
||||
'uvicon-gift-fill': 'e6b0',
|
||||
'uvicon-gift': 'e680',
|
||||
'uvicon-kefu-ermai': 'e660',
|
||||
'uvicon-server-fill': 'e610',
|
||||
'uvicon-coupon-fill': 'e64c',
|
||||
'uvicon-coupon': 'e65f',
|
||||
'uvicon-integral': 'e693',
|
||||
'uvicon-integral-fill': 'e6b1',
|
||||
'uvicon-home-fill': 'e68e',
|
||||
'uvicon-home': 'e67b',
|
||||
'uvicon-account': 'e63a',
|
||||
'uvicon-account-fill': 'e653',
|
||||
'uvicon-thumb-down-fill': 'e628',
|
||||
'uvicon-thumb-down': 'e60a',
|
||||
'uvicon-thumb-up': 'e612',
|
||||
'uvicon-thumb-up-fill': 'e62c',
|
||||
'uvicon-lock-fill': 'e6a6',
|
||||
'uvicon-lock-open': 'e68d',
|
||||
'uvicon-lock-opened-fill': 'e6a1',
|
||||
'uvicon-lock': 'e69d',
|
||||
'uvicon-red-packet': 'e6c3',
|
||||
'uvicon-photo-fill': 'e6b4',
|
||||
'uvicon-photo': 'e60d',
|
||||
'uvicon-volume-off-fill': 'e6c8',
|
||||
'uvicon-volume-off': 'e6bd',
|
||||
'uvicon-volume-fill': 'e624',
|
||||
'uvicon-volume': 'e605',
|
||||
'uvicon-download': 'e670',
|
||||
'uvicon-arrow-up-fill': 'e636',
|
||||
'uvicon-arrow-down-fill': 'e638',
|
||||
'uvicon-play-left-fill': 'e6ae',
|
||||
'uvicon-play-right-fill': 'e6ad',
|
||||
'uvicon-arrow-downward': 'e634',
|
||||
'uvicon-arrow-leftward': 'e63b',
|
||||
'uvicon-arrow-rightward': 'e644',
|
||||
'uvicon-arrow-upward': 'e641',
|
||||
'uvicon-arrow-down': 'e63e',
|
||||
'uvicon-arrow-right': 'e63c',
|
||||
'uvicon-arrow-left': 'e646',
|
||||
'uvicon-arrow-up': 'e633',
|
||||
'uvicon-skip-back-left': 'e6c5',
|
||||
'uvicon-skip-forward-right': 'e61f',
|
||||
'uvicon-arrow-left-double': 'e637',
|
||||
'uvicon-man': 'e675',
|
||||
'uvicon-woman': 'e626',
|
||||
'uvicon-en': 'e6b8',
|
||||
'uvicon-twitte': 'e607',
|
||||
'uvicon-twitter-circle-fill': 'e6cf'
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
export default {
|
||||
props: {
|
||||
// 图标类名
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 图标颜色，可接受主题色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
},
|
||||
// 字体大小，单位px
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: '16px'
|
||||
},
|
||||
// 是否显示粗体
|
||||
bold: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
|
||||
index: {
|
||||
type: [String, Number],
|
||||
default: null
|
||||
},
|
||||
// 触摸图标时的类名
|
||||
hoverClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 自定义扩展前缀，方便用户扩展自己的图标库
|
||||
customPrefix: {
|
||||
type: String,
|
||||
default: 'uvicon'
|
||||
},
|
||||
// 图标右边或者下面的文字
|
||||
label: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// label的位置，只能右边或者下边
|
||||
labelPos: {
|
||||
type: String,
|
||||
default: 'right'
|
||||
},
|
||||
// label的大小
|
||||
labelSize: {
|
||||
type: [String, Number],
|
||||
default: '15px'
|
||||
},
|
||||
// label的颜色
|
||||
labelColor: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
},
|
||||
// label与图标的距离
|
||||
space: {
|
||||
type: [String, Number],
|
||||
default: '3px'
|
||||
},
|
||||
// 图片的mode
|
||||
imgMode: {
|
||||
type: String,
|
||||
default: 'aspectFit'
|
||||
},
|
||||
// 用于显示图片小图标时，图片的宽度
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// 用于显示图片小图标时，图片的高度
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// 用于解决某些情况下，让图标垂直居中的用途
|
||||
top: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 是否阻止事件传播
|
||||
stop: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
...uni.$uv?.props?.icon
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<view
|
||||
class="uv-icon"
|
||||
@tap="clickHandler"
|
||||
:class="['uv-icon--' + labelPos]"
|
||||
>
|
||||
<image
|
||||
class="uv-icon__img"
|
||||
v-if="isImg"
|
||||
:src="name"
|
||||
:mode="imgMode"
|
||||
:style="[imgStyle, $uv.addStyle(customStyle)]"
|
||||
></image>
|
||||
<text
|
||||
v-else
|
||||
class="uv-icon__icon"
|
||||
:class="uClasses"
|
||||
:style="[iconStyle, $uv.addStyle(customStyle)]"
|
||||
:hover-class="hoverClass"
|
||||
>{{icon}}</text>
|
||||
<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
|
||||
<text
|
||||
v-if="label !== ''"
|
||||
class="uv-icon__label"
|
||||
:style="{
|
||||
color: labelColor,
|
||||
fontSize: $uv.addUnit(labelSize),
|
||||
marginLeft: labelPos == 'right' ? $uv.addUnit(space) : 0,
|
||||
marginTop: labelPos == 'bottom' ? $uv.addUnit(space) : 0,
|
||||
marginRight: labelPos == 'left' ? $uv.addUnit(space) : 0,
|
||||
marginBottom: labelPos == 'top' ? $uv.addUnit(space) : 0
|
||||
}"
|
||||
>{{ label }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
// #ifdef APP-NVUE
|
||||
// nvue通过weex的dom模块引入字体，相关文档地址如下：
|
||||
// https://weex.apache.org/zh/docs/modules/dom.html#addrule
|
||||
import iconUrl from './uvicons.ttf';
|
||||
const domModule = weex.requireModule('dom')
|
||||
domModule.addRule('fontFace', {
|
||||
'fontFamily': "uvicon-iconfont",
|
||||
'src': "url('" + iconUrl + "')"
|
||||
})
|
||||
// #endif
|
||||
// 引入图标名称，已经对应的unicode
|
||||
import icons from './icons';
|
||||
import props from './props.js';
|
||||
/**
|
||||
* icon 图标
|
||||
* @description 基于字体的图标集，包含了大多数常见场景的图标。
|
||||
* @tutorial https://www.uvui.cn/components/icon.html
|
||||
* @property {String} name 图标名称，见示例图标集
|
||||
* @property {String} color 图标颜色,可接受主题色 （默认 color['uv-content-color'] ）
|
||||
* @property {String | Number} size 图标字体大小，单位px （默认 '16px' ）
|
||||
* @property {Boolean} bold 是否显示粗体 （默认 false ）
|
||||
* @property {String | Number} index 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
|
||||
* @property {String} hoverClass 图标按下去的样式类，用法同uni的view组件的hoverClass参数，详情见官网
|
||||
* @property {String} customPrefix 自定义扩展前缀，方便用户扩展自己的图标库 （默认 'uicon' ）
|
||||
* @property {String | Number} label 图标右侧的label文字
|
||||
* @property {String} labelPos label相对于图标的位置，只能right或bottom （默认 'right' ）
|
||||
* @property {String | Number} labelSize label字体大小，单位px （默认 '15px' ）
|
||||
* @property {String} labelColor 图标右侧的label文字颜色 （ 默认 color['uv-content-color'] ）
|
||||
* @property {String | Number} space label与图标的距离，单位px （默认 '3px' ）
|
||||
* @property {String} imgMode 图片的mode
|
||||
* @property {String | Number} width 显示图片小图标时的宽度
|
||||
* @property {String | Number} height 显示图片小图标时的高度
|
||||
* @property {String | Number} top 图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途 （默认 0 ）
|
||||
* @property {Boolean} stop 是否阻止事件传播 （默认 false ）
|
||||
* @property {Object} customStyle icon的样式，对象形式
|
||||
* @event {Function} click 点击图标时触发
|
||||
* @event {Function} touchstart 事件触摸时触发
|
||||
* @example <uv-icon name="photo" color="#2979ff" size="28"></uv-icon>
|
||||
*/
|
||||
export default {
|
||||
name: 'uv-icon',
|
||||
emits: ['click'],
|
||||
mixins: [mpMixin, mixin, props],
|
||||
data() {
|
||||
return {
|
||||
colorType: [
|
||||
'primary',
|
||||
'success',
|
||||
'info',
|
||||
'error',
|
||||
'warning'
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
uClasses() {
|
||||
let classes = []
|
||||
classes.push(this.customPrefix)
|
||||
classes.push(this.customPrefix + '-' + this.name)
|
||||
// 主题色，通过类配置
|
||||
if (this.color && this.colorType.includes(this.color)) classes.push('uv-icon__icon--' + this.color)
|
||||
// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
|
||||
// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
|
||||
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
|
||||
classes = classes.join(' ')
|
||||
//#endif
|
||||
return classes
|
||||
},
|
||||
iconStyle() {
|
||||
let style = {}
|
||||
style = {
|
||||
fontSize: this.$uv.addUnit(this.size),
|
||||
lineHeight: this.$uv.addUnit(this.size),
|
||||
fontWeight: this.bold ? 'bold' : 'normal',
|
||||
// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
|
||||
top: this.$uv.addUnit(this.top)
|
||||
}
|
||||
// 非主题色值时，才当作颜色值
|
||||
if (this.color && !this.colorType.includes(this.color)) style.color = this.color
|
||||
return style
|
||||
},
|
||||
// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
|
||||
isImg() {
|
||||
const isBase64 = this.name.indexOf('data:') > -1 && this.name.indexOf('base64') > -1;
|
||||
return this.name.indexOf('/') !== -1 || isBase64;
|
||||
},
|
||||
imgStyle() {
|
||||
let style = {}
|
||||
// 如果设置width和height属性，则优先使用，否则使用size属性
|
||||
style.width = this.width ? this.$uv.addUnit(this.width) : this.$uv.addUnit(this.size)
|
||||
style.height = this.height ? this.$uv.addUnit(this.height) : this.$uv.addUnit(this.size)
|
||||
return style
|
||||
},
|
||||
// 通过图标名，查找对应的图标
|
||||
icon() {
|
||||
// 如果内置的图标中找不到对应的图标，就直接返回name值，因为用户可能传入的是unicode代码
|
||||
const code = icons['uvicon-' + this.name];
|
||||
// #ifdef APP-NVUE
|
||||
if(!code) {
|
||||
return code ? unescape(`%u${code}`) : ['uvicon'].indexOf(this.customPrefix) > -1 ? unescape(`%u${this.name}`) : '';
|
||||
}
|
||||
// #endif
|
||||
return code ? unescape(`%u${code}`) : ['uvicon'].indexOf(this.customPrefix) > -1 ? this.name : '';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickHandler(e) {
|
||||
this.$emit('click', this.index)
|
||||
// 是否阻止事件冒泡
|
||||
this.stop && this.preventEvent(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
|
||||
// 变量定义
|
||||
$uv-icon-primary: $uv-primary !default;
|
||||
$uv-icon-success: $uv-success !default;
|
||||
$uv-icon-info: $uv-info !default;
|
||||
$uv-icon-warning: $uv-warning !default;
|
||||
$uv-icon-error: $uv-error !default;
|
||||
$uv-icon-label-line-height: 1 !default;
|
||||
/* #ifndef APP-NVUE */
|
||||
// 非nvue下加载字体
|
||||
@font-face {
|
||||
font-family: 'uvicon-iconfont';
|
||||
src: url('./uvicons.ttf') format('truetype');
|
||||
}
|
||||
/* #endif */
|
||||
.uv-icon {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
&--left {
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
}
|
||||
&--right {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
&--top {
|
||||
flex-direction: column-reverse;
|
||||
justify-content: center;
|
||||
}
|
||||
&--bottom {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
&__icon {
|
||||
font-family: uvicon-iconfont;
|
||||
position: relative;
|
||||
@include flex;
|
||||
align-items: center;
|
||||
&--primary {
|
||||
color: $uv-icon-primary;
|
||||
}
|
||||
&--success {
|
||||
color: $uv-icon-success;
|
||||
}
|
||||
&--error {
|
||||
color: $uv-icon-error;
|
||||
}
|
||||
&--warning {
|
||||
color: $uv-icon-warning;
|
||||
}
|
||||
&--info {
|
||||
color: $uv-icon-info;
|
||||
}
|
||||
}
|
||||
&__img {
|
||||
/* #ifndef APP-NVUE */
|
||||
height: auto;
|
||||
will-change: transform;
|
||||
/* #endif */
|
||||
}
|
||||
&__label {
|
||||
/* #ifndef APP-NVUE */
|
||||
line-height: $uv-icon-label-line-height;
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
@@ -1,21 +1,17 @@
|
||||
{
|
||||
"id": "custom-waterfalls-flow",
|
||||
"displayName": "瀑布流 灵活配置 简单易用 兼容vue2vue3小程序、H5、app等多端",
|
||||
"version": "1.0.7",
|
||||
"description": "瀑布流，根据内容自动计算进行流式布局，简单参数配置，实现兼容多端及vue2和vue3的瀑布流布局",
|
||||
"id": "uv-icon",
|
||||
"displayName": "uv-icon 图标 全面兼容vue3+2、app、h5、小程序等多端",
|
||||
"version": "1.0.13",
|
||||
"description": "基于字体的图标集，包含了大多数常见场景的图标，支持自定义，支持自定义图片图标等。可自定义颜色、大小。",
|
||||
"keywords": [
|
||||
"瀑布流",
|
||||
"瀑布流式布局"
|
||||
"uv-ui,uvui,uv-icon,icon,图标,字体图标"
|
||||
],
|
||||
"repository": "https://gitee.com/my_dear_li_pan/my-uni-modules.git",
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.3.11"
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
@@ -35,7 +31,9 @@
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"dependencies": [
|
||||
"uv-ui-tools"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
@@ -49,7 +47,7 @@
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "n"
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
@@ -59,17 +57,21 @@
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "u"
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "u",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "u"
|
||||
"QQ": "y",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
15
CoreCms.Net.Uni-App/CoreShop/uni_modules/uv-icon/readme.md
Normal file
15
CoreCms.Net.Uni-App/CoreShop/uni_modules/uv-icon/readme.md
Normal file
@@ -0,0 +1,15 @@
|
||||
## uv-icon 图标库
|
||||
|
||||
> **组件名：uv-icon**
|
||||
|
||||
基于字体的图标集，包含了大多数常见场景的图标，支持自定义，支持自定义图片图标等。
|
||||
|
||||
# <a href="https://www.uvui.cn/components/icon.html" target="_blank">查看文档</a>
|
||||
|
||||
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
|
||||
|
||||
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||
@@ -0,0 +1,36 @@
|
||||
## 1.0.16（2023-12-21）
|
||||
1. 修复设置show-menu-by-longpress不生效的BUG
|
||||
## 1.0.15（2023-12-06）
|
||||
1. 优化
|
||||
## 1.0.14（2023-12-06）
|
||||
1. 阻止事件冒泡问题
|
||||
## 1.0.13（2023-11-15）
|
||||
1. 修复webp之前未使用的BUG
|
||||
## 1.0.12（2023-10-11）
|
||||
1. 修复懒加载报错：https://gitee.com/climblee/uv-ui/issues/I869JS
|
||||
## 1.0.11（2023-08-31）
|
||||
1. 修复设置widthFix时出现显示不全的BUG
|
||||
2. 修复抖音等平台在width和height属性改变时出现不显示的BUG
|
||||
## 1.0.10（2023-08-29）
|
||||
1. 修复异步修改宽高不生效的问题，问题来源：https://gitee.com/climblee/uv-ui/issues/I7WUQ3
|
||||
## 1.0.9（2023-08-21）
|
||||
1. 修复设置宽高为百分比不生效的BUG
|
||||
## 1.0.8（2023-07-24）
|
||||
1. 优化 nvue模式下增加cellChild参数，是否在list中cell节点下，nvue中cell下建议设置成true
|
||||
## 1.0.7（2023-07-02）
|
||||
修复VUE3模式下可能不显示的BUG
|
||||
## 1.0.6（2023-07-02）
|
||||
优化修改
|
||||
## 1.0.5（2023-06-28）
|
||||
修复duration属性不生效的BUG
|
||||
## 1.0.4（2023-05-27）
|
||||
1. 修复可能报错的问题
|
||||
## 1.0.3（2023-05-24）
|
||||
1. 去掉template中存在的this.导致头条小程序编译警告
|
||||
## 1.0.2（2023-05-23）
|
||||
1. 优化
|
||||
## 1.0.1（2023-05-16）
|
||||
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.0（2023-05-10）
|
||||
uv-image 图片
|
||||
@@ -0,0 +1,95 @@
|
||||
export default {
|
||||
props: {
|
||||
// 图片地址
|
||||
src: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 裁剪模式
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'aspectFill'
|
||||
},
|
||||
// 宽度，单位任意
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: '300'
|
||||
},
|
||||
// 高度，单位任意
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: '225'
|
||||
},
|
||||
// 图片形状，circle-圆形，square-方形
|
||||
shape: {
|
||||
type: String,
|
||||
default: 'square'
|
||||
},
|
||||
// 圆角，单位任意
|
||||
radius: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序
|
||||
lazyLoad: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否开启observer懒加载，nvue不生效
|
||||
observeLazyLoad: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 开启长按图片显示识别微信小程序码菜单
|
||||
showMenuByLongpress: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 加载中的图标，或者小图片
|
||||
loadingIcon: {
|
||||
type: String,
|
||||
default: 'photo'
|
||||
},
|
||||
// 加载失败的图标，或者小图片
|
||||
errorIcon: {
|
||||
type: String,
|
||||
default: 'error-circle'
|
||||
},
|
||||
// 是否显示加载中的图标或者自定义的slot
|
||||
showLoading: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示加载错误的图标或者自定义的slot
|
||||
showError: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否需要淡入效果
|
||||
fade: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 只支持网络资源，只对微信小程序有效
|
||||
webp: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 过渡时间，单位ms
|
||||
duration: {
|
||||
type: [String, Number],
|
||||
default: 500
|
||||
},
|
||||
// 背景颜色，用于深色页面加载图片时，为了和背景色融合
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#f3f4f6'
|
||||
},
|
||||
// nvue模式下 是否直接显示，在uv-list等cell下面使用就需要设置
|
||||
cellChild: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
...uni.$uv?.props?.image
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<uv-transition
|
||||
v-if="show"
|
||||
:show="show"
|
||||
mode="fade"
|
||||
:duration="fade ? duration : 0"
|
||||
:cell-child="cellChild"
|
||||
:custom-style="wrapStyle"
|
||||
>
|
||||
<view
|
||||
class="uv-image"
|
||||
:class="[`uv-image--${elIndex}`]"
|
||||
@tap="onClick"
|
||||
:style="[wrapStyle, backgroundStyle]"
|
||||
>
|
||||
<image
|
||||
v-if="!isError && observeShow"
|
||||
:src="src"
|
||||
:mode="mode"
|
||||
@error="onErrorHandler"
|
||||
@load="onLoadHandler"
|
||||
:show-menu-by-longpress="showMenuByLongpress"
|
||||
:lazy-load="lazyLoad"
|
||||
class="uv-image__image"
|
||||
:style="[imageStyle]"
|
||||
:webp="webp"
|
||||
></image>
|
||||
<view
|
||||
v-if="showLoading && loading"
|
||||
class="uv-image__loading"
|
||||
:style="{
|
||||
borderRadius: shape == 'circle' ? '50%' : $uv.addUnit(radius),
|
||||
backgroundColor: bgColor,
|
||||
width: $uv.addUnit(width),
|
||||
height: $uv.addUnit(height)
|
||||
}"
|
||||
>
|
||||
<slot name="loading">
|
||||
<uv-icon
|
||||
:name="loadingIcon"
|
||||
:width="width"
|
||||
:height="height"
|
||||
></uv-icon>
|
||||
</slot>
|
||||
</view>
|
||||
<view
|
||||
v-if="showError && isError && !loading"
|
||||
class="uv-image__error"
|
||||
:style="{
|
||||
borderRadius: shape == 'circle' ? '50%' : $uv.addUnit(radius),
|
||||
width: $uv.addUnit(width),
|
||||
height: $uv.addUnit(height)
|
||||
}"
|
||||
>
|
||||
<slot name="error">
|
||||
<uv-icon
|
||||
:name="errorIcon"
|
||||
:width="width"
|
||||
:height="height"
|
||||
></uv-icon>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</uv-transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
import props from './props.js';
|
||||
/**
|
||||
* Image 图片
|
||||
* @description 此组件为uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
|
||||
* @tutorial https://www.uvui.cn/components/image.html
|
||||
* @property {String} src 图片地址
|
||||
* @property {String} mode 裁剪模式，见官网说明 （默认 'aspectFill' ）
|
||||
* @property {String | Number} width 宽度，单位任意，如果为数值，则为px单位 （默认 '300' ）
|
||||
* @property {String | Number} height 高度，单位任意，如果为数值，则为px单位 （默认 '225' ）
|
||||
* @property {String} shape 图片形状，circle-圆形，square-方形 （默认 'square' ）
|
||||
* @property {String | Number} radius 圆角值，单位任意，如果为数值，则为px单位 （默认 0 ）
|
||||
* @property {Boolean} lazyLoad 是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效 （默认 true ）
|
||||
* @property {Boolean} showMenuByLongpress 是否开启长按图片显示识别小程序码菜单，仅微信小程序有效 （默认 true ）
|
||||
* @property {String} loadingIcon 加载中的图标，或者小图片 （默认 'photo' ）
|
||||
* @property {String} errorIcon 加载失败的图标，或者小图片 （默认 'error-circle' ）
|
||||
* @property {Boolean} showLoading 是否显示加载中的图标或者自定义的slot （默认 true ）
|
||||
* @property {Boolean} showError 是否显示加载错误的图标或者自定义的slot （默认 true ）
|
||||
* @property {Boolean} fade 是否需要淡入效果 （默认 true ）
|
||||
* @property {Boolean} webp 只支持网络资源，只对微信小程序有效 （默认 false ）
|
||||
* @property {String | Number} duration 搭配fade参数的过渡时间，单位ms （默认 500 ）
|
||||
* @property {String} bgColor 背景颜色，用于深色页面加载图片时，为了和背景色融合 (默认 '#f3f4f6' )
|
||||
* @property {Object} customStyle 定义需要用到的外部样式
|
||||
* @event {Function} click 点击图片时触发
|
||||
* @event {Function} error 图片加载失败时触发
|
||||
* @event {Function} load 图片加载成功时触发
|
||||
* @example <uv-image width="100%" height="300px" :src="src"></uv-image>
|
||||
*/
|
||||
export default {
|
||||
name: 'uv-image',
|
||||
emits: ['click','load','error'],
|
||||
mixins: [mpMixin, mixin, props],
|
||||
data() {
|
||||
return {
|
||||
// 图片是否加载错误，如果是，则显示错误占位图
|
||||
isError: false,
|
||||
// 初始化组件时，默认为加载中状态
|
||||
loading: true,
|
||||
// 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
|
||||
backgroundStyle: {},
|
||||
// 用于fade模式的控制组件显示与否
|
||||
show: false,
|
||||
// 是否开启图片出现在可视范围进行加载（另一种懒加载）
|
||||
observeShow: !this.observeLazyLoad,
|
||||
elIndex: '',
|
||||
// 因为props的值无法修改，故需要一个中间值
|
||||
imgWidth: this.width,
|
||||
// 因为props的值无法修改，故需要一个中间值
|
||||
imgHeight: this.height,
|
||||
thresholdValue: 50
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
src: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
if (!n) {
|
||||
// 如果传入null或者''，或者false，或者undefined，标记为错误状态
|
||||
this.isError = true
|
||||
} else {
|
||||
this.isError = false;
|
||||
this.loading = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
width(newVal){
|
||||
// 这样做的目的是避免在更新时候，某些平台动画会恢复关闭状态
|
||||
this.show = false;
|
||||
this.$uv.sleep(2).then(res=>{
|
||||
this.show = true;
|
||||
});
|
||||
this.imgWidth = newVal;
|
||||
},
|
||||
height(newVal){
|
||||
// 这样做的目的是避免在更新时候，某些平台动画会恢复关闭状态
|
||||
this.show = false;
|
||||
this.$uv.sleep(2).then(res=>{
|
||||
this.show = true;
|
||||
});
|
||||
this.imgHeight = newVal;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
wrapStyle() {
|
||||
let style = {};
|
||||
// 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位
|
||||
if(this.mode !== 'heightFix') {
|
||||
style.width = this.$uv.addUnit(this.imgWidth);
|
||||
}
|
||||
if(this.mode !== 'widthFix') {
|
||||
style.height = this.$uv.addUnit(this.imgHeight);
|
||||
}
|
||||
// 如果是显示圆形，设置一个很多的半径值即可
|
||||
style.borderRadius = this.shape == 'circle' ? '10000px' : this.$uv.addUnit(this.radius)
|
||||
// 如果设置圆角，必须要有hidden，否则可能圆角无效
|
||||
style.overflow = this.radius > 0 ? 'hidden' : 'visible'
|
||||
return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle));
|
||||
},
|
||||
imageStyle() {
|
||||
let style = {};
|
||||
style.borderRadius = this.shape == 'circle' ? '10000px' : this.$uv.addUnit(this.radius);
|
||||
// #ifdef APP-NVUE
|
||||
style.width = this.$uv.addUnit(this.imgWidth);
|
||||
style.height = this.$uv.addUnit(this.imgHeight);
|
||||
// #endif
|
||||
return style;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.elIndex = this.$uv.guid();
|
||||
this.observer = {}
|
||||
this.observerName = 'lazyLoadContentObserver'
|
||||
},
|
||||
mounted() {
|
||||
this.show = true;
|
||||
this.$nextTick(()=>{
|
||||
if(this.observeLazyLoad) this.observerFn();
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 点击图片
|
||||
onClick() {
|
||||
this.$emit('click')
|
||||
},
|
||||
// 图片加载失败
|
||||
onErrorHandler(err) {
|
||||
this.loading = false
|
||||
this.isError = true
|
||||
this.$emit('error', err)
|
||||
},
|
||||
// 图片加载完成，标记loading结束
|
||||
onLoadHandler(event) {
|
||||
if(this.mode == 'widthFix') this.imgHeight = 'auto'
|
||||
if(this.mode == 'heightFix') this.imgWidth = 'auto'
|
||||
this.loading = false
|
||||
this.isError = false
|
||||
this.$emit('load', event)
|
||||
this.removeBgColor()
|
||||
},
|
||||
// 移除图片的背景色
|
||||
removeBgColor() {
|
||||
// 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
|
||||
this.backgroundStyle = {
|
||||
backgroundColor: 'transparent'
|
||||
};
|
||||
},
|
||||
// 观察图片是否在可见视口
|
||||
observerFn(){
|
||||
// 在需要用到懒加载的页面，在触发底部的时候触发tOnLazyLoadReachBottom事件，保证所有图片进行加载
|
||||
this.$nextTick(() => {
|
||||
uni.$once('onLazyLoadReachBottom', () => {
|
||||
if (!this.observeShow) this.observeShow = true
|
||||
})
|
||||
})
|
||||
setTimeout(() => {
|
||||
// #ifndef APP-NVUE
|
||||
this.disconnectObserver(this.observerName)
|
||||
const contentObserver = uni.createIntersectionObserver(this)
|
||||
contentObserver.relativeToViewport({
|
||||
bottom: this.thresholdValue
|
||||
}).observe(`.uv-image--${this.elIndex}`, (res) => {
|
||||
if (res.intersectionRatio > 0) {
|
||||
// 懒加载状态改变
|
||||
this.observeShow = true
|
||||
// 如果图片已经加载，去掉监听，减少性能消耗
|
||||
this.disconnectObserver(this.observerName)
|
||||
}
|
||||
})
|
||||
this[this.observerName] = contentObserver
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.observeShow = true;
|
||||
// #endif
|
||||
}, 50)
|
||||
},
|
||||
disconnectObserver(observerName) {
|
||||
const observer = this[observerName]
|
||||
observer && observer.disconnect()
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
|
||||
$uv-image-error-top:0px !default;
|
||||
$uv-image-error-left:0px !default;
|
||||
$uv-image-error-width:100% !default;
|
||||
$uv-image-error-hight:100% !default;
|
||||
$uv-image-error-background-color:$uv-bg-color !default;
|
||||
$uv-image-error-color:$uv-tips-color !default;
|
||||
$uv-image-error-font-size: 46rpx !default;
|
||||
|
||||
.uv-image {
|
||||
position: relative;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__loading,
|
||||
&__error {
|
||||
position: absolute;
|
||||
top: $uv-image-error-top;
|
||||
left: $uv-image-error-left;
|
||||
width: $uv-image-error-width;
|
||||
height: $uv-image-error-hight;
|
||||
@include flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $uv-image-error-background-color;
|
||||
color: $uv-image-error-color;
|
||||
font-size: $uv-image-error-font-size;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
{
|
||||
"id": "uv-image",
|
||||
"displayName": "uv-image 图片 全面兼容vue3+2、app、h5、小程序等多端",
|
||||
"version": "1.0.16",
|
||||
"description": "uv-image 此组件为uni-app的image组件的加强版，在继承了原有功能外，增加observer懒加载功能，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。",
|
||||
"keywords": [
|
||||
"uv-image",
|
||||
"uvui",
|
||||
"uv-ui",
|
||||
"image",
|
||||
"图片"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uv-ui-tools",
|
||||
"uv-transition",
|
||||
"uv-icon"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
15
CoreCms.Net.Uni-App/CoreShop/uni_modules/uv-image/readme.md
Normal file
15
CoreCms.Net.Uni-App/CoreShop/uni_modules/uv-image/readme.md
Normal file
@@ -0,0 +1,15 @@
|
||||
## Image 图片
|
||||
|
||||
> **组件名：uv-image**
|
||||
|
||||
此组件为`uni-app`的`image`组件的加强版，在继承了原有功能外，增加`observer`懒加载功能，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
|
||||
|
||||
# <a href="https://www.uvui.cn/components/image.html" target="_blank">查看文档</a>
|
||||
|
||||
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
|
||||
|
||||
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||
@@ -0,0 +1,9 @@
|
||||
## 1.0.3（2023-08-14）
|
||||
1. 新增参数textStyle，自定义文本样式
|
||||
## 1.0.2（2023-06-27）
|
||||
优化
|
||||
## 1.0.1（2023-05-16）
|
||||
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.0（2023-05-10）
|
||||
1. 新增uv-loading-icon组件
|
||||
@@ -0,0 +1,67 @@
|
||||
export default {
|
||||
props: {
|
||||
// 是否显示组件
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#909193'
|
||||
},
|
||||
// 提示文字颜色
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#909193'
|
||||
},
|
||||
// 文字和图标是否垂直排列
|
||||
vertical: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 模式选择，circle-圆形，spinner-花朵形，semicircle-半圆形
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'spinner'
|
||||
},
|
||||
// 图标大小，单位默认px
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: 24
|
||||
},
|
||||
// 文字大小
|
||||
textSize: {
|
||||
type: [String, Number],
|
||||
default: 15
|
||||
},
|
||||
// 文字样式
|
||||
textStyle: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 文字内容
|
||||
text: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// 动画模式 https://www.runoob.com/cssref/css3-pr-animation-timing-function.html
|
||||
timingFunction: {
|
||||
type: String,
|
||||
default: 'linear'
|
||||
},
|
||||
// 动画执行周期时间
|
||||
duration: {
|
||||
type: [String, Number],
|
||||
default: 1200
|
||||
},
|
||||
// mode=circle时的暗边颜色
|
||||
inactiveColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
...uni.$uv?.props?.loadingIcon
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<view
|
||||
class="uv-loading-icon"
|
||||
:style="[$uv.addStyle(customStyle)]"
|
||||
:class="[vertical && 'uv-loading-icon--vertical']"
|
||||
v-if="show"
|
||||
>
|
||||
<view
|
||||
v-if="!webviewHide"
|
||||
class="uv-loading-icon__spinner"
|
||||
:class="[`uv-loading-icon__spinner--${mode}`]"
|
||||
ref="ani"
|
||||
:style="{
|
||||
color: color,
|
||||
width: $uv.addUnit(size),
|
||||
height: $uv.addUnit(size),
|
||||
borderTopColor: color,
|
||||
borderBottomColor: otherBorderColor,
|
||||
borderLeftColor: otherBorderColor,
|
||||
borderRightColor: otherBorderColor,
|
||||
'animation-duration': `${duration}ms`,
|
||||
'animation-timing-function': mode === 'semicircle' || mode === 'circle' ? timingFunction : ''
|
||||
}"
|
||||
>
|
||||
<block v-if="mode === 'spinner'">
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view
|
||||
v-for="(item, index) in array12"
|
||||
:key="index"
|
||||
class="uv-loading-icon__dot"
|
||||
>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<!-- 此组件内部图标部分无法设置宽高，即使通过width和height配置了也无效 -->
|
||||
<loading-indicator
|
||||
v-if="!webviewHide"
|
||||
class="uv-loading-indicator"
|
||||
:animating="true"
|
||||
:style="{
|
||||
color: color,
|
||||
width: $uv.addUnit(size),
|
||||
height: $uv.addUnit(size)
|
||||
}"
|
||||
/>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
</view>
|
||||
<text
|
||||
v-if="text"
|
||||
class="uv-loading-icon__text"
|
||||
:style="[{
|
||||
fontSize: $uv.addUnit(textSize),
|
||||
color: textColor,
|
||||
},$uv.addStyle(textStyle)]"
|
||||
>{{text}}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { colorGradient } from '@/uni_modules/uv-ui-tools/libs/function/colorGradient.js'
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
import props from './props.js';
|
||||
// #ifdef APP-NVUE
|
||||
const animation = weex.requireModule('animation');
|
||||
// #endif
|
||||
/**
|
||||
* loading 加载动画
|
||||
* @description 警此组件为一个小动画，目前用在uvui的loadmore加载更多和switch开关等组件的正在加载状态场景。
|
||||
* @tutorial https://www.uvui.cn/components/loading.html
|
||||
* @property {Boolean} show 是否显示组件 (默认 true)
|
||||
* @property {String} color 动画活动区域的颜色，只对 mode = flower 模式有效（默认#909193）
|
||||
* @property {String} textColor 提示文本的颜色（默认#909193）
|
||||
* @property {Boolean} vertical 文字和图标是否垂直排列 (默认 false )
|
||||
* @property {String} mode 模式选择，见官网说明（默认 'circle' ）
|
||||
* @property {String | Number} size 加载图标的大小，单位px （默认 24 ）
|
||||
* @property {String | Number} textSize 文字大小（默认 15 ）
|
||||
* @property {String | Number} text 文字内容
|
||||
* @property {Object} textStyle 文字样式
|
||||
* @property {String} timingFunction 动画模式 （默认 'ease-in-out' ）
|
||||
* @property {String | Number} duration 动画执行周期时间（默认 1200）
|
||||
* @property {String} inactiveColor mode=circle时的暗边颜色
|
||||
* @property {Object} customStyle 定义需要用到的外部样式
|
||||
* @example <uv-loading mode="circle"></uv-loading>
|
||||
*/
|
||||
export default {
|
||||
name: 'uv-loading-icon',
|
||||
mixins: [mpMixin, mixin, props],
|
||||
data() {
|
||||
return {
|
||||
// Array.form可以通过一个伪数组对象创建指定长度的数组
|
||||
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from
|
||||
array12: Array.from({
|
||||
length: 12
|
||||
}),
|
||||
// 这里需要设置默认值为360，否则在安卓nvue上，会延迟一个duration周期后才执行
|
||||
// 在iOS nvue上，则会一开始默认执行两个周期的动画
|
||||
aniAngel: 360, // 动画旋转角度
|
||||
webviewHide: false, // 监听webview的状态，如果隐藏了页面，则停止动画，以免性能消耗
|
||||
loading: false, // 是否运行中，针对nvue使用
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 当为circle类型时，给其另外三边设置一个更轻一些的颜色
|
||||
// 之所以需要这么做的原因是，比如父组件传了color为红色，那么需要另外的三个边为浅红色
|
||||
// 而不能是固定的某一个其他颜色(因为这个固定的颜色可能浅蓝，导致效果没有那么细腻良好)
|
||||
otherBorderColor() {
|
||||
const lightColor = colorGradient(this.color, '#ffffff', 100)[80]
|
||||
if (this.mode === 'circle') {
|
||||
return this.inactiveColor ? this.inactiveColor : lightColor
|
||||
} else {
|
||||
return 'transparent'
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(n) {
|
||||
// nvue中，show为true，且为非loading状态，就重新执行动画模块
|
||||
// #ifdef APP-NVUE
|
||||
if (n && !this.loading) {
|
||||
setTimeout(() => {
|
||||
this.startAnimate()
|
||||
}, 30)
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
setTimeout(() => {
|
||||
// #ifdef APP-NVUE
|
||||
this.show && this.nvueAnimate()
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
this.show && this.addEventListenerToWebview()
|
||||
// #endif
|
||||
}, 20)
|
||||
},
|
||||
// 监听webview的显示与隐藏
|
||||
addEventListenerToWebview() {
|
||||
// webview的堆栈
|
||||
const pages = getCurrentPages()
|
||||
// 当前页面
|
||||
const page = pages[pages.length - 1]
|
||||
// 当前页面的webview实例
|
||||
const currentWebview = page.$getAppWebview()
|
||||
// 监听webview的显示与隐藏，从而停止或者开始动画(为了性能)
|
||||
currentWebview.addEventListener('hide', () => {
|
||||
this.webviewHide = true
|
||||
})
|
||||
currentWebview.addEventListener('show', () => {
|
||||
this.webviewHide = false
|
||||
})
|
||||
},
|
||||
// #ifdef APP-NVUE
|
||||
nvueAnimate() {
|
||||
// nvue下，非spinner类型时才需要旋转，因为nvue的spinner类型，使用了weex的
|
||||
// loading-indicator组件，自带旋转功能
|
||||
this.mode !== 'spinner' && this.startAnimate()
|
||||
},
|
||||
// 执行nvue的animate模块动画
|
||||
startAnimate() {
|
||||
this.loading = true
|
||||
const ani = this.$refs.ani
|
||||
if (!ani) return
|
||||
animation.transition(ani, {
|
||||
// 进行角度旋转
|
||||
styles: {
|
||||
transform: `rotate(${this.aniAngel}deg)`,
|
||||
transformOrigin: 'center center'
|
||||
},
|
||||
duration: this.duration,
|
||||
timingFunction: this.timingFunction,
|
||||
// delay: 10
|
||||
}, () => {
|
||||
// 每次增加360deg，为了让其重新旋转一周
|
||||
this.aniAngel += 360
|
||||
// 动画结束后，继续循环执行动画，需要同时判断webviewHide变量
|
||||
// nvue安卓，页面隐藏后依然会继续执行startAnimate方法
|
||||
this.show && !this.webviewHide ? this.startAnimate() : this.loading = false
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
|
||||
$uv-loading-icon-color: #c8c9cc !default;
|
||||
$uv-loading-icon-text-margin-left:4px !default;
|
||||
$uv-loading-icon-text-color:$uv-content-color !default;
|
||||
$uv-loading-icon-text-font-size:14px !default;
|
||||
$uv-loading-icon-text-line-height:20px !default;
|
||||
$uv-loading-width:30px !default;
|
||||
$uv-loading-height:30px !default;
|
||||
$uv-loading-max-width:100% !default;
|
||||
$uv-loading-max-height:100% !default;
|
||||
$uv-loading-semicircle-border-width: 2px !default;
|
||||
$uv-loading-semicircle-border-color:transparent !default;
|
||||
$uv-loading-semicircle-border-top-right-radius: 100px !default;
|
||||
$uv-loading-semicircle-border-top-left-radius: 100px !default;
|
||||
$uv-loading-semicircle-border-bottom-left-radius: 100px !default;
|
||||
$uv-loading-semicircle-border-bottom-right-radiu: 100px !default;
|
||||
$uv-loading-semicircle-border-style: solid !default;
|
||||
$uv-loading-circle-border-top-right-radius: 100px !default;
|
||||
$uv-loading-circle-border-top-left-radius: 100px !default;
|
||||
$uv-loading-circle-border-bottom-left-radius: 100px !default;
|
||||
$uv-loading-circle-border-bottom-right-radiu: 100px !default;
|
||||
$uv-loading-circle-border-width:2px !default;
|
||||
$uv-loading-circle-border-top-color:#e5e5e5 !default;
|
||||
$uv-loading-circle-border-right-color:$uv-loading-circle-border-top-color !default;
|
||||
$uv-loading-circle-border-bottom-color:$uv-loading-circle-border-top-color !default;
|
||||
$uv-loading-circle-border-left-color:$uv-loading-circle-border-top-color !default;
|
||||
$uv-loading-circle-border-style:solid !default;
|
||||
$uv-loading-icon-host-font-size:0px !default;
|
||||
$uv-loading-icon-host-line-height:1 !default;
|
||||
$uv-loading-icon-vertical-margin:6px 0 0 !default;
|
||||
$uv-loading-icon-dot-top:0 !default;
|
||||
$uv-loading-icon-dot-left:0 !default;
|
||||
$uv-loading-icon-dot-width:100% !default;
|
||||
$uv-loading-icon-dot-height:100% !default;
|
||||
$uv-loading-icon-dot-before-width:2px !default;
|
||||
$uv-loading-icon-dot-before-height:25% !default;
|
||||
$uv-loading-icon-dot-before-margin:0 auto !default;
|
||||
$uv-loading-icon-dot-before-background-color:currentColor !default;
|
||||
$uv-loading-icon-dot-before-border-radius:40% !default;
|
||||
|
||||
.uv-loading-icon {
|
||||
/* #ifndef APP-NVUE */
|
||||
// display: inline-flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $uv-loading-icon-color;
|
||||
|
||||
&__text {
|
||||
margin-left: $uv-loading-icon-text-margin-left;
|
||||
color: $uv-loading-icon-text-color;
|
||||
font-size: $uv-loading-icon-text-font-size;
|
||||
line-height: $uv-loading-icon-text-line-height;
|
||||
}
|
||||
|
||||
&__spinner {
|
||||
width: $uv-loading-width;
|
||||
height: $uv-loading-height;
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
max-width: $uv-loading-max-width;
|
||||
max-height: $uv-loading-max-height;
|
||||
animation: uv-rotate 1s linear infinite;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
&__spinner--semicircle {
|
||||
border-width: $uv-loading-semicircle-border-width;
|
||||
border-color: $uv-loading-semicircle-border-color;
|
||||
border-top-right-radius: $uv-loading-semicircle-border-top-right-radius;
|
||||
border-top-left-radius: $uv-loading-semicircle-border-top-left-radius;
|
||||
border-bottom-left-radius: $uv-loading-semicircle-border-bottom-left-radius;
|
||||
border-bottom-right-radius: $uv-loading-semicircle-border-bottom-right-radiu;
|
||||
border-style: $uv-loading-semicircle-border-style;
|
||||
}
|
||||
|
||||
&__spinner--circle {
|
||||
border-top-right-radius: $uv-loading-circle-border-top-right-radius;
|
||||
border-top-left-radius: $uv-loading-circle-border-top-left-radius;
|
||||
border-bottom-left-radius: $uv-loading-circle-border-bottom-left-radius;
|
||||
border-bottom-right-radius: $uv-loading-circle-border-bottom-right-radiu;
|
||||
border-width: $uv-loading-circle-border-width;
|
||||
border-top-color: $uv-loading-circle-border-top-color;
|
||||
border-right-color: $uv-loading-circle-border-right-color;
|
||||
border-bottom-color: $uv-loading-circle-border-bottom-color;
|
||||
border-left-color: $uv-loading-circle-border-left-color;
|
||||
border-style: $uv-loading-circle-border-style;
|
||||
}
|
||||
|
||||
&--vertical {
|
||||
flex-direction: column
|
||||
}
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
:host {
|
||||
font-size: $uv-loading-icon-host-font-size;
|
||||
line-height: $uv-loading-icon-host-line-height;
|
||||
}
|
||||
|
||||
.uv-loading-icon {
|
||||
&__spinner--spinner {
|
||||
animation-timing-function: steps(12)
|
||||
}
|
||||
|
||||
&__text:empty {
|
||||
display: none
|
||||
}
|
||||
|
||||
&--vertical &__text {
|
||||
margin: $uv-loading-icon-vertical-margin;
|
||||
color: $uv-content-color;
|
||||
}
|
||||
|
||||
&__dot {
|
||||
position: absolute;
|
||||
top: $uv-loading-icon-dot-top;
|
||||
left: $uv-loading-icon-dot-left;
|
||||
width: $uv-loading-icon-dot-width;
|
||||
height: $uv-loading-icon-dot-height;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
width: $uv-loading-icon-dot-before-width;
|
||||
height: $uv-loading-icon-dot-before-height;
|
||||
margin: $uv-loading-icon-dot-before-margin;
|
||||
background-color: $uv-loading-icon-dot-before-background-color;
|
||||
border-radius: $uv-loading-icon-dot-before-border-radius;
|
||||
content: " "
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through 12 {
|
||||
.uv-loading-icon__dot:nth-of-type(#{$i}) {
|
||||
transform: rotate($i * 30deg);
|
||||
opacity: 1 - 0.0625 * ($i - 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes uv-rotate {
|
||||
0% {
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(1turn)
|
||||
}
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
@@ -0,0 +1,87 @@
|
||||
{
|
||||
"id": "uv-loading-icon",
|
||||
"displayName": "uv-loading-icon 加载动画 全面兼容vue3+2、app、h5、小程序等多端",
|
||||
"version": "1.0.3",
|
||||
"description": "此组件为一个小动画，目前用在uv-ui的uv-load-more加载更多等组件，还可以运用在项目中正在加载状态场景。",
|
||||
"keywords": [
|
||||
"uv-loading-icon",
|
||||
"uvui",
|
||||
"uv-ui",
|
||||
"loading",
|
||||
"加载动画"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uv-ui-tools"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
## LoadingIcon 加载动画
|
||||
|
||||
> **组件名：uv-loading-icon**
|
||||
|
||||
此组件为一个小动画，目前用在 `uv-ui` 的 `uv-load-more` 加载更多等组件，还可以运用在项目中正在加载状态场景。
|
||||
|
||||
# <a href="https://www.uvui.cn/components/loadingIcon.html" target="_blank">查看文档</a>
|
||||
|
||||
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
|
||||
|
||||
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
|
||||
|
||||
|
||||
|
||||
</a>
|
||||
|
||||
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||
@@ -0,0 +1,19 @@
|
||||
## 1.0.8（2023-10-18）
|
||||
1. 修复在APP上不能正常显示的BUG
|
||||
## 1.0.7（2023-10-12）
|
||||
1. 修复部分情况，修改某属性自动关闭的BUG
|
||||
## 1.0.6（2023-07-24）
|
||||
1. 优化 nvue模式下增加cellChild参数，是否在list中cell节点下，nvue中cell下建议设置成true
|
||||
## 1.0.5（2023-07-02）
|
||||
修改VUE3模式下可能存在的BUG
|
||||
## 1.0.4（2023-07-02）
|
||||
uv-transition 动画组件，代码重构优化，性能更加友好，增加自定义动画功能。详情参考文档：https://www.uvui.cn/components/transition.html
|
||||
## 1.0.3（2023-06-12）
|
||||
1. 恢复this.$nextTick的使用，经过测试百度等平台无问题
|
||||
## 1.0.2（2023-05-23）
|
||||
1. 百度小程序等平台不支持this.$nextick，修改成延时
|
||||
## 1.0.1（2023-05-16）
|
||||
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.0（2023-05-10）
|
||||
1. 新增动画组件
|
||||
@@ -0,0 +1,131 @@
|
||||
// const defaultOption = {
|
||||
// duration: 300,
|
||||
// timingFunction: 'linear',
|
||||
// delay: 0,
|
||||
// transformOrigin: '50% 50% 0'
|
||||
// }
|
||||
// #ifdef APP-NVUE
|
||||
const nvueAnimation = uni.requireNativePlugin('animation')
|
||||
// #endif
|
||||
class MPAnimation {
|
||||
constructor(options, _this) {
|
||||
this.options = options
|
||||
// 在iOS10+QQ小程序平台下，传给原生的对象一定是个普通对象而不是Proxy对象，否则会报parameter should be Object instead of ProxyObject的错误
|
||||
this.animation = uni.createAnimation({
|
||||
...options
|
||||
})
|
||||
this.currentStepAnimates = {}
|
||||
this.next = 0
|
||||
this.$ = _this
|
||||
|
||||
}
|
||||
|
||||
_nvuePushAnimates(type, args) {
|
||||
let aniObj = this.currentStepAnimates[this.next]
|
||||
let styles = {}
|
||||
if (!aniObj) {
|
||||
styles = {
|
||||
styles: {},
|
||||
config: {}
|
||||
}
|
||||
} else {
|
||||
styles = aniObj
|
||||
}
|
||||
if (animateTypes1.includes(type)) {
|
||||
if (!styles.styles.transform) {
|
||||
styles.styles.transform = ''
|
||||
}
|
||||
let unit = ''
|
||||
if(type === 'rotate'){
|
||||
unit = 'deg'
|
||||
}
|
||||
styles.styles.transform += `${type}(${args+unit}) `
|
||||
} else {
|
||||
styles.styles[type] = `${args}`
|
||||
}
|
||||
this.currentStepAnimates[this.next] = styles
|
||||
}
|
||||
_animateRun(styles = {}, config = {}) {
|
||||
let ref = this.$.$refs['ani'].ref
|
||||
if (!ref) return
|
||||
return new Promise((resolve, reject) => {
|
||||
nvueAnimation.transition(ref, {
|
||||
styles,
|
||||
...config
|
||||
}, res => {
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
_nvueNextAnimate(animates, step = 0, fn) {
|
||||
let obj = animates[step]
|
||||
if (obj) {
|
||||
let {
|
||||
styles,
|
||||
config
|
||||
} = obj
|
||||
this._animateRun(styles, config).then(() => {
|
||||
step += 1
|
||||
this._nvueNextAnimate(animates, step, fn)
|
||||
})
|
||||
} else {
|
||||
this.currentStepAnimates = {}
|
||||
typeof fn === 'function' && fn()
|
||||
this.isEnd = true
|
||||
}
|
||||
}
|
||||
|
||||
step(config = {}) {
|
||||
// #ifndef APP-NVUE
|
||||
this.animation.step(config)
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
|
||||
this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
|
||||
this.next++
|
||||
// #endif
|
||||
return this
|
||||
}
|
||||
|
||||
run(fn) {
|
||||
// #ifndef APP-NVUE
|
||||
this.$.animationData = this.animation.export()
|
||||
this.$.timer = setTimeout(() => {
|
||||
typeof fn === 'function' && fn()
|
||||
}, this.$.durationTime)
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.isEnd = false
|
||||
let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
|
||||
if(!ref) return
|
||||
this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
|
||||
this.next = 0
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
|
||||
'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
|
||||
'translateZ'
|
||||
]
|
||||
const animateTypes2 = ['opacity', 'backgroundColor']
|
||||
const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
|
||||
animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
|
||||
MPAnimation.prototype[type] = function(...args) {
|
||||
// #ifndef APP-NVUE
|
||||
this.animation[type](...args)
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this._nvuePushAnimates(type, args)
|
||||
// #endif
|
||||
return this
|
||||
}
|
||||
})
|
||||
|
||||
export function createAnimation(option, _this) {
|
||||
if(!_this) return
|
||||
clearTimeout(_this.timer)
|
||||
return new MPAnimation(option, _this)
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
export default {
|
||||
props: {
|
||||
// 是否展示组件
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 使用的动画模式
|
||||
mode: {
|
||||
type: [Array, String, null],
|
||||
default() {
|
||||
return 'fade'
|
||||
}
|
||||
},
|
||||
// 动画的执行时间，单位ms
|
||||
duration: {
|
||||
type: [String, Number],
|
||||
default: 300
|
||||
},
|
||||
// 使用的动画过渡函数
|
||||
timingFunction: {
|
||||
type: String,
|
||||
default: 'ease-out'
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
...uni.$uv?.props?.transition
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view
|
||||
v-if="isShow"
|
||||
ref="ani"
|
||||
:animation="animationData"
|
||||
:class="customClass"
|
||||
:style="transformStyles"
|
||||
@click="onClick">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view
|
||||
v-if="isShow"
|
||||
ref="ani"
|
||||
:animation="animationData"
|
||||
:class="customClass"
|
||||
:style="transformStyles"
|
||||
@click="onClick">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
<script>
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
import { createAnimation } from './createAnimation'
|
||||
/**
|
||||
* transition 动画组件
|
||||
* @description
|
||||
* @tutorial
|
||||
* @property {Boolean} show 控制组件显示或关闭 （默认 false ）
|
||||
* @property {Array | String } mode 内置过渡动画类型 （默认 'fade' ）
|
||||
* @value fade 渐隐渐出过渡
|
||||
* @value slide-top 由上至下过渡
|
||||
* @value slide-bottom 由下至上过渡
|
||||
* @value slide-left 由左至右过渡
|
||||
* @value slide-right 由右至左过渡
|
||||
* @value zoom-in 由小到大过渡
|
||||
* @value zoom-out 由大到小过渡
|
||||
* @property {String | Number} duration 动画的执行时间，单位ms （默认 300 ）
|
||||
* @property {String} timingFunction 使用的动画过渡函数 （默认 'ease-out' ）
|
||||
* @property {Object} customStyle 自定义样式
|
||||
* @property {String} customClass 自定义类名
|
||||
* @event {Function} click 点击组件触发
|
||||
* @event {Function} change 过渡动画结束时触发
|
||||
* @example
|
||||
*/
|
||||
export default {
|
||||
name: 'uv-transition',
|
||||
mixins: [mpMixin,mixin],
|
||||
emits:['click','change'],
|
||||
props: {
|
||||
// 是否展示组件
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 使用的动画模式
|
||||
mode: {
|
||||
type: [Array, String, null],
|
||||
default() {
|
||||
return 'fade'
|
||||
}
|
||||
},
|
||||
// 动画的执行时间，单位ms
|
||||
duration: {
|
||||
type: [String, Number],
|
||||
default: 300
|
||||
},
|
||||
// 使用的动画过渡函数
|
||||
timingFunction: {
|
||||
type: String,
|
||||
default: 'ease-out'
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// nvue模式下 是否直接显示，在uv-list等cell下面使用就需要设置
|
||||
cellChild: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
isShow: false,
|
||||
transform: '',
|
||||
opacity: 1,
|
||||
animationData: {},
|
||||
durationTime: 300,
|
||||
config: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.open();
|
||||
} else {
|
||||
// 避免上来就执行 close,导致动画错乱
|
||||
if (this.isShow) {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 初始化动画条件
|
||||
transformStyles() {
|
||||
const style = {
|
||||
transform: this.transform,
|
||||
opacity: this.opacity,
|
||||
...this.$uv.addStyle(this.customStyle),
|
||||
'transition-duration': `${this.duration / 1000}s`
|
||||
};
|
||||
return this.$uv.addStyle(style,'string');
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 动画默认配置
|
||||
this.config = {
|
||||
duration: this.duration,
|
||||
timingFunction: this.timingFunction,
|
||||
transformOrigin: '50% 50%',
|
||||
delay: 0
|
||||
};
|
||||
this.durationTime = this.duration;
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* ref 触发 初始化动画
|
||||
*/
|
||||
init(obj = {}) {
|
||||
if (obj.duration) {
|
||||
this.durationTime = obj.duration;
|
||||
}
|
||||
this.animation = createAnimation(Object.assign(this.config, obj),this);
|
||||
},
|
||||
/**
|
||||
* 点击组件触发回调
|
||||
*/
|
||||
onClick() {
|
||||
this.$emit('click', {
|
||||
detail: this.isShow
|
||||
})
|
||||
},
|
||||
/**
|
||||
* ref 触发 动画分组
|
||||
* @param {Object} obj
|
||||
*/
|
||||
step(obj, config = {}) {
|
||||
if (!this.animation) return;
|
||||
for (let i in obj) {
|
||||
try {
|
||||
if(typeof obj[i] === 'object'){
|
||||
this.animation[i](...obj[i]);
|
||||
}else{
|
||||
this.animation[i](obj[i]);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`方法 ${i} 不存在`);
|
||||
}
|
||||
}
|
||||
this.animation.step(config);
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* ref 触发 执行动画
|
||||
*/
|
||||
run(fn) {
|
||||
if (!this.animation) return;
|
||||
this.animation.run(fn);
|
||||
},
|
||||
// 开始过度动画
|
||||
open() {
|
||||
clearTimeout(this.timer);
|
||||
this.transform = '';
|
||||
this.isShow = true;
|
||||
let { opacity, transform } = this.styleInit(false);
|
||||
if (typeof opacity !== 'undefined') {
|
||||
this.opacity = opacity;
|
||||
}
|
||||
this.transform = transform;
|
||||
// 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常
|
||||
this.$nextTick(() => {
|
||||
// TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器
|
||||
this.timer = setTimeout(() => {
|
||||
this.animation = createAnimation(this.config, this);
|
||||
this.tranfromInit(false).step();
|
||||
// #ifdef APP-NVUE
|
||||
if(this.cellChild) {
|
||||
this.opacity = 1;
|
||||
} else{
|
||||
this.animation.run();
|
||||
}
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
this.animation.run();
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
// #ifdef H5
|
||||
this.opacity = 1;
|
||||
// #endif
|
||||
// #endif
|
||||
this.$emit('change', {
|
||||
detail: this.isShow
|
||||
})
|
||||
// #ifdef H5
|
||||
// #ifdef VUE3
|
||||
this.transform = '';
|
||||
// #endif
|
||||
// #endif
|
||||
}, 20);
|
||||
})
|
||||
},
|
||||
// 关闭过渡动画
|
||||
close(type) {
|
||||
if (!this.animation) return;
|
||||
this.tranfromInit(true)
|
||||
.step()
|
||||
.run(() => {
|
||||
this.isShow = false;
|
||||
this.animationData = null;
|
||||
this.animation = null;
|
||||
let { opacity, transform } = this.styleInit(false);
|
||||
this.opacity = opacity || 1;
|
||||
this.transform = transform;
|
||||
this.$emit('change', {
|
||||
detail: this.isShow
|
||||
});
|
||||
})
|
||||
},
|
||||
// 处理动画开始前的默认样式
|
||||
styleInit(type) {
|
||||
let styles = {
|
||||
transform: ''
|
||||
};
|
||||
let buildStyle = (type, mode) => {
|
||||
if (mode === 'fade') {
|
||||
styles.opacity = this.animationType(type)[mode];
|
||||
} else {
|
||||
styles.transform += this.animationType(type)[mode] + ' ';
|
||||
}
|
||||
}
|
||||
if (typeof this.mode === 'string') {
|
||||
buildStyle(type, this.mode);
|
||||
} else {
|
||||
this.mode.forEach(mode => {
|
||||
buildStyle(type, mode)
|
||||
})
|
||||
}
|
||||
return styles
|
||||
},
|
||||
// 处理内置组合动画
|
||||
tranfromInit(type) {
|
||||
let buildTranfrom = (type, mode) => {
|
||||
let aniNum = null;
|
||||
if (mode === 'fade') {
|
||||
aniNum = type ? 0 : 1;
|
||||
} else {
|
||||
aniNum = type ? '-100%' : '0';
|
||||
if (mode === 'zoom-in') {
|
||||
aniNum = type ? 0.8 : 1
|
||||
}
|
||||
if (mode === 'zoom-out') {
|
||||
aniNum = type ? 1.2 : 1
|
||||
}
|
||||
if (mode === 'slide-right') {
|
||||
aniNum = type ? '100%' : '0'
|
||||
}
|
||||
if (mode === 'slide-bottom') {
|
||||
aniNum = type ? '100%' : '0'
|
||||
}
|
||||
}
|
||||
this.animation[this.animationMode()[mode]](aniNum)
|
||||
}
|
||||
if (typeof this.mode === 'string') {
|
||||
buildTranfrom(type, this.mode)
|
||||
} else {
|
||||
this.mode.forEach(mode => {
|
||||
buildTranfrom(type, mode)
|
||||
})
|
||||
}
|
||||
return this.animation;
|
||||
},
|
||||
animationType(type) {
|
||||
return {
|
||||
fade: type ? 1 : 0,
|
||||
'slide-top': `translateY(${type ? '0' : '-100%'})`,
|
||||
'slide-right': `translateX(${type ? '0' : '100%'})`,
|
||||
'slide-bottom': `translateY(${type ? '0' : '100%'})`,
|
||||
'slide-left': `translateX(${type ? '0' : '-100%'})`,
|
||||
'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
|
||||
'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
|
||||
}
|
||||
},
|
||||
// 内置动画类型与实际动画对应字典
|
||||
animationMode() {
|
||||
return {
|
||||
fade: 'opacity',
|
||||
'slide-top': 'translateY',
|
||||
'slide-right': 'translateX',
|
||||
'slide-bottom': 'translateY',
|
||||
'slide-left': 'translateX',
|
||||
'zoom-in': 'scale',
|
||||
'zoom-out': 'scale'
|
||||
}
|
||||
},
|
||||
// 驼峰转中横线
|
||||
toLine(name) {
|
||||
return name.replace(/([A-Z])/g, '-$1').toLowerCase()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,87 @@
|
||||
{
|
||||
"id": "uv-transition",
|
||||
"displayName": "uv-transition 动画 全面兼容vue3+2、app、h5、小程序等多端",
|
||||
"version": "1.0.8",
|
||||
"description": "transition 该组件用于组件的动画过渡效果。",
|
||||
"keywords": [
|
||||
"uv-transition",
|
||||
"uvui",
|
||||
"uv-ui",
|
||||
"transition",
|
||||
"动画"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uv-ui-tools"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
## Transition 动画
|
||||
|
||||
> **组件名：uv-transition**
|
||||
|
||||
该组件用于组件的动画过渡效果，支持自定义动画，开箱即用。
|
||||
|
||||
# <a href="https://www.uvui.cn/components/transition.html" target="_blank">查看文档</a>
|
||||
|
||||
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
|
||||
|
||||
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||
@@ -0,0 +1,76 @@
|
||||
## 1.1.25（2024-01-20）
|
||||
1.1.20版本更新
|
||||
## 1.1.24（2023-12-21）
|
||||
1. luch-request更新
|
||||
## 1.1.23（2023-12-12）
|
||||
1. 1.1.19版本
|
||||
## 1.1.22（2023-11-28）
|
||||
1. 优化
|
||||
## 1.1.21（2023-11-10）
|
||||
1. 1.1.17版本
|
||||
## 1.1.20（2023-10-30）
|
||||
1. 1.1.16版本
|
||||
## 1.1.19（2023-10-13）
|
||||
1. 兼容vue3
|
||||
## 1.1.18（2023-10-12）
|
||||
1. 1.1.15版本
|
||||
## 1.1.17（2023-09-27）
|
||||
1. 1.1.14版本发布
|
||||
## 1.1.16（2023-09-15）
|
||||
1. 1.1.13版本发布
|
||||
## 1.1.15（2023-09-15）
|
||||
1. 更新button.js相关按钮支持open-type="agreePrivacyAuthorization"
|
||||
## 1.1.14（2023-09-14）
|
||||
1. 优化dayjs
|
||||
## 1.1.13（2023-09-13）
|
||||
1. 优化，$uv中增加unit参数，方便组件中使用
|
||||
## 1.1.12（2023-09-10）
|
||||
1. 升级版本
|
||||
## 1.1.11（2023-09-04）
|
||||
1. 1.1.11版本
|
||||
## 1.1.10（2023-08-31）
|
||||
1. 修复customStyle和customClass存在冲突的问题
|
||||
## 1.1.9（2023-08-27）
|
||||
1. 版本升级
|
||||
2. 优化
|
||||
## 1.1.8（2023-08-24）
|
||||
1. 版本升级
|
||||
## 1.1.7（2023-08-22）
|
||||
1. 版本升级
|
||||
## 1.1.6（2023-08-18）
|
||||
uvui版本：1.1.6
|
||||
## 1.0.15（2023-08-14）
|
||||
1. 更新uvui版本号
|
||||
## 1.0.13（2023-08-06）
|
||||
1. 优化
|
||||
## 1.0.12（2023-08-06）
|
||||
1. 修改版本号
|
||||
## 1.0.11（2023-08-06）
|
||||
1. 路由增加events参数
|
||||
2. 路由拦截修复
|
||||
## 1.0.10（2023-08-01）
|
||||
1. 优化
|
||||
## 1.0.9（2023-06-28）
|
||||
优化openType.js
|
||||
## 1.0.8（2023-06-15）
|
||||
1. 修改支付宝报错的BUG
|
||||
## 1.0.7（2023-06-07）
|
||||
1. 解决微信小程序使用uvui提示 Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors
|
||||
2. 解决上述提示，需要在uni.scss配置$uvui-nvue-style: false; 然后在APP.vue下面引入uvui内置的基础样式:@import '@/uni_modules/uv-ui-tools/index.scss';
|
||||
## 1.0.6（2023-06-04）
|
||||
1. uv-ui-tools 优化工具组件，兼容更多功能
|
||||
2. 小程序分享功能优化等
|
||||
## 1.0.5（2023-06-02）
|
||||
1. 修改扩展使用mixin中方法的问题
|
||||
## 1.0.4（2023-05-23）
|
||||
1. 兼容百度小程序修改bem函数
|
||||
## 1.0.3（2023-05-16）
|
||||
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.2（2023-05-10）
|
||||
1. 增加Http请求封装
|
||||
2. 优化
|
||||
## 1.0.1（2023-05-04）
|
||||
1. 修改名称及备注
|
||||
## 1.0.0（2023-05-04）
|
||||
1. uv-ui工具集首次发布
|
||||
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
</template>
|
||||
<script>
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,79 @@
|
||||
// 全局挂载引入http相关请求拦截插件
|
||||
import Request from './libs/luch-request'
|
||||
|
||||
// 引入全局mixin
|
||||
import mixin from './libs/mixin/mixin.js'
|
||||
// 小程序特有的mixin
|
||||
import mpMixin from './libs/mixin/mpMixin.js'
|
||||
// #ifdef MP
|
||||
import mpShare from './libs/mixin/mpShare.js'
|
||||
// #endif
|
||||
|
||||
// 路由封装
|
||||
import route from './libs/util/route.js'
|
||||
// 公共工具函数
|
||||
import * as index from './libs/function/index.js'
|
||||
// 防抖方法
|
||||
import debounce from './libs/function/debounce.js'
|
||||
// 节流方法
|
||||
import throttle from './libs/function/throttle.js'
|
||||
// 规则检验
|
||||
import * as test from './libs/function/test.js'
|
||||
|
||||
// 颜色渐变相关,colorGradient-颜色渐变,hexToRgb-十六进制颜色转rgb颜色,rgbToHex-rgb转十六进制
|
||||
import * as colorGradient from './libs/function/colorGradient.js'
|
||||
|
||||
// 配置信息
|
||||
import config from './libs/config/config.js'
|
||||
// 平台
|
||||
import platform from './libs/function/platform'
|
||||
|
||||
const $uv = {
|
||||
route,
|
||||
config,
|
||||
test,
|
||||
date: index.timeFormat, // 另名date
|
||||
...index,
|
||||
colorGradient: colorGradient.colorGradient,
|
||||
hexToRgb: colorGradient.hexToRgb,
|
||||
rgbToHex: colorGradient.rgbToHex,
|
||||
colorToRgba: colorGradient.colorToRgba,
|
||||
http: new Request(),
|
||||
debounce,
|
||||
throttle,
|
||||
platform,
|
||||
mixin,
|
||||
mpMixin
|
||||
}
|
||||
uni.$uv = $uv;
|
||||
const install = (Vue,options={}) => {
|
||||
// #ifndef APP-NVUE
|
||||
const cloneMixin = index.deepClone(mixin);
|
||||
delete cloneMixin?.props?.customClass;
|
||||
delete cloneMixin?.props?.customStyle;
|
||||
Vue.mixin(cloneMixin);
|
||||
// #ifdef MP
|
||||
if(options.mpShare){
|
||||
Vue.mixin(mpShare);
|
||||
}
|
||||
// #endif
|
||||
// #endif
|
||||
// #ifdef VUE2
|
||||
// 时间格式化，同时两个名称，date和timeFormat
|
||||
Vue.filter('timeFormat', (timestamp, format) => uni.$uv.timeFormat(timestamp, format));
|
||||
Vue.filter('date', (timestamp, format) => uni.$uv.timeFormat(timestamp, format));
|
||||
// 将多久以前的方法，注入到全局过滤器
|
||||
Vue.filter('timeFrom', (timestamp, format) => uni.$uv.timeFrom(timestamp, format));
|
||||
// 同时挂载到uni和Vue.prototype中
|
||||
// #ifndef APP-NVUE
|
||||
// 只有vue，挂载到Vue.prototype才有意义，因为nvue中全局Vue.prototype和Vue.mixin是无效的
|
||||
Vue.prototype.$uv = $uv;
|
||||
// #endif
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
Vue.config.globalProperties.$uv = $uv;
|
||||
// #endif
|
||||
}
|
||||
export default {
|
||||
install
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
// 引入公共基础类
|
||||
@import "./libs/css/common.scss";
|
||||
|
||||
// 非nvue的样式
|
||||
/* #ifndef APP-NVUE */
|
||||
@import "./libs/css/vue.scss";
|
||||
/* #endif */
|
||||
@@ -0,0 +1,34 @@
|
||||
// 此版本发布于2024-01-20
|
||||
const version = '1.1.20'
|
||||
|
||||
// 开发环境才提示，生产环境不会提示
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.log(`\n %c uvui V${version} https://www.uvui.cn/ \n\n`, 'color: #ffffff; background: #3c9cff; padding:5px 0; border-radius: 5px;');
|
||||
}
|
||||
|
||||
export default {
|
||||
v: version,
|
||||
version,
|
||||
// 主题名称
|
||||
type: [
|
||||
'primary',
|
||||
'success',
|
||||
'info',
|
||||
'error',
|
||||
'warning'
|
||||
],
|
||||
// 颜色部分，本来可以通过scss的:export导出供js使用，但是奈何nvue不支持
|
||||
color: {
|
||||
'uv-primary': '#2979ff',
|
||||
'uv-warning': '#ff9900',
|
||||
'uv-success': '#19be6b',
|
||||
'uv-error': '#fa3534',
|
||||
'uv-info': '#909399',
|
||||
'uv-main-color': '#303133',
|
||||
'uv-content-color': '#606266',
|
||||
'uv-tips-color': '#909399',
|
||||
'uv-light-color': '#c0c4cc'
|
||||
},
|
||||
// 默认单位，可以通过配置为rpx，那么在用于传入组件大小参数为数值时，就默认为rpx
|
||||
unit: 'px'
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
$uv-main-color: #303133 !default;
|
||||
$uv-content-color: #606266 !default;
|
||||
$uv-tips-color: #909193 !default;
|
||||
$uv-light-color: #c0c4cc !default;
|
||||
$uv-border-color: #dadbde !default;
|
||||
$uv-bg-color: #f3f4f6 !default;
|
||||
$uv-disabled-color: #c8c9cc !default;
|
||||
|
||||
$uv-primary: #3c9cff !default;
|
||||
$uv-primary-dark: #398ade !default;
|
||||
$uv-primary-disabled: #9acafc !default;
|
||||
$uv-primary-light: #ecf5ff !default;
|
||||
|
||||
$uv-warning: #f9ae3d !default;
|
||||
$uv-warning-dark: #f1a532 !default;
|
||||
$uv-warning-disabled: #f9d39b !default;
|
||||
$uv-warning-light: #fdf6ec !default;
|
||||
|
||||
$uv-success: #5ac725 !default;
|
||||
$uv-success-dark: #53c21d !default;
|
||||
$uv-success-disabled: #a9e08f !default;
|
||||
$uv-success-light: #f5fff0;
|
||||
|
||||
$uv-error: #f56c6c !default;
|
||||
$uv-error-dark: #e45656 !default;
|
||||
$uv-error-disabled: #f7b2b2 !default;
|
||||
$uv-error-light: #fef0f0 !default;
|
||||
|
||||
$uv-info: #909399 !default;
|
||||
$uv-info-dark: #767a82 !default;
|
||||
$uv-info-disabled: #c4c6c9 !default;
|
||||
$uv-info-light: #f4f4f5 !default;
|
||||
@@ -0,0 +1,100 @@
|
||||
// 超出行数，自动显示行尾省略号，最多5行
|
||||
// 来自uvui的温馨提示：当您在控制台看到此报错，说明需要在App.vue的style标签加上【lang="scss"】
|
||||
@for $i from 1 through 5 {
|
||||
.uv-line-#{$i} {
|
||||
/* #ifdef APP-NVUE */
|
||||
// nvue下，可以直接使用lines属性，这是weex特有样式
|
||||
lines: $i;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
// vue下，单行和多行显示省略号需要单独处理
|
||||
@if $i == '1' {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
} @else {
|
||||
display: -webkit-box!important;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
-webkit-line-clamp: $i;
|
||||
-webkit-box-orient: vertical!important;
|
||||
}
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
$uv-bordercolor: #dadbde;
|
||||
@if variable-exists(uv-border-color) {
|
||||
$uv-bordercolor: $uv-border-color;
|
||||
}
|
||||
|
||||
// 此处加上!important并非随意乱用，而是因为目前*.nvue页面编译到H5时，
|
||||
// App.vue的样式会被uni-app的view元素的自带border属性覆盖，导致无效
|
||||
// 综上，这是uni-app的缺陷导致我们为了多端兼容，而必须要加上!important
|
||||
// 移动端兼容性较好，直接使用0.5px去实现细边框，不使用伪元素形式实现
|
||||
.uv-border {
|
||||
border-width: 0.5px!important;
|
||||
border-color: $uv-bordercolor!important;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.uv-border-top {
|
||||
border-top-width: 0.5px!important;
|
||||
border-color: $uv-bordercolor!important;
|
||||
border-top-style: solid;
|
||||
}
|
||||
|
||||
.uv-border-left {
|
||||
border-left-width: 0.5px!important;
|
||||
border-color: $uv-bordercolor!important;
|
||||
border-left-style: solid;
|
||||
}
|
||||
|
||||
.uv-border-right {
|
||||
border-right-width: 0.5px!important;
|
||||
border-color: $uv-bordercolor!important;
|
||||
border-right-style: solid;
|
||||
}
|
||||
|
||||
.uv-border-bottom {
|
||||
border-bottom-width: 0.5px!important;
|
||||
border-color: $uv-bordercolor!important;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
.uv-border-top-bottom {
|
||||
border-top-width: 0.5px!important;
|
||||
border-bottom-width: 0.5px!important;
|
||||
border-color: $uv-bordercolor!important;
|
||||
border-top-style: solid;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
// 去除button的所有默认样式，让其表现跟普通的view、text元素一样
|
||||
.uv-reset-button {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
/* #ifndef APP-PLUS */
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
border-width: 0;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.uv-reset-button::after {
|
||||
border: none;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.uv-hover-class {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
@mixin flex($direction: row) {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: $direction;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
// 由于uvui是基于nvue环境进行开发的，此环境中普通元素默认为flex-direction: column;
|
||||
// 所以在非nvue中，需要对元素进行重置为flex-direction: column; 否则可能会表现异常
|
||||
$uvui-nvue-style: true !default;
|
||||
@if $uvui-nvue-style == true {
|
||||
view, scroll-view, swiper-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
flex-basis: auto;
|
||||
align-items: stretch;
|
||||
align-content: flex-start;
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
@@ -0,0 +1,111 @@
|
||||
// 超出行数，自动显示行尾省略号，最多5行
|
||||
// 来自uvui的温馨提示：当您在控制台看到此报错，说明需要在App.vue的style标签加上【lang="scss"】
|
||||
@if variable-exists(show-lines) {
|
||||
@for $i from 1 through 5 {
|
||||
.uv-line-#{$i} {
|
||||
/* #ifdef APP-NVUE */
|
||||
// nvue下，可以直接使用lines属性，这是weex特有样式
|
||||
lines: $i;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
// vue下，单行和多行显示省略号需要单独处理
|
||||
@if $i == '1' {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
} @else {
|
||||
display: -webkit-box!important;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
-webkit-line-clamp: $i;
|
||||
-webkit-box-orient: vertical!important;
|
||||
}
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
}
|
||||
@if variable-exists(show-border) {
|
||||
$uv-bordercolor: #dadbde;
|
||||
@if variable-exists(uv-border-color) {
|
||||
$uv-bordercolor: $uv-border-color;
|
||||
}
|
||||
// 此处加上!important并非随意乱用，而是因为目前*.nvue页面编译到H5时，
|
||||
// App.vue的样式会被uni-app的view元素的自带border属性覆盖，导致无效
|
||||
// 综上，这是uni-app的缺陷导致我们为了多端兼容，而必须要加上!important
|
||||
// 移动端兼容性较好，直接使用0.5px去实现细边框，不使用伪元素形式实现
|
||||
@if variable-exists(show-border-surround) {
|
||||
.uv-border {
|
||||
border-width: 0.5px!important;
|
||||
border-color: $uv-bordercolor!important;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
@if variable-exists(show-border-top) {
|
||||
.uv-border-top {
|
||||
border-top-width: 0.5px!important;
|
||||
border-color: $uv-bordercolor!important;
|
||||
border-top-style: solid;
|
||||
}
|
||||
}
|
||||
@if variable-exists(show-border-left) {
|
||||
.uv-border-left {
|
||||
border-left-width: 0.5px!important;
|
||||
border-color: $uv-bordercolor!important;
|
||||
border-left-style: solid;
|
||||
}
|
||||
}
|
||||
@if variable-exists(show-border-right) {
|
||||
.uv-border-right {
|
||||
border-right-width: 0.5px!important;
|
||||
border-color: $uv-bordercolor!important;
|
||||
border-right-style: solid;
|
||||
}
|
||||
}
|
||||
@if variable-exists(show-border-bottom) {
|
||||
.uv-border-bottom {
|
||||
border-bottom-width: 0.5px!important;
|
||||
border-color: $uv-bordercolor!important;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
}
|
||||
@if variable-exists(show-border-top-bottom) {
|
||||
.uv-border-top-bottom {
|
||||
border-top-width: 0.5px!important;
|
||||
border-bottom-width: 0.5px!important;
|
||||
border-color: $uv-bordercolor!important;
|
||||
border-top-style: solid;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
@if variable-exists(show-reset-button) {
|
||||
// 去除button的所有默认样式，让其表现跟普通的view、text元素一样
|
||||
.uv-reset-button {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
/* #ifndef APP-PLUS */
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
border-width: 0;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.uv-reset-button::after {
|
||||
border: none;
|
||||
}
|
||||
/* #endif */
|
||||
}
|
||||
@if variable-exists(show-hover) {
|
||||
.uv-hover-class {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
// 历遍生成4个方向的底部安全区
|
||||
@each $d in top, right, bottom, left {
|
||||
.uv-safe-area-inset-#{$d} {
|
||||
padding-#{$d}: 0;
|
||||
padding-#{$d}: constant(safe-area-inset-#{$d});
|
||||
padding-#{$d}: env(safe-area-inset-#{$d});
|
||||
}
|
||||
}
|
||||
|
||||
//提升H5端uni.toast()的层级，避免被uvui的modal等遮盖
|
||||
/* #ifdef H5 */
|
||||
uni-toast {
|
||||
z-index: 10090;
|
||||
}
|
||||
uni-toast .uni-toast {
|
||||
z-index: 10090;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
// 隐藏scroll-view的滚动条
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
$uvui-nvue-style: true !default;
|
||||
@if $uvui-nvue-style == false {
|
||||
view, scroll-view, swiper-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
flex-basis: auto;
|
||||
align-items: stretch;
|
||||
align-content: flex-start;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
/**
|
||||
* 求两个颜色之间的渐变值
|
||||
* @param {string} startColor 开始的颜色
|
||||
* @param {string} endColor 结束的颜色
|
||||
* @param {number} step 颜色等分的份额
|
||||
* */
|
||||
function colorGradient(startColor = 'rgb(0, 0, 0)', endColor = 'rgb(255, 255, 255)', step = 10) {
|
||||
const startRGB = hexToRgb(startColor, false) // 转换为rgb数组模式
|
||||
const startR = startRGB[0]
|
||||
const startG = startRGB[1]
|
||||
const startB = startRGB[2]
|
||||
|
||||
const endRGB = hexToRgb(endColor, false)
|
||||
const endR = endRGB[0]
|
||||
const endG = endRGB[1]
|
||||
const endB = endRGB[2]
|
||||
|
||||
const sR = (endR - startR) / step // 总差值
|
||||
const sG = (endG - startG) / step
|
||||
const sB = (endB - startB) / step
|
||||
const colorArr = []
|
||||
for (let i = 0; i < step; i++) {
|
||||
// 计算每一步的hex值
|
||||
let hex = rgbToHex(`rgb(${Math.round((sR * i + startR))},${Math.round((sG * i + startG))},${Math.round((sB
|
||||
* i + startB))})`)
|
||||
// 确保第一个颜色值为startColor的值
|
||||
if (i === 0) hex = rgbToHex(startColor)
|
||||
// 确保最后一个颜色值为endColor的值
|
||||
if (i === step - 1) hex = rgbToHex(endColor)
|
||||
colorArr.push(hex)
|
||||
}
|
||||
return colorArr
|
||||
}
|
||||
|
||||
// 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
|
||||
function hexToRgb(sColor, str = true) {
|
||||
const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
|
||||
sColor = String(sColor).toLowerCase()
|
||||
if (sColor && reg.test(sColor)) {
|
||||
if (sColor.length === 4) {
|
||||
let sColorNew = '#'
|
||||
for (let i = 1; i < 4; i += 1) {
|
||||
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
|
||||
}
|
||||
sColor = sColorNew
|
||||
}
|
||||
// 处理六位的颜色值
|
||||
const sColorChange = []
|
||||
for (let i = 1; i < 7; i += 2) {
|
||||
sColorChange.push(parseInt(`0x${sColor.slice(i, i + 2)}`))
|
||||
}
|
||||
if (!str) {
|
||||
return sColorChange
|
||||
}
|
||||
return `rgb(${sColorChange[0]},${sColorChange[1]},${sColorChange[2]})`
|
||||
} if (/^(rgb|RGB)/.test(sColor)) {
|
||||
const arr = sColor.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',')
|
||||
return arr.map((val) => Number(val))
|
||||
}
|
||||
return sColor
|
||||
}
|
||||
|
||||
// 将rgb表示方式转换为hex表示方式
|
||||
function rgbToHex(rgb) {
|
||||
const _this = rgb
|
||||
const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
|
||||
if (/^(rgb|RGB)/.test(_this)) {
|
||||
const aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',')
|
||||
let strHex = '#'
|
||||
for (let i = 0; i < aColor.length; i++) {
|
||||
let hex = Number(aColor[i]).toString(16)
|
||||
hex = String(hex).length == 1 ? `${0}${hex}` : hex // 保证每个rgb的值为2位
|
||||
if (hex === '0') {
|
||||
hex += hex
|
||||
}
|
||||
strHex += hex
|
||||
}
|
||||
if (strHex.length !== 7) {
|
||||
strHex = _this
|
||||
}
|
||||
return strHex
|
||||
} if (reg.test(_this)) {
|
||||
const aNum = _this.replace(/#/, '').split('')
|
||||
if (aNum.length === 6) {
|
||||
return _this
|
||||
} if (aNum.length === 3) {
|
||||
let numHex = '#'
|
||||
for (let i = 0; i < aNum.length; i += 1) {
|
||||
numHex += (aNum[i] + aNum[i])
|
||||
}
|
||||
return numHex
|
||||
}
|
||||
} else {
|
||||
return _this
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* JS颜色十六进制转换为rgb或rgba,返回的格式为 rgba（255，255，255，0.5）字符串
|
||||
* sHex为传入的十六进制的色值
|
||||
* alpha为rgba的透明度
|
||||
*/
|
||||
function colorToRgba(color, alpha) {
|
||||
color = rgbToHex(color)
|
||||
// 十六进制颜色值的正则表达式
|
||||
const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
|
||||
/* 16进制颜色转为RGB格式 */
|
||||
let sColor = String(color).toLowerCase()
|
||||
if (sColor && reg.test(sColor)) {
|
||||
if (sColor.length === 4) {
|
||||
let sColorNew = '#'
|
||||
for (let i = 1; i < 4; i += 1) {
|
||||
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
|
||||
}
|
||||
sColor = sColorNew
|
||||
}
|
||||
// 处理六位的颜色值
|
||||
const sColorChange = []
|
||||
for (let i = 1; i < 7; i += 2) {
|
||||
sColorChange.push(parseInt(`0x${sColor.slice(i, i + 2)}`))
|
||||
}
|
||||
// return sColorChange.join(',')
|
||||
return `rgba(${sColorChange.join(',')},${alpha})`
|
||||
}
|
||||
|
||||
return sColor
|
||||
}
|
||||
|
||||
export {
|
||||
colorGradient,
|
||||
hexToRgb,
|
||||
rgbToHex,
|
||||
colorToRgba
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
let timeout = null
|
||||
|
||||
/**
|
||||
* 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
|
||||
*
|
||||
* @param {Function} func 要执行的回调函数
|
||||
* @param {Number} wait 延时的时间
|
||||
* @param {Boolean} immediate 是否立即执行
|
||||
* @return null
|
||||
*/
|
||||
function debounce(func, wait = 500, immediate = false) {
|
||||
// 清除定时器
|
||||
if (timeout !== null) clearTimeout(timeout)
|
||||
// 立即执行，此类情况一般用不到
|
||||
if (immediate) {
|
||||
const callNow = !timeout
|
||||
timeout = setTimeout(() => {
|
||||
timeout = null
|
||||
}, wait)
|
||||
if (callNow) typeof func === 'function' && func()
|
||||
} else {
|
||||
// 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
|
||||
timeout = setTimeout(() => {
|
||||
typeof func === 'function' && func()
|
||||
}, wait)
|
||||
}
|
||||
}
|
||||
|
||||
export default debounce
|
||||
@@ -0,0 +1,167 @@
|
||||
let _boundaryCheckingState = true; // 是否进行越界检查的全局开关
|
||||
|
||||
/**
|
||||
* 把错误的数据转正
|
||||
* @private
|
||||
* @example strip(0.09999999999999998)=0.1
|
||||
*/
|
||||
function strip(num, precision = 15) {
|
||||
return +parseFloat(Number(num).toPrecision(precision));
|
||||
}
|
||||
|
||||
/**
|
||||
* Return digits length of a number
|
||||
* @private
|
||||
* @param {*number} num Input number
|
||||
*/
|
||||
function digitLength(num) {
|
||||
// Get digit length of e
|
||||
const eSplit = num.toString().split(/[eE]/);
|
||||
const len = (eSplit[0].split('.')[1] || '').length - +(eSplit[1] || 0);
|
||||
return len > 0 ? len : 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 把小数转成整数,如果是小数则放大成整数
|
||||
* @private
|
||||
* @param {*number} num 输入数
|
||||
*/
|
||||
function float2Fixed(num) {
|
||||
if (num.toString().indexOf('e') === -1) {
|
||||
return Number(num.toString().replace('.', ''));
|
||||
}
|
||||
const dLen = digitLength(num);
|
||||
return dLen > 0 ? strip(Number(num) * Math.pow(10, dLen)) : Number(num);
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测数字是否越界，如果越界给出提示
|
||||
* @private
|
||||
* @param {*number} num 输入数
|
||||
*/
|
||||
function checkBoundary(num) {
|
||||
if (_boundaryCheckingState) {
|
||||
if (num > Number.MAX_SAFE_INTEGER || num < Number.MIN_SAFE_INTEGER) {
|
||||
console.warn(`${num} 超出了精度限制，结果可能不正确`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 把递归操作扁平迭代化
|
||||
* @param {number[]} arr 要操作的数字数组
|
||||
* @param {function} operation 迭代操作
|
||||
* @private
|
||||
*/
|
||||
function iteratorOperation(arr, operation) {
|
||||
const [num1, num2, ...others] = arr;
|
||||
let res = operation(num1, num2);
|
||||
|
||||
others.forEach((num) => {
|
||||
res = operation(res, num);
|
||||
});
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
/**
|
||||
* 高精度乘法
|
||||
* @export
|
||||
*/
|
||||
export function times(...nums) {
|
||||
if (nums.length > 2) {
|
||||
return iteratorOperation(nums, times);
|
||||
}
|
||||
|
||||
const [num1, num2] = nums;
|
||||
const num1Changed = float2Fixed(num1);
|
||||
const num2Changed = float2Fixed(num2);
|
||||
const baseNum = digitLength(num1) + digitLength(num2);
|
||||
const leftValue = num1Changed * num2Changed;
|
||||
|
||||
checkBoundary(leftValue);
|
||||
|
||||
return leftValue / Math.pow(10, baseNum);
|
||||
}
|
||||
|
||||
/**
|
||||
* 高精度加法
|
||||
* @export
|
||||
*/
|
||||
export function plus(...nums) {
|
||||
if (nums.length > 2) {
|
||||
return iteratorOperation(nums, plus);
|
||||
}
|
||||
|
||||
const [num1, num2] = nums;
|
||||
// 取最大的小数位
|
||||
const baseNum = Math.pow(10, Math.max(digitLength(num1), digitLength(num2)));
|
||||
// 把小数都转为整数然后再计算
|
||||
return (times(num1, baseNum) + times(num2, baseNum)) / baseNum;
|
||||
}
|
||||
|
||||
/**
|
||||
* 高精度减法
|
||||
* @export
|
||||
*/
|
||||
export function minus(...nums) {
|
||||
if (nums.length > 2) {
|
||||
return iteratorOperation(nums, minus);
|
||||
}
|
||||
|
||||
const [num1, num2] = nums;
|
||||
const baseNum = Math.pow(10, Math.max(digitLength(num1), digitLength(num2)));
|
||||
return (times(num1, baseNum) - times(num2, baseNum)) / baseNum;
|
||||
}
|
||||
|
||||
/**
|
||||
* 高精度除法
|
||||
* @export
|
||||
*/
|
||||
export function divide(...nums) {
|
||||
if (nums.length > 2) {
|
||||
return iteratorOperation(nums, divide);
|
||||
}
|
||||
|
||||
const [num1, num2] = nums;
|
||||
const num1Changed = float2Fixed(num1);
|
||||
const num2Changed = float2Fixed(num2);
|
||||
checkBoundary(num1Changed);
|
||||
checkBoundary(num2Changed);
|
||||
// 重要，这里必须用strip进行修正
|
||||
return times(num1Changed / num2Changed, strip(Math.pow(10, digitLength(num2) - digitLength(num1))));
|
||||
}
|
||||
|
||||
/**
|
||||
* 四舍五入
|
||||
* @export
|
||||
*/
|
||||
export function round(num, ratio) {
|
||||
const base = Math.pow(10, ratio);
|
||||
let result = divide(Math.round(Math.abs(times(num, base))), base);
|
||||
if (num < 0 && result !== 0) {
|
||||
result = times(result, -1);
|
||||
}
|
||||
// 位数不足则补0
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否进行边界检查，默认开启
|
||||
* @param flag 标记开关，true 为开启，false 为关闭，默认为 true
|
||||
* @export
|
||||
*/
|
||||
export function enableBoundaryChecking(flag = true) {
|
||||
_boundaryCheckingState = flag;
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
times,
|
||||
plus,
|
||||
minus,
|
||||
divide,
|
||||
round,
|
||||
enableBoundaryChecking,
|
||||
};
|
||||
|
||||
@@ -0,0 +1,734 @@
|
||||
import { number, empty } from './test.js'
|
||||
import { round } from './digit.js'
|
||||
/**
|
||||
* @description 如果value小于min，取min；如果value大于max，取max
|
||||
* @param {number} min
|
||||
* @param {number} max
|
||||
* @param {number} value
|
||||
*/
|
||||
function range(min = 0, max = 0, value = 0) {
|
||||
return Math.max(min, Math.min(max, Number(value)))
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 用于获取用户传递值的px值 如果用户传递了"xxpx"或者"xxrpx"，取出其数值部分，如果是"xxxrpx"还需要用过uni.upx2px进行转换
|
||||
* @param {number|string} value 用户传递值的px值
|
||||
* @param {boolean} unit
|
||||
* @returns {number|string}
|
||||
*/
|
||||
function getPx(value, unit = false) {
|
||||
if (number(value)) {
|
||||
return unit ? `${value}px` : Number(value)
|
||||
}
|
||||
// 如果带有rpx，先取出其数值部分，再转为px值
|
||||
if (/(rpx|upx)$/.test(value)) {
|
||||
return unit ? `${uni.upx2px(parseInt(value))}px` : Number(uni.upx2px(parseInt(value)))
|
||||
}
|
||||
return unit ? `${parseInt(value)}px` : parseInt(value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 进行延时，以达到可以简写代码的目的 比如: await uni.$uv.sleep(20)将会阻塞20ms
|
||||
* @param {number} value 堵塞时间 单位ms 毫秒
|
||||
* @returns {Promise} 返回promise
|
||||
*/
|
||||
function sleep(value = 30) {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve()
|
||||
}, value)
|
||||
})
|
||||
}
|
||||
/**
|
||||
* @description 运行期判断平台
|
||||
* @returns {string} 返回所在平台(小写)
|
||||
* @link 运行期判断平台 https://uniapp.dcloud.io/frame?id=判断平台
|
||||
*/
|
||||
function os() {
|
||||
return uni.getSystemInfoSync().platform.toLowerCase()
|
||||
}
|
||||
/**
|
||||
* @description 获取系统信息同步接口
|
||||
* @link 获取系统信息同步接口 https://uniapp.dcloud.io/api/system/info?id=getsysteminfosync
|
||||
*/
|
||||
function sys() {
|
||||
return uni.getSystemInfoSync()
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 取一个区间数
|
||||
* @param {Number} min 最小值
|
||||
* @param {Number} max 最大值
|
||||
*/
|
||||
function random(min, max) {
|
||||
if (min >= 0 && max > 0 && max >= min) {
|
||||
const gab = max - min + 1
|
||||
return Math.floor(Math.random() * gab + min)
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Number} len uuid的长度
|
||||
* @param {Boolean} firstU 将返回的首字母置为"u"
|
||||
* @param {Nubmer} radix 生成uuid的基数(意味着返回的字符串都是这个基数),2-二进制,8-八进制,10-十进制,16-十六进制
|
||||
*/
|
||||
function guid(len = 32, firstU = true, radix = null) {
|
||||
const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
|
||||
const uuid = []
|
||||
radix = radix || chars.length
|
||||
|
||||
if (len) {
|
||||
// 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
|
||||
for (let i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]
|
||||
} else {
|
||||
let r
|
||||
// rfc4122标准要求返回的uuid中,某些位为固定的字符
|
||||
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
|
||||
uuid[14] = '4'
|
||||
|
||||
for (let i = 0; i < 36; i++) {
|
||||
if (!uuid[i]) {
|
||||
r = 0 | Math.random() * 16
|
||||
uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r]
|
||||
}
|
||||
}
|
||||
}
|
||||
// 移除第一个字符,并用u替代,因为第一个字符为数值时,该guuid不能用作id或者class
|
||||
if (firstU) {
|
||||
uuid.shift()
|
||||
return `u${uuid.join('')}`
|
||||
}
|
||||
return uuid.join('')
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 获取父组件的参数，因为支付宝小程序不支持provide/inject的写法
|
||||
this.$parent在非H5中，可以准确获取到父组件，但是在H5中，需要多次this.$parent.$parent.xxx
|
||||
这里默认值等于undefined有它的含义，因为最顶层元素(组件)的$parent就是undefined，意味着不传name
|
||||
值(默认为undefined)，就是查找最顶层的$parent
|
||||
* @param {string|undefined} name 父组件的参数名
|
||||
*/
|
||||
function $parent(name = undefined) {
|
||||
let parent = this.$parent
|
||||
// 通过while历遍，这里主要是为了H5需要多层解析的问题
|
||||
while (parent) {
|
||||
// 父组件
|
||||
if (parent.$options && parent.$options.name !== name) {
|
||||
// 如果组件的name不相等，继续上一级寻找
|
||||
parent = parent.$parent
|
||||
} else {
|
||||
return parent
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 样式转换
|
||||
* 对象转字符串，或者字符串转对象
|
||||
* @param {object | string} customStyle 需要转换的目标
|
||||
* @param {String} target 转换的目的，object-转为对象，string-转为字符串
|
||||
* @returns {object|string}
|
||||
*/
|
||||
function addStyle(customStyle, target = 'object') {
|
||||
// 字符串转字符串，对象转对象情形，直接返回
|
||||
if (empty(customStyle) || typeof(customStyle) === 'object' && target === 'object' || target === 'string' &&
|
||||
typeof(customStyle) === 'string') {
|
||||
return customStyle
|
||||
}
|
||||
// 字符串转对象
|
||||
if (target === 'object') {
|
||||
// 去除字符串样式中的两端空格(中间的空格不能去掉，比如padding: 20px 0如果去掉了就错了)，空格是无用的
|
||||
customStyle = trim(customStyle)
|
||||
// 根据";"将字符串转为数组形式
|
||||
const styleArray = customStyle.split(';')
|
||||
const style = {}
|
||||
// 历遍数组，拼接成对象
|
||||
for (let i = 0; i < styleArray.length; i++) {
|
||||
// 'font-size:20px;color:red;'，如此最后字符串有";"的话，会导致styleArray最后一个元素为空字符串，这里需要过滤
|
||||
if (styleArray[i]) {
|
||||
const item = styleArray[i].split(':')
|
||||
style[trim(item[0])] = trim(item[1])
|
||||
}
|
||||
}
|
||||
return style
|
||||
}
|
||||
// 这里为对象转字符串形式
|
||||
let string = ''
|
||||
for (const i in customStyle) {
|
||||
// 驼峰转为中划线的形式，否则css内联样式，无法识别驼峰样式属性名
|
||||
const key = i.replace(/([A-Z])/g, '-$1').toLowerCase()
|
||||
string += `${key}:${customStyle[i]};`
|
||||
}
|
||||
// 去除两端空格
|
||||
return trim(string)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 添加单位，如果有rpx，upx，%，px等单位结尾或者值为auto，直接返回，否则加上px单位结尾
|
||||
* @param {string|number} value 需要添加单位的值
|
||||
* @param {string} unit 添加的单位名 比如px
|
||||
*/
|
||||
function addUnit(value = 'auto', unit = uni?.$uv?.config?.unit ? uni?.$uv?.config?.unit : 'px') {
|
||||
value = String(value)
|
||||
// 用uvui内置验证规则中的number判断是否为数值
|
||||
return number(value) ? `${value}${unit}` : value
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 深度克隆
|
||||
* @param {object} obj 需要深度克隆的对象
|
||||
* @param cache 缓存
|
||||
* @returns {*} 克隆后的对象或者原值（不是对象）
|
||||
*/
|
||||
function deepClone(obj, cache = new WeakMap()) {
|
||||
if (obj === null || typeof obj !== 'object') return obj;
|
||||
if (cache.has(obj)) return cache.get(obj);
|
||||
let clone;
|
||||
if (obj instanceof Date) {
|
||||
clone = new Date(obj.getTime());
|
||||
} else if (obj instanceof RegExp) {
|
||||
clone = new RegExp(obj);
|
||||
} else if (obj instanceof Map) {
|
||||
clone = new Map(Array.from(obj, ([key, value]) => [key, deepClone(value, cache)]));
|
||||
} else if (obj instanceof Set) {
|
||||
clone = new Set(Array.from(obj, value => deepClone(value, cache)));
|
||||
} else if (Array.isArray(obj)) {
|
||||
clone = obj.map(value => deepClone(value, cache));
|
||||
} else if (Object.prototype.toString.call(obj) === '[object Object]') {
|
||||
clone = Object.create(Object.getPrototypeOf(obj));
|
||||
cache.set(obj, clone);
|
||||
for (const [key, value] of Object.entries(obj)) {
|
||||
clone[key] = deepClone(value, cache);
|
||||
}
|
||||
} else {
|
||||
clone = Object.assign({}, obj);
|
||||
}
|
||||
cache.set(obj, clone);
|
||||
return clone;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description JS对象深度合并
|
||||
* @param {object} target 需要拷贝的对象
|
||||
* @param {object} source 拷贝的来源对象
|
||||
* @returns {object|boolean} 深度合并后的对象或者false（入参有不是对象）
|
||||
*/
|
||||
function deepMerge(target = {}, source = {}) {
|
||||
target = deepClone(target)
|
||||
if (typeof target !== 'object' || target === null || typeof source !== 'object' || source === null) return target;
|
||||
const merged = Array.isArray(target) ? target.slice() : Object.assign({}, target);
|
||||
for (const prop in source) {
|
||||
if (!source.hasOwnProperty(prop)) continue;
|
||||
const sourceValue = source[prop];
|
||||
const targetValue = merged[prop];
|
||||
if (sourceValue instanceof Date) {
|
||||
merged[prop] = new Date(sourceValue);
|
||||
} else if (sourceValue instanceof RegExp) {
|
||||
merged[prop] = new RegExp(sourceValue);
|
||||
} else if (sourceValue instanceof Map) {
|
||||
merged[prop] = new Map(sourceValue);
|
||||
} else if (sourceValue instanceof Set) {
|
||||
merged[prop] = new Set(sourceValue);
|
||||
} else if (typeof sourceValue === 'object' && sourceValue !== null) {
|
||||
merged[prop] = deepMerge(targetValue, sourceValue);
|
||||
} else {
|
||||
merged[prop] = sourceValue;
|
||||
}
|
||||
}
|
||||
return merged;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description error提示
|
||||
* @param {*} err 错误内容
|
||||
*/
|
||||
function error(err) {
|
||||
// 开发环境才提示，生产环境不会提示
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.error(`uvui提示：${err}`)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 打乱数组
|
||||
* @param {array} array 需要打乱的数组
|
||||
* @returns {array} 打乱后的数组
|
||||
*/
|
||||
function randomArray(array = []) {
|
||||
// 原理是sort排序,Math.random()产生0<= x < 1之间的数,会导致x-0.05大于或者小于0
|
||||
return array.sort(() => Math.random() - 0.5)
|
||||
}
|
||||
|
||||
// padStart 的 polyfill，因为某些机型或情况，还无法支持es7的padStart，比如电脑版的微信小程序
|
||||
// 所以这里做一个兼容polyfill的兼容处理
|
||||
if (!String.prototype.padStart) {
|
||||
// 为了方便表示这里 fillString 用了ES6 的默认参数，不影响理解
|
||||
String.prototype.padStart = function(maxLength, fillString = ' ') {
|
||||
if (Object.prototype.toString.call(fillString) !== '[object String]') {
|
||||
throw new TypeError(
|
||||
'fillString must be String'
|
||||
)
|
||||
}
|
||||
const str = this
|
||||
// 返回 String(str) 这里是为了使返回的值是字符串字面量，在控制台中更符合直觉
|
||||
if (str.length >= maxLength) return String(str)
|
||||
|
||||
const fillLength = maxLength - str.length
|
||||
let times = Math.ceil(fillLength / fillString.length)
|
||||
while (times >>= 1) {
|
||||
fillString += fillString
|
||||
if (times === 1) {
|
||||
fillString += fillString
|
||||
}
|
||||
}
|
||||
return fillString.slice(0, fillLength) + str
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 格式化时间
|
||||
* @param {String|Number} dateTime 需要格式化的时间戳
|
||||
* @param {String} fmt 格式化规则 yyyy:mm:dd|yyyy:mm|yyyy年mm月dd日|yyyy年mm月dd日 hh时MM分等,可自定义组合 默认yyyy-mm-dd
|
||||
* @returns {string} 返回格式化后的字符串
|
||||
*/
|
||||
function timeFormat(dateTime = null, formatStr = 'yyyy-mm-dd') {
|
||||
let date
|
||||
// 若传入时间为假值，则取当前时间
|
||||
if (!dateTime) {
|
||||
date = new Date()
|
||||
}
|
||||
// 若为unix秒时间戳，则转为毫秒时间戳（逻辑有点奇怪，但不敢改，以保证历史兼容）
|
||||
else if (/^\d{10}$/.test(dateTime?.toString().trim())) {
|
||||
date = new Date(dateTime * 1000)
|
||||
}
|
||||
// 若用户传入字符串格式时间戳，new Date无法解析，需做兼容
|
||||
else if (typeof dateTime === 'string' && /^\d+$/.test(dateTime.trim())) {
|
||||
date = new Date(Number(dateTime))
|
||||
}
|
||||
// 处理平台性差异，在Safari/Webkit中，new Date仅支持/作为分割符的字符串时间
|
||||
// 处理 '2022-07-10 01:02:03'，跳过 '2022-07-10T01:02:03'
|
||||
else if (typeof dateTime === 'string' && dateTime.includes('-') && !dateTime.includes('T')) {
|
||||
date = new Date(dateTime.replace(/-/g, '/'))
|
||||
}
|
||||
// 其他都认为符合 RFC 2822 规范
|
||||
else {
|
||||
date = new Date(dateTime)
|
||||
}
|
||||
|
||||
const timeSource = {
|
||||
'y': date.getFullYear().toString(), // 年
|
||||
'm': (date.getMonth() + 1).toString().padStart(2, '0'), // 月
|
||||
'd': date.getDate().toString().padStart(2, '0'), // 日
|
||||
'h': date.getHours().toString().padStart(2, '0'), // 时
|
||||
'M': date.getMinutes().toString().padStart(2, '0'), // 分
|
||||
's': date.getSeconds().toString().padStart(2, '0') // 秒
|
||||
// 有其他格式化字符需求可以继续添加，必须转化成字符串
|
||||
}
|
||||
|
||||
for (const key in timeSource) {
|
||||
const [ret] = new RegExp(`${key}+`).exec(formatStr) || []
|
||||
if (ret) {
|
||||
// 年可能只需展示两位
|
||||
const beginIndex = key === 'y' && ret.length === 2 ? 2 : 0
|
||||
formatStr = formatStr.replace(ret, timeSource[key].slice(beginIndex))
|
||||
}
|
||||
}
|
||||
|
||||
return formatStr
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 时间戳转为多久之前
|
||||
* @param {String|Number} timestamp 时间戳
|
||||
* @param {String|Boolean} format
|
||||
* 格式化规则如果为时间格式字符串，超出一定时间范围，返回固定的时间格式；
|
||||
* 如果为布尔值false，无论什么时间，都返回多久以前的格式
|
||||
* @returns {string} 转化后的内容
|
||||
*/
|
||||
function timeFrom(timestamp = null, format = 'yyyy-mm-dd') {
|
||||
if (timestamp == null) timestamp = Number(new Date())
|
||||
timestamp = parseInt(timestamp)
|
||||
// 判断用户输入的时间戳是秒还是毫秒,一般前端js获取的时间戳是毫秒(13位),后端传过来的为秒(10位)
|
||||
if (timestamp.toString().length == 10) timestamp *= 1000
|
||||
let timer = (new Date()).getTime() - timestamp
|
||||
timer = parseInt(timer / 1000)
|
||||
// 如果小于5分钟,则返回"刚刚",其他以此类推
|
||||
let tips = ''
|
||||
switch (true) {
|
||||
case timer < 300:
|
||||
tips = '刚刚'
|
||||
break
|
||||
case timer >= 300 && timer < 3600:
|
||||
tips = `${parseInt(timer / 60)}分钟前`
|
||||
break
|
||||
case timer >= 3600 && timer < 86400:
|
||||
tips = `${parseInt(timer / 3600)}小时前`
|
||||
break
|
||||
case timer >= 86400 && timer < 2592000:
|
||||
tips = `${parseInt(timer / 86400)}天前`
|
||||
break
|
||||
default:
|
||||
// 如果format为false，则无论什么时间戳，都显示xx之前
|
||||
if (format === false) {
|
||||
if (timer >= 2592000 && timer < 365 * 86400) {
|
||||
tips = `${parseInt(timer / (86400 * 30))}个月前`
|
||||
} else {
|
||||
tips = `${parseInt(timer / (86400 * 365))}年前`
|
||||
}
|
||||
} else {
|
||||
tips = timeFormat(timestamp, format)
|
||||
}
|
||||
}
|
||||
return tips
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 去除空格
|
||||
* @param String str 需要去除空格的字符串
|
||||
* @param String pos both(左右)|left|right|all 默认both
|
||||
*/
|
||||
function trim(str, pos = 'both') {
|
||||
str = String(str)
|
||||
if (pos == 'both') {
|
||||
return str.replace(/^\s+|\s+$/g, '')
|
||||
}
|
||||
if (pos == 'left') {
|
||||
return str.replace(/^\s*/, '')
|
||||
}
|
||||
if (pos == 'right') {
|
||||
return str.replace(/(\s*$)/g, '')
|
||||
}
|
||||
if (pos == 'all') {
|
||||
return str.replace(/\s+/g, '')
|
||||
}
|
||||
return str
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 对象转url参数
|
||||
* @param {object} data,对象
|
||||
* @param {Boolean} isPrefix,是否自动加上"?"
|
||||
* @param {string} arrayFormat 规则 indices|brackets|repeat|comma
|
||||
*/
|
||||
function queryParams(data = {}, isPrefix = true, arrayFormat = 'brackets') {
|
||||
const prefix = isPrefix ? '?' : ''
|
||||
const _result = []
|
||||
if (['indices', 'brackets', 'repeat', 'comma'].indexOf(arrayFormat) == -1) arrayFormat = 'brackets'
|
||||
for (const key in data) {
|
||||
const value = data[key]
|
||||
// 去掉为空的参数
|
||||
if (['', undefined, null].indexOf(value) >= 0) {
|
||||
continue
|
||||
}
|
||||
// 如果值为数组，另行处理
|
||||
if (value.constructor === Array) {
|
||||
// e.g. {ids: [1, 2, 3]}
|
||||
switch (arrayFormat) {
|
||||
case 'indices':
|
||||
// 结果: ids[0]=1&ids[1]=2&ids[2]=3
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
_result.push(`${key}[${i}]=${value[i]}`)
|
||||
}
|
||||
break
|
||||
case 'brackets':
|
||||
// 结果: ids[]=1&ids[]=2&ids[]=3
|
||||
value.forEach((_value) => {
|
||||
_result.push(`${key}[]=${_value}`)
|
||||
})
|
||||
break
|
||||
case 'repeat':
|
||||
// 结果: ids=1&ids=2&ids=3
|
||||
value.forEach((_value) => {
|
||||
_result.push(`${key}=${_value}`)
|
||||
})
|
||||
break
|
||||
case 'comma':
|
||||
// 结果: ids=1,2,3
|
||||
let commaStr = ''
|
||||
value.forEach((_value) => {
|
||||
commaStr += (commaStr ? ',' : '') + _value
|
||||
})
|
||||
_result.push(`${key}=${commaStr}`)
|
||||
break
|
||||
default:
|
||||
value.forEach((_value) => {
|
||||
_result.push(`${key}[]=${_value}`)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
_result.push(`${key}=${value}`)
|
||||
}
|
||||
}
|
||||
return _result.length ? prefix + _result.join('&') : ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示消息提示框
|
||||
* @param {String} title 提示的内容，长度与 icon 取值有关。
|
||||
* @param {Number} duration 提示的延迟时间，单位毫秒，默认：2000
|
||||
*/
|
||||
function toast(title, duration = 2000) {
|
||||
uni.showToast({
|
||||
title: String(title),
|
||||
icon: 'none',
|
||||
duration
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 根据主题type值,获取对应的图标
|
||||
* @param {String} type 主题名称,primary|info|error|warning|success
|
||||
* @param {boolean} fill 是否使用fill填充实体的图标
|
||||
*/
|
||||
function type2icon(type = 'success', fill = false) {
|
||||
// 如果非预置值,默认为success
|
||||
if (['primary', 'info', 'error', 'warning', 'success'].indexOf(type) == -1) type = 'success'
|
||||
let iconName = ''
|
||||
// 目前(2019-12-12),info和primary使用同一个图标
|
||||
switch (type) {
|
||||
case 'primary':
|
||||
iconName = 'info-circle'
|
||||
break
|
||||
case 'info':
|
||||
iconName = 'info-circle'
|
||||
break
|
||||
case 'error':
|
||||
iconName = 'close-circle'
|
||||
break
|
||||
case 'warning':
|
||||
iconName = 'error-circle'
|
||||
break
|
||||
case 'success':
|
||||
iconName = 'checkmark-circle'
|
||||
break
|
||||
default:
|
||||
iconName = 'checkmark-circle'
|
||||
}
|
||||
// 是否是实体类型,加上-fill,在icon组件库中,实体的类名是后面加-fill的
|
||||
if (fill) iconName += '-fill'
|
||||
return iconName
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 数字格式化
|
||||
* @param {number|string} number 要格式化的数字
|
||||
* @param {number} decimals 保留几位小数
|
||||
* @param {string} decimalPoint 小数点符号
|
||||
* @param {string} thousandsSeparator 千分位符号
|
||||
* @returns {string} 格式化后的数字
|
||||
*/
|
||||
function priceFormat(number, decimals = 0, decimalPoint = '.', thousandsSeparator = ',') {
|
||||
number = (`${number}`).replace(/[^0-9+-Ee.]/g, '')
|
||||
const n = !isFinite(+number) ? 0 : +number
|
||||
const prec = !isFinite(+decimals) ? 0 : Math.abs(decimals)
|
||||
const sep = (typeof thousandsSeparator === 'undefined') ? ',' : thousandsSeparator
|
||||
const dec = (typeof decimalPoint === 'undefined') ? '.' : decimalPoint
|
||||
let s = ''
|
||||
|
||||
s = (prec ? round(n, prec) + '' : `${Math.round(n)}`).split('.')
|
||||
const re = /(-?\d+)(\d{3})/
|
||||
while (re.test(s[0])) {
|
||||
s[0] = s[0].replace(re, `$1${sep}$2`)
|
||||
}
|
||||
|
||||
if ((s[1] || '').length < prec) {
|
||||
s[1] = s[1] || ''
|
||||
s[1] += new Array(prec - s[1].length + 1).join('0')
|
||||
}
|
||||
return s.join(dec)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 获取duration值
|
||||
* 如果带有ms或者s直接返回，如果大于一定值，认为是ms单位，小于一定值，认为是s单位
|
||||
* 比如以30位阈值，那么300大于30，可以理解为用户想要的是300ms，而不是想花300s去执行一个动画
|
||||
* @param {String|number} value 比如: "1s"|"100ms"|1|100
|
||||
* @param {boolean} unit 提示: 如果是false 默认返回number
|
||||
* @return {string|number}
|
||||
*/
|
||||
function getDuration(value, unit = true) {
|
||||
const valueNum = parseInt(value)
|
||||
if (unit) {
|
||||
if (/s$/.test(value)) return value
|
||||
return value > 30 ? `${value}ms` : `${value}s`
|
||||
}
|
||||
if (/ms$/.test(value)) return valueNum
|
||||
if (/s$/.test(value)) return valueNum > 30 ? valueNum : valueNum * 1000
|
||||
return valueNum
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 日期的月或日补零操作
|
||||
* @param {String} value 需要补零的值
|
||||
*/
|
||||
function padZero(value) {
|
||||
return `00${value}`.slice(-2)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 在uv-form的子组件内容发生变化，或者失去焦点时，尝试通知uv-form执行校验方法
|
||||
* @param {*} instance
|
||||
* @param {*} event
|
||||
*/
|
||||
function formValidate(instance, event) {
|
||||
const formItem = $parent.call(instance, 'uv-form-item')
|
||||
const form = $parent.call(instance, 'uv-form')
|
||||
// 如果发生变化的input或者textarea等，其父组件中有uv-form-item或者uv-form等，就执行form的validate方法
|
||||
// 同时将form-item的pros传递给form，让其进行精确对象验证
|
||||
if (formItem && form) {
|
||||
form.validateField(formItem.prop, () => {}, event)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 获取某个对象下的属性，用于通过类似'a.b.c'的形式去获取一个对象的的属性的形式
|
||||
* @param {object} obj 对象
|
||||
* @param {string} key 需要获取的属性字段
|
||||
* @returns {*}
|
||||
*/
|
||||
function getProperty(obj, key) {
|
||||
if (!obj) {
|
||||
return
|
||||
}
|
||||
if (typeof key !== 'string' || key === '') {
|
||||
return ''
|
||||
}
|
||||
if (key.indexOf('.') !== -1) {
|
||||
const keys = key.split('.')
|
||||
let firstObj = obj[keys[0]] || {}
|
||||
|
||||
for (let i = 1; i < keys.length; i++) {
|
||||
if (firstObj) {
|
||||
firstObj = firstObj[keys[i]]
|
||||
}
|
||||
}
|
||||
return firstObj
|
||||
}
|
||||
return obj[key]
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 设置对象的属性值，如果'a.b.c'的形式进行设置
|
||||
* @param {object} obj 对象
|
||||
* @param {string} key 需要设置的属性
|
||||
* @param {string} value 设置的值
|
||||
*/
|
||||
function setProperty(obj, key, value) {
|
||||
if (!obj) {
|
||||
return
|
||||
}
|
||||
// 递归赋值
|
||||
const inFn = function(_obj, keys, v) {
|
||||
// 最后一个属性key
|
||||
if (keys.length === 1) {
|
||||
_obj[keys[0]] = v
|
||||
return
|
||||
}
|
||||
// 0~length-1个key
|
||||
while (keys.length > 1) {
|
||||
const k = keys[0]
|
||||
if (!_obj[k] || (typeof _obj[k] !== 'object')) {
|
||||
_obj[k] = {}
|
||||
}
|
||||
const key = keys.shift()
|
||||
// 自调用判断是否存在属性，不存在则自动创建对象
|
||||
inFn(_obj[k], keys, v)
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof key !== 'string' || key === '') {
|
||||
|
||||
} else if (key.indexOf('.') !== -1) { // 支持多层级赋值操作
|
||||
const keys = key.split('.')
|
||||
inFn(obj, keys, value)
|
||||
} else {
|
||||
obj[key] = value
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 获取当前页面路径
|
||||
*/
|
||||
function page() {
|
||||
const pages = getCurrentPages();
|
||||
const route = pages[pages.length - 1]?.route;
|
||||
// 某些特殊情况下(比如页面进行redirectTo时的一些时机)，pages可能为空数组
|
||||
return `/${route ? route : ''}`
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 获取当前路由栈实例数组
|
||||
*/
|
||||
function pages() {
|
||||
const pages = getCurrentPages()
|
||||
return pages
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取页面历史栈指定层实例
|
||||
* @param back {number} [0] - 0或者负数，表示获取历史栈的哪一层，0表示获取当前页面实例，-1 表示获取上一个页面实例。默认0。
|
||||
*/
|
||||
function getHistoryPage(back = 0) {
|
||||
const pages = getCurrentPages()
|
||||
const len = pages.length
|
||||
return pages[len - 1 + back]
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @description 修改uvui内置属性值
|
||||
* @param {object} props 修改内置props属性
|
||||
* @param {object} config 修改内置config属性
|
||||
* @param {object} color 修改内置color属性
|
||||
* @param {object} zIndex 修改内置zIndex属性
|
||||
*/
|
||||
function setConfig({
|
||||
props = {},
|
||||
config = {},
|
||||
color = {},
|
||||
zIndex = {}
|
||||
}) {
|
||||
const {
|
||||
deepMerge,
|
||||
} = uni.$uv
|
||||
uni.$uv.config = deepMerge(uni.$uv.config, config)
|
||||
uni.$uv.props = deepMerge(uni.$uv.props, props)
|
||||
uni.$uv.color = deepMerge(uni.$uv.color, color)
|
||||
uni.$uv.zIndex = deepMerge(uni.$uv.zIndex, zIndex)
|
||||
}
|
||||
|
||||
export {
|
||||
range,
|
||||
getPx,
|
||||
sleep,
|
||||
os,
|
||||
sys,
|
||||
random,
|
||||
guid,
|
||||
$parent,
|
||||
addStyle,
|
||||
addUnit,
|
||||
deepClone,
|
||||
deepMerge,
|
||||
error,
|
||||
randomArray,
|
||||
timeFormat,
|
||||
timeFrom,
|
||||
trim,
|
||||
queryParams,
|
||||
toast,
|
||||
type2icon,
|
||||
priceFormat,
|
||||
getDuration,
|
||||
padZero,
|
||||
formValidate,
|
||||
getProperty,
|
||||
setProperty,
|
||||
page,
|
||||
pages,
|
||||
getHistoryPage,
|
||||
setConfig
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
/**
|
||||
* 注意：
|
||||
* 此部分内容，在vue-cli模式下，需要在vue.config.js加入如下内容才有效：
|
||||
* module.exports = {
|
||||
* transpileDependencies: ['uview-v2']
|
||||
* }
|
||||
*/
|
||||
|
||||
let platform = 'none'
|
||||
|
||||
// #ifdef VUE3
|
||||
platform = 'vue3'
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE2
|
||||
platform = 'vue2'
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
platform = 'plus'
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
platform = 'nvue'
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
platform = 'h5'
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
platform = 'weixin'
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-ALIPAY
|
||||
platform = 'alipay'
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-BAIDU
|
||||
platform = 'baidu'
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-TOUTIAO
|
||||
platform = 'toutiao'
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-QQ
|
||||
platform = 'qq'
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-KUAISHOU
|
||||
platform = 'kuaishou'
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-360
|
||||
platform = '360'
|
||||
// #endif
|
||||
|
||||
// #ifdef MP
|
||||
platform = 'mp'
|
||||
// #endif
|
||||
|
||||
// #ifdef QUICKAPP-WEBVIEW
|
||||
platform = 'quickapp-webview'
|
||||
// #endif
|
||||
|
||||
// #ifdef QUICKAPP-WEBVIEW-HUAWEI
|
||||
platform = 'quickapp-webview-huawei'
|
||||
// #endif
|
||||
|
||||
// #ifdef QUICKAPP-WEBVIEW-UNION
|
||||
platform = 'quckapp-webview-union'
|
||||
// #endif
|
||||
|
||||
export default platform
|
||||
@@ -0,0 +1,287 @@
|
||||
/**
|
||||
* 验证电子邮箱格式
|
||||
*/
|
||||
function email(value) {
|
||||
return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证手机格式
|
||||
*/
|
||||
function mobile(value) {
|
||||
return /^1([3589]\d|4[5-9]|6[1-2,4-7]|7[0-8])\d{8}$/.test(value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证URL格式
|
||||
*/
|
||||
function url(value) {
|
||||
return /^((https|http|ftp|rtsp|mms):\/\/)(([0-9a-zA-Z_!~*'().&=+$%-]+: )?[0-9a-zA-Z_!~*'().&=+$%-]+@)?(([0-9]{1,3}.){3}[0-9]{1,3}|([0-9a-zA-Z_!~*'()-]+.)*([0-9a-zA-Z][0-9a-zA-Z-]{0,61})?[0-9a-zA-Z].[a-zA-Z]{2,6})(:[0-9]{1,4})?((\/?)|(\/[0-9a-zA-Z_!~*'().;?:@&=+$,%#-]+)+\/?)$/
|
||||
.test(value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证日期格式
|
||||
*/
|
||||
function date(value) {
|
||||
if (!value) return false
|
||||
// 判断是否数值或者字符串数值(意味着为时间戳)，转为数值，否则new Date无法识别字符串时间戳
|
||||
if (number(value)) value = +value
|
||||
return !/Invalid|NaN/.test(new Date(value).toString())
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证ISO类型的日期格式
|
||||
*/
|
||||
function dateISO(value) {
|
||||
return /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test(value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证十进制数字
|
||||
*/
|
||||
function number(value) {
|
||||
return /^[\+-]?(\d+\.?\d*|\.\d+|\d\.\d+e\+\d+)$/.test(value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证字符串
|
||||
*/
|
||||
function string(value) {
|
||||
return typeof value === 'string'
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证整数
|
||||
*/
|
||||
function digits(value) {
|
||||
return /^\d+$/.test(value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证身份证号码
|
||||
*/
|
||||
function idCard(value) {
|
||||
return /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(
|
||||
value
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否车牌号
|
||||
*/
|
||||
function carNo(value) {
|
||||
// 新能源车牌
|
||||
const xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/
|
||||
// 旧车牌
|
||||
const creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/
|
||||
if (value.length === 7) {
|
||||
return creg.test(value)
|
||||
} if (value.length === 8) {
|
||||
return xreg.test(value)
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
/**
|
||||
* 金额,只允许2位小数
|
||||
*/
|
||||
function amount(value) {
|
||||
// 金额，只允许保留两位小数
|
||||
return /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 中文
|
||||
*/
|
||||
function chinese(value) {
|
||||
const reg = /^[\u4e00-\u9fa5]+$/gi
|
||||
return reg.test(value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 只能输入字母
|
||||
*/
|
||||
function letter(value) {
|
||||
return /^[a-zA-Z]*$/.test(value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 只能是字母或者数字
|
||||
*/
|
||||
function enOrNum(value) {
|
||||
// 英文或者数字
|
||||
const reg = /^[0-9a-zA-Z]*$/g
|
||||
return reg.test(value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证是否包含某个值
|
||||
*/
|
||||
function contains(value, param) {
|
||||
return value.indexOf(param) >= 0
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证一个值范围[min, max]
|
||||
*/
|
||||
function range(value, param) {
|
||||
return value >= param[0] && value <= param[1]
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证一个长度范围[min, max]
|
||||
*/
|
||||
function rangeLength(value, param) {
|
||||
return value.length >= param[0] && value.length <= param[1]
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否固定电话
|
||||
*/
|
||||
function landline(value) {
|
||||
const reg = /^\d{3,4}-\d{7,8}(-\d{3,4})?$/
|
||||
return reg.test(value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否为空
|
||||
*/
|
||||
function empty(value) {
|
||||
switch (typeof value) {
|
||||
case 'undefined':
|
||||
return true
|
||||
case 'string':
|
||||
if (value.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length == 0) return true
|
||||
break
|
||||
case 'boolean':
|
||||
if (!value) return true
|
||||
break
|
||||
case 'number':
|
||||
if (value === 0 || isNaN(value)) return true
|
||||
break
|
||||
case 'object':
|
||||
if (value === null || value.length === 0) return true
|
||||
for (const i in value) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否json字符串
|
||||
*/
|
||||
function jsonString(value) {
|
||||
if (typeof value === 'string') {
|
||||
try {
|
||||
const obj = JSON.parse(value)
|
||||
if (typeof obj === 'object' && obj) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
} catch (e) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否数组
|
||||
*/
|
||||
function array(value) {
|
||||
if (typeof Array.isArray === 'function') {
|
||||
return Array.isArray(value)
|
||||
}
|
||||
return Object.prototype.toString.call(value) === '[object Array]'
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否对象
|
||||
*/
|
||||
function object(value) {
|
||||
return Object.prototype.toString.call(value) === '[object Object]'
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否短信验证码
|
||||
*/
|
||||
function code(value, len = 6) {
|
||||
return new RegExp(`^\\d{${len}}$`).test(value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否函数方法
|
||||
* @param {Object} value
|
||||
*/
|
||||
function func(value) {
|
||||
return typeof value === 'function'
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否promise对象
|
||||
* @param {Object} value
|
||||
*/
|
||||
function promise(value) {
|
||||
return object(value) && func(value.then) && func(value.catch)
|
||||
}
|
||||
|
||||
/** 是否图片格式
|
||||
* @param {Object} value
|
||||
*/
|
||||
function image(value) {
|
||||
const newValue = value.split('?')[0]
|
||||
const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i
|
||||
return IMAGE_REGEXP.test(newValue)
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否视频格式
|
||||
* @param {Object} value
|
||||
*/
|
||||
function video(value) {
|
||||
const VIDEO_REGEXP = /\.(mp4|mpg|mpeg|dat|asf|avi|rm|rmvb|mov|wmv|flv|mkv|m3u8)/i
|
||||
return VIDEO_REGEXP.test(value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否为正则对象
|
||||
* @param {Object}
|
||||
* @return {Boolean}
|
||||
*/
|
||||
function regExp(o) {
|
||||
return o && Object.prototype.toString.call(o) === '[object RegExp]'
|
||||
}
|
||||
|
||||
export {
|
||||
email,
|
||||
mobile,
|
||||
url,
|
||||
date,
|
||||
dateISO,
|
||||
number,
|
||||
digits,
|
||||
idCard,
|
||||
carNo,
|
||||
amount,
|
||||
chinese,
|
||||
letter,
|
||||
enOrNum,
|
||||
contains,
|
||||
range,
|
||||
rangeLength,
|
||||
empty,
|
||||
jsonString,
|
||||
landline,
|
||||
object,
|
||||
array,
|
||||
code,
|
||||
func,
|
||||
promise,
|
||||
video,
|
||||
image,
|
||||
regExp,
|
||||
string
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
let timer; let
|
||||
flag
|
||||
/**
|
||||
* 节流原理：在一定时间内，只能触发一次
|
||||
*
|
||||
* @param {Function} func 要执行的回调函数
|
||||
* @param {Number} wait 延时的时间
|
||||
* @param {Boolean} immediate 是否立即执行
|
||||
* @return null
|
||||
*/
|
||||
function throttle(func, wait = 500, immediate = true) {
|
||||
if (immediate) {
|
||||
if (!flag) {
|
||||
flag = true
|
||||
// 如果是立即执行，则在wait毫秒内开始时执行
|
||||
typeof func === 'function' && func()
|
||||
timer = setTimeout(() => {
|
||||
flag = false
|
||||
}, wait)
|
||||
}
|
||||
} else if (!flag) {
|
||||
flag = true
|
||||
// 如果是非立即执行，则在wait毫秒内的结束处执行
|
||||
timer = setTimeout(() => {
|
||||
flag = false
|
||||
typeof func === 'function' && func()
|
||||
}, wait)
|
||||
}
|
||||
}
|
||||
export default throttle
|
||||
@@ -0,0 +1,132 @@
|
||||
import buildURL from '../helpers/buildURL'
|
||||
import buildFullPath from '../core/buildFullPath'
|
||||
import settle from '../core/settle'
|
||||
import {isUndefined} from "../utils"
|
||||
|
||||
/**
|
||||
* 返回可选值存在的配置
|
||||
* @param {Array} keys - 可选值数组
|
||||
* @param {Object} config2 - 配置
|
||||
* @return {{}} - 存在的配置项
|
||||
*/
|
||||
const mergeKeys = (keys, config2) => {
|
||||
let config = {}
|
||||
keys.forEach(prop => {
|
||||
if (!isUndefined(config2[prop])) {
|
||||
config[prop] = config2[prop]
|
||||
}
|
||||
})
|
||||
return config
|
||||
}
|
||||
export default (config) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
let fullPath = buildURL(buildFullPath(config.baseURL, config.url), config.params, config.paramsSerializer)
|
||||
const _config = {
|
||||
url: fullPath,
|
||||
header: config.header,
|
||||
complete: (response) => {
|
||||
config.fullPath = fullPath
|
||||
response.config = config
|
||||
response.rawData = response.data
|
||||
try {
|
||||
let jsonParseHandle = false
|
||||
const forcedJSONParsingType = typeof config.forcedJSONParsing
|
||||
if (forcedJSONParsingType === 'boolean') {
|
||||
jsonParseHandle = config.forcedJSONParsing
|
||||
} else if (forcedJSONParsingType === 'object') {
|
||||
const includesMethod = config.forcedJSONParsing.include || []
|
||||
jsonParseHandle = includesMethod.includes(config.method)
|
||||
}
|
||||
|
||||
// 对可能字符串不是json 的情况容错
|
||||
if (jsonParseHandle && typeof response.data === 'string') {
|
||||
response.data = JSON.parse(response.data)
|
||||
}
|
||||
// eslint-disable-next-line no-empty
|
||||
} catch (e) {
|
||||
}
|
||||
settle(resolve, reject, response)
|
||||
}
|
||||
}
|
||||
let requestTask
|
||||
if (config.method === 'UPLOAD') {
|
||||
delete _config.header['content-type']
|
||||
delete _config.header['Content-Type']
|
||||
let otherConfig = {
|
||||
// #ifdef MP-ALIPAY
|
||||
fileType: config.fileType,
|
||||
// #endif
|
||||
filePath: config.filePath,
|
||||
name: config.name
|
||||
}
|
||||
const optionalKeys = [
|
||||
// #ifdef APP-PLUS || H5
|
||||
'files',
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
'file',
|
||||
// #endif
|
||||
// #ifdef H5 || APP-PLUS || MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO || MP-KUAISHOU
|
||||
'timeout',
|
||||
// #endif
|
||||
'formData'
|
||||
]
|
||||
requestTask = uni.uploadFile({..._config, ...otherConfig, ...mergeKeys(optionalKeys, config)})
|
||||
} else if (config.method === 'DOWNLOAD') {
|
||||
const optionalKeys = [
|
||||
// #ifdef H5 || APP-PLUS || MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO || MP-KUAISHOU
|
||||
'timeout',
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
'filePath',
|
||||
// #endif
|
||||
]
|
||||
requestTask = uni.downloadFile({..._config, ...mergeKeys(optionalKeys, config)})
|
||||
} else {
|
||||
const optionalKeys = [
|
||||
'data',
|
||||
'method',
|
||||
// #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
|
||||
'timeout',
|
||||
// #endif
|
||||
'dataType',
|
||||
// #ifndef MP-ALIPAY
|
||||
'responseType',
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
'sslVerify',
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
'withCredentials',
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
'firstIpv4',
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
'enableHttp2',
|
||||
'enableQuic',
|
||||
// #endif
|
||||
// #ifdef MP-TOUTIAO || MP-WEIXIN
|
||||
'enableCache',
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
'enableHttpDNS',
|
||||
'httpDNSServiceId',
|
||||
'enableChunked',
|
||||
'forceCellularNetwork',
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
'enableCookie',
|
||||
// #endif
|
||||
// #ifdef MP-BAIDU
|
||||
'cloudCache',
|
||||
'defer'
|
||||
// #endif
|
||||
]
|
||||
requestTask = uni.request({..._config, ...mergeKeys(optionalKeys, config)})
|
||||
}
|
||||
if (config.getTask) {
|
||||
config.getTask(requestTask, config)
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
'use strict'
|
||||
|
||||
|
||||
function InterceptorManager() {
|
||||
this.handlers = []
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a new interceptor to the stack
|
||||
*
|
||||
* @param {Function} fulfilled The function to handle `then` for a `Promise`
|
||||
* @param {Function} rejected The function to handle `reject` for a `Promise`
|
||||
*
|
||||
* @return {Number} An ID used to remove interceptor later
|
||||
*/
|
||||
InterceptorManager.prototype.use = function use(fulfilled, rejected) {
|
||||
this.handlers.push({
|
||||
fulfilled: fulfilled,
|
||||
rejected: rejected
|
||||
})
|
||||
return this.handlers.length - 1
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove an interceptor from the stack
|
||||
*
|
||||
* @param {Number} id The ID that was returned by `use`
|
||||
*/
|
||||
InterceptorManager.prototype.eject = function eject(id) {
|
||||
if (this.handlers[id]) {
|
||||
this.handlers[id] = null
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Iterate over all the registered interceptors
|
||||
*
|
||||
* This method is particularly useful for skipping over any
|
||||
* interceptors that may have become `null` calling `eject`.
|
||||
*
|
||||
* @param {Function} fn The function to call for each interceptor
|
||||
*/
|
||||
InterceptorManager.prototype.forEach = function forEach(fn) {
|
||||
this.handlers.forEach(h => {
|
||||
if (h !== null) {
|
||||
fn(h)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export default InterceptorManager
|
||||
@@ -0,0 +1,201 @@
|
||||
/**
|
||||
* @Class Request
|
||||
* @description luch-request http请求插件
|
||||
* @Author lu-ch
|
||||
* @Email webwork.s@qq.com
|
||||
* 文档: https://www.quanzhan.co/luch-request/
|
||||
* github: https://github.com/lei-mu/luch-request
|
||||
* DCloud: http://ext.dcloud.net.cn/plugin?id=392
|
||||
*/
|
||||
|
||||
|
||||
import dispatchRequest from './dispatchRequest'
|
||||
import InterceptorManager from './InterceptorManager'
|
||||
import mergeConfig from './mergeConfig'
|
||||
import defaults from './defaults'
|
||||
import { isPlainObject } from '../utils'
|
||||
import clone from '../utils/clone'
|
||||
|
||||
export default class Request {
|
||||
/**
|
||||
* @param {Object} arg - 全局配置
|
||||
* @param {String} arg.baseURL - 全局根路径
|
||||
* @param {Object} arg.header - 全局header
|
||||
* @param {String} arg.method = [GET|POST|PUT|DELETE|CONNECT|HEAD|OPTIONS|TRACE] - 全局默认请求方式
|
||||
* @param {String} arg.dataType = [json] - 全局默认的dataType
|
||||
* @param {String} arg.responseType = [text|arraybuffer] - 全局默认的responseType。支付宝小程序不支持
|
||||
* @param {Object} arg.custom - 全局默认的自定义参数
|
||||
* @param {Number} arg.timeout - 全局默认的超时时间，单位 ms。默认60000。H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序
|
||||
* @param {Boolean} arg.sslVerify - 全局默认的是否验证 ssl 证书。默认true.仅App安卓端支持（HBuilderX 2.3.3+）
|
||||
* @param {Boolean} arg.withCredentials - 全局默认的跨域请求时是否携带凭证（cookies）。默认false。仅H5支持（HBuilderX 2.6.15+）
|
||||
* @param {Boolean} arg.firstIpv4 - 全DNS解析时优先使用ipv4。默认false。仅 App-Android 支持 (HBuilderX 2.8.0+)
|
||||
* @param {Function(statusCode):Boolean} arg.validateStatus - 全局默认的自定义验证器。默认statusCode >= 200 && statusCode < 300
|
||||
*/
|
||||
constructor(arg = {}) {
|
||||
if (!isPlainObject(arg)) {
|
||||
arg = {}
|
||||
console.warn('设置全局参数必须接收一个Object')
|
||||
}
|
||||
this.config = clone({...defaults, ...arg})
|
||||
this.interceptors = {
|
||||
request: new InterceptorManager(),
|
||||
response: new InterceptorManager()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @Function
|
||||
* @param {Request~setConfigCallback} f - 设置全局默认配置
|
||||
*/
|
||||
setConfig(f) {
|
||||
this.config = f(this.config)
|
||||
}
|
||||
|
||||
middleware(config) {
|
||||
config = mergeConfig(this.config, config)
|
||||
let chain = [dispatchRequest, undefined]
|
||||
let promise = Promise.resolve(config)
|
||||
|
||||
this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
|
||||
chain.unshift(interceptor.fulfilled, interceptor.rejected)
|
||||
})
|
||||
|
||||
this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
|
||||
chain.push(interceptor.fulfilled, interceptor.rejected)
|
||||
})
|
||||
|
||||
while (chain.length) {
|
||||
promise = promise.then(chain.shift(), chain.shift())
|
||||
}
|
||||
|
||||
return promise
|
||||
}
|
||||
|
||||
/**
|
||||
* @Function
|
||||
* @param {Object} config - 请求配置项
|
||||
* @prop {String} options.url - 请求路径
|
||||
* @prop {Object} options.data - 请求参数
|
||||
* @prop {Object} [options.responseType = config.responseType] [text|arraybuffer] - 响应的数据类型
|
||||
* @prop {Object} [options.dataType = config.dataType] - 如果设为 json，会尝试对返回的数据做一次 JSON.parse
|
||||
* @prop {Object} [options.header = config.header] - 请求header
|
||||
* @prop {Object} [options.method = config.method] - 请求方法
|
||||
* @returns {Promise<unknown>}
|
||||
*/
|
||||
request(config = {}) {
|
||||
return this.middleware(config)
|
||||
}
|
||||
|
||||
get(url, options = {}) {
|
||||
return this.middleware({
|
||||
url,
|
||||
method: 'GET',
|
||||
...options
|
||||
})
|
||||
}
|
||||
|
||||
post(url, data, options = {}) {
|
||||
return this.middleware({
|
||||
url,
|
||||
data,
|
||||
method: 'POST',
|
||||
...options
|
||||
})
|
||||
}
|
||||
|
||||
// #ifndef MP-ALIPAY || MP-KUAISHOU || MP-JD
|
||||
put(url, data, options = {}) {
|
||||
return this.middleware({
|
||||
url,
|
||||
data,
|
||||
method: 'PUT',
|
||||
...options
|
||||
})
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-BAIDU
|
||||
delete(url, data, options = {}) {
|
||||
return this.middleware({
|
||||
url,
|
||||
data,
|
||||
method: 'DELETE',
|
||||
...options
|
||||
})
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
// #ifdef H5 || MP-WEIXIN
|
||||
connect(url, data, options = {}) {
|
||||
return this.middleware({
|
||||
url,
|
||||
data,
|
||||
method: 'CONNECT',
|
||||
...options
|
||||
})
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
// #ifdef H5 || MP-WEIXIN || MP-BAIDU
|
||||
head(url, data, options = {}) {
|
||||
return this.middleware({
|
||||
url,
|
||||
data,
|
||||
method: 'HEAD',
|
||||
...options
|
||||
})
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-BAIDU
|
||||
options(url, data, options = {}) {
|
||||
return this.middleware({
|
||||
url,
|
||||
data,
|
||||
method: 'OPTIONS',
|
||||
...options
|
||||
})
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
// #ifdef H5 || MP-WEIXIN
|
||||
trace(url, data, options = {}) {
|
||||
return this.middleware({
|
||||
url,
|
||||
data,
|
||||
method: 'TRACE',
|
||||
...options
|
||||
})
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
upload(url, config = {}) {
|
||||
config.url = url
|
||||
config.method = 'UPLOAD'
|
||||
return this.middleware(config)
|
||||
}
|
||||
|
||||
download(url, config = {}) {
|
||||
config.url = url
|
||||
config.method = 'DOWNLOAD'
|
||||
return this.middleware(config)
|
||||
}
|
||||
|
||||
get version () {
|
||||
return '3.1.0'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* setConfig回调
|
||||
* @return {Object} - 返回操作后的config
|
||||
* @callback Request~setConfigCallback
|
||||
* @param {Object} config - 全局默认config
|
||||
*/
|
||||
@@ -0,0 +1,20 @@
|
||||
'use strict'
|
||||
|
||||
import isAbsoluteURL from '../helpers/isAbsoluteURL'
|
||||
import combineURLs from '../helpers/combineURLs'
|
||||
|
||||
/**
|
||||
* Creates a new URL by combining the baseURL with the requestedURL,
|
||||
* only when the requestedURL is not already an absolute URL.
|
||||
* If the requestURL is absolute, this function returns the requestedURL untouched.
|
||||
*
|
||||
* @param {string} baseURL The base URL
|
||||
* @param {string} requestedURL Absolute or relative URL to combine
|
||||
* @returns {string} The combined full path
|
||||
*/
|
||||
export default function buildFullPath(baseURL, requestedURL) {
|
||||
if (baseURL && !isAbsoluteURL(requestedURL)) {
|
||||
return combineURLs(baseURL, requestedURL)
|
||||
}
|
||||
return requestedURL
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
/**
|
||||
* 默认的全局配置
|
||||
*/
|
||||
|
||||
|
||||
export default {
|
||||
baseURL: '',
|
||||
header: {},
|
||||
method: 'GET',
|
||||
dataType: 'json',
|
||||
paramsSerializer: null,
|
||||
// #ifndef MP-ALIPAY
|
||||
responseType: 'text',
|
||||
// #endif
|
||||
custom: {},
|
||||
// #ifdef H5 || APP-PLUS || MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO || MP-KUAISHOU
|
||||
timeout: 60000,
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
sslVerify: true,
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
withCredentials: false,
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
firstIpv4: false,
|
||||
// #endif
|
||||
validateStatus: function validateStatus(status) {
|
||||
return status >= 200 && status < 300
|
||||
},
|
||||
// 是否尝试将响应数据json化
|
||||
forcedJSONParsing: true
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import adapter from '../adapters/index'
|
||||
|
||||
|
||||
export default (config) => {
|
||||
return adapter(config)
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
import {deepMerge, isUndefined} from '../utils'
|
||||
|
||||
/**
|
||||
* 合并局部配置优先的配置，如果局部有该配置项则用局部，如果全局有该配置项则用全局
|
||||
* @param {Array} keys - 配置项
|
||||
* @param {Object} globalsConfig - 当前的全局配置
|
||||
* @param {Object} config2 - 局部配置
|
||||
* @return {{}}
|
||||
*/
|
||||
const mergeKeys = (keys, globalsConfig, config2) => {
|
||||
let config = {}
|
||||
keys.forEach(prop => {
|
||||
if (!isUndefined(config2[prop])) {
|
||||
config[prop] = config2[prop]
|
||||
} else if (!isUndefined(globalsConfig[prop])) {
|
||||
config[prop] = globalsConfig[prop]
|
||||
}
|
||||
})
|
||||
return config
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @param globalsConfig - 当前实例的全局配置
|
||||
* @param config2 - 当前的局部配置
|
||||
* @return - 合并后的配置
|
||||
*/
|
||||
export default (globalsConfig, config2 = {}) => {
|
||||
const method = config2.method || globalsConfig.method || 'GET'
|
||||
let config = {
|
||||
baseURL: config2.baseURL || globalsConfig.baseURL || '',
|
||||
method: method,
|
||||
url: config2.url || '',
|
||||
params: config2.params || {},
|
||||
custom: {...(globalsConfig.custom || {}), ...(config2.custom || {})},
|
||||
header: deepMerge(globalsConfig.header || {}, config2.header || {})
|
||||
}
|
||||
const defaultToConfig2Keys = ['getTask', 'validateStatus', 'paramsSerializer', 'forcedJSONParsing']
|
||||
config = {...config, ...mergeKeys(defaultToConfig2Keys, globalsConfig, config2)}
|
||||
|
||||
// eslint-disable-next-line no-empty
|
||||
if (method === 'DOWNLOAD') {
|
||||
const downloadKeys = [
|
||||
// #ifdef H5 || APP-PLUS || MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO || MP-KUAISHOU
|
||||
'timeout',
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
'filePath',
|
||||
// #endif
|
||||
]
|
||||
config = {...config, ...mergeKeys(downloadKeys, globalsConfig, config2)}
|
||||
} else if (method === 'UPLOAD') {
|
||||
delete config.header['content-type']
|
||||
delete config.header['Content-Type']
|
||||
const uploadKeys = [
|
||||
// #ifdef APP-PLUS || H5
|
||||
'files',
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
'fileType',
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
'file',
|
||||
// #endif
|
||||
'filePath',
|
||||
'name',
|
||||
// #ifdef H5 || APP-PLUS || MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO || MP-KUAISHOU
|
||||
'timeout',
|
||||
// #endif
|
||||
'formData',
|
||||
]
|
||||
uploadKeys.forEach(prop => {
|
||||
if (!isUndefined(config2[prop])) {
|
||||
config[prop] = config2[prop]
|
||||
}
|
||||
})
|
||||
// #ifdef H5 || APP-PLUS || MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO || MP-KUAISHOU
|
||||
if (isUndefined(config.timeout) && !isUndefined(globalsConfig.timeout)) {
|
||||
config['timeout'] = globalsConfig['timeout']
|
||||
}
|
||||
// #endif
|
||||
} else {
|
||||
const defaultsKeys = [
|
||||
'data',
|
||||
// #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
|
||||
'timeout',
|
||||
// #endif
|
||||
'dataType',
|
||||
// #ifndef MP-ALIPAY
|
||||
'responseType',
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
'sslVerify',
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
'withCredentials',
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
'firstIpv4',
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
'enableHttp2',
|
||||
'enableQuic',
|
||||
// #endif
|
||||
// #ifdef MP-TOUTIAO || MP-WEIXIN
|
||||
'enableCache',
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
'enableHttpDNS',
|
||||
'httpDNSServiceId',
|
||||
'enableChunked',
|
||||
'forceCellularNetwork',
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
'enableCookie',
|
||||
// #endif
|
||||
// #ifdef MP-BAIDU
|
||||
'cloudCache',
|
||||
'defer'
|
||||
// #endif
|
||||
|
||||
]
|
||||
config = {...config, ...mergeKeys(defaultsKeys, globalsConfig, config2)}
|
||||
}
|
||||
|
||||
return config
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
/**
|
||||
* Resolve or reject a Promise based on response status.
|
||||
*
|
||||
* @param {Function} resolve A function that resolves the promise.
|
||||
* @param {Function} reject A function that rejects the promise.
|
||||
* @param {object} response The response.
|
||||
*/
|
||||
export default function settle(resolve, reject, response) {
|
||||
const validateStatus = response.config.validateStatus
|
||||
const status = response.statusCode
|
||||
if (status && (!validateStatus || validateStatus(status))) {
|
||||
resolve(response)
|
||||
} else {
|
||||
reject(response)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
'use strict'
|
||||
|
||||
import * as utils from './../utils'
|
||||
|
||||
function encode(val) {
|
||||
return encodeURIComponent(val).replace(/%40/gi, '@').replace(/%3A/gi, ':').replace(/%24/g, '$').replace(/%2C/gi, ',').replace(/%20/g, '+').replace(/%5B/gi, '[').replace(/%5D/gi, ']')
|
||||
}
|
||||
|
||||
/**
|
||||
* Build a URL by appending params to the end
|
||||
*
|
||||
* @param {string} url The base of the url (e.g., http://www.google.com)
|
||||
* @param {object} [params] The params to be appended
|
||||
* @returns {string} The formatted url
|
||||
*/
|
||||
export default function buildURL(url, params, paramsSerializer) {
|
||||
/*eslint no-param-reassign:0*/
|
||||
if (!params) {
|
||||
return url
|
||||
}
|
||||
|
||||
var serializedParams
|
||||
if (paramsSerializer) {
|
||||
serializedParams = paramsSerializer(params)
|
||||
} else if (utils.isURLSearchParams(params)) {
|
||||
serializedParams = params.toString()
|
||||
} else {
|
||||
var parts = []
|
||||
|
||||
utils.forEach(params, function serialize(val, key) {
|
||||
if (val === null || typeof val === 'undefined') {
|
||||
return
|
||||
}
|
||||
|
||||
if (utils.isArray(val)) {
|
||||
key = key + '[]'
|
||||
} else {
|
||||
val = [val]
|
||||
}
|
||||
|
||||
utils.forEach(val, function parseValue(v) {
|
||||
if (utils.isDate(v)) {
|
||||
v = v.toISOString()
|
||||
} else if (utils.isObject(v)) {
|
||||
v = JSON.stringify(v)
|
||||
}
|
||||
parts.push(encode(key) + '=' + encode(v))
|
||||
})
|
||||
})
|
||||
|
||||
serializedParams = parts.join('&')
|
||||
}
|
||||
|
||||
if (serializedParams) {
|
||||
var hashmarkIndex = url.indexOf('#')
|
||||
if (hashmarkIndex !== -1) {
|
||||
url = url.slice(0, hashmarkIndex)
|
||||
}
|
||||
|
||||
url += (url.indexOf('?') === -1 ? '?' : '&') + serializedParams
|
||||
}
|
||||
|
||||
return url
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
'use strict'
|
||||
|
||||
/**
|
||||
* Creates a new URL by combining the specified URLs
|
||||
*
|
||||
* @param {string} baseURL The base URL
|
||||
* @param {string} relativeURL The relative URL
|
||||
* @returns {string} The combined URL
|
||||
*/
|
||||
export default function combineURLs(baseURL, relativeURL) {
|
||||
return relativeURL
|
||||
? baseURL.replace(/\/+$/, '') + '/' + relativeURL.replace(/^\/+/, '')
|
||||
: baseURL
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
'use strict'
|
||||
|
||||
/**
|
||||
* Determines whether the specified URL is absolute
|
||||
*
|
||||
* @param {string} url The URL to test
|
||||
* @returns {boolean} True if the specified URL is absolute, otherwise false
|
||||
*/
|
||||
export default function isAbsoluteURL(url) {
|
||||
// A URL is considered absolute if it begins with "<scheme>://" or "//" (protocol-relative URL).
|
||||
// RFC 3986 defines scheme name as a sequence of characters beginning with a letter and followed
|
||||
// by any combination of letters, digits, plus, period, or hyphen.
|
||||
return /^([a-z][a-z\d+\-.]*:)?\/\//i.test(url)
|
||||
}
|
||||
197
CoreCms.Net.Uni-App/CoreShop/uni_modules/uv-ui-tools/libs/luch-request/index.d.ts
vendored
Normal file
197
CoreCms.Net.Uni-App/CoreShop/uni_modules/uv-ui-tools/libs/luch-request/index.d.ts
vendored
Normal file
@@ -0,0 +1,197 @@
|
||||
export type HttpTask = UniApp.RequestTask | UniApp.UploadTask | UniApp.DownloadTask;
|
||||
|
||||
export type HttpRequestTask = UniApp.RequestTask;
|
||||
|
||||
export type HttpUploadTask = UniApp.UploadTask;
|
||||
|
||||
export type HttpDownloadTask = UniApp.DownloadTask;
|
||||
|
||||
export type HttpMethod =
|
||||
"GET"
|
||||
| "POST"
|
||||
| "PUT"
|
||||
| "DELETE"
|
||||
| "CONNECT"
|
||||
| "HEAD"
|
||||
| "OPTIONS"
|
||||
| "TRACE"
|
||||
| "UPLOAD"
|
||||
| "DOWNLOAD";
|
||||
|
||||
export type HttpRequestHeader = Record<string, string>;
|
||||
|
||||
export type HttpParams = Record<string, any>;
|
||||
|
||||
export type HttpData = Record<string, any>;
|
||||
|
||||
export type HttpResponseType = 'arraybuffer' | 'text';
|
||||
|
||||
export type HttpCustom = Record<string, any>;
|
||||
|
||||
export type HttpFileType = 'image' | 'video' | 'audio';
|
||||
|
||||
export type HttpFormData = Record<string, any>;
|
||||
|
||||
export type HttpResponseHeader = Record<string, string> & {
|
||||
"set-cookie"?: string[]
|
||||
};
|
||||
|
||||
export interface HttpRequestConfig<T = HttpTask> {
|
||||
/** @desc 请求服务器接口地址 */
|
||||
url?: string;
|
||||
/** @desc 请求方式，默认为 GET */
|
||||
method?: HttpMethod;
|
||||
/** @desc 请求基地址 */
|
||||
baseURL?: string;
|
||||
/** @desc 请求头信息，不能设置 Referer，App、H5 端会自动带上 cookie，且 H5 端不可手动修改 */
|
||||
header?: HttpRequestHeader;
|
||||
/** @desc 请求查询参数，自动拼接为查询字符串 */
|
||||
params?: HttpParams;
|
||||
/** @desc 请求体参数 */
|
||||
data?: HttpData;
|
||||
/** @desc 超时时间，单位 ms，默认为 60000，仅 H5 (HBuilderX 2.9.9+)、APP (HBuilderX 2.9.9+)、微信小程序 (2.10.0)、支付宝小程序支持 */
|
||||
timeout?: number;
|
||||
/** @desc 跨域请求时是否携带凭证 (cookies)，默认为 false，仅 H5 (HBuilderX 2.6.15+) 支持 */
|
||||
withCredentials?: boolean;
|
||||
/** @desc 设置响应的数据类型，支付宝小程序不支持 */
|
||||
responseType?: HttpResponseType;
|
||||
/** @desc 全局自定义验证器 */
|
||||
validateStatus?: ((statusCode: number) => boolean) | null;
|
||||
|
||||
|
||||
/** params 参数自定义处理 */
|
||||
paramsSerializer?: (params: AnyObject) => string | void;
|
||||
|
||||
/** @desc 默认为 json，如果设为 json，会尝试对返回的数据做一次 JSON.parse */
|
||||
dataType?: string;
|
||||
/** @desc DNS 解析时是否优先使用 ipv4，默认为 false，仅 App-Android (HBuilderX 2.8.0+) 支持 */
|
||||
firstIpv4?: boolean;
|
||||
/** @desc 是否验证 SSL 证书，默认为 true，仅 App-Android (HBuilderX 2.3.3+) 支持 */
|
||||
sslVerify?: boolean;
|
||||
|
||||
/** @desc 开启 http2;微信小程序 */
|
||||
enableHttp2?: boolean;
|
||||
|
||||
/** @desc 开启 quic；微信小程序 */
|
||||
enableQuic?: boolean;
|
||||
/** @desc 开启 cache;微信小程序、字节跳动小程序 2.31.0+ */
|
||||
enableCache?: boolean;
|
||||
/** @desc 开启 httpDNS;微信小程序 */
|
||||
enableHttpDNS?: boolean;
|
||||
/** @desc httpDNS 服务商；微信小程序 */
|
||||
httpDNSServiceId?: string;
|
||||
/** @desc 开启 transfer-encoding chunked;微信小程序 */
|
||||
enableChunked?: boolean;
|
||||
/** @desc wifi下使用移动网络发送请求;微信小程序 */
|
||||
forceCellularNetwork?: boolean;
|
||||
/** @desc 开启后可在headers中编辑cookie;支付宝小程序 10.2.33+ */
|
||||
enableCookie?: boolean;
|
||||
/** @desc 是否开启云加速;百度小程序 3.310.11+ */
|
||||
cloudCache?: boolean | object;
|
||||
/** @desc 控制当前请求是否延时至首屏内容渲染后发送；百度小程序 3.310.11+ */
|
||||
defer?: boolean;
|
||||
|
||||
/** @desc 自定义参数 */
|
||||
custom?: HttpCustom;
|
||||
|
||||
/** @desc 返回当前请求的 task 和 options，不要在这里修改 options */
|
||||
getTask?: (task: T, options: HttpRequestConfig<T>) => void;
|
||||
|
||||
/** @desc 需要上传的文件列表，使用 files 时，filePath 和 name 不生效，仅支持 App、H5 (2.6.15+) */
|
||||
files?: { name?: string; file?: File; uri: string; }[];
|
||||
/** @desc 文件类型，仅支付宝小程序支持且为必填项 */
|
||||
fileType?: HttpFileType;
|
||||
/** @desc 要上传的文件对象，仅 H5 (2.6.15+) 支持 */
|
||||
file?: File;
|
||||
/** @desc 要上传文件资源的路径，使用 files 时，filePath 和 name 不生效 */
|
||||
filePath?: string;
|
||||
/** @desc 文件对应的 key，开发者在服务器端通过这个 key 可以获取到文件二进制内容，使用 files 时，filePath 和 name 不生效 */
|
||||
name?: string;
|
||||
/** @desc 请求中其他额外的 form data */
|
||||
formData?: HttpFormData;
|
||||
}
|
||||
|
||||
export interface HttpResponse<T = any, D = HttpTask> {
|
||||
data: T;
|
||||
statusCode: number;
|
||||
header: HttpResponseHeader;
|
||||
config: HttpRequestConfig<D>;
|
||||
cookies: string[];
|
||||
errMsg: string;
|
||||
rawData: any;
|
||||
}
|
||||
|
||||
export interface HttpUploadResponse<T = any, D = HttpTask> {
|
||||
data: T;
|
||||
statusCode: number;
|
||||
config: HttpRequestConfig<D>;
|
||||
errMsg: string;
|
||||
rawData: any;
|
||||
}
|
||||
|
||||
export interface HttpDownloadResponse extends HttpResponse {
|
||||
tempFilePath: string;
|
||||
apFilePath?: string;
|
||||
filePath?: string;
|
||||
fileContent?: string;
|
||||
}
|
||||
|
||||
export interface HttpError<T = any, D = HttpTask> {
|
||||
data?: T;
|
||||
statusCode?: number;
|
||||
header?: HttpResponseHeader;
|
||||
config: HttpRequestConfig<D>;
|
||||
cookies?: string[];
|
||||
errMsg: string;
|
||||
}
|
||||
|
||||
export interface HttpPromise<T = any> extends Promise<HttpResponse<T>> {
|
||||
}
|
||||
|
||||
export interface HttpInterceptorManager<V, E = V> {
|
||||
use(onFulfilled?: (value: V) => V | Promise<V>, onRejected?: (error: E) => T | Promise<E>): void;
|
||||
|
||||
eject(id: number): void;
|
||||
}
|
||||
|
||||
export abstract class HttpRequestAbstract {
|
||||
constructor(config?: HttpRequestConfig);
|
||||
|
||||
interceptors: {
|
||||
request: HttpInterceptorManager<HttpRequestConfig>;
|
||||
response: HttpInterceptorManager<HttpResponse, HttpError>;
|
||||
}
|
||||
|
||||
request<T = any, R = HttpResponse<T>, D = HttpRequestTask>(config: HttpRequestConfig<D>): Promise<R>;
|
||||
|
||||
get<T = any, R = HttpResponse<T>, D = HttpRequestTask>(url: string, config?: HttpRequestConfig<D>): Promise<R>;
|
||||
|
||||
delete<T = any, R = HttpResponse<T>, D = HttpRequestTask>(url: string, data?: HttpData, config?: HttpRequestConfig<D>): Promise<R>;
|
||||
|
||||
head<T = any, R = HttpResponse<T>, D = HttpRequestTask>(url: string, data?: HttpData, config?: HttpRequestConfig<D>): Promise<R>;
|
||||
|
||||
options<T = any, R = HttpResponse<T>, D = HttpRequestTask>(url: string, data?: HttpData, config?: HttpRequestConfig<D>): Promise<R>;
|
||||
|
||||
post<T = any, R = HttpResponse<T>, D = HttpRequestTask>(url: string, data?: HttpData, config?: HttpRequestConfig<D>): Promise<R>;
|
||||
|
||||
put<T = any, R = HttpResponse<T>, D = HttpRequestTask>(url: string, data?: HttpData, config?: HttpRequestConfig<D>): Promise<R>;
|
||||
|
||||
config: HttpRequestConfig;
|
||||
|
||||
setConfig<D = HttpTask>(onSend: (config: HttpRequestConfig<D>) => HttpRequestConfig<D>): void;
|
||||
|
||||
connect<T = any, R = HttpResponse<T>, D = HttpRequestTask>(url: string, data?: HttpData, config?: HttpRequestConfig<D>): Promise<R>;
|
||||
|
||||
trace<T = any, R = HttpResponse<T>, D = HttpRequestTask>(url: string, data?: HttpData, config?: HttpRequestConfig<D>): Promise<R>;
|
||||
|
||||
upload<T = any, R = HttpUploadResponse<T>, D = HttpUploadTask>(url: string, config?: HttpRequestConfig<D>): Promise<R>;
|
||||
|
||||
download<T = any, R = HttpDownloadResponse<T>, D = HttpDownloadTask>(url: string, config?: HttpRequestConfig<D>): Promise<R>;
|
||||
|
||||
middleware<T = any, R = HttpResponse<T>, D = HttpTask>(config: HttpRequestConfig<D>): Promise<R>;
|
||||
}
|
||||
|
||||
declare class HttpRequest extends HttpRequestAbstract {
|
||||
}
|
||||
|
||||
export default HttpRequest;
|
||||
@@ -0,0 +1,2 @@
|
||||
import Request from './core/Request'
|
||||
export default Request
|
||||
@@ -0,0 +1,135 @@
|
||||
'use strict'
|
||||
|
||||
// utils is a library of generic helper functions non-specific to axios
|
||||
|
||||
var toString = Object.prototype.toString
|
||||
|
||||
/**
|
||||
* Determine if a value is an Array
|
||||
*
|
||||
* @param {Object} val The value to test
|
||||
* @returns {boolean} True if value is an Array, otherwise false
|
||||
*/
|
||||
export function isArray (val) {
|
||||
return toString.call(val) === '[object Array]'
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Determine if a value is an Object
|
||||
*
|
||||
* @param {Object} val The value to test
|
||||
* @returns {boolean} True if value is an Object, otherwise false
|
||||
*/
|
||||
export function isObject (val) {
|
||||
return val !== null && typeof val === 'object'
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine if a value is a Date
|
||||
*
|
||||
* @param {Object} val The value to test
|
||||
* @returns {boolean} True if value is a Date, otherwise false
|
||||
*/
|
||||
export function isDate (val) {
|
||||
return toString.call(val) === '[object Date]'
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine if a value is a URLSearchParams object
|
||||
*
|
||||
* @param {Object} val The value to test
|
||||
* @returns {boolean} True if value is a URLSearchParams object, otherwise false
|
||||
*/
|
||||
export function isURLSearchParams (val) {
|
||||
return typeof URLSearchParams !== 'undefined' && val instanceof URLSearchParams
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Iterate over an Array or an Object invoking a function for each item.
|
||||
*
|
||||
* If `obj` is an Array callback will be called passing
|
||||
* the value, index, and complete array for each item.
|
||||
*
|
||||
* If 'obj' is an Object callback will be called passing
|
||||
* the value, key, and complete object for each property.
|
||||
*
|
||||
* @param {Object|Array} obj The object to iterate
|
||||
* @param {Function} fn The callback to invoke for each item
|
||||
*/
|
||||
export function forEach (obj, fn) {
|
||||
// Don't bother if no value provided
|
||||
if (obj === null || typeof obj === 'undefined') {
|
||||
return
|
||||
}
|
||||
|
||||
// Force an array if not already something iterable
|
||||
if (typeof obj !== 'object') {
|
||||
/*eslint no-param-reassign:0*/
|
||||
obj = [obj]
|
||||
}
|
||||
|
||||
if (isArray(obj)) {
|
||||
// Iterate over array values
|
||||
for (var i = 0, l = obj.length; i < l; i++) {
|
||||
fn.call(null, obj[i], i, obj)
|
||||
}
|
||||
} else {
|
||||
// Iterate over object keys
|
||||
for (var key in obj) {
|
||||
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
||||
fn.call(null, obj[key], key, obj)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否为boolean 值
|
||||
* @param val
|
||||
* @returns {boolean}
|
||||
*/
|
||||
export function isBoolean(val) {
|
||||
return typeof val === 'boolean'
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否为真正的对象{} new Object
|
||||
* @param {any} obj - 检测的对象
|
||||
* @returns {boolean}
|
||||
*/
|
||||
export function isPlainObject(obj) {
|
||||
return Object.prototype.toString.call(obj) === '[object Object]'
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Function equal to merge with the difference being that no reference
|
||||
* to original objects is kept.
|
||||
*
|
||||
* @see merge
|
||||
* @param {Object} obj1 Object to merge
|
||||
* @returns {Object} Result of all merge properties
|
||||
*/
|
||||
export function deepMerge(/* obj1, obj2, obj3, ... */) {
|
||||
let result = {}
|
||||
function assignValue(val, key) {
|
||||
if (typeof result[key] === 'object' && typeof val === 'object') {
|
||||
result[key] = deepMerge(result[key], val)
|
||||
} else if (typeof val === 'object') {
|
||||
result[key] = deepMerge({}, val)
|
||||
} else {
|
||||
result[key] = val
|
||||
}
|
||||
}
|
||||
for (let i = 0, l = arguments.length; i < l; i++) {
|
||||
forEach(arguments[i], assignValue)
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
export function isUndefined (val) {
|
||||
return typeof val === 'undefined'
|
||||
}
|
||||
@@ -0,0 +1,264 @@
|
||||
/* eslint-disable */
|
||||
var clone = (function() {
|
||||
'use strict';
|
||||
|
||||
function _instanceof(obj, type) {
|
||||
return type != null && obj instanceof type;
|
||||
}
|
||||
|
||||
var nativeMap;
|
||||
try {
|
||||
nativeMap = Map;
|
||||
} catch(_) {
|
||||
// maybe a reference error because no `Map`. Give it a dummy value that no
|
||||
// value will ever be an instanceof.
|
||||
nativeMap = function() {};
|
||||
}
|
||||
|
||||
var nativeSet;
|
||||
try {
|
||||
nativeSet = Set;
|
||||
} catch(_) {
|
||||
nativeSet = function() {};
|
||||
}
|
||||
|
||||
var nativePromise;
|
||||
try {
|
||||
nativePromise = Promise;
|
||||
} catch(_) {
|
||||
nativePromise = function() {};
|
||||
}
|
||||
|
||||
/**
|
||||
* Clones (copies) an Object using deep copying.
|
||||
*
|
||||
* This function supports circular references by default, but if you are certain
|
||||
* there are no circular references in your object, you can save some CPU time
|
||||
* by calling clone(obj, false).
|
||||
*
|
||||
* Caution: if `circular` is false and `parent` contains circular references,
|
||||
* your program may enter an infinite loop and crash.
|
||||
*
|
||||
* @param `parent` - the object to be cloned
|
||||
* @param `circular` - set to true if the object to be cloned may contain
|
||||
* circular references. (optional - true by default)
|
||||
* @param `depth` - set to a number if the object is only to be cloned to
|
||||
* a particular depth. (optional - defaults to Infinity)
|
||||
* @param `prototype` - sets the prototype to be used when cloning an object.
|
||||
* (optional - defaults to parent prototype).
|
||||
* @param `includeNonEnumerable` - set to true if the non-enumerable properties
|
||||
* should be cloned as well. Non-enumerable properties on the prototype
|
||||
* chain will be ignored. (optional - false by default)
|
||||
*/
|
||||
function clone(parent, circular, depth, prototype, includeNonEnumerable) {
|
||||
if (typeof circular === 'object') {
|
||||
depth = circular.depth;
|
||||
prototype = circular.prototype;
|
||||
includeNonEnumerable = circular.includeNonEnumerable;
|
||||
circular = circular.circular;
|
||||
}
|
||||
// maintain two arrays for circular references, where corresponding parents
|
||||
// and children have the same index
|
||||
var allParents = [];
|
||||
var allChildren = [];
|
||||
|
||||
var useBuffer = typeof Buffer != 'undefined';
|
||||
|
||||
if (typeof circular == 'undefined')
|
||||
circular = true;
|
||||
|
||||
if (typeof depth == 'undefined')
|
||||
depth = Infinity;
|
||||
|
||||
// recurse this function so we don't reset allParents and allChildren
|
||||
function _clone(parent, depth) {
|
||||
// cloning null always returns null
|
||||
if (parent === null)
|
||||
return null;
|
||||
|
||||
if (depth === 0)
|
||||
return parent;
|
||||
|
||||
var child;
|
||||
var proto;
|
||||
if (typeof parent != 'object') {
|
||||
return parent;
|
||||
}
|
||||
|
||||
if (_instanceof(parent, nativeMap)) {
|
||||
child = new nativeMap();
|
||||
} else if (_instanceof(parent, nativeSet)) {
|
||||
child = new nativeSet();
|
||||
} else if (_instanceof(parent, nativePromise)) {
|
||||
child = new nativePromise(function (resolve, reject) {
|
||||
parent.then(function(value) {
|
||||
resolve(_clone(value, depth - 1));
|
||||
}, function(err) {
|
||||
reject(_clone(err, depth - 1));
|
||||
});
|
||||
});
|
||||
} else if (clone.__isArray(parent)) {
|
||||
child = [];
|
||||
} else if (clone.__isRegExp(parent)) {
|
||||
child = new RegExp(parent.source, __getRegExpFlags(parent));
|
||||
if (parent.lastIndex) child.lastIndex = parent.lastIndex;
|
||||
} else if (clone.__isDate(parent)) {
|
||||
child = new Date(parent.getTime());
|
||||
} else if (useBuffer && Buffer.isBuffer(parent)) {
|
||||
if (Buffer.from) {
|
||||
// Node.js >= 5.10.0
|
||||
child = Buffer.from(parent);
|
||||
} else {
|
||||
// Older Node.js versions
|
||||
child = new Buffer(parent.length);
|
||||
parent.copy(child);
|
||||
}
|
||||
return child;
|
||||
} else if (_instanceof(parent, Error)) {
|
||||
child = Object.create(parent);
|
||||
} else {
|
||||
if (typeof prototype == 'undefined') {
|
||||
proto = Object.getPrototypeOf(parent);
|
||||
child = Object.create(proto);
|
||||
}
|
||||
else {
|
||||
child = Object.create(prototype);
|
||||
proto = prototype;
|
||||
}
|
||||
}
|
||||
|
||||
if (circular) {
|
||||
var index = allParents.indexOf(parent);
|
||||
|
||||
if (index != -1) {
|
||||
return allChildren[index];
|
||||
}
|
||||
allParents.push(parent);
|
||||
allChildren.push(child);
|
||||
}
|
||||
|
||||
if (_instanceof(parent, nativeMap)) {
|
||||
parent.forEach(function(value, key) {
|
||||
var keyChild = _clone(key, depth - 1);
|
||||
var valueChild = _clone(value, depth - 1);
|
||||
child.set(keyChild, valueChild);
|
||||
});
|
||||
}
|
||||
if (_instanceof(parent, nativeSet)) {
|
||||
parent.forEach(function(value) {
|
||||
var entryChild = _clone(value, depth - 1);
|
||||
child.add(entryChild);
|
||||
});
|
||||
}
|
||||
|
||||
for (var i in parent) {
|
||||
var attrs = Object.getOwnPropertyDescriptor(parent, i);
|
||||
if (attrs) {
|
||||
child[i] = _clone(parent[i], depth - 1);
|
||||
}
|
||||
|
||||
try {
|
||||
var objProperty = Object.getOwnPropertyDescriptor(parent, i);
|
||||
if (objProperty.set === 'undefined') {
|
||||
// no setter defined. Skip cloning this property
|
||||
continue;
|
||||
}
|
||||
child[i] = _clone(parent[i], depth - 1);
|
||||
} catch(e){
|
||||
if (e instanceof TypeError) {
|
||||
// when in strict mode, TypeError will be thrown if child[i] property only has a getter
|
||||
// we can't do anything about this, other than inform the user that this property cannot be set.
|
||||
continue
|
||||
} else if (e instanceof ReferenceError) {
|
||||
//this may happen in non strict mode
|
||||
continue
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (Object.getOwnPropertySymbols) {
|
||||
var symbols = Object.getOwnPropertySymbols(parent);
|
||||
for (var i = 0; i < symbols.length; i++) {
|
||||
// Don't need to worry about cloning a symbol because it is a primitive,
|
||||
// like a number or string.
|
||||
var symbol = symbols[i];
|
||||
var descriptor = Object.getOwnPropertyDescriptor(parent, symbol);
|
||||
if (descriptor && !descriptor.enumerable && !includeNonEnumerable) {
|
||||
continue;
|
||||
}
|
||||
child[symbol] = _clone(parent[symbol], depth - 1);
|
||||
Object.defineProperty(child, symbol, descriptor);
|
||||
}
|
||||
}
|
||||
|
||||
if (includeNonEnumerable) {
|
||||
var allPropertyNames = Object.getOwnPropertyNames(parent);
|
||||
for (var i = 0; i < allPropertyNames.length; i++) {
|
||||
var propertyName = allPropertyNames[i];
|
||||
var descriptor = Object.getOwnPropertyDescriptor(parent, propertyName);
|
||||
if (descriptor && descriptor.enumerable) {
|
||||
continue;
|
||||
}
|
||||
child[propertyName] = _clone(parent[propertyName], depth - 1);
|
||||
Object.defineProperty(child, propertyName, descriptor);
|
||||
}
|
||||
}
|
||||
|
||||
return child;
|
||||
}
|
||||
|
||||
return _clone(parent, depth);
|
||||
}
|
||||
|
||||
/**
|
||||
* Simple flat clone using prototype, accepts only objects, usefull for property
|
||||
* override on FLAT configuration object (no nested props).
|
||||
*
|
||||
* USE WITH CAUTION! This may not behave as you wish if you do not know how this
|
||||
* works.
|
||||
*/
|
||||
clone.clonePrototype = function clonePrototype(parent) {
|
||||
if (parent === null)
|
||||
return null;
|
||||
|
||||
var c = function () {};
|
||||
c.prototype = parent;
|
||||
return new c();
|
||||
};
|
||||
|
||||
// private utility functions
|
||||
|
||||
function __objToStr(o) {
|
||||
return Object.prototype.toString.call(o);
|
||||
}
|
||||
clone.__objToStr = __objToStr;
|
||||
|
||||
function __isDate(o) {
|
||||
return typeof o === 'object' && __objToStr(o) === '[object Date]';
|
||||
}
|
||||
clone.__isDate = __isDate;
|
||||
|
||||
function __isArray(o) {
|
||||
return typeof o === 'object' && __objToStr(o) === '[object Array]';
|
||||
}
|
||||
clone.__isArray = __isArray;
|
||||
|
||||
function __isRegExp(o) {
|
||||
return typeof o === 'object' && __objToStr(o) === '[object RegExp]';
|
||||
}
|
||||
clone.__isRegExp = __isRegExp;
|
||||
|
||||
function __getRegExpFlags(re) {
|
||||
var flags = '';
|
||||
if (re.global) flags += 'g';
|
||||
if (re.ignoreCase) flags += 'i';
|
||||
if (re.multiline) flags += 'm';
|
||||
return flags;
|
||||
}
|
||||
clone.__getRegExpFlags = __getRegExpFlags;
|
||||
|
||||
return clone;
|
||||
})();
|
||||
|
||||
export default clone
|
||||
@@ -0,0 +1,13 @@
|
||||
export default {
|
||||
props: {
|
||||
lang: String,
|
||||
sessionFrom: String,
|
||||
sendMessageTitle: String,
|
||||
sendMessagePath: String,
|
||||
sendMessageImg: String,
|
||||
showMessageCard: Boolean,
|
||||
appParameter: String,
|
||||
formType: String,
|
||||
openType: String
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,172 @@
|
||||
import * as index from '../function/index.js';
|
||||
import * as test from '../function/test.js';
|
||||
import route from '../util/route.js';
|
||||
import debounce from '../function/debounce.js';
|
||||
import throttle from '../function/throttle.js';
|
||||
export default {
|
||||
// 定义每个组件都可能需要用到的外部样式以及类名
|
||||
props: {
|
||||
// 每个组件都有的父组件传递的样式，可以为字符串或者对象形式
|
||||
customStyle: {
|
||||
type: [Object, String],
|
||||
default: () => ({})
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 跳转的页面路径
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 页面跳转的类型
|
||||
linkType: {
|
||||
type: String,
|
||||
default: 'navigateTo'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onLoad() {
|
||||
// getRect挂载到$uv上，因为这方法需要使用in(this)，所以无法把它独立成一个单独的文件导出
|
||||
this.$uv.getRect = this.$uvGetRect
|
||||
},
|
||||
created() {
|
||||
// 组件当中，只有created声明周期，为了能在组件使用，故也在created中将方法挂载到$uv
|
||||
this.$uv.getRect = this.$uvGetRect
|
||||
},
|
||||
computed: {
|
||||
$uv() {
|
||||
return {
|
||||
...index,
|
||||
test,
|
||||
route,
|
||||
debounce,
|
||||
throttle,
|
||||
unit: uni?.$uv?.config?.unit
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 生成bem规则类名
|
||||
* 由于微信小程序，H5，nvue之间绑定class的差异，无法通过:class="[bem()]"的形式进行同用
|
||||
* 故采用如下折中做法，最后返回的是数组（一般平台）或字符串（支付宝和字节跳动平台），类似['a', 'b', 'c']或'a b c'的形式
|
||||
* @param {String} name 组件名称
|
||||
* @param {Array} fixed 一直会存在的类名
|
||||
* @param {Array} change 会根据变量值为true或者false而出现或者隐藏的类名
|
||||
* @returns {Array|string}
|
||||
*/
|
||||
bem() {
|
||||
return function(name, fixed, change) {
|
||||
// 类名前缀
|
||||
const prefix = `uv-${name}--`
|
||||
const classes = {}
|
||||
if (fixed) {
|
||||
fixed.map((item) => {
|
||||
// 这里的类名，会一直存在
|
||||
classes[prefix + this[item]] = true
|
||||
})
|
||||
}
|
||||
if (change) {
|
||||
change.map((item) => {
|
||||
// 这里的类名，会根据this[item]的值为true或者false，而进行添加或者移除某一个类
|
||||
this[item] ? (classes[prefix + item] = this[item]) : (delete classes[prefix + item])
|
||||
})
|
||||
}
|
||||
return Object.keys(classes)
|
||||
// 支付宝，头条小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
|
||||
// #ifdef MP-ALIPAY || MP-TOUTIAO || MP-LARK || MP-BAIDU
|
||||
.join(' ')
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 跳转某一个页面
|
||||
openPage(urlKey = 'url') {
|
||||
const url = this[urlKey]
|
||||
if (url) {
|
||||
// 执行类似uni.navigateTo的方法
|
||||
uni[this.linkType]({
|
||||
url
|
||||
})
|
||||
}
|
||||
},
|
||||
// 查询节点信息
|
||||
// 目前此方法在支付宝小程序中无法获取组件跟接点的尺寸，为支付宝的bug(2020-07-21)
|
||||
// 解决办法为在组件根部再套一个没有任何作用的view元素
|
||||
$uvGetRect(selector, all) {
|
||||
return new Promise((resolve) => {
|
||||
uni.createSelectorQuery()
|
||||
.in(this)[all ? 'selectAll' : 'select'](selector)
|
||||
.boundingClientRect((rect) => {
|
||||
if (all && Array.isArray(rect) && rect.length) {
|
||||
resolve(rect)
|
||||
}
|
||||
if (!all && rect) {
|
||||
resolve(rect)
|
||||
}
|
||||
})
|
||||
.exec()
|
||||
})
|
||||
},
|
||||
getParentData(parentName = '') {
|
||||
// 避免在created中去定义parent变量
|
||||
if (!this.parent) this.parent = {}
|
||||
// 这里的本质原理是，通过获取父组件实例(也即类似uv-radio的父组件uv-radio-group的this)
|
||||
// 将父组件this中对应的参数，赋值给本组件(uv-radio的this)的parentData对象中对应的属性
|
||||
// 之所以需要这么做，是因为所有端中，头条小程序不支持通过this.parent.xxx去监听父组件参数的变化
|
||||
// 此处并不会自动更新子组件的数据，而是依赖父组件uv-radio-group去监听data的变化，手动调用更新子组件的方法去重新获取
|
||||
this.parent = this.$uv.$parent.call(this, parentName)
|
||||
if (this.parent.children) {
|
||||
// 如果父组件的children不存在本组件的实例，才将本实例添加到父组件的children中
|
||||
this.parent.children.indexOf(this) === -1 && this.parent.children.push(this)
|
||||
}
|
||||
if (this.parent && this.parentData) {
|
||||
// 历遍parentData中的属性，将parent中的同名属性赋值给parentData
|
||||
Object.keys(this.parentData).map((key) => {
|
||||
this.parentData[key] = this.parent[key]
|
||||
})
|
||||
}
|
||||
},
|
||||
// 阻止事件冒泡
|
||||
preventEvent(e) {
|
||||
e && typeof(e.stopPropagation) === 'function' && e.stopPropagation()
|
||||
},
|
||||
// 空操作
|
||||
noop(e) {
|
||||
this.preventEvent(e)
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
uni.$emit('uvOnReachBottom')
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 判断当前页面是否存在parent和chldren，一般在checkbox和checkbox-group父子联动的场景会有此情况
|
||||
// 组件销毁时，移除子组件在父组件children数组中的实例，释放资源，避免数据混乱
|
||||
if (this.parent && test.array(this.parent.children)) {
|
||||
// 组件销毁时，移除父组件中的children数组中对应的实例
|
||||
const childrenList = this.parent.children
|
||||
childrenList.map((child, index) => {
|
||||
// 如果相等，则移除
|
||||
if (child === this) {
|
||||
childrenList.splice(index, 1)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 兼容vue3
|
||||
unmounted() {
|
||||
if (this.parent && test.array(this.parent.children)) {
|
||||
// 组件销毁时，移除父组件中的children数组中对应的实例
|
||||
const childrenList = this.parent.children
|
||||
childrenList.map((child, index) => {
|
||||
// 如果相等，则移除
|
||||
if (child === this) {
|
||||
childrenList.splice(index, 1)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
export default {
|
||||
// #ifdef MP-WEIXIN
|
||||
// 将自定义节点设置成虚拟的（去掉自定义组件包裹层），更加接近Vue组件的表现，能更好的使用flex属性
|
||||
options: {
|
||||
virtualHost: true
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
export default {
|
||||
onLoad() {
|
||||
// 设置默认的转发参数
|
||||
uni.$uv.mpShare = {
|
||||
title: '', // 默认为小程序名称
|
||||
path: '', // 默认为当前页面路径
|
||||
imageUrl: '' // 默认为当前页面的截图
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return uni.$uv.mpShare
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
export default {
|
||||
props: {
|
||||
openType: String
|
||||
},
|
||||
emits: ['getphonenumber','getuserinfo','error','opensetting','launchapp','contact','chooseavatar','addgroupapp','chooseaddress','subscribe','login','im'],
|
||||
methods: {
|
||||
onGetPhoneNumber(event) {
|
||||
this.$emit('getphonenumber', event.detail)
|
||||
},
|
||||
onGetUserInfo(event) {
|
||||
this.$emit('getuserinfo', event.detail)
|
||||
},
|
||||
onError(event) {
|
||||
this.$emit('error', event.detail)
|
||||
},
|
||||
onOpenSetting(event) {
|
||||
this.$emit('opensetting', event.detail)
|
||||
},
|
||||
onLaunchApp(event) {
|
||||
this.$emit('launchapp', event.detail)
|
||||
},
|
||||
onContact(event) {
|
||||
this.$emit('contact', event.detail)
|
||||
},
|
||||
onChooseavatar(event) {
|
||||
this.$emit('chooseavatar', event.detail)
|
||||
},
|
||||
onAgreeprivacyauthorization(event) {
|
||||
this.$emit('agreeprivacyauthorization', event.detail)
|
||||
},
|
||||
onAddgroupapp(event) {
|
||||
this.$emit('addgroupapp', event.detail)
|
||||
},
|
||||
onChooseaddress(event) {
|
||||
this.$emit('chooseaddress', event.detail)
|
||||
},
|
||||
onSubscribe(event) {
|
||||
this.$emit('subscribe', event.detail)
|
||||
},
|
||||
onLogin(event) {
|
||||
this.$emit('login', event.detail)
|
||||
},
|
||||
onIm(event) {
|
||||
this.$emit('im', event.detail)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
const MIN_DISTANCE = 10
|
||||
|
||||
function getDirection(x, y) {
|
||||
if (x > y && x > MIN_DISTANCE) {
|
||||
return 'horizontal'
|
||||
}
|
||||
if (y > x && y > MIN_DISTANCE) {
|
||||
return 'vertical'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
getTouchPoint(e) {
|
||||
if (!e) {
|
||||
return {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
} if (e.touches && e.touches[0]) {
|
||||
return {
|
||||
x: e.touches[0].pageX,
|
||||
y: e.touches[0].pageY
|
||||
}
|
||||
} if (e.changedTouches && e.changedTouches[0]) {
|
||||
return {
|
||||
x: e.changedTouches[0].pageX,
|
||||
y: e.changedTouches[0].pageY
|
||||
}
|
||||
}
|
||||
return {
|
||||
x: e.clientX || 0,
|
||||
y: e.clientY || 0
|
||||
}
|
||||
},
|
||||
resetTouchStatus() {
|
||||
this.direction = ''
|
||||
this.deltaX = 0
|
||||
this.deltaY = 0
|
||||
this.offsetX = 0
|
||||
this.offsetY = 0
|
||||
},
|
||||
touchStart(event) {
|
||||
this.resetTouchStatus()
|
||||
const touch = this.getTouchPoint(event)
|
||||
this.startX = touch.x
|
||||
this.startY = touch.y
|
||||
},
|
||||
touchMove(event) {
|
||||
const touch = this.getTouchPoint(event)
|
||||
this.deltaX = touch.x - this.startX
|
||||
this.deltaY = touch.y - this.startY
|
||||
this.offsetX = Math.abs(this.deltaX)
|
||||
this.offsetY = Math.abs(this.deltaY)
|
||||
this.direction = this.direction || getDirection(this.offsetX, this.offsetY)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,216 @@
|
||||
var __getOwnPropNames = Object.getOwnPropertyNames;
|
||||
var __commonJS = (cb, mod) => function __require() {
|
||||
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
||||
};
|
||||
|
||||
var require_dayjs_min = __commonJS({
|
||||
"uvuidayjs"(exports, module) {
|
||||
!function(t, e) {
|
||||
"object" == typeof exports && "undefined" != typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define(e) : (t = "undefined" != typeof globalThis ? globalThis : t || self).dayjs = e();
|
||||
}(exports, function() {
|
||||
"use strict";
|
||||
var t = 1e3, e = 6e4, n = 36e5, r = "millisecond", i = "second", s = "minute", u = "hour", a = "day", o = "week", f = "month", h = "quarter", c = "year", d = "date", l = "Invalid Date", $ = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, y = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, M = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(t2) {
|
||||
var e2 = ["th", "st", "nd", "rd"], n2 = t2 % 100;
|
||||
return "[" + t2 + (e2[(n2 - 20) % 10] || e2[n2] || e2[0]) + "]";
|
||||
} }, m = function(t2, e2, n2) {
|
||||
var r2 = String(t2);
|
||||
return !r2 || r2.length >= e2 ? t2 : "" + Array(e2 + 1 - r2.length).join(n2) + t2;
|
||||
}, v = { s: m, z: function(t2) {
|
||||
var e2 = -t2.utcOffset(), n2 = Math.abs(e2), r2 = Math.floor(n2 / 60), i2 = n2 % 60;
|
||||
return (e2 <= 0 ? "+" : "-") + m(r2, 2, "0") + ":" + m(i2, 2, "0");
|
||||
}, m: function t2(e2, n2) {
|
||||
if (e2.date() < n2.date())
|
||||
return -t2(n2, e2);
|
||||
var r2 = 12 * (n2.year() - e2.year()) + (n2.month() - e2.month()), i2 = e2.clone().add(r2, f), s2 = n2 - i2 < 0, u2 = e2.clone().add(r2 + (s2 ? -1 : 1), f);
|
||||
return +(-(r2 + (n2 - i2) / (s2 ? i2 - u2 : u2 - i2)) || 0);
|
||||
}, a: function(t2) {
|
||||
return t2 < 0 ? Math.ceil(t2) || 0 : Math.floor(t2);
|
||||
}, p: function(t2) {
|
||||
return { M: f, y: c, w: o, d: a, D: d, h: u, m: s, s: i, ms: r, Q: h }[t2] || String(t2 || "").toLowerCase().replace(/s$/, "");
|
||||
}, u: function(t2) {
|
||||
return void 0 === t2;
|
||||
} }, g = "en", D = {};
|
||||
D[g] = M;
|
||||
var p = function(t2) {
|
||||
return t2 instanceof _;
|
||||
}, S = function t2(e2, n2, r2) {
|
||||
var i2;
|
||||
if (!e2)
|
||||
return g;
|
||||
if ("string" == typeof e2) {
|
||||
var s2 = e2.toLowerCase();
|
||||
D[s2] && (i2 = s2), n2 && (D[s2] = n2, i2 = s2);
|
||||
var u2 = e2.split("-");
|
||||
if (!i2 && u2.length > 1)
|
||||
return t2(u2[0]);
|
||||
} else {
|
||||
var a2 = e2.name;
|
||||
D[a2] = e2, i2 = a2;
|
||||
}
|
||||
return !r2 && i2 && (g = i2), i2 || !r2 && g;
|
||||
}, w = function(t2, e2) {
|
||||
if (p(t2))
|
||||
return t2.clone();
|
||||
var n2 = "object" == typeof e2 ? e2 : {};
|
||||
return n2.date = t2, n2.args = arguments, new _(n2);
|
||||
}, O = v;
|
||||
O.l = S, O.i = p, O.w = function(t2, e2) {
|
||||
return w(t2, { locale: e2.$L, utc: e2.$u, x: e2.$x, $offset: e2.$offset });
|
||||
};
|
||||
var _ = function() {
|
||||
function M2(t2) {
|
||||
this.$L = S(t2.locale, null, true), this.parse(t2);
|
||||
}
|
||||
var m2 = M2.prototype;
|
||||
return m2.parse = function(t2) {
|
||||
this.$d = function(t3) {
|
||||
var e2 = t3.date, n2 = t3.utc;
|
||||
if (null === e2)
|
||||
return new Date(NaN);
|
||||
if (O.u(e2))
|
||||
return new Date();
|
||||
if (e2 instanceof Date)
|
||||
return new Date(e2);
|
||||
if ("string" == typeof e2 && !/Z$/i.test(e2)) {
|
||||
var r2 = e2.match($);
|
||||
if (r2) {
|
||||
var i2 = r2[2] - 1 || 0, s2 = (r2[7] || "0").substring(0, 3);
|
||||
return n2 ? new Date(Date.UTC(r2[1], i2, r2[3] || 1, r2[4] || 0, r2[5] || 0, r2[6] || 0, s2)) : new Date(r2[1], i2, r2[3] || 1, r2[4] || 0, r2[5] || 0, r2[6] || 0, s2);
|
||||
}
|
||||
}
|
||||
return new Date(e2);
|
||||
}(t2), this.$x = t2.x || {}, this.init();
|
||||
}, m2.init = function() {
|
||||
var t2 = this.$d;
|
||||
this.$y = t2.getFullYear(), this.$M = t2.getMonth(), this.$D = t2.getDate(), this.$W = t2.getDay(), this.$H = t2.getHours(), this.$m = t2.getMinutes(), this.$s = t2.getSeconds(), this.$ms = t2.getMilliseconds();
|
||||
}, m2.$utils = function() {
|
||||
return O;
|
||||
}, m2.isValid = function() {
|
||||
return !(this.$d.toString() === l);
|
||||
}, m2.isSame = function(t2, e2) {
|
||||
var n2 = w(t2);
|
||||
return this.startOf(e2) <= n2 && n2 <= this.endOf(e2);
|
||||
}, m2.isAfter = function(t2, e2) {
|
||||
return w(t2) < this.startOf(e2);
|
||||
}, m2.isBefore = function(t2, e2) {
|
||||
return this.endOf(e2) < w(t2);
|
||||
}, m2.$g = function(t2, e2, n2) {
|
||||
return O.u(t2) ? this[e2] : this.set(n2, t2);
|
||||
}, m2.unix = function() {
|
||||
return Math.floor(this.valueOf() / 1e3);
|
||||
}, m2.valueOf = function() {
|
||||
return this.$d.getTime();
|
||||
}, m2.startOf = function(t2, e2) {
|
||||
var n2 = this, r2 = !!O.u(e2) || e2, h2 = O.p(t2), l2 = function(t3, e3) {
|
||||
var i2 = O.w(n2.$u ? Date.UTC(n2.$y, e3, t3) : new Date(n2.$y, e3, t3), n2);
|
||||
return r2 ? i2 : i2.endOf(a);
|
||||
}, $2 = function(t3, e3) {
|
||||
return O.w(n2.toDate()[t3].apply(n2.toDate("s"), (r2 ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(e3)), n2);
|
||||
}, y2 = this.$W, M3 = this.$M, m3 = this.$D, v2 = "set" + (this.$u ? "UTC" : "");
|
||||
switch (h2) {
|
||||
case c:
|
||||
return r2 ? l2(1, 0) : l2(31, 11);
|
||||
case f:
|
||||
return r2 ? l2(1, M3) : l2(0, M3 + 1);
|
||||
case o:
|
||||
var g2 = this.$locale().weekStart || 0, D2 = (y2 < g2 ? y2 + 7 : y2) - g2;
|
||||
return l2(r2 ? m3 - D2 : m3 + (6 - D2), M3);
|
||||
case a:
|
||||
case d:
|
||||
return $2(v2 + "Hours", 0);
|
||||
case u:
|
||||
return $2(v2 + "Minutes", 1);
|
||||
case s:
|
||||
return $2(v2 + "Seconds", 2);
|
||||
case i:
|
||||
return $2(v2 + "Milliseconds", 3);
|
||||
default:
|
||||
return this.clone();
|
||||
}
|
||||
}, m2.endOf = function(t2) {
|
||||
return this.startOf(t2, false);
|
||||
}, m2.$set = function(t2, e2) {
|
||||
var n2, o2 = O.p(t2), h2 = "set" + (this.$u ? "UTC" : ""), l2 = (n2 = {}, n2[a] = h2 + "Date", n2[d] = h2 + "Date", n2[f] = h2 + "Month", n2[c] = h2 + "FullYear", n2[u] = h2 + "Hours", n2[s] = h2 + "Minutes", n2[i] = h2 + "Seconds", n2[r] = h2 + "Milliseconds", n2)[o2], $2 = o2 === a ? this.$D + (e2 - this.$W) : e2;
|
||||
if (o2 === f || o2 === c) {
|
||||
var y2 = this.clone().set(d, 1);
|
||||
y2.$d[l2]($2), y2.init(), this.$d = y2.set(d, Math.min(this.$D, y2.daysInMonth())).$d;
|
||||
} else
|
||||
l2 && this.$d[l2]($2);
|
||||
return this.init(), this;
|
||||
}, m2.set = function(t2, e2) {
|
||||
return this.clone().$set(t2, e2);
|
||||
}, m2.get = function(t2) {
|
||||
return this[O.p(t2)]();
|
||||
}, m2.add = function(r2, h2) {
|
||||
var d2, l2 = this;
|
||||
r2 = Number(r2);
|
||||
var $2 = O.p(h2), y2 = function(t2) {
|
||||
var e2 = w(l2);
|
||||
return O.w(e2.date(e2.date() + Math.round(t2 * r2)), l2);
|
||||
};
|
||||
if ($2 === f)
|
||||
return this.set(f, this.$M + r2);
|
||||
if ($2 === c)
|
||||
return this.set(c, this.$y + r2);
|
||||
if ($2 === a)
|
||||
return y2(1);
|
||||
if ($2 === o)
|
||||
return y2(7);
|
||||
var M3 = (d2 = {}, d2[s] = e, d2[u] = n, d2[i] = t, d2)[$2] || 1, m3 = this.$d.getTime() + r2 * M3;
|
||||
return O.w(m3, this);
|
||||
}, m2.subtract = function(t2, e2) {
|
||||
return this.add(-1 * t2, e2);
|
||||
}, m2.format = function(t2) {
|
||||
var e2 = this, n2 = this.$locale();
|
||||
if (!this.isValid())
|
||||
return n2.invalidDate || l;
|
||||
var r2 = t2 || "YYYY-MM-DDTHH:mm:ssZ", i2 = O.z(this), s2 = this.$H, u2 = this.$m, a2 = this.$M, o2 = n2.weekdays, f2 = n2.months, h2 = function(t3, n3, i3, s3) {
|
||||
return t3 && (t3[n3] || t3(e2, r2)) || i3[n3].slice(0, s3);
|
||||
}, c2 = function(t3) {
|
||||
return O.s(s2 % 12 || 12, t3, "0");
|
||||
}, d2 = n2.meridiem || function(t3, e3, n3) {
|
||||
var r3 = t3 < 12 ? "AM" : "PM";
|
||||
return n3 ? r3.toLowerCase() : r3;
|
||||
}, $2 = { YY: String(this.$y).slice(-2), YYYY: this.$y, M: a2 + 1, MM: O.s(a2 + 1, 2, "0"), MMM: h2(n2.monthsShort, a2, f2, 3), MMMM: h2(f2, a2), D: this.$D, DD: O.s(this.$D, 2, "0"), d: String(this.$W), dd: h2(n2.weekdaysMin, this.$W, o2, 2), ddd: h2(n2.weekdaysShort, this.$W, o2, 3), dddd: o2[this.$W], H: String(s2), HH: O.s(s2, 2, "0"), h: c2(1), hh: c2(2), a: d2(s2, u2, true), A: d2(s2, u2, false), m: String(u2), mm: O.s(u2, 2, "0"), s: String(this.$s), ss: O.s(this.$s, 2, "0"), SSS: O.s(this.$ms, 3, "0"), Z: i2 };
|
||||
return r2.replace(y, function(t3, e3) {
|
||||
return e3 || $2[t3] || i2.replace(":", "");
|
||||
});
|
||||
}, m2.utcOffset = function() {
|
||||
return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
|
||||
}, m2.diff = function(r2, d2, l2) {
|
||||
var $2, y2 = O.p(d2), M3 = w(r2), m3 = (M3.utcOffset() - this.utcOffset()) * e, v2 = this - M3, g2 = O.m(this, M3);
|
||||
return g2 = ($2 = {}, $2[c] = g2 / 12, $2[f] = g2, $2[h] = g2 / 3, $2[o] = (v2 - m3) / 6048e5, $2[a] = (v2 - m3) / 864e5, $2[u] = v2 / n, $2[s] = v2 / e, $2[i] = v2 / t, $2)[y2] || v2, l2 ? g2 : O.a(g2);
|
||||
}, m2.daysInMonth = function() {
|
||||
return this.endOf(f).$D;
|
||||
}, m2.$locale = function() {
|
||||
return D[this.$L];
|
||||
}, m2.locale = function(t2, e2) {
|
||||
if (!t2)
|
||||
return this.$L;
|
||||
var n2 = this.clone(), r2 = S(t2, e2, true);
|
||||
return r2 && (n2.$L = r2), n2;
|
||||
}, m2.clone = function() {
|
||||
return O.w(this.$d, this);
|
||||
}, m2.toDate = function() {
|
||||
return new Date(this.valueOf());
|
||||
}, m2.toJSON = function() {
|
||||
return this.isValid() ? this.toISOString() : null;
|
||||
}, m2.toISOString = function() {
|
||||
return this.$d.toISOString();
|
||||
}, m2.toString = function() {
|
||||
return this.$d.toUTCString();
|
||||
}, M2;
|
||||
}(), T = _.prototype;
|
||||
return w.prototype = T, [["$ms", r], ["$s", i], ["$m", s], ["$H", u], ["$W", a], ["$M", f], ["$y", c], ["$D", d]].forEach(function(t2) {
|
||||
T[t2[1]] = function(e2) {
|
||||
return this.$g(e2, t2[0], t2[1]);
|
||||
};
|
||||
}), w.extend = function(t2, e2) {
|
||||
return t2.$i || (t2(e2, _, w), t2.$i = true), w;
|
||||
}, w.locale = S, w.isDayjs = p, w.unix = function(t2) {
|
||||
return w(1e3 * t2);
|
||||
}, w.en = D[g], w.Ls = D, w.p = {}, w;
|
||||
});
|
||||
}
|
||||
});
|
||||
export default require_dayjs_min();
|
||||
@@ -0,0 +1,126 @@
|
||||
/**
|
||||
* 路由跳转方法，该方法相对于直接使用uni.xxx的好处是使用更加简单快捷
|
||||
* 并且带有路由拦截功能
|
||||
*/
|
||||
import { queryParams, deepMerge, page } from '@/uni_modules/uv-ui-tools/libs/function/index.js'
|
||||
class Router {
|
||||
constructor() {
|
||||
// 原始属性定义
|
||||
this.config = {
|
||||
type: 'navigateTo',
|
||||
url: '',
|
||||
delta: 1, // navigateBack页面后退时,回退的层数
|
||||
params: {}, // 传递的参数
|
||||
animationType: 'pop-in', // 窗口动画,只在APP有效
|
||||
animationDuration: 300, // 窗口动画持续时间,单位毫秒,只在APP有效
|
||||
intercept: false ,// 是否需要拦截
|
||||
events: {} // 页面间通信接口，用于监听被打开页面发送到当前页面的数据。hbuilderx 2.8.9+ 开始支持。
|
||||
}
|
||||
// 因为route方法是需要对外赋值给另外的对象使用，同时route内部有使用this，会导致route失去上下文
|
||||
// 这里在构造函数中进行this绑定
|
||||
this.route = this.route.bind(this)
|
||||
}
|
||||
|
||||
// 判断url前面是否有"/"，如果没有则加上，否则无法跳转
|
||||
addRootPath(url) {
|
||||
return url[0] === '/' ? url : `/${url}`
|
||||
}
|
||||
|
||||
// 整合路由参数
|
||||
mixinParam(url, params) {
|
||||
url = url && this.addRootPath(url)
|
||||
|
||||
// 使用正则匹配，主要依据是判断是否有"/","?","="等，如“/page/index/index?name=mary"
|
||||
// 如果有url中有get参数，转换后无需带上"?"
|
||||
let query = ''
|
||||
if (/.*\/.*\?.*=.*/.test(url)) {
|
||||
// object对象转为get类型的参数
|
||||
query = queryParams(params, false)
|
||||
// 因为已有get参数,所以后面拼接的参数需要带上"&"隔开
|
||||
return url += `&${query}`
|
||||
}
|
||||
// 直接拼接参数，因为此处url中没有后面的query参数，也就没有"?/&"之类的符号
|
||||
query = queryParams(params)
|
||||
return url += query
|
||||
}
|
||||
|
||||
// 对外的方法名称
|
||||
async route(options = {}, params = {}) {
|
||||
// 合并用户的配置和内部的默认配置
|
||||
let mergeConfig = {}
|
||||
|
||||
if (typeof options === 'string') {
|
||||
// 如果options为字符串，则为route(url, params)的形式
|
||||
mergeConfig.url = this.mixinParam(options, params)
|
||||
mergeConfig.type = 'navigateTo'
|
||||
} else {
|
||||
mergeConfig = deepMerge(this.config, options)
|
||||
// 否则正常使用mergeConfig中的url和params进行拼接
|
||||
mergeConfig.url = this.mixinParam(options.url, options.params)
|
||||
}
|
||||
// 如果本次跳转的路径和本页面路径一致，不执行跳转，防止用户快速点击跳转按钮，造成多次跳转同一个页面的问题
|
||||
if (mergeConfig.url === page()) return
|
||||
|
||||
if (params.intercept) {
|
||||
mergeConfig.intercept = params.intercept
|
||||
}
|
||||
// params参数也带给拦截器
|
||||
mergeConfig.params = params
|
||||
// 合并内外部参数
|
||||
mergeConfig = deepMerge(this.config, mergeConfig)
|
||||
// 判断用户是否定义了拦截器
|
||||
if (typeof mergeConfig.intercept === 'function') {
|
||||
// 定一个promise，根据用户执行resolve(true)或者resolve(false)来决定是否进行路由跳转
|
||||
const isNext = await new Promise((resolve, reject) => {
|
||||
mergeConfig.intercept(mergeConfig, resolve)
|
||||
})
|
||||
// 如果isNext为true，则执行路由跳转
|
||||
isNext && this.openPage(mergeConfig)
|
||||
} else {
|
||||
this.openPage(mergeConfig)
|
||||
}
|
||||
}
|
||||
|
||||
// 执行路由跳转
|
||||
openPage(config) {
|
||||
// 解构参数
|
||||
const {
|
||||
url,
|
||||
type,
|
||||
delta,
|
||||
animationType,
|
||||
animationDuration,
|
||||
events
|
||||
} = config
|
||||
if (config.type == 'navigateTo' || config.type == 'to') {
|
||||
uni.navigateTo({
|
||||
url,
|
||||
animationType,
|
||||
animationDuration,
|
||||
events
|
||||
})
|
||||
}
|
||||
if (config.type == 'redirectTo' || config.type == 'redirect') {
|
||||
uni.redirectTo({
|
||||
url
|
||||
})
|
||||
}
|
||||
if (config.type == 'switchTab' || config.type == 'tab') {
|
||||
uni.switchTab({
|
||||
url
|
||||
})
|
||||
}
|
||||
if (config.type == 'reLaunch' || config.type == 'launch') {
|
||||
uni.reLaunch({
|
||||
url
|
||||
})
|
||||
}
|
||||
if (config.type == 'navigateBack' || config.type == 'back') {
|
||||
uni.navigateBack({
|
||||
delta
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default (new Router()).route
|
||||
@@ -0,0 +1,81 @@
|
||||
{
|
||||
"id": "uv-ui-tools",
|
||||
"displayName": "uv-ui-tools 工具集 全面兼容vue3+2、app、h5、小程序等多端",
|
||||
"version": "1.1.25",
|
||||
"description": "uv-ui-tools，集成工具库，强大的Http请求封装，清晰的文档说明，开箱即用。方便使用，可以全局使用",
|
||||
"keywords": [
|
||||
"uv-ui-tools,uv-ui组件库,工具集,uvui,uView2.x"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "y",
|
||||
"快手": "y",
|
||||
"飞书": "y",
|
||||
"京东": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
## uv-ui-tools 工具集
|
||||
|
||||
> **组件名：uv-ui-tools**
|
||||
|
||||
uv-ui工具集成，包括网络Http请求、便捷工具、节流防抖、对象操作、时间格式化、路由跳转、全局唯一标识符、规则校验等等。
|
||||
|
||||
该组件推荐配合[uv-ui组件库](https://www.uvui.cn/components/intro.html)使用，单独下载也可以在自己项目中使用，需要做相应的配置，可查看文档。强烈推荐使用[uv-ui组件库](https://www.uvui.cn/components/intro.html)，导入组件都会自动导入`uv-ui-tools`。需要在自己的项目中使用请参考[扩展配置](https://www.uvui.cn/components/setting.html)。
|
||||
|
||||
uv-ui破釜沉舟之兼容vue3+2、app、h5、多端小程序的uni-app生态框架，大部分组件基于uView2.x，在经过改进后全面支持vue3，部分组件做了进一步的优化，修复大量BUG，支持单独导入，方便开发者选择导入需要的组件。开箱即用，灵活配置。
|
||||
|
||||
# <a href="https://www.uvui.cn/js/intro.html" target="_blank">查看文档</a>
|
||||
|
||||
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
|
||||
|
||||
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
|
||||
|
||||
|
||||
|
||||
</a>
|
||||
|
||||
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||
@@ -0,0 +1,43 @@
|
||||
// 此文件为uvUI的主题变量，这些变量目前只能通过uni.scss引入才有效，另外由于
|
||||
// uni.scss中引入的样式会同时混入到全局样式文件和单独每一个页面的样式中，造成微信程序包太大，
|
||||
// 故uni.scss只建议放scss变量名相关样式，其他的样式可以通过main.js或者App.vue引入
|
||||
|
||||
$uv-main-color: #303133;
|
||||
$uv-content-color: #606266;
|
||||
$uv-tips-color: #909193;
|
||||
$uv-light-color: #c0c4cc;
|
||||
$uv-border-color: #dadbde;
|
||||
$uv-bg-color: #f3f4f6;
|
||||
$uv-disabled-color: #c8c9cc;
|
||||
|
||||
$uv-primary: #3c9cff;
|
||||
$uv-primary-dark: #398ade;
|
||||
$uv-primary-disabled: #9acafc;
|
||||
$uv-primary-light: #ecf5ff;
|
||||
|
||||
$uv-warning: #f9ae3d;
|
||||
$uv-warning-dark: #f1a532;
|
||||
$uv-warning-disabled: #f9d39b;
|
||||
$uv-warning-light: #fdf6ec;
|
||||
|
||||
$uv-success: #5ac725;
|
||||
$uv-success-dark: #53c21d;
|
||||
$uv-success-disabled: #a9e08f;
|
||||
$uv-success-light: #f5fff0;
|
||||
|
||||
$uv-error: #f56c6c;
|
||||
$uv-error-dark: #e45656;
|
||||
$uv-error-disabled: #f7b2b2;
|
||||
$uv-error-light: #fef0f0;
|
||||
|
||||
$uv-info: #909399;
|
||||
$uv-info-dark: #767a82;
|
||||
$uv-info-disabled: #c4c6c9;
|
||||
$uv-info-light: #f4f4f5;
|
||||
|
||||
@mixin flex($direction: row) {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: $direction;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
## 1.0.8（2023-08-17）
|
||||
1. 修复只有一条数据切换时可能存在位置错误的BUG
|
||||
## 1.0.7（2023-07-22）
|
||||
1. 避免快速切换报错的BUG
|
||||
## 1.0.6（2023-07-17）
|
||||
1. 优化文档
|
||||
2. 优化其他
|
||||
## 1.0.5（2023-07-14）
|
||||
1. 优化changeList未处理数据时，正确返回对应列的数据，避免误导
|
||||
## 1.0.4（2023-05-27）
|
||||
1. 修复在百度小程序中可能存在的BUG
|
||||
2. 去掉原有的slot方式
|
||||
## 1.0.3（2023-05-23）
|
||||
1. 修复在百度/头条小程序显示异常等BUG
|
||||
2. 增加changeList回调函数处理数据
|
||||
3. 更新示例
|
||||
## 1.0.2（2023-05-16）
|
||||
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.1（2023-05-12）
|
||||
1. 增加clear回调函数
|
||||
2. 增加remove回调函数
|
||||
## 1.0.0（2023-05-10）
|
||||
uv-waterfall 瀑布流
|
||||
@@ -0,0 +1,69 @@
|
||||
export default {
|
||||
props: {
|
||||
// 瀑布流数据
|
||||
// #ifdef VUE2
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// #endif
|
||||
// 数据的id值，根据id值对数据执行删除操作
|
||||
// 如数据为：{id: 1, name: 'uv-ui'}，那么该值设置为id
|
||||
idKey: {
|
||||
type: String,
|
||||
default: 'id'
|
||||
},
|
||||
// 每次插入数据的事件间隔，间隔越长能保证两列高度相近，但是用户体验不好，单位ms
|
||||
addTime: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
// 瀑布流的列数，默认2，最高为5
|
||||
columnCount: {
|
||||
type: [Number, String],
|
||||
default: 2
|
||||
},
|
||||
// 列与列的间隙，默认20
|
||||
columnGap: {
|
||||
type: [Number, String],
|
||||
default: 20
|
||||
},
|
||||
// 左边和列表的间隙
|
||||
leftGap: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
// 右边和列表的间隙
|
||||
rightGap: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
// 是否显示滚动条，仅nvue生效
|
||||
showScrollbar: {
|
||||
type: [Boolean],
|
||||
default: false
|
||||
},
|
||||
// 列宽，nvue生效
|
||||
columnWidth: {
|
||||
type: [Number, String],
|
||||
default: 'auto'
|
||||
},
|
||||
// 瀑布流的宽度，nvue生效
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
// 瀑布流的高度，nvue生效
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
...uni.$uv?.props?.waterfall
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<view class="uv-waterfall">
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view class="uv-waterfall__gap_left" :style="[gapLeftStyle]"></view>
|
||||
<template v-if="columnNum>=1">
|
||||
<view id="uv-waterfall-1" class="uv-waterfall__column">
|
||||
<slot name="list1"></slot>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="columnNum>=2">
|
||||
<view class="uv-waterfall__gap_center" :style="[gapCenterStyle]"></view>
|
||||
<view id="uv-waterfall-2" class="uv-waterfall__column">
|
||||
<slot name="list2"></slot>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="columnNum>=3">
|
||||
<view class="uv-waterfall__gap_center" :style="[gapCenterStyle]"></view>
|
||||
<view id="uv-waterfall-3" class="uv-waterfall__column">
|
||||
<slot name="list3"></slot>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="columnNum>=4">
|
||||
<view class="uv-waterfall__gap_center" :style="[gapCenterStyle]">
|
||||
</view>
|
||||
<view id="uv-waterfall-4" class="uv-waterfall__column">
|
||||
<slot name="list4"></slot>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="columnNum>=5">
|
||||
<view class="uv-waterfall__gap_center" :style="[gapCenterStyle]">
|
||||
</view>
|
||||
<view id="uv-waterfall-5" class="uv-waterfall__column">
|
||||
<slot name="list5"></slot>
|
||||
</view>
|
||||
</template>
|
||||
<view class="uv-waterfall__gap_right" :style="[gapRightStyle]">
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view class="waterfall-warapper">
|
||||
<waterfall :column-count="columnNum" :show-scrollbar="false" column-width="auto" :column-gap="columnGap" :left-gap="leftGap" :right-gap="rightGap" :always-scrollable-vertical="true" :style="[nvueWaterfallStyle]"
|
||||
@loadmore="scrolltolower">
|
||||
<slot></slot>
|
||||
</waterfall>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
import props from './props.js';
|
||||
/**
|
||||
* 瀑布流
|
||||
* @description 该组件兼容所有端，nvue参考https://uniapp.dcloud.net.cn/component/waterfall.html
|
||||
* @tutorial https://www.uvui.cn/components/list.html
|
||||
* @property {Array} value/modelValue 瀑布流数组数据，非nvue生效 （默认 [] ）
|
||||
* @property {String} idKey 数据的id值，根据id值对数据执行删除操作，如数据为：{id: 1, name: 'uv-ui'}，那么该值设置为id，非nvue有效 （默认 '' ）
|
||||
* @property {String ｜ Number} addTime 每次插入数据的事件间隔，间隔越长能保证两列高度相近，但是用户体验不好，单位ms，非nvue生效（默认 200 ）
|
||||
* @property {String ｜ Number} columnCount 瀑布流的列数（默认 2 ）
|
||||
* @property {String ｜ Number} columnGap 列与列的间隙（默认 0 ）
|
||||
* @property {String ｜ Number} leftGap 左边和列表的间隙（默认 0 ）
|
||||
* @property {String ｜ Number} rightGap 右边和列表的间隙（默认 0 ）
|
||||
* @property {Boolean} showScrollbar 控制是否出现滚动条，仅nvue有效 （默认 false ）
|
||||
* @property {String ｜ Number} columnWidth 描述瀑布流每一列的列宽，nvue生效 （默认 auto）
|
||||
* @property {String ｜ Number} width 瀑布流的宽度，nvue生效 （默认 屏幕宽 ）
|
||||
* @property {String ｜ Number} height 瀑布流的高度，nvue生效 （默认 屏幕高 ）
|
||||
* @property {Object} customStyle 定义需要用到的外部样式
|
||||
*
|
||||
* @example <uv-waterfall v-model="list"></uv-waterfall>
|
||||
*/
|
||||
export default {
|
||||
name: 'uv-waterfall',
|
||||
mixins: [mpMixin, mixin, props],
|
||||
data() {
|
||||
return {
|
||||
list1: [],
|
||||
list2: [],
|
||||
list3: [],
|
||||
list4: [],
|
||||
list5: [],
|
||||
// 临时列表
|
||||
tempList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 破坏value变量引用，否则数据会保持不变
|
||||
copyValue() {
|
||||
// #ifdef VUE2
|
||||
return this.$uv.deepClone(this.value)
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
return this.$uv.deepClone(this.modelValue)
|
||||
// #endif
|
||||
},
|
||||
columnNum() {
|
||||
return this.columnCount <= 0 ? 0 : this.columnCount >= 5 ? 5 : this.columnCount;
|
||||
},
|
||||
gapLeftStyle() {
|
||||
const style = {}
|
||||
style.width = this.$uv.addUnit(this.leftGap)
|
||||
return style;
|
||||
},
|
||||
gapRightStyle() {
|
||||
const style = {}
|
||||
style.width = this.$uv.addUnit(this.rightGap)
|
||||
return style;
|
||||
},
|
||||
gapCenterStyle() {
|
||||
const style = {}
|
||||
style.width = this.$uv.addUnit(this.columnGap)
|
||||
return style;
|
||||
},
|
||||
nvueWaterfallStyle() {
|
||||
const style = {};
|
||||
if (this.width != 0) style.width = this.$uv.addUnit(this.width)
|
||||
if (this.height != 0) style.height = this.$uv.addUnit(this.height)
|
||||
// 如果没有定义列表高度，则默认使用屏幕高度
|
||||
if (!style.width) style.width = this.$uv.addUnit(this.$uv.sys().windowWidth, 'px')
|
||||
if (!style.height) style.height = this.$uv.addUnit(this.$uv.sys().windowHeight, 'px')
|
||||
return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
copyValue(nVal, oVal) {
|
||||
// #ifndef APP-NVUE
|
||||
if (nVal.length != 0) {
|
||||
// 取出数组发生变化的部分
|
||||
let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0
|
||||
// 拼接原有数据
|
||||
this.tempList = this.tempList.concat(this.$uv.deepClone(nVal.slice(startIndex)))
|
||||
this.splitData()
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// #ifndef APP-NVUE
|
||||
this.tempList = this.$uv.deepClone(this.copyValue)
|
||||
this.splitData()
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
// 滚动到底部触发事件
|
||||
scrolltolower(e) {
|
||||
this.$uv.sleep(30).then(() => {
|
||||
this.$emit('scrolltolower')
|
||||
})
|
||||
},
|
||||
// 拆分数据
|
||||
async splitData() {
|
||||
let rectArr = [];
|
||||
let emitList = {};
|
||||
if (!this.tempList.length) return
|
||||
for (let i = 1; i <= this.columnNum; i++) {
|
||||
const rect = await this.$uvGetRect(`#uv-waterfall-${i}`);
|
||||
rectArr.push({ ...rect, name: i });
|
||||
}
|
||||
let item = this.tempList[0]
|
||||
// 因为经过上面两个await节点查询和定时器，数组有可能会变成空[]，导致item的值为undefined
|
||||
// 解决多次快速滚动会导致数据乱的问题
|
||||
if (!item) return
|
||||
const minCol = this.getMin(rectArr);
|
||||
// 列宽可能使用的到
|
||||
item.width = minCol.width;
|
||||
this[`list${minCol.name}`].push(item);
|
||||
emitList.name = `list${minCol.name}`;
|
||||
emitList.value = item;
|
||||
this.$emit('changeList', emitList);
|
||||
// 移除临时数组中已处理的数据
|
||||
this.tempList.splice(0, 1)
|
||||
// 如果还有数据则继续执行
|
||||
if (this.tempList.length) {
|
||||
let _timeout = this.addTime;
|
||||
// 部分平台在延时较短的情况会出现BUG
|
||||
// #ifdef MP-BAIDU
|
||||
_timeout = _timeout < 200 ? 200 : _timeout;
|
||||
// #endif
|
||||
await this.$uv.sleep(_timeout);
|
||||
this.splitData()
|
||||
} else {
|
||||
this.$emit('finish')
|
||||
}
|
||||
},
|
||||
getMin(arr) {
|
||||
let result = null;
|
||||
const filter = arr.filter(item => item.height == 0);
|
||||
if (!filter.length) {
|
||||
const min = Math.min.apply(Math, arr.map(item => {
|
||||
return item.height;
|
||||
}))
|
||||
const [item] = arr.filter(item => item.height == min);
|
||||
result = item;
|
||||
} else {
|
||||
let newArr = [];
|
||||
arr.map((item, index) => {
|
||||
newArr.push({ len: this[`list${index+1}`].length, item: item });
|
||||
});
|
||||
const minLen = Math.min.apply(Math, newArr.map(item => {
|
||||
return item.len;
|
||||
}))
|
||||
try {
|
||||
const { item } = newArr.find(item => item.len == minLen && item.item.height == 0);
|
||||
result = item;
|
||||
} catch (e) {
|
||||
const { item } = newArr.find(item => item.item.height == 0);
|
||||
result = item;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
// 清空数据列表
|
||||
async clear() {
|
||||
// 清除数据
|
||||
for (let i = 0; i < this.columnCount; i++) {
|
||||
this[`list${i+1}`] = [];
|
||||
}
|
||||
// #ifdef VUE2
|
||||
this.$emit('input', [])
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
this.$emit('update:modelValue', [])
|
||||
// #endif
|
||||
this.tempList = []
|
||||
await this.$uv.sleep(300);
|
||||
this.$emit('clear');
|
||||
},
|
||||
// 清除指定的某一条数据，根据id来实现
|
||||
remove(id) {
|
||||
let index = -1
|
||||
// 删除组件数据
|
||||
for (let i = 1; i <= this.columnCount; i++) {
|
||||
index = this[`list${i}`].findIndex(item => item[this.idKey] == id)
|
||||
if (index != -1) {
|
||||
this[`list${i}`].splice(index, 1)
|
||||
}
|
||||
}
|
||||
// 同时删除父组件对应的数据
|
||||
// #ifdef VUE2
|
||||
index = this.value.findIndex(item => item[this.idKey] == id)
|
||||
if (index != -1) this.$emit('input', this.value.splice(index, 1))
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
index = this.modelValue.findIndex(item => item[this.idKey] == id)
|
||||
if (index != -1) this.$emit('update:modelValue', this.modelValue.splice(index, 1))
|
||||
// #endif
|
||||
this.$emit('remove', id);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
||||
.uv-waterfall {
|
||||
@include flex(row);
|
||||
align-items: flex-start;
|
||||
&__column {
|
||||
@include flex(column);
|
||||
flex: 1;
|
||||
// #ifndef APP-NVUE
|
||||
height: auto;
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
{
|
||||
"id": "uv-waterfall",
|
||||
"displayName": "uv-waterfall 瀑布流 全面兼容vue3+2、app、h5、小程序等多端",
|
||||
"version": "1.0.8",
|
||||
"description": "该组件主要用于瀑布流式布局显示，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，同时集成nvue的原生瀑布流。",
|
||||
"keywords": [
|
||||
"uv-waterfall",
|
||||
"uvui",
|
||||
"uv-ui",
|
||||
"waterfall",
|
||||
"瀑布流"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uv-ui-tools",
|
||||
"uv-image",
|
||||
"uv-loading-icon"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
## Waterfall 瀑布流
|
||||
|
||||
> **组件名：uv-waterfall**
|
||||
|
||||
该组件主要用于瀑布流式布局显示，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，同时集成`nvue`的原生瀑布流用于`app-nvue`。常用于一些电商商品展示等，如某宝首页、x红书等。
|
||||
|
||||
研究uniapp瀑布流多年，**该方式是目前小程序端最佳方案**，灵活配置，简单易用，开箱即用。
|
||||
|
||||
该插件请根据文档耐心查看，`vue`的写法稍微麻烦点，但是效果是很好的，比之前上线的两个版本的瀑布流适用，更有扩展性，我自己的上线项目也是用的此插件。
|
||||
|
||||
# <a href="https://www.uvui.cn/components/waterfall.html" target="_blank">查看文档</a>
|
||||
|
||||
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
|
||||
|
||||
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||
Reference in New Issue
Block a user