feat(mixins): 提取可复用的反馈、记录和溯源逻辑到 mixins- 创建 feedbackMixin.js，包含反馈表单的通用逻辑和验证规则

- 创建 recordMixin.js，封装记录列表的过滤和数据获取逻辑
- 创建 traceabilityMixin.js，提供溯源信息的通用初始化方法
- 在 cjx 和 lgz 的页面中引入并使用对应的 mixins
- 简化页面组件代码，移除重复的 data 和 methods 定义- 保留页面特定逻辑，通过调用 mixin 方法实现功能复用

mixins/feedbackMixin.js

@@ -0,0 +1,103 @@
+// feedbackMixin.js - 可复用的反馈表单逻辑
+export default {
+    data() {
+        return {
+            scanCode: '',
+            filterStatus: '2',
+            filterOptions: [{
+                    label: '意见反馈',
+                    value: '1'
+                },
+                {
+                    label: '留言评价',
+                    value: '2'
+                }
+            ],
+            model1: {
+                userInfo: {
+                    qrCode: '',
+                    type: '',
+                    liuyan: '',
+                    tel: '',
+                    mail: '',
+                    name: ''
+                },
+            },
+            rules: {
+                'userInfo.name': {
+                    type: 'string',
+                    required: true,
+                    message: '请填写姓名',
+                    trigger: ['blur', 'change']
+                },
+                'userInfo.tel': [{
+                        required: true,
+                        message: '请输入手机号',
+                        trigger: ['change', 'blur'],
+                    },
+                    {
+                        // 自定义验证函数，见上说明
+                        validator: (rule, value, callback) => {
+                            console.log(value);
+                            // 上面有说，返回true表示校验通过，返回false表示不通过
+                            // uni.$u.test.mobile()就是返回true或者false的
+                            return uni.$u.test.mobile(value);
+                        },
+                        message: '手机号码不正确',
+                        // 触发器可以同时用blur和change
+                        trigger: ['change', 'blur'],
+                    }
+                ],
+            },
+        }
+    },
+    onReady() { // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
+        this.$refs.uForm.setRules(this.rules)
+    },
+    onLoad() {
+        this.scanCode = uni.getStorageSync('scanCode');
+        this.model1.userInfo.qrCode     = this.scanCode;
+    },
+    methods: {
+        baseOpenDetail(url) {
+            uni.navigateTo({
+                url: '/pages/'+url+'/index/rules'
+            });
+        },
+        baseGoBack() {
+            uni.navigateBack();
+        },
+        baseOnFilterChange(val) {
+            if (this.filterStatus !== val) {
+                this.filterStatus = val;
+            }
+        },
+        baseSaveData(apiFunction, successCallback) {
+            let that = this;
+            this.model1.userInfo.type = this.filterStatus;
+            this.$refs.uForm.validate().then(res => {
+                apiFunction(that.model1.userInfo).then(data => {
+                    this.model1.userInfo.liuyan = '';
+                    this.model1.userInfo.tel = '';
+                    this.model1.userInfo.mail = '';
+                    this.model1.userInfo.name = '';
+                    let params = {
+                        type: "success",
+                        title: "成功主题(带图标)",
+                        message: "提交成功",
+                        iconUrl: "https://uviewui.com/demo/toast/success.png",
+                    }
+                    this.$refs.uToast.show({
+                        ...params
+                    });
+                    
+                    if (successCallback && typeof successCallback === 'function') {
+                        successCallback(data);
+                    }
+                })
+            }).catch(errors => {
+
+            })
+        }
+    }
+}

mixins/recordMixin.js

