优化商品搜索页面

pages.json

@@ -1,314 +1,314 @@
 {
-    "pages": [
-        //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-        {
-            "path": "pages/tabBar/index/index",
-            "style": {
-                "navigationBarTitleText": "呵呵商城",
-                "enablePullDownRefresh": true,
-                "backgroundColor": "#F952B7",
-                "navigationBarBackgroundColor": "#F952B7",
-                "navigationBarTextStyle": "white"
+	"pages": [
+		//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+			"path": "pages/tabBar/index/index",
+			"style": {
+				"navigationBarTitleText": "呵呵商城",
+				"enablePullDownRefresh": true,
+				"backgroundColor": "#F952B7",
+				"navigationBarBackgroundColor": "#F952B7",
+				"navigationBarTextStyle": "white"
 
-            }
-        },
-        {
-            "path": "pages/tabBar/cart/index",
-            "style": {
-                "navigationBarTitleText": "购物车",
-                "enablePullDownRefresh": true
-            }
-        },
-        {
-            "path": "pages/tabBar/user/index",
-            "style": {
-                "navigationBarTitleText": "个人中心",
-                "enablePullDownRefresh": true
-            }
-        },
-        {
-            "path": "pages/authorize/authorize",
-            "style": {
-                "navigationBarTitleText": "微信授权"
-            }
-        },
-        {
-            "path": "pages/login/login",
-            "style": {
-                "navigationBarTitleText": "登录"
-            }
-        }
-    ],
-    "subPackages": [{
-            "root": "pages/goods/",
-            "pages": [{
-                    "path": "list",
-                    "style": {
-                        "navigationBarTitleText": "立即下单"
-                    }
-                },
-                {
-                    "path": "cart",
-                    "style": {
-                        "navigationBarTitleText": "购物车",
-                        "enablePullDownRefresh": true,
-                        "navigationStyle": "custom"
-                    }
-                },
-                {
-                    "path": "search",
-                    "style": {
-                        "navigationBarTitleText": "搜索"
-                    }
-                },
-                {
-                    "path": "product-detail",
-                    "style": {
-                        "navigationBarTitleText": "商品详情"
-                    }
-                },
-                {
-                    "path": "good-floorMore",
-                    "style": {
-                        "navigationBarTitleText": "商品列表",
-                        "enablePullDownRefresh": true
-                    }
-                },
-                {
-                    "path": "goods-coupon-list",
-                    "style": {
-                        "navigationBarTitleText": "优惠券商品列表",
-                        "enablePullDownRefresh": true
-                    }
-                },
-                {
-                    "path": "goods-coupon-list-search",
-                    "style": {
-                        "navigationBarTitleText": "搜索"
-                    }
-                }
-            ]
-        },
-        {
-            "root": "pages/user/", //个人中心模块
-            "pages": [{
-                    "path": "address/addressManage",
-                    "style": {
-                        "navigationBarTitleText": "添加新地址"
-                    }
-                },
-                {
-                    "path": "address/address",
-                    "style": {
-                        "navigationBarTitleText": "地址列表",
-                        "enablePullDownRefresh": true,
-                        "onReachBottomDistance": 50
-                    }
-                },
-                {
-                    "path": "order/create-order",
-                    "style": {
-                        "navigationBarTitleText": "确认订单"
-                    }
-                },
-                {
-                    "path": "order/success",
-                    "style": {
-                        "navigationBarTitleText": "支付结果",
-                        "navigationStyle": "custom"
-                    }
-                },
-                {
-                    "path": "order/error",
-                    "style": {
-                        "navigationBarTitleText": "支付结果",
-                        "navigationStyle": "custom"
-                    }
-                },
-                {
-                    "path": "order/order-list",
-                    "style": {
-                        "navigationBarTitleText": "我的订单",
-                        "navigationStyle": "custom"
-                    }
-                },
-                {
-                    "path": "order/order-list-retail",
-                    "style": {
-                        "navigationBarTitleText": "我的订单",
-                        "navigationStyle": "custom"
-                    }
-                },
-                {
-                    "path": "order/order-details",
-                    "style": {
-                        "navigationBarTitleText": "订单详情",
-                        "navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/tabBar/cart/index",
+			"style": {
+				"navigationBarTitleText": "购物车",
+				"enablePullDownRefresh": true
+			}
+		},
+		{
+			"path": "pages/tabBar/user/index",
+			"style": {
+				"navigationBarTitleText": "个人中心",
+				"enablePullDownRefresh": true
+			}
+		},
+		{
+			"path": "pages/authorize/authorize",
+			"style": {
+				"navigationBarTitleText": "微信授权"
+			}
+		},
+		{
+			"path": "pages/login/login",
+			"style": {
+				"navigationBarTitleText": "登录"
+			}
+		}
+	],
+	"subPackages": [{
+			"root": "pages/goods/",
+			"pages": [{
+					"path": "list",
+					"style": {
+						"navigationBarTitleText": "立即下单"
+					}
+				},
+				{
+					"path": "cart",
+					"style": {
+						"navigationBarTitleText": "购物车",
+						"enablePullDownRefresh": true,
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "product-detail",
+					"style": {
+						"navigationBarTitleText": "商品详情"
+					}
+				},
+				{
+					"path": "good-floorMore",
+					"style": {
+						"navigationBarTitleText": "商品列表",
+						"enablePullDownRefresh": true
+					}
+				},
+				{
+					"path": "goods-search",
+					"style": {
+						"navigationBarTitleText": "搜索"
+					}
+				},
+				{
+					"path": "goods-coupon-list",
+					"style": {
+						"navigationBarTitleText": "优惠券商品列表",
+						"enablePullDownRefresh": true
+					}
+				},
+				{
+					"path": "goods-coupon-list-search",
+					"style": {
+						"navigationBarTitleText": "搜索"
+					}
+				}
+			]
+		},
+		{
+			"root": "pages/user/", //个人中心模块
+			"pages": [{
+					"path": "address/addressManage",
+					"style": {
+						"navigationBarTitleText": "添加新地址"
+					}
+				},
+				{
+					"path": "address/address",
+					"style": {
+						"navigationBarTitleText": "地址列表",
+						"enablePullDownRefresh": true,
+						"onReachBottomDistance": 50
+					}
+				},
+				{
+					"path": "order/create-order",
+					"style": {
+						"navigationBarTitleText": "确认订单"
+					}
+				},
+				{
+					"path": "order/success",
+					"style": {
+						"navigationBarTitleText": "支付结果",
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "order/error",
+					"style": {
+						"navigationBarTitleText": "支付结果",
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "order/order-list",
+					"style": {
+						"navigationBarTitleText": "我的订单",
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "order/order-list-retail",
+					"style": {
+						"navigationBarTitleText": "我的订单",
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "order/order-details",
+					"style": {
+						"navigationBarTitleText": "订单详情",
+						"navigationStyle": "custom"
 
-                    }
-                },
-                {
-                    "path": "order/order-payment",
-                    "style": {
-                        "navigationBarTitleText": "收银台",
-                        "navigationStyle": "custom"
-                    }
-                },
-                {
-                    "path": "order/search-order",
-                    "style": {
-                        "navigationBarTitleText": "订单搜索"
-                    }
-                },
-                {
-                    "path": "order/order-logistics",
-                    "style": {
-                        "navigationBarTitleText": "物流信息"
-                    }
-                },
-                {
-                    "path": "activity/activity",
-                    "style": {
-                        "navigationBarTitleText": "活动详情",
-                        "enablePullDownRefresh": true,
-                        "backgroundColor": "#ff457b",
-                        "backgroundTextStyle": "light",
-                        "onReachBottomDistance": 50
-                    }
-                },
-                {
-                    "path": "activity/activity-list",
-                    "style": {
-                        "navigationBarTitleText": "活动专区",
-                        "enablePullDownRefresh": true,
-                        "onReachBottomDistance": 50
-                    }
-                },
-                {
-                    "path": "activity/coupon-find-list",
-                    "style": {
-                        "navigationBarTitleText": "领券中心"
-                    }
-                },
-                {
-                    "path": "activity/coupon-list",
-                    "style": {
-                        "navigationBarTitleText": "优惠券"
-                    }
-                }
-            ]
-        },
-        {
-            "root": "pages/fight-order",
-            "pages": [{
-                "path": "fight-detail",
-                "style": {
-                    "navigationBarTitleText": "拼单详情"
-                }
-            }, {
-                "path": "fight-share-entry",
-                "style": {
-                    "navigationBarTitleText": "拼单"
-                }
-            }]
-        },
-        // 新订单模块
-        {
-            "root": "pages/order",
-            "pages": [{
-                    "path": "create-order",
-                    "style": {
-                        "navigationBarTitleText": "创建订单"
-                    }
-                },
-                {
-                    "path": "order-list",
-                    "style": {
-                        "navigationBarTitleText": "订单列表",
-                        "navigationStyle": "custom"
-                    }
-                },
-                {
-                    "path": "order-detail",
-                    "style": {
-                        "navigationBarTitleText": "订单详情"
-                    }
-                },
-                {
-                    "path": "order-search",
-                    "style": {
-                        "navigationBarTitleText": "订单搜索"
-                    }
-                },
-                {
-                    "path": "success",
-                    "style": {
-                        "navigationBarTitleText": "支付成功"
-                    }
-                },
-                {
-                    "path": "error",
-                    "style": {
-                        "navigationBarTitleText": "支付失败"
-                    }
-                },
-                {
-                    "path": "order-logistics",
-                    "style": {
-                        "navigationBarTitleText": "物流信息"
-                    }
-                }
-            ]
-        }
-    ],
+					}
+				},
+				{
+					"path": "order/order-payment",
+					"style": {
+						"navigationBarTitleText": "收银台",
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "order/search-order",
+					"style": {
+						"navigationBarTitleText": "订单搜索"
+					}
+				},
+				{
+					"path": "order/order-logistics",
+					"style": {
+						"navigationBarTitleText": "物流信息"
+					}
+				},
+				{
+					"path": "activity/activity",
+					"style": {
+						"navigationBarTitleText": "活动详情",
+						"enablePullDownRefresh": true,
+						"backgroundColor": "#ff457b",
+						"backgroundTextStyle": "light",
+						"onReachBottomDistance": 50
+					}
+				},
+				{
+					"path": "activity/activity-list",
+					"style": {
+						"navigationBarTitleText": "活动专区",
+						"enablePullDownRefresh": true,
+						"onReachBottomDistance": 50
+					}
+				},
+				{
+					"path": "activity/coupon-find-list",
+					"style": {
+						"navigationBarTitleText": "领券中心"
+					}
+				},
+				{
+					"path": "activity/coupon-list",
+					"style": {
+						"navigationBarTitleText": "优惠券"
+					}
+				}
+			]
+		},
+		{
+			"root": "pages/fight-order",
+			"pages": [{
+				"path": "fight-detail",
+				"style": {
+					"navigationBarTitleText": "拼单详情"
+				}
+			}, {
+				"path": "fight-share-entry",
+				"style": {
+					"navigationBarTitleText": "拼单"
+				}
+			}]
+		},
+		// 新订单模块
+		{
+			"root": "pages/order",
+			"pages": [{
+					"path": "create-order",
+					"style": {
+						"navigationBarTitleText": "创建订单"
+					}
+				},
+				{
+					"path": "order-list",
+					"style": {
+						"navigationBarTitleText": "订单列表",
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "order-detail",
+					"style": {
+						"navigationBarTitleText": "订单详情"
+					}
+				},
+				{
+					"path": "order-search",
+					"style": {
+						"navigationBarTitleText": "订单搜索"
+					}
+				},
+				{
+					"path": "success",
+					"style": {
+						"navigationBarTitleText": "支付成功"
+					}
+				},
+				{
+					"path": "error",
+					"style": {
+						"navigationBarTitleText": "支付失败"
+					}
+				},
+				{
+					"path": "order-logistics",
+					"style": {
+						"navigationBarTitleText": "物流信息"
+					}
+				}
+			]
+		}
+	],
 
-    "tabBar": {
-        "height": "80",
-        "color": "#999999",
-        "selectedColor": "#ff457b",
-        "borderStyle": "black",
-        "backgroundColor": "#ffffff",
-        "list": [{
-                "pagePath": "pages/tabBar/index/index",
-                "iconPath": "static/icon-index@2x.png",
-                "selectedIconPath": "static/icon-index-active@2x.png",
-                "text": "商城"
-            },
-            {
-                "pagePath": "pages/tabBar/cart/index",
-                "iconPath": "static/icon-cart@2x.png",
-                "selectedIconPath": "static/icon-cart-active@2x.png",
-                "text": "购物车"
-            },
-            {
-                "pagePath": "pages/tabBar/user/index",
-                "iconPath": "static/icon-user@2x.png",
-                "selectedIconPath": "static/icon-user-active@2x.png",
-                "text": "我的"
-            }
-        ]
-    },
-    "easycom": {
-        "autoscan": true,
-        "custom": {
-            "tui-(.*)": "@/components/thorui/tui-$1/tui-$1.vue",
-            "uni-(.*)": "@/components/uni-components/uni-$1/uni-$1.vue",
-            "scroll-top": "@/components/cm-module/scrollTop/scrollTop.vue"
-        }
-    },
-    "globalStyle": {
-        "navigationBarTextStyle": "black",
-        "navigationBarTitleText": "呵呵商城",
-        "navigationBarBackgroundColor": "#FFFFFF",
-        "backgroundColor": "#FFFFFF"
-    },
-    "condition": {
-        //模式配置，仅开发期间生效
-        "current": 0, //当前激活的模式(list 的索引项)
-        "list": [{
-            "name": "", //模式名称
-            "path": "", //启动页面，必选
-            "query": "" //启动参数，在页面的onLoad函数里面得到
-        }]
-    }
+	"tabBar": {
+		"height": "80",
+		"color": "#999999",
+		"selectedColor": "#ff457b",
+		"borderStyle": "black",
+		"backgroundColor": "#ffffff",
+		"list": [{
+				"pagePath": "pages/tabBar/index/index",
+				"iconPath": "static/icon-index@2x.png",
+				"selectedIconPath": "static/icon-index-active@2x.png",
+				"text": "商城"
+			},
+			{
+				"pagePath": "pages/tabBar/cart/index",
+				"iconPath": "static/icon-cart@2x.png",
+				"selectedIconPath": "static/icon-cart-active@2x.png",
+				"text": "购物车"
+			},
+			{
+				"pagePath": "pages/tabBar/user/index",
+				"iconPath": "static/icon-user@2x.png",
+				"selectedIconPath": "static/icon-user-active@2x.png",
+				"text": "我的"
+			}
+		]
+	},
+	"easycom": {
+		"autoscan": true,
+		"custom": {
+			"tui-(.*)": "@/components/thorui/tui-$1/tui-$1.vue",
+			"uni-(.*)": "@/components/uni-components/uni-$1/uni-$1.vue",
+			"scroll-top": "@/components/cm-module/scrollTop/scrollTop.vue"
+		}
+	},
+	"globalStyle": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "呵呵商城",
+		"navigationBarBackgroundColor": "#FFFFFF",
+		"backgroundColor": "#FFFFFF"
+	},
+	"condition": {
+		//模式配置，仅开发期间生效
+		"current": 0, //当前激活的模式(list 的索引项)
+		"list": [{
+			"name": "", //模式名称
+			"path": "", //启动页面，必选
+			"query": "" //启动参数，在页面的onLoad函数里面得到
+		}]
+	}
 }

pages/goods/good-floorMore.vue

@@ -29,7 +29,7 @@ export default {
         return {
             productList: [], //商品列表
             pageNum: 1,
-            pageSize: 6,
+            pageSize: 20,
             floorId: undefined,
             title: '',
             hasNextPage: false,

pages/goods/goods-search.vue

@@ -0,0 +1,370 @@
+<template>
+	<view class="goods-search">
+		<tui-skeleton v-if="isRequest" loadingType="2"></tui-skeleton>
+		
+		<!-- 搜索输入框 -->
+		<view class="order-top">
+			<cm-search
+				placeholder="请输入商品名称"
+				v-model="keyword"
+				:clearable="true"
+				:keywordList="keywordList"
+				:keywordVisible="keywordVisible"
+				@focus="keywordVisible = true"
+				@clear="keywordVisible = true"
+				@remove="removeKeywordModal = true"
+				@search="handleSearch"
+			></cm-search>
+		</view>
+
+		<!-- 列表为空 || 无搜索记录 -->
+		<view class="order-empty" v-if="productList.length === 0">
+			<cm-empty :image="emptyInfo.image" :message="emptyInfo.message" :offset="100"></cm-empty>
+		</view>
+		<!-- 商品列表 -->
+		<view class="goods-list" v-else>
+			<view v-for="(goods, index) in productList" :key="index">
+				<view class="line" v-if="index !== 0"></view>
+				<view class="goods-section" @click.stop="handleToDetail(goods)">
+					<image :src="goods.mainImage" class="cover"></image>
+					<view class="content">
+						<view class="title" v-text="goods.name"></view>
+						<view class="unit">规格：{{ goods.unit }}</view>
+						<!-- 标签 -->
+						<view class="tags">
+							<view class="tag type3" v-if="goods.collageStatus === 1">拼团价</view>
+							<view class="tag type2" v-if="goods.activeStatus == 1 && goods.collageStatus === 0">
+								活动价
+							</view>
+							<view class="tag type2" v-if="goods.couponsLogo">优惠券</view>
+						</view>
+						<!-- 底部 -->
+						<view class="footer">
+							<!-- 价格 -->
+							<view class="price">
+								<text>￥{{ goods.price | formatPrice }}</text>
+								<text class="delete" v-if="goods.normalPrice">
+									￥{{ goods.normalPrice | formatPrice }}
+								</text>
+							</view>
+							<!-- 加入购物车 -->
+							<view
+								class="add-cart iconfont icon-gouwuche"
+								@click.stop="addToCart({ productId: goods.productId })"
+								v-if="data.collageStatus !== 1"
+							></view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- loading -->
+		<view class="loading-more" v-if="productList.length > 0">
+			<tui-loadmore :index="3" :visible="loadmore"></tui-loadmore>
+			<tui-nomore :text="loadMoreText" :visible="!loadmore" backgroundColor="#fff"></tui-nomore>
+		</view>
+
+		<!-- 操作弹窗 -->
+		<tui-modal
+			:show="removeKeywordModal"
+			content="确认清空搜索历史记录？"
+			:size="32"
+			:maskClosable="false"
+			color="#333"
+			shape="circle"
+			@click="clearSearchRecord"
+		></tui-modal>
+	</view>
+</template>
+
+<script>
+import CmSearch from '@/components/cm-module/cm-search/cm-search.vue'
+import CmEmpty from '@/components/cm-module/cm-empty/cm-empty.vue'
+import { debounce } from '@/common/common.js'
+import { mapGetters, mapActions } from 'vuex'
+
+export default {
+	components: {
+		CmSearch,
+		CmEmpty
+	},
+	data() {
+		return {
+			isRequest: false,
+			keyword: '',
+			keywordList: ['测试'],
+			keywordVisible: true,
+			removeKeywordModal: false,
+			pageNum: 1,
+			hasMore: false,
+			productList: [],
+
+			loadmore: false // 正在加载更多
+		}
+	},
+	computed: {
+		...mapGetters(['userId', 'hasLogin']),
+		// 上拉加载文案
+		loadMoreText() {
+			if (this.productList.length === 0) return '没有更多了'
+			return this.hasMore ? '上拉加载更多' : '没有更多了'
+		},
+		// 列表为空
+		emptyInfo() {
+			const info = {}
+			info.image = `${this.$Static}icon-empty-search.png`
+			info.message = '暂无搜索结果~_~'
+
+			if (this.keywordList.length <= 0) {
+				info.message = '暂无任何搜索历史记录~_~'
+			}
+
+			return info
+		}
+	},
+	watch: {
+		keywordVisible(nVal) {
+			if (!nVal) return
+			this.fetchSerachRecord()
+			this.productList = []
+		}
+	},
+	onReachBottom() {
+		if (!this.hasMore) return
+		this.fetchProductList()
+	},
+	onLoad() {
+		this.fetchSerachRecord()
+	},
+	methods: {
+		...mapActions('cart', ['addToCart']),
+
+		// 获取商品列表 使用防抖函数封装
+		fetchProductList: debounce(function() {
+			this.loadmore = true
+
+			const params = {
+				name: this.keyword,
+				userId: this.userId,
+				pageNum: this.pageNum,
+				pageSize: 6
+			}
+
+			this.ProductService.GetProductList(params)
+				.then(res => {
+					this.updateProductList(res)
+				})
+				.catch(err => {
+					console.log(err)
+				})
+				.finally(() => {
+					this.loadmore = false
+					this.isRequest = false
+				})
+		}, 500),
+
+		// 更新商品列表
+		updateProductList(response) {
+			this.pageNum++
+			this.productList = this.productList.concat(response.data.list)
+			this.hasMore = response.data.hasNextPage
+		},
+
+		// 搜索
+		handleSearch() {
+			this.keywordVisible = false
+			this.isRequest = true
+			this.resetProdcutList()
+		},
+
+		// 重置商品列表
+		resetProdcutList() {
+			this.pageNum = 1
+			this.fetchProductList()
+		},
+
+		// 跳转详情
+		handleToDetail(product) {
+			uni.navigateTo({
+				url: `/pages/goods/product-detail?productId=${product.productId}&jumpState=1`
+			})
+		},
+		// 获取搜索历史
+		async fetchSerachRecord() {
+			if(!this.hasLogin) return
+			try {
+				const res = await this.ProductService.GetProductSearchHistory({ userId: this.userId })
+				this.keywordList = res.data
+			} catch (error) {
+				this.$util.msg(error.msg, 2000)
+			}
+		},
+		// 清空搜索历史
+		async clearSearchRecord(e) {
+			if (!e.index) return (this.removeKeywordModal = false)
+			try {
+				await this.ProductService.GetDeleteProductSearchHistory({ userId: this.userId })
+				await this.fetchSerachRecord()
+				this.removeKeywordModal = false
+				this.$util.msg('已清空搜索历史记录', 2000)
+			} catch (error) {
+				this.$util.msg(error.msg, 2000)
+			}
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.goods-search {
+	min-height: 100vh;
+	overflow: hidden;
+	padding-top: 90rpx;
+	box-sizing: border-box;
+}
+
+.order-top {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 100000;
+}
+
+.line {
+	width: 100%;
+	height: 1px;
+	background: #f7f7f7;
+}
+
+.goods-list {
+	$radius: 16rpx;
+	$grid: 24rpx;
+
+	margin-top: $grid;
+	padding: 0 $grid;
+	.line {
+		margin: $grid 0;
+	}
+
+	.goods-section {
+		display: flex;
+		justify-content: space-between;
+		position: relative;
+		background: #fff;
+		border-radius: $radius;
+		overflow: hidden;
+
+		.cover {
+			width: 180rpx;
+			height: 180rpx;
+			box-sizing: border-box;
+			border-radius: 8rpx;
+			border: 1px solid #e1e1e1;
+			box-sizing: border-box;
+		}
+
+		.content {
+			flex: 1;
+			margin-left: $grid;
+		}
+
+		.title,
+		.unit,
+		.tags,
+		.footer {
+			margin: 2rpx 0;
+		}
+		.title {
+			height: 72rpx;
+			font-size: 26rpx;
+			line-height: 36rpx;
+			text-align: justify;
+			color: #333333;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			display: -webkit-box;
+			-webkit-line-clamp: 2; // 这里控制几行显示省略号
+			-webkit-box-orient: vertical;
+		}
+
+		.unit {
+			width: 100%;
+			height: 28rpx;
+			font-size: 20rpx;
+			color: #999999;
+		}
+
+		.tags {
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			height: 36rpx;
+			.tag {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				height: 30rpx;
+				margin-right: 8rpx;
+				font-size: 22rpx;
+				&.type1 {
+					width: 56rpx;
+					background: #ff457b;
+					border-radius: 4rpx;
+					color: #ffffff;
+				}
+				&.type2 {
+					width: 80rpx;
+					background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center
+						no-repeat;
+					background-size: 80rpx 30rpx;
+					color: #f83c6c;
+				}
+				&.type3 {
+					width: 80rpx;
+					background: linear-gradient(270deg, #ff457b 0%, #b03bb8 51%, #6431f2 100%);
+					color: #fff;
+					border-radius: 4rpx;
+				}
+			}
+		}
+		.footer {
+			position: relative;
+
+			.add-cart {
+				position: absolute;
+				bottom: 0;
+				right: $grid;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 44rpx;
+				height: 44rpx;
+				background: #ff457b;
+				color: #fff;
+				border-radius: 50%;
+			}
+			.price {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				display: -webkit-box;
+				-webkit-line-clamp: 1; // 这里控制几行显示省略号
+				-webkit-box-orient: vertical;
+				box-sizing: border-box;
+				padding-right: $grid;
+				font-size: 26rpx;
+				font-weight: 600;
+				color: #f83c6c;
+				.delete {
+					font-size: 20rpx;
+					color: #999999;
+					text-decoration: line-through;
+					font-weight: normal;
+					margin-left: 10rpx;
+				}
+			}
+		}
+	}
+}
+</style>

pages/goods/search.vue

@@ -1,603 +0,0 @@
-<template>
-    <view class="search-container">
-        <view class="search-main">
-            <view class="gosearch-btn">
-                <text class="iconfont icon-sousuo"></text>
-                <input
-                    class="input"
-                    maxlength="20"
-                    :focus="isFocus"
-                    type="text"
-                    value=""
-                    confirm-type="search"
-                    @focus="onFocus"
-                    @input="onShowClose"
-                    @confirm="SubMitSearch()"
-                    placeholder="请输入搜索关键字"
-                    v-model.trim="listQuery.name"
-                />
-                <text class="iconfont icon-quxiao" v-if="isShowClose" @click.stop="delInputText()"></text>
-            </view>
-            <view class="search-btn" @click="SubMitSearch()">搜索</view>
-        </view>
-        <view class="search-container-history clearfix" v-if="!isShowWrapper">
-            <view :class="'s-' + themeClass" v-if="serachRecordList.length > 0">
-                <view class="header">搜索历史<text class="iconfont icon-shanchu" @click="confirmDetele"></text></view>
-                <view class="list">
-                    <view class="list-main">
-                        <view v-for="(item, index) in serachRecordList" :key="index" @click="keywordsClick(item)">{{
-                            item
-                        }}</view>
-                    </view>
-                </view>
-            </view>
-        </view>
-        <view
-            v-else
-            class="commodity-list-wrapper"
-            :style="{ overflow: 'auto', height: productList.length > 4 ? windowHeight + 'px' : 'auto' }"
-        >
-            <scroll-view
-                :style="{ height: productList.length > 4 ? scrollHeight + 'px' : 'auto' }"
-                @scrolltolower="scrolltolower"
-                scroll-y
-                v-if="!showEmpty"
-                class="scroll-view"
-            >
-                <view
-                    v-for="(pro, index) in productList"
-                    :key="index"
-                    :id="pro.id"
-                    class="product-list-type commodity-list"
-                    @click.stop="navToDetailPage(pro.productId)"
-                >
-                    <view class="product-list-image">
-                        <image class="product-image" :src="pro.mainImage" mode=""></image>
-                    </view>
-                    <view class="product-list-msgs">
-                        <view class="product-name tui-ellipsis-2">{{ pro.name }}</view>
-                        <view class="product-unit">规格：{{ pro.unit }}</view>
-                        <view class="product-tags">
-                            <view class="tag type3">拼团价</view>
-                            <text class="tag type2" v-if="pro.activeStatus === 1">活动价</text>
-                            <text class="tag type2" v-if="pro.couponsLogo">优惠券</text>
-                        </view>
-                        <view class="product-price">
-                            <view class="price">
-                                <text>￥{{ pro.price | formatPrice }}</text>
-                                <text class="delete">￥{{ pro.price | formatPrice }}</text>
-                            </view>
-                            <text class="carts-add iconfont icon-gouwuche" @click.stop="handAddCarts(pro)"></text>
-                        </view>
-                    </view>
-                </view>
-                <view v-if="showLoading && productList.length > 5">
-                    <view class="loading-wrapper loading-wrapper-now" v-if="loadingNow">
-                        <template>{{ loadingText }}</template>
-                        <text v-if="loadingText === '已至底部'">‧ ‧ ‧</text>
-                    </view>
-                    <view class="loading-wrapper loading-wrapper-btm" v-else>
-                        <text class="btm-text">———已至底部———</text>
-                    </view>
-                </view>
-            </scroll-view>
-            <view class="empty-container" v-if="showEmpty">
-                <image class="empty-container-image" :src="StaticUrl + 'icon-empty-search.png'"></image>
-                <text class="error-text">暂无搜索结果~</text>
-            </view>
-        </view>
-        <!-- 操作弹窗 -->
-        <tui-modal
-            :show="modal"
-            @click="handleClick"
-            @cancel="hideMobel"
-            :content="contentModalText"
-            color="#333"
-            :size="32"
-            shape="circle"
-            :maskClosable="false"
-        ></tui-modal>
-        <!-- 透明模态层 -->
-        <modal-layer v-if="isModallayer"></modal-layer>
-    </view>
-</template>
-
-<script>
-import { mapGetters, mapActions, mapMutations } from 'vuex'
-import modalLayer from '@/components/cm-module/modal-layer/modal-layer'
-import authorize from '@/common/authorize.js'
-import wxLogin from '@/services/wxLogin.js'
-
-export default {
-    components: {
-        modalLayer
-    },
-    data() {
-        return {
-            StaticUrl: this.$Static,
-            themeClass: 'block',
-            show: false,
-            isShowClose: false, //是否显示清空输入框图标
-            serachRecordList: [
-                { searchWord: '奥术大师大所打' },
-                { searchWord: '奥术大师大所打' },
-                { searchWord: '奥术大师大所打' },
-                { searchWord: '奥术大师大所打' },
-                { searchWord: '奥术大师大所打' },
-                { searchWord: '奥术大师大所打' }
-            ], //历史搜索记录
-            isShowWrapper: true,
-            isModallayer: false,
-            isFocus: false,
-            windowHeight: '',
-            showEmpty: false,
-            scrollHeight: '',
-            productList: [], //商品列表				productIds:'',//查询价格的商品ID
-            showLoading: false,
-            loadingNow: true,
-            loadingText: '上拉加载更多',
-            hasNextPage: false,
-            pullFlag: true,
-            listQuery: {
-                userId: 0,
-                name: '',
-                pageNum: 1,
-                pageSize: 20
-            },
-            modal: false,
-            contentModalText: '确定删除历史记录？'
-        }
-    },
-    onLoad(option) {
-        this.listQuery.userId = this.userId
-        if (option.keyWord) {
-            this.listQuery.name = option.keyWord
-            this.getListFromServer()
-            this.isFocus = false
-        } else {
-            this.isFocus = true
-            this.InitGetSerachRecord()
-        }
-    },
-    computed: {
-        ...mapGetters(['hasLogin', 'userId', 'userIdentity'])
-    },
-    methods: {
-        ...mapActions('cart', ['addToCart']),
-        //查询搜索历史记录
-        InitGetSerachRecord() {
-            this.ProductService.GetProductSearchHistory({ userId: this.listQuery.userId }).then(response => {
-                if (response.code == 0) {
-                    this.serachRecordList = response.data
-                }
-            })
-        },
-        //搜索
-        SubMitSearch() {
-            if (this.listQuery.name == '') {
-                this.$util.msg('请输入搜索关键词', 2000)
-            } else {
-                this.productList = []
-                this.getListFromServer()
-                this.isFocus = false
-            }
-        },
-        scrolltolower() {
-            if (this.total > this.productList.length && this.pullFlag) {
-                this.getListFromServer(true)
-            }
-        },
-        //搜索普通商品商品
-        getListFromServer(loadMore) {
-            this.showLoading = true
-            this.loadingNow = true
-            this.loadingText = '加载中'
-            this.showEmpty = false
-            if (loadMore) {
-                this.listQuery.pageNum += 1
-            }
-            this.ProductService.GetProductList(this.listQuery)
-                .then(response => {
-                    this.isShowWrapper = true
-                    const data = response.data
-                    const dataList = data.list
-                    if (dataList && dataList.length > 0) {
-                        this.hasNextPage = data.hasNextPage
-                        this.showEmpty = false
-                        if (loadMore) {
-                            this.productList = [...this.productList, ...dataList]
-                        } else {
-                            this.productList = [...dataList]
-                        }
-                        // 防上拉暴滑
-                        this.pullFlag = false
-                        setTimeout(() => {
-                            this.pullFlag = true
-                        }, 500)
-                        // 底部提示文案
-                        if (this.hasNextPage) {
-                            this.loadingText = '上拉加载更多'
-                        } else {
-                            this.showLoading = true
-                            this.loadingNow = false
-                        }
-                    } else {
-                        if (!loadMore) {
-                            this.showEmpty = true
-                        }
-                    }
-                })
-                .catch(error => {
-                    this.$util.msg(error.msg, 2000)
-                })
-        },
-        handAddCarts(pro) {
-            this.addToCart({ productId: pro.productId })
-        },
-        //输入框输入时触发
-        onShowClose() {
-            this.inputEmpty(this.listQuery.name)
-        },
-        //输入框获取焦点时触发
-        onFocus() {
-            this.inputEmpty(this.listQuery.name)
-            this.InitGetSerachRecord()
-        },
-        //清除输入框内容
-        delInputText() {
-            this.listQuery.name = ''
-            this.isShowClose = false
-            this.isShowWrapper = false
-            this.inputEmpty(this.listQuery.name)
-            this.InitGetSerachRecord()
-        },
-        //关键词搜索与历史搜索
-        keywordsClick(item) {
-            this.listQuery.name = item
-            this.isShowClose = true
-            this.isFocus = false
-            this.SubMitSearch()
-        },
-        //清空历史记录
-        confirmDetele() {
-            this.modal = true
-        },
-        //用户操作订单
-        handleClick(e) {
-            let index = e.index
-            if (index == 1) {
-                this.ProductService.GetDeleteProductSearchHistory({ userId: this.listQuery.userId })
-                    .then(response => {
-                        this.$util.msg('删除成功', 2000, true, 'success')
-                        this.serachRecordList = []
-                    })
-                    .catch(error => {
-                        this.$util.msg(error.msg, 2000)
-                    })
-            }
-            this.modal = false
-        },
-        hideMobel() {
-            this.modal = false
-        },
-        inputEmpty(val) {
-            this.isShowWrapper = false
-            if (val != '') {
-                this.isShowClose = true
-                this.isFocus = true
-            } else {
-                this.isShowClose = false
-                this.isFocus = true
-            }
-        },
-        isInterceptHtmlFn(text) {
-            let name = this.$reg.interceptHtmlFn(text)
-            return name
-        },
-        navToDetailPage(id) {
-            this.isModallayer = true
-            this.$api.navigateTo(`/pages/goods/product-detail?productId=${id}&jumpState=1`)
-            this.isModallayer = false
-        },
-        setScrollHeight() {
-            const { windowHeight, pixelRatio } = wx.getSystemInfoSync()
-            this.windowHeight = windowHeight - 1
-            this.scrollHeight = windowHeight - 1
-        },
-        toLoginPage() {
-            let searchLoginType = 'search'
-            uni.navigateTo({
-                url: `/pages/login/login?type=${searchLoginType}`
-            })
-        },
-        topBubble() {
-            //显隐搜索项
-            this.show = !this.show
-        }
-    },
-    //分享转发
-    onShareAppMessage(res) {
-        // 加密参数
-        const shareData = {
-            type: 2,
-            keyWord: this.listQuery.name,
-            inviteUserId: this.userId
-        }
-        // 加密
-        const state_str = encodeURIComponent(this.$crypto.encrypt(shareData))
-        return {
-            title: `点击查看“${this.listQuery.name}”相关的商品`,
-            path: `/pages/tabBar/index/index?state_str=${state_str}`
-        }
-    },
-    onShow() {
-        this.setScrollHeight()
-    }
-}
-</script>
-
-<style lang="scss">
-@import '@/uni.scss';
-page {
-    background-color: #f7f7f7 !important;
-}
-.search-main {
-    width: 100%;
-    height: 88rpx;
-    position: fixed;
-    top: 0;
-    left: 0;
-    background: #ffffff;
-    z-index: 1001;
-    box-sizing: border-box;
-    padding: 9rpx 24rpx;
-    .gosearch-btn {
-        width: 604rpx;
-        height: 100%;
-        float: left;
-        border-radius: 40rpx;
-        background: #f0f0f0;
-        margin: 0 auto;
-        padding: 0 20rpx;
-        font-size: 28rpx;
-        line-height: 66rpx;
-        padding-left: 66rpx;
-        color: #8a8a8a;
-        background: #f7f7f7;
-        position: relative;
-        box-sizing: border-box;
-        .icon-sousuo {
-            width: 66rpx;
-            height: 66rpx;
-            line-height: 66rpx;
-            text-align: center;
-            display: block;
-            position: absolute;
-            left: 0;
-            top: 0;
-            font-size: 34rpx;
-            color: #8a8a8a;
-            z-index: 10;
-        }
-        .icon-quxiao {
-            width: 66rpx;
-            height: 66rpx;
-            display: block;
-            line-height: 66rpx;
-            font-size: 36rpx;
-            text-align: center;
-            color: #8a8a8a;
-            position: absolute;
-            right: 10rpx;
-            top: 0;
-            padding: 0 10rpx;
-            z-index: 100;
-        }
-        .input {
-            width: 530rpx;
-            height: 100%;
-            float: left;
-            font-size: $font-size-24;
-            box-sizing: border-box;
-            padding-right: 66rpx;
-        }
-    }
-    .search-btn {
-        width: 90rpx;
-        height: 66rpx;
-        line-height: 66rpx;
-        float: right;
-        text-align: center;
-        color: #666666;
-        font-size: $font-size-24;
-    }
-}
-.search-container {
-    padding-top: 91rpx;
-}
-.search-container-history {
-    width: 100%;
-    height: auto;
-    background-color: #ffffff;
-}
-.s-block {
-    background: #ffffff;
-    &.hot {
-        border-top: 20rpx solid #f7f7f7;
-    }
-    .header {
-        font-size: 32rpx;
-        padding: 40rpx 24rpx 22rpx 24rpx;
-        line-height: 42rpx;
-        font-size: 30rpx;
-        font-weight: bold;
-        position: relative;
-        width: 100%;
-        float: left;
-        box-sizing: border-box;
-        .icon-shanchu {
-            font-size: 36rpx;
-            color: #333333;
-            float: right;
-            padding: 0 10rpx;
-            z-index: 10;
-            font-weight: normal;
-        }
-    }
-    .list {
-        width: 100%;
-        height: auot;
-        float: left;
-        padding: 0 24rpx 30rpx 24rpx;
-        box-sizing: border-box;
-        .list-main {
-            width: 100%;
-            float: left;
-            display: flex;
-            flex-wrap: wrap;
-            view {
-                color: #8a8a8a;
-                font-size: 24rpx;
-                box-sizing: border-box;
-                text-align: center;
-                height: 48rpx;
-                line-height: 48rpx;
-                border-radius: 24rpx;
-                margin: 12rpx 12rpx 12rpx 0;
-                padding: 0 20rpx;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                background-color: #f3f3f3;
-                .iconfont {
-                    font-size: $font-size-30;
-                    color: #e15616;
-                    margin-left: 12rpx;
-                }
-                &.list-active {
-                    background-color: #fef6f3;
-                    color: #e15616;
-                }
-            }
-        }
-    }
-}
-.commodity-list-wrapper {
-    box-sizing: border-box;
-    padding: 0 24rpx;
-    background: #ffffff;
-    .scroll-view {
-        height: 100%;
-        overflow: scroll;
-    }
-    .empty-container-image {
-        margin-top: -300rpx;
-    }
-}
-.product-list-type {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 32rpx 0;
-    border-bottom: 1px solid #e1e1e1;
-    overflow: hidden;
-    &:last-child {
-        border-bottom: 0;
-    }
-    .product-list-image {
-        width: 182rpx;
-        height: 182rpx;
-        box-sizing: border-box;
-        border-radius: 8rpx;
-        border: 1px solid #e1e1e1;
-        .product-image {
-            width: 180rpx;
-            height: 180rpx;
-            display: block;
-            border-radius: 8rpx;
-        }
-    }
-    .product-list-msgs {
-        width: 495rpx;
-        height: 100%;
-        .product-name {
-            width: 100%;
-            height: 72rpx;
-            line-height: 36rpx;
-            font-size: $font-size-26;
-            color: #333333;
-            text-align: justify;
-        }
-        .product-unit,
-        .product-tags,
-        .product-price {
-            margin-top: 8rpx;
-        }
-        .product-unit {
-            width: 100%;
-            height: 28rpx;
-            text-align: left;
-            line-height: 28rpx;
-            font-size: $font-size-20;
-            color: #999999;
-        }
-        .product-tags {
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-            width: 100%;
-            height: 30rpx;
-            .tag {
-                margin-right: 8rpx;
-                font-size: 22rpx;
-                height: 30rpx;
-                line-height: 30rpx;
-                text-align: center;
-                &.type2 {
-                    width: 80rpx;
-                    color: #f83c6c;
-                    background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center
-                        no-repeat;
-                    background-size: contain;
-                }
-                &.type3 {
-                    width: 80rpx;
-                    background: linear-gradient(270deg, #ff457b 0%, #b03bb8 51%, #6431f2 100%);
-                    color: #fff;
-                    border-radius: 4rpx;
-                }
-            }
-        }
-        .product-price {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-end;
-            height: $font-size-26;
-            .price {
-                font-size: $font-size-26;
-                color: #f83c6c;
-                font-weight: bold;
-                line-height: $font-size-26;
-                
-                .delete{
-                    font-size: 20rpx;
-                    color: #999999;
-                    text-decoration: line-through;
-                    font-weight: normal;
-                    margin-left: 10rpx;
-                }
-                
-            }
-            .carts-add {
-                width: 44rpx;
-                height: 44rpx;
-                line-height: 44rpx;
-                border-radius: 50%;
-                text-align: center;
-                font-size: 32rpx;
-                color: #ffffff;
-                background-color: #ff457b;
-            }
-        }
-    }
-}
-</style>

pages/order/create-order.vue

@@ -1,5 +1,6 @@
 <template>
     <view class="create-order">
+		<tui-skeleton v-if="isRequest" loadingType="2"></tui-skeleton>
         <!-- 收货地址 -->
         <view class="order-top"> <cm-choose-address :addressData="addressData"></cm-choose-address> </view>
         <view class="grid"></view>
@@ -95,6 +96,8 @@ export default {
     },
     data() {
         return {
+			isRequest: true,
+			
             // 收货地址
             addressData: {},
 
@@ -192,15 +195,10 @@ export default {
         }
     },
     onLoad(options) {
+		this.isRequest = true
         this.getAddressData()
         this.initOptions(options)
-        this.$on('orderPaySuccess', ()=>{
-            if(this.collageFlag === 1){
-                uni.reLaunch({ url: '/pages/fight-order/fight-detail' })
-            }else{
-                uni.reLaunch({ url: '/pages/order/success' })
-            }
-        })
+        this.orderPaySuccess() // 支付回调
     },
     onShow() {
         let pages = getCurrentPages()
@@ -242,6 +240,16 @@ export default {
     },
 
     methods: {
+		// 支付回调执行函数
+		orderPaySuccess(){
+			this.$on('orderPaySuccess', ()=>{
+			    if(this.collageFlag === 1){
+			        uni.redirectTo({ url: '/pages/fight-order/fight-detail' })
+			    }else{
+			        uni.redirectTo({ url: '/pages/order/success' })
+			    }
+			})
+		},
         // 分享
         handleShare(shareType) {
             if (!this.reduction) return
@@ -263,17 +271,17 @@ export default {
             // 从商品详情进入
             if (options.type == 'prodcut') {
                 const productInfo = uni.getStorageSync('commitProductInfo')
-                this.subParams.cartType = 2
+                this.subParams.cartType = 2  // 从商品详情提交
                 this.params.productCount = productInfo.productCount
                 this.params.productId = productInfo.productId
                 this.params.heUserId = productInfo.heUserId || 0
+				this.params.collageFlag = this.collageFlag = productInfo.collageFlag
                 this.productIds = productInfo.productId.toString()
                 this.allCount = productInfo.allCount
-                this.params.collageFlag = this.collageFlag = productInfo.collageFlag
                 this.collageId = parseInt(productInfo.collageId) || 0 
             } else {
                 const cartPramsData = uni.getStorageSync('commitCartPramsData')
-                this.subParams.cartType = 1
+                this.subParams.cartType = 1 // 从购物车提交
                 this.params.cartIds = cartPramsData.cartIds
                 this.productIds = cartPramsData.productIds
                 this.allCount = cartPramsData.allCount
@@ -363,6 +371,7 @@ export default {
                     this.allPrice = data.totalPrice
                     this.fetchCouponList()
                     this.reduction = res.data.reduction
+					this.isRequest = false
                 })
                 .catch(error => {
                     this.$util.msg(error.msg, 2000)
@@ -406,7 +415,7 @@ export default {
 
             // 调试提交参数
             console.log(this.subParams)
-            return
+            // return
 
             this.isSubLoading = true
             this.loadingText = '正在创建订单...'

pages/tabBar/index/index.vue

@@ -4,7 +4,7 @@
         <template v-else>
             <!-- 首页自定义导航栏 -->
             <view class="search-input" :class="{ fixed: isSticky }">
-                <view class="search-content" @click="this.$api.navigateTo(clickPath)">
+                <view class="search-content" @click="handleToSearch">
                     <text class="iconfont icon-sousuo"></text> <view class="search-text">搜索商品</view>
                 </view>
             </view>
@@ -76,7 +76,6 @@ export default {
         return {
             StaticUrl: this.$Static,
             isSticky: false,
-            clickPath: '/pages/goods/search',
             productFloor: [], //商品列表
             bannerImageList: [], //轮播
             pageNum: 1,
@@ -91,9 +90,7 @@ export default {
     onLoad(option) {
         // 处理分享链接
         this.shareHandle(option)
-        setTimeout(() => {
-            this.init()
-        }, 2000)
+		this.init()
     },
     onShow() {
         if (this.hasLogin) {
@@ -117,6 +114,10 @@ export default {
         }
     },
     watch: {
+		// 监听登录状态
+		hasLogin(){
+			this.init()
+		},
         activePopupType(val) {
             if (val === 0 || !this.showCouponPopup) return
             // 定时开启弹窗
@@ -173,7 +174,13 @@ export default {
             console.log(this.activePopupType)
             this.updatePopupType(this.activePopupType - 1)
             uni.setStorageSync('couponPopupType', new Date().getDay())
-        }
+        },
+		// 到搜索界面
+		handleToSearch(){
+			uni.navigateTo({
+				url: '/pages/goods/goods-search'
+			})
+		}
     },
     onPageScroll(e) {
         this.isSticky = e.scrollTop > 0