Init project
This commit is contained in:
lifizer
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<view class="famous-hot" v-if="story">
|
||||
|
||||
<view class="bg-box" :style="{'backgroundImage':`url(${webUrl}/20230314095400713928.png)`}">
|
||||
<image class="banner" :src="story.image" mode="scaleToFill"/>
|
||||
|
||||
<view class="story-box flex flex-col ai-center">
|
||||
<image class="story-title" :src="webUrl+'/20230313105024432472.png'" mode="scaleToFill"/>
|
||||
<view class="story-content">
|
||||
<view v-html="story.content"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list" :style="{'backgroundImage':`url(${webUrl}/20230311091305879166.png)`}">
|
||||
<image class="title" :src="webUrl+'/20230220023931078168.png'" mode="scaleToFill"/>
|
||||
|
||||
<view class="item flex" :style="{'backgroundImage':`url(${webUrl}/20230224102624521679.png)`}"
|
||||
v-for="(item,index) in products" :key="index" @click="$global.navToGoods(item.id)">
|
||||
<image class="cover flex-0" style="margin-right: 20rpx" :src="item.image"
|
||||
mode="scaleToFill" v-if="index%2===0"/>
|
||||
|
||||
<view class="info-box flex flex-col jc-between">
|
||||
<view>
|
||||
<view class="name more-t">{{ item.storeName }}</view>
|
||||
<!-- <view class="unit">100g/盒</view>-->
|
||||
<view class="flex ai-center" style="margin-top: 12rpx" v-if="item.tags.length">
|
||||
<view class="label flex jc-center ai-center" v-for="tag in item.tags">{{ tag }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex jc-between ai-center">
|
||||
<view class="price">￥{{ item.price }}</view>
|
||||
<image class="btn-go" :src="webUrl+'/20230407104241118683.png'" mode="scaleToFill"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<image class="cover flex-0" style="margin-left: 20rpx" :src="item.image"
|
||||
mode="scaleToFill" v-if="index%2===1"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getStoryDetail} from "@/api/product";
|
||||
|
||||
export default {
|
||||
name: "famousHot",
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
products: [],
|
||||
id: null,
|
||||
story: null
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.id = option.id;
|
||||
getStoryDetail(this.id).then(({data}) => {
|
||||
this.story = data;
|
||||
this.products = data.products;
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.famous-hot {
|
||||
image {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.bg-box {
|
||||
padding-bottom: 42rpx;
|
||||
background-size: 750rpx auto;
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.banner {
|
||||
width: 686rpx;
|
||||
height: 440rpx;
|
||||
margin: 20rpx 32rpx 0;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.story-box {
|
||||
position: relative;
|
||||
width: 686rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 52rpx 32rpx 0;
|
||||
border: 2rpx solid #4C7D8B;
|
||||
border-radius: 10rpx;
|
||||
background: rgba(255,255,255,.6);
|
||||
|
||||
.story-title {
|
||||
width: 270rpx;
|
||||
height: 62rpx;
|
||||
margin-top: -18rpx;
|
||||
}
|
||||
|
||||
.story-content {
|
||||
margin-top: 12rpx;
|
||||
padding: 0 24rpx 24rpx;
|
||||
color: #666666;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
position: relative;
|
||||
padding: 40rpx 0;
|
||||
background-size: 750rpx auto;
|
||||
background-repeat: repeat-y;
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 458rpx;
|
||||
height: 94rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 686rpx;
|
||||
height: 284rpx;
|
||||
background-size: 686rpx 284rpx;
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 44rpx 38rpx 42rpx 44rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.cover {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
.name {
|
||||
width: 384rpx;
|
||||
color: #435151;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-top: 12rpx;
|
||||
color: #333;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
height: 44rpx;
|
||||
box-sizing: border-box;
|
||||
margin-right: 8rpx;
|
||||
padding: 0 18rpx;
|
||||
border-radius: 22rpx;
|
||||
background: #B1211F;
|
||||
color: #FFFFFF;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.label:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #DA0000;
|
||||
font-size: 36rpx;
|
||||
line-height: 52rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn-go {
|
||||
width: 140rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<view class="pkg-product-list">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<image class="banner" :src="webUrl+'/20230220024816081525.png'" mode="scaleToFill" @click="goStory"/>
|
||||
|
||||
<view class="nav-box flex">
|
||||
<view class="item" :class="{'active':index===navIndex}" v-for="(item,index) in navList" :key="index"
|
||||
@click="navTap(index)">{{ item.value }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section-title bold">千县名品榜单</view>
|
||||
|
||||
<view class="list flex flex-wrap">
|
||||
<view class="item" v-for="(item,index) in dataList" :key="index" @click="goGoods(item.id)">
|
||||
<image class="label" :src="webUrl+'/20230222133041781911.png'"/>
|
||||
<image class="cover" :src="item.image" mode="scaleToFill"/>
|
||||
<view class="name bold one-t">{{ item.storeName }}</view>
|
||||
<view class="price">￥
|
||||
<text class="bold">{{ item.price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {countyFamous} from "@/api/product";
|
||||
import {getProducts} from "@/api/store";
|
||||
|
||||
export default {
|
||||
name: "famousList",
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
keyword: "",
|
||||
page: 1,
|
||||
bannerList: [],
|
||||
dataList: [],
|
||||
navList: [],
|
||||
navIndex: 0
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
countyFamous().then(({data}) => {
|
||||
this.bannerList = data.banner;
|
||||
this.navList = data.countyFamousAreaList;
|
||||
this.search();
|
||||
})
|
||||
},
|
||||
onReachBottom() {
|
||||
this.page++;
|
||||
this.fetchList();
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
this.page = 1;
|
||||
this.dataList = [];
|
||||
this.fetchList();
|
||||
},
|
||||
navTap(index) {
|
||||
if (index === this.navIndex) return;
|
||||
this.navIndex = index;
|
||||
this.search();
|
||||
},
|
||||
fetchList() {
|
||||
let param = {
|
||||
isCountyFamous: 1,
|
||||
page: this.page,
|
||||
limit: 10,
|
||||
keyword: this.keyword,
|
||||
countyFamousArea: this.navList.length > 0 ? this.navList[this.navIndex].key : ""
|
||||
}
|
||||
|
||||
getProducts(param).then(({data}) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
this.dataList.push(data[i]);
|
||||
}
|
||||
})
|
||||
},
|
||||
goGoods(id) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/shop/GoodsCon/index?id=" + id
|
||||
})
|
||||
},
|
||||
goStory() {
|
||||
uni.navigateTo({
|
||||
url: "/pkg_product/views/famousStory"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/css/product.less";
|
||||
|
||||
.pkg-product-list {
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding-top: 16rpx;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
|
||||
.swiper-box {
|
||||
margin: 18rpx 32rpx 0;
|
||||
}
|
||||
|
||||
.banner {
|
||||
width: 686rpx;
|
||||
height: 160rpx;
|
||||
margin: 20rpx 32rpx 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0 32rpx 20rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
|
||||
.nav-box {
|
||||
width: 718rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 26rpx 32rpx;
|
||||
overflow-x: auto;
|
||||
|
||||
.item {
|
||||
margin-right: 50rpx;
|
||||
color: #7D7D7D;
|
||||
font-size: 26rpx;
|
||||
line-height: 38rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.active {
|
||||
position: relative;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.active:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 6rpx;
|
||||
border-radius: 30px;
|
||||
background: #FF564A;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-box::-webkit-scrollbar {
|
||||
width: 0 !important
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 0 32rpx 32rpx;
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
width: 332rpx;
|
||||
margin: 0 22rpx 24rpx 0;
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 72rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 332rpx;
|
||||
height: 332rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
height: 64rpx;
|
||||
margin: 4rpx 0;
|
||||
font-size: 34rpx;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #DA0000;
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
|
||||
.bold {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<view class="famous-story">
|
||||
<image class="img" :src="item.image" mode="scaleToFill" v-for="item in list" @click="goHot(item)"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getStoryList} from "@/api/product";
|
||||
|
||||
export default {
|
||||
name: "famousStory",
|
||||
data() {
|
||||
return {
|
||||
page: 1, // 当前页
|
||||
pages: 1, // 总页数
|
||||
list: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.fetchData();
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.page < this.pages) {
|
||||
this.page++;
|
||||
this.fetchData();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
getStoryList(this.page).then(({data}) => {
|
||||
this.pages = data.pages;
|
||||
if (data.records.length > 0) {
|
||||
for (let i = 0; i < data.records.length; i++) {
|
||||
this.list.push(data.records[i]);
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
goHot(item) {
|
||||
uni.navigateTo({
|
||||
url: "/pkg_product/views/famousHot?id=" + item.id
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.famous-story {
|
||||
padding-top: 20rpx;
|
||||
background: #fff;
|
||||
|
||||
.img {
|
||||
width: 686rpx;
|
||||
height: 440rpx;
|
||||
margin: 0 32rpx 32rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<view>find joy</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "findJoy"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,156 @@
|
||||
<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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<view class="pkg-product-list">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<swiper class="swiper-box" indicator-dots indicator-color="rgba(255,255,255,.3)" indicator-active-color="#fff"
|
||||
autoplay circular v-else>
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-blue">暂无内容</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view class="tab-box flex jc-center ai-center" v-show="tabIndex===0">
|
||||
<image class="active" src="/static/images/v6/btn_active_left.png" @click="changeTab(0)"/>
|
||||
<image class="inactive" src="/static/images/v6/btn_right.png" @click="changeTab(1)"/>
|
||||
</view>
|
||||
<view class="tab-box flex jc-center ai-center" v-show="tabIndex===1">
|
||||
<image class="inactive" src="/static/images/v6/btn_left.png" @click="changeTab(0)"/>
|
||||
<image class="active" src="/static/images/v6/btn_active_right.png" @click="changeTab(1)"/>
|
||||
</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="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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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,
|
||||
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);
|
||||
},
|
||||
methods: {
|
||||
changeTab(index) {
|
||||
if (this.asideList.length === 0) return;
|
||||
if (index === this.tabIndex) return;
|
||||
this.dataList = [];
|
||||
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;
|
||||
this.search();
|
||||
},
|
||||
fetchData() {
|
||||
let param = {
|
||||
page: this.page,
|
||||
limit: 10,
|
||||
keyword: this.keyword,
|
||||
provinceId: this.asideList.length > 0 ? this.asideList[this.asideIndex].provinceId : ""
|
||||
}
|
||||
if (this.tabIndex === 0) {
|
||||
wellnessPlaceList(param).then(({data}) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
this.dataList.push(data[i]);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
param.isWellnessFood = 1;
|
||||
getProducts(param).then(({data}) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
this.dataList.push(data[i]);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
goStore(id) {
|
||||
uni.navigateTo({
|
||||
url: "/pagesInn/inn/innHome?id=" + id
|
||||
})
|
||||
},
|
||||
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: 16rpx;
|
||||
background: #fff;
|
||||
|
||||
.tab-box {
|
||||
margin: 0 32rpx;
|
||||
|
||||
.active {
|
||||
width: 342rpx;
|
||||
height: 96rpx;
|
||||
}
|
||||
|
||||
.inactive {
|
||||
width: 342rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0 0 12px 0 rgba(0, 0, 0, .1);
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
margin: 20rpx auto 30rpx;
|
||||
}
|
||||
|
||||
.body-box {
|
||||
position: fixed;
|
||||
top: 610rpx;
|
||||
height: calc(100vh - 610rpx);
|
||||
|
||||
.store {
|
||||
image {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
view {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,177 @@
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<view class="item" @click="$global.navToGoods(item.id)" v-for="(item, index) in dataList"
|
||||
:key="index">
|
||||
<image class="cover" :src="item.image" mode="scaleToFill"/>
|
||||
<view class="name more-t">{{ item.storeName }}</view>
|
||||
<view class="price bold">￥{{ item.price }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {fetchNormal, getCategory} from "@/api/store";
|
||||
|
||||
export default {
|
||||
name: "nativeList",
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
keyword: "",
|
||||
asideList: [],
|
||||
asideIndex: 0,
|
||||
dataList: [], // 列表数据
|
||||
tabList: [],
|
||||
cityId: null,
|
||||
cityName: "桂林市",
|
||||
page: 1,
|
||||
listHeight: "auto"
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.cityId = option.cityId;
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
goCity() {
|
||||
uni.redirectTo({
|
||||
url: `/components/chose-city/chose-city?type=0&city=${this.cityName}`
|
||||
})
|
||||
},
|
||||
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")
|
||||
}
|
||||
this.search();
|
||||
});
|
||||
},
|
||||
onLower() {
|
||||
this.page++;
|
||||
this.search();
|
||||
},
|
||||
search() {
|
||||
let that = this;
|
||||
let param = {
|
||||
isGood: 1,
|
||||
page: this.page,
|
||||
keyword: this.keyword,
|
||||
cityName: this.cityName,
|
||||
sid: this.asideList[this.asideIndex].id
|
||||
};
|
||||
|
||||
fetchNormal(param).then(({data}) => {
|
||||
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;
|
||||
that.listHeight = "auto";
|
||||
if (windowHeight > 600 && len > 6) {
|
||||
that.listHeight = "100%";
|
||||
}
|
||||
if (windowHeight <= 600 && len > 4) {
|
||||
that.listHeight = "100%";
|
||||
}
|
||||
}
|
||||
});
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err + '',
|
||||
icon: 'none',
|
||||
mask: false,
|
||||
duration: 1500
|
||||
});
|
||||
})
|
||||
},
|
||||
tabsTap(item) {
|
||||
this.asideList = item.children;
|
||||
this.asideIndex = 0;
|
||||
this.page = 1;
|
||||
this.search();
|
||||
},
|
||||
asideTap(index) {
|
||||
this.asideIndex = index;
|
||||
this.page = 1;
|
||||
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,191 @@
|
||||
<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,157 @@
|
||||
<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>
|
||||
</view>
|
||||
|
||||
<view class="list-box">
|
||||
<view class="item flex ai-end" v-for="(item,index) in dataList" :key="index">
|
||||
<view class="img-box">
|
||||
<image class="label" :src="webUrl+'/20221203153744574979.png'" mode="scaleToFill"/>
|
||||
<image class="cover flex-0" :src="item.image" mode="scaleToFill"/>
|
||||
</view>
|
||||
|
||||
<view class="info-box">
|
||||
<view class="title bold one-t">{{item.storeName}}</view>
|
||||
<view class="flex jc-between ai-center">
|
||||
<view class="price bold">￥{{item.price}}</view>
|
||||
<image class="btn" :src="webUrl+'/20221205145730924688.png'" mode="scaleToFill" @click="goGoodsCon(item)"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getProducts} from "@/api/store";
|
||||
|
||||
export default {
|
||||
name: "scenicSpot",
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
dataList: [],
|
||||
page: 1,
|
||||
cityName: "丽江市",
|
||||
keyword: ""
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
let memCityName = uni.getStorageSync("cityName")
|
||||
if (memCityName.length) {
|
||||
this.cityName = memCityName;
|
||||
this.page = 1;
|
||||
this.dataList = [];
|
||||
this.fetchList();
|
||||
// uni.removeStorageSync("cityName")
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.page++;
|
||||
this.fetchList();
|
||||
},
|
||||
methods: {
|
||||
search(){
|
||||
this.page=1;
|
||||
this.dataList=[];
|
||||
this.fetchList();
|
||||
},
|
||||
fetchList() {
|
||||
let param = {
|
||||
page: this.page,
|
||||
limit: 10,
|
||||
isTickets: 1,
|
||||
cityName: this.cityName,
|
||||
keyword: this.keyword
|
||||
}
|
||||
getProducts(param).then(({data}) => {
|
||||
for(let i=0;i<data.length;i++){
|
||||
this.dataList.push(data[i])
|
||||
}
|
||||
});
|
||||
},
|
||||
goGoodsCon(item) {
|
||||
this.$yrouter.push({
|
||||
path: "/pages/shop/GoodsCon/index",
|
||||
query: {id: item.id}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/css/product.less";
|
||||
|
||||
.pkg-product-list {
|
||||
.top-box {
|
||||
padding: 16rpx 32rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.list-box {
|
||||
padding: 24rpx 32rpx;
|
||||
|
||||
.item {
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
.img-box {
|
||||
position: relative;
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -34rpx;
|
||||
width: 146rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 240rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 8rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.info-box {
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx 16rpx 16rpx 20rpx;
|
||||
border-radius: 0 12rpx 12rpx 0;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
margin-bottom: 26rpx;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #DA0000;
|
||||
font-size: 32rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 144rpx;
|
||||
height: 48rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,515 @@
|
||||
<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="img-box flex jc-between ai-end">
|
||||
<image class="img-seckill" :src="webUrl+'/20221222155145987590.png'" mode="scaleToFill"/>
|
||||
<image class="img-rule" :src="webUrl+'/20221222155206016851.png'" mode="scaleToFill" @click="showRule=true"/>
|
||||
</view>
|
||||
|
||||
<view class="dialog-mask" v-show="showRule">
|
||||
<view class="dialog">
|
||||
<image class="icon-close" :src="webUrl+'/20221230200935413332.png'" mode="scaleToFill" @click="showRule=false"/>
|
||||
|
||||
<view class="dialog-body">
|
||||
<view class="flex jc-center">
|
||||
<image class="title" :src="webUrl+'/20221230201151585898.png'" mode="scaleToFill"/>
|
||||
</view>
|
||||
<view class="content">{{ ruleContent }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="top-list flex">
|
||||
<view class="item flex-0" v-for="(item,index) in topList" :key="index" @click="goGoodsConByProductID(item)">
|
||||
<view class="header flex jc-between ai-center">
|
||||
<image class="img-rush" :src="webUrl+'/20221222155118237514.png'" mode="scaleToFill"/>
|
||||
<view class="end-time flex ai-center">
|
||||
<text class="text-tip">倒计时:</text>
|
||||
<count-down-unit :isDay="true" isSecond :dayText="'天'" :hourText="':'" :minuteText="':'"
|
||||
:secondText="false"
|
||||
:datatime="item.limitEndTimeMillis"></count-down-unit>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content flex ai-end">
|
||||
<image class="img-cover flex-0" :src="item.image"
|
||||
mode="scaleToFill"/>
|
||||
<view class="info-box flex flex-col jc-between">
|
||||
<view class="more-t">{{ item.title }}</view>
|
||||
<view class="line-price flex jc-between ai-center">
|
||||
<view>￥{{ item.price }}</view>
|
||||
<view class="btn flex jc-center ai-center">立即抢</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="nav-box flex ai-center">
|
||||
<view class="img-section">
|
||||
<image class="img-hot flex-0" :src="webUrl+'/20230311090049756844.png'" mode="scaleToFill"/>
|
||||
</view>
|
||||
<view class="nav-line flex">
|
||||
<view class="nav-item flex-0 flex flex-col jc-end ai-center" :class="{'active':index===seckillTimeIndex}"
|
||||
v-for="(item,index) in seckillTime" :key="index" @click="navChange(index)">
|
||||
<view class="time">{{ item.time }}</view>
|
||||
<view class="tag">{{ item.state }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-box">
|
||||
<view class="item flex" v-for="(item,index) in list" :key="index" @click="goGoodsConByProductID(item)">
|
||||
<image class="img-cover flex-0" :src="item.image"
|
||||
mode="scaleToFill"/>
|
||||
<view class="content flex flex-col jc-between">
|
||||
<view class="top-section">
|
||||
<!-- style="height: 150rpx"-->
|
||||
<view class="more-t">{{ item.title }}</view>
|
||||
<view class="company">{{ item.unitName }}</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="line-price flex jc-between ai-center">
|
||||
<view class="flex ai-end">
|
||||
<view>秒杀价</view>
|
||||
<view class="price">￥{{ item.price }}</view>
|
||||
</view>
|
||||
<view class="advance flex jc-center ai-center" v-if="seckillTime[seckillTimeIndex].status>1">即将开始
|
||||
</view>
|
||||
</view>
|
||||
<view class="path-box flex jc-between ai-center"
|
||||
:style="{'backgroundImage':`url(${webUrl}/20221222155107931036.png)`}"
|
||||
v-if="seckillTime[seckillTimeIndex].status===1">
|
||||
<view class="sale flex ai-center">已抢{{ item.sales }}件</view>
|
||||
<view class="btn">立即抢购</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CountDownUnit from "@/pkg_product/components/CountDownUnit.vue";
|
||||
import {getSeckillRule, getSeckillTopList, getYxStoreSeckillIndex, getYxStoreSeckillPageList} from "@/api/goods";
|
||||
|
||||
export default {
|
||||
name: "seckill",
|
||||
components: {
|
||||
CountDownUnit
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
showRule: false,
|
||||
|
||||
seckillTime: [],
|
||||
seckillTimeIndex: 0,
|
||||
page: 1,
|
||||
list: [],
|
||||
topList: [],
|
||||
endReach: false,
|
||||
timeId: null,
|
||||
nextList: [],
|
||||
ruleContent: null
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.fetchSession();
|
||||
getSeckillRule().then(({data}) => this.ruleContent = data);
|
||||
getSeckillTopList(1, 10).then(({data}) => this.topList = data.records);
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.endReach) return;
|
||||
this.page++;
|
||||
this.fetchList();
|
||||
},
|
||||
methods: {
|
||||
navChange(index) {
|
||||
if (this.seckillTimeIndex === index) return;
|
||||
this.seckillTimeIndex = index;
|
||||
this.page = 1;
|
||||
this.list = [];
|
||||
this.timeId = this.seckillTime[this.seckillTimeIndex].id;
|
||||
this.fetchList()
|
||||
},
|
||||
|
||||
fetchSession() {
|
||||
getYxStoreSeckillIndex().then(({
|
||||
data
|
||||
}) => {
|
||||
if (data.seckillTime.length === 0) return;
|
||||
|
||||
this.seckillTime = data.seckillTime.filter(item => item.status > 0);
|
||||
this.timeId = this.seckillTime[this.seckillTimeIndex].id;
|
||||
this.fetchList();
|
||||
|
||||
if (this.seckillTime.length > this.seckillTimeIndex) {
|
||||
getYxStoreSeckillPageList(1, 10, this.seckillTime[this.seckillTimeIndex + 1].id).then(({
|
||||
data
|
||||
}) => {
|
||||
this.nextList = data;
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
fetchList() {
|
||||
getYxStoreSeckillPageList(this.page, 10, this.timeId).then(({
|
||||
data
|
||||
}) => {
|
||||
if (data.length > 0) {
|
||||
data.map(item => this.list.push(item));
|
||||
} else {
|
||||
this.endReach = true;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
goGoodsConByProductID(item) {
|
||||
this.$yrouter.push({
|
||||
path: '/pages/shop/GoodsCon/index',
|
||||
query: {
|
||||
id: item.productId,
|
||||
activityId: item.id,
|
||||
from: "kill"
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/css/product.less";
|
||||
|
||||
.views-seckill {
|
||||
padding-top: 40rpx;
|
||||
background-size: 750rpx auto;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.dialog-mask {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
background: rgba(51, 51, 51, 0.5);
|
||||
z-index: 999;
|
||||
|
||||
view {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 560rpx;
|
||||
height: 800rpx;
|
||||
padding: 40rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.icon-close {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 30rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
.title {
|
||||
width: 192rpx;
|
||||
height: 40rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 660rpx;
|
||||
margin-top: 20rpx;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
line-height: 48rpx;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img-box {
|
||||
margin-top: 40rpx;
|
||||
padding: 0 32rpx;
|
||||
|
||||
.img-seckill {
|
||||
width: 224.65rpx;
|
||||
height: 46.34rpx;
|
||||
}
|
||||
|
||||
.img-rule {
|
||||
width: 80rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.top-list {
|
||||
margin-top: 34rpx;
|
||||
padding: 0 32rpx;
|
||||
overflow-x: auto;
|
||||
|
||||
.item {
|
||||
width: 486rpx;
|
||||
height: 280rpx;
|
||||
margin-right: 20rpx;
|
||||
padding: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
box-sizing: border-box;
|
||||
background: #FFF;
|
||||
|
||||
.header {
|
||||
.img-rush {
|
||||
width: 112rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
|
||||
.end-time {
|
||||
.text-tip {
|
||||
color: #E62113;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
/deep/ .time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
|
||||
.timeTxt {
|
||||
color: #E62113;
|
||||
}
|
||||
|
||||
.unit {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 26rpx;
|
||||
height: 32rpx;
|
||||
margin: 0 2rpx;
|
||||
background: #E02619;
|
||||
color: #fff;
|
||||
box-shadow: 2rpx 2rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
border-radius: 4rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 20rpx;
|
||||
|
||||
.img-cover {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
height: 180rpx;
|
||||
}
|
||||
|
||||
.more-t {
|
||||
margin-top: 8rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.line-price {
|
||||
width: 256rpx;
|
||||
height: 48rpx;
|
||||
padding-left: 12rpx;
|
||||
border: 2rpx solid #FFA833;
|
||||
border-radius: 24rpx;
|
||||
box-sizing: border-box;
|
||||
color: #FF6725;
|
||||
font-size: 30rpx;
|
||||
|
||||
.btn {
|
||||
width: 114rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 24rpx;
|
||||
background: #FFA833;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-box {
|
||||
width: 686rpx;
|
||||
height: 96rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 34rpx auto 0;
|
||||
border-radius: 20rpx 20rpx 0px 0px;
|
||||
background: #FCE4DB;
|
||||
|
||||
.img-section {
|
||||
position: relative;
|
||||
height: 48rpx;
|
||||
padding: 0 24rpx 0 20rpx;
|
||||
border-right: 2rpx solid #fff;
|
||||
|
||||
.img-hot {
|
||||
position: relative;
|
||||
top: -12rpx;
|
||||
width: 108rpx;
|
||||
height: 74rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav-line {
|
||||
width: 558rpx;
|
||||
box-sizing: border-box;
|
||||
padding-left: 22rpx;
|
||||
padding-bottom: 14rpx;
|
||||
overflow-x: auto;
|
||||
|
||||
.nav-item {
|
||||
width: 90rpx;
|
||||
height: 96rpx;
|
||||
margin-right: 10rpx;
|
||||
|
||||
.time {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
line-height: 38rpx;
|
||||
color: #B17961;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 20rpx;
|
||||
line-height: 30rpx;
|
||||
color: #B17961;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
.time {
|
||||
color: #EB524A;
|
||||
font-size: 32rpx;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
.tag {
|
||||
color: #FF564A;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-box {
|
||||
margin: 0 32rpx;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.item {
|
||||
//height: 244rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
|
||||
.img-cover {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin-right: 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 200rpx;
|
||||
|
||||
.more-t {
|
||||
width: 430rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
line-height: 40rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.company {
|
||||
//margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
line-height: 34rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.line-price {
|
||||
color: #FF564A;
|
||||
font-size: 22rpx;
|
||||
|
||||
.price {
|
||||
margin-left: 8rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
color: #DA0000;
|
||||
}
|
||||
|
||||
.advance {
|
||||
width: 140rpx;
|
||||
height: 46rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #FF564A;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.path-box {
|
||||
width: 378rpx;
|
||||
height: 48rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top: 6rpx;
|
||||
padding: 0 44rpx 0 14rpx;
|
||||
background-size: 378rpx 48rpx;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.sale {
|
||||
width: 208rpx;
|
||||
height: 36rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 10rpx;
|
||||
background: #FCEAEE;
|
||||
color: #FF564A;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,152 @@
|
||||
<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="fetchList"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list" v-if="sharpList.length">
|
||||
<custom-waterfalls-flow :value="sharpList" imageKey="image" @imageClick="imageClick">
|
||||
<view class="item" v-for="(item,index) in sharpList" :key="index" slot="slot{{index}}"
|
||||
@click="goGoods(item.id)">
|
||||
<template v-if="item.storeName">
|
||||
<view class="info">
|
||||
<view class="more-t">{{ item.storeName }}</view>
|
||||
<text class="one-t">￥{{ item.price }}</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<swiper autoplay circular>
|
||||
<swiper-item v-for="swipe in item.imgs" :key="swipe">
|
||||
<image class="swiper-img" :src="swipe.pic" mode="scaleToFill" @click="goGoods(swipe.productId)"/>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</template>
|
||||
</view>
|
||||
</custom-waterfalls-flow>
|
||||
</view>
|
||||
|
||||
<view class="v4-nodata" v-else>
|
||||
<image src="@/static/images/img_nodata.png" mode="scaleToFill"/>
|
||||
<view class="text">暂无数据</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getSharpList, sharpBannar} from "@/api/goods";
|
||||
|
||||
export default {
|
||||
name: "sharpList",
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
keyword: "",
|
||||
bannarList: [],
|
||||
sharpList: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.fetchList();
|
||||
},
|
||||
methods: {
|
||||
goGoods(id) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/shop/GoodsCon/index?id=" + id
|
||||
})
|
||||
},
|
||||
|
||||
imageClick(item) {
|
||||
this.goGoods(item.id);
|
||||
},
|
||||
|
||||
fetchList() {
|
||||
let that = this;
|
||||
let temp = [];
|
||||
sharpBannar().then(({data}) => {
|
||||
temp.push({
|
||||
hide: true,
|
||||
image: data.banner[0].pic,
|
||||
imgs: data.banner,
|
||||
listStyle: {
|
||||
'width': 330 + "rpx",
|
||||
'height': 440 + "rpx"
|
||||
}
|
||||
})
|
||||
|
||||
getSharpList(that.keyword).then(({data}) => {
|
||||
data.map(item => {
|
||||
temp.push(item)
|
||||
})
|
||||
that.$nextTick(() => {
|
||||
that.sharpList = temp;
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/css/product.less";
|
||||
|
||||
.top-box {
|
||||
padding: 16rpx 32rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.list {
|
||||
box-sizing: border-box;
|
||||
padding: 25rpx 32rpx;
|
||||
|
||||
swiper {
|
||||
height: 440rpx !important;
|
||||
}
|
||||
|
||||
.swiper-img {
|
||||
width: 332rpx;
|
||||
height: 440rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 332rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 0 22rpx 25rpx 0;
|
||||
border-radius: 12rpx;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
|
||||
.cover {
|
||||
width: 332rpx;
|
||||
height: 332rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
box-sizing: border-box;
|
||||
padding: 8rpx 10rpx 0;
|
||||
|
||||
.more-t {
|
||||
color: #333;
|
||||
line-height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.one-t {
|
||||
margin-top: 4rpx;
|
||||
color: #DA0000;
|
||||
line-height: 36rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user