@@ -0,0 +1,61 @@
+// mixins/recordMixin.js
+export default {
+    data() {
+        return {
+            scanCode: '',
+            filterStatus: '0',
+            list: [],
+            filterOptions: [{
+                label: '全部',
+                value: '0'
+            },
+                {
+                    label: '未发放',
+                    value: '2'
+                },
+                {
+                    label: '已发放',
+                    value: '1'
+                }
+            ]
+        }
+    },
+    onLoad() {
+        this.scanCode = uni.getStorageSync('scanCode');
+        // 不再直接调用 initGetlist，让组件自己决定何时调用
+    },
+    methods: {
+
+        toggleDetail(index) {
+            // 切换点击项的详情显示状态
+            if (this.list[index].detailVisible == undefined) {
+                this.list[index].detailVisible = false
+            }
+            this.list[index].detailVisible = !this.list[index].detailVisible;
+            this.$forceUpdate();
+        },
+        goBack() {
+            uni.navigateBack();
+        },
+        onFilterChange(val) {
+            if (this.filterStatus !== val) {
+                this.filterStatus = val;
+            }
+            // 修改这里，调用 baseInitGetlist 而不是 initGetlist
+            this.baseInitGetlist();
+        },
+        // 通用的获取列表方法，接受 API 函数和回调函数作为参数
+        baseInitGetlist(apiFunction, successCallback) {
+            apiFunction(this.scanCode, this.filterStatus).then(res => {
+                if (res.code == 0) {
+                    this.list = res.data;
+
+                    // 执行回调函数
+                    if (successCallback && typeof successCallback === 'function') {
+                        successCallback(res);
+                    }
+                }
+            })
+        }
+    }
+}

mixins/traceabilityMixin.js

@@ -0,0 +1,36 @@
+// mixins/traceabilityMixin.js
+export default {
+    data() {
+        return {
+            scanCode: '',
+            info: {}
+        }
+    },
+    onLoad() {
+        this.scanCode = uni.getStorageSync('scanCode');
+        // 在 onLoad 中不直接调用 initData，而是在组件中手动调用
+    },
+    methods: {
+        goBack() {
+            uni.navigateBack();
+        },
+        // 通用的数据初始化方法，接受 API 函数和回调函数作为参数
+        initData(apiFunction, successCallback) {
+            apiFunction(this.scanCode).then(res => {
+                console.log(res)
+                if (res.code == 0) {
+                    this.info = res.data.info;
+                    // 如果有 create_time 字段，则格式化时间
+                    if (this.info.create_time) {
+                        this.info.formatted_time = this.info.create_time.split(' ')[0];
+                    }
+
+                    // 执行回调函数
+                    if (successCallback && typeof successCallback === 'function') {
+                        successCallback(res);
+                    }
+                }
+            })
+        }
+    }
+}

pages/cjx/feedback/feedback.vue

@@ -80,110 +80,32 @@
 </template>
 
 <script>
-	import {
-		feed
-	} from '@/api/scan'
-	export default {
-		data() {
-			return {
-				scanCode: '',
-				filterStatus: '2',
-				filterOptions: [{
-						label: '意见反馈',
-						value: '1'
-					},
-					{
-						label: '留言评价',
-						value: '2'
-					}
-				],
-				model1: {
-					userInfo: {
-						qrCode: '',
-						type: '',
-						liuyan: '',
-						tel: '',
-						mail: '',
-						name: ''
-					},
-				},
-				rules: {
-					'userInfo.name': {
-						type: 'string',
-						required: true,
-						message: '请填写姓名',
-						trigger: ['blur', 'change']
-					},
-					'userInfo.tel': [{
-							required: true,
-							message: '请输入手机号',
-							trigger: ['change', 'blur'],
-						},
-						{
-							// 自定义验证函数，见上说明
-							validator: (rule, value, callback) => {
-								console.log(value);
-								// 上面有说，返回true表示校验通过，返回false表示不通过
-								// uni.$u.test.mobile()就是返回true或者false的
-								return uni.$u.test.mobile(value);
-							},
-							message: '手机号码不正确',
-							// 触发器可以同时用blur和change
-							trigger: ['change', 'blur'],
-						}
-					],
-
-				},
-			}
-		},
-		onReady() { // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
-			this.$refs.uForm.setRules(this.rules)
-		},
-		onLoad() {
-			this.scanCode = uni.getStorageSync('scanCode');
-			this.model1.userInfo.qrCode = this.scanCode;
-		},
-		methods: {
-			openDetail() {
-				uni.navigateTo({
-					url: '/pages/cjx/index/rules'
-				});
-			},
-			goBack() {
-				uni.navigateBack();
-			},
-			onFilterChange(val) {
-				if (this.filterStatus !== val) {
-					this.filterStatus = val;
-				}
-			},
-			saveData() {
-				let that = this;
-				this.model1.userInfo.type = this.filterStatus;
-				this.$refs.uForm.validate().then(res => {
-					feed(that.model1.userInfo).then(data => {
-						this.model1.userInfo.liuyan = '';
-						this.model1.userInfo.tel = '';
-						this.model1.userInfo.mail = '';
-						this.model1.userInfo.name = '';
-						let params = {
-							type: "success",
-							title: "成功主题(带图标)",
-							message: "提交成功",
-							iconUrl: "https://uviewui.com/demo/toast/success.png",
-						}
-						this.$refs.uToast.show({
-							...params
-						});
-					})
-				}).catch(errors => {
-
-				})
-			}
-		}
-	}
+import {
+  feed
+} from '@/api/scan'
+import feedbackMixin from '@/mixins/feedbackMixin.js'
+
+export default {
+  mixins: [feedbackMixin],
+  methods: {
+    saveData() {
+      // 调用 mixin 中的方法，传入特定的 API 函数
+      this.baseSaveData(feed, (data) => {
+        // 可以在这里添加特定的成功回调处理
+      });
+    },
+    goBack() {
+      this.baseGoBack();
+    },
+    openDetail() {
+      this.baseOpenDetail("cjx");
+    },
+    onFilterChange(val) {
+      this.baseOnFilterChange(val);
+    },
+  }
+}
 </script>
