TmOct5/dtx_store
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

店铺会员制Vip功能增加

Browse Source
This commit is contained in:
张冬雪
2022-08-11 15:48:33 +08:00
parent 7e8ed7115d
commit 4b3d83007b
35 changed files with 6869 additions and 2379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

892
pages/store/index.vue
View File

@@ -1,391 +1,503 @@
<template>
<view class="content">
<!-- swiper -->
<view class="swiper">
<view class="swiper-box">
<swiper autoplay @change="swiperCount = $event.detail.current">
<swiper-item v-for="(item, index) in banners" :key="index" @click="goBook(item)">
<image :src="item.cover" mode="aspectFill"></image>
</swiper-item>
</swiper>
<view class="swiper-pages">
<block v-for="(item, index) in banners" :key="index">
<text class="pages-item" :class="{'show':swiperCount === index}"></text>
</block>
</view>
</view>
</view>
<!-- 健康产品分类 -->
<u-scroll-list class="classify-box" indicatorColor="#ddd" indicatorActiveColor="#34CE98">
<view v-for="(item, index) in goodTabs" :key="index" class="classify-item" @click="$Router.push({name: 'StoreList', params: {id: item.category_id, title: item.name}})">
<view class="classify-item-nav">
<image class="classify-item-cover" :src="item.cover"></image>
<view class="classify-item-title">{{item.name}}</view>
</view>
</view>
</u-scroll-list>
<!-- 每日上新 -->
<view class="new-box">
<view class="title">上新精选<text class="title-des"> | 精品上新新品推荐</text></view>
<view class="news">
<view class="news-item" v-for="(item, index) in newGood" :key="index" @click="$Router.push({ name: 'StoreGoods', params: {id: item.goods_id}})">
<view class="news-cover">
<image :src="item.cover" mode="aspectFill"></image>
</view>
<view class="news-title nowrap">{{item.name}}</view>
<view class="news-price nowrap">{{item.price.price_min}} <text>DT积分</text></view>
</view>
</view>
</view>
<!-- 线下商家 -->
<view class="offline-box">
<view class="title">推荐店铺 <view class="more"><text class="title-des"> | 您身边的优质体验店</text> <text class="more-txt" @click="$Router.push({name: 'ShopList'})">更多></text></view></view>
<view class="card-box">
<block v-for="(item, index) in shops" :key="index">
<view class="card-box-item" style="{'backgrond': #FFF}" v-if="index < 4" @click="$Router.push({name: 'ShopDetail', params: {ShopId: item.shop_id}})">
<view class="card-title">{{item.name}}</view>
<view class="card-subtitle"> 优质店铺 </view>
<view class="card-btn">前往体验</view>
<image class="card-cover" :src="item.cover" mode="aspectFill" />
</view>
</block>
</view>
</view>
<!-- 推荐品类 -->
<!-- <view class="card-box">
<block v-for="(item, index) in meals" :key="index">
<view class="card-box-item" :style="{'backgrond': item.color}" @click="$Router.push({name: 'StoreMeals', params: {id: item.meal_id}})">
<view class="card-title">{{item.title}}</view>
<view class="card-subtitle">{{item.subtitle}}</view>
<image class="card-cover" :src="item.cover" mode="aspectFill"></image>
</view>
</block>
</view> -->
<!-- goods -->
<view class="goods-box">
<oct-goods
:lists="goodsArr"
priceType="DT"
color="#e6576b"
@onGoods="$Router.push({ name: 'StoreGoods', params: {id: $event.goods_id}})"
/>
<!-- <u-loadmore status="loading" /> -->
</view>
</view>
</template>
<script>
import { mall } from "@/apis/interfaces/store"
export default {
data() {
return {
swiperCount : 0,
banners : [],
goodTabs : [],
newGood : [],
goodsArr : [],
meals : [],
shops : [],
};
},
mounted(){
this.getMall()
},
methods:{
getMall(){
mall().then(res => {
this.banners = res.banners
this.goodsArr = res.goods
this.newGood = res.news
this.goodTabs = res.categories
this.meals = res.meals
this.shops = res.shops
uni.stopPullDownRefresh()
})
},
goBook(item){
if(item.url){
if(item.url.openType === 'navigateTo'){
uni.navigateTo({
url:item.url.path
})
}
}
}
},
onPullDownRefresh() {
this.getMall()
},
onNavigationBarButtonTap() {
this.$Router.push({name: 'StoreSearch'})
}
}
</script>
<style lang="scss">
.content{
background: $window-color;
}
// 商城列表
.goods-box{
padding-bottom: $padding;
&>.title{
padding: $padding $padding 0;
font-size: $title-size-lg;
color: $text-color;
font-weight: bold;
margin-bottom: -$margin/2;
}
}
// 商城分类
.classify-box{
.classify-item{
padding: 0 10rpx;
&:last-child{
padding-right: $padding;
}
&:first-child{
padding-left: $padding;
}
&-nav{
text-align: center;
width: 138rpx;
}
&-cover{
width: 86rpx;
height: 86rpx;
border-radius: 50%;
vertical-align: top;
margin-bottom: $margin/2;
}
&-title{
line-height: 40rpx;
font-size: $title-size-sm;
color: $text-color;
}
}
}
// 卡片推荐
.card-box{
padding: $padding $padding - 10;
padding-bottom: 0;
display: flex;
flex-wrap: wrap;
&-item{
margin: 0 10rpx;
width: calc(50% - 20rpx);
padding: $padding;
border-radius: $radius;
box-sizing: border-box;
position: relative;
.card-title{
font-size: $title-size-lg;
font-weight: bold;
color: $text-color;
line-height: 40rpx;
width: calc(100% - 80rpx);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-subtitle{
font-size: 22rpx;
color: $text-gray;
// line-height: 40rpx;
min-height: 20rpx;
@extend .nowrap;
}
.card-cover{
width: 80rpx;
height: 80rpx;
position: absolute;
border-radius: 50%;
right: $margin;
top: $margin;
}
}
&-item:nth-child(1){
background: #fef2ae;
}
&-item:nth-child(2){
background: #c9ead9;
}
}
// 上新精选
.new-box{
padding: 0 $margin;
border-radius: $radius;
// padding: $padding - 10;
.title{
font-size: $title-size-lg;
color: $text-color;
font-weight: bold;
padding-bottom: 10rpx;
.title-des{
font-size: 24rpx !important;
padding-left: 10rpx;
color: $text-gray-m;
font-weight: normal;
}
}
.news{
margin: $margin/2 -10rpx 0;
display: flex;
.news-item{
margin: 0 10rpx;
width: calc(25% - 20rpx);
.news-cover{
position: relative;
width: 100%;
padding-top: 100%;
background-color: white;
border-radius: $radius-lg;
overflow: hidden;
image{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.news-title{
margin-top: $margin/2;
font-size: $title-size-sm;
text-align: center;
color: $text-color;
line-height: 40rpx;
}
.news-price{
text-align: center;
font-size: $title-size-sm;
font-weight: bold;
color: $text-price;
line-height: 40rpx;
text{
margin-left: 6rpx;
font-size: 70%;
}
}
}
}
}
.offline-box{
.title{
font-size: $title-size-lg;
color: $text-color;
font-weight: bold;
margin-top: $margin;
margin-left: $margin;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
.more{
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-right: $padding;
.more-txt{
font-size: 24rpx;
color: $text-gray;
font-weight: normal;
}
}
}
.card-btn{
font-size: 22rpx;
color: #fff;
padding: 4rpx 20rpx;
border-radius: 20rpx;
background-color: $text-price;
display: inline-block;
}
.card-box {
// &-item{
// background: #fff !important;
// }
&-item:nth-child(1){
background: #fef2ae;
background: rgba($color: #fef2ae, $alpha:.5);
}
&-item:nth-child(2){
background: #c9ead9;
background: rgba($color: #c9ead9, $alpha:.5);
}
&-item:nth-child(3){
margin-top: $padding - 8;
background: #bde0ff;
background: rgba($color: #bde0ff, $alpha:.5);
}
&-item:nth-child(4){
margin-top: $padding - 8;
background: rgba($color: #ffd9e1, $alpha:.5);
}
}
.card-cover{
width: 100rpx;
height: 100rpx;
position: absolute;
right: $margin;
top: $margin;
}
.title-des{
font-size: 24rpx;
padding-left: 10rpx;
color: $text-gray-m;
font-weight: normal;
}
}
// swiper
.swiper{
background: linear-gradient(#FFF, #F3F6FB);
padding: $padding;
.swiper-box{
position: relative;
padding-top: 40%;
swiper,
image{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
image{
border-radius: $radius;
}
}
.swiper-pages{
position: absolute;
z-index: 9;
left: 0;
right: 0;
bottom: $margin - 10;
height: 7rpx;
text-align: center;
.pages-item{
vertical-align: top;
display: inline-block;
height: 7rpx;
width: 25rpx;
margin: 0 5rpx;
background: rgba($color: #fff, $alpha: .5);
&.show{
background: white;
}
}
}
}
<template>
<view class="content">
<!-- swiper -->
<view class="swiper">
<view class="swiper-box">
<swiper autoplay @change="swiperCount = $event.detail.current">
<swiper-item v-for="(item, index) in banners" :key="index" @click="goBook(item)">
<image :src="item.cover" mode="aspectFill"></image>
</swiper-item>
</swiper>
<view class="swiper-pages">
<block v-for="(item, index) in banners" :key="index">
<text class="pages-item" :class="{'show':swiperCount === index}"></text>
</block>
</view>
</view>
</view>
<!-- 健康产品分类 -->
<u-scroll-list class="classify-box" indicatorColor="#ddd" indicatorActiveColor="#34CE98">
<view v-for="(item, index) in goodTabs" :key="index" class="classify-item"
@click="$Router.push({name: 'StoreList', params: {id: item.category_id, title: item.name}})">
<view class="classify-item-nav">
<image class="classify-item-cover" :src="item.cover"></image>
<view class="classify-item-title">{{item.name}}</view>
</view>
</view>
</u-scroll-list>
<!-- 每日上新 -->
<view class="new-box">
<view class="title">上新精选<text class="title-des"> | 精品上新新品推荐</text></view>
<view class="news">
<view class="news-item" v-for="(item, index) in newGood" :key="index"
@click="$Router.push({ name: 'StoreGoods', params: {id: item.goods_id}})">
<view class="news-cover">
<image :src="item.cover" mode="aspectFill"></image>
</view>
<view class="news-title nowrap">{{item.name}}</view>
<view class="news-price nowrap">{{item.price.price_min}} <text>DT积分</text></view>
</view>
</view>
</view>
<!-- VIP换购 -->
<view class="new-box" style="margin-top: 30rpx;" v-if="vips.length>0">
<view class="title">VIP换购 <view class="more"><text class="title-des"> | 千款商品任意换购</text> <text
class="more-txt" @click="$Router.push({name: 'VipList'})">更多 ></text></view>
</view>
<view class="news">
<view class="news-item" v-for="(item, index) in vips" :key="index"
@click="$Router.push({ name: 'StoreGoods', params: {id: item.goods_id}})">
<view class="news-cover">
<image :src="item.cover" mode="aspectFill"></image>
<view class="tags"> VIP </view>
</view>
<view class="news-title nowrap">{{item.name}}</view>
<view class="news-price nowrap">{{item.price.price_min}} <text>DT积分</text></view>
</view>
</view>
</view>
<!-- 线下商家 -->
<view class="offline-box">
<view class="title">推荐店铺 <view class="more"><text class="title-des"> | 您身边的优质体验店</text> <text
class="more-txt" @click="$Router.push({name: 'ShopList'})">更多 ></text></view>
</view>
<view class="card-box">
<block v-for="(item, index) in shops" :key="index">
<view class="card-box-item" style="{'backgrond': #FFF}" v-if="index < 4"
@click="$Router.push({name: 'ShopDetail', params: {ShopId: item.shop_id}})">
<view class="card-title">{{item.name}}</view>
<view class="card-subtitle"> 优质店铺 </view>
<view class="card-btn">前往体验</view>
<image class="card-cover" :src="item.cover" mode="aspectFill" />
</view>
</block>
</view>
</view>
<!-- 推荐品类 -->
<!-- <view class="card-box">
<block v-for="(item, index) in meals" :key="index">
<view class="card-box-item" :style="{'backgrond': item.color}" @click="$Router.push({name: 'StoreMeals', params: {id: item.meal_id}})">
<view class="card-title">{{item.title}}</view>
<view class="card-subtitle">{{item.subtitle}}</view>
<image class="card-cover" :src="item.cover" mode="aspectFill"></image>
</view>
</block>
</view> -->
<!-- goods -->
<view class="goods-box">
<oct-goods :lists="goodsArr" priceType="DT" color="#e6576b"
@onGoods="$Router.push({ name: 'StoreGoods', params: {id: $event.goods_id}})" />
<!-- <u-loadmore status="loading" /> -->
</view>
</view>
</template>
<script>
import {
mall
} from "@/apis/interfaces/store"
export default {
data() {
return {
swiperCount: 0,
banners: [],
goodTabs: [],
newGood: [],
goodsArr: [],
meals: [],
shops: [],
vips:[]
};
},
mounted() {
this.getMall()
},
methods: {
getMall() {
mall().then(res => {
this.banners = res.banners
this.goodsArr = res.goods
this.newGood = res.news
this.goodTabs = res.categories
this.meals = res.meals
this.shops = res.shops
this.vips = res.vips
uni.stopPullDownRefresh()
})
},
goBook(item) {
console.log(item)
if (item.url) {
if (item.url.openType === 'navigateTo') {
if (item.url.params != '') {
uni.navigateTo({
url: item.url.path + '?' + item.url.params,
})
} else {
uni.navigateTo({
url: item.url.path,
})
}
}
}
}
},
onPullDownRefresh() {
this.getMall()
},
onNavigationBarButtonTap() {
this.$Router.push({
name: 'StoreSearch'
})
}
}
</script>
<style lang="scss">
.content {
background: $window-color;
}
// 商城列表
.goods-box {
padding-bottom: $padding;
&>.title {
padding: $padding $padding 0;
font-size: $title-size-lg;
color: $text-color;
font-weight: bold;
margin-bottom: -$margin/2;
}
}
// 商城分类
.classify-box {
.classify-item {
padding: 0 10rpx;
&:last-child {
padding-right: $padding;
}
&:first-child {
padding-left: $padding;
}
&-nav {
text-align: center;
width: 138rpx;
}
&-cover {
width: 86rpx;
height: 86rpx;
border-radius: 50%;
vertical-align: top;
margin-bottom: $margin/2;
}
&-title {
line-height: 40rpx;
font-size: $title-size-sm;
color: $text-color;
}
}
}
// 卡片推荐
.card-box {
padding: $padding $padding - 10;
padding-bottom: 0;
display: flex;
flex-wrap: wrap;
&-item {
margin: 0 10rpx;
width: calc(50% - 20rpx);
padding: $padding;
border-radius: $radius;
box-sizing: border-box;
position: relative;
.card-title {
font-size: $title-size-lg;
font-weight: bold;
color: $text-color;
line-height: 40rpx;
width: calc(100% - 80rpx);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-subtitle {
font-size: 22rpx;
color: $text-gray;
// line-height: 40rpx;
min-height: 20rpx;
@extend .nowrap;
}
.card-cover {
width: 80rpx;
height: 80rpx;
position: absolute;
border-radius: 50%;
right: $margin;
top: $margin;
}
}
&-item:nth-child(1) {
background: #fef2ae;
}
&-item:nth-child(2) {
background: #c9ead9;
}
}
// 上新精选
.new-box {
padding: 0 $margin;
border-radius: $radius;
// padding: $padding - 10;
.title {
font-size: $title-size-lg;
color: $text-color;
font-weight: bold;
padding-bottom: 10rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
.title-des {
font-size: 24rpx !important;
padding-left: 10rpx;
color: $text-gray-m;
font-weight: normal;
}
.more {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-right: $padding;
.more-txt {
font-size: 24rpx;
color: $text-gray;
font-weight: normal;
}
}
}
.news {
margin: $margin/2 -10rpx 0;
display: flex;
.news-item {
margin: 0 10rpx;
width: calc(25% - 20rpx);
.news-cover {
position: relative;
width: 100%;
padding-top: 100%;
background-color: white;
border-radius: $radius-lg;
overflow: hidden;
image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tags {
position: absolute;
top: 6rpx;
left: -54rpx;
background: #d81e06;
color: #fff;
width: 100%;
font-size: 24rpx;
padding: 4rpx 0;
text-align: center;
transform: rotate(-45deg);
font-weight: bold;
letter-spacing:2rpx;
}
}
.news-title {
margin-top: $margin/2;
font-size: $title-size-sm;
text-align: center;
color: $text-color;
line-height: 40rpx;
}
.news-price {
text-align: center;
font-size: $title-size-sm;
font-weight: bold;
color: $text-price;
line-height: 40rpx;
text {
margin-left: 6rpx;
font-size: 70%;
}
}
}
}
}
.offline-box {
.title {
font-size: $title-size-lg;
color: $text-color;
font-weight: bold;
margin-top: $margin;
margin-left: $margin;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
.more {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-right: $padding;
.more-txt {
font-size: 24rpx;
color: $text-gray;
font-weight: normal;
}
}
}
.card-btn {
font-size: 22rpx;
color: #fff;
padding: 4rpx 20rpx;
border-radius: 20rpx;
background-color: $text-price;
display: inline-block;
}
.card-box {
// &-item{
// background: #fff !important;
// }
&-item:nth-child(1) {
background: #fef2ae;
background: rgba($color: #fef2ae, $alpha:.5);
}
&-item:nth-child(2) {
background: #c9ead9;
background: rgba($color: #c9ead9, $alpha:.5);
}
&-item:nth-child(3) {
margin-top: $padding - 8;
background: #bde0ff;
background: rgba($color: #bde0ff, $alpha:.5);
}
&-item:nth-child(4) {
margin-top: $padding - 8;
background: rgba($color: #ffd9e1, $alpha:.5);
}
}
.card-cover {
width: 100rpx;
height: 100rpx;
position: absolute;
right: $margin;
top: $margin;
}
.title-des {
font-size: 24rpx;
padding-left: 10rpx;
color: $text-gray-m;
font-weight: normal;
}
}
// swiper
.swiper {
background: linear-gradient(#FFF, #F3F6FB);
padding: $padding;
.swiper-box {
position: relative;
padding-top: 40%;
swiper,
image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
image {
border-radius: $radius;
}
}
.swiper-pages {
position: absolute;
z-index: 9;
left: 0;
right: 0;
bottom: $margin - 10;
height: 7rpx;
text-align: center;
.pages-item {
vertical-align: top;
display: inline-block;
height: 7rpx;
width: 25rpx;
margin: 0 5rpx;
background: rgba($color: #fff, $alpha: .5);
&.show {
background: white;
}
}
}
}
</style>