luban-mall/components/swiper-tab/swiper-tab-slide.vue

170 lines
6.6 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view>
<view class="posi-sticky pad-x20 pad-zy20" :style="{top: newTop +'px'}">
<!-- <scrollTextSlide @changeEv="tabTap" :list="tagList" :activeIndex="activeIndex"></scrollTextSlide> -->
<swiper-tab-jl :list="tagList" v-model="activeIndex" @changeEv="tabTap" itemColor="#FFFFFF"></swiper-tab-jl>
</view>
<swiper :style="{height: swiperHeight + 'px'}" class="fon30" style="background-color: #f4f4f4;" :current="activeIndex" @change="swiperChange">
<swiper-item v-for="(item,index) in list.length" :key="index" class="pad-s30">
<scroll-view scroll-y @scrolltolower="scrollBottomEv" style="height: 100%;">
<!-- 列表数据 -->
<view class="radius20 bacf pad-zy30 mar-x25 mar-zy40" @tap="goDetail" v-for="(item1,index1) in list[index]" :key="index1">
<view class="disjbac bbot pad30" style="margin: 0 -30rpx;">
<view class="">订单号2928392832</view>
<view class="" :style="{color: ['#f83030','#f83030','#f83030','#a0a0a0','#a0a0a0'][0]}">{{['已下单','制作中','已发货','已完成','已取消'][0]}}</view>
</view>
<view class="disjb borbot pad-sx30" v-for="(item2,index2) in 2" :key="index2">
<image class="mar-y30 flexs radius40" src="https://s6.jpg.cm/2022/05/06/Lx4T45.jpg" mode="" style="width: 210rpx;height: 210rpx;"></image>
<view class="width100 disjb fc" style="height: 210rpx;">
<view class="clips2 fon24">{{item1.title}}</view>
<view class="">
<view class="fon24 mar-x30" style="color: #8c8c9b;">单位{{item1.title}}</view>
<view class="disjbac ">
<view class="textc bold">{{$toolAll.tools.changeNum(item1.price)}}</view>
<view class="fon24" style="color: #8c8c9b;">x1</view>
</view>
</view>
</view>
</view>
<view class="disjbac tbot pad30" style="margin: 0 -30rpx;">
<view class="bold" style="color: #f83030;">合计2390.00</view>
<!-- <view class="btn" @tap.stop="cancleEv">取消订单</view> -->
<view class="btn csbtn" @tap.stop="buyEv">再次购买</view>
</view>
</view>
<view class="pad-sx40 col9 tcenter" v-if="ifloading" style="position: fixed;bottom: 0;left: 0;right: 0;z-index: 1;">加载中...</view>
<view class="pad-sx40"><pitera textStr="——到底啦——"></pitera></view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
// import scrollTextSlide from '@/components/scroll-views/scroll-text-slide.vue';
import swiperTabJl from '@/components/swiper-tab/swiper-tab-jl.vue';
import pitera from '@/components/nothing/pitera';
export default {
name:"swiper-tab-slide",
components:{
// scrollTextSlide,
swiperTabJl,
pitera
},
props:{
ifloading:{
type:Boolean,
default:false
},
tagList:{
type:Array,
default:()=>{
return ['全部','男士外套','女士','孩童短裤','中年棉衣','老年']
}
},
tagIndex:{
type:String,
default:'0'
},
list:{
type:Array,
default:()=>{
return [
[
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
// {title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
// {title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
// {title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
// {title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
],
[
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
],
[
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
],
[
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
],
[
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
],
[
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
],
]
}
}
},
data() {
return {
activeIndex:0,
swiperHeight:uni.getSystemInfoSync().windowHeight,
newTop:uni.getSystemInfoSync().statusBarHeight + 50
};
},
mounted() {
const query = wx.createSelectorQuery().in(this)
query.select('.posi-sticky').boundingClientRect((rect) => {
console.log(rect.height);
this.swiperHeight = this.swiperHeight - this.newTop - rect.height;
}).exec()
this.activeIndex = this.tagIndex*1;
},
methods:{
tabTap(e) {
this.activeIndex = e;
},
swiperChange(e) {
this.activeIndex = e.detail.current;
},
scrollBottomEv(e) {
this.$emit('scrollBottom',this.activeIndex)
},
// 去详情
goDetail(){
uni.navigateTo({
url:'/pagesB/order-detail/order-detail'
})
},
// 取消订单
cancleEv(){
console.log('取消订单');
},
// 再次购买
buyEv(){
uni.navigateTo({
url:'/pagesB/settlement/settlement'
})
}
}
}
</script>
<style>
.btn{
width: 150rpx;
height: 64rpx;
line-height: 64rpx;
color: #8c8c9b;
border: 2rpx solid #d3d3d3;
border-radius: 20rpx;
text-align: center;
box-sizing: border-box;
}
.csbtn{
border: none;
background: linear-gradient(to right,#ff3772 0%,#fd5549 100%);
color: #FFFFFF;
box-shadow: 0rpx 6rpx 10rpx rgba(255, 55, 114, .3);
}
</style>