【商品搜索】

1. 实现完成

components/goodList/index.vue

@@ -3,15 +3,15 @@
 		<block v-for="(item,index) in bastList" :key="index">
 			<view @click="goDetail(item)" class='item acea-row row-between-wrapper' hover-class="none">
 				<view class='pictrue'>
-					<image :src='item.image'></image>
+					<image :src='item.picUrl'></image>
-					<span class="pictrue_log pictrue_log_class" v-if="item.activityH5 && item.activityH5.type === '1'">秒杀</span>
+					<span class="pictrue_log pictrue_log_class" v-if="item.activityList && item.activityList[0] && item.activityList[0].type === 1">秒杀</span>
-					<span class="pictrue_log pictrue_log_class" v-if="item.activityH5 && item.activityH5.type === '2'">砍价</span>
+					<span class="pictrue_log pictrue_log_class" v-if="item.activityList && item.activityList[0] && item.activityList[0].type === 2">砍价</span>
-					<span class="pictrue_log pictrue_log_class" v-if="item.activityH5 && item.activityH5.type === '3'">拼团</span>
+					<span class="pictrue_log pictrue_log_class" v-if="item.activityList && item.activityList[0] && item.activityList[0].type === 3">拼团</span>
 				</view>
 				<view class='underline'>
 					<view class='text'>
-						<view class='line1'>{{item.storeName}}</view>
+						<view class='line1'>{{ item.name }}</view>
-						<view class='money font-color'>￥<text class='num'>{{item.price}}</text></view>
+						<view class='money font-color'>￥<text class='num'>{{ fen2yuan(item.price) }}</text></view>
 						<view class='vip-money acea-row row-middle' v-if="item.vip_price && item.vip_price > 0">￥{{item.vip_price || 0}}
 							<image src='../../static/images/vip.png'></image><text class='num'>已售{{Number(item.sales) + Number(item.ficti) || 0}}{{item.unitName}}</text>
 						</view>
@@ -27,6 +27,7 @@
 <script>
 	import {mapGetters} from "vuex";
 	import { goShopDetail } from '@/libs/order.js'
+  import * as Util from '@/utils/util.js';
   export default {
 		computed: mapGetters(['uid']),
 		props: {
@@ -41,24 +42,20 @@
 				}
 			}
 		},
-		data() {
-			return {
-
-			};
-		},
 		methods: {
-			goDetail(item){
+			goDetail(item) {
-				goShopDetail(item,this.uid).then(res=>{
+				goShopDetail(item,this.uid).then(() =>{
 					uni.navigateTo({
 						url:`/pages/goods_details/index?id=${item.id}`
 					})
 				})
+			},
+      fen2yuan(price) {
+        return Util.fen2yuan(price)
       }
-			
 		}
 	}
 </script>
-
 <style scoped lang='scss'>
 	.goodList .item {
 		position: relative;

components/recommend/index.vue

@@ -14,15 +14,15 @@
 					<span class="pictrue_log_big pictrue_log_class" v-if="item.activityList && item.activityList[0] && item.activityList[0].type === 3">拼团</span>
 				</view>
 				<view class='name line1'>{{ item.name }}</view>
-				<view class='money font-color'>￥<text class='num'>{{ item.price }}</text></view>
+				<view class='money font-color'>￥<text class='num'>{{ fen2yuan(item.price) }}</text></view>
 			</view>
 		</view>
 	</view>
 </template>
-
 <script>
 	import { mapGetters } from "vuex";
 	import { goShopDetail } from '@/libs/order.js'
+  import * as Util from '@/utils/util.js';
   export default {
 	  computed: mapGetters(['uid']),
 		props: {
@@ -40,6 +40,9 @@
 						url:`/pages/goods_details/index?id=${item.id}`
 					})
 				})
+			},
+      fen2yuan(price) {
+        return Util.fen2yuan(price)
       }
 		}
 	}

pages/goods_search/index.vue

@@ -4,10 +4,12 @@
 			<view class='search acea-row row-between-wrapper'>
 				<view class='input acea-row row-between-wrapper'>
 					<text class='iconfont icon-sousuo2'></text>
