|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+<template>
|
|
|
2
|
+ <CXBBasePage>
|
|
|
3
|
+ <scroll-view>
|
|
|
4
|
+ <div class="h-45">
|
|
|
5
|
+ <swiper
|
|
|
6
|
+ v-if="state.banners"
|
|
|
7
|
+ :indicator-dots="state.indicatorDots"
|
|
|
8
|
+ indicator-active-color="#e93323"
|
|
|
9
|
+ :autoplay="state.autoplay"
|
|
|
10
|
+ :circular="state.circular"
|
|
|
11
|
+ :interval="state.interval"
|
|
|
12
|
+ :duration="state.duration"
|
|
|
13
|
+ class=" h-full"
|
|
|
14
|
+ >
|
|
|
15
|
+ <swiper-item v-for="(item, index) in state.banners" :key="index">
|
|
|
16
|
+ <image :src="item.pic" class="!w-full !h-full" mode="aspectFill"/>
|
|
|
17
|
+ </swiper-item>
|
|
|
18
|
+ </swiper>
|
|
|
19
|
+ </div>
|
|
|
20
|
+ <div class="p-3">
|
|
|
21
|
+ <div>
|
|
|
22
|
+ <grid-view type="masonry" cross-axis-count="2" cross-axis-gap="10px" main-axis-gap="10px">
|
|
|
23
|
+ <div v-for="(item, index) in list"
|
|
|
24
|
+ @tap="handleItemClick(item)"
|
|
|
25
|
+ :key="index"
|
|
|
26
|
+ >
|
|
|
27
|
+
|
|
|
28
|
+ <div class="bg-white rounded-lg">
|
|
|
29
|
+ <image :src="item.image" mode="widthFix" :fade-in="true" class="rounded-t-lg !w-full aspect-square" />
|
|
|
30
|
+ <div class="text-sm p-2 flex flex-col gap-2">
|
|
|
31
|
+ <div class="line-clamp-2">
|
|
|
32
|
+ {{ item.store_name }}
|
|
|
33
|
+ </div>
|
|
|
34
|
+ <CXBYaojinTag :amount="item.yanglao" />
|
|
|
35
|
+ <div class="text-[#fe0032] flex items-end gap-2">
|
|
|
36
|
+ <div class="text-[20px]">¥{{ item.price }}</div>
|
|
|
37
|
+ </div>
|
|
|
38
|
+ <div class="line-through text-xs font-bold text-gray-400 flex ">
|
|
|
39
|
+ <div>
|
|
|
40
|
+ ¥ {{item.ot_price}}
|
|
|
41
|
+ </div>
|
|
|
42
|
+ </div>
|
|
|
43
|
+ </div>
|
|
|
44
|
+ </div>
|
|
|
45
|
+ </div>
|
|
|
46
|
+ </grid-view>
|
|
|
47
|
+ </div>
|
|
|
48
|
+ </div>
|
|
|
49
|
+ </scroll-view>
|
|
|
50
|
+ </CXBBasePage>
|
|
|
51
|
+</template>
|
|
|
52
|
+
|
|
|
53
|
+<script setup lang="ts">
|
|
|
54
|
+import CXBBasePage from "~/components/CXBBasePage/CXBBasePage.vue";
|
|
|
55
|
+import {getTypeProductList} from "~/apis/merchant";
|
|
|
56
|
+import {getHomeBanner} from "~/apis/common";
|
|
|
57
|
+
|
|
|
58
|
+const state = reactive({
|
|
|
59
|
+ currentPage: 1,
|
|
|
60
|
+ pageSize: 10,
|
|
|
61
|
+ totalPage: 1,
|
|
|
62
|
+ banners: [],
|
|
|
63
|
+ keyword: '' ,
|
|
|
64
|
+ status: 'noMore',
|
|
|
65
|
+ indicatorDots: true,
|
|
|
66
|
+ circular: true,
|
|
|
67
|
+ autoplay: true,
|
|
|
68
|
+ interval: 5000,
|
|
|
69
|
+ duration: 500,
|
|
|
70
|
+ currents: "0",
|
|
|
71
|
+ title:'',
|
|
|
72
|
+ type:'',
|
|
|
73
|
+})
|
|
|
74
|
+const list = ref()
|
|
|
75
|
+
|
|
|
76
|
+function handleItemClick(item) {
|
|
|
77
|
+ uni.navigateTo({
|
|
|
78
|
+ url: `/pages/store/product/detail?id=`+item.product_id
|
|
|
79
|
+ })
|
|
|
80
|
+}
|
|
|
81
|
+
|
|
|
82
|
+onLoad((option) => {
|
|
|
83
|
+ state.type=option.type; //获取url参数
|
|
|
84
|
+ if(state.type=='jingpin'){
|
|
|
85
|
+ state.title='精品大仓'
|
|
|
86
|
+ }else if(state.type=='dingsheng'){
|
|
|
87
|
+ state.title='鼎盛联盟'
|
|
|
88
|
+ }
|
|
|
89
|
+
|
|
|
90
|
+
|
|
|
91
|
+ getHomeBanner(state.type+"_banner").then(res => {
|
|
|
92
|
+ state.banners = res
|
|
|
93
|
+ })
|
|
|
94
|
+ loadList('reload')
|
|
|
95
|
+
|
|
|
96
|
+})
|
|
|
97
|
+
|
|
|
98
|
+
|
|
|
99
|
+function loadList(action: 'page' | 'reload', callback?: (items) => void) {
|
|
|
100
|
+ if (action === 'reload') {
|
|
|
101
|
+ state.currentPage = 1
|
|
|
102
|
+ }
|
|
|
103
|
+
|
|
|
104
|
+ const params = {
|
|
|
105
|
+ type :state.type,
|
|
|
106
|
+ page: state.currentPage,
|
|
|
107
|
+ limit: state.pageSize
|
|
|
108
|
+ }
|
|
|
109
|
+ getTypeProductList({
|
|
|
110
|
+ ...params
|
|
|
111
|
+ }).then(res => {
|
|
|
112
|
+ if (res) {
|
|
|
113
|
+ if (action === 'reload') {
|
|
|
114
|
+ list.value = res.list
|
|
|
115
|
+ }else if (action === 'page') {
|
|
|
116
|
+ list.value = list.value.concat(res.list)
|
|
|
117
|
+ }
|
|
|
118
|
+ state.totalPage = Math.ceil(res.count / state.pageSize);
|
|
|
119
|
+ state.status = 'more'
|
|
|
120
|
+
|
|
|
121
|
+ if (callback) {
|
|
|
122
|
+ callback(res.list)
|
|
|
123
|
+ }
|
|
|
124
|
+ }
|
|
|
125
|
+ })
|
|
|
126
|
+}
|
|
|
127
|
+
|
|
|
128
|
+
|
|
|
129
|
+
|
|
|
130
|
+
|
|
|
131
|
+
|
|
|
132
|
+function handleScrollToLower() {
|
|
|
133
|
+ state.status = 'loading';
|
|
|
134
|
+ state.currentPage += 1;
|
|
|
135
|
+ // console.log(state.currentPage+"----------"+state.totalPage)
|
|
|
136
|
+ if (state.currentPage > state.totalPage) {
|
|
|
137
|
+ state.status = 'noMore';
|
|
|
138
|
+ } else {
|
|
|
139
|
+ setTimeout(() => {
|
|
|
140
|
+ loadList('page')
|
|
|
141
|
+ }, 300)
|
|
|
142
|
+ }
|
|
|
143
|
+}
|
|
|
144
|
+
|
|
|
145
|
+onReachBottom(() => {
|
|
|
146
|
+ console.log('到底了。。。')
|
|
|
147
|
+ handleScrollToLower()
|
|
|
148
|
+
|
|
|
149
|
+})
|
|
|
150
|
+
|
|
|
151
|
+onPullDownRefresh(() => {
|
|
|
152
|
+ loadList('reload', function() {
|
|
|
153
|
+ setTimeout(() => {
|
|
|
154
|
+ uni.stopPullDownRefresh()
|
|
|
155
|
+ }, 300)
|
|
|
156
|
+ })
|
|
|
157
|
+})
|
|
|
158
|
+
|
|
|
159
|
+onShow(() =>{
|
|
|
160
|
+ uni.setNavigationBarTitle({
|
|
|
161
|
+ title: state.title // 设置新的导航栏标题
|
|
|
162
|
+ });
|
|
|
163
|
+})
|
|
|
164
|
+
|
|
|
165
|
+
|
|
|
166
|
+</script>
|
|
|
167
|
+
|
|
|
168
|
+<route lang="yaml">
|
|
|
169
|
+style:
|
|
|
170
|
+ enablePullDownRefresh: true
|
|
|
171
|
+</route>
|