shop-applet/pages/nongKe/cloud_entrepot/indexa.vue

1051 lines
24 KiB
Vue
Raw Normal View History

2024-05-14 17:25:13 +08:00
<template>
<view class="">
<!-- <view class="cloud_entrepot" :style="{'min-height': winHeight + 'px'}">
<view class="head-wrapper"></view>
<view class="town-title">{{town}}里海云仓</view>
<view class="body-wrapper">
<block v-for="(item,index) in cloudList" :key="index">
<navigator class="item"
:url="`/pages/nongKe/goods_list/index?cate_id=${item.category_id}&street=${street_code}&name=${item.category_name}`"
:style="{'background-image': `url(${item.background})`}">
<text class="item-title">{{item.category_name}}云仓服务</text>
<text>{{item.description}}</text>
<view class="chakan-btn">查看</view>
</navigator>
</block>
</view>
</view> -->
<view class="" v-if="cloudList.length>0">
<view class="">
<!-- <view :style="`height: ${appInfo.top}px;background-color: red;z-index: 99999;`"></view> -->
<transition name="fade">
<view class="head" style="padding-top: var(--status-bar-height);" v-if="showtit">
<view style="display: flex;align-items: center;">
<u--image :showLoading="true" src="/static/images/LHYC/FH.png" width="50.82rpx"
height="50.82rpx" @click='goBack'></u--image>
<view class="head_tit">
<!-- {{town}}里海云仓 -->
{{a}}
</view>
</view>
<view class="head_r" @click="showPop=true">
<u--image :showLoading="true" src="/static/images/LHYC/QB.png" width="50.82rpx"
height="50.82rpx"></u--image>
<text>全部</text>
</view>
</view>
</transition>
<transition name="fade">
<!-- 滚动 -->
<view class="heads" style="padding-top: var(--status-bar-height);" v-if="!showtit">
<view style="align-items: center;display: flex;justify-content: space-between;">
<view class="" style="display: flex;align-items: center;">
<view class="back" style="margin-right: 17rpx;">
<u--image :showLoading="true" src="/static/images/LHYC/FH.png" width="50.82rpx"
height="50.82rpx" @click='goBack'></u--image>
</view>
<view class="" style="font-size: 40rpx;transform: skewX(-10deg);">
供销综合云市场
</view>
</view>
<view style="position: relative;width: 289.14rpx;">
<u-search borderColor="#FF6D20" bgColor="white" :showAction="false" placeholder="请输入..."
v-model="keyword" class="serch_cls"></u-search>
<u--image class="img_cls" :showLoading="true" src="/static/images/GXSC/SS.png"
width="115.65rpx" height="56.82rpx" @click="serch"></u--image>
</view>
<view class='head_r' @click="showPop=true">
<u--image :showLoading="true" src="/static/images/LHYC/QB.png" width="50.82rpx"
height="50.82rpx"></u--image>
<text class="">全部</text>
<view class="flags">
</view>
</view>
</view>
</view>
</transition>
<view class="box">
<view :class="act_swiper">
<swiper :autoplay="false" :active-class="activeClass" :interval="3000" class="swipers"
:circular="true" previous-margin='0rpx' next-margin='0rpx' :current="current"
:disable-touch="true">
<swiper-item v-for="(item,index) in cloudList">
<u--image :showLoading="true" :src="item.cover" :class="act_img" width="750rpx"
height="998.83rpx"></u--image>
</swiper-item>
</swiper>
</view>
<view class="" style="height:998.83rpx;" v-if="act_swiper">
</view>
<!-- <u--image :showLoading="true" src="/static/images/LHYC/BG.png" width="750rpx"
height="998.83rpx"></u--image> -->
<view class="menu" style="z-index: 999;" v-if="showtit">
<swiper :autoplay="false" :active-class="activeClass" :interval="3000" class="swiper"
:circular="true" previous-margin='280rpx' next-margin='280rpx' :current="current"
@change="test">
<swiper-item v-for="(item,index) in cloudList" :class="{active_swiper:index==current}">
<u--image :showLoading="true" :src="item.background" width="175.23rpx"
height="175.23rpx"></u--image>
</swiper-item>
</swiper>
</view>
<transition name="fade">
<view class="content">
<view class="content_sift" :style="{position:pocls,top:(headtop+16)+'px'}" v-if="!showtit">
<view :class="{act:item.act}" v-for="item,index in actList" :key="index"
@click="screenGoods(item.screen,index)">
{{item.tit}}
</view>
</view>
<view class="goods_list" v-if="goodsList.length>0">
<view class="empty" v-if='showLoading'>
<u-loading-icon v-if='showLoading' text="加载中" textSize="18"></u-loading-icon>
</view>
<view class="goods" @click="godDetail(item)" v-else v-for="item,index in goodsList">
<view class="left">
<u--image :showLoading="true" :src="item.image" width="192.76rpx"
height="192.76rpx"></u--image>
</view>
<view class="right">
<view class="tit">
<!-- 亿福馒头粉纯天然无添加小麦粉加工 1000g/ -->
{{item.store_info}}
</view>
<view class="">
<view class="good_score">
<text style="margin-right: 10rpx;color: #F84221;">{{item.rate}}</text>
<text>{{item.reply_count}}评论</text>
</view>
<view class="good_price">
<view class="good_price_l">
<view class=""
style="color: #F84221;font-size: 22.78rpx;font-weight: bold;">
<text style="font-size: 30rpx;">{{item.price}}</text>
</view>
<view class="old_price">
30.00
</view>
</view>
<view class="good_price_r" ref="container">
<view :class="{x_tra:trnList[index].bottom }"
:style="`transform:translateY(${trnList[index].bottom}px);transition:${trnList[index].bottom?1:0}s cubic-bezier(0.4, -0.9, 0.75, 1);`"
@click.stop="addcart(index)">
<u--image :class="'act_class'+index"
:style="`transform:translateX(${trnList[index].left}px);transition:${trnList[index].bottom?1:0}s `"
src="/static/images/LHYC/J.png" width="49.07rpx"
height="49.07rpx"></u--image>
</view>
</view>
</view>
</view>
</view>
</view>
<view style="height: 100rpx;">
<!-- <u-loadmore :status="status" /> -->
</view>
</view>
<view v-else>
<view class="empty">
<view class="info">
<u--image :showLoading="true" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/noCart.png" width="400.09rpx"
height="400.09rpx"></u--image>
</view>
</view>
</view>
<view class="card" :style="`bottom:${appInfo.bottom}px`"
@click="navgo('/pages/order_addcart/order_addcart')">
<view class="left">
<view class="cart" :class="{act_cart:act_cart}"
style="position: relative;z-index: 9999999;">
<u--image :showLoading="true" src="/static/images/LHYC/GWC.png" width="63.09rpx"
height="63.09rpx"></u--image>
<view class="badge" v-show="goodsNum">
{{goodsNum}}
</view>
</view>
<view class="tot_price">
<view class="">
{{totalMoney}}
</view>
<!-- <view class="">
支持配送 售后无忧
</view> -->
</view>
</view>
<view class="right">
去结算
</view>
</view>
</view>
</transition>
</view>
<!-- http://192.168.1.5:8080/ -->
</view>
<!-- 组件 -->
<view<u-popup mode="right" :show="showPop" @close="showPop=false" @open="showPop=true">
<view class="pop">
<!-- <text>出淤泥而不染濯清涟而不妖</text> -->
<view style="height: var(--status-bar-height);"></view>
<view class="pop_head" style="display: flex;">
<u--image :showLoading="true" src="/static/images/LHYC/PFH.png" width="50.82rpx"
height="50.82rpx" @click='showPop=false'></u--image>
<view class="head_tit">
里海云仓
</view>
</view>
<view class="pop_content">
<view class="pop_li" @click="all(index)" v-for="item,index in cloudList" :key="index">
<u--image :showLoading="true" :src="item.background" width="84.11rpx"
height="84.11rpx"></u--image>
<view class="" style="margin-left: 20rpx;">
<view style="font-size: 33.29rpx;color: black;">
{{item.category_name}}云仓服务
</view>
<view class="" style="font-size: 22.78rpx;">
{{item.description}}
</view>
</view>
</view>
</view>
</view>
</u-popup>
</view>
<view class="empty" style="" v-else>
<view style="height: var(--status-bar-height);"></view>
<view class="info">
<u--image :showLoading="true" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/noCart.png" width="400.09rpx"
height="400.09rpx"></u--image>
</view>
</view>
<view class="" :style="`height:${appInfo.bottom}px;background-color:white`">
</view>
</view>
</view>
</template>
<script>
import {
cloudWarehouse,
getCityCloundShop
} from '@/api/api.js'
import {
Toast
} from '@/libs/uniApi';
import {
initiateAssistApi
} from '@/api/activity.js';
import {
getCartCounts,
getCartList,
} from '@/api/order.js';
import {
goShopDetail
} from '@/libs/order.js'
import {
postCartAdd,
} from '@/api/store.js';
import {
times
} from '../../../uni_modules/uview-ui/libs/function/digit';
export default {
data() {
let src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13';
return {
a: "",
trnList: [],
act_cart: false,
appInfo: {},
pocls: "",
type: "",
act_swiper: "",
current: 3,
goodsNum: 0,
goodsList: [],
winHeight: 0,
cloudList: [],
street_code: '',
totalMoney: 0,
town: '',
list: [1, 1, 1, 1, 1],
showPop: false,
keyword: "",
showLoading: false,
tot_price: 1,
showtit: true,
cartList: [],
activeClass: 'activeClass',
headtop: 0,
page_num: 1,
act_img: "",
cartTagInfo: {},
actList: [{
tit: '综合',
act: "",
screen: ""
}, {
tit: '销量',
act: "",
screen: "sales"
}, {
tit: '价格',
act: "",
screen: "price_asc"
}],
status: "loadmore",
flag: false,
}
},
onLoad(e) {
this.cartFn()
uni.getSystemInfo({
success: (res) => {
this.winHeight = res.windowHeight
this.appInfo = res.safeAreaInsets
},
});
this.street_code = e.street
this.town = e.town
this.getCloundShop()
},
// 分页
// onReachBottom() {
// if (this.flag) return
// this.status = "loading"
// this.page_num += 1
// this.flag = true
// this.getList().then(res => {
// return
// this.goodsList = this.goodsList.concat(res.data.data)
// this.flag = false
// if (!res.data.data.length) {
// this.status = "nomore"
// this.flag = true
// }
// })
// },
onPageScroll(e) {
let that = this
this.showtit = !Boolean(e.scrollTop)
uni.createSelectorQuery()
.in(this)
.select('.content')
.boundingClientRect(rect => {
if (rect.top <= (this.headtop + 16)) {
this.pocls = 'fixed'
this.act_swiper = 'act_swiper'
this.act_img = 'act_img'
} else {
this.pocls = ''
this.act_swiper = ''
this.act_img = ''
}
})
.exec();
if (this.headtop) return
uni.createSelectorQuery()
.in(this)
.select('.flags')
.boundingClientRect(rect => {
this.headtop = rect.top
})
.exec();
uni.createSelectorQuery()
.in(this)
.select('.cart')
.boundingClientRect(rect => {
this.cartTagInfo = rect
})
.exec();
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
this.getCloundShop()
this.getList()
},
// onReachBottom() {
// console.log("daidi")
// },
methods: {
cartFn() {
getCartList().then(res => {
this.cartList = res.data.list
this.cartList[0].list.forEach(e => {
this.totalMoney = this.totalMoney + Number(e.productAttr.price) * e.cart_num
})
})
getCartCounts().then(res => {
this.goodsNum = res.data[0].count
})
},
godDetail(item) {
goShopDetail(item, this.uid).then(res => {
if (this.isLogin) {
initiateAssistApi(item.activity_id).then(res => {
let id = res.data.product_assist_set_id;
uni.hideLoading();
uni.navigateTo({
url: '/pages/activity/assist_detail/index?id=' + id
});
}).catch((err) => {
uni.showToast({
title: err,
icon: 'none'
})
});
} else {
this.isAuto = true;
this.isShowAuth = true
}
})
},
serch() {
// console.log(this.keyword)
this.getList()
},
goBack() {
uni.navigateBack()
},
screenGoods(type, i) {
this.actList.forEach(item => {
item.act = ""
})
this.actList[i].act = true
this.type = type
this.getList()
// console.log(this.type)
},
navgo(url) {
uni.navigateTo({
url
})
},
getList() {
this.showLoading = true
cloudWarehouse({
street_code: this.street_code,
category_id: this.cloudList[this.current].category_id,
order: this.type,
keyword: this.keyword,
// page: this.page_num
}).then(res => {
this.goodsList = res.data.list
this.showLoading = false
})
},
addcart(i) {
let that = this
// return
console.log(i)
uni.createSelectorQuery().in(this).select(`.act_class${i}`).boundingClientRect(data1 => {
that.trnList[i].left = this.cartTagInfo.left - data1.left;
that.trnList[i].bottom = this.cartTagInfo.top - data1.top;
console.log(that.trnList[i])
timer = setTimeout(() => {
that.trnList[i].left = 0
that.trnList[i].bottom = 0
}, 1000)
}).exec();
// console.log(this.$refs.jia1[i])
// return
// this.$refs.jia[i].style.transition = "0.5s"
// this.$refs.jia[i].style.transform = `translateX(${this.trnList[i].left})`
// this.$refs.jia1[i].style.transform = `translateY(${this.trnList[i].bottom})`
// this.$refs.jia[i].style.transform = `translateY(${this.trnList[i].bottom})`
// this.trnList[i].left
// this.$refs.jia[i].style.translateY = this.trnList[i].bottom
// this.$refs.jia[i].style.translateY = this.trnList[i].bottom
// transform: ;
// return
// let data = {
// cart_num: 1,
// is_new: 0,
// product_attr_unique: i.sku[''].unique,
// product_id: i.product_id,
// product_type: i.product_type,
// spread_id: "",
// }
// let that = this
// let res = postCartAdd({
// ...data
// }).then((res, err) => {
// this.act_cart = true
// this.cartFn()
// uni.showToast({
// title: "加入成功",
// duration: 1000,
// })
// }).catch(err => {
// // this.act_cart = false
// uni.showToast({
// title: err,
// icon: "none",
// duration: 1000,
// })
// })
// setTimeout(() => {
// that.act_cart = false
// }, 500)
// uni.createSelectorQuery().in(this).select(`.act_class${i}`).boundingClientRect(data1 => {
// that.trnList[i].left = this.cartTagInfo.left - data1.left + 'px';
// that.trnList[i].bottom = this.cartTagInfo.top - data1.top + 'px';
// console.log(that.trnList[i])
// }).exec();
// this.tot_price += Number(price)
},
all(index) {
this.showPop = false
this.current = index
this.getList()
},
test(e) {
// console.log(e.target.current)
this.current = e.target.current
// console.log(e)
this.getList()
},
async getCloundShop() {
const {
data
} = await getCityCloundShop({
street_code: this.street_code
})
this.cloudList = data
cloudWarehouse({
street_code: this.street_code,
category_id: this.cloudList[this.current].category_id
}).then(res => {
this.goodsList = res.data.list
this.goodsList.forEach(item => {
this.trnList.push({
left: 0,
bottom: 0
})
})
})
console.log("sad", this.trnList)
data.length < 1 ? Toast("暂无云仓") : '';
}
}
}
</script>
<style lang="scss" scoped>
@keyframes addcatr {
0% {
opacity: 1;
}
95% {
opacity: 1;
}
100% {
opacity: 0;
// top: ;
}
}
.flags {
background-color: red;
z-index: 99999999;
}
.act_cart {
transition: 0.5s;
transform: scale(1.1);
// transform: translateY() translateY();
// transition: trans;
// transform: translate();
}
.box {
position: relative;
.content {
width: 100vw;
// position: absolute;
// top: 965rpx;
// border-top: 5px solid red;
z-index: 99;
background-color: #F4F4F4;
// padding: 0 10rpx;
}
.active_swiper {
transform: scale(1.3);
// transform: translateX() translateY();
}
.pictrue {
position: relative;
width: 100%;
height: 345rpx;
}
.act {
color: #FF6D20;
}
.act_content {
width: 100vw;
// position: absolute;
// top: 965rpx;
z-index: 99;
background-color: #F4F4F4;
padding: 0 10rpx;
// transition: opt\ linear;
padding-top: 200rpx;
}
// .act_class:active {
// transform: scale(2);
// }
.content_act {
width: 100vw;
position: absolute;
top: 165rpx;
z-index: 99;
background-color: #F4F4F4;
padding: 0 10rpx;
}
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.head_tits {
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0 20rpx;
color: white;
}
.img_cls {
position: absolute;
top: 50%;
right: 7rpx;
transform: translateY(-50%);
}
.pop {
width: 615.07rpx;
padding: 30rpx 28rpx;
.pop_content {
width: 559rpx;
height: 80vh;
background-color: #F4F4F4;
padding: 28rpx;
border-radius: 21.03rpx 21.03rpx 0rpx 0rpx;
margin-top: 47rpx;
.pop_head {
// display: flex;
}
.pop_li {
display: flex;
margin-bottom: 52rpx;
}
}
}
.head_tit {
margin-left: 20rpx;
font-size: 40rpx;
// font-weight: 700;
transform: skewX(-10deg);
}
.act {
color: red;
}
.head {
position: absolute;
z-index: 100;
color: white;
display: flex;
justify-content: space-between;
width: 100%;
padding: 0 20rpx;
align-items: center;
}
.heads {
position: fixed;
z-index: 100;
color: white;
width: 100%;
padding: 0 20rpx;
// background-color: white;
}
.menu {
position: absolute;
top: 748rpx;
width: 750rpx;
background-color: rgba(255, 255, 255, 0.5);
// height: 175.23rpx;
// box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.5);
box-shadow: 0 0 100rpx 30rpx rgba(255, 255, 255, 0.9);
}
.goods_list {
min-height: 95vh;
padding: 0 10rpx;
// background-color: red;
.goods {
display: flex;
padding: 21rpx;
background-color: white;
border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
margin-bottom: 20rpx;
.left {
width: 192.76rpx;
height: 192.76rpx;
border-radius: 10.51rpx 10.51rpx 10.51rpx 10.51rpx;
margin-right: 21rpx;
}
.right {
display: flex;
justify-content: space-between;
flex-direction: column;
.tit {
font-size: 29.79rpx;
color: black;
font-weight: bold;
}
.good_score {
font-size: 26rpx;
color: #B3B3B3;
margin-bottom: 15rpx;
}
.good_price {
display: flex;
justify-content: space-between;
align-items: center;
width: 60vw;
.good_price_r {
z-index: 9;
// transition: 1s linear;
}
.good_price_l {
display: flex;
.old_price {
color: #B3B3B3;
text-decoration: line-through;
font-size: 26.29rpx;
margin-left: 15rpx;
}
}
}
}
// color: greenyellow;
}
}
.activeClass {
width: 400rpx;
height: 400rpx;
}
.act_swiper {
height: 150rpx;
position: fixed;
z-index: 99;
overflow: hidden;
}
.act_img {
// transition:t;
transform: translateY(-848rpx);
}
// .act_swiper2 {
// height: 998rpx;
// }
.content_sift {
width: 750rpx;
padding: 22rpx 0;
display: flex;
justify-content: space-around;
background-color: white;
// background-color: green;
z-index: 99;
box-sizing: border-box;
margin-bottom: 20rpx;
}
.swipers {
width: 750rpx;
height: 998.83rpx;
}
.card {
width: 720rpx;
z-index: 999999;
// margin:auto;
left: 50%;
transform: translateX(-50%);
position: fixed;
// bottom: 0;
background-color: #333333;
height: 101.64rpx;
border-radius: 50.82rpx;
overflow: hidden;
color: white;
display: flex;
justify-content: space-between;
box-sizing: border-box;
.left {
display: flex;
align-items: center;
padding: 10rpx 35rpx;
.tot_price {
display: flex;
margin-left: 42rpx;
flex-direction: column;
justify-content: space-between;
}
}
.right {
font-size: 33.29rpx;
line-height: 50px;
background: linear-gradient(to right, #F84221, #FF6D20);
width: 175.23rpx;
text-align: center;
}
}
.x_tra {
// position: relative;
z-index: 999999;
animation-name: addcatr;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-fill-mode: forwards; // animation-iteration-count: 1;
/* 设置为1 */
// transition: 1s cubic-bezier(0.5, -0.5, 1, 1);
}
.badge {
position: absolute;
top: 0;
right: 0;
background-color: red;
transform: translate(50%, -50%);
padding: 0 10rpx;
border-radius: 30rpx;
}
.cloud_entrepot {
background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/ycbg.png") no-repeat;
background-size: cover;
padding-bottom: 92.98rpx;
}
.head-wrapper {
height: 485.96rpx;
width: 100%;
background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/top.png") no-repeat;
background-size: cover;
margin-bottom: 49.12rpx;
}
.town-title {
margin: 0 auto;
width: 100%;
text-align: center;
font-size: 50.88rpx;
color: #fff;
margin-bottom: 28.07rpx;
&::after {
content: '';
display: inline-block;
width: 66.67rpx;
height: 31.58rpx;
background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/you.png") no-repeat;
background-size: cover;
margin-left: 24.56rpx;
}
&::before {
content: '';
display: inline-block;
width: 66.67rpx;
height: 31.58rpx;
background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13/zuo.png") no-repeat;
background-size: cover;
margin-right: 24.56rpx;
}
}
.body-wrapper {
width: 694.74rpx;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0 auto;
.item {
width: 336.84rpx;
height: 100%;
padding: 24.56rpx 28.07rpx;
margin-bottom: 21.05rpx;
background-repeat: no-repeat;
background-size: 100% 100%;
box-sizing: border-box;
text {
display: block;
font-size: 24.56rpx;
color: #999;
margin-bottom: 14.04rpx;
}
.item-title {
font-size: 31.58rpx;
color: #333;
}
.chakan-btn {
width: 114.04rpx;
height: 49.12rpx;
font-size: 28.07rpx;
text-align: center;
line-height: 49.12rpx;
color: #fff;
margin-top: auto;
background: linear-gradient(90deg, #FE5300 0%, #F84221 100%);
border-radius: 50px;
}
}
}
.empty {
// display: flex;
// justify-content: space-between;
// flex-direction: column;
// align-items: center;
// padding: 20vh 0;
position: relative;
height: 100vh;
.info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// padding-top: 100px;
}
.head_r {
display: flex;
flex-direction: column;
align-items: center;
}
.cart {
z-index: 999;
}
</style>