-					<input type='text' :value='searchValue' :focus="focus" placeholder='点击搜索商品' placeholder-class='placeholder' @input="setValue"></input>
+					<input type='text' :value='searchValue' :focus="focus" placeholder='点击搜索商品'
+                 placeholder-class='placeholder' @input="setValue" />
 				</view>
 				<view class='bnt' @tap='searchBut'>搜索</view>
 			</view>
+      <!-- 搜索词 -->
 			<view class='title'>热门搜索</view>
 			<view class='list acea-row'>
 				<block v-for="(item,index) in hotSearchList" :key="index">
@@ -15,28 +17,30 @@
 				</block>
 			</view>
 			<view class='line'></view>
-			<goodList :bastList="bastList" v-if="bastList.length > 0"></goodList>
+      <!-- 搜索结果 -->
+			<goodList :bastList="bastList" v-if="bastList.length > 0" />
 			<view class='loadingicon acea-row row-center-wrapper' v-if="bastList.length > 0">
-				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
+				<text class='loading iconfont icon-jiazai' :hidden='!loading' /> {{loadTitle}}
 			</view>
 		</view>
+
+    <!-- 商品推荐 -->
 		<view class='noCommodity'>
-			<view class='pictrue'  v-if="bastList.length == 0 && isbastList">
+			<view class='pictrue'  v-if="bastList.length === 0 && isbastList">
 				<image src='../../static/images/noSearch.png'></image>
 			</view>
-			<recommend :hostProduct='hostProduct' v-if="bastList.length == 0"></recommend>
+			<recommend :hostProduct='hostProduct' v-if="bastList.length === 0"></recommend>
 		</view>
 	</view>
 </template>
 
 <script>
-	import {
+	import { getSearchKeyword } from '@/api/store.js';
-		getSearchKeyword,
-		getProductslist,
-		getProductHot
-	} from '@/api/store.js';
 	import goodList from '@/components/goodList';
 	import recommend from '@/components/recommend';
