我的模版

pages/my/index.vue

@@ -1,121 +1,45 @@
 <template>
-	<view>
-		<!-- 	<view class="map_container">
-			<map class="map" ref="map" :longitude="longitude" :latitude="latitude" scale="14" show-location="true"
-				:markers="markers" @click="markertap"></map>
-		</view>
-		<view class="mapText">
-			{{address}}
-		</view> -->
-		<view class="search-box" @click="openChooseLocation">
+	<view class="content">
+		<view style="height: 190px;background-color: bisque;"></view>
+		<!-- leftTitle:标题  icon：左边图标 @click：点击事件  -->
+		<cc-wxMenuBtn leftTitle="我的报名" icon="../../static/image/add.png" @click="goFunctionClick(0)"></cc-wxMenuBtn>
+		<cc-wxMenuBtn leftTitle="我的交易" icon="../../static/image/add.png" @click="goFunctionClick(1)"></cc-wxMenuBtn>
+		<cc-wxMenuBtn leftTitle="我的兑换" icon="../../static/image/add.png" @click="goFunctionClick(1)"></cc-wxMenuBtn>
+		<cc-wxMenuBtn leftTitle="我的资料" icon="../../static/image/add.png" @click="goFunctionClick(3)"></cc-wxMenuBtn>
 
-			qqqqq1
-
-		</view>
 	</view>
 
 </template>
 
 <script>
-	import {
-		onPullDownRefresh,
-		onReachBottom
-	} from "@dcloudio/uni-app"
-
-	import amapFile from "@/libs/amap-wx.130.js";
-	import config from "../../config.js";
-
 	export default {
 		data() {
 			return {
-				myAmapFunT: '',
-				startPoint: {
-					latitude: 43.834931,
-					longitude: 125.289036
-				}
+
 			}
 
 		},
 		computed: {},
 		onLoad: function(options) {
-			this.myAmapFunT = new amapFile.AMapWX({
-				key: config.gaodeKey
-			})
-			setTimeout(function() {
-				console.log('start pulldown');
-			}, 1000);
-			uni.startPullDownRefresh();
-		},
-		onPullDownRefresh() {
-			console.log('refresh');
-			setTimeout(function() {
-				console.log('stop pulldown');
-				uni.stopPullDownRefresh();
-			}, 1000);
+
 		},
 		methods: {
-			openChooseLocation(opt) {
-				let that = this
-				uni.chooseLocation({
-					latitude: opt?.latitude || that.startPoint.latitude,
-					longitude: opt?.longitude || that.startPoint.longitude,
-					success: function(res) {
-						console.log(res)
-						console.log('位置名称：' + res.name);
-						console.log('详细地址：' + res.address);
-						console.log('纬度：' + res.latitude);
-						console.log('经度：' + res.longitude);
-						if (!res.name) {
-							return uni.showToast({
-								title: '请重新选择位置',
-								icon: 'none'
-							});
-						}
-
-					},
-					fail: function(info) { //失败回调
-						console.log('调取失败')
-						console.log(info)
-					},
+			goFunctionClick(flag) {
 
+				console.log("点击的功能菜单 = " + flag);
+				uni.showModal({
+					title: '温馨提示',
+					content: '我点击的是第' + (flag + 1) + '个功能菜单'
 				})
-			},
+			}
 
 		}
 	}
 </script>
 <style scoped>
-	.map_container {
-		position: absolute;
-		top: 20px;
-		bottom: 0;
-		left: 0;
-		right: 0;
-	}
-
-	.map {
-		width: 100%;
-		height: 100%;
-	}
-
-	.mapText {
-		position: absolute;
-		left: 0;
-		right: 0;
-		top: 0px;
-		height: 20px;
-		background: #fff;
-		padding: 0 15px;
-	}
-
-	text {
-		margin: 5px 0;
-		display: block;
-		font-size: 12px;
-	}
+	.content {
+		display: flex;
+		flex-direction: column;
 
-	.h1 {
-		margin: 15px 0;
-		font-size: 15px;
 	}
 </style>

uni_modules/cc-wxMenuBtn/changelog.md

@@ -0,0 +1,4 @@
+## 2.0.1（2023-06-21）
+组件优化
+## 2.0.0（2023-06-21）
+组件优化

uni_modules/cc-wxMenuBtn/components/cc-wxMenuBtn/cc-wxMenuBtn.vue

@@ -0,0 +1,88 @@
+<template>
+	<view>
+		<view class="inputView" @click="goClick">
+			<image class="iconImg" mode="aspectFill" :src="icon"></image>
+
+			<text class="leftTitle">{{leftTitle}}</text>
+
+			<image class="arrowImg" mode="aspectFit" src="./arrow_right.png"></image>
+		</view>
+		<view class="lineV"></view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+
+		props: {
+			// 左边标题栏
+			leftTitle: {
+				type: String,
+				default: ""
+			},
+			// 左边图标
+			icon: {
+				type: String,
+				default: ""
+			},
+
+
+		},
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			goClick(e) {
+
+
+				this.$emit("click", e);
+
+			},
+
+		}
+
+	}
+</script>
+
+<style scoped>
+	.inputView {
+		display: flex;
+		flex-direction: row;
+		height: 50px;
+		align-items: center;
+		width: 100%;
+		background-color: white;
+	}
+
+	.iconImg {
+
+		margin: 0px 16px;
+		width: 24px;
+		height: 24px;
+	}
+
+	.leftTitle {
+
+		width: calc(100vw - 96px);
+		font-size: 15px;
+
+	}
+
+	.arrowImg {
+
+		width: 20px;
+		height: 20px;
+	}
+
+	.lineV {
+		width: 90%;
+		height: 1px;
+		margin-left: 5%;
+		background-color: #f6f6f6;
+
+
+	}
+</style>

uni_modules/cc-wxMenuBtn/package.json

@@ -0,0 +1,85 @@
+{
+  "id": "cc-wxMenuBtn",
+  "displayName": "仿微信我的列表功能菜单按钮 我的个人中心页面功能菜单",
+  "version": "2.0.1",
+  "description": "仿微信我的列表功能菜单按钮，可用于快速开发我的个人中心页面功能菜单",
+  "keywords": [
+    "我的",
+    "个人中心",
+    "我的页面",
+    "功能菜单",
+    "列表"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.8.0"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        },
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y",
+          "钉钉": "y",
+          "快手": "y",
+          "飞书": "y",
+          "京东": "y"
+        },
+        "快应用": {
+          "华为": "y",
+          "联盟": "y"
+        }
+      }
+    }
+  }
+}