-
 <style lang="scss" scoped>
 	@import url('../../../static/scss/common_cjx.css');
 

pages/cjx/record/record.vue

@@ -108,68 +108,33 @@
 </template>
 
 <script>
-	import {
-		scanQuery
-	} from '@/api/scan'
-	export default {
-		data() {
-			return {
-				scanCode: '',
-				filterStatus: '0',
-				list: [],
-				filterOptions: [{
-						label: '全部',
-						value: '0'
-					},
-					{
-						label: '未发放',
-						value: '2'
-					},
-					{
-						label: '已发放',
-						value: '1'
-					}
-				]
-			}
-		},
-		onLoad() {
-			this.scanCode = uni.getStorageSync('scanCode');
-			this.initGetlist();
-		},
-		methods: {
-			openDetail(){
-				uni.navigateTo({
-					url: '/pages/cjx/index/rules'
-				});
-			},
-			toggleDetail(index) {
-				// 切换点击项的详情显示状态
-				if (this.list[index].detailVisible == undefined) {
-					this.list[index].detailVisible = false
-				}
-				this.list[index].detailVisible = !this.list[index].detailVisible;
-				this.$forceUpdate();
-			},
-			goBack() {
-				uni.navigateBack();
-			},
-			onFilterChange(val) {
-				if (this.filterStatus !== val) {
-					this.filterStatus = val;
-				}
-				this.initGetlist();
-			},
-			initGetlist() {
-				scanQuery(this.scanCode, this.filterStatus).then(res => {
-					if (res.code == 0) {
-						this.list = res.data
-					}
-				})
-			}
-		}
-	}
+import {
+  scanQuery
+} from '@/api/scan'
+import recordMixin from '@/mixins/recordMixin.js'
+
+export default {
+  mixins: [recordMixin],
+  onLoad() {
+    this.scanCode = uni.getStorageSync('scanCode');
+    // 调用 mixin 中的通用方法
+    this.baseInitGetlist(scanQuery);
+  },
+  methods: {
+    initGetlist() {
+      // 调用 mixin 中的通用方法
+      this.baseInitGetlist(scanQuery);
+    },
+    openDetail() {
+      uni.navigateTo({
+        url: '/pages/cjx/index/rules'
+      });
+    },
+  }
+}
 </script>
 
+
 <style lang="scss" scoped>
 	@import url('../../../static/scss/common_cjx.css');
 

pages/cjx/traceability/traceability.vue

@@ -118,43 +118,31 @@
 </template>
 
 <script>
