|
@@ -10,58 +10,17 @@
|
|
|
<view class="type-wrap">
|
|
|
<up-scroll-list indicatorColor="#FF770033" indicatorActiveColor="#FF7700" :indicatorWidth="30"
|
|
|
:indicatorBarWidth="13">
|
|
|
- <view class="item-type" :class="{'active': activeType === 0}">
|
|
|
+ <view class="item-type" :class="{'active': activeType === 0}" @click="handleSelectType(null, 0)">
|
|
|
<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon.png`" alt="" />
|
|
|
<view class="type-text">
|
|
|
全部
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="item-type">
|
|
|
- <image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-2.png`" alt="" />
|
|
|
+ <view class="item-type" v-for="(item, index) in typeList"
|
|
|
+ :class="{'active': activeType === index+1}" :key="index" @click="handleSelectType(item.id, index+1)">
|
|
|
+ <image class="type-img" :src="item.image" alt="" />
|
|
|
<view class="type-text">
|
|
|
- 龙眼
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item-type">
|
|
|
- <image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-3.png`" alt="" />
|
|
|
- <view class="type-text">
|
|
|
- 葡萄
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item-type">
|
|
|
- <image class="type-img" :src="`${config.BASIC_IMG}home/type-icon.png`" alt="" />
|
|
|
- <view class="type-text">
|
|
|
- 水蜜桃
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item-type">
|
|
|
- <image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-2.png`" alt="" />
|
|
|
- <view class="type-text">
|
|
|
- 龙眼
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item-type">
|
|
|
- <image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-3.png`" alt="" />
|
|
|
- <view class="type-text">
|
|
|
- 葡萄
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item-type">
|
|
|
- <image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-3.png`" alt="" />
|
|
|
- <view class="type-text">
|
|
|
- 葡萄
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item-type">
|
|
|
- <image class="type-img" :src="`${config.BASIC_IMG}home/type-icon.png`" alt="" />
|
|
|
- <view class="type-text">
|
|
|
- 水蜜桃
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item-type">
|
|
|
- <image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-2.png`" alt="" />
|
|
|
- <view class="type-text">
|
|
|
- 龙眼
|
|
|
+ {{item.name}}
|
|
|
</view>
|
|
|
</view>
|
|
|
</up-scroll-list>
|
|
@@ -86,7 +45,7 @@
|
|
|
<view class="discover-list">
|
|
|
<view class="list-line">
|
|
|
<view class="list-item" v-for="(item, index) in discoverData" :key="index">
|
|
|
- <image class="item-img" :src="`${config.BASIC_IMG}home/fruit.png`" mode=""></image>
|
|
|
+ <image class="item-img" :src="item.img" mode="aspectFill"></image>
|
|
|
<view class="item-desc">
|
|
|
<view class="item-text">
|
|
|
{{item.name}}
|
|
@@ -95,13 +54,13 @@
|
|
|
<text class="subtext-text">坏单包退</text>
|
|
|
<text class="subtext-text">包邮</text>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="info-price">
|
|
|
<view class="price-text">
|
|
|
<text class="price-unit">¥</text>{{item.price}}
|
|
|
</view>
|
|
|
<view class="info-sold">
|
|
|
- 已售{{item.sold}}
|
|
|
+ 已售{{item.salesVal}}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -114,44 +73,65 @@
|
|
|
|
|
|
<script setup>
|
|
|
import {
|
|
|
+ onMounted,
|
|
|
ref
|
|
|
} from "vue";
|
|
|
import config from "@/api/config.js"
|
|
|
+ import HOME from "@/api/home.js"
|
|
|
|
|
|
const typeSearch = ref(null)
|
|
|
|
|
|
const filterIndex = ref(0)
|
|
|
const activeType = ref(0)
|
|
|
-
|
|
|
- const discoverData = ref([
|
|
|
- {
|
|
|
- name: "海南妃子笑荔枝新鲜采摘新鲜采摘",
|
|
|
- text: "",
|
|
|
- price: '107',
|
|
|
- sold: "1250"
|
|
|
- },
|
|
|
- {
|
|
|
- name: "海南妃子笑荔枝新鲜采摘新鲜采摘",
|
|
|
- text: "",
|
|
|
- price: '107',
|
|
|
- sold: "1250"
|
|
|
- },
|
|
|
- {
|
|
|
- name: "海南妃子笑荔枝新鲜采摘新鲜采摘",
|
|
|
- text: "",
|
|
|
- price: '107',
|
|
|
- sold: "1250"
|
|
|
- },
|
|
|
- {
|
|
|
- name: "海南妃子笑荔枝新鲜采摘新鲜采摘",
|
|
|
- text: "",
|
|
|
- price: '107',
|
|
|
- sold: "1250"
|
|
|
- }
|
|
|
- ])
|
|
|
+
|
|
|
+ const discoverData = ref([])
|
|
|
+ let sortObj = {
|
|
|
+ 0: "id",
|
|
|
+ 1: "price",
|
|
|
+ 2: "salesVal"
|
|
|
+ }
|
|
|
|
|
|
function selectFilter(i) {
|
|
|
filterIndex.value = i
|
|
|
+ sort.value = sortObj[i]
|
|
|
+ getGoodsList()
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ getTypeList()
|
|
|
+ getGoodsList()
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ const typeList = ref([])
|
|
|
+
|
|
|
+ function getTypeList() {
|
|
|
+ HOME.fetchTypeList().then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ typeList.value = data
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const sort = ref("id")
|
|
|
+ function getGoodsList(param) {
|
|
|
+ let params = {...param, sort: sort.value}
|
|
|
+ HOME.fetchGoodsList(params).then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ discoverData.value = data
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleSelectType(id, index) {
|
|
|
+ activeType.value = index
|
|
|
+ let params = {}
|
|
|
+ if (id) {
|
|
|
+ params = {
|
|
|
+ categoryId: id
|
|
|
+ }
|
|
|
+ }
|
|
|
+ getGoodsList(params)
|
|
|
}
|
|
|
</script>
|
|
|
|
|
@@ -228,9 +208,11 @@
|
|
|
width: 92rpx;
|
|
|
height: 92rpx;
|
|
|
}
|
|
|
+
|
|
|
.type-text {
|
|
|
line-height: 36rpx;
|
|
|
}
|
|
|
+
|
|
|
&.active {
|
|
|
.type-text {
|
|
|
background-color: #FFD95E;
|
|
@@ -263,25 +245,31 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.discover-list {
|
|
|
padding-top: 20rpx;
|
|
|
+
|
|
|
.list-line {
|
|
|
padding-bottom: 20rpx;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
+
|
|
|
.list-item {
|
|
|
background-color: #FFFFFF;
|
|
|
border-radius: 10rpx;
|
|
|
width: calc(50% - 16rpx);
|
|
|
margin-bottom: 20rpx;
|
|
|
+
|
|
|
.item-img {
|
|
|
width: 100%;
|
|
|
height: 340rpx;
|
|
|
object-fit: cover;
|
|
|
border-radius: 10rpx 10rpx 0 0;
|
|
|
}
|
|
|
+
|
|
|
.item-desc {
|
|
|
padding: 0 10rpx 10rpx;
|
|
|
+
|
|
|
.item-text {
|
|
|
width: calc(100% - 22rpx);
|
|
|
overflow: hidden;
|
|
@@ -292,26 +280,31 @@
|
|
|
font-weight: 600;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
+
|
|
|
.item-subtext {
|
|
|
color: #AFAFAF;
|
|
|
font-size: 24rpx;
|
|
|
line-height: 36rpx;
|
|
|
- .subtext-text + .subtext-text {
|
|
|
+
|
|
|
+ .subtext-text+.subtext-text {
|
|
|
padding-left: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.info-price {
|
|
|
display: flex;
|
|
|
align-items: baseline;
|
|
|
justify-content: space-between;
|
|
|
+
|
|
|
.price-text {
|
|
|
color: #FF7700;
|
|
|
font-size: 36rpx;
|
|
|
+
|
|
|
.price-unit {
|
|
|
font-size: 23rpx;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.info-sold {
|
|
|
font-size: 20rpx;
|
|
|
color: #C4C4C4;
|
|
@@ -319,6 +312,7 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.list-item:nth-child(2n) {
|
|
|
margin-left: 20rpx;
|
|
|
}
|