From 64b432916af9c9218ab3f3eca614e26c542142ae Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期二, 07 十一月 2023 15:47:13 +0800
Subject: [PATCH] bug
---
minipro_standard/components/Search.vue | 184 ++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 184 insertions(+), 0 deletions(-)
diff --git a/minipro_standard/components/Search.vue b/minipro_standard/components/Search.vue
new file mode 100644
index 0000000..efac752
--- /dev/null
+++ b/minipro_standard/components/Search.vue
@@ -0,0 +1,184 @@
+<template>
+ <view class="search">
+ <view class="search_box">
+ <view class="search_input">
+ <image src="@/static/ic_search@2x.png" alt="">
+ <input v-model="text" @confirm="searchInput()" type="text" :placeholder="placeholder" />
+ </view>
+ <view class="search_operation" v-if="isShow">
+ <view class="search_operation_w"></view>
+ <image @click="openCate()" src="@/static/filter@2x.png" mode="widthFix">
+ </view>
+ </view>
+ <u-popup closeOnClickOverlay :show="open" @close="open=false" :round="10" mode="bottom">
+ <scroll-view scroll-y class="content">
+ <slot name="content"></slot>
+ </scroll-view>
+ <view class="zhanwei"></view>
+ <view class="footer">
+ <view class="footer_close" @click="closes">閲嶇疆</view>
+ <view class="footer_submit" @click="submit">纭畾</view>
+ </view>
+ </u-popup>
+ </view>
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+ text: '',
+ open: false
+ };
+ },
+ props: {
+ isShow: Boolean,
+ placeholder: String
+ },
+ methods: {
+ // 鎼滅储妗嗘悳绱�
+ searchInput() {
+ this.$emit('searchInput', this.text)
+ },
+ // 鎵撳紑寮圭獥
+ openCate() {
+ this.open = true
+ },
+ // 閲嶇疆
+ closes() {
+ this.open = false
+ this.text = ''
+ this.$emit('reset', this.text)
+ },
+ // 鎼滅储鎻愪氦
+ submit() {
+ this.open = false
+ this.$emit('submit')
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ .search {
+ width: 100%;
+ height: 68rpx;
+ display: flex;
+ align-items: center;
+ .zhanwei {
+ width: 100%;
+ height: calc(88rpx + 30rpx);
+ background: #ffffff;
+ }
+ .content {
+ padding: 30rpx 30rpx 0 30rpx;
+ width: 100%;
+ height: 800rpx;
+ box-sizing: border-box;
+ }
+ .footer {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-left: 40rpx;
+ padding-right: 40rpx;
+ padding-bottom: env(safe-area-inset-bottom);
+ box-sizing: border-box;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ background: #ffffff;
+ z-index: 99;
+ .footer_close {
+ flex: 1;
+ padding: 28rpx 0;
+ height: 88rpx;
+ box-sizing: border-box;
+ margin-right: 22rpx;
+ font-size: 32rpx;
+ font-weight: 500;
+ color: #999999;
+ background: #F7F7F7;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ .footer_submit {
+ flex: 1;
+ height: 88rpx;
+ padding: 28rpx 0;
+ box-sizing: border-box;
+ font-size: 32rpx;
+ font-weight: 500;
+ color: #ffffff;
+ background: $nav-color;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ .search_box {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ .search_input {
+ flex: 1;
+ height: 100%;
+ background: #F7F7F7;
+ border-radius: 8rpx;
+ display: flex;
+ align-items: center;
+ padding: 15rpx 30rpx;
+ box-sizing: border-box;
+ image {
+ width: 28rpx;
+ height: 28rpx;
+ margin-right: 10rpx;
+ }
+ input {
+ width: 100%;
+ border: none;
+ outline: none;
+ background: #F7F7F7;
+ font-size: 26rpx;
+ }
+ input::-webkit-input-placeholder { /* WebKit browsers */
+ font-size: 26rpx;
+ font-weight: 400;
+ color: #B2B2B2;
+ }
+ input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+ font-size: 26rpx;
+ font-weight: 400;
+ color: #B2B2B2;
+ }
+ input::-moz-placeholder { /* Mozilla Firefox 19+ */
+ font-size: 26rpx;
+ font-weight: 400;
+ color: #B2B2B2;
+ }
+ input:-ms-input-placeholder { /* Internet Explorer 10+ */
+ font-size: 26rpx;
+ font-weight: 400;
+ color: #B2B2B2;
+ }
+ }
+ .search_operation {
+ flex-shrink: 0;
+ /*width: 150rpx;*/
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ /*margin-left: 30rpx;*/
+ image {
+ width: 44rpx;
+ height: 44rpx;
+ }
+ .search_operation_w {
+ width: 30rpx;
+ }
+ }
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3