jiangchengfeiyi-xiaochengxu/pages/workshop/searchGood/searchGood.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">
	      <image
	        class="image"
	        :src="workshopUrl + '/searchGood/search.png'"
	      />
	      <input confirm-type="search" @confirm="search" class="ml-5" placeholder="搜索商品" v-model="keyword"/>
	    </view>
	    <!-- <view class="flex-col justify-start items-center text-wrapper ml-9" @click="search"><text class="font text_2">搜索</text></view> -->
	  </view>
	</view>
</template>
 
<script setup>
	import {ref} from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	import { getFonts } from '../../../common/globalFont';
	import { workshopUrl } from '../../../common/globalImagesUrl';
	const bkgUrl = ref(workshopUrl + '/searchGood/bkg.png')
	const type = ref('')
	const goodList = ref([])
	onLoad((options) => {
		getFonts()
		type.value = options.type
	})
	
	const keyword = ref('')
	const search = () => {
		if (keyword.value === null || keyword.value === undefined || keyword.value === '') {
			uni.showToast({
				title: '请输入内容',
				icon: 'error'
			})
			return ;
		}
		uni.navigateTo({
			url: '../../workshop/searchResult/searchResult?type=' + type.value + '&keyword=' + keyword.value
		})
	}
	
	
	
	
	
	
</script>

<style scoped lang="scss">
.ml-5 {
  margin-left: 9.38rpx;
}
.ml-9 {
  margin-left: 16.88rpx;
}
.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;
}
.section_2 {
  padding: 24.38rpx 63.75rpx 18.75rpx 84.38rpx;
  background-color: #fbdedf;
}
.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.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;
}
@import url(../../../common/css/global.css);
</style>