|
@@ -1,24 +1,15 @@
|
|
<template>
|
|
<template>
|
|
<view class="shop-index">
|
|
<view class="shop-index">
|
|
- <uv-sticky bgColor="#fff">
|
|
|
|
- <uv-tabs :list="navList" @click="changeNav" :scrollable="false"></uv-tabs>
|
|
|
|
- </uv-sticky>
|
|
|
|
- <uv-swiper keyName="image" :list="topicList" height="200" radius="0" imgMode="scaleToFill"></uv-swiper>
|
|
|
|
|
|
+ <uv-swiper keyName="image" :list="topicList" height="200" indicator indicatorMode="line" circular radius="0"
|
|
|
|
+ imgMode="scaleToFill" v-if="topicList.length > 0">
|
|
|
|
+ </uv-swiper>
|
|
<view v-if="hotList.length>0">
|
|
<view v-if="hotList.length>0">
|
|
<view class="gl-title">热门推荐</view>
|
|
<view class="gl-title">热门推荐</view>
|
|
<uv-list>
|
|
<uv-list>
|
|
<uv-list-item v-for="(item,index) in hotList" :key="item.id" border>
|
|
<uv-list-item v-for="(item,index) in hotList" :key="item.id" border>
|
|
<template #body>
|
|
<template #body>
|
|
- <view class="gl-item" @click="$navigateTo('/subPages/shopPage/good/good?id='+item.id)">
|
|
|
|
- <view class="gl-img">
|
|
|
|
- <uv-image width="170rpx" height="170rpx" :src="item.img">
|
|
|
|
- </uv-image>
|
|
|
|
- </view>
|
|
|
|
- <view>
|
|
|
|
- <view class="gl-name">{{item.name}}</view>
|
|
|
|
- <view class="gl-descript">{{item.descript}}</view>
|
|
|
|
- <view class="gl-price">¥{{formatPrice(item.price)}}</view>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <view style="width: 100%;">
|
|
|
|
+ <good-item :item="item"></good-item>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
</uv-list-item>
|
|
</uv-list-item>
|
|
@@ -27,19 +18,10 @@
|
|
<view v-if="newList.length>0">
|
|
<view v-if="newList.length>0">
|
|
<view class="gl-title">新品推荐</view>
|
|
<view class="gl-title">新品推荐</view>
|
|
<uv-list>
|
|
<uv-list>
|
|
- <uv-list-item v-for="(item,index) in newList" :key="item.id" border
|
|
|
|
- @click="$navigateTo('/subPages/shopPage/good/good?id='+item.id)">
|
|
|
|
|
|
+ <uv-list-item v-for="(item,index) in newList" :key="item.id" border>
|
|
<template #body>
|
|
<template #body>
|
|
- <view class="gl-item">
|
|
|
|
- <view class="gl-img">
|
|
|
|
- <uv-image width="170rpx" height="170rpx" :src="item.img">
|
|
|
|
- </uv-image>
|
|
|
|
- </view>
|
|
|
|
- <view>
|
|
|
|
- <view class="gl-name">{{item.name}}</view>
|
|
|
|
- <view class="gl-descript">{{item.descript}}</view>
|
|
|
|
- <view class="gl-price">¥{{formatPrice(item.price)}}</view>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <view style="width: 100%;">
|
|
|
|
+ <good-item :item="item"></good-item>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
</uv-list-item>
|
|
</uv-list-item>
|
|
@@ -55,21 +37,28 @@
|
|
<uv-icon name="shopping-cart" size="30"></uv-icon>
|
|
<uv-icon name="shopping-cart" size="30"></uv-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
+ <view class="shop-cart tab">
|
|
|
|
+ <view class="cartbox" @click="$navigateTo('/subPages/shopPage/menu/menu')">
|
|
|
|
+ <text>分类</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import {
|
|
import {
|
|
- getCategoryList,
|
|
|
|
getTopicList,
|
|
getTopicList,
|
|
getSearchHot,
|
|
getSearchHot,
|
|
getSearchNew,
|
|
getSearchNew,
|
|
getCartCount
|
|
getCartCount
|
|
} from '@/request/api/shop.js'
|
|
} from '@/request/api/shop.js'
|
|
|
|
+ import goodItem from '@/components/common/goodItem.vue';
|
|
export default {
|
|
export default {
|
|
|
|
+ components: {
|
|
|
|
+ goodItem
|
|
|
|
+ },
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- navList: [],
|
|
|
|
newList: [],
|
|
newList: [],
|
|
hotList: [],
|
|
hotList: [],
|
|
topicList: [],
|
|
topicList: [],
|
|
@@ -77,60 +66,32 @@
|
|
}
|
|
}
|
|
},
|
|
},
|
|
onShow() {
|
|
onShow() {
|
|
- this.init()
|
|
|
|
|
|
+ this.init();
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
async init() {
|
|
async init() {
|
|
if (uni.getStorageSync('shopMobileToken')) this.getCartCount();
|
|
if (uni.getStorageSync('shopMobileToken')) this.getCartCount();
|
|
- let navData = await getCategoryList();
|
|
|
|
- if (navData.state) {
|
|
|
|
- let navList = navData.data;
|
|
|
|
- navList.splice(0, 0, {
|
|
|
|
- name: '推荐',
|
|
|
|
- id: '0'
|
|
|
|
- })
|
|
|
|
- this.navList = navList;
|
|
|
|
- }
|
|
|
|
- this.queryGoods();
|
|
|
|
this.queryTopic();
|
|
this.queryTopic();
|
|
|
|
+ this.queryGoodsHot();
|
|
|
|
+ this.queryGoodsHotNew();
|
|
|
|
+
|
|
},
|
|
},
|
|
async getCartCount() {
|
|
async getCartCount() {
|
|
let countData = await getCartCount();
|
|
let countData = await getCartCount();
|
|
if (countData.state) this.cartCount = countData.data;
|
|
if (countData.state) this.cartCount = countData.data;
|
|
},
|
|
},
|
|
- changeNav(index) {
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- async queryGoods() {
|
|
|
|
|
|
+ async queryGoodsHot() {
|
|
let hotData = await getSearchHot();
|
|
let hotData = await getSearchHot();
|
|
- if (hotData.state) this.hotList = hotData.data.map(node => {
|
|
|
|
- node['img'] = this.shopImage(node.pic);
|
|
|
|
- return node;
|
|
|
|
- });
|
|
|
|
|
|
+ if (hotData.state) this.hotList = hotData.data;
|
|
|
|
+ },
|
|
|
|
+ async queryGoodsHotNew() {
|
|
let newData = await getSearchNew();
|
|
let newData = await getSearchNew();
|
|
- if (newData.state) this.newList = newData.data.map(node => {
|
|
|
|
- node['img'] = this.shopImage(node.pic);
|
|
|
|
- return node;
|
|
|
|
- });
|
|
|
|
|
|
+ if (newData.state) this.newList = newData.data;
|
|
},
|
|
},
|
|
async queryTopic() {
|
|
async queryTopic() {
|
|
const baseApi = this.baseApi;
|
|
const baseApi = this.baseApi;
|
|
let topicData = await getTopicList();
|
|
let topicData = await getTopicList();
|
|
- if (topicData.state) this.topicList = topicData.data.map(node => {
|
|
|
|
- node['image'] = this.shopImage(node.article.img);
|
|
|
|
- return node;
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- toTopic(id) {
|
|
|
|
- this.$u.route({
|
|
|
|
- url: '/pages/topic/detail',
|
|
|
|
- params: {
|
|
|
|
- id: id
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- formatPrice(price) {
|
|
|
|
- return (price / 100).toFixed(2);
|
|
|
|
|
|
+ if (topicData.state) this.topicList = topicData.data.map(node => this.shopImage(node.article.img));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -146,6 +107,10 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ .gl-title {
|
|
|
|
+ padding: 20rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
.shop-cart {
|
|
.shop-cart {
|
|
position: fixed;
|
|
position: fixed;
|
|
bottom: 80rpx;
|
|
bottom: 80rpx;
|
|
@@ -163,40 +128,9 @@
|
|
box-shadow: 0px 2px 10px rgba(3, 3, 3, 0.1);
|
|
box-shadow: 0px 2px 10px rgba(3, 3, 3, 0.1);
|
|
background-color: #ffffff;
|
|
background-color: #ffffff;
|
|
}
|
|
}
|
|
- }
|
|
|
|
|
|
|
|
- .gl-body {
|
|
|
|
- background: #fff;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .gl-title {
|
|
|
|
- padding: 20rpx;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .gl-item {
|
|
|
|
- width: 100%;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .gl-img {
|
|
|
|
- width: 170rpx;
|
|
|
|
- height: 170rpx;
|
|
|
|
- margin-right: 30rpx;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .gl-name {
|
|
|
|
- font-size: 32rpx;
|
|
|
|
- font-weight: bold;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .gl-descript {
|
|
|
|
- font-size: 24rpx;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .gl-price {
|
|
|
|
- font-size: 32rpx;
|
|
|
|
- color: #FA3534;
|
|
|
|
- margin-top: 20rpx;
|
|
|
|
|
|
+ &.tab {
|
|
|
|
+ bottom: 200rpx;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|