uni_modules/cc-wxMenuBtn/readme.md

@@ -0,0 +1,63 @@
+# cc-wxMenuBtn
+
+
+#### 使用方法 
+```使用方法
+	
+<!-- leftTitle:标题  icon：左边图标 @click：点击事件  -->
+<cc-wxMenuBtn leftTitle="我的报名" icon="../../static/my_enroll.png" @click="goFunctionClick(0)"></cc-wxMenuBtn>
+							
+
+```
+
+#### HTML代码实现部分
+```html
+
+<template>
+	<view class="content">
+		<view style="height: 190px;background-color: bisque;"></view>
+		<!-- leftTitle:标题  icon：左边图标 @click：点击事件  -->
+		<cc-wxMenuBtn leftTitle="我的报名" icon="../../static/my_enroll.png" @click="goFunctionClick(0)"></cc-wxMenuBtn>
+		<cc-wxMenuBtn leftTitle="我的交易" icon="../../static/my_exchange.png" @click="goFunctionClick(1)"></cc-wxMenuBtn>
+		<cc-wxMenuBtn leftTitle="我的兑换" icon="../../static/my_booktrade.png" @click="goFunctionClick(1)"></cc-wxMenuBtn>
+		<cc-wxMenuBtn leftTitle="我的资料" icon="../../static/my_info.png" @click="goFunctionClick(3)"></cc-wxMenuBtn>
+	
+	</view>
+</template>
+
+<script>
+	
+	
+	export default {
+		
+		data() {
+			return {
+				title: 'Hello'
+			}
+		},
+		
+		methods: {
+            goFunctionClick(flag){
+				
+				console.log("点击的功能菜单 = " + flag);
+				uni.showModal({
+					title:'温馨提示',
+					content:'我点击的是第' + (flag+1) + '个功能菜单'
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	.content {
+		display: flex;
+		flex-direction: column;
+	
+	}
+
+</style>
+
+
+
+```