jiangchengfeiyi-xiaochengxu/pages/workshop/searchResult/searchResult.vue

<template>
	<view class="flex-col justify-start relative page" :style="{ backgroundImage: 'url(' + bkgUrl + ')' }">
	  <view class="section" :style="{ backgroundImage: 'url(' + bkgUrl + ')' }"></view>
	  <view class="flex-row justify-center section_2 pos">
	    <view class="flex-row items-center section_3" @click="goToSearch">
	      <image
	        class="image"
	        :src="workshopUrl + '/searchResult/search.png'"
	      />
	      <input class="ml-5" placeholder="搜索商品" disabled v-model="keyword"/>
	    </view>
	    <!-- <view class="flex-col justify-start items-center text-wrapper ml-9"><text class="font text_2">搜索</text></view> -->
	  </view>
	  <view class="flex-row grid pos_2">
	    <view class="flex-col grid-item pos_3" v-for="(item, index) in goodList" :key="index" @click="goToGoodDetail(item.id)">
	      <view class="flex-col items-start self-stretch">
	        <image
	          class="image_2"
	          :src="item.goodImg.split(';')[0]"
	        />
	        <text class="font_2 text_3 mt-5">{{ item.name }}</text>
	        <text class="font_3 text_4 mt-5">{{ item.intro.length > 19 ? item.intro.substr(0, 20) + '...' : item.intro }}</text>
	      </view>
	      <text class="self-start font_4 text_5 mt-10 my-pos">￥{{ item.price.toFixed(2) }}</text>
	    </view>
	  </view>
	</view>
</template>

<script setup>
	import {ref, onUnmounted} from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	import { baseUrl } from '../../../api/request';
	import { workshopUrl } from '../../../common/globalImagesUrl';
	import { getFonts } from '../../../common/globalFont';
	const cookie = wx.getStorageSync("cookie")
	const keyword = ref('')
	const type = ref(0)
	const goodList = ref([])
	const bkgUrl = ref(workshopUrl + '/searchResult/bkg.png')
	onLoad((options) => {
		getFonts()
		keyword.value = options.keyword
		type.value = options.type
		if (type.value == 1) {
			getGeneralGood()
		} else {
			getServiceGood()
		}
	})
	
	
	
	const goToSearch = () => {
		uni.redirectTo({
			url: '/pages/workshop/searchGood/searchGood'
		})
	}
	
	
	
	const getGeneralGood = async () => {
		const res = await uni.request({
			url: baseUrl + '/goods/search/general',
			method: 'POST',
			header: {
				cookie
			},
			data: {
				type: keyword.value
			}
		})
		console.log(res)
		goodList.value = res.data.data
	}
	
	
	const getServiceGood = async () => {
		const res = await uni.request({
			url: baseUrl + '/goods/search/service',
			method: 'POST',
			header: {
				cookie
			},
			data: {
				type: keyword.value
			}
		})
		console.log(res)
		goodList.value = res.data.data
	}
	
	
	const goToGoodDetail = (val) => {
		if (type.value == 1){
			uni.navigateTo({
				url: '../../store-home/ProductDetails/ProductDetails?gid=' + JSON.stringify(val)
			})				
		} else {
			uni.navigateTo({
				url: '../../workshop/productmain/productmain?info=' + JSON.stringify(val)
			})
		}
	}
	
	
	const routerJump = (val) => {
		let pages = getCurrentPages();
		var num = pages.length
		if (num == 1) return ;
		console.log(pages)
			//当前页面栈总数
		var backnum = num 
		for( var i = 0; i < num; i ++ ) {
			//循环找到指定页面路由所在的页数
			if(pages[i].route == val){
			//'pages/mypage/mypage'替换成A页面的路由地址
				backnum = num - i - 1
				//计算返回的层数，总数-指定页面页数-1
			}		
		}
		uni.navigateBack({
			delta:backnum
			//返回的页面数，如果 delta 大于现有页面数，则返回到首页。
		})
	}
	
	onUnmounted(() => {
		if (type.value == 1) {
			routerJump('pages/store-home/main/testMain')
		} else {
			routerJump('pages/workshop/index/index')
		}
	})
	
	
	
</script>

<style scoped lang="scss">

	
.ml-5 {
  margin-left: 9.38rpx;
}
.ml-9 {
  margin-left: 16.88rpx;
}
.mt-5 {
  margin-top: 9.38rpx;
}
.page {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
}
.section {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 750rpx;
  padding-bottom: 40rpx;
  // height: 1653.75rpx;
  // height: 100%;
}
.section_2 {
  padding: 24.38rpx 63.75rpx 18.75rpx 84.38rpx;
  background-color: #fbdedf;
}
.pos {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
}
.section_3 {
  padding: 5.63rpx 13.13rpx 3.75rpx;
  background-color: #ffffff;
  border-radius: 9.38rpx;
  width: 561.25rpx;
  height: 60rpx;
}
.image {
  width: 46.88rpx;
  height: 50.63rpx;
}
.font {
  font-size: 24.38rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 22.95rpx;
}
.text-wrapper {
  padding: 15.64rpx 0 17.66rpx;
  background-color: #e79ea1;
  border-radius: 9.38rpx;
  width: 123.75rpx;
  height: 56.25rpx;
}
.text_2 {
  color: #ffffff;
}
.grid {
 	margin: 0 auto; 
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
 	grid-template-rows: repeat(2, 1fr);
 	row-gap: 20rpx; 
 	column-gap: 20rpx;
	padding-bottom: 40rpx;
}
.pos_2 {
  position: absolute;
  left: 26.25rpx;
  right: 26.27rpx;
  top: 129.38rpx;
  // margin: 129.38rpx 26.27rpx 40rpx 26.25rpx;
}
.grid-item {
  padding-bottom: 62.34rpx;
  background-color: #ffffff;
  border-radius: 18.75rpx;
}
.pos_3 {
	position: relative;
  // position: absolute;
  // left: 0;
  // top: 0;
}
.my-pos {
	position: absolute;
	left: 0; 
	bottom: 20rpx;
}
.image_2 {
  border-radius: 18.75rpx 18.75rpx 0rpx 0rpx;
  // width: 337.5rpx;
  width: 100%;
  height: 301.88rpx;
}
.font_2 {
  font-size: 30rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 30rpx;
  color: #000000;
}
.text_3 {
  margin-left: 17.7rpx;
  line-height: 29.64rpx;
}
.font_3 {
  font-size: 24.38rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 30rpx;
  color: #8a8a8a;
}
.text_4 {
  margin-left: 17.83rpx;
  width: 268.13rpx;
}
.font_4 {
  font-size: 30rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 20.04rpx;
  color: #fb1212;
}
.text_5 {
  margin-left: 24.49rpx;
}
@import url(../../../common/css/global.css);
</style>