Feat(特色礼品):接口对接
This commit is contained in:
lifizer
+10
-2
@@ -16,9 +16,17 @@ export function wellnessPlaceList(param) {
|
||||
|
||||
/**
|
||||
* 特色礼品首页
|
||||
* */
|
||||
*/
|
||||
export function customizedGift() {
|
||||
return request.get("/customizedGift/index", {}, {login: true})
|
||||
return request.get("/customizedGift/index", {}, {login: false})
|
||||
}
|
||||
|
||||
/**
|
||||
* 特色礼品省份专题页
|
||||
*
|
||||
*/
|
||||
export function customizedGiftContent(param) {
|
||||
return request.get("/customizedGift/cityContent", param, {login: false})
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
+8
-1
@@ -632,9 +632,16 @@
|
||||
},
|
||||
{
|
||||
"path": "views/giftList",
|
||||
"style": {
|
||||
"navigationBarTitleText": "特色礼品"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "views/giftContent",
|
||||
"style": {
|
||||
"navigationBarTitleText": "特色礼品",
|
||||
"onReachBottomDistance": 100
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<view class="gift-page">
|
||||
<view class="page1-wrap">
|
||||
<image :src="data.mainImage" class="bg" />
|
||||
</view>
|
||||
<view class="page2-wrap">
|
||||
<view class="bg-cont">
|
||||
<rich-text :nodes="data.backgroundImage1Html" />
|
||||
<!-- <image :src="data.backgroundImage1" class="bg" /> -->
|
||||
</view>
|
||||
<view class="good-list">
|
||||
<view
|
||||
v-for="(item, index) in data.productList1"
|
||||
:key="index"
|
||||
class="good-item"
|
||||
@click="goodItemClick(item)"
|
||||
>
|
||||
<image :src="item.productImage" class="img" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="page3-wrap">
|
||||
<view class="bg-cont">
|
||||
<rich-text :nodes="data.backgroundImage2Html" />
|
||||
<!-- <image :src="data.backgroundImage2" class="bg" /> -->
|
||||
</view>
|
||||
<view class="good-list">
|
||||
<view
|
||||
v-for="(item, index) in data.productList2"
|
||||
:key="index"
|
||||
class="good-item"
|
||||
@click="goodItemClick(item)"
|
||||
>
|
||||
<image :src="item.productImage" class="img" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
customizedGiftContent
|
||||
} from '@/api/product'
|
||||
export default {
|
||||
name: 'GiftContent',
|
||||
data() {
|
||||
return {
|
||||
data: {
|
||||
backgroundImage1: '',
|
||||
backgroundImage2: '',
|
||||
backgroundImage1Html: '',
|
||||
backgroundImage2Html: '',
|
||||
mainImage: '',
|
||||
productList1: [],
|
||||
productList2: [],
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: options.name + '-' + '特色礼品'
|
||||
})
|
||||
this.getPageDataReq(options.id)
|
||||
},
|
||||
methods: {
|
||||
getPageDataReq(id) {
|
||||
uni.showLoading({
|
||||
title: '数据加载中...'
|
||||
})
|
||||
customizedGiftContent({ id }).then(res => {
|
||||
const { success, data } = res
|
||||
if (success) {
|
||||
this.data = {
|
||||
...data,
|
||||
backgroundImage1Html: `<img src="${data.backgroundImage1}" style="display: block;max-width: 100%;">`,
|
||||
backgroundImage2Html: `<img src="${data.backgroundImage2}" style="display: block;max-width: 100%;">`
|
||||
}
|
||||
}
|
||||
uni.hideLoading()
|
||||
}).catch(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
goodItemClick(good) {
|
||||
const productId = good.productId
|
||||
if (!productId) {
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: `/pages/shop/GoodsCon/index?id=${productId}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.page1-wrap {
|
||||
.bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
.good-list {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
width: 100%;
|
||||
}
|
||||
.page2-wrap {
|
||||
position: relative;
|
||||
.bg-cont {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.good-list {
|
||||
top: 196px;
|
||||
.good-item + .good-item {
|
||||
margin: 25px 0 0 0;
|
||||
}
|
||||
.good-item {
|
||||
.img {
|
||||
display: block;
|
||||
width: 325px;
|
||||
height: 358px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.page3-wrap {
|
||||
position: relative;
|
||||
.good-list {
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
padding: 12px 0 0 0;
|
||||
.good-item {
|
||||
margin: 0 0 20px 0;
|
||||
.img {
|
||||
width: 166px;
|
||||
height: 262px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+185
-234
@@ -1,270 +1,221 @@
|
||||
<template>
|
||||
<view class="pkg-product-list">
|
||||
<view class="fixed-header">
|
||||
<swiper class="swiper-box" indicator-dots indicator-color="rgba(255,255,255,.3)" indicator-active-color="#fff"
|
||||
autoplay circular v-if="bannerList.length>0">
|
||||
<swiper-item v-for="(item,index) in bannerList" :key="index">
|
||||
<image :src="item.pic" mode="scaleToFill" @click="$global.commonJump(item.uniappUrl)"/>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view class="search-box flex jc-between ai-center">
|
||||
<input type="text" v-model="keyword" placeholder="搜索商品" placeholder-style="color:#949494" @confirm="search">
|
||||
<image class="icon" :src="webUrl+'/20220903142935869059.png'" mode="scaleToFill" @click="search"></image>
|
||||
<view class="gift-page">
|
||||
<view class="banner" @click="linkTo">
|
||||
<rich-text :nodes="topBannerHtml" />
|
||||
</view>
|
||||
<view class="province-enter-wrap">
|
||||
<view class="scroll-x-wrap">
|
||||
<view class="list-cont">
|
||||
<view
|
||||
v-for="(item, index) in provinceList"
|
||||
:key="index"
|
||||
class="item"
|
||||
@click="provinceItemClick(item)"
|
||||
>
|
||||
<image :src="item.icon" class="img" />
|
||||
<view class="name">{{ item.provinceMergerName }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fixed-aside flex-0">
|
||||
<view class="item flex jc-center ai-center" :class="index === asideIndex ? 'active' : ''"
|
||||
v-for="(item, index) in asideList" :key="index" @click="asideTap(index)">
|
||||
<text class="one-t">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="conter">
|
||||
<mescroll-body ref="mescrollRef" top="0" bottom="0" class='cotent-scroll' :up="upOption" :down="downOption"
|
||||
@up="upCallback" @down="downCallback" @init="mescrollInit" @emptyclick="emptyClick">
|
||||
|
||||
<view class="list flex flex-wrap">
|
||||
<view v-for="(item, index) in dataList" :key="index">
|
||||
<view class="item" @click="goGoods(item.id)">
|
||||
<image class="cover" :src="item.image" mode="scaleToFill"/>
|
||||
<view class="name more-t">{{ item.storeName }}</view>
|
||||
<view class="price">￥{{ item.price }}</view>
|
||||
<view class="province-bg-list">
|
||||
<view
|
||||
v-for="(item, index) in provinceList"
|
||||
:key="index"
|
||||
class="item"
|
||||
>
|
||||
<view class="bg" @click="provinceItemClick(item)">
|
||||
<rich-text :nodes="item.bgHtml" />
|
||||
</view>
|
||||
<view class="good-list">
|
||||
<view
|
||||
v-for="(goodItem, goodIndex) in item.productList"
|
||||
:key="goodIndex"
|
||||
class="good-item"
|
||||
@click.stop="goodItemClick(goodItem)"
|
||||
>
|
||||
<view class="good-img">
|
||||
<image :src="goodItem.productImage" class="img" />
|
||||
</view>
|
||||
<view class="name">
|
||||
{{ goodItem.productName }}
|
||||
</view>
|
||||
<view class="price">
|
||||
<text class="txt">￥</text>
|
||||
{{ goodItem.productPrice }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="article-box">-->
|
||||
<!-- <mescroll-body ref="mescrollRef" top="16rpx" bottom="0" class='cotent-scroll' :up="upOption" :down="downOption"-->
|
||||
<!-- @up="upCallback" @down="downCallback" @init="mescrollInit" @emptyclick="emptyClick">-->
|
||||
<!-- <view class="list flex flex-wrap">-->
|
||||
<!-- <view v-for="(item, index) in dataList" :key="index">-->
|
||||
<!-- <view class="item" @click="goGoods(item.id)">-->
|
||||
<!-- <image class="cover" :src="item.image" mode="scaleToFill"/>-->
|
||||
<!-- <view class="name more-t">{{ item.storeName }}</view>-->
|
||||
<!-- <view class="price">￥{{ item.price }}</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </mescroll-body>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MescrollMixins from "@/mixins/mescroll-mixins.js";
|
||||
import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
|
||||
import {customizedGift} from "@/api/product";
|
||||
import {fetchCity} from "@/api/wenwan";
|
||||
import {getProducts} from "@/api/store";
|
||||
|
||||
import {
|
||||
customizedGift
|
||||
} from '@/api/product'
|
||||
export default {
|
||||
name: "giftList",
|
||||
components: {
|
||||
MescrollBody
|
||||
},
|
||||
name: 'GiftList',
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
keyword: "",
|
||||
bannerList: [],
|
||||
asideList: [],
|
||||
asideIndex: 0,
|
||||
dataList: [], // 列表数据
|
||||
|
||||
upOption: {
|
||||
noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
|
||||
auto: true,
|
||||
empty: {
|
||||
tip: '', // 提示
|
||||
icon:this.$VUE_APP_RESOURCES_URL+'/20240102232724024787.png',
|
||||
width:381,
|
||||
height:348
|
||||
}
|
||||
},
|
||||
downOption: {
|
||||
auto: false
|
||||
}
|
||||
provinceList: [],
|
||||
topBannerHtml: '',
|
||||
topBannerUrl: ''
|
||||
}
|
||||
},
|
||||
mixins: [
|
||||
MescrollMixins({
|
||||
getPageData(mescroll) {
|
||||
let that = this;
|
||||
// 此时mescroll会携带page的参数:
|
||||
let pageNum = mescroll.num; // 页码, 默认从1开始
|
||||
|
||||
let timer = setInterval(() => {
|
||||
if (that.asideList.length > 0) {
|
||||
clearInterval(timer);
|
||||
|
||||
let param = {
|
||||
isCustomizedGift: 1,
|
||||
page: pageNum,
|
||||
limit: 10,
|
||||
keyword: that.keyword,
|
||||
provinceId: that.asideList.length > 0 ? that.asideList[that.asideIndex].provinceId : ""
|
||||
}
|
||||
getProducts(param).then(({data}) => {
|
||||
if (mescroll.num === 1) {
|
||||
that.dataList = [];
|
||||
}
|
||||
that.dataList = that.dataList.concat(data);
|
||||
mescroll.endSuccess(data.length);
|
||||
}).catch(err => {
|
||||
mescroll.endErr();
|
||||
uni.showToast({
|
||||
title: err + '',
|
||||
icon: 'none',
|
||||
mask: false,
|
||||
duration: 1500
|
||||
});
|
||||
});
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
],
|
||||
onLoad() {
|
||||
customizedGift().then(({data}) => this.bannerList = data.banner);
|
||||
fetchCity(3).then(({data}) => this.asideList = data.group);
|
||||
this.getPageDataReq()
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
//触发加载请求
|
||||
this.mescroll.scrollTo(0, 0);
|
||||
this.mescroll && this.mescroll.resetUpScroll(false);
|
||||
getPageDataReq() {
|
||||
customizedGift().then(res => {
|
||||
const { success, data } = res
|
||||
if (success) {
|
||||
this.topBannerHtml = `<img src="${data.topBanner.image}" style="display: block;max-width: 100%;">`
|
||||
this.topBannerUrl = data.topBanner.appUrl || ''
|
||||
const list = data.cities || []
|
||||
if (list.length > 0) {
|
||||
list.map(item => {
|
||||
const backgroundImage = item.backgroundImage || ''
|
||||
if (backgroundImage && item.productList.length > 0) {
|
||||
this.provinceList.push({
|
||||
...item,
|
||||
bgHtml: `<img src="${item.backgroundImage}" style="display: block;max-width: 100%;">`
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
asideTap(index) {
|
||||
this.asideIndex = index;
|
||||
this.search();
|
||||
},
|
||||
goGoods(id) {
|
||||
linkTo() {
|
||||
if (!this.topBannerUrl) {
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: "/pages/shop/GoodsCon/index?id=" + id
|
||||
url: this.topBannerUrl
|
||||
})
|
||||
},
|
||||
provinceItemClick(item) {
|
||||
const id = item.id
|
||||
if (!id) {
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: `/pkg_product/views/giftContent?id=${id}&name=${item.provinceMergerName}`
|
||||
})
|
||||
},
|
||||
goodItemClick(good) {
|
||||
const productId = good.productId
|
||||
if (!productId) {
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: `/pages/shop/GoodsCon/index?id=${productId}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/css/product.less";
|
||||
|
||||
.pkg-product-list {
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
|
||||
.fixed-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 18rpx 0;
|
||||
background: #fff;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.body-box {
|
||||
position: fixed;
|
||||
top: 472rpx;
|
||||
height: calc(100vh - 472rpx);
|
||||
}
|
||||
|
||||
.fixed-aside {
|
||||
position: fixed;
|
||||
width: 194rpx;
|
||||
left: 0;
|
||||
top: 472rpx;
|
||||
bottom: 0 !important;
|
||||
box-sizing: border-box;
|
||||
border-top: 2rpx solid #D2D2D2;
|
||||
border-right: 2rpx solid #DADCE0;
|
||||
.banner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.province-enter-wrap {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
margin-top: -80rpx;
|
||||
padding: 30rpx 30rpx 0 30rpx;
|
||||
.scroll-x-wrap {
|
||||
padding: 24rpx 60rpx 16rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
background-color: #fff;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow-scrolling: touch;
|
||||
|
||||
.item {
|
||||
height: 94rpx;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 2rpx solid #D2D2D2;
|
||||
color: #033333;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
box-shadow: 0px 1px 4px rgba(0,0,0,0.16);
|
||||
.list-cont {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
.item + .item {
|
||||
margin: 0 0 0 24rpx;
|
||||
}
|
||||
.item {
|
||||
.img {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.name {
|
||||
margin: 12rpx 0 0 0;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
border-left: 6rpx solid #FD574B;
|
||||
color: #FD574B;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.conter {
|
||||
margin-left: 194rpx;
|
||||
margin-top: 472rpx;
|
||||
border-top: 2rpx solid #D2D2D2;
|
||||
|
||||
.empty {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
image {
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
}
|
||||
|
||||
view {
|
||||
color: gray;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
}
|
||||
.province-bg-list {
|
||||
padding: 30rpx;
|
||||
.item + .item {
|
||||
margin: 30rpx 0 0 0;
|
||||
}
|
||||
.item {
|
||||
position: relative;
|
||||
.bg {
|
||||
position: relative;
|
||||
width: 242rpx;
|
||||
height: 376rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 20rpx 0 0 20rpx;
|
||||
|
||||
.cover {
|
||||
width: 242rpx;
|
||||
height: 242rpx;
|
||||
margin-bottom: 8rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: #333;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
position: absolute;
|
||||
bottom: 4rpx;
|
||||
color: #DA0000;
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.item-store {
|
||||
height: 336rpx;
|
||||
.good-list {
|
||||
position: absolute;
|
||||
bottom: 12rpx;
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
.good-item {
|
||||
margin: 0 24rpx 0 0;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
.good-img {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
height: 28px;
|
||||
padding: 5rpx 0;
|
||||
line-height: 14px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
white-space: normal !important;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.price {
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 11px;
|
||||
border: 1px solid #fff;
|
||||
line-height: 18px;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
.txt {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<view class="pkg-product-list">
|
||||
<view class="fixed-header">
|
||||
<swiper class="swiper-box" indicator-dots indicator-color="rgba(255,255,255,.3)" indicator-active-color="#fff"
|
||||
autoplay circular v-if="bannerList.length>0">
|
||||
<swiper-item v-for="(item,index) in bannerList" :key="index">
|
||||
<image :src="item.pic" mode="scaleToFill" @click="$global.commonJump(item.uniappUrl)"/>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view class="search-box flex jc-between ai-center">
|
||||
<input type="text" v-model="keyword" placeholder="搜索商品" placeholder-style="color:#949494" @confirm="search">
|
||||
<image class="icon" :src="webUrl+'/20220903142935869059.png'" mode="scaleToFill" @click="search"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fixed-aside flex-0">
|
||||
<view class="item flex jc-center ai-center" :class="index === asideIndex ? 'active' : ''"
|
||||
v-for="(item, index) in asideList" :key="index" @click="asideTap(index)">
|
||||
<text class="one-t">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="conter">
|
||||
<mescroll-body ref="mescrollRef" top="0" bottom="0" class='cotent-scroll' :up="upOption" :down="downOption"
|
||||
@up="upCallback" @down="downCallback" @init="mescrollInit" @emptyclick="emptyClick">
|
||||
|
||||
<view class="list flex flex-wrap">
|
||||
<view v-for="(item, index) in dataList" :key="index">
|
||||
<view class="item" @click="goGoods(item.id)">
|
||||
<image class="cover" :src="item.image" mode="scaleToFill"/>
|
||||
<view class="name more-t">{{ item.storeName }}</view>
|
||||
<view class="price">￥{{ item.price }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
|
||||
<!-- <view class="article-box">-->
|
||||
<!-- <mescroll-body ref="mescrollRef" top="16rpx" bottom="0" class='cotent-scroll' :up="upOption" :down="downOption"-->
|
||||
<!-- @up="upCallback" @down="downCallback" @init="mescrollInit" @emptyclick="emptyClick">-->
|
||||
<!-- <view class="list flex flex-wrap">-->
|
||||
<!-- <view v-for="(item, index) in dataList" :key="index">-->
|
||||
<!-- <view class="item" @click="goGoods(item.id)">-->
|
||||
<!-- <image class="cover" :src="item.image" mode="scaleToFill"/>-->
|
||||
<!-- <view class="name more-t">{{ item.storeName }}</view>-->
|
||||
<!-- <view class="price">￥{{ item.price }}</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </mescroll-body>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MescrollMixins from "@/mixins/mescroll-mixins.js";
|
||||
import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
|
||||
import {customizedGift} from "@/api/product";
|
||||
import {fetchCity} from "@/api/wenwan";
|
||||
import {getProducts} from "@/api/store";
|
||||
|
||||
export default {
|
||||
name: "giftList",
|
||||
components: {
|
||||
MescrollBody
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
keyword: "",
|
||||
bannerList: [],
|
||||
asideList: [],
|
||||
asideIndex: 0,
|
||||
dataList: [], // 列表数据
|
||||
|
||||
upOption: {
|
||||
noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
|
||||
auto: true,
|
||||
empty: {
|
||||
tip: '', // 提示
|
||||
icon:this.$VUE_APP_RESOURCES_URL+'/20240102232724024787.png',
|
||||
width:381,
|
||||
height:348
|
||||
}
|
||||
},
|
||||
downOption: {
|
||||
auto: false
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [
|
||||
MescrollMixins({
|
||||
getPageData(mescroll) {
|
||||
let that = this;
|
||||
// 此时mescroll会携带page的参数:
|
||||
let pageNum = mescroll.num; // 页码, 默认从1开始
|
||||
|
||||
let timer = setInterval(() => {
|
||||
if (that.asideList.length > 0) {
|
||||
clearInterval(timer);
|
||||
|
||||
let param = {
|
||||
isCustomizedGift: 1,
|
||||
page: pageNum,
|
||||
limit: 10,
|
||||
keyword: that.keyword,
|
||||
provinceId: that.asideList.length > 0 ? that.asideList[that.asideIndex].provinceId : ""
|
||||
}
|
||||
getProducts(param).then(({data}) => {
|
||||
if (mescroll.num === 1) {
|
||||
that.dataList = [];
|
||||
}
|
||||
that.dataList = that.dataList.concat(data);
|
||||
mescroll.endSuccess(data.length);
|
||||
}).catch(err => {
|
||||
mescroll.endErr();
|
||||
uni.showToast({
|
||||
title: err + '',
|
||||
icon: 'none',
|
||||
mask: false,
|
||||
duration: 1500
|
||||
});
|
||||
});
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
],
|
||||
onLoad() {
|
||||
customizedGift().then(({data}) => this.bannerList = data.banner);
|
||||
fetchCity(3).then(({data}) => this.asideList = data.group);
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
//触发加载请求
|
||||
this.mescroll.scrollTo(0, 0);
|
||||
this.mescroll && this.mescroll.resetUpScroll(false);
|
||||
},
|
||||
asideTap(index) {
|
||||
this.asideIndex = index;
|
||||
this.search();
|
||||
},
|
||||
goGoods(id) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/shop/GoodsCon/index?id=" + id
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/css/product.less";
|
||||
|
||||
.pkg-product-list {
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
|
||||
.fixed-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 18rpx 0;
|
||||
background: #fff;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.body-box {
|
||||
position: fixed;
|
||||
top: 472rpx;
|
||||
height: calc(100vh - 472rpx);
|
||||
}
|
||||
|
||||
.fixed-aside {
|
||||
position: fixed;
|
||||
width: 194rpx;
|
||||
left: 0;
|
||||
top: 472rpx;
|
||||
bottom: 0 !important;
|
||||
box-sizing: border-box;
|
||||
border-top: 2rpx solid #D2D2D2;
|
||||
border-right: 2rpx solid #DADCE0;
|
||||
background-color: #fff;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow-scrolling: touch;
|
||||
|
||||
.item {
|
||||
height: 94rpx;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 2rpx solid #D2D2D2;
|
||||
color: #033333;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
border-left: 6rpx solid #FD574B;
|
||||
color: #FD574B;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.conter {
|
||||
margin-left: 194rpx;
|
||||
margin-top: 472rpx;
|
||||
border-top: 2rpx solid #D2D2D2;
|
||||
|
||||
.empty {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
image {
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
}
|
||||
|
||||
view {
|
||||
color: gray;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
width: 242rpx;
|
||||
height: 376rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 20rpx 0 0 20rpx;
|
||||
|
||||
.cover {
|
||||
width: 242rpx;
|
||||
height: 242rpx;
|
||||
margin-bottom: 8rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: #333;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
position: absolute;
|
||||
bottom: 4rpx;
|
||||
color: #DA0000;
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-store {
|
||||
height: 336rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user