-	import {
-		suyuanData
-	} from '@/api/scan'
-	export default {
-		data() {
-			return {
-				scanCode: '',
-				info: {}
-			}
-		},
-		onLoad() {
-			this.scanCode = uni.getStorageSync('scanCode');
-			this.initData();
-		},
-		methods: {
-			goBack() {
-				uni.navigateBack();
-			},
-			initData() {
-				suyuanData(this.scanCode).then(res => {
-					console.log(res)
-					if (res.code == 0) {
-						this.info = res.data.info;
-						this.info.formatted_time = this.info.create_time.split(' ')[0];
-					}
-				})
-			},
-			openDetail(){
-				uni.navigateTo({
-					url: '/pages/cjx/index/rules'
-				});
-			}
+import {
+  suyuanData
+} from '@/api/scan'
+import traceabilityMixin from '@/mixins/traceabilityMixin.js'
 
-		}
-	}
+export default {
+  mixins: [traceabilityMixin],
+  onLoad() {
+    this.scanCode = uni.getStorageSync('scanCode');
+    // 调用 mixin 中的方法
+    this.initData(suyuanData);
+  },
+  methods: {
+    // 不再需要定义 initData 方法，使用 mixin 中的方法
+    openDetail(){
+      uni.navigateTo({
+        url: '/pages/cjx/index/rules'
+      });
+    }
+  }
+}
 </script>
 
+
+
 <style lang="scss" scoped>
 	@import url('../../../static/scss/common_cjx.css');
 

pages/lgz/feedback/feedback.vue

@@ -78,107 +78,32 @@
 </template>
 
 <script>
