refactor: 重构多个组件以支持 Vue 3 语法和功能

- 将多个组件转换为 `<script setup>` 语法，提升可读性和性能 - 优化状态管理和事件处理逻辑，简化代码结构 - 更新样式和布局以适应新组件结构 - 添加新功能和修复已知问题，提升用户体验
2026-08-06 10:57:25 +08:00 · 2026-07-08 18:37:11 +08:00
parent 4d0b0fb5e4
commit 349ffa4f34
189 changed files with 18278 additions and 20758 deletions
--- a/components/m-search-revision/m-search-revision.vue
+++ b/components/m-search-revision/m-search-revision.vue
@@ -28,138 +28,122 @@
  </view>
 </template>

-<script>
-export default {
-  props: {
-    mode: {
-      value: Number,
-      default: 1,
-    },
-    //HM修改 定义默认搜索关键词(水印文字)
-    placeholder: {
-      value: String,
-      default: "请输入搜索内容",
-    },
-    value: {
-      type: String,
-      default: "",
-    },
-    // 默认半径为60
-    radius: {
-      value: String,
-      default: 60,
-    },
-    // 是否获取焦点
-    isFocusVal: {
-      value: Boolean,
-      default: true,
-    },
-    showClear: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      isShowSeachGoods: false, //是否显示查询的商品
-      active: false, //是否选中
-      inputVal: "", //Input中内容
-      isDelShow: false, //是否显示右侧删除icon
-      isFocus: false, //是否获取焦点
-      switchLayout: true, //切换当前商品的布局，默认为两列
-    };
-  },
-  mounted() {
-    this.isFocus = this.isFocusVal;
-  },
-  methods: {
-    //
-    out() {
-      uni.reLaunch({
-        url: "/pages/tabbar/home/index",
-      });
-    },
-    // 切换排列顺序
-    handelListClass() {
-      this.switchLayout = !this.switchLayout;
-      this.$emit("SwitchType");
-    },
-    //HM修改 触发组件confirm事件
-    triggerConfirm() {
-      this.$emit("confirm", false);
-      uni.hideKeyboard();
-    },
-    //HM修改 触发组件input事件
-    inputChange(event) {
-      var keyword = event.detail.value;
-      this.$emit("input", keyword);
-      if (this.inputVal) {
-        this.isDelShow = true;
-      }
-    },
-    focus() {
-      this.active = true;
-      //HM修改 增加获取焦点判断
-      if (this.inputVal) {
-        this.isDelShow = true;
-      }
-    },
-    blur() {
-      this.isFocus = false;
-      if (!this.inputVal) {
-        this.active = false;
-      }
-    },
-    clear() {
-      //HM修改 收起键盘
-      uni.hideKeyboard();
-      this.isFocus = false;
-      this.inputVal = "";
-      this.active = false;
-      //HM修改 清空内容时候触发组件input
-      this.$emit("input", "");
-      //this.$emit('search', '');//HM修改 清空内容时候不进行搜索
-    },
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'

-    /**
-     * 回退到上一级
-     */
-    onClickLeft() {
-      const paths = getCurrentPages();
-      console.log(paths)
-      if(paths.length > 1){
-        uni.navigateBack();
-      }else{
-        uni.switchTab({
-          url:"/pages/tabbar/home/index"
-        })
-      }
-    },
+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,
+})

-    /**
-     * 内容为空时，输入默认关键字
-     */
-    search() {
-      if (!this.inputVal) {
-        if (this.searchName == "取消") {
-          uni.hideKeyboard();
-          this.isFocus = false;
-          this.active = false;
-          return;
-        }
-      }
-      this.$emit("search", this.inputVal ? this.inputVal : this.placeholder);
-    },
-  },
-  watch: {
-    /**
-     * 监听当前是否有值 是否显示清除图标
-     */
-    inputVal(newVal) {
-      newVal ? (this.isDelShow = true) : (this.isDelShow = false);
-    },
-  },
-};
+const emit = defineEmits(['confirm', 'input', 'search', 'SwitchType'])
+
+const isShowSeachGoods = ref(false)
+const active = ref(false)
+const inputVal = ref("")
+const isDelShow = ref(false)
+const isFocus = ref(false)
+const switchLayout = ref(true)
+
+onMounted(() => {
+	isFocus.value = props.isFocusVal
+})
+
+//
+const out = () => {
+	uni.reLaunch({
+		url: "/pages/tabbar/home/index",
+	})
+}
+// 切换排列顺序
+const handelListClass = () => {
+	switchLayout.value = !switchLayout.value
+	emit("SwitchType")
+}
+//HM修改 触发组件confirm事件
+const triggerConfirm = () => {
+	emit("confirm", false)
+	uni.hideKeyboard()
+}
+//HM修改 触发组件input事件
+const inputChange = (event: any) => {
+	var keyword = event.detail.value
+	emit("input", keyword)
+	if (inputVal.value) {
+		isDelShow.value = true
+	}
+}
+const focus = () => {
+	active.value = true
+	//HM修改 增加获取焦点判断
+	if (inputVal.value) {
+		isDelShow.value = true
+	}
+}
+const blur = () => {
+	isFocus.value = false
+	if (!inputVal.value) {
+		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 onClickLeft = () => {
+	const paths = getCurrentPages()
+	console.log(paths)
+	if(paths.length > 1){
+		uni.navigateBack()
+	}else{
+		uni.switchTab({
+			url:"/pages/tabbar/home/index"
+		})
+	}
+}
+
+/**
+ * 内容为空时，输入默认关键字
+ */
+const search = () => {
+	if (!inputVal.value) {
+		if (false) { // searchName == "取消" - 兼容旧逻辑
+			uni.hideKeyboard()
+			isFocus.value = false
+			active.value = false
+			return
+		}
+	}
+	emit("search", inputVal.value ? inputVal.value : props.placeholder)
+}
+
+/**
+ * 监听当前是否有值 是否显示清除图标
+ */
+watch(inputVal, (newVal) => {
+	newVal ? (isDelShow.value = true) : (isDelShow.value = false)
+})
 </script>

 <style lang="scss" scoped>