新增批发,代发补货页面

This commit is contained in:
weipengfei 2023-11-04 09:32:32 +08:00
parent 9364edef73
commit 35fa04c9d5
17 changed files with 4420 additions and 1 deletions

19
api/behalfAdmin.js Normal file
View File

@ -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);
}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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: [], // 01
};
},
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>

View File

@ -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: [], // 01
};
},
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>

View File

@ -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: [], // 01
};
},
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>

View File

@ -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": [{
"root": "pages/goods_cate",
"name": "goods_cate",

View File

@ -219,6 +219,16 @@
</image>
<text class="text">发布管理</text>
</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}`)">
<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

BIN
static/images/SMRK/bar.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
static/images/SMRK/img.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
static/images/SMRK/name.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
static/images/clock_r.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 828 B

BIN
static/images/dingwei_r.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 881 B

BIN
static/images/phone_r.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 949 B