前端gjy

pages.json

@@ -100,6 +100,13 @@
 				"navigationBarTitleText": "入驻"
 			}
 		},
+		{
+			"path": "pages/grain_pulse/search",
+			"style": {
+				"enablePullDownRefresh": true,
+				"navigationBarTitleText": "搜索"
+			}
+		},
 		{
 			"path": "pages/sale/portprice",
 			"style": {

pages/grain_pulse/home.vue

@@ -12,7 +12,7 @@
 				</view>
 			</view>
 			<view class="cu-bar search">
-				<view class="search-form round" @click="naviageToPage('')">
+				<view class="search-form round" @click="naviageToPage('/pages/grain_pulse/search')">
 					<image class='icon-scarch' src="../../static/img/liangmai/sousuo.png" mode=""></image>
 					<view class='Regular'> 请输入货名或标题</view>
 				</view>
@@ -87,10 +87,14 @@
 				})
 			},
 			todetails(){
-				console.log(1111)
 				uni.navigateTo({
 					url:'/pages/grain_pulse/details'
 				})
+			},
+			naviageToPage(item){
+				uni.navigateTo({
+					url:item
+				})
 			}
 		}
 	}

pages/grain_pulse/search.vue

@@ -0,0 +1,922 @@
+<template>
+	<view class="content">
+		<view class="map">
+			<view class='Medium flex align-item-center locationwrap'>
+				<image class='location' src="../../static/img/liangmai/icon_ditu.png" mode=""></image>
+				黑龙江中天昊元…
+			</view>
+		</view>
+		<view style='background:#fff;display:flex;' class="cu-bar search">
+			<view style='flex:6;' class="search-form round Medium">
+				<text style='color: #ccc;text-indent:6px;' class="cuIcon-search"></text>
+				<input type="text" maxlength="20" :focus="true" v-model="searchKeyWord" @confirm="doSearch()"
+					@input='search' placeholder="请输入货名或标题" confirm-type="search"></input>
+			</view>
+			<view @click='doSearch()' class="Regular" style="width:4%;flex:1;">搜索</view>
+			<u-icon @click='emptysearch' class="cuIcon" v-if='searchKeyWord.length>0' size="34" name="close-circle-fill" color="#D6D9E0"></u-icon>
+			<!-- <text @click='emptysearch' v-if='searchKeyWord.length>0' class='tip_text cuIcon-roundclosefill'></text> -->
+		</view>
+		<!-- mSearch组件 如果使用原样式，删除组件元素-->
+		<!-- <mSearch class="mSearch-input-box" :mode="2" button="inside" :placeholder="defaultKeyword" @search="doSearch(false)" @input="inputChange" @confirm="doSearch(false)" v-model="keyword"></mSearch> -->
+		<!-- 原样式 如果使用原样式，恢复下方注销代码 -->
+		<!-- 			
+			<view class="input-box">
+				<input type="text" :placeholder="defaultKeyword" @input="inputChange" v-model="keyword" @confirm="doSearch(false)"
+				 placeholder-class="placeholder-class" confirm-type="search">
+			</view>
+			<view class="search-btn" @tap="doSearch(false)">搜索</view> 
+			-->
+		<!-- 原样式 end -->
+		<view class="search-keyword" @touchstart="blur">
+			<scroll-view style='background:#F5F6FA;' class="keyword-list-box"
+				v-show="isShowKeywordList&&keywordList.length>0" scroll-y>
+				<view style='background:#fff;padding:0 15px;border-radius:0rpx 0rpx 30rpx 30rpx;' class="Semibold">
+					<view @click='tabcarchange(0)' class='line' :class='TabCur==0?"active":""'>采购</view>
+					<view @click='tabcarchange(1)' class='line' :class='TabCur==1?"active":""'>销售</view>
+				</view>
+				<view class="introduce-section">
+					<view v-for="(item, index) in keywordList" :key="index" class="guess-item"
+						@click="navToDetailPage(item)">
+						<view class="price-box">
+							<view class="title Medium">{{item.title}}</view>		
+							<view class='flex justify-between align-item-center Regular'>
+								<view v-if='TabCur==0' class='address'>
+									{{item.receivePrivate}}{{item.receiveCity}}{{item.receiveArea}}{{item.receiveWarehouse}}
+								</view>
+								<view v-if='TabCur==1' class='address'>
+									{{item.sendPrivate}}{{item.sendCity}}{{item.sendArea}}{{item.sendWarehouse}}
+								</view>
+								<view class='price NumberBold' v-if='item.procurementPlanType=="期货"'>
+									<text class="number-style">{{item.basisPrice}}</text><text style='font-size:13px;color:#333333;'
+										class="Semibold">元/吨</text></view>
+								<view class='price NumberBold' v-if='item.procurementPlanType=="现货"'>
+									<text class="number-style">{{item.procurementPrice}}</text><text style='font-size:13px;color:#333;'
+										class="Semibold">元/吨</text></view>
+								<view class='price NumberBold' v-if='item.salePlanType=="期货"'><text class="number-style">+{{item.basisPrice}}</text><text
+										style='font-size:13px;color:#333333;' class="Semibold">元/吨</text></view>
+								<view class='price NumberBold' v-if='item.salePlanType=="现货"'><text class="number-style">{{item.salePrice}}</text><text
+										style='font-size:13px;color:#333;' class="Semibold">元/吨</text></view>
+							</view>
+						</view>
+				<view class='flex justify-between Regular'>
+					<view class="Regular">
+						<view class='tag1 tag-bule radius line-pink' v-if='item.procurementPlanType=="现货"'>现货</view>
+						<view class='tag1 tag-bule radius line-pink' v-if='item.procurementPlanType=="期货"'>期货</view>
+						<view class='tag1 tag-bule radius line-pink' v-if='item.salePlanType=="现货"'>现货</view>
+						<view class='tag1 tag-bule radius line-pink' v-if='item.salePlanType=="期货"'>期货</view>
+						<view class='tag1 tag-yellow radius line-green'>{{item.goodsName}}</view>
+						<view class='tag1 tag-red radius line-yellow' v-if="TabCur== 0">{{item.plannedPurchaseVolume}}吨
+						</view>
+						<view class='tag1 tag-red radius line-yellow' v-if="TabCur== 1">{{item.plannedSaleVolume}}吨
+						</view>
+					</view>
+					<view style='color:#878C9C;padding-top:5px;' v-if='item.procurementPlanType=="期货" && TabCur== 0'>
+						今日基差</view>
+					<view style='color:#878C9C;padding-top:5px;' v-if='item.procurementPlanType=="现货" && TabCur== 0'>
+						采购价格</view>
+					<view style='color:#878C9C;padding-top:5px;' v-if='item.salePlanType=="期货" && TabCur== 1'>今日基差
+					</view>
+					<view style='color:#878C9C;padding-top:5px;' v-if='item.salePlanType=="现货" && TabCur== 1'>销售价格
+					</view>
+				</view>
+					</view>
+					<view v-show="isLoadMore">
+						<uni-load-more :status="loadStatus"></uni-load-more>
+					</view>
+				</view>
+			</scroll-view>
+			<view style='height:80vh;' v-show="isShowKeywordList&&keywordList.length==0">
+				<view style='background:#fff;padding:0 15px;'>
+					<view @click='tabcarchange(0)' class='line' :class='TabCur==0?"active":""'>采购</view>
+					<view @click='tabcarchange(1)' class='line' :class='TabCur==1?"active":""'>销售</view>
+				</view>
+				<view style='background:#F5F6FA;height:100%;line-height:80vh;text-align:center;'>
+					暂无相关结果
+				</view>
+			</view>
+			<scroll-view class="keyword-box" v-show="!isShowKeywordList" scroll-y>
+				<view class="keyword-block" v-if="oldKeywordList.records.length>0">
+					<view class="keyword-list-header Medium">
+						<view style='font-size:16px;font-weight:600;'>最近搜索</view>
+						<view>
+							<image @tap="oldDelete" style='width:16px;height:16px;'
+								src="../../static/img/jiaoyi/shanchu@3x.png"></image>
+							<!-- <image @tap="oldDelete" src="./static/delete.png"></image> -->
+							<!-- 	<text class="cuIcon-delete text-gray "  ></text> -->
+
+						</view>
+					</view>
+					<view class="keyword Regular">
+						<view v-for="(keyword,index) in oldKeywordList.records" @tap="doSearch(keyword)" :key="index">
+							{{keyword.searchContent}}
+						</view>
+					</view>
+				</view>
+				<view class="keyword-block Medium">
+					<view class="keyword-list-header">
+						<view style='font-size:16px;font-weight:600;'>推荐搜索</view>
+						<view>
+							<image @tap="hotToggle" :src="'/static/HM-search/attention'+forbid+'.png'"></image>
+						</view>
+					</view>
+					<view class="keyword Regular" v-if="forbid==''">
+						<view v-for="(keyword,index) in hotKeywordList" @tap="doSearch(keyword)" :key="index">
+							{{keyword.searchContent}}
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex';
+	//引用mSearch组件，如不需要删除即可
+	import mSearch from '@/components/mehaotian-search-revision.vue';
+	export default {
+		data() {
+			return {
+				defaultKeyword: "",
+				searchKeyWord: "",
+				pageSize: 10,
+				currentPage: 1,
+				oldKeywordList: [],
+				hotKeywordList: [],
+				keywordList: [],
+				forbid: '',
+				isShowKeywordList: false,
+				TabCur: 0,
+				isLoadMore: false,
+				loadStatus: '',
+				content: '搜索'
+			}
+		},
+		onLoad(options) {
+			if (options.searchKeyWord) {
+				this.searchKeyWord = options.searchKeyWord
+			}
+			this.TabCur = options.TabCur
+			if (this.searchKeyWord) {
+				this.isShowKeywordList = true
+				this.getData()
+			}
+		},
+		onShow() {
+			this.init();
+		},
+		components: {
+			//引用mSearch组件，如不需要删除即可
+			mSearch
+		},
+		computed: {
+			...mapState(['hasLogin', 'userInfo'])
+		},
+		methods: {
+			//详情
+			navToDetailPage(item) {
+				let id = item.id;
+				if (this.TabCur == 0) {
+					uni.navigateTo({
+						url: `/pageA/product/detail?id=${id}`
+					})
+				} else {
+					uni.navigateTo({
+						url: `/pageA/product/sales_detail?id=${id}`
+					})
+				}
+			},
+			init() {
+				this.loadDefaultKeyword();
+				this.loadOldKeyword();
+				this.loadHotKeyword();
+
+			},
+			search(e) {
+				if (e.detail.value.length == 0) {
+					this.isShowKeywordList = false
+					this.loadOldKeyword()
+					this.loadHotKeyword()
+				} else {
+					this.searchKeyWord = e.detail.value
+				}
+			},
+			blur() {
+				uni.hideKeyboard()
+			},
+			doSearch(keyword) {
+				console.log(keyword)
+				if (keyword) {
+					this.searchKeyWord = keyword.searchContent
+
+				}
+				if (this.searchKeyWord.length > 0) {
+					this.isShowKeywordList = true
+					this.$api.doRequest('post', '/searchRecordsInfo/api/addInfo', {
+							commonId: this.userInfo.id,
+							searchContent: this.searchKeyWord
+						}).then(res => {})
+						.catch(res => {
+
+						});
+				} else {
+					this.isShowKeywordList = false
+					this.loadOldKeyword()
+					this.loadHotKeyword()
+				}
+				uni.showLoading({
+					title: '正在加载',
+					mask: true
+				})
+				var param1 = ''
+				if (this.TabCur == 0) {
+					param1 = '/procurementPlanInfo/selectProcurementPlanInfo'
+				} else {
+					param1 = '/salePlanInfo/selectSalePlanInfo'
+				}
+				this.$api.doRequest('get', param1, {
+						pageSize: this.pageSize,
+						currentPage: this.currentPage,
+						searchKeyWord: this.searchKeyWord
+					}).then(res => {
+						uni.hideLoading()
+						this.keywordList = res.data.data.records
+					})
+					.catch(res => {
+						uni.hideLoading()
+						if (res.errmsg) {
+							uni.showToast({
+								title: res.errmsg,
+								icon: 'none',
+								duration: 2000
+							})
+						} else {
+							uni.showToast({
+								title: "系统异常，请联系管理员",
+								icon: 'none',
+								duration: 2000
+							})
+						}
+					});
+			},
+			emptysearch() {
+				this.searchKeyWord = ''
+				this.isShowKeywordList = false
+				this.loadOldKeyword()
+				this.loadHotKeyword()
+			},
+			loadHotKeyword() {
+				this.$api.doRequest('get', '/searchRecordsInfo/selectRecommendedSearchRecordsInfo', {
+						pageSize: this.pageSize,
+						currentPage: this.currentPage,
+						commonId: this.userInfo.id
+					}).then(res => {
+						uni.hideLoading()
+						this.hotKeywordList = res.data.data.records
+					})
+					.catch(res => {
+						if (res.errmsg) {
+							uni.showToast({
+								title: res.errmsg,
+								icon: 'none',
+								duration: 2000
+							})
+						} else {
+							uni.showToast({
+								title: "系统异常，请联系管理员",
+								icon: 'none',
+								duration: 2000
+							})
+						}
+					});
+			},
+			tabSelect(e) {
+				if (e.currentTarget.dataset.id) {
+					this.TabCur = e.currentTarget.dataset.id;
+				} else {
+					this.TabCur = e.target.current;
+				}
+				this.pages = 1
+				this.isLoadMore = false
+				this.loadData()
+			},
+			getData() {
+				var param1 = ''
+				if (this.TabCur == 0) {
+					param1 = '/procurementPlanInfo/selectProcurementPlanInfo'
+				} else {
+					param1 = '/salePlanInfo/selectSalePlanInfo'
+				}
+				this.$api.doRequest('get', param1, {
+						pageSize: this.pageSize,
+						currentPage: this.currentPage,
+						searchKeyWord: this.searchKeyWord
+					}).then(res => {
+						uni.hideLoading()
+						this.keywordList = res.data.data.records
+					})
+					.catch(res => {
+						if (res.errmsg) {
+							uni.showToast({
+								title: res.errmsg,
+								icon: 'none',
+								duration: 2000
+							})
+						} else {
+							uni.showToast({
+								title: "系统异常，请联系管理员",
+								icon: 'none',
+								duration: 2000
+							})
+						}
+					});
+			},
+			//加载默认搜索关键字
+			loadDefaultKeyword() {
+				//定义默认搜索关键字，可以自己实现ajax请求数据再赋值,用户未输入时，以水印方式显示在输入框，直接不输入内容搜索会搜索默认关键字
+				this.defaultKeyword = "默认关键字";
+			},
+			//加载历史搜索,自动读取本地Storage
+			loadOldKeyword() {
+				var that = this
+				this.$api.doRequest('get', '/searchRecordsInfo/selectSearchRecordsInfo', {
+					pageSize: this.pageSize,
+					currentPage: this.currentPage,
+					commonId: this.userInfo.id
+				}).then(res => {
+					uni.hideLoading()
+					that.oldKeywordList = res.data.data
+					console.log(that.oldKeywordList)
+				})
+			},
+			//监听输入
+			inputChange(event) {
+				//兼容引入组件时传入参数情况
+				var keyword = event.detail ? event.detail.value : event;
+				// if (!keyword) {
+				// 	this.keywordList = [];
+				// 	this.isShowKeywordList = false;
+				// 	return;
+				// }
+				// this.isShowKeywordList = true;
+				// //以下示例截取淘宝的关键字，请替换成你的接口
+				// uni.request({
+				// 	url: 'https://suggest.taobao.com/sug?code=utf-8&q=' + keyword, //仅为示例
+				// 	success: (res) => {
+				// 		this.keywordList = this.drawCorrelativeKeyword(res.data.result, keyword);
+				// 	}
+				// });
+			},
+			//高亮关键字
+			drawCorrelativeKeyword(keywords, keyword) {
+				var len = keywords.length,
+					keywordArr = [];
+				for (var i = 0; i < len; i++) {
+					var row = keywords[i];
+					//定义高亮#9f9f9f
+					var html = row[0].replace(keyword, "<span style='color: #9f9f9f;'>" + keyword + "</span>");
+					html = '<div>' + html + '</div>';
+					var tmpObj = {
+						keyword: row[0],
+						htmlStr: html
+					};
+					keywordArr.push(tmpObj)
+				}
+				return keywordArr;
+			},
+			//顶置关键字
+			setkeyword(data) {
+				this.keyword = data.keyword;
+			},
+			//清除历史搜索
+			oldDelete() {
+				var that = this
+				uni.showModal({
+					content: '确定清除历史搜索记录？',
+					success: (res) => {
+						if (res.confirm) {
+							this.$api.doRequest('post', '/searchRecordsInfo/api/deleteSearchRecordsInfo', {
+									commonId: this.userInfo.id
+								}).then(res => {
+									if (res.data.code == 200) {
+										uni.showToast({
+											title: '清除历史搜索成功',
+											icon: 'none',
+											duration: 2000
+										})
+										that.oldKeywordList.records = []
+									}
+								})
+								.catch(res => {
+									uni.showToast({
+										title: '清除历史搜索成功',
+										icon: 'none',
+										duration: 2000
+									})
+								});
+						} else if (res.cancel) {
+							console.log('用户点击取消');
+						}
+					}
+				});
+			},
+			//热门搜索开关
+			hotToggle() {
+				this.forbid = this.forbid ? '' : '_forbid';
+			},
+			// //执行搜索
+			// doSearch(e) {
+			// 	if(e.detail){
+			// 		if(e.detail.value.length>0){
+			// 			this.content='取消'
+			// 			this.isShowKeywordList=true
+			// 			this.$api.doRequest('post', '/searchRecordsInfo/api/addInfo',{commonId:this.userInfo.id,searchContent:e.detail.value}).then(res => {
+			// 			})
+			// 			.catch(res => {
+
+			// 			});
+			// 		}else{
+			// 			this.content='搜索'
+			// 			this.isShowKeywordList=false
+			// 			this.loadOldKeyword()
+			// 			this.loadHotKeyword()
+			// 		}
+			// 	}
+			// 	else if(e){
+			// 		if(e.length>0){
+			// 			this.isShowKeywordList=true
+			// 			this.content='取消'
+			// 			this.searchKeyWord = e
+			// 			this.$api.doRequest('post', '/searchRecordsInfo/api/addInfo',{commonId:this.userInfo.id,searchContent:e}).then(res => {
+			// 			})
+			// 			.catch(res => {
+
+			// 			})
+			// 		}else{
+			// 			this.content='搜索'
+			// 			this.isShowKeywordList=false
+			// 			this.loadOldKeyword()
+			// 			this.loadHotKeyword()
+			// 		}
+			// 	}
+			// 	uni.showLoading({
+			// 		title: '正在加载',
+			// 		mask:true
+			// 	})
+			// 	var param1=''
+			// 	if (this.TabCur == 0) {
+			// 		param1 = '/procurementPlanInfo/selectProcurementPlanInfo'
+			// 	} else {
+			// 		param1 = '/salePlanInfo/selectSalePlanInfo'
+			// 	}
+			// 	this.$api.doRequest('get', param1,{pageSize:this.pageSize,
+			// 	currentPage:this.currentPage,searchKeyWord:this.searchKeyWord}).then(res => {
+			// 		uni.hideLoading()
+			// 		this.keywordList=res.data.data.records
+			// 	})
+			// 	.catch(res => {
+			// 		uni.hideLoading()
+			// 		uni.showToast({
+			// 			title: res.errmsg,
+			// 			icon:'none',
+			// 			duration: 2000
+			// 		})
+			// 	});
+			// 	// console.log(key)
+			// 	// console.log(this.keyword)
+			// 	// key = key ? key : this.keyword ? this.keyword : this.defaultKeyword;
+			// 	// this.keyword = key;
+			// 	// this.saveKeyword(key); //保存为历史 
+			// 	// var TabCur = this.TabCur
+			// 	// uni.navigateTo({
+			// 	// 	url: `/pageA/product/querylist?keywords=${key}&TabCur=${TabCur}`
+			// 	// })
+			// },
+			tabcarchange(status) {
+				this.TabCur = status
+				var param1 = ''
+				if (this.TabCur == 0) {
+					param1 = '/procurementPlanInfo/selectProcurementPlanInfo'
+				} else {
+					param1 = '/salePlanInfo/selectSalePlanInfo'
+				}
+				this.$api.doRequest('get', param1, {
+						pageSize: this.pageSize,
+						currentPage: this.currentPage,
+						searchKeyWord: this.searchKeyWord
+					}).then(res => {
+						if (res.data.code == 200) {
+							this.keywordList = res.data.data.records
+						} else {
+							uni.showToast({
+								title: res.data.message,
+								icon: 'none',
+								duration: 2000
+							})
+
+						}
+						uni.hideLoading()
+					})
+					.catch(res => {
+						uni.hideLoading()
+						if (res.errmsg) {
+							uni.showToast({
+								title: res.errmsg,
+								icon: 'none',
+								duration: 2000
+							})
+						} else {
+							uni.showToast({
+								title: "系统异常，请联系管理员",
+								icon: 'none',
+								duration: 2000
+							})
+						}
+					});
+			},
+			//保存关键字到历史记录
+			saveKeyword(keyword) {
+				uni.getStorage({
+					key: 'OldKeys',
+					success: (res) => {
+						console.log(res.data);
+						var OldKeys = JSON.parse(res.data);
+						var findIndex = OldKeys.indexOf(keyword);
+						if (findIndex == -1) {
+							OldKeys.unshift(keyword);
+						} else {
+							OldKeys.splice(findIndex, 1);
+							OldKeys.unshift(keyword);
+						}
+						//最多10个纪录
+						OldKeys.length > 10 && OldKeys.pop();
+						uni.setStorage({
+							key: 'OldKeys',
+							data: JSON.stringify(OldKeys)
+						});
+						this.oldKeywordList = OldKeys; //更新历史搜索
+					},
+					fail: (e) => {
+						var OldKeys = [keyword];
+						uni.setStorage({
+							key: 'OldKeys',
+							data: JSON.stringify(OldKeys)
+						});
+						this.oldKeywordList = OldKeys; //更新历史搜索
+					}
+				});
+			}
+		}
+	}
+</script>
+<style scoped>
+	.content{
+		padding:13.5px;
+	}
+	page{
+		background:#fff;
+	}
+	.location{
+		width:15.5px;height:17.5px;margin-right:2.5px;
+	}
+	.locationwrap{
+		font-size:16px;
+	}
+	.search-form {
+		background: #F5F6F9;
+	}
+	.cu-bar .search-form{
+		margin:0;margin-right: 15px;
+	}
+	.line {
+		display: inline-block;
+		padding: 5px;
+		position: relative;
+		font-size: 17px;
+	}
+
+	.line.active {
+		font-size: 19px;
+		font-weight: 900;
+	}
+
+	.line.active:after {
+		content: '';
+		display: block;
+		position: absolute;
+		width: 36rpx;
+		height: 6rpx;
+		left: 50%;
+		transform: translateX(-50%);
+		bottom: 0;
+		background: #22C572;
+		/* border-bottom: 1px solid #22C572; */
+	}
+
+	.search-box {
+		width: 100%;
+		background-color: rgb(242, 242, 242);
+		padding: 15upx 2.5%;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.search-box .mSearch-input-box {
+		width: 100%;
+	}
+
+	.search-box .input-box {
+		width: 85%;
+		flex-shrink: 1;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.search-box .search-btn {
+		width: 15%;
+		margin: 0 0 0 2%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-shrink: 0;
+		font-size: 28upx;
+		color: #fff;
+		background: linear-gradient(to right, #ff9801, #ff570a);
+		border-radius: 60upx;
+	}
+
+	.search-box .input-box>input {
+		width: 100%;
+		height: 60upx;
+		font-size: 32upx;
+		border: 0;
+		border-radius: 60upx;
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+		padding: 0 3%;
+		margin: 0;
+		background-color: #ffffff;
+	}
+
+	.placeholder-class {
+		color: #9e9e9e;
+	}
+
+	.search-keyword {
+		width: 100%;
+		background-color: rgb(242, 242, 242);
+	}
+
+	.keyword-list-box {
+		background: #F5F6FA;
+		height: calc(100vh - 110upx);
+		/* padding-top: 10upx; */
+		border-radius: 20upx 20upx 0 0;
+	}
+
+	.keyword-entry-tap {
+		background-color: #eee;
+	}
+
+	.keyword-entry {
+		width: 94%;
+		height: 80upx;
+		margin: 0 3%;
+		font-size: 30upx;
+		color: #333;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border-bottom: solid 1upx #e7e7e7;
+	}
+
+	.keyword-entry image {
+		width: 60upx;
+		height: 60upx;
+	}
+
+	.keyword-entry .keyword-text,
+	.keyword-entry .keyword-img {
+		height: 80upx;
+		display: flex;
+		align-items: center;
+	}
+
+	.keyword-entry .keyword-text {
+		width: 90%;
+	}
+
+	.keyword-entry .keyword-img {
+		width: 10%;
+		justify-content: center;
+	}
+
+	.keyword-box {
+		height: calc(100vh - 110upx);
+		border-radius: 20upx 20upx 0 0;
+		background-color: #fff;
+	}
+
+	.keyword-box .keyword-block {
+		padding: 10upx 0;
+	}
+
+	.keyword-box .keyword-block .keyword-list-header {
+		width: 94%;
+		padding: 10upx 3%;
+		font-size: 27upx;
+		color: #333;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.keyword-box .keyword-block .keyword-list-header image {
+		width: 40upx;
+		height: 40upx;
+	}
+
+	.keyword-box .keyword-block .keyword {
+		width: 94%;
+		padding: 3px 3%;
+		display: flex;
+		flex-flow: wrap;
+		justify-content: flex-start;
+	}
+
+	.keyword-box .keyword-block .hide-hot-tis {
+		display: flex;
+		justify-content: center;
+		font-size: 28upx;
+		color: #6b6b6b;
+	}
+
+	.keyword-box .keyword-block .keyword>view {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-radius: 60upx;
+		padding: 0 20upx;
+		margin: 10upx 20upx 10upx 0;
+		height: 60upx;
+		font-size: 28upx;
+		background-color: rgb(242, 242, 242);
+		color: #6b6b6b;
+	}
+
+	.cuIcon {
+		position: absolute;
+		right: 80px;
+	}
+
+	.tag1 {
+		background: #F5F6F9;
+		padding: 5px;
+		color: #333333;
+		display: inline-flex;
+		font-size: 22rpx;
+		border-radius: 3px;
+		margin: 3px;
+	}
+
+	.tag {
+		background: #F5F6F9;
+		padding: 7px 12px;
+		color: #333333;
+		display: inline-flex;
+		font-size: 22rpx;
+		border-radius: 15px;
+		margin: 3px;
+	}
+
+	.tag-bule {
+		background: #EBEEFA;
+		color: #5C76DF;
+	}
+
+	.tag-green {
+		background: #C6F7BC;
+		color: #065112;
+	}
+
+	.tag-yellow {
+		background: #F9F2EA;
+		color: #BE9C69;
+	}
+
+	.tag-red {
+		background: #FEECE6;
+		color: #FE6430;
+	}
+
+	.introduce-section .title {
+		font-size: 17px;
+		height: 40px;
+		line-height: 40px;
+		flex: 2.5;
+		border-bottom: 1px solid #EEEEEE;
+	}
+
+	.introduce-section .address {
+		color: #878C9C;
+		font-size: 12px;
+		padding: 15px 0 10px;
+	}
+
+	.introduce-section .price {
+		padding: 10px 0 10px;
+		color: #FD714F;
+		font-size: 19px;
+		font-weight: 700;
+	}
+
+	/* 销售信息 */
+	.introduce-section {
+		background: #fff;
+		padding: 0upx 30upx 20upx;
+		margin: 10px;
+		border-radius: 4px;
+
+		.guess-item {
+			padding-bottom: 20upx;
+			border-bottom: 1px solid #ccc;
+		}
+
+		.title-tip {
+			flex: 1;
+		}
+
+		.price-box {
+			display: flex;
+			align-items: baseline;
+			height: 70upx;
+			padding: 10upx 0;
+			font-size: 26upx;
+			color: $uni-color-primary;
+		}
+
+		.price {
+			font-size: $font-lg + 2upx;
+		}
+
+		.m-price {
+			margin: 0 12upx;
+			color: $font-color-light;
+			text-decoration: line-through;
+		}
+
+		.coupon-tip {
+			align-items: center;
+			padding: 4upx 10upx;
+			background: $uni-color-primary;
+			font-size: $font-sm;
+			color: #fff;
+			border-radius: 6upx;
+			line-height: 1;
+			transform: translateY(-4upx);
+		}
+
+		.bot-row {
+			display: flex;
+			align-items: center;
+			height: 50upx;
+			font-size: $font-sm;
+			color: $font-color-light;
+
+			view {
+				flex: 1;
+			}
+		}
+	}
+
+	.side-bg {
+		position: absolute;
+		width: 64px;
+		height: 64px;
+		z-index: 1;
+	}
+
+	.drag {
+		position: relative;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		color: $uni-text-color-inverse;
+		width: 64px;
+		height: 64px;
+		background: transparent;
+		font-size: $uni-font-size-sm;
+		position: fixed;
+		z-index: 9;
+
+		&.transition {
+			transition: left .3s ease, top .3s ease;
+		}
+	}
+	.number-style{
+		font-size: 44rpx;
+	}
+</style>