课程学习页面绘制

.env.development

@@ -9,8 +9,8 @@ ENV = 'development'
 # VITE_APP_BASE_API_Url = 'http://25.64.16.133:9786' 
 
 
-# VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
+VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
 
 app入口
-VITE_APP_BASE_API_Url = 'http://25.18.122.65:7001'
+# VITE_APP_BASE_API_Url = 'http://25.18.122.65:7001'
 

src/api/common.js

@@ -39,6 +39,29 @@ export const uploadFile = (file, data) => {
 	});
 };
 
+// 对象存储下载 /traoss/tras3/show/{文件ID} 
+export function downloadFile(id) {
+    const token = getToken();  
+    const header = {
+			"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
+		};  
+    if (token) 
+        header['summary'] = token
+    let baseUrl = get_base_url();  
+	
+	return new Promise((resolve, reject) => {  
+		uni.downloadFile({  
+			url: `${baseUrl}/traoss/tras3/show/${id}`,  
+			header,  
+			success(result) {  
+				resolve(result)
+			},  
+			fail(error) {    
+				reject(new Error(error));  
+			}  
+		});  
+	});
+}
 
 // 对象存储预览 /traoss/tras3/show/{文件ID} 
 export function previewFile(id, responseType = 'arraybuffer') {
@@ -56,11 +79,7 @@ export function previewFile(id, responseType = 'arraybuffer') {
 			header,  
 			responseType,
 			success(result) {  
-				console.log(result)
+				resolve(result)
-				let _header = result.header['content-type'].split(';')[0]
-				// let base64 = new Blob([result.data],{type:result.header['content-type'].split(';')[0]})
-				let base64 = `data:${_header};base64,` + uni.arrayBufferToBase64(result.data)
-				resolve(base64)
 			},  
 			fail(error) {    
 				reject(new Error(error));  
@@ -87,7 +106,7 @@ export function previewCacheThumbImage(id, width = 30, height = 30) {
 					let base64 = `data:image/png;base64,` + result.data.body
 					resolve(base64)
 				}else{
-					reject(new Error(result.data.message))
+					reject({error:result.data.message})
 				}
 			},  
 			fail(error) {    

src/components/image-preview/image-preview.vue

@@ -48,8 +48,10 @@
 						this.imgUrlShow = res;
 					});
 				}else{
-					previewFile(id).then((res) => {
+					previewFile(id).then((result) => {
-						this.imgUrlShow = res;
+						let _header = result.header['content-type'].split(';')[0]
+						let base64 = `data:${_header};base64,` + uni.arrayBufferToBase64(result.data)
+						this.imgUrlShow = base64;
 					});
 				}
 			},

src/components/image-preview/video-preview.vue

@@ -1,12 +1,13 @@
 <template>
-	<video :src="imgUrlShow" controls></video>
+	<view class="video-view-box">
-	<!-- <image class="img" src="@/static/images/test/1.png"></image> -->
+		<video class="video-cont" v-if="imgUrlShow" :src="imgUrlShow" controls></video>
+	</view>
 </template>
 
 <script>
-	import {previewFile} from'@/api/common.js'
+	import { downloadFile } from'@/api/common.js'
 	export default {
-		name:"image-preview",
+		name:"video-preview",
 		props:{
 			imgId:{
 				default:'',
@@ -28,28 +29,13 @@
 				},
 				immediate: true,
 				deep: true,
-			},
-			imgUrlShow: {
-				handler(newval, oldval) {
-					if (oldval) {
-						URL.revokeObjectURL(oldval);
-					}
-				},
-				immediate: true,
-				deep: true,
 			}
 		},
 		methods: {
 			getPreviewUrlBlob(id) {
-				// this.imgUrlShow = '@/static/images/index/message_b.png'
+				downloadFile(id).then(res=>{
-				previewFile(id).then((res) => {
+					this.imgUrlShow = res.tempFilePath
-					this.imgUrlShow = URL.createObjectURL(res);
+				})
-					// const reader = new FileReader();
-					// reader.readAsDataURL(res)
-					// reader.onloadend = () => {
-					// 	this.imgUrlShow = reader.result;
-					// }
-				});
 			},
 		},
 		mounted() {
@@ -58,12 +44,17 @@
 			}
 			this.watching = true
 		},
-		beforeDestroy() {
-			URL.revokeObjectURL(this.imgUrlShow);
-		},
 	}
 </script>
 
 <style>
-
+	.video-view-box{
+		width: 100%;
+		height: 100%;
+		background-color: #eee;
+	}
+	.video-view-box .video-cont{
+		width: 100%;
+		height: 100%;
+	}
 </style>

src/pages/course/index.vue