+  import * as ProductSpuApi from '@/api/product/spu.js';
+  import * as PromotionActivityApi from '@/api/promotion/activity.js';
+  import * as ProductUtil from '@/utils/product.js';
   export default {
 		components: {
 			goodList,
@@ -44,20 +48,23 @@
 		},
 		data() {
 			return {
-				hostProduct: [],
+        // ========== 商品搜索 ==========
+        hotSearchList: [], // 热门搜索词
         searchValue: '',
 				focus: true,
-				bastList: [],
+
-				hotSearchList: [],
+				bastList: [],  // 商品搜索结果
-				first: 0,
 				limit: 8,
 				page: 1,
 				loading: false,
 				loadend: false,
 				loadTitle: '加载更多',
-				hotPage:1,
+				isbastList: false,
-				isScroll:true,
+
-				isbastList: false
+        // ========== 商品推荐 ==========
+        hostProduct: [],
+        hotPage: 1,
+        isScroll: true,
       };
 		},
 		onShow: function() {
@@ -65,75 +72,54 @@
 			this.getHostProduct();
 		},
 		onReachBottom: function() {
-			if(this.bastList.length>0){
+			if(this.bastList.length > 0){
 				this.getProductList();
-			}else{
+			} else {
 				this.getHostProduct();
 			}
-			
 		},
 		methods: {
+      /**
+       * TODO 芋艿：待接入
+       */
 			getRoutineHotSearch: function() {
-				let that = this;
 				getSearchKeyword().then(res => {
-					that.$set(that, 'hotSearchList', res.data);
+					this.$set(this, 'hotSearchList', res.data);
 				});
 			},
-			getProductList: function() {
+      /**
-				let that = this;
+       * 输入搜索热词
-				if (that.loadend) return;
+       *
-				if (that.loading) return;
+       * @param searchValue 搜索热词
-				that.loading = true;
+       */
-				that.loadTitle = '';
+      setHotSearchValue: function(searchValue) {
-				getProductslist({
+        this.setValue(searchValue);
-					keyword: that.searchValue,
-					page: that.page,
-					limit: that.limit
-				}).then(res => {
-					let list = res.data.list,
-						loadend = list.length < that.limit;
-					that.bastList = that.$util.SplitArray(list, that.bastList);
-					that.$set(that,'bastList',that.bastList);
-					that.loading = false;
-					that.loadend = loadend;
-					that.loadTitle = loadend ? "😕人家是有底线的~~" : "加载更多";
-					that.page = that.page + 1;
-					that.isbastList = true;
-				}).catch(err => {
-					that.loading = false,
-					that.loadTitle = '加载更多'
-				});
-			},
-			getHostProduct: function() {
-				let that = this;
-				if(!this.isScroll) return
-				getProductHot(that.hotPage,that.limit).then(res => {
-					that.isScroll = res.data.list.length>=that.limit
-					that.hostProduct = that.hostProduct.concat(res.data.list)
-					that.hotPage += 1;
-				});
-			},
-			setHotSearchValue: function(event) {
-				this.$set(this, 'searchValue', event);
         this.page = 1;
         this.loadend = false;
         this.$set(this, 'bastList', []);
         this.getProductList();
       },
-			setValue: function(event) {
+      /**
-				this.$set(this, 'searchValue', event.detail.value);
+       * 输入搜索词
+       *
+       * @param searchValue 搜索词
+       */
+      setValue: function(searchValue) {
+        this.$set(this, 'searchValue', searchValue.detail.value);
       },
+      /**
+       * 点击搜索
+       */
       searchBut: function() {
-				let that = this;
+        this.focus = false;
-				that.focus = false;
+        if (this.searchValue.length > 0) {
-				if (that.searchValue.length > 0) {
+          this.page = 1;
-					that.page = 1;
+          this.loadend = false;
-					that.loadend = false;
+          this.$set(this, 'bastList', []);
-					that.$set(that, 'bastList', []);
           uni.showLoading({
             title: '正在搜索中'
           });
-					that.getProductList();
+          this.getProductList();
           uni.hideLoading();
         } else {
           return this.$util.Tips({
@@ -143,11 +129,65 @@
             mask: true,
           });
         }
+      },
+      /**
+       * 执行搜索商品
+       */
+			getProductList: function() {
+				if (this.loadend || this.loading) {
+          return;
+        }
+				this.loading = true;
+				this.loadTitle = '';
+        ProductSpuApi.getSpuPage({
+					keyword: this.searchValue,
+          pageNo: this.page,
+          pageSize: this.limit
+				}).then(res => {
+					const good_list = res.data.list;
+          const	loadend = good_list.length < this.limit;
+					this.loading = false;
+					this.loadend = loadend;
+					this.loadTitle = loadend ? "😕人家是有底线的~~" : "加载更多";
+					this.page = this.page + 1;
+					this.isbastList = true;
+          // 设置营销活动
+          const spuIds = good_list.map(item => item.id);
+          PromotionActivityApi.getActivityListBySpuIds(spuIds).then(res => {
+            ProductUtil.setActivityList(good_list, res.data);
+            this.bastList = this.$util.SplitArray(good_list, this.bastList); // 放在此处，避免 Vue 监控不到数组里的元素变化
+          });
+        }).catch(err => {
+					this.loading = false
+					this.loadTitle = '加载更多'
+				});
+			},
+      /**
+       * 获得热门推荐
+       */
+			getHostProduct: function() {
+				if (!this.isScroll) {
+          return
+        }
+        ProductSpuApi.getSpuPage({
+          recommendType: 'hot',
+          pageNo: this.hotPage,
+          pageSize: this.limit
+        }).then(res => {
+          const good_list = res.data.list;
+          this.isScroll = good_list.length >= this.limit
+          this.hotPage += 1;
+          // 设置营销活动
+          const spuIds = good_list.map(item => item.id);
+          PromotionActivityApi.getActivityListBySpuIds(spuIds).then(res => {
+            ProductUtil.setActivityList(good_list, res.data);
+            this.hostProduct = this.hostProduct.concat(good_list); // 放在此处，避免 Vue 监控不到数组里的元素变化
+          });
+				});
 			}
 		}
 	}
 </script>
-
 <style lang="scss">
 	page {
 		background-color: #fff !important;