Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化

master
Enzo 4 years ago
parent
8c9e0f9652
commit
3d3238027f
3 changed files with 236 additions and 13 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 227
      components/lf-waterfall-index/lf-waterfall.vue
  2. 18
      pages/discover/discover.vue
  3. 2
      pages/index/index/index.vue

227
components/lf-waterfall-index/lf-waterfall.vue
View File

@ -0,0 +1,227 @@
<template>
<view>
<u-waterfall v-model="dataList" ref="uWaterfall" v-for="itemFather of listlength" :key="itemFather" v-if="itemFather == tabindex">
<template v-slot:left="{leftList}">
<view class="list-warter" v-for="(item, index) in leftList" :key="index">
<view v-if="!item.is_ad" @click="onClick(item.id)">
<u-lazy-load threshold="600" border-radius="8px 8px 0 0" :height="!ifsale?333:0" :img-mode="ifsale?'aspectFill':''" :image="item.picture" :index="index">
<view class="list-label" v-if="ifsale">已售{{item.sale}}</view>
</u-lazy-load>
<view class="lf-p-20">
<view class="list-title">
{{item.title}}
</view>
<view class="list-price">
<!-- <text>{{item.price}}元</text> -->
<lf-price :price="item.price"></lf-price>
<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">{{item.original_price}}</text>
</view>
</view>
</view>
<view v-else @click="goAd(item.type,item.url)">
<u-lazy-load threshold="600" border-radius="8px 8px 0 0" :image="item.picture" :index="index"></u-lazy-load>
<view class="lf-p-20">
<view class="list-title">
{{item.title}}
</view>
</view>
</view>
</view>
</template>
<template v-slot:right="{rightList}">
<view class="list-warter" v-for="(item, index) in rightList" :key="index">
<view v-if="!item.is_ad" @click="onClick(item.id)">
<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :height="!ifsale?333:0" :img-mode="ifsale?'aspectFill':''" :image="item.picture" :index="index">
<view class="list-label" v-if="ifsale">已售{{item.sale}}</view>
</u-lazy-load>
<view class="lf-p-20">
<view class="list-title">
{{item.title}}
</view>
<view class="list-price">
<!-- <text>{{item.price}}元</text> -->
<lf-price :price="item.price"></lf-price>
<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">{{item.original_price}}</text>
</view>
</view>
</view>
<view v-else @click="goAd(item.type,item.url)">
<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.picture" :index="index"></u-lazy-load>
<view class="lf-p-20">
<view class="list-title">
{{item.title}}
</view>
</view>
</view>
</view>
</template>
</u-waterfall>
</view>
</template>
<script>
export default {
props: {
list: {
type: Array,
default: []
},
tabindex: {
type: Number,
default: 0
},
listlength: {
type: Number,
default: 1
},
ifsale: {
type: Boolean,
default: true
}
},
data(){
return {
// dataList: []
}
},
computed: {
dataList: {
get() {
console.log('组件当前数据====',this.list)
console.log(this.ifsale)
return this.list;
},
set(newValue) { console.log('newvalue',newValue) }
},
},
// watch: {
// list(newValue,oldValue) {
// console.log('值变了',newValue)
// console.log('旧值',this.$refs)
// // this.$forceUpdate();
// this.dataList = newValue
// console.log('当前值',this.dataList)
// return newValue
// }
// },
onShow(){
},
deactivated() {
},
onLoad() {
},
destroyed() {
},
methods: {
onClick(id){
this.$url('/pages/shop/goodsdetail?id='+id);
this.$emit('click');
},
goAd(type,url){
if(url) {
if(type == 0) {
this.$url(url);
}else {
this.$url('/pages/index/urlWeb?url='+url);
}
}
},
clear() {
console.log('组件名',this.$refs)
if(this.$isRight(this.$refs)){
this.$refs.uWaterfall[0].clear();
}
}
}
}
</script>
<style lang="scss" scoped="scoped">
// ====
.list-warter {
border-radius: 20rpx;
margin: 10px 5px;
margin-top: 0px;
background-color: #ffffff;
// padding: 8px;
position: relative;
overflow: hidden;
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
}
.u-close {
position: absolute;
top: 32rpx;
right: 32rpx;
}
.list-image {
width: 100%;
border-radius: 4px;
}
.list-title {
font-size: 28rpx;
font-weight: bold;
color: $u-main-color;
}
.list-label{
position: absolute;
bottom: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
width: 140rpx;
height: 48rpx;
border-radius: 20rpx 0rpx 0rpx 0rpx;
font-size: 22rpx;
color: #FFFFFF;
line-height: 48rpx;
text-align: center;
}
.list-tag {
display: flex;
margin-top: 5px;
}
.list-tag-owner {
background-color: $u-type-error;
color: #FFFFFF;
display: flex;
align-items: center;
padding: 4rpx 14rpx;
border-radius: 50rpx;
font-size: 20rpx;
line-height: 1;
}
.list-tag-text {
border: 1px solid $u-type-primary;
color: $u-type-primary;
margin-left: 10px;
border-radius: 50rpx;
line-height: 1;
padding: 4rpx 14rpx;
display: flex;
align-items: center;
border-radius: 50rpx;
font-size: 20rpx;
}
.list-price {
font-size: 30rpx;
color: $u-type-error;
margin-top: 5px;
display: flex;
align-items: center;
}
// ====
</style>