@@ -277,6 +277,7 @@ import { onMounted, ref, computed } from 'vue'
 	// 跳转 课程详情
 	const toCourseDetail = (item) => {
 		common.navigateTo('/pages/courseDetail/index?crsNum=' + item.crsNum)
+		// common.navigateTo('/pages/course/study?crsNum=' + item.crsNum)
 	}
 	onMounted(()=>{
 		getCourseTypeListApi().then(res=>{

src/pages/course/study.vue

@@ -1,5 +1,4 @@
 <template>
-
 	<view class="course-study max_page">
 		<view class="top-bg"></view>
 		<view class="bot-bg"></view>
@@ -8,42 +7,160 @@
 				<uv-icon class="arrow-icon" name="arrow-left" @click="common.navigateBack()"/>
 				语言选择，开启学习之旅
 			</view>
+			<!-- <video v-if="videoUrlShow" :src="videoUrlShow" controls></video> -->
 			<view class="voice-list">
-				<view class="voice-item">
+				<uv-radio-group v-model="chooseVoiceId">
-					
+					<view class="voice-item" v-for="item in 5" >
+						<view class="avatar-box">
+							<ImagePreview class="img-box" :imgId="item+''" :isCache="true"></ImagePreview>
+						</view>
+						<view class="right-cont">
+							<view class="right-name">李想</view>
+							<view class="right-desc">描述：产品</view>
+							<view class="audio-box">
+								<view class="talking-gif"></view>
+								<view class="play-btn">
+									<image class="icon" v-if="false" src="@/static/images/course/play.png" style="width: 100%;height: 100%;"></image>
+									<image class="icon" src="@/static/images/course/pause-focus.png" style="width: 100%;height: 100%;"></image>
+								</view>
+								<view class="talking-time">00:26</view>
+							</view>
+						</view>
+						<uv-radio :name="item" class="radio-box"/>
+					</view>
+				</uv-radio-group>
+				<view class="start-btns" @click="step+=1">
+					开启学习之旅
+					<!-- <view class="touch-btn">开启学习之旅</view> -->
 				</view>
 			</view>
 		</view>
-		<view class="course-study-body" v-show="step === 2">
+		<view class="course-study-body" v-show="step === 2" @click="playRecord">
 			<view class="body-title">
 				<uv-icon class="arrow-icon" name="arrow-left" @click="common.navigateBack()"/>
 				课程学习
 			</view>
 			<view class="talking-list">
 				<view class="study-num">1/20</view>
+				{{audioPath}}
 				<TalkingItem class="talking-item" v-for="item in 8" :type="item%2"></TalkingItem>
 			</view>
 			<view class="talk-btns">
-				<view class="touch-btn">按住说话</view>
+				<view 
+					class="touch-btn" 
+					@touchstart="showOverlayTalking"
+					@touchend="hideOverlayTalking"
+					@touchmove="handleMove"
+				>按住说话</view>
 			</view>
 		</view>
+		<uv-overlay :show="showTalkingModel" opacity=".9" @click="showTalkingModel = false">
+			<view class="overlay-box">
+				<view class="circle-bg-box">
+					<view class="icon-box">
+						<image src="/src/static/images/course/talk-icon.png" mode=""></image>
+					</view>
+				</view>
+				<view class="tips-box">松开发送</view>
+				<view class="btns-box">
+					<view :class="['close-btn',isOut?'is-out':'']" >取消
+						<image class="btn-box" v-if="!isOut" src="/src/static/images/course/close.png" mode=""></image>
+						<image class="btn-box" v-else src="/src/static/images/course/close-active.png" mode=""></image>
+					</view>
+					<!-- <view class="translate-btn">转文字 发送
+						<image class="btn-box" src="/src/static/images/course/to-text.png" mode=""></image>
+					</view> -->
+				</view>
+				<!-- <view class="talk-dialog">
+					<view class="voice-gif"></view>
+				</view> -->
+			</view>
+		</uv-overlay>
 	</view>
 </template>
 
 <script setup>
-import { reactive, ref } from 'vue';
+import { reactive, ref, computed, unref, onMounted } from 'vue';
 import { onLoad } from '@dcloudio/uni-app';
+import { previewFile, downloadFile } from "@/api/common.js"
 import common from '@/common/common';
 import TalkingItem from '@/pages/course/components/talkingItem.vue'
+import ImagePreview from '@/components/image-preview/image-preview.vue'
 const crsNum = ref('');
-const step = ref(1)
+const step = ref(2)
+const chooseVoiceId = ref('')
+const videoUrlShow = ref('')
 const getData = async () => {
-	console.log(crsNum.value)
+	// downloadFile('S3F0250181220722025062409312400000331622').then(res=>{
+	// 	console.log(res)
+	// 	audioObj.value = uni.createInnerAudioContext()
+	// 	audioObj.value.src = res.tempFilePath
+	// })
+	// downloadFile('S3F0250640161332025061618052000000267276').then(res=>{
+	// 	videoUrlShow.value = res.tempFilePath
+	// })
 };
 onLoad((params) => {
 	crsNum.value = params.crsNum;
 	getData();
 });
+const showTalkingModel = ref(false)
+// 录音
+const audioPath = ref('')
+const audioObj =  uni.createInnerAudioContext()
+const recordObj =  uni.getRecorderManager()
+const initRecord = () => {
+	unref(recordObj)?.onStop((res)=>{
+		audioPath.value = res.tempFilePath
+	})
+}
+const startRecord = () => {
+	unref(recordObj).start()
+}
+const stopRecord = () => {
+	unref(recordObj).stop()
+}
+const playRecord = () => {
+	audioObj.src = audioPath.value
+	unref(audioObj).play()
+}
+// 录音结束
+
+// 记录 按下移动位置
+const touchX = ref(0)
+const touchY = ref(0)
+const baseY = ref(0)
+const systemInfo = uni.getSystemInfoSync()
+const widowHeight = systemInfo.windowHeight
+// 计算是否超出按下盒子位置
+const isOut = computed(() => {
+	let moveVal = (widowHeight - baseY.value)/165 * 234
+	return (widowHeight - moveVal) > touchY.value
+})
+const showOverlayTalking = (obj) => {
+	showTalkingModel.value = true
+	touchX.value = obj.changedTouches[0].pageX
+	touchY.value = obj.changedTouches[0].pageY
+	baseY.value = obj.currentTarget.offsetTop
+	startRecord()
+}
+const hideOverlayTalking = (obj) => {
+	showTalkingModel.value = false
+	if(isOut.value){
+		console.log('取消发送')
+	}else{
+		console.log('发送')
+		stopRecord()
+	}
+}
+	
+const handleMove = (obj) => {
+	touchX.value = obj.changedTouches[0].pageX
+	touchY.value = obj.changedTouches[0].pageY
+}
+onMounted(()=>{
+	initRecord()
+})
 </script>
 
 <style lang="scss">
@@ -123,8 +240,160 @@ onLoad((params) => {
 			.voice-list{
 				flex:1;
 				overflow-y: auto;
-				padding: 30rpx;
+				padding: 10rpx 40rpx 30rpx;
+				.voice-item{
+					min-height: 246rpx;
+					width: 100%;
+					overflow: hidden;
+					background-color: #fff;
+					border-radius: 16rpx;
+					display: flex;
+					padding: 25rpx;
+					position: relative;
+					&:not(:last-child){
+						margin-bottom: 30rpx;
+					}
+					.avatar-box{
+						width: 160rpx;
+						height: 207rpx;
+						margin-right: 20rpx;
+						background-color: #ccc;
+						.img-box{
+							width: 100%;
+							height: 100%;
+						}
+					}
+					.right-cont{
+						flex:1;
+						.right-name{
+							line-height: 40rpx;
+							font-size: 28rpx;
+							font-weight: 500;
+							margin-bottom: 25rpx;
+						}
+						.right-desc{
+							line-height: 38rpx;
+							font-size: 25rpx;
+							color: #999;
+							margin-bottom: 12rpx;
+						}
+						.audio-box{
+							width: 90%;
+							height: 70rpx;
+							line-height: 70rpx;
+							background-color: #eaf2ff;
+							padding: 15rpx 25rpx;
+							overflow: hidden;
+							.talking-gif{
+								width: 140rpx;
+								height: 40rpx;
+								background-color: #ccc;
+								box-sizing: border-box;
+								float: left;
+							}
+							.talking-time{
+								float: right;
+								text-align: right;
+								line-height: 40rpx;
+								font-size: 23rpx;
+								color: #b1bbd3;
+							}
+							.play-btn{
+								float:right;
+								width: 35rpx;
+								height: 40rpx;
+								padding-top:2rpx;
+								line-height: 35rpx;
+								margin-left: 20rpx;
+							}
+						}
+					}
+					.radio-box{
+						position: absolute;
+						right: 40rpx;
+						top: 40rpx;
+					}
+				}
+				.start-btns{
+					margin-top:20rpx;
+					height: 80rpx;
+					width: 100%;
+					background-color: #06f;
+					color:#fff;
+					text-align: center;
+					line-height: 80rpx;
+				}
 			}
 		}
 	}
+	.overlay-box{
+		display: flex;
+		flex-direction: column-reverse;
+		// justify-content: flex-end;
+		width: 100%;
+		height: 100%;
+		.circle-bg-box{
+			height: 234rpx;
+			background: url(@/static/images/course/talking.png) no-repeat;
+			background-size: cover;
+			position: relative;
+			.icon-box{
+				position: absolute;
+				left:50%;
+				top: 50%;
+				margin-left: -17rpx;
+				margin-top: -24rpx;
+				width: 34rpx;
+				height: 48rpx;
+				image{
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+		.tips-box{
+			height: 40rpx;
+			line-height: 40rpx;
+			color:#c0c0c0;
+			text-align: center;
+			margin: 12rpx 0 24rpx;
+		}
+		.btns-box{
+			height: 270rpx;
+			// padding: 0 120rpx;
+			width: 154rpx;
+			margin: 0 auto 100rpx;
+			overflow: hidden;
+			font-size: 28rpx;
+			text-align: center;
+			line-height: 116rpx;
+			.close-btn{
+				float: left;
+				height: 100%;
+				width: 154rpx;
+				overflow: hidden;
+				color:#999;
+				&.is-out{
+					color:#fff;
+				}
+			}
+			.translate-btn{
+				float: right;
+				height: 100%;
+				width: 154rpx;
+				overflow: hidden;
+				color:#999;
+			}
+			.btn-box{
+				width: 100%;
+				height: 154rpx;
+			}
+		}
+		.talk-dialog{
+			width: 506rpx;
+			height: 234rpx;
+			margin: 0 auto;
+			background-color: #06f;
+		}
+	}
 </style>

src/uni_modules/uv-overlay/changelog.md

@@ -0,0 +1,9 @@
+## 1.0.3（2023-07-02）
+uv-overlay  由于弹出层uv-transition的修改，组件内部做了相应的修改，参数不变。
+## 1.0.2（2023-06-29）
+1. 优化，H5端禁止穿透滚动
+## 1.0.1（2023-05-16）
+1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
+2. 优化部分功能
+## 1.0.0（2023-05-10）
+1. 新增uv-overlay组件

src/uni_modules/uv-overlay/components/uv-overlay/props.js

@@ -0,0 +1,25 @@
+export default {
+	props: {
+		// 是否显示遮罩
+		show: {
+			type: Boolean,
+			default: false
+		},
+		// 层级z-index
+		zIndex: {
+			type: [String, Number],
+			default: 10070
+		},
+		// 遮罩的过渡时间，单位为ms
+		duration: {
+			type: [String, Number],
+			default: 300
+		},
+		// 不透明度值，当做rgba的第四个参数
+		opacity: {
+			type: [String, Number],
+			default: 0.5
+		},
+		...uni.$uv?.props?.overlay
+	}
+}

src/uni_modules/uv-overlay/components/uv-overlay/uv-overlay.vue

@@ -0,0 +1,85 @@
+<template>
+	<uv-transition
+	  :show="show"
+		mode="fade"
+	  custom-class="uv-overlay"
+	  :duration="duration"
+	  :custom-style="overlayStyle"
+	  @click="clickHandler"
+		@touchmove.stop.prevent="clear"
+	>
+		<slot />
+	</uv-transition>
+</template>
+
+<script>
+	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
+	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
+	import props from './props.js';
+
+	/**
+	 * overlay 遮罩
+	 * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
+	 * @tutorial https://www.uvui.cn/components/overlay.html
+	 * @property {Boolean}			show		是否显示遮罩（默认 false ）
+	 * @property {String | Number}	zIndex		zIndex 层级（默认 10070 ）
+	 * @property {String | Number}	duration	动画时长，单位毫秒（默认 300 ）
+	 * @property {String | Number}	opacity		不透明度值，当做rgba的第四个参数 （默认 0.5 ）
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * @event {Function} click 点击遮罩发送事件
+	 * @example <uv-overlay :show="show" @click="show = false"></uv-overlay>
+	 */
+	export default {
+		name: "uv-overlay",
+		emits: ['click'],
+		mixins: [mpMixin, mixin, props],
+		watch: {
+			show(newVal){
+				// #ifdef H5
+				if(newVal){
+					document.querySelector('body').style.overflow = 'hidden';
+				}else{
+					document.querySelector('body').style.overflow = '';
+				}
+				// #endif
+			}
+		},
+		computed: {
+			overlayStyle() {
+				const style = {
+					position: 'fixed',
+					top: 0,
+					left: 0,
+					right: 0,
+					zIndex: this.zIndex,
+					bottom: 0,
+					'background-color': `rgba(0, 0, 0, ${this.opacity})`
+				}
+				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
+			}
+		},
+		methods: {
+			clickHandler() {
+				this.$emit('click')
+			},
+			clear() {}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+/* #ifndef APP-NVUE */
+$uv-overlay-top:0 !default;
+$uv-overlay-left:0 !default;
+$uv-overlay-width:100% !default;
+$uv-overlay-height:100% !default;
+$uv-overlay-background-color:rgba(0, 0, 0, .7) !default;
+.uv-overlay {
+	position: fixed;
+	top:$uv-overlay-top;
+	left:$uv-overlay-left;
+	width: $uv-overlay-width;
+	height:$uv-overlay-height;
+	background-color:$uv-overlay-background-color;
+}
+/* #endif */
+</style>

src/uni_modules/uv-overlay/package.json

@@ -0,0 +1,88 @@
+{
+  "id": "uv-overlay",
+  "displayName": "uv-overlay 遮罩层  全面兼容小程序、nvue、vue2、vue3等多端",
+  "version": "1.0.3",
+  "description": "uv-overlay 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景，uv-popup、uv-toast、uv-tooltip等组件就是用了该组件。",
+  "keywords": [
+    "uv-overlay",
+    "uvui",
+    "uv-ui",
+    "overlay",
+    "遮罩层"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+    	"ads": "无",
+    	"data": "插件不采集任何数据",
+    	"permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uv-ui-tools",
+			"uv-transition"
+		],
+    "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",
+					"钉钉": "u",
+					"快手": "u",
+					"飞书": "u",
+					"京东": "u"
+				},
+				"快应用": {
+					"华为": "u",
+					"联盟": "u"
+				}
+			}
+		}
+  }
+}

src/uni_modules/uv-overlay/readme.md

@@ -0,0 +1,11 @@
+## Overlay 遮罩层
+
+> **组件名：uv-overlay**
+
+创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景，uv-popup、uv-toast、uv-tooltip等组件就是用了该组件。
+
+### <a href="https://www.uvui.cn/components/overlay.html" target="_blank">查看文档</a>
+
+### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+#### 如使用过程中有任何问题，或者您对uv-ui有一些好的建议，欢迎加入 uv-ui 交流群：<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>

src/uni_modules/uv-radio/changelog.md

@@ -0,0 +1,31 @@
+## 1.0.13（2023-12-19）
+1. 修复在group设置labelColor不生效的BUG
+## 1.0.12（2023-11-04）
+1. 修复label文字较多不分行的问题
+## 1.0.11（2023-10-11）
+1. 优化：https://gitee.com/climblee/uv-ui/issues/I872VD
+## 1.0.10（2023-09-01）
+1. 修复点击空隙处无效的问题
+2. label支持插槽下可点击
+## 1.0.9（2023-08-27）
+1. 优化
+## 1.0.8（2023-08-26）
+1. 修复v-model 绑定布尔值控制台报警
+## 1.0.7（2023-08-26）
+1. 修复设置 labelSize 属性设置无效的问题：https://gitee.com/climblee/uv-ui/issues/I7W6UN
+## 1.0.6（2023-08-04）
+1. 修复name为数字0时不能选中的BUG
+## 1.0.5（2023-07-13）
+1.  修复  uv-radio设置value属性不生效的BUG 
+## 1.0.4（2023-07-05）
+修复vue3模式下，动态修改v-model绑定的值无效的BUG
+## 1.0.3（2023-06-06）
+1. 修正语法问题
+## 1.0.2（2023-06-06）
+1.  uv-radio-group 兼容自定义样式customStyle,方便通过样式调整整体位置等
+2.  .uv-radio-group--row增加flex-wrap: wrap;允许换行
+## 1.0.1（2023-05-16）
+1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
+2. 优化部分功能
+## 1.0.0（2023-05-10）
+uv-radio 单选框

src/uni_modules/uv-radio/components/uv-radio-group/props.js

@@ -0,0 +1,89 @@
+export default {
+	props: {
+		// 绑定的值
+		value: {
+			type: [String, Number, Boolean],
+			default: ''
+		},
+		modelValue: {
+			type: [String, Number, Boolean],
+			default: ''
+		},
+		// 是否禁用全部radio
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// 形状，circle-圆形，square-方形
+		shape: {
+			type: String,
+			default: 'circle'
+		},
+		// 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值
+		activeColor: {
+			type: String,
+			default: '#2979ff'
+		},
+		// 未选中的颜色
+		inactiveColor: {
+			type: String,
+			default: '#c8c9cc'
+		},
+		// 标识符
+		name: {
+			type: String,
+			default: ''
+		},
+		// 整个组件的尺寸，默认px
+		size: {
+			type: [String, Number],
+			default: 18
+		},
+		// 布局方式，row-横向，column-纵向
+		placement: {
+			type: String,
+			default: 'row'
+		},
+		// label的文本
+		label: {
+			type: [String],
+			default: ''
+		},
+		// label的颜色 （默认 '#303133' ）
+		labelColor: {
+			type: [String],
+			default: '#303133'
+		},
+		// label的字体大小，px单位
+		labelSize: {
+			type: [String, Number],
+			default: 14
+		},
+		// 是否禁止点击文本操作checkbox(默认 false )
+		labelDisabled: {
+			type: Boolean,
+			default: false
+		},
+		// 图标颜色
+		iconColor: {
+			type: String,
+			default: '#fff'
+		},
+		// 图标的大小，单位px
+		iconSize: {
+			type: [String, Number],
+			default: 12
+		},
+		// 竖向配列时，是否显示下划线
+		borderBottom: {
+			type: Boolean,
+			default: false
+		},
+		// 图标与文字的对齐方式
+		iconPlacement: {
+			type: String,
+			default: 'left'
+		},
+		...uni.$uv?.props?.radioGroup
+	}
+}

src/uni_modules/uv-radio/components/uv-radio-group/uv-radio-group.vue

@@ -0,0 +1,115 @@
+<template>
+	<view
+	    class="uv-radio-group"
+	    :class="bemClass"
+			:style="[$uv.addStyle(this.customStyle)]"
+	>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
+	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * radioRroup 单选框父组件
+	 * @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配uv-radio使用
+	 * @tutorial https://www.uvui.cn/components/radio.html
+	 * @property {String | Number | Boolean}	value 			绑定的值
+	 * @property {Boolean}						disabled		是否禁用所有radio（默认 false ）
+	 * @property {String}						shape			外观形状，shape-方形，circle-圆形(默认 circle )
+	 * @property {String}						activeColor		选中时的颜色，应用到所有子Radio组件（默认 '#2979ff' ）
+	 * @property {String}						inactiveColor	未选中的颜色 (默认 '#c8c9cc' )
+	 * @property {String}						name			标识符
+	 * @property {String | Number}				size			组件整体的大小，单位px（默认 18 ）
+	 * @property {String}						placement		布局方式，row-横向，column-纵向 （默认 'row' ）
+	 * @property {String}						label			文本
+	 * @property {String}						labelColor		label的颜色 （默认 '#303133' ）
+	 * @property {String | Number}				labelSize		label的字体大小，px单位 （默认 14 ）
+	 * @property {Boolean}						labelDisabled	是否禁止点击文本操作checkbox(默认 false )
+	 * @property {String}						iconColor		图标颜色 （默认 '#ffffff' ）
+	 * @property {String | Number}				iconSize		图标的大小，单位px （默认 12 ）
+	 * @property {Boolean}						borderBottom	placement为row时，是否显示下边框 （默认 false ）
+	 * @property {String}						iconPlacement	图标与文字的对齐方式 （默认 'left' ）
+     * @property {Object}						customStyle		组件的样式，对象形式
+	 * @event {Function} change 任一个radio状态发生变化时触发
+	 * @example <uv-radio-group v-model="value"></uv-radio-group>
+	 */
+	export default {
+		name: 'uv-radio-group',
+		mixins: [mpMixin, mixin, props],
+		computed: {
+			// 这里computed的变量，都是子组件uv-radio需要用到的，由于头条小程序的兼容性差异，子组件无法实时监听父组件参数的变化
+			// 所以需要手动通知子组件，这里返回一个parentData变量，供watch监听，在其中去通知每一个子组件重新从父组件(uv-radio-group)
+			// 拉取父组件新的变化后的参数
+			parentData() {
+				const value = this.value || this.modelValue;
+				return [value, this.disabled, this.inactiveColor, this.activeColor, this.size, this.labelDisabled, this.shape,
+					this.iconSize, this.borderBottom, this.placement]
+			},
+			bemClass() {
+				// this.bem为一个computed变量，在mixin中
+				return this.bem('radio-group', ['placement'])
+			},
+		},
+		watch: {
+			// 当父组件需要子组件需要共享的参数发生了变化，手动通知子组件
+			parentData() {
+				if (this.children.length) {
+					this.children.map(child => {
+						// 判断子组件(uv-radio)如果有init方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
+						typeof(child.init) === 'function' && child.init()
+					})
+				}
+			},
+		},
+		data() {
+			return {
+
+			}
+		},
+		created() {
+			this.children = []
+		},
+		methods: {
+			// 将其他的radio设置为未选中的状态
+			unCheckedOther(childInstance) {
+				this.children.map(child => {
+					// 所有子radio中，被操作组件实例的checked的值无需修改
+					if (childInstance !== child) {
+						child.checked = false
+					}
+				})
+				const {
+					name
+				} = childInstance
+				// 通过emit事件，设置父组件通过v-model双向绑定的值
+				// #ifdef VUE2
+				this.$emit('input', name)
+				// #endif
+				// #ifdef VUE3
+				this.$emit('update:modelValue',name)
+				// #endif
+				// 发出事件
+				this.$emit('change', name)
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
+	.uv-radio-group {
+		flex: 1;
+
+		&--row {
+			@include flex;
+			flex-wrap: wrap;
+		}
+
+		&--column {
+			@include flex(column);
+		}
+	}
+</style>

src/uni_modules/uv-radio/components/uv-radio/props.js

@@ -0,0 +1,65 @@
+export default {
+	props: {
+		// radio的名称
+		name: {
+			type: [String, Number, Boolean],
+			default: ''
+		},
+		// 形状，square为方形，circle为圆型
+		shape: {
+			type: String,
+			default: ''
+		},
+		// 是否禁用
+		disabled: {
+			type: [String, Boolean],
+			default: ''
+		},
+		// 是否禁止点击提示语选中单选框
+		labelDisabled: {
+			type: [String, Boolean],
+			default: ''
+		},
+		// 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值
+		activeColor: {
+			type: String,
+			default: ''
+		},
+		// 未选中的颜色
+		inactiveColor: {
+			type: String,
+			default: ''
+		},
+		// 图标的大小，单位px
+		iconSize: {
+			type: [String, Number],
+			default: ''
+		},
+		// label的字体大小，px单位
+		labelSize: {
+			type: [String, Number],
+			default: ''
+		},
+		// label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式
+		label: {
+			type: [String, Number, Boolean],
+			default: ''
+		},
+		// 整体的大小
+		size: {
+			type: [String, Number],
+			default: ''
+		},
+		// 图标颜色
+		iconColor: {
+			type: String,
+			default: ''
+		},
+		// label的颜色
+		labelColor: {
+			type: String,
+			default: ''
+		},
+		...uni.$uv?.props?.radio
+	}
+}

src/uni_modules/uv-radio/components/uv-radio/uv-radio.vue

@@ -0,0 +1,348 @@
+<template>
+	<view
+	  class="uv-radio"
+		@tap.stop="wrapperClickHandler"
+	  :style="[radioStyle]"
+	  :class="[`uv-radio-label--${parentData.iconPlacement}`, parentData.borderBottom && parentData.placement === 'column' && 'uv-border-bottom']"
+	>
+		<view
+		  class="uv-radio__icon-wrap"
+		  @tap.stop="iconClickHandler"
+		  :class="iconClasses"
+		  :style="[iconWrapStyle]"
+		>
+			<slot name="icon">
+				<uv-icon
+				  class="uv-radio__icon-wrap__icon"
+				  name="checkbox-mark"
+				  :size="elIconSize"
+				  :color="elIconColor"
+				/>
+			</slot>
+		</view>
+		<view
+			class="uv-radio__label-wrap" 
+			@tap.stop="labelClickHandler">
+			<slot>
+				<text
+					:style="{
+						color: elDisabled ? elInactiveColor : elLabelColor,
+						fontSize: elLabelSize,
+						lineHeight: elLabelSize
+					}"
+				>{{label}}</text>
+			</slot>
+		</view>
+	</view>
+</template>
+<script>
+	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
+	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * radio 单选框
+	 * @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配uv-radio-group使用
+	 * @tutorial https://www.uvui.cn/components/radio.html
+	 * @property {String | Number}	name			radio的名称
+	 * @property {String}			shape			形状，square为方形，circle为圆型
+	 * @property {Boolean}			disabled		是否禁用
+	 * @property {String | Boolean}	labelDisabled	是否禁止点击提示语选中单选框
+	 * @property {String}			activeColor		选中时的颜色，如设置parent的active-color将失效
+	 * @property {String}			inactiveColor	未选中的颜色
+	 * @property {String | Number}	iconSize		图标大小，单位px
+	 * @property {String | Number}	labelSize		label字体大小，单位px
+	 * @property {String | Number}	label			label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式
+	 * @property {String | Number}	size			整体的大小
+	 * @property {String}			iconColor		图标颜色
+	 * @property {String}			labelColor		label的颜色
+	 * @property {Object}			customStyle		组件的样式，对象形式
+	 * 
+	 * @event {Function} change 某个radio状态发生变化时触发(选中状态)
+	 * @example <uv-radio :labelDisabled="false">门掩黄昏，无计留春住</uv-radio>
+	 */
+	export default {
+		name: "uv-radio",
+
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				checked: false,
+				// 当你看到这段代码的时候，
+				// 父组件的默认值，因为头条小程序不支持在computed中使用this.parent.shape的形式
+				// 故只能使用如此方法
+				parentData: {
+					iconSize: 12,
+					labelSize: 14,
+					labelColor: '#303133',
+					labelDisabled: null,
+					disabled: null,
+					shape: null,
+					activeColor: null,
+					inactiveColor: null,
+					size: 18,
+					value: null,
+					modelValue: null,
+					iconColor: null,
+					placement: 'row',
+					borderBottom: false,
+					iconPlacement: 'left'
+				}
+			}
+		},
+		computed: {
+			// 是否禁用，如果父组件uv-raios-group禁用的话，将会忽略子组件的配置
+			elDisabled() {
+				return this.disabled !== '' ? this.disabled : this.parentData.disabled !== null ? this.parentData.disabled : false;
+			},
+			// 是否禁用label点击
+			elLabelDisabled() {
+				return this.labelDisabled !== '' ? this.labelDisabled : this.parentData.labelDisabled !== null ? this.parentData.labelDisabled :
+					false;
+			},
+			// 组件尺寸，对应size的值，默认值为21px
+			elSize() {
+				return this.size ? this.size : (this.parentData.size ? this.parentData.size : 21);
+			},
+			// 组件的勾选图标的尺寸，默认12px
+			elIconSize() {
+				return this.iconSize ? this.iconSize : (this.parentData.iconSize ? this.parentData.iconSize : 12);
+			},
+			// 组件选中激活时的颜色
+			elActiveColor() {
+				return this.activeColor ? this.activeColor : (this.parentData.activeColor ? this.parentData.activeColor : '#2979ff');
+			},
+			// 组件选未中激活时的颜色
+			elInactiveColor() {
+				return this.inactiveColor ? this.inactiveColor : (this.parentData.inactiveColor ? this.parentData.inactiveColor :
+					'#c8c9cc');
+			},
+			// label的颜色
+			elLabelColor() {
+				return this.labelColor ? this.labelColor : (this.parentData.labelColor ? this.parentData.labelColor : '#606266')
+			},
+			// 组件的形状
+			elShape() {
+				return this.shape ? this.shape : (this.parentData.shape ? this.parentData.shape : 'circle');
+			},
+			// label大小
+			elLabelSize() {
+				return this.$uv.addUnit(this.labelSize ? this.labelSize : (this.parentData.labelSize ? this.parentData.labelSize :
+					'15'))
+			},
+			elIconColor() {
+				const iconColor = this.iconColor ? this.iconColor : (this.parentData.iconColor ? this.parentData.iconColor :
+					'#ffffff');
+				// 图标的颜色
+				if (this.elDisabled) {
+					// disabled状态下，已勾选的radio图标改为elInactiveColor
+					return this.checked ? this.elInactiveColor : 'transparent'
+				} else {
+					return this.checked ? iconColor : 'transparent'
+				}
+			},
+			iconClasses() {
+				let classes = []
+				// 组件的形状
+				classes.push('uv-radio__icon-wrap--' + this.elShape)
+				if (this.elDisabled) {
+					classes.push('uv-radio__icon-wrap--disabled')
+				}
+				if (this.checked && this.elDisabled) {
+					classes.push('uv-radio__icon-wrap--disabled--checked')
+				}
+				// 支付宝，头条小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
+				// #ifdef MP-ALIPAY || MP-TOUTIAO
+				classes = classes.join(' ')
+				// #endif
+				return classes
+			},
+			iconWrapStyle() {
+				// radio的整体样式
+				const style = {}
+				style.backgroundColor = this.checked && !this.elDisabled ? this.elActiveColor : '#ffffff'
+				style.borderColor = this.checked && !this.elDisabled ? this.elActiveColor : this.elInactiveColor
+				style.width = this.$uv.addUnit(this.elSize)
+				style.height = this.$uv.addUnit(this.elSize)
+				// 如果是图标在右边的话，移除它的右边距
+				if (this.parentData.iconPlacement === 'right') {
+					style.marginRight = 0
+				}
+				return style
+			},
+			radioStyle() {
+				const style = {}
+				if (this.parentData.borderBottom && this.parentData.placement === 'row') {
+					this.$uv.error('检测到您将borderBottom设置为true，需要同时将uv-radio-group的placement设置为column才有效')
+				}
+				// 当父组件设置了显示下边框并且排列形式为纵向时，给内容和边框之间加上一定间隔
+				if (this.parentData.borderBottom && this.parentData.placement === 'column') {
+					// ios像素密度高，需要多一点的距离
+					style.paddingBottom = this.$uv.os() === 'ios' ? '12px' : '8px'
+				}
+				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
+			}
+		},
+		created() {
+			this.init()
+		},
+		methods: {
+			init() {
+				// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
+				this.updateParentData()
+				if (!this.parent) {
+					this.$uv.error('uv-radio必须搭配uv-radio-group组件使用')
+				}
+				// 设置初始化时，是否默认选中的状态
+				this.$nextTick(()=>{
+					let parentValue = null;
+					// #ifdef VUE2
+					parentValue = this.parentData.value;
+					// #endif
+					// #ifdef VUE3
+					parentValue = this.parentData.modelValue;
+					// #endif
+					this.checked = this.name === parentValue
+				})
+			},
+			updateParentData() {
+				this.getParentData('uv-radio-group')
+			},
+			// 点击图标
+			iconClickHandler(e) {
+				this.preventEvent(e)
+				// 如果整体被禁用，不允许被点击
+				if (!this.elDisabled) {
+					this.setRadioCheckedStatus()
+				}
+			},
+			// 横向两端排列时，点击组件即可触发选中事件
+			wrapperClickHandler(e) {
+				this.parentData.iconPlacement === 'right' && this.iconClickHandler(e)
+			},
+			// 点击label
+			labelClickHandler(e) {
+				this.preventEvent(e)
+				// 如果按钮整体被禁用或者label被禁用，则不允许点击文字修改状态
+				if (!this.elLabelDisabled && !this.elDisabled) {
+					this.setRadioCheckedStatus()
+				}
+			},
+			emitEvent() {
+				// uv-radio的checked不为true时(意味着未选中)，才发出事件，避免多次点击触发事件
+				if (!this.checked) {
+					this.$emit('change', this.name)
+					// 尝试调用uv-form的验证方法，进行一定延迟，否则微信小程序更新可能会不及时
+					this.$nextTick(() => {
+						this.$uv.formValidate(this, 'change')
+					})
+				}
+			},
+			// 改变组件选中状态
+			// 这里的改变的依据是，更改本组件的checked值为true，同时通过父组件遍历所有uv-radio实例
+			// 将本组件外的其他uv-radio的checked都设置为false(都被取消选中状态)，因而只剩下一个为选中状态
+			setRadioCheckedStatus() {
+				this.emitEvent()
+				// 将本组件标记为选中状态
+				this.checked = true
+				typeof this.parent.unCheckedOther === 'function' && this.parent.unCheckedOther(this)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	$show-border: 1;
+	$show-border-bottom: 1;
+	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
+	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
+	@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
+	$uv-radio-label-wrap-padding-right: 6px !default;
+	$uv-radio-wrap-font-size: 20px !default;
+	$uv-radio-wrap-border-width: 1px !default;
+	$uv-radio-wrap-border-color: #c8c9cc !default;
+	$uv-radio-line-height: 0 !default;
+	$uv-radio-circle-border-radius: 100% !default;
+	$uv-radio-square-border-radius: 3px !default;
+	$uv-radio-checked-color: #fff !default;
+	$uv-radio-checked-background-color: red !default;
+	$uv-radio-checked-border-color: #2979ff !default;
+	$uv-radio-disabled-background-color: #ebedf0 !default;
+	$uv-radio-disabled--checked-color: #c8c9cc !default;
+	$uv-radio-label-margin-left: 5px !default;
+	$uv-radio-label-margin-right: 12px !default;
+	$uv-radio-label-color: $uv-content-color !default;
+	$uv-radio-label-font-size: 15px !default;
+	$uv-radio-label-disabled-color: #c8c9cc !default;
+	.uv-radio {
+		/* #ifndef APP-NVUE */
+		@include flex(row);
+		/* #endif */
+		overflow: hidden;
+		flex-direction: row;
+		align-items: center;
+		&-label--left {
+			flex-direction: row
+		}
+		&-label--right {
+			flex-direction: row-reverse;
+			justify-content: space-between
+		}
+		&__icon-wrap {
+			/* #ifndef APP-NVUE */
+			box-sizing: border-box;
+			// nvue下，border-color过渡有问题
+			transition-property: border-color, background-color, color;
+			transition-duration: 0.2s;
+			/* #endif */
+			color: $uv-content-color;
+			@include flex;
+			align-items: center;
+			justify-content: center;
+			color: transparent;
+			text-align: center;
+			font-size: $uv-radio-wrap-font-size;
+			border-width: $uv-radio-wrap-border-width;
+			border-color: $uv-radio-wrap-border-color;
+			border-style: solid;
+			/* #ifdef MP-TOUTIAO */
+			// 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
+			&__icon {
+				line-height: $uv-radio-line-height;
+			}
+			/* #endif */
+			&--circle {
+				border-radius: $uv-radio-circle-border-radius;
+			}
+			&--square {
+				border-radius: $uv-radio-square-border-radius;
+			}
+			&--checked {
+				color: $uv-radio-checked-color;
+				background-color: $uv-radio-checked-background-color;
+				border-color: $uv-radio-checked-border-color;
+			}
+			&--disabled {
+				background-color: $uv-radio-disabled-background-color !important;
+			}
+			&--disabled--checked {
+				color: $uv-radio-disabled--checked-color !important;
+			}
+		}
+		&__label {
+			/* #ifndef APP-NVUE */
+			word-wrap: break-word;
+			/* #endif */
+			margin-left: $uv-radio-label-margin-left;
+			margin-right: $uv-radio-label-margin-right;
+			color: $uv-radio-label-color;
+			font-size: $uv-radio-label-font-size;
+			&--disabled {
+				color: $uv-radio-label-disabled-color;
+			}
+		}
+		&__label-wrap {
+			flex: 1;
+			padding-left: $uv-radio-label-wrap-padding-right;
+		}
+	}
+</style>

src/uni_modules/uv-radio/package.json

@@ -0,0 +1,88 @@
+{
+  "id": "uv-radio",
+  "displayName": "uv-radio 单选框 全面兼容vue3+2、app、h5、小程序等多端",
+  "version": "1.0.13",
+  "description": "uv-radio 单选框用于有一个选择，用户只能选择其中一个的场景。",
+  "keywords": [
+    "uv-radio",
+    "uvui",
+    "uv-ui",
+    "radio",
+    "单选框"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+    	"ads": "无",
+    	"data": "插件不采集任何数据",
+    	"permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uv-ui-tools",
+			"uv-icon"
+		],
+    "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",
+					"钉钉": "u",
+					"快手": "u",
+					"飞书": "u",
+					"京东": "u"
+				},
+				"快应用": {
+					"华为": "u",
+					"联盟": "u"
+				}
+			}
+		}
+  }
+}

src/uni_modules/uv-radio/readme.md

@@ -0,0 +1,19 @@
+## Radio 单选框
+
+> **组件名：uv-radio**
+
+单选框用于有一个选择，用户只能选择其中一个的场景。	
+
+# <a href="https://www.uvui.cn/components/radio.html" target="_blank">查看文档</a>
+
+## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
+
+### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
+
+![image](https://mp-a667b617-c5f1-4a2d-9a54-683a67cff588.cdn.bspapp.com/uv-ui/banner.png)
+
+</a>
+
+#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>