170 lines
6.6 KiB
Vue
170 lines
6.6 KiB
Vue
<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>
|