Feat(时令尝鲜):接口对接
This commit is contained in:
lifizer
@@ -1,160 +0,0 @@
|
||||
<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>
|
||||
@@ -1,217 +0,0 @@
|
||||
<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>
|
||||
@@ -101,6 +101,7 @@ export default {
|
||||
changeTab(index) {
|
||||
if (this.asideList.length === 0) return;
|
||||
if (index === this.tabIndex) return;
|
||||
this.page = 1;
|
||||
this.dataList = [];
|
||||
this.tabIndex = index;
|
||||
this.search();
|
||||
@@ -151,6 +152,7 @@ export default {
|
||||
asideTap(index) {
|
||||
this.asideIndex = index;
|
||||
this.page = 1;
|
||||
this.dataList = [];
|
||||
this.search();
|
||||
},
|
||||
goStore(id) {
|
||||
|
||||
@@ -1,191 +0,0 @@
|
||||
<template>
|
||||
<view class="pkg-product-list">
|
||||
<view class="top-box">
|
||||
<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>
|
||||
|
||||
<u-tabs :list="tabList" keyName="cateName" lineColor="#D30808" :activeStyle="{color:'#FFFFFF',fontWeight:'bold'}"
|
||||
:inactiveStyle="{color:'rgba(255,255,255,.6)'}"
|
||||
lineWidth="120rpx" @click="tabsTap"></u-tabs>
|
||||
</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.cateName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="article-box">
|
||||
<view class="line-location flex ai-center">
|
||||
<image :src="webUrl+'/20220903142929759087.png'" mode="scaleToFill"></image>
|
||||
<text class="bold" @click="goCity">当前城市：{{ cityName }}</text>
|
||||
</view>
|
||||
|
||||
<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="$global.navToGoods(item.id)">
|
||||
<image class="cover" :src="item.image" mode="scaleToFill"/>
|
||||
<view class="name more-t">{{ item.storeName }}</view>
|
||||
<view class="price bold">￥{{ 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 {fetchNormal, getCategory} from "@/api/store";
|
||||
|
||||
export default {
|
||||
name: "nativeList",
|
||||
components: {
|
||||
MescrollBody
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
keyword: "",
|
||||
asideList: [],
|
||||
asideIndex: 0,
|
||||
dataList: [], // 列表数据
|
||||
tabList: [],
|
||||
cityId: null,
|
||||
cityName: "桂林市",
|
||||
|
||||
upOption: {
|
||||
noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
|
||||
auto: true,
|
||||
empty: {
|
||||
tip: '暂无商品' // 提示
|
||||
}
|
||||
},
|
||||
downOption: {
|
||||
auto: false
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [
|
||||
MescrollMixins({
|
||||
getPageData(mescroll) {
|
||||
console.log("test", mescroll)
|
||||
let that = this;
|
||||
// 此时mescroll会携带page的参数:
|
||||
let pageNum = mescroll.num; // 页码, 默认从1开始
|
||||
|
||||
let timer = setInterval(() => {
|
||||
if (that.asideList.length > 0) {
|
||||
clearInterval(timer);
|
||||
|
||||
let param = {
|
||||
isGood: 1,
|
||||
page: pageNum,
|
||||
keyword: that.keyword,
|
||||
cityName: that.cityName,
|
||||
sid: that.asideList[that.asideIndex].id
|
||||
};
|
||||
|
||||
fetchNormal(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(option) {
|
||||
this.cityId = option.cityId;
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
getCategory(0, 35, this.cityId, true).then(({data}) => {
|
||||
this.tabList = data;
|
||||
this.asideList = data[0].children;
|
||||
let memCityName = uni.getStorageSync("cityName")
|
||||
if (memCityName.length) {
|
||||
this.cityName = memCityName;
|
||||
uni.removeStorageSync("cityName")
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
goCity() {
|
||||
uni.redirectTo({
|
||||
url: `/components/chose-city/chose-city?type=0&city=${this.cityName}`
|
||||
})
|
||||
},
|
||||
search() {
|
||||
//触发加载请求
|
||||
this.mescroll.scrollTo(0, 0);
|
||||
this.mescroll && this.mescroll.resetUpScroll(false);
|
||||
},
|
||||
tabsTap(item) {
|
||||
this.asideList = item.children;
|
||||
this.asideIndex = 0;
|
||||
this.search();
|
||||
},
|
||||
asideTap(index) {
|
||||
this.asideIndex = index;
|
||||
this.search();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/css/product.less";
|
||||
|
||||
.pkg-product-list {
|
||||
height: 100vh;
|
||||
overflow-y: hidden;
|
||||
|
||||
.top-box {
|
||||
height: 142rpx;
|
||||
background: #FF564A;
|
||||
}
|
||||
|
||||
.line-location {
|
||||
padding: 20rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
image {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.body-box {
|
||||
height: calc(100vh - 142rpx);
|
||||
|
||||
.article-box {
|
||||
.item {
|
||||
height: 362rpx
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,246 @@
|
||||
<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">
|
||||
<view class="scroll-item section">
|
||||
<image class="section" :src="info.topImage" mode="scaleToFill"/>
|
||||
<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>
|
||||
</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 + ')'}">
|
||||
<view class="item" v-for="(item,index) in info.products" :key="index">
|
||||
<image class="item-img" :src="item.image" mode="widthFix"/>
|
||||
<view class="content">
|
||||
<view class="name bold one-t">{{ item.storeName }}</view>
|
||||
<view class="flex jc-between ai-end">
|
||||
<view class="price">活动价:￥
|
||||
<text class="bold">{{ item.price }}</text>
|
||||
</view>
|
||||
<image class="btn-done" :src="webUrl+'/20230911105720914329.png'" mode="scaleToFill"
|
||||
@click="$global.navToGoods(item.id)"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/css/store.less";
|
||||
|
||||
.product-season {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden scroll;
|
||||
scroll-snap-type: y mandatory;
|
||||
|
||||
image {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.scroll-item {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
.section {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.share-label {
|
||||
position: absolute;
|
||||
top: 674rpx;
|
||||
right: 32rpx;
|
||||
width: 200rpx;
|
||||
height: 56rpx;
|
||||
background: rgba(255, 255, 255, 0.39);
|
||||
border-radius: 8rpx;
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
|
||||
.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 {
|
||||
position: relative;
|
||||
width: 686rpx;
|
||||
margin-bottom: 46rpx;
|
||||
border-radius: 40rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.item-img {
|
||||
width: 686rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 32rpx 40rpx;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
|
||||
color: #FFFFFF;
|
||||
line-height: 64rpx;
|
||||
|
||||
|
||||
.name {
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 32rpx;
|
||||
|
||||
text {
|
||||
font-size: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-done {
|
||||
width: 220rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -108,8 +108,8 @@ export default {
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<view class="scroll-item section">
|
||||
<u-swiper :autoplay="false" :current="current" :list="info.swiper" height="100vh" indicator
|
||||
<view class="scroll-item">
|
||||
<u-swiper :autoplay="false" :current="current" :list="info.swiper" height="1200rpx" indicator
|
||||
imgMode="scaleToFill"></u-swiper>
|
||||
<image class="icon-direction icon-left" :src="webUrl+'/20230911105736198247.png'" mode="scaleToFill"
|
||||
@click="tapLeft"/>
|
||||
@@ -118,8 +118,10 @@ export default {
|
||||
</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)"
|
||||
<image class="bg-img" :src="info.productImage" mode="widthFix"/>
|
||||
<!-- <scroll-view scroll-y class="product-list" :style="{backgroundImage:'url(' + info.productImage + ')'}">-->
|
||||
<scroll-view scroll-y class="product-list">
|
||||
<image class="item" :src="item.image" mode="widthFix" @click="$global.navToGoods(item.id)"
|
||||
v-for="(item,index) in info.products" :key="index"/>
|
||||
</scroll-view>
|
||||
</view>
|
||||
@@ -143,11 +145,6 @@ export default {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.img-top {
|
||||
width: 100vw;
|
||||
}
|
||||
@@ -187,15 +184,19 @@ export default {
|
||||
}
|
||||
|
||||
.product-list {
|
||||
padding: 200rpx 32rpx 0;
|
||||
background-size: 100vw auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 280rpx 32rpx 0;
|
||||
|
||||
.item {
|
||||
width: 686rpx;
|
||||
height: 400rpx;
|
||||
margin-bottom: 46rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-img {
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user