268 lines
6.3 KiB
Vue
268 lines
6.3 KiB
Vue
<template>
|
|
<z-paging ref="paging" v-model="cardProductList" @query="queryList" :fixed="false" use-page-scroll auto-full-height :auto-clean-list-when-reload="false">
|
|
<view class="coupons" slot="top">
|
|
<!-- 城市 搜索 -->
|
|
<view class="positioningcity">
|
|
<view class="posi_l" @click="$tab.navigateTo('/pages/driver/serve/repair/re_create/select_city')">
|
|
<view class="l_txt">{{citySave?citySave:'杭州'}}</view>
|
|
<image style="width: 14rpx;height: 10rpx;" src="@/static/images/app/serve/com_down.png" mode=""></image>
|
|
<!-- <u-icon name="arrow-down-fill" color="#444444 " size="8"></u-icon> -->
|
|
</view>
|
|
<u-search placeholder="搜索" v-model="keyword" height="32" searchIconSize='24' :showAction='false'
|
|
placeholderColor='#AAAAAA' searchIconColor='#999999' @search="searchBtn"
|
|
@clear='clearBtn'></u-search>
|
|
</view>
|
|
<!-- Tabs 标签 -->
|
|
<view class="tabs_view flex justify-around">
|
|
<view class="tabs_list" v-for="(item,index) in tabsList8" :key="index" @click="clickTabs(item)">
|
|
<view :class="['inactive-style',actType==item.value?'active-tab':'']">{{item.name}}</view>
|
|
<view v-if="actType==item.value" class="active-style"></view>
|
|
</view>
|
|
<!-- <u-tabs :list="tabsList8" @click="clickTabs" :current='current'
|
|
:activeStyle="{}" :scrollable='false'
|
|
:inactiveStyle="{}"></u-tabs> -->
|
|
</view>
|
|
</view>
|
|
<!-- 内容 -->
|
|
<view class="coupons_con">
|
|
<view class="con_view" v-for="(item,index) in cardProductList " :key="item.id" @click="toDetailPages(item)">
|
|
<!-- <image :class="cardType == 3?'view_img_mini':'view_img'" :src="cardType == 3?item.cover:item.image" mode=""></image> -->
|
|
<image class="view_img" :src="item.cover" mode="aspectFill"></image>
|
|
<!-- <image class="view_img" :src="item.image" mode=""></image> -->
|
|
<view class="view_txt"> {{item.name ? item.name : '--'}} </view>
|
|
<view class="view_price"> ￥{{item.price ? item.price : '--'}} </view>
|
|
<!-- <view class="view_price" v-if="cardType !== 3"> ￥{{item.price ? item.price : '--'}} </view> -->
|
|
</view>
|
|
</view>
|
|
</z-paging>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapGetters
|
|
} from 'vuex'
|
|
import {
|
|
tabsList8
|
|
} from "@/data/tabsData.js"
|
|
import {
|
|
getCardProductListAPI
|
|
} from '@/api/serve/coupons'
|
|
import {
|
|
getActivityListAPI
|
|
} from '@/api/serve/index'
|
|
export default {
|
|
computed: {
|
|
...mapGetters(['citySave'])
|
|
},
|
|
data() {
|
|
return {
|
|
tabsList8,
|
|
current: 0, // 区别tabs
|
|
cardData: {
|
|
limit: 20,
|
|
page: 1,
|
|
name: ''
|
|
},
|
|
keyword: '', // 搜索
|
|
cardType: '', // 卡券类型
|
|
actType: 1, //选择的tab
|
|
cardProductList: [] // 卡券列表
|
|
}
|
|
},
|
|
onLoad(query) {
|
|
// console.log(query,'query---来自服务首页');
|
|
this.current = query.num
|
|
if (query.num == 1) {
|
|
this.cardType = 2
|
|
this.actType = 2
|
|
}
|
|
},
|
|
onShow() {
|
|
if (this.$refs.paging) {
|
|
this.$refs.paging.reload()
|
|
}
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
});
|
|
},
|
|
watch: {
|
|
cardType: {
|
|
handler(nV, oV) {
|
|
// console.log(nV,oV,'监听type');
|
|
// this.cardType=nV
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
methods: {
|
|
// 搜索
|
|
searchBtn() {
|
|
// console.log(this.keyword,'搜索按钮');
|
|
this.$refs.paging.reload()
|
|
},
|
|
clearBtn() {
|
|
this.keyword = ''
|
|
this.$refs.paging.reload()
|
|
},
|
|
// 卡券商品
|
|
queryList(pageNo, pageSize) {
|
|
// type => 1普通2秒杀3助力
|
|
let obj = {
|
|
limit: pageSize,
|
|
page: pageNo,
|
|
name: this.keyword,
|
|
type: this.cardType,
|
|
city: this.citySave,
|
|
}
|
|
console.log(obj);
|
|
getCardProductListAPI(obj).then(res => {
|
|
console.log(res,'卡券商品分页列表 ');
|
|
this.$refs.paging.complete(res.data.list)
|
|
uni.hideLoading()
|
|
}).catch(err => {
|
|
this.$refs.paging.complete(false)
|
|
})
|
|
},
|
|
// 详情页
|
|
toDetailPages(item) {
|
|
this.$store.dispatch('CardId', item.id)
|
|
if (this.cardType == 3) {
|
|
uni.navigateTo({
|
|
url: `/pages/driver/mine/my_activity/detail?id=${item.id}`
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: `/pages/driver/serve/coupons/cou_detail?id=${item.id}`
|
|
})
|
|
}
|
|
},
|
|
clickTabs(item) {
|
|
console.log( 'tabs点击',item,);
|
|
this.actType = item.value
|
|
// item.name => 名字 item.value => 1,2,3 item.index => 0,1,2
|
|
if (item.value == 1) {
|
|
this.cardType = ''
|
|
} else {
|
|
this.cardType = item.value
|
|
}
|
|
this.$refs.paging.reload()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.tabs_view {
|
|
width: 100%;
|
|
|
|
.tabs_list {
|
|
width: 150rpx;
|
|
text-align: center;
|
|
position: relative;
|
|
padding: 24rpx 0;
|
|
font-size: 28rpx;
|
|
|
|
.inactive-style {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: '#666666';
|
|
transform: 'scale(1)';
|
|
}
|
|
|
|
.active-tab {
|
|
color: '#111111';
|
|
font-weight: 900;
|
|
font-size: 32rpx;
|
|
transform: 'scale(1.05)';
|
|
}
|
|
|
|
.active-style {
|
|
width: 60rpx;
|
|
position: absolute;
|
|
background: #13AFA8;
|
|
height: 6rpx;
|
|
left: 45rpx;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.coupons_con {
|
|
// border: 1px solid;
|
|
padding: 0 24rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
justify-content: space-between;
|
|
padding-bottom: 40rpx;
|
|
|
|
// align-items: center;
|
|
// margin-top: 16rpx;
|
|
.con_view {
|
|
// border: 1px solid blue;
|
|
margin-top: 32rpx;
|
|
|
|
.view_img {
|
|
width: 340rpx;
|
|
height: 340rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.view_img_mini {
|
|
width: 340rpx;
|
|
height: 184rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.view_txt {
|
|
// border: 1px solid red;
|
|
width: 340rpx;
|
|
height: 80rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
margin-top: 16rpx;
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.view_price {
|
|
font-size: 34rpx;
|
|
font-family: Roboto, Roboto;
|
|
font-weight: 900;
|
|
color: #111111;
|
|
margin-top: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.positioningcity {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-bottom: 24rpx;
|
|
|
|
.posi_l {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-right: 20rpx;
|
|
|
|
.l_txt {
|
|
margin-right: 12rpx;
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
}
|
|
}
|
|
}
|
|
|
|
.coupons {
|
|
// border: 1px solid red;
|
|
padding: 0 24rpx;
|
|
background: #ffffff;
|
|
}
|
|
</style> |