-	import {
-		feed
-	} from '@/api/scan'
-	export default {
-		data() {
-			return {
-				scanCode: '',
-				filterStatus: '2',
-				filterOptions: [{
-						label: '意见反馈',
-						value: '1'
-					},
-					{
-						label: '留言评价',
-						value: '2'
-					}
-				],
-				model1: {
-					userInfo: {
-						qrCode: '',
-						type: '',
-						liuyan: '',
-						tel: '',
-						mail: '',
-						name: ''
-					},
-				},
-				rules: {
-					'userInfo.name': {
-						type: 'string',
-						required: true,
-						message: '请填写姓名',
-						trigger: ['blur', 'change']
-					},
-          'userInfo.tel':[
-            {
-              required: true,
-              message: '请输入手机号',
-              trigger: ['change','blur'],
-            },
-            {
-              // 自定义验证函数，见上说明
-              validator: (rule, value, callback) => {
-                console.log(value);
-                // 上面有说，返回true表示校验通过，返回false表示不通过
-                // uni.$u.test.mobile()就是返回true或者false的
-                return uni.$u.test.mobile(value);
-              },
-              message: '手机号码不正确',
-              // 触发器可以同时用blur和change
-              trigger: ['change','blur'],
-            }
-          ],
-
-				},
-			}
-		},
-    onReady() { // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
-       this.$refs.uForm.setRules(this.rules)
+import {
+  feed
+} from '@/api/scan'
+import feedbackMixin from '@/mixins/feedbackMixin.js'
+
+export default {
+  mixins: [feedbackMixin],
+  methods: {
+    saveData() {
+      // 调用 mixin 中的方法，传入特定的 API 函数
+      this.baseSaveData(feed, (data) => {
+        // 可以在这里添加特定的成功回调处理
+      });
     },
-		onLoad() {
-			this.scanCode = uni.getStorageSync('scanCode');
-			this.model1.userInfo.qrCode = this.scanCode;
-		},
-		methods: {
-			goBack() {
-				uni.navigateBack();
-			},
-			onFilterChange(val) {
-				if (this.filterStatus !== val) {
-					this.filterStatus = val;
-				}
-			},
-			saveData() {
-				let that = this;
-				this.model1.userInfo.type = this.filterStatus;
-				this.$refs.uForm.validate().then(res => {
-					feed(that.model1.userInfo).then(data => {
-						this.model1.userInfo.liuyan = '';
-						this.model1.userInfo.tel = '';
-						this.model1.userInfo.mail = '';
-						this.model1.userInfo.name = '';
-						let params = {
-							type: "success",
-							title: "成功主题(带图标)",
-							message: "提交成功",
-							iconUrl: "https://uviewui.com/demo/toast/success.png",
-						}
-						this.$refs.uToast.show({
-							...params
-						});
-					})
-				}).catch(errors => {
-
-				})
-			}
-		}
-	}
+    goBack() {
+      this.baseGoBack();
+    },
+    openDetail() {
+      this.baseOpenDetail("lgz");
+    },
+    onFilterChange(val) {
+      this.baseOnFilterChange(val);
+    },
+  }
+}
 </script>
-
-
 <style lang="scss" scoped>
 	@import url('../../../static/scss/common.css');
 

pages/lgz/record/record.vue

@@ -100,61 +100,30 @@
 </template>
 
 <script>
-	import {
-		scanQuery
-	} from '@/api/scan'
-	export default {
-		data() {
-			return {
-				scanCode: '',
-				filterStatus: '0',
-				list: [],
-				filterOptions: [{
-						label: '全部',
-						value: '0'
-					},
-					{
-						label: '未发放',
-						value: '2'
-					},
-					{
-						label: '已发放',
-						value: '1'
-					}
-				]
-			}
-		},
-		onLoad() {
-			this.scanCode = uni.getStorageSync('scanCode');
-			this.initGetlist();
-		},
-		methods: {
-			toggleDetail(index) {
-				// 切换点击项的详情显示状态
-				if(this.list[index].detailVisible == undefined){
-					this.list[index].detailVisible = false
-				}
-				this.list[index].detailVisible = !this.list[index].detailVisible;
-				this.$forceUpdate();
-			},
-			goBack() {
-				uni.navigateBack();
-			},
-			onFilterChange(val) {
-				if (this.filterStatus !== val) {
-					this.filterStatus = val;
-				}
-				this.initGetlist();
-			},
-			initGetlist() {
-				scanQuery(this.scanCode, this.filterStatus).then(res => {
-					if (res.code == 0) {
-						this.list = res.data
-					}
-				})
-			}
-		}
-	}
+import {
+  scanQuery
+} from '@/api/scan'
+import recordMixin from '@/mixins/recordMixin.js'
+
+export default {
+  mixins: [recordMixin],
+  onLoad() {
+    this.scanCode = uni.getStorageSync('scanCode');
+    // 调用 mixin 中的通用方法
+    this.baseInitGetlist(scanQuery);
+  },
+  methods: {
+    initGetlist() {
+      // 调用 mixin 中的通用方法
+      this.baseInitGetlist(scanQuery);
+    },
+    openDetail() {
+      uni.navigateTo({
+        url: '/pages/lgz/index/rules'
+      });
+    },
+  }
+}
 </script>
 
 <style lang="scss" scoped>

pages/lgz/traceability/traceability.vue

@@ -113,38 +113,30 @@
 </template>
 
 <script>
-	import {
-		suyuanData
-	} from '@/api/scan'
-	export default {
-		data() {
-			return {
-				scanCode:'',
-				info:{}
-			}
-		},
-		onLoad() {
-			this.scanCode = uni.getStorageSync('scanCode');
-			this.initData();
-		},
-		methods: {
-			goBack() {
-				uni.navigateBack();
-			},
-			initData(){
-				suyuanData(this.scanCode).then(res => {
-					console.log(res)
-					if (res.code == 0) {
-						this.info = res.data.info;
-						this.info.formatted_time = this.info.create_time.split(' ')[0];
-					}
-				})
-			}
-			
-		}
-	}
+import {
+  suyuanData
+} from '@/api/scan'
+import traceabilityMixin from '@/mixins/traceabilityMixin.js'
+
+export default {
+  mixins: [traceabilityMixin],
+  onLoad() {
+    this.scanCode = uni.getStorageSync('scanCode');
+    // 调用 mixin 中的方法
+    this.initData(suyuanData);
+  },
+  methods: {
+    // 不再需要定义 initData 方法，使用 mixin 中的方法
+    openDetail(){
+      uni.navigateTo({
+        url: '/pages/cjx/index/rules'
+      });
+    }
+  }
+}
 </script>
 
+
 <style lang="scss" scoped>
 	@import url('../../../static/scss/common.css');