code-image-backup-public/lilishop-uniapp
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git synced 2026-08-06 02:47:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 更新多个组件样式和功能以提升用户体验

Browse Source 
- 在 myCollect.vue 中优化收藏页面的布局和样式，增加主题支持
- 在 searchPage.vue 中修复搜索组件的输入值设置逻辑
- 在 coupon/index.vue 中重构优惠券列表的展示逻辑，提升可用性
- 在 m-search-revision.vue 中调整搜索组件的样式和功能，增加清除图标的交互
- 在 pages.json 中禁用下拉刷新功能以改善性能
This commit is contained in:
Yer11214
2026-07-09 16:34:22 +08:00
parent f727e01ef0
commit 41e8cff749
9 changed files with 861 additions and 579 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
components/m-search-revision/m-search-revision.vue
View File

@@ -1,17 +1,23 @@
<template>
<view class="serach">
<view class="left-box" @tap="onClickLeft">
<u-icon name="arrow-left" size="28" color="#666"></u-icon>
</view>
<view class="content" :style="{ 'border-radius': radius + 'px' }">
<!-- HM修改 增加进入输入状态的点击范围 -->
<view class="content-box" :class="{ center: mode === 2 }">
<u-icon name="search" size="32" style="padding:0 15rpx;"></u-icon>
<view class="serach">
<view class="left-box" @tap="onClickLeft">
<u-icon name="arrow-left" size="28rpx" color="#606266"></u-icon>
</view>
<view class="content" :style="{ 'border-radius': radius + 'px' }">
<!-- HM修改 增加进入输入状态的点击范围 -->
<view class="content-box" :class="{ center: mode === 2 }">
<u-icon name="search" size="30rpx" color="#909399" style="padding:0 14rpx;"></u-icon>
<!-- HM修改 增加placeholder input confirm-type confirm-->
<input style="width:100%; " :placeholder="placeholder" placeholder-class="placeholder-color"
@input="inputChange" confirm-type="search" @confirm="triggerConfirm" class="input"
:class="{ center: !active && mode === 2 }" :focus="isFocus" v-model="inputVal" @focus="focus" @blur="blur" />
<u-icon name="close" v-if="showClear && isDelShow" style="padding:0 30rpx;" @click="clear"></u-icon>
<view
class="clear-icon"
v-if="showClear && isDelShow"
@tap.stop.prevent="clear"
>
<u-icon name="close" size="28rpx" color="#909399"></u-icon>
</view>
</view>
</view>
@@ -20,10 +26,10 @@
<div @click="out()">取消</div>
</view>
<view v-else class="button-item">
<u-icon name="grid-fill" size="32" @click="handelListClass()" v-if="!switchLayout"></u-icon>
<u-icon v-else @click="handelListClass()" name="list-dot" size="32"></u-icon>
</view>
<view v-else class="button-item">
<u-icon name="grid-fill" size="32rpx" color="var(--theme-light, #ff6b35)" @click="handelListClass()" v-if="!switchLayout"></u-icon>
<u-icon v-else @click="handelListClass()" name="list-dot" size="32rpx" color="var(--theme-light, #ff6b35)"></u-icon>
</view>
</view>
</view>
</template>
@@ -31,23 +37,25 @@
<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
const props = withDefaults(defineProps<{
mode?: number
placeholder?: string
value?: string
radius?: string
isFocusVal?: boolean
showClear?: boolean
}>(), {
mode: 1,
placeholder: "请输入搜索内容",
value: "",
radius: "60",
isFocusVal: true,
showClear: true,
})
const emit = defineEmits(['confirm', 'input', 'search', 'SwitchType'])
const props = withDefaults(defineProps<{
mode?: number
placeholder?: string
modelValue?: string
value?: string
radius?: string
isFocusVal?: boolean
showClear?: boolean
}>(), {
mode: 1,
placeholder: "请输入搜索内容",
modelValue: "",
value: "",
radius: "60",
isFocusVal: true,
showClear: true,
})
const emit = defineEmits(['confirm', 'input', 'update:modelValue', 'search', 'SwitchType'])
const isShowSeachGoods = ref(false)
const active = ref(false)
@@ -56,9 +64,10 @@ const isDelShow = ref(false)
const isFocus = ref(false)
const switchLayout = ref(true)
onMounted(() => {
isFocus.value = props.isFocusVal
})
onMounted(() => {
isFocus.value = props.isFocusVal
inputVal.value = props.modelValue || props.value || ''
})
//
const out = () => {
@@ -77,12 +86,13 @@ const triggerConfirm = () => {
uni.hideKeyboard()
}
//HM修改 触发组件input事件
const inputChange = (event: any) => {
var keyword = event.detail.value
emit("input", keyword)
if (inputVal.value) {
isDelShow.value = true
}
const inputChange = (event: any) => {
var keyword = event.detail.value
emit("input", keyword)
emit("update:modelValue", keyword)
if (inputVal.value) {
isDelShow.value = true
}
}
const focus = () => {
active.value = true
@@ -97,16 +107,24 @@ const blur = () => {
active.value = false
}
}
const clear = () => {
//HM修改 收起键盘
uni.hideKeyboard()
isFocus.value = false
inputVal.value = ""
active.value = false
//HM修改 清空内容时候触发组件input
emit("input", "")
//this.$emit('search', '');//HM修改 清空内容时候不进行搜索
}
const clear = () => {
//HM修改 收起键盘
uni.hideKeyboard()
isFocus.value = false
inputVal.value = ""
active.value = false
isDelShow.value = false
//HM修改 清空内容时候触发组件input
emit("input", "")
emit("update:modelValue", "")
//this.$emit('search', '');//HM修改 清空内容时候不进行搜索
}
const setInputValue = (value: string) => {
inputVal.value = value || ''
emit("input", inputVal.value)
emit("update:modelValue", inputVal.value)
}
/**
* 回退到上一级
@@ -141,10 +159,23 @@ const search = () => {
/**
* 监听当前是否有值 是否显示清除图标
*/
watch(inputVal, (newVal) => {
newVal ? (isDelShow.value = true) : (isDelShow.value = false)
})
</script>
watch(inputVal, (newVal) => {
newVal ? (isDelShow.value = true) : (isDelShow.value = false)
})
watch(() => props.modelValue, (newVal) => {
if (newVal !== inputVal.value) {
inputVal.value = newVal || ''
}
})
defineExpose({
isShowSeachGoods,
inputVal,
clear,
setInputValue,
})
</script>
<style lang="scss" scoped>
.serach {
@@ -183,20 +214,29 @@ watch(inputVal, (newVal) => {
justify-content: flex-start;
}
.input {
flex: 1;
min-width: 0;
width: auto;
.input {
flex: 1;
min-width: 0;
width: auto;
line-height: 60rpx;
height: 60rpx;
transition: all 0.2s linear;
&.center {
width: auto;
}
}
}
}
}
}
.clear-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 72rpx;
height: 70rpx;
}
}
}
.button {
display: flex;