290 lines
7.3 KiB
Vue
290 lines
7.3 KiB
Vue
<template>
|
|
<view v-if="istrue" class="content plr30 exchange">
|
|
<view class="flex_start flex_items mt30">
|
|
<view class="search flex_start flex_items plr10 ptb15">
|
|
<image :src="imgUrl+'search.png'" style="width: 32rpx;height: 32rpx;" mode=""></image>
|
|
<input v-model="form.name" class="uni-input pl10 f26" confirm-type="search" @confirm="doSearch"
|
|
placeholder="搜索" style="width:100%;" />
|
|
</view>
|
|
<!-- <view class="flex_column flex_items ml35" style="color: #414141;" @click="gomyfen">
|
|
<image :src="imgUrl+'jf.png'" style="width: 40rpx;height: 40rpx" mode=""></image>
|
|
<text class="f18" style="margin-top: -5rpx;">我的积分</text>
|
|
</view>
|
|
<view class="flex_column flex_items ml20" style="color: #414141;" @click="gomyorder">
|
|
<image :src="imgUrl+'dd.png'" style="width: 40rpx;height: 40rpx" mode=""></image>
|
|
<text class="f18" style="margin-top: -5rpx;">我的订单</text>
|
|
</view> -->
|
|
</view>
|
|
<!-- t2 -->
|
|
<!-- <view class="mt30">
|
|
<swiper indicator-dots autoplay interval="5000" duration="500">
|
|
<swiper-item v-for="(item,index) in banners" :key="index">
|
|
<image :src="item.url" style="width: 100%;height:454rpx;" mode="aspectFit" @click="goout(item.target_url)"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view> -->
|
|
<!-- t3 -->
|
|
<!-- <view class="mt30 flex_between flex_items">
|
|
<view v-for="(item,index) in daos" :key="index" class="flex_column flex_items">
|
|
<image :src="item.img" style="width:82rpx;height: 82rpx;" mode=""></image>
|
|
<text class="f24" style="color: #4D4D4D;">{{item.tt}}</text>
|
|
</view>
|
|
</view> -->
|
|
<!-- t4 -->
|
|
<view class="flex_start flex_items mt40">
|
|
<view class="flex_column flex_items">
|
|
<text class="f32 bold" style="color: #003A6E;">积分专区</text>
|
|
<view class="line mt10"></view>
|
|
</view>
|
|
<view class="flex_start flex_items ml35" style="overflow-x: auto;width:500rpx;white-space: nowrap">
|
|
<view v-for="(item,index) in tags" :key="index"
|
|
:class="['plr20','ptb10','f26','mr20','flex_center',index==curindex?'chose':'nochose']">
|
|
<view @click="chosetag(index,item.id)">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- t5 -->
|
|
<view v-if="list.length!=0" class="my-waterfall mt30">
|
|
<myWaterfall v-model="list">
|
|
<template v-slot:left="{leftList}">
|
|
<MyGoodsDemo :list="leftList" @godetail="godetail"></MyGoodsDemo>
|
|
</template>
|
|
<template v-slot:right="{rightList}">
|
|
<MyGoodsDemo :list="rightList" @godetail="godetail"></MyGoodsDemo>
|
|
</template>
|
|
</myWaterfall>
|
|
<!-- 加载更多 -->
|
|
<!-- <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore> -->
|
|
</view>
|
|
<view v-else class="ptb50 plr30 f26 f-center" style="color: #9a9a9a;margin-top: 80rpx;">--暂无数据--</view>
|
|
<view style="width: 100%;height: 30rpx;"></view>
|
|
<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import myWaterfall from '@/components/waterfull.vue'
|
|
import MyGoodsDemo from './goods.vue'
|
|
export default {
|
|
data() {
|
|
return {
|
|
hotProduct: [],
|
|
curindex: 0,
|
|
tags: [],
|
|
loadStatus: 'loadmore',
|
|
flowList: [],
|
|
list: [],
|
|
banners: [],
|
|
istrue: false,
|
|
// daos: [{
|
|
// tt: "机场贵宾",
|
|
// img: require('@/static/fj.png'),
|
|
// jf: 30
|
|
// }, {
|
|
// tt: "代驾",
|
|
// img: require('@/static/dj.png'),
|
|
// jf: 30
|
|
// }, {
|
|
// tt: "QQ会员",
|
|
// img: require('@/static/qq.png'),
|
|
// jf: 30
|
|
// }, {
|
|
// tt: "盒马",
|
|
// img: require('@/static/hm.png'),
|
|
// jf: 30
|
|
// }, {
|
|
// tt: "立减金",
|
|
// img: require('@/static/ljj.png'),
|
|
// jf: 30
|
|
// }, ],
|
|
form: {
|
|
category_id: "",
|
|
name: "",
|
|
page: 1,
|
|
pageSize: 10
|
|
},
|
|
imgUrl: ""
|
|
|
|
}
|
|
},
|
|
components: {
|
|
myWaterfall,
|
|
MyGoodsDemo
|
|
},
|
|
onLoad(options) {
|
|
this.imgUrl = this.api.imgUrl
|
|
if (options.keywords) {
|
|
this.form.name = options.keywords
|
|
}
|
|
if (options.keyindex) {
|
|
this.curindex = options.keyindex
|
|
}
|
|
this.getdata()
|
|
},
|
|
methods: {
|
|
getdata() {
|
|
uni.showLoading({
|
|
title: "加载中..."
|
|
})
|
|
this.api.homedata().then((res) => {
|
|
console.log(res)
|
|
if (res.data.code == 200) {
|
|
this.banners = res.data.data.banner
|
|
this.hotProduct = res.data.data.hotProduct
|
|
this.getclassification()
|
|
} else {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: res.data.message
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getclassification() {
|
|
this.api.getcategory().then((res) => {
|
|
console.log(res)
|
|
if (res.data.code == 200) {
|
|
this.tags = res.data.data
|
|
this.form.category_id = res.data.data[this.curindex].id
|
|
this.istrue = true
|
|
if (this.form.name != "") {
|
|
this.doSearch()
|
|
} else {
|
|
this.getlist()
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: res.data.message
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getlist() {
|
|
this.api.getgoods(this.form).then((res) => {
|
|
console.log(res)
|
|
if (res.data.code == 200) {
|
|
uni.stopPullDownRefresh();
|
|
if (res.data.data.data.length != 0) {
|
|
for (let i = 0; i < res.data.data.data.length; i++) {
|
|
this.list.push(res.data.data.data[i])
|
|
}
|
|
}
|
|
setTimeout(function() {
|
|
uni.hideLoading()
|
|
}, 300);
|
|
|
|
} else {
|
|
this.istrue = true
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: res.data.message
|
|
})
|
|
}
|
|
})
|
|
},
|
|
doSearch() {
|
|
this.form.page = 1
|
|
this.list = []
|
|
this.getlist()
|
|
},
|
|
chosetag(idx, id) {
|
|
this.curindex = idx
|
|
this.form.category_id = id
|
|
this.form.page = 1
|
|
this.list = []
|
|
this.getlist()
|
|
},
|
|
addRandomData() {
|
|
for (let i = 0; i < 10; i++) {
|
|
let index = this.$u.random(0, this.list.length - 1);
|
|
// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
|
|
let item = JSON.parse(JSON.stringify(this.list[index]))
|
|
item.id = this.$u.guid();
|
|
this.flowList.push(item);
|
|
}
|
|
},
|
|
// 商品点击回调
|
|
godetail(val) {
|
|
console.log(val)
|
|
uni.navigateTo({
|
|
url: "/pages/product/detail?id=" + val
|
|
})
|
|
},
|
|
gomyfen() {
|
|
uni.navigateTo({
|
|
url: "/pages/my/index"
|
|
})
|
|
},
|
|
gomyorder() {
|
|
uni.navigateTo({
|
|
url: "/pages/order/index"
|
|
})
|
|
},
|
|
goout(url) {
|
|
// uni.navigateTo({
|
|
// url: "/pages/outline/index?src=" + url
|
|
// })
|
|
var href = url
|
|
window.open(href, '_self')
|
|
},
|
|
},
|
|
onReachBottom() {
|
|
uni.showLoading({
|
|
title: "加载中..."
|
|
})
|
|
// 模拟数据加载
|
|
setTimeout(() => {
|
|
// this.addRandomData();
|
|
this.form.page += 1
|
|
this.getlist()
|
|
}, 1000)
|
|
},
|
|
onPullDownRefresh() {
|
|
this.form.page = 1
|
|
this.list = []
|
|
this.form.name = ""
|
|
this.getdata()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background: #f5f5f5 !important;
|
|
}
|
|
|
|
.search {
|
|
width: 100%;
|
|
border-radius:46rpx;
|
|
opacity: 1;
|
|
border: 1rpx solid #D3D3D3;
|
|
}
|
|
|
|
.line {
|
|
width: 24rpx;
|
|
height: 7rpx;
|
|
background: linear-gradient(157deg, #FFBCA0 0%, #FF8A5D 100%);
|
|
border-radius: 0rpx;
|
|
}
|
|
|
|
.nochose {
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid #CCCCCC;
|
|
color: #767676;
|
|
width: 150rpx;
|
|
}
|
|
|
|
.chose {
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid #F5393A;
|
|
color: #fff;
|
|
width: 150rpx;
|
|
background: #F5393A;
|
|
}
|
|
|
|
.exchange uni-swiper {
|
|
height: 454rpx !important;
|
|
}
|
|
</style>
|