新增批发,代发补货页面
This commit is contained in:
parent
9364edef73
commit
35fa04c9d5
|
|
@ -0,0 +1,19 @@
|
||||||
|
// +----------------------------------------------------------------------
|
||||||
|
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||||
|
// +----------------------------------------------------------------------
|
||||||
|
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||||
|
// +----------------------------------------------------------------------
|
||||||
|
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||||
|
// +----------------------------------------------------------------------
|
||||||
|
// | Author: CRMEB Team <admin@crmeb.com>
|
||||||
|
// +----------------------------------------------------------------------
|
||||||
|
import request from "@/utils/request.js";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 补货代发列表
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
export function behalfAdminOrderList(data) {
|
||||||
|
return request.get("behalf_admin/order_list", data);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,425 @@
|
||||||
|
<template>
|
||||||
|
<view v-if="type == 0" class="wf-item-page wf-page0" :style="viewColor">
|
||||||
|
<view class='pictrue'>
|
||||||
|
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||||
|
<view v-if="item.stock == 0" class="sell_out">已售罄</view>
|
||||||
|
<view v-if="item.border_pic" :style="{ backgroundImage: `url(${item.border_pic})` }" class="border-picture">
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="text">
|
||||||
|
<view class='name line2'>{{item.store_name}}</view>
|
||||||
|
<view class="acea-row row-middle">
|
||||||
|
<view class='money'>￥<text class='num'>{{item.price}}</text></view>
|
||||||
|
</view>
|
||||||
|
<view v-if="item.show_svip_info && item.show_svip_info.show_svip_price && item.svip_price"
|
||||||
|
class="acea-row row-middle svip">
|
||||||
|
<text class='vip-money'>￥{{item.svip_price}}</text>
|
||||||
|
<view class="vipImg">
|
||||||
|
<image src="/static/images/svip.png"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- <view class="item_tags">
|
||||||
|
|
||||||
|
<text v-if="item.product_type == 0 && item.merchant.type_name"
|
||||||
|
class="font-bg-red b-color">{{item.merchant.type_name}}</text>
|
||||||
|
<text v-else-if="item.product_type == 0 && item.merchant.is_trader"
|
||||||
|
class="font-bg-red b-color">自营</text>
|
||||||
|
<text v-if="item.product_type != 0"
|
||||||
|
:class="'font_bg-red type'+item.product_type">{{item.product_type == 1 ? "秒杀" : item.product_type == 2 ? "预售" : item.product_type == 3 ? "助力" : item.product_type == 4 ? "拼团" : ""}}</text>
|
||||||
|
<text class="tags_item ticket" v-if="item.issetCoupon">领券</text>
|
||||||
|
<text class="tags_item delivery" v-if="item.delivery_free == 1">包邮</text>
|
||||||
|
</view> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-else-if="type == 1" class="wf-page1" :style="viewColor">
|
||||||
|
|
||||||
|
<view class='pictrue'>
|
||||||
|
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||||
|
<view v-if="item.stock == 0" class="sell_out">已售罄</view>
|
||||||
|
<view v-if="item.border_pic" :style="{ backgroundImage: `url(${item.border_pic})` }" class="border-picture">
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class='text'>
|
||||||
|
<view class='name line2'>{{item.store_name}}</view>
|
||||||
|
<view class="score"><span
|
||||||
|
style="font-size: 23rpx;font-family: PingFang SC-Semibold, PingFang SC;font-weight: 600;color: #F84221;margin-right: 28rpx;">{{item.rate}}</span>
|
||||||
|
{{item.reply_count}}条评论</view>
|
||||||
|
<view class="" style="display: flex;justify-content: space-between;">
|
||||||
|
<view class='money'>
|
||||||
|
<span style="font-size:30rpx;">￥</span>
|
||||||
|
<text class='num'><span style="font-size: 35rpx;">{{item.price.split('.')[0]}}.</span><span
|
||||||
|
style="font-size: 20rpx;">{{item.price.split('.')[1]}}</span></text>
|
||||||
|
</view>
|
||||||
|
<view class="items-img">
|
||||||
|
<image src="@/static/images/LHYC/J.png" mode="aspectFit"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="item.show_svip_info.show_svip && item.show_svip_info.show_svip_price"
|
||||||
|
class="acea-row row-middle svip">
|
||||||
|
<text class='vip-money'>￥{{item.svip_price}}</text>
|
||||||
|
|
||||||
|
<view class="vipImg">
|
||||||
|
<image src="/static/images/svip.png"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- <view class="item_tags acea-row">
|
||||||
|
|
||||||
|
<text v-if="item.merchant.type_name && item.product_type == 0"
|
||||||
|
class="font-bg-red b-color">{{item.merchant.type_name}}</text>
|
||||||
|
<text v-else-if="item.merchant.is_trader && item.product_type == 0"
|
||||||
|
class="font-bg-red b-color">自营</text>
|
||||||
|
<text v-if="item.product_type != 0"
|
||||||
|
:class="'font_bg-red type'+item.product_type">{{item.product_type == 1 ? "秒杀" : item.product_type == 2 ? "预售" : item.product_type == 3 ? "助力" : item.product_type == 4 ? "拼团" : ""}}</text>
|
||||||
|
<text class="tags_item ticket" v-if="item.issetCoupon">领券</text>
|
||||||
|
<text class="tags_item delivery" v-if="item.delivery_free == 1">包邮</text>
|
||||||
|
</view> -->
|
||||||
|
|
||||||
|
<view class="company" v-if="item.merchant" @click.stop="goShop(item.merchant.mer_id)">
|
||||||
|
<text class="line1">{{item.merchant.mer_name}}</text>
|
||||||
|
<view class="flex" v-if="isStore != '1'">
|
||||||
|
进店
|
||||||
|
<text class="iconfont icon-xiangyou"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 返佣 -->
|
||||||
|
<block v-if="item.max_extension>0 && (item.product_type == 0 || item.product_type == 2)">
|
||||||
|
<view class="foot-bar">
|
||||||
|
<text class="iconfont icon-fenxiang"></text>
|
||||||
|
最高赚 ¥{{item.max_extension}}
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
|
||||||
|
import {
|
||||||
|
mapGetters
|
||||||
|
} from "vuex";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
easyLoadimage
|
||||||
|
},
|
||||||
|
computed: mapGetters(['viewColor']),
|
||||||
|
props: {
|
||||||
|
item: {
|
||||||
|
type: Object,
|
||||||
|
require: true
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: Number | String,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
isStore: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: '1'
|
||||||
|
},
|
||||||
|
isLogin: {
|
||||||
|
type: Boolean,
|
||||||
|
require: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
goShop(id) {
|
||||||
|
this.$emit('goShop', id);
|
||||||
|
},
|
||||||
|
authOpen() {
|
||||||
|
this.$emit('authOpen');
|
||||||
|
},
|
||||||
|
followToggle(item) {
|
||||||
|
this.$emit('followToggle', item);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.items-img {
|
||||||
|
width: 44rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wf-item-page {
|
||||||
|
background: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wf-page0 .coupon {
|
||||||
|
background: rgba(255, 248, 247, 1);
|
||||||
|
border: 1px solid rgba(233, 51, 35, 1);
|
||||||
|
border-radius: 4rpx;
|
||||||
|
font-size: 20rpx;
|
||||||
|
margin-left: 18rpx;
|
||||||
|
padding: 1rpx 4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wf-page0 .pictrue {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 345rpx;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
/deep/image,
|
||||||
|
/deep/.easy-loadimage,
|
||||||
|
uni-image {
|
||||||
|
height: 345rpx;
|
||||||
|
border-radius: 16rpx 16rpx 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-picture {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 16rpx 16rpx 0 0;
|
||||||
|
background: center/cover no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.loadfail-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 360rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svip {
|
||||||
|
margin: 5rpx 0 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vip-money {
|
||||||
|
color: #282828;
|
||||||
|
font-size: 22rpx;
|
||||||
|
margin-left: 6rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vipImg {
|
||||||
|
width: 65rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
margin-left: 4rpx;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wf-page0 .name {
|
||||||
|
color: #282828;
|
||||||
|
margin: 20rpx 0 10rpx 0;
|
||||||
|
font-size: 13px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wf-page0 .text {
|
||||||
|
padding: 0 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wf-page0 .money {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: var(--view-priceColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-color {
|
||||||
|
background-color: var(--view-theme);
|
||||||
|
border: 1px solid var(--view-theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wf-page0 .money .num {
|
||||||
|
font-size: 34rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wf-page1 .wf-item {
|
||||||
|
.name {
|
||||||
|
font-size: 13px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wf-page1 .pictrue {
|
||||||
|
position: relative;
|
||||||
|
height: 345rpx;
|
||||||
|
width: 100% !important;
|
||||||
|
|
||||||
|
/deep/image,
|
||||||
|
/deep/.easy-loadimage,
|
||||||
|
uni-image {
|
||||||
|
height: 345rpx;
|
||||||
|
border-radius: 20rpx 20rpx 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-picture {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 20rpx 20rpx 0 0;
|
||||||
|
background: center/cover no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.sell_out {
|
||||||
|
display: flex;
|
||||||
|
width: 150rpx;
|
||||||
|
height: 150rpx;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 100%;
|
||||||
|
background: rgba(0, 0, 0, .6);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 30rpx;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin: -75rpx 0 0 -75rpx;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
width: 140rpx;
|
||||||
|
height: 140rpx;
|
||||||
|
border-radius: 100%;
|
||||||
|
border: 1px dashed #fff;
|
||||||
|
position: absolute;
|
||||||
|
top: 5rpx;
|
||||||
|
left: 5rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-img {
|
||||||
|
height: 345rpx;
|
||||||
|
max-height: 360rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wf-page1 .text {
|
||||||
|
padding: 20rpx 17rpx 26rpx 17rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wf-page1 .text .money {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
color: var(--view-priceColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wf-page1 .text .money .num {
|
||||||
|
font-size: 34rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_tags {
|
||||||
|
margin-top: 8rpx;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_tags .tags_item {
|
||||||
|
display: flex;
|
||||||
|
font-size: 20rpx;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 5rpx;
|
||||||
|
padding: 0 4rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_tags .tags_item.ticket {
|
||||||
|
color: var(--view-theme);
|
||||||
|
border: 1px solid var(--view-theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_tags .tags_item.delivery {
|
||||||
|
color: #FF9000;
|
||||||
|
border: 1px solid #FF9000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wf-page1 .text .money .ticket-big {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
max-width: 163rpx;
|
||||||
|
padding: 0 6rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
background-image: url(~static/images/yh.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
font-size: 20rpx;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wf-page1 .text .score {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
color: #B3B3B3;
|
||||||
|
font-size: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wf-page1 .text .company {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: #737373;
|
||||||
|
font-size: 20rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
|
||||||
|
.line1 {
|
||||||
|
max-width: 200rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
color: #282828;
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-size: 16rpx;
|
||||||
|
margin-top: 4rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.foot-bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 52rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-image: linear-gradient(-90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
|
||||||
|
border-radius: 0px 0px 16rpx 16rpx;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24rpx;
|
||||||
|
|
||||||
|
.icon-fenxiang {
|
||||||
|
font-size: 24rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,219 @@
|
||||||
|
<template>
|
||||||
|
<view class="wf-item-page" @click="gogogo(item)">
|
||||||
|
|
||||||
|
<view class='pictrue'>
|
||||||
|
<!-- <image :src="item.image[0]" mode="widthFix" class="item-img" /> -->
|
||||||
|
<image :src="item.image" mode="aspectFill" class="item-img"></image>
|
||||||
|
<!-- <easy-loadimage mode="widthFix" :image-src="item.image[0]"></easy-loadimage> -->
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="title">{{item.store_name}}</view>
|
||||||
|
<!-- <view class="tag">
|
||||||
|
<view class="tag-one">
|
||||||
|
自营商品
|
||||||
|
</view>
|
||||||
|
<view class="tag-two">
|
||||||
|
|
||||||
|
<text class="tag-twoa">折</text>
|
||||||
|
<text class="tag-twob">满20包邮</text>
|
||||||
|
</view>
|
||||||
|
</view> -->
|
||||||
|
<view class="relase">
|
||||||
|
<view class="relase-one">
|
||||||
|
{{item.rate}}
|
||||||
|
</view>
|
||||||
|
<view class="relase-two">
|
||||||
|
{{item.reply_count}}评论
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="price">
|
||||||
|
<span>￥</span>{{item.price.split('.')[0]}}.<text>{{item.price.split('.')[1]}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="item-info">
|
||||||
|
<view class="info-title" style="margin-right: 10rpx;">
|
||||||
|
{{item.merchant.mer_name}}
|
||||||
|
</view>
|
||||||
|
<view class="info-img">
|
||||||
|
<image src="@/static/images/you.png" mode="aspectFit"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
item: {
|
||||||
|
type: Object,
|
||||||
|
require: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
gogogo(item) {
|
||||||
|
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/goods_details/index?id=' + item.product_id
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.wf-item-page {
|
||||||
|
background: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.pictrue {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 345rpx;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 100%;
|
||||||
|
height: 345rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-info {}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-family: PingFang SC-Medium, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333333;
|
||||||
|
margin: 12px 0;
|
||||||
|
padding-right: 12rpx;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
|
||||||
|
margin-left: 21rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 21rpx;
|
||||||
|
|
||||||
|
.tag-one {
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rpx 9rpx;
|
||||||
|
border-radius: 11rpx 11rpx 11rpx 11rpx;
|
||||||
|
border: 1px solid #3274F9;
|
||||||
|
font-size: 19rpx;
|
||||||
|
font-family: PingFang SC-Regular, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-two {
|
||||||
|
|
||||||
|
.tag-twoa {
|
||||||
|
width: 130rpx;
|
||||||
|
text-align: center;
|
||||||
|
padding-left: 15rpx;
|
||||||
|
padding-right: 7rpx;
|
||||||
|
border-radius: 11rpx 0px 0px 0rpx;
|
||||||
|
border: 1px solid #F84221;
|
||||||
|
font-size: 19rpx;
|
||||||
|
font-family: PingFang SC-Regular, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-twob {
|
||||||
|
width: 130rpx;
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rpx 9rpx;
|
||||||
|
border-radius: 0px 11rpx 11rpx 0px;
|
||||||
|
border: 1px solid #F84221;
|
||||||
|
font-size: 19rpx;
|
||||||
|
font-family: PingFang SC-Regular, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.relase {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 21rpx;
|
||||||
|
margin-top: 12rpx;
|
||||||
|
height: 26rpx;
|
||||||
|
line-height: 26rpx;
|
||||||
|
|
||||||
|
.relase-one {
|
||||||
|
// font-style: italic;
|
||||||
|
transform: skewX(-15deg);
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-family: SF Pro Display-Regular Italic, SF Pro Display;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FF6D20;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.relase-two {
|
||||||
|
font-size: 23rpx;
|
||||||
|
font-family: PingFang SC-Regular, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #B3B3B3;
|
||||||
|
margin-left: 13rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
margin-left: 21rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
color: #F84221;
|
||||||
|
font-size: 44rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #F84221;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #F84221;
|
||||||
|
font-size: 37rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-info {
|
||||||
|
margin-left: 21rpx;
|
||||||
|
margin-bottom: 25rpx;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
width: 280rpx;
|
||||||
|
height: 39rpx;
|
||||||
|
line-height: 39rpx;
|
||||||
|
background: #F4F7FE;
|
||||||
|
border-radius: 19rpx 19rpx;
|
||||||
|
opacity: 1;
|
||||||
|
font-size: 23rpx;
|
||||||
|
padding-left: 11rpx;
|
||||||
|
font-family: PingFang SC-Regular, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #737373;
|
||||||
|
|
||||||
|
.info-img {
|
||||||
|
width: 21rpx;
|
||||||
|
height: 21rpx;
|
||||||
|
margin-top: 5rpx;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,121 @@
|
||||||
|
<template>
|
||||||
|
<view class="wf-item-page">
|
||||||
|
<view class='pictrue'>
|
||||||
|
<!-- <image :src="item.image[0]" mode="widthFix" class="item-img" /> -->
|
||||||
|
<image :src="item.image[0]" mode="aspectFill" class="item-img"></image>
|
||||||
|
<!-- <easy-loadimage mode="widthFix" :image-src="item.image[0]"></easy-loadimage> -->
|
||||||
|
</view>
|
||||||
|
<view class="goods_item_img" v-if="item.video_link.length>0">
|
||||||
|
<image src="@/static/images/sp.png" mode="aspectFit"></image>
|
||||||
|
</view>
|
||||||
|
<view class="title">{{item.title}}</view>
|
||||||
|
<view class="item-info">
|
||||||
|
<image :src="(item.author && item.author.avatar) || '/static/images/f.png'" mode="aspectFit"
|
||||||
|
class="info-avatar" />
|
||||||
|
<view class="info-nickname">{{ item.author.nickname }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
string
|
||||||
|
} from '../../plugin/clipboard/clipboard'
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
item: {
|
||||||
|
type: Object,
|
||||||
|
require: true
|
||||||
|
},
|
||||||
|
heightx: {
|
||||||
|
type: string,
|
||||||
|
require: true
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.wf-item-page {
|
||||||
|
background: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pictrue {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 345rpx;
|
||||||
|
|
||||||
|
image{
|
||||||
|
width: 100% ;
|
||||||
|
height: 345rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.item-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods_item_img {
|
||||||
|
position: absolute;
|
||||||
|
top: 20rpx;
|
||||||
|
right: 18rpx;
|
||||||
|
width: 52rpx;
|
||||||
|
height: 52rpx;
|
||||||
|
z-index: 1 !important;
|
||||||
|
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-family: PingFang SC-Medium, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333333;
|
||||||
|
margin: 12px 0;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-avatar {
|
||||||
|
width: 49rpx;
|
||||||
|
height: 49rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-nickname {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,195 @@
|
||||||
|
<template>
|
||||||
|
<view :class="'wf-page wf-page'+type">
|
||||||
|
<!-- left -->
|
||||||
|
<view>
|
||||||
|
<view id="left" v-if="leftList.length">
|
||||||
|
<view v-for="(item,index) in leftList" :key="index"
|
||||||
|
class="wf-item" @tap="itemTap(item)">
|
||||||
|
<WaterfallsFlowItem :item="item" :isStore="isStore" :type="type" @goShop="goShop"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- right -->
|
||||||
|
<view>
|
||||||
|
<view id="right" v-if="rightList.length">
|
||||||
|
<view v-for="(item,index) in rightList" :key="index"
|
||||||
|
class="wf-item" @tap="itemTap(item)">
|
||||||
|
<WaterfallsFlowItem :item="item" :isStore="isStore" :type="type" @goShop="goShop"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import WaterfallsFlowItem from '../WaterfallsFlowItemSupply/WaterfallsFlowItem.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
WaterfallsFlowItem
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
// 瀑布流列表
|
||||||
|
wfList: {
|
||||||
|
type: Array,
|
||||||
|
require: true
|
||||||
|
},
|
||||||
|
updateNum: {
|
||||||
|
type: Number,
|
||||||
|
default: 10
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
isStore: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: '1'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
allList: [], // 全部列表
|
||||||
|
leftList: [], // 左边列表
|
||||||
|
rightList: [], // 右边列表
|
||||||
|
mark: 0, // 列表标记
|
||||||
|
boxHeight: [], // 下标0和1分别为左列和右列高度
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 监听列表数据变化
|
||||||
|
wfList: {
|
||||||
|
handler(nVal,oVal){
|
||||||
|
// 如果数据为空或新的列表数据少于旧的列表数据（通常为下拉刷新或切换排序或使用筛选器），初始化变量
|
||||||
|
if (!this.wfList.length ||
|
||||||
|
(this.wfList.length === this.updateNum && this.wfList.length <= this.allList.length)) {
|
||||||
|
this.allList = [];
|
||||||
|
this.leftList = [];
|
||||||
|
this.rightList = [];
|
||||||
|
this.boxHeight = [];
|
||||||
|
this.mark = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果列表有值，调用waterfall方法
|
||||||
|
if (this.wfList.length) {
|
||||||
|
this.allList = this.wfList;
|
||||||
|
this.leftList = [];
|
||||||
|
this.rightList = [];
|
||||||
|
this.boxHeight = [];
|
||||||
|
this.allList.forEach((v, i) => {
|
||||||
|
if(this.allList.length < 3 || (this.allList.length <= 7 && this.allList.length - i > 1) || (this.allList.length > 7 && this.allList.length - i > 2)) {
|
||||||
|
if(i % 2){
|
||||||
|
this.rightList.push(v);
|
||||||
|
}else{
|
||||||
|
this.leftList.push(v);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if(this.allList.length < 3){
|
||||||
|
this.mark = this.allList.length+1;
|
||||||
|
}else if(this.allList.length <= 7){
|
||||||
|
this.mark = this.allList.length - 1;
|
||||||
|
}else{
|
||||||
|
this.mark = this.allList.length - 2;
|
||||||
|
}
|
||||||
|
if(this.mark < this.allList.length){
|
||||||
|
this.waterFall()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
deep:true
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
},
|
||||||
|
|
||||||
|
// 监听标记，当标记发生变化，则执行下一个item排序
|
||||||
|
mark() {
|
||||||
|
const len = this.allList.length;
|
||||||
|
if (this.mark < len && this.mark !== 0 && this.boxHeight.length) {
|
||||||
|
this.waterFall();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 瀑布流排序
|
||||||
|
waterFall() {
|
||||||
|
const i = this.mark;
|
||||||
|
if (i == 0) {
|
||||||
|
// 初始化，从左边开始插入
|
||||||
|
this.leftList.push(this.allList[i]);
|
||||||
|
// 更新左边列表高度
|
||||||
|
this.getViewHeight(0);
|
||||||
|
} else if (i == 1) {
|
||||||
|
// 第二个item插入，默认为右边插入
|
||||||
|
this.rightList.push(this.allList[i]);
|
||||||
|
// 更新右边列表高度
|
||||||
|
this.getViewHeight(1);
|
||||||
|
} else {
|
||||||
|
// 根据左右列表高度判断下一个item应该插入哪边
|
||||||
|
if(!this.boxHeight.length){
|
||||||
|
this.rightList.length < this.leftList.length
|
||||||
|
? this.rightList.push(this.allList[i])
|
||||||
|
: this.leftList.push(this.allList[i]);
|
||||||
|
} else {
|
||||||
|
const leftOrRight = this.boxHeight[0] > this.boxHeight[1] ? 1 : 0;
|
||||||
|
if (leftOrRight) {
|
||||||
|
this.rightList.push(this.allList[i])
|
||||||
|
} else {
|
||||||
|
this.leftList.push(this.allList[i])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 更新插入列表高度
|
||||||
|
this.getViewHeight();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取列表高度
|
||||||
|
getViewHeight() {
|
||||||
|
// 使用nextTick，确保页面更新结束后，再请求高度
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(()=>{
|
||||||
|
uni.createSelectorQuery().in(this).select('#right').boundingClientRect(res => {
|
||||||
|
res ? this.boxHeight[1] = res.height : '';
|
||||||
|
uni.createSelectorQuery().in(this).select('#left').boundingClientRect(res => {
|
||||||
|
res ? this.boxHeight[0] = res.height : '';
|
||||||
|
this.mark = this.mark + 1;
|
||||||
|
}).exec();
|
||||||
|
}).exec();
|
||||||
|
},100)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// item点击
|
||||||
|
itemTap(item) {
|
||||||
|
this.$emit('itemTap', item)
|
||||||
|
},
|
||||||
|
// item点击
|
||||||
|
goShop(item) {
|
||||||
|
this.$emit('goShop', item)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$page-padding: 10px;
|
||||||
|
$grid-gap: 10px;
|
||||||
|
|
||||||
|
.wf-page {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-gap: $grid-gap;
|
||||||
|
}
|
||||||
|
.wf-item {
|
||||||
|
width: calc((100vw - 2 * #{$page-padding} - #{$grid-gap}) / 2);
|
||||||
|
padding-bottom: $grid-gap;
|
||||||
|
}
|
||||||
|
.wf-page1 .wf-item{
|
||||||
|
margin-top: 20rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
.wf-item-page{
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,208 @@
|
||||||
|
<template>
|
||||||
|
<view :class="'wf-page wf-page'+type">
|
||||||
|
<!-- left -->
|
||||||
|
|
||||||
|
|
||||||
|
<view>
|
||||||
|
|
||||||
|
<view id="left" v-if="leftList.length">
|
||||||
|
<view v-for="(item,index) in leftList" :key="index"
|
||||||
|
class="wf-itema" @tap="itemTap(item)">
|
||||||
|
<WaterfallsFlowItem :item="item" :isStore="isStore" :type="type" @goShop="goShop"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- right -->
|
||||||
|
<view>
|
||||||
|
<view id="right" v-if="rightList.length">
|
||||||
|
<view v-for="(item,index) in rightList" :key="index"
|
||||||
|
class="wf-itemb" @tap="itemTap(item)">
|
||||||
|
<WaterfallsFlowItem :item="item" :isStore="isStore" :type="type" @goShop="goShop"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import WaterfallsFlowItem from '../WaterfallsFlowItem/WaterfallsFlowItemo.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
WaterfallsFlowItem
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
// 瀑布流列表
|
||||||
|
wfList: {
|
||||||
|
type: Array,
|
||||||
|
require: true
|
||||||
|
},
|
||||||
|
updateNum: {
|
||||||
|
type: Number,
|
||||||
|
default: 10
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
isStore: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: '1'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
allList: [], // 全部列表
|
||||||
|
leftList: [], // 左边列表
|
||||||
|
rightList: [], // 右边列表
|
||||||
|
mark: 0, // 列表标记
|
||||||
|
boxHeight: [], // 下标0和1分别为左列和右列高度
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 监听列表数据变化
|
||||||
|
wfList: {
|
||||||
|
|
||||||
|
handler(nVal,oVal){
|
||||||
|
|
||||||
|
// 如果数据为空或新的列表数据少于旧的列表数据（通常为下拉刷新或切换排序或使用筛选器），初始化变量
|
||||||
|
if (!this.wfList.length ||
|
||||||
|
(this.wfList.length === this.updateNum && this.wfList.length <= this.allList.length)) {
|
||||||
|
this.allList = [];
|
||||||
|
this.leftList = [];
|
||||||
|
this.rightList = [];
|
||||||
|
this.boxHeight = [];
|
||||||
|
this.mark = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果列表有值，调用waterfall方法
|
||||||
|
if (this.wfList.length) {
|
||||||
|
this.allList = this.wfList;
|
||||||
|
this.leftList = [];
|
||||||
|
this.rightList = [];
|
||||||
|
this.boxHeight = [];
|
||||||
|
this.allList.forEach((v, i) => {
|
||||||
|
if(this.allList.length < 3 || (this.allList.length <= 7 && this.allList.length - i > 1) || (this.allList.length > 7 && this.allList.length - i > 2)) {
|
||||||
|
if(i % 2){
|
||||||
|
this.rightList.push(v);
|
||||||
|
}else{
|
||||||
|
this.leftList.push(v);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if(this.allList.length < 3){
|
||||||
|
this.mark = this.allList.length+1;
|
||||||
|
}else if(this.allList.length <= 7){
|
||||||
|
this.mark = this.allList.length - 1;
|
||||||
|
}else{
|
||||||
|
this.mark = this.allList.length - 2;
|
||||||
|
}
|
||||||
|
if(this.mark < this.allList.length){
|
||||||
|
this.waterFall()
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
deep:true
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
// 监听标记，当标记发生变化，则执行下一个item排序
|
||||||
|
mark() {
|
||||||
|
const len = this.allList.length;
|
||||||
|
if (this.mark < len && this.mark !== 0 && this.boxHeight.length) {
|
||||||
|
this.waterFall();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 瀑布流排序
|
||||||
|
waterFall() {
|
||||||
|
const i = this.mark;
|
||||||
|
|
||||||
|
if (i == 0) {
|
||||||
|
// 初始化，从左边开始插入
|
||||||
|
this.leftList.push(this.allList[i]);
|
||||||
|
// 更新左边列表高度
|
||||||
|
this.getViewHeight(0);
|
||||||
|
} else if (i == 1) {
|
||||||
|
// 第二个item插入，默认为右边插入
|
||||||
|
this.rightList.push(this.allList[i]);
|
||||||
|
// 更新右边列表高度
|
||||||
|
this.getViewHeight(1);
|
||||||
|
} else {
|
||||||
|
// 根据左右列表高度判断下一个item应该插入哪边
|
||||||
|
if(!this.boxHeight.length){
|
||||||
|
this.rightList.length < this.leftList.length
|
||||||
|
? this.rightList.push(this.allList[i])
|
||||||
|
: this.leftList.push(this.allList[i]);
|
||||||
|
} else {
|
||||||
|
const leftOrRight = this.boxHeight[0] > this.boxHeight[1] ? 1 : 0;
|
||||||
|
if (leftOrRight) {
|
||||||
|
this.rightList.push(this.allList[i])
|
||||||
|
} else {
|
||||||
|
this.leftList.push(this.allList[i])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 更新插入列表高度
|
||||||
|
this.getViewHeight();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取列表高度
|
||||||
|
getViewHeight() {
|
||||||
|
// 使用nextTick，确保页面更新结束后，再请求高度
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(()=>{
|
||||||
|
uni.createSelectorQuery().in(this).select('#right').boundingClientRect(res => {
|
||||||
|
res ? this.boxHeight[1] = res.height : '';
|
||||||
|
uni.createSelectorQuery().in(this).select('#left').boundingClientRect(res => {
|
||||||
|
res ? this.boxHeight[0] = res.height : '';
|
||||||
|
this.mark = this.mark + 1;
|
||||||
|
}).exec();
|
||||||
|
}).exec();
|
||||||
|
},100)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// item点击
|
||||||
|
itemTap(item) {
|
||||||
|
// this.$emit('itemTap', item)
|
||||||
|
},
|
||||||
|
// item点击
|
||||||
|
goShop(item) {
|
||||||
|
this.$emit('goShop', item)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$page-padding: 10px;
|
||||||
|
$grid-gap: 5px;
|
||||||
|
|
||||||
|
.wf-page {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-gap: $grid-gap;
|
||||||
|
}
|
||||||
|
.wf-itema {
|
||||||
|
width: 356rpx;
|
||||||
|
padding-bottom: $grid-gap;
|
||||||
|
}
|
||||||
|
.wf-itemb {
|
||||||
|
width: 356rpx;
|
||||||
|
padding-bottom: $grid-gap;
|
||||||
|
}
|
||||||
|
.wf-page1 .wf-item{
|
||||||
|
margin-top: 20rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
.wf-item-page{
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,207 @@
|
||||||
|
<template>
|
||||||
|
<view :class="'wf-page wf-page'+type">
|
||||||
|
<!-- left -->
|
||||||
|
|
||||||
|
<view>
|
||||||
|
|
||||||
|
<view id="left" v-if="leftList.length">
|
||||||
|
<view v-for="(item,index) in leftList" :key="index"
|
||||||
|
class="wf-itema" @tap="itemTap(item)">
|
||||||
|
<WaterfallsFlowItem :item="item" :isStore="isStore" :heightx="251" :type="type" @goShop="goShop"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- right -->
|
||||||
|
<view>
|
||||||
|
<view id="right" v-if="rightList.length">
|
||||||
|
<view v-for="(item,index) in rightList" :key="index"
|
||||||
|
class="wf-itemb" @tap="itemTap(item)">
|
||||||
|
<WaterfallsFlowItem :item="item" :isStore="isStore" :heightx="336" :type="type" @goShop="goShop"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import WaterfallsFlowItem from '../WaterfallsFlowItem/WaterfallsFlowItems.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
WaterfallsFlowItem
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
// 瀑布流列表
|
||||||
|
wfList: {
|
||||||
|
type: Array,
|
||||||
|
require: true
|
||||||
|
},
|
||||||
|
updateNum: {
|
||||||
|
type: Number,
|
||||||
|
default: 10
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
isStore: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: '1'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
allList: [], // 全部列表
|
||||||
|
leftList: [], // 左边列表
|
||||||
|
rightList: [], // 右边列表
|
||||||
|
mark: 0, // 列表标记
|
||||||
|
boxHeight: [], // 下标0和1分别为左列和右列高度
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 监听列表数据变化
|
||||||
|
wfList: {
|
||||||
|
|
||||||
|
handler(nVal,oVal){
|
||||||
|
|
||||||
|
// 如果数据为空或新的列表数据少于旧的列表数据（通常为下拉刷新或切换排序或使用筛选器），初始化变量
|
||||||
|
if (!this.wfList.length ||
|
||||||
|
(this.wfList.length === this.updateNum && this.wfList.length <= this.allList.length)) {
|
||||||
|
this.allList = [];
|
||||||
|
this.leftList = [];
|
||||||
|
this.rightList = [];
|
||||||
|
this.boxHeight = [];
|
||||||
|
this.mark = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果列表有值，调用waterfall方法
|
||||||
|
if (this.wfList.length) {
|
||||||
|
this.allList = this.wfList;
|
||||||
|
this.leftList = [];
|
||||||
|
this.rightList = [];
|
||||||
|
this.boxHeight = [];
|
||||||
|
this.allList.forEach((v, i) => {
|
||||||
|
if(this.allList.length < 3 || (this.allList.length <= 7 && this.allList.length - i > 1) || (this.allList.length > 7 && this.allList.length - i > 2)) {
|
||||||
|
if(i % 2){
|
||||||
|
this.rightList.push(v);
|
||||||
|
}else{
|
||||||
|
this.leftList.push(v);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if(this.allList.length < 3){
|
||||||
|
this.mark = this.allList.length+1;
|
||||||
|
}else if(this.allList.length <= 7){
|
||||||
|
this.mark = this.allList.length - 1;
|
||||||
|
}else{
|
||||||
|
this.mark = this.allList.length - 2;
|
||||||
|
}
|
||||||
|
if(this.mark < this.allList.length){
|
||||||
|
this.waterFall()
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
deep:true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 监听标记，当标记发生变化，则执行下一个item排序
|
||||||
|
mark() {
|
||||||
|
const len = this.allList.length;
|
||||||
|
if (this.mark < len && this.mark !== 0 && this.boxHeight.length) {
|
||||||
|
this.waterFall();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
|
||||||
|
// 瀑布流排序
|
||||||
|
waterFall() {
|
||||||
|
const i = this.mark;
|
||||||
|
if (i == 0) {
|
||||||
|
// 初始化，从左边开始插入
|
||||||
|
this.leftList.push(this.allList[i]);
|
||||||
|
// 更新左边列表高度
|
||||||
|
this.getViewHeight(0);
|
||||||
|
} else if (i == 1) {
|
||||||
|
// 第二个item插入，默认为右边插入
|
||||||
|
this.rightList.push(this.allList[i]);
|
||||||
|
// 更新右边列表高度
|
||||||
|
this.getViewHeight(1);
|
||||||
|
} else {
|
||||||
|
// 根据左右列表高度判断下一个item应该插入哪边
|
||||||
|
if(!this.boxHeight.length){
|
||||||
|
this.rightList.length < this.leftList.length
|
||||||
|
? this.rightList.push(this.allList[i])
|
||||||
|
: this.leftList.push(this.allList[i]);
|
||||||
|
} else {
|
||||||
|
const leftOrRight = this.boxHeight[0] > this.boxHeight[1] ? 1 : 0;
|
||||||
|
if (leftOrRight) {
|
||||||
|
this.rightList.push(this.allList[i])
|
||||||
|
} else {
|
||||||
|
this.leftList.push(this.allList[i])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 更新插入列表高度
|
||||||
|
this.getViewHeight();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取列表高度
|
||||||
|
getViewHeight() {
|
||||||
|
// 使用nextTick，确保页面更新结束后，再请求高度
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(()=>{
|
||||||
|
uni.createSelectorQuery().in(this).select('#right').boundingClientRect(res => {
|
||||||
|
res ? this.boxHeight[1] = res.height : '';
|
||||||
|
uni.createSelectorQuery().in(this).select('#left').boundingClientRect(res => {
|
||||||
|
res ? this.boxHeight[0] = res.height : '';
|
||||||
|
this.mark = this.mark + 1;
|
||||||
|
}).exec();
|
||||||
|
}).exec();
|
||||||
|
},100)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// item点击
|
||||||
|
itemTap(item) {
|
||||||
|
this.$emit('itemTap', item)
|
||||||
|
},
|
||||||
|
// item点击
|
||||||
|
goShop(item) {
|
||||||
|
this.$emit('goShop', item)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$page-padding: 10px;
|
||||||
|
$grid-gap: 5px;
|
||||||
|
|
||||||
|
.wf-page {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-gap: $grid-gap;
|
||||||
|
}
|
||||||
|
.wf-itema {
|
||||||
|
width: 356rpx;
|
||||||
|
padding-bottom: $grid-gap;
|
||||||
|
}
|
||||||
|
.wf-itemb {
|
||||||
|
width: 356rpx;
|
||||||
|
padding-bottom: $grid-gap;
|
||||||
|
}
|
||||||
|
.wf-page1 .wf-item{
|
||||||
|
margin-top: 20rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
.wf-item-page{
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
23
pages.json
23
pages.json
|
|
@ -224,7 +224,28 @@
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// }
|
// }
|
||||||
],
|
,{
|
||||||
|
"path" : "pages/wholesale/wholesale/wholesale",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "供应链批发",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationBarBackgroundColor": "#ffffff"
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "pages/replace_replenishment/index",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "代发补货",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationBarBackgroundColor": "#ff5c2d",
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
],
|
||||||
"subPackages": [{
|
"subPackages": [{
|
||||||
"root": "pages/goods_cate",
|
"root": "pages/goods_cate",
|
||||||
"name": "goods_cate",
|
"name": "goods_cate",
|
||||||
|
|
|
||||||
|
|
@ -219,6 +219,16 @@
|
||||||
</image>
|
</image>
|
||||||
<text class="text">发布管理</text>
|
<text class="text">发布管理</text>
|
||||||
</view>
|
</view>
|
||||||
|
<view v-if="userInfoData.mer_info.type_code === 'TypeTownSupplyChain'" class="examine" @click="navigator(`/pages/wholesale/wholesale/wholesale`)">
|
||||||
|
<image class="icon_img" src="@/static/images/index15.png" mode="aspectFit">
|
||||||
|
</image>
|
||||||
|
<text class="text">供应链批发</text>
|
||||||
|
</view>
|
||||||
|
<view v-if="userInfoData.mer_info.type_code === 'TypeTownSupplyChain'" class="examine" @click="navigator(`/pages/replace_replenishment/index`)">
|
||||||
|
<image class="icon_img" src="@/static/images/index15.png" mode="aspectFit">
|
||||||
|
</image>
|
||||||
|
<text class="text">代发补货</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
<!-- <view class="examine" @click="navigator(`/pages/users/user_invoice_Finance/index?mer_id=${mer_id}`)">
|
<!-- <view class="examine" @click="navigator(`/pages/users/user_invoice_Finance/index?mer_id=${mer_id}`)">
|
||||||
<image class="icon_img" src="@/static/images/cwgk.png" mode="aspectFit">
|
<image class="icon_img" src="@/static/images/cwgk.png" mode="aspectFit">
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 828 B |
Binary file not shown.
|
After Width: | Height: | Size: 881 B |
Binary file not shown.
|
After Width: | Height: | Size: 949 B |
Loading…
Reference in New Issue