18
pages/discover/discover.vue
View File

@ -59,17 +59,10 @@
</swiper-item> </swiper-item>
</swiper> </swiper>
<view class="fixed-right"> <view class="fixed-right">
<view class="fixed-btn" hover-class="lf-opacity" @click="$url('/pages/discover/publish')">
<text class="lf-iconfont icon-fabu lf-font-50"></text>
</view>
</view>
<view class="fixed-right2" v-if="showTotop">
<view class="fixed-btn" hover-class="lf-opacity" @click="goTop()">
<view class="fixed-btn lf-m-b-20" hover-class="lf-opacity" v-if="showTotop" @click="goTop()">
<text class="lf-iconfont icon-zhiding lf-font-50"></text> <text class="lf-iconfont icon-zhiding lf-font-50"></text>
</view> </view>
</view>
<!-- 悬浮购物车入口 --> <!-- 悬浮购物车入口 -->
<view class="fixed-right1">
<view class="fixed-cart" hover-class="lf-opacity" @click="$url('/pages/store/cart/cart')"> <view class="fixed-cart" hover-class="lf-opacity" @click="$url('/pages/store/cart/cart')">
<text class="lf-iconfont icon-gouwulan icon-text"></text> <text class="lf-iconfont icon-gouwulan icon-text"></text>
<text class="tips">购物车</text> <text class="tips">购物车</text>
@ -78,8 +71,11 @@
<view class="angle-mark" v-else>99+</view> <view class="angle-mark" v-else>99+</view>
</block> </block>
</view> </view>
<view class="fixed-btn" hover-class="lf-opacity" @click="$url('/pages/discover/publish')">
<text class="lf-iconfont icon-fabu lf-font-50"></text>
</view> </view>
<!-- <view style="height: 30rpx;"></view> -->
</view>
<view style="height: 30rpx;"></view>
<lf-tabbar></lf-tabbar> <lf-tabbar></lf-tabbar>
</view> </view>
</template> </template>
@ -439,7 +435,7 @@
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.fixed-right1{
.fixed-right{
position: fixed; position: fixed;
right: 32rpx; right: 32rpx;
bottom: 450rpx; bottom: 450rpx;
@ -458,7 +454,7 @@
flex-direction: column; flex-direction: column;
color: #333333; color: #333333;
position: relative; position: relative;
margin-top: 30rpx;
margin-bottom: 20rpx;
.icon-text{ .icon-text{
font-size: 50rpx; font-size: 50rpx;
line-height: 1; line-height: 1;

2
pages/index/index/index.vue
View File

@ -106,7 +106,7 @@
import lfIndexFind from '@/components/lf-indexFind/lf-indexFind.vue'; import lfIndexFind from '@/components/lf-indexFind/lf-indexFind.vue';
import lfIndexShopMatrix from '@/components/lf-indexShopMatrix/lf-indexShopMatrix.vue'; import lfIndexShopMatrix from '@/components/lf-indexShopMatrix/lf-indexShopMatrix.vue';
import lfShopGoodsCard from '@/components/lf-shopGoodsCard/lf-shopGoodsCard.vue'; import lfShopGoodsCard from '@/components/lf-shopGoodsCard/lf-shopGoodsCard.vue';
import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
import lfWaterfall from '@/components/lf-waterfall-index/lf-waterfall.vue';
import lfMultiColumnAd from '@/components/lf-multiColumnAd/lf-multiColumnAd.vue'; import lfMultiColumnAd from '@/components/lf-multiColumnAd/lf-multiColumnAd.vue';
import lfSeckill from '@/components/lf-seckill/lf-seckill.vue'; import lfSeckill from '@/components/lf-seckill/lf-seckill.vue';
var app = getApp(); var app = getApp();

Write Preview
Loading…
Cancel
Save