liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat(时令尝鲜):接口对接

Browse Source
This commit is contained in:
lifizer
2023-09-23 18:13:26 +08:00
parent c9ceac9f37
commit 2d73c2fe46
35 changed files with 2834 additions and 1547 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg_product/views/giftList.vue
+143 -31
View File
@@ -1,40 +1,57 @@
<template>
<view class="pkg-product-list">
<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="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="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="body-box">
<view class="aside-box 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 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="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 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>
</mescroll-body>
</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>
@@ -77,8 +94,6 @@ export default {
let that = this;
// 此时mescroll会携带page的参数:
let pageNum = mescroll.num; // 页码, 默认从1开始
console.log(pageNum,"test")
let timer = setInterval(() => {
if (that.asideList.length > 0) {
@@ -107,7 +122,7 @@ export default {
});
});
}
},500)
}, 500)
}
})
],
@@ -140,9 +155,18 @@ export default {
.pkg-product-list {
min-height: 100vh;
box-sizing: border-box;
padding-top: 20rpx;
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;
}
@@ -152,5 +176,93 @@ export default {
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>
pkg_product/views/giftList_bak.vue
+160
View File
@@ -0,0 +1,160 @@
<template>
<view class="pkg-product-list">
<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 class="body-box">
<view class="aside-box 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="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: '暂无商品' // 提示
}
},
downOption: {
auto: false
}
}
},
mixins: [
MescrollMixins({
getPageData(mescroll) {
let that = this;
// 此时mescroll会携带page的参数:
let pageNum = mescroll.num; // 页码, 默认从1开始
console.log(pageNum,"test")
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;
padding-top: 20rpx;
background: #fff;
.search-box {
margin-top: 14rpx;
}
.body-box {
position: fixed;
top: 472rpx;
height: calc(100vh - 472rpx);
}
/deep/ .u-list {
}
}
</style>
pkg_product/views/giftList_debug.vue
+217
View File
@@ -0,0 +1,217 @@
<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="body-box">-->
<view class="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="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 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: '暂无商品' // 提示
}
},
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;
padding-top: 20rpx;
background: #fff;
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
z-index: 9;
}
.search-box {
margin-top: 14rpx;
}
.body-box {
position: fixed;
top: 472rpx;
height: calc(100vh - 472rpx);
}
.aside {
position: fixed;
width: 194rpx;
left: 0;
top: 472rpx;
bottom: 0 !important;
box-sizing: border-box;
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;
}
}
</style>
pkg_product/views/healthList.vue
+74 -90
View File
@@ -37,27 +37,30 @@
</view>
<view class="article-box">
<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 item-store" @click="goStore(item.id)" v-if="tabIndex===0">
<image class="cover" :src="item.cover" mode="scaleToFill"/>
<view class="name one-t">{{ item.content }}</view>
<view class="price store flex ai-center" style="width: 100%;">
<image class="flex-0" :src="item.logo" mode="scaleToFill"/>
<view class="one-t">{{ item.name }}</view>
</view>
</view>
<view class="item" @click="goGoods(item.id)" v-else>
<image class="cover" :src="item.image" mode="scaleToFill"/>
<view class="name more-t">{{ item.storeName }}</view>
<view class="price">￥{{ item.price }}</view>
<scroll-view class="list flex flex-wrap" :style="{'height':listHeight}" :enable-flex="true"
:scroll-anchoring="true"
:scroll-y="true"
:scroll-with-animation="true" :enable-back-to-top="true" @scrolltolower="onLower" v-if="dataList.length>0">
<view v-for="(item, index) in dataList" :key="index">
<view class="item item-store" @click="goStore(item.id)" v-if="tabIndex===0">
<image class="cover" :src="item.cover" mode="scaleToFill"/>
<view class="name one-t">{{ item.content }}</view>
<view class="price store flex ai-center" style="width: 100%;">
<image class="flex-0" :src="item.logo" mode="scaleToFill"/>
<view class="one-t">{{ item.name }}</view>
</view>
</view>
<view class="item" @click="goGoods(item.id)" v-else>
<image class="cover" :src="item.image" mode="scaleToFill"/>
<view class="name more-t">{{ item.storeName }}</view>
<view class="price">￥{{ item.price }}</view>
</view>
</view>
</mescroll-body>
</scroll-view>
<image class="img-nodata" :src="webUrl+'/20230912145123537792.png'" mode="scaleToFill" v-else-if="tabIndex===0"/>
<image class="img-nodata" :src="webUrl+'/20230912145113749133.png'" mode="scaleToFill" v-else/>
</view>
</view>
</view>
@@ -67,80 +70,34 @@
import {fetchCity} from "@/api/wenwan";
import {wellnessFood, wellnessPlaceList} from "@/api/product";
import {getProducts} from "@/api/store";
import MescrollMixins from "@/mixins/mescroll-mixins";
import MescrollBody from "@/components/mescroll-uni/mescroll-body";
export default {
name: "healthList",
components: {
MescrollBody
},
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
tabIndex: 0,
keyword: "",
page: 1,
listHeight: "auto",
bannerList: [],
asideList: [],
asideIndex: 0,
dataList: [], // 列表数据
upOption: {
noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
auto: true,
empty: {
tip: '暂无数据' // 提示
}
},
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 = {
page: pageNum,
limit: 10,
keyword: that.keyword,
provinceId: that.asideList.length > 0 ? that.asideList[that.asideIndex].provinceId : ""
}
if (mescroll.num === 1) {
that.dataList = [];
}
if (that.tabIndex === 0) {
wellnessPlaceList(param).then(({data}) => {
that.dataList = that.dataList.concat(data);
mescroll.endSuccess(data.length);
});
} else {
param.isWellnessFood = 1;
getProducts(param).then(({data}) => {
that.dataList = that.dataList.concat(data);
mescroll.endSuccess(data.length);
});
}
}
}, 500)
}
})
],
onLoad() {
wellnessFood().then(({data}) => this.bannerList = data.banner);
fetchCity(4).then(({data}) => this.asideList = data.group);
this.init();
},
methods: {
init() {
wellnessFood().then(({data}) => this.bannerList = data.banner);
fetchCity(4).then(({data}) => {
this.asideList = data.group;
this.search();
});
},
changeTab(index) {
if (this.asideList.length === 0) return;
if (index === this.tabIndex) return;
@@ -148,17 +105,11 @@ export default {
this.tabIndex = index;
this.search();
},
search() {
if (this.asideList.length === 0) return;
//触发加载请求
this.mescroll.scrollTo(0, 0);
this.mescroll && this.mescroll.resetUpScroll(false);
},
asideTap(index) {
this.asideIndex = index;
onLower() {
this.page++;
this.search();
},
fetchData() {
search() {
let param = {
page: this.page,
limit: 10,
@@ -167,19 +118,41 @@ export default {
}
if (this.tabIndex === 0) {
wellnessPlaceList(param).then(({data}) => {
for (let i = 0; i < data.length; i++) {
this.dataList.push(data[i]);
}
this.handleData(data);
});
} else {
param.isWellnessFood = 1;
getProducts(param).then(({data}) => {
for (let i = 0; i < data.length; i++) {
this.dataList.push(data[i]);
}
this.handleData(data);
});
}
},
handleData(data){
let that = this;
if (this.page === 1) {
this.dataList = [];
}
this.dataList = this.dataList.concat(data);
uni.getSystemInfo({
success: function (res) {
let len = that.dataList.length;
let {windowHeight} = res;
console.log("test data",windowHeight)
that.listHeight = "auto";
if (windowHeight > 600 && len > 4) {
that.listHeight = "100%";
}
if (windowHeight <= 600 && len > 2) {
that.listHeight = "100%";
}
}
});
},
asideTap(index) {
this.asideIndex = index;
this.page = 1;
this.search();
},
goStore(id) {
uni.navigateTo({
url: "/pagesInn/inn/innHome?id=" + id
@@ -198,7 +171,8 @@ export default {
@import "@/assets/css/product.less";
.pkg-product-list {
min-height: 100vh;
height: 100vh;
overflow-y: hidden;
box-sizing: border-box;
padding-top: 16rpx;
background: #fff;
@@ -241,6 +215,16 @@ export default {
color: #333;
}
}
.img-nodata{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 360rpx;
height: 360rpx;
vertical-align: middle;
}
}
}
</style>
pkg_product/views/season.vue
+201
View File
@@ -0,0 +1,201 @@
<script setup>
import {getSeason, getSeasonPoster} from "@/api/product";
import cookie from "@/utils/store/cookie";
export default {
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
id: null,
partnerId: null,
info: null,
current: 0,
showShare: false,
posterUrl: "", // 分享海报
}
},
onLoad(options) {
if (options.id) {
this.id = options.id || null;
this.partnerId = options.partnerId || null;
} else {
let obj = uni.getEnterOptionsSync();
if (options.scene || obj.query.scene) {
let query = options ? decodeURIComponent(options.scene) : decodeURIComponent(obj.query.scene);
this.id = getUrlParam(query, "id") || null;
this.partnerId = getUrlParam(query, "partnerId") || null;
}
}
if (this.partnerId) cookie.set("spread", this.partnerId);
this.init();
},
methods: {
init() {
getSeason(this.id).then(({data}) => {
if (data.sliderImages) data.swiper = data.sliderImages.split(",");
this.info = data;
});
getSeasonPoster(this.id).then(({data}) => this.posterUrl = data);
},
tapLeft() {
if (this.current === 0) return;
this.current--;
},
tapRight() {
if (this.current + 1 === this.info.swiper.length) return;
this.current++;
},
downloadImage() {
let that = this;
const randomID = () => Math.random().toString(36).substring(2);
uni.downloadFile({
url: this.posterUrl, //网络图片的地址
filePath: wx.env.USER_DATA_PATH + "/share_" + randomID() + ".png", //指定的本地文件路径
success: downRes => {
console.log(typeof downRes, downRes, "down")
uni.saveImageToPhotosAlbum({
filePath: downRes.filePath, //临时文件地址
success: function () {
uni.showToast({
title: "保存成功",
icon: "success",
success() {
that.showShare = false;
}
})
},
fail: function (err) {
uni.showToast({
title: err,
icon: "none"
})
}
})
},
fail: function (err) {
uni.showToast({
title: err.errMsg,
icon: "error"
})
}
})
},
},
}
</script>
<template>
<view class="product-season">
<template v-if="info">
<image class="img-top" :src="info.topImage" mode="widthFix"/>
<view class="share-label flex jc-center ai-center" @click="showShare=true" v-if="posterUrl.length>0">
<image class="icon-share" :src="webUrl+'/20230911105727684131.png'" mode="scaleToFill"/>
分享好友
</view>
<u-popup :show="showShare" mode="center" bgColor="transparent">
<view class="box-share">
<view class="box-img">
<image class="icon" :src="webUrl+'/20230608112219219303.png'" @click="showShare=false"/>
<image class="main-img" :src="posterUrl"/>
</view>
<image class="btn" :src="webUrl+'/20230608112210135038.png'" @click="saveImg"/>
</view>
</u-popup>
<view class="scroll-item section">
<u-swiper :autoplay="false" :current="current" :list="info.swiper" height="100vh" indicator
imgMode="scaleToFill"></u-swiper>
<image class="icon-direction icon-left" :src="webUrl+'/20230911105736198247.png'" mode="scaleToFill"
@click="tapLeft"/>
<image class="icon-direction icon-right" :src="webUrl+'/20230911105742958676.png'" mode="scaleToFill"
@click="tapRight"/>
</view>
<view class="scroll-item">
<scroll-view scroll-y class="product-list" :style="{backgroundImage:'url(' + info.productImage + ')'}">
<image class="item" :src="item.image" mode="scaleToFill" @click="$global.navToGoods(item.id)"
v-for="(item,index) in info.products" :key="index"/>
</scroll-view>
</view>
</template>
</view>
</template>
<style scoped lang="less">
@import "@/assets/css/store.less";
.product-season {
width: 100vw;
overflow-x: hidden;
image {
vertical-align: middle;
}
.scroll-item {
position: relative;
box-sizing: border-box;
}
.section {
width: 100vw;
height: 100vh;
}
.img-top {
width: 100vw;
}
.share-label {
position: fixed;
top: 50%;
right: 32rpx;
width: 200rpx;
height: 56rpx;
background: rgba(255, 255, 255, 0.39);
border-radius: 8rpx;
color: #333333;
font-size: 28rpx;
z-index: 99;
.icon-share {
width: 32rpx;
height: 32rpx;
margin-right: 4rpx;
}
}
.icon-direction {
position: absolute;
top: 50%;
width: 40rpx;
height: 74rpx;
}
.icon-left {
left: 32rpx;
}
.icon-right {
right: 32rpx;
}
.product-list {
padding: 200rpx 32rpx 0;
background-size: 100vw auto;
.item {
width: 686rpx;
height: 400rpx;
margin-bottom: 46rpx;
border-radius: 20rpx;
}
}
}
</style>
pkg_product/views/seasonList.vue
+194
View File
@@ -0,0 +1,194 @@
<script>
import {seasonHomeData} from "@/api/product";
export default {
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
typeList: ["时令果蔬", "水产海鲜", "肉禽蛋白", "全部分类"],
list: [],
typeIndex: 0
}
},
onLoad() {
this.init();
},
methods: {
init() {
seasonHomeData().then(({data}) => this.list = data.seasonalFoodType || []);
},
goDetail() {
uni.navigateTo({
url: "/pkg_product/views/season?id=" + this.list[this.typeIndex].contents[0].id
})
}
},
}
</script>
<template>
<view class="product-season">
<template v-if="typeList.length">
<view class="type-box">
<u-grid col="4">
<u-grid-item v-for="(item,index) in list" :key="index" @click="typeIndex=index">
<image class="icon-logo" :class="{'choose-icon':typeIndex===index}" :src="item.logo" mode="scaleToFill"/>
<text class="type-name" :class="{'choose-name':typeIndex===index}">{{ item.name }}</text>
</u-grid-item>
<u-grid-item>
<image class="icon-logo" :src="webUrl+'/20230913155700903114.png'" mode="scaleToFill"/>
<text class="type-name">全部</text>
</u-grid-item>
</u-grid>
</view>
<view class="title-line flex ai-center">
<image class="title-icon" :src="list[typeIndex].titleIcon" mode="scaleToFill"/>
<text>{{ list[typeIndex].title }}</text>
</view>
<image class="type-img" :src="list[typeIndex].contents[0].image" mode="widthFix" @click="goDetail"/>
<view class="goods-list flex flex-wrap">
<view class="item flex flex-col ai-end" :style="{backgroundColor:list[typeIndex].backgroundColor}" v-for="item in list[typeIndex].products" :key="item"
@click="$global.navToGoods(item.id)">
<view class="img-box">
<image :src="item.image" mode="scaleToFill"/>
<view class="img-mask flex jc-center ai-center">
<view class="name one-t">{{ item.storeName }}</view>
</view>
</view>
<view class="more-t">{{ item.storeInfo }}</view>
<view class="price tc">￥{{ item.price }}</view>
</view>
</view>
</template>
</view>
</template>
<style scoped lang="less">
.product-season {
min-height: 100vh;
background: #FFFFFF;
color: #333333;
image {
vertical-align: middle;
}
.type-box {
padding: 32rpx 62rpx 0;
.icon-logo {
width: 80rpx;
height: 80rpx;
}
.type-name {
margin-top: 8rpx;
font-size: 24rpx;
}
.choose-icon {
width: 90rpx;
height: 90rpx;
}
.choose-name {
color: #f66;
font-size: 26rpx;
}
}
.title-line {
padding: 50rpx 32rpx 20rpx;
.title-icon {
width: 40rpx;
height: 40rpx;
margin-right: 8rpx;
}
text {
line-height: 1;
font-size: 32rpx;
font-weight: bold;
}
}
.type-img {
width: 690rpx;
padding: 0 30rpx;
}
.goods-list {
padding: 24rpx 32rpx;
.item {
position: relative;
width: 328rpx;
height: 480rpx;
box-sizing: border-box;
border-radius: 20rpx;
margin-bottom: 24rpx;
margin-right: 30rpx;
padding: 16rpx;
.img-box {
position: relative;
width: 296rpx;
height: 296rpx;
image {
width: 296rpx;
height: 296rpx;
border-radius: 20rpx;
}
.img-mask {
position: absolute;
bottom: 0;
left: 0;
width: 296rpx;
height: 60rpx;
box-sizing: border-box;
padding: 0 20rpx;
background: rgba(0, 0, 0, .5);
border-radius: 0 0 20rpx 20rpx;
.name {
color: #FFFFFF;
font-size: 32rpx;
}
}
}
.more-t {
width: 100%;
margin-top: 10rpx;
font-size: 26rpx;
line-height: 38rpx;
text-align: left;
}
.price {
position: absolute;
bottom: 16rpx;
right: 16rpx;
display: inline-block;
height: 48rpx;
border-radius: 24rpx;
margin-top: 8rpx;
padding: 0 12rpx;
background: #FFFFFF;
font-size: 32rpx;
line-height: 48rpx;
}
}
.item:nth-child(2n) {
margin-right: 0;
}
}
}
</style>
pkg_product/views/seckill.vue
+22 -14
View File
@@ -1,12 +1,9 @@
<template>
<view class="views-seckill pkg-product-list" :style="{'backgroundImage':`url(${webUrl}/20221222155058686606.png)`}">
<!-- <hx-navbar :back="true" :fixed="false" leftText="天天秒杀" color="#fff" :statusBar="true" transparent="hidden"-->
<!-- barPlaceholder="hidden"/>-->
<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 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 class="img-box flex jc-between ai-end">
<image class="img-seckill" :src="webUrl+'/20221222155145987590.png'" mode="scaleToFill"/>
@@ -21,7 +18,8 @@
<view class="flex jc-center">
<image class="title" :src="webUrl+'/20221230201151585898.png'" mode="scaleToFill"/>
</view>
<view class="content">{{ ruleContent }}</view>
<rich-text class="content" :nodes="ruleContent"/>
<!-- <view class="content">{{ ruleContent }}</view>-->
</view>
</view>
</view>
@@ -66,7 +64,8 @@
</view>
<view class="list-box">
<view class="item flex" v-for="(item,index) in list" :key="index" @click="goGoodsConByProductID(item)">
<view class="item flex" v-for="(item,index) in list" :key="index"
@click="goGoodsConByProductID(item,seckillTime[seckillTimeIndex].status)">
<image class="img-cover flex-0" :src="item.image"
mode="scaleToFill"/>
<view class="content flex flex-col jc-between">
@@ -140,6 +139,7 @@ export default {
this.page = 1;
this.list = [];
this.timeId = this.seckillTime[this.seckillTimeIndex].id;
this.endReach = false;
this.fetchList()
},
@@ -175,7 +175,15 @@ export default {
});
},
goGoodsConByProductID(item) {
goGoodsConByProductID(item, status) {
if (status > 1) {
uni.showToast({
title: "此商品秒杀活动还未开始哦",
icon: "none"
})
return;
}
this.$yrouter.push({
path: '/pages/shop/GoodsCon/index',
query: {
@@ -193,8 +201,8 @@ export default {
@import "@/assets/css/product.less";
.views-seckill {
padding-top: 40rpx;
background-size: 750rpx auto;
//padding-top: 40rpx;
background-size: 750rpx 360rpx;
background-repeat: no-repeat;
.dialog-mask {
@@ -248,8 +256,8 @@ export default {
}
.img-box {
margin-top: 40rpx;
padding: 0 32rpx;
//margin-top: 40rpx;
padding: 40rpx 32rpx 0;
.img-seckill {
width: 224.65rpx;