Compare commits
	
		
			10 Commits
		
	
	
		
			a2ced17f63
			...
			32005433fc
		
	
	| Author | SHA1 | Date | 
|---|---|---|
|  | 32005433fc | |
|  | ef99e285a0 | |
|  | 46404af692 | |
|  | fa0c482eaf | |
|  | 0707997a16 | |
|  | e194091873 | |
|  | 48c94b0905 | |
|  | 53f129a355 | |
|  | 1e63978d4f | |
|  | 2a38a9d394 | 
							
								
								
									
										3
									
								
								App.vue
								
								
								
								
							
							
						
						
									
										3
									
								
								App.vue
								
								
								
								
							|  | @ -36,11 +36,12 @@ export default { | ||||||
|     }); |     }); | ||||||
| 
 | 
 | ||||||
|     if (!that.vuex_token) { |     if (!that.vuex_token) { | ||||||
|  |       const type = that.vuex_userType || 0; // 0:学生 1:教师 | ||||||
|       this.$u.vuex("vuex_user", ""); |       this.$u.vuex("vuex_user", ""); | ||||||
|       this.$u.vuex("vuex_token", ""); |       this.$u.vuex("vuex_token", ""); | ||||||
|       uni.clearStorage(); |       uni.clearStorage(); | ||||||
|       uni.reLaunch({ |       uni.reLaunch({ | ||||||
|         url: "/pages/login/login/index", |         url: `/pages/login/login/index?type=${type}`, | ||||||
|       }); |       }); | ||||||
|       return; |       return; | ||||||
|     } |     } | ||||||
|  |  | ||||||
|  | @ -2,125 +2,170 @@ | ||||||
| const install = (Vue, vm) => { | const install = (Vue, vm) => { | ||||||
|   // ********
 |   // ********
 | ||||||
|   // 获取教师信息
 |   // 获取教师信息
 | ||||||
|     let getTeacherInfo = (params = {}) => vm.$u.get('api/BasicDataMaintenance/GetTeacher', params); |   let getTeacherInfo = (params = {}) => | ||||||
|  |     vm.$u.get("api/BasicDataMaintenance/GetTeacher", params); | ||||||
| 
 | 
 | ||||||
|     let updateTeacherInfo = (params = {}) => vm.$u.post('api/BasicDataMaintenance/UpdateTeacher', params); |   let updateTeacherInfo = (params = {}) => | ||||||
|  |     vm.$u.post("api/BasicDataMaintenance/UpdateTeacher", params); | ||||||
| 
 | 
 | ||||||
|     let getData = (params = {}) => vm.$u.get('api/BasicDataMaintenance/GetData', params); |   let getData = (params = {}) => | ||||||
|  |     vm.$u.get("api/BasicDataMaintenance/GetData", params); | ||||||
| 
 | 
 | ||||||
|   // 登录
 |   // 登录
 | ||||||
|     let LoginApp = (params = {}) => vm.$u.post('api/Token/LoginApp', params) |   let LoginApp = (params = {}) => vm.$u.post("api/Token/LoginApp", params); | ||||||
|   // 注册
 |   // 注册
 | ||||||
|     let RegisterUser = (params = {}) => vm.$u.post('api/Token/RegisterUser', params); |   let RegisterUser = (params = {}) => | ||||||
|  |     vm.$u.post("api/Token/RegisterUser", params); | ||||||
|   // 基础资料以及保存用户头像
 |   // 基础资料以及保存用户头像
 | ||||||
|     let saveUserInfo = (params = {}) => vm.$u.post('app/User/UploadingFormFileHead', params); |   let saveUserInfo = (params = {}) => | ||||||
|  |     vm.$u.post("app/User/UploadingFormFileHead", params); | ||||||
|   // 更新用户定位信息
 |   // 更新用户定位信息
 | ||||||
|     let upPosition = (params = {}) => vm.$u.post('app/Position/InsertPosition', params); |   let upPosition = (params = {}) => | ||||||
|  |     vm.$u.post("app/Position/InsertPosition", params); | ||||||
|   // 获取用户当前定位信息
 |   // 获取用户当前定位信息
 | ||||||
|     let getPosition = (params = {}) => vm.$u.get('app/Position/GetPositionByUser', { |   let getPosition = (params = {}) => | ||||||
|         userId: vm.vuex_user.id |     vm.$u.get("app/Position/GetPositionByUser", { | ||||||
|  |       userId: vm.vuex_user.id, | ||||||
|     }); |     }); | ||||||
|   // 获取所有学校
 |   // 获取所有学校
 | ||||||
|     let GetAllSchool = (params = {}) => vm.$u.get('app/User/GetSchoolList', params); |   let GetAllSchool = (params = {}) => | ||||||
|  |     vm.$u.get("app/User/GetSchoolList", params); | ||||||
|   //获取首页地图信息
 |   //获取首页地图信息
 | ||||||
|     let HomeMap = (params = {}) => vm.$u.get('/app/User/HomeMap', params); |   let HomeMap = (params = {}) => vm.$u.get("/app/User/HomeMap", params); | ||||||
|   //修改密码
 |   //修改密码
 | ||||||
|     let ChangePassword = (params = {}) => vm.$u.post('app/User/ChangePassword', params); |   let ChangePassword = (params = {}) => | ||||||
|  |     vm.$u.post("app/User/ChangePassword", params); | ||||||
|   //修改密码
 |   //修改密码
 | ||||||
|     let myChangePassword = (params = {}) => vm.$u.post('app/My/ChangePassword', params); |   let myChangePassword = (params = {}) => | ||||||
|  |     vm.$u.post("app/My/ChangePassword", params); | ||||||
|   // 获取搜索页面相关信息
 |   // 获取搜索页面相关信息
 | ||||||
|     let SearchInfo = (params = {}) => vm.$u.get('app/User/SearchRelevant', params); |   let SearchInfo = (params = {}) => | ||||||
|  |     vm.$u.get("app/User/SearchRelevant", params); | ||||||
|   //获取搜索结果页面
 |   //获取搜索结果页面
 | ||||||
|     let getSearch = (params = {}) => vm.$u.get('app/User/GetSearchList', params); |   let getSearch = (params = {}) => vm.$u.get("app/User/GetSearchList", params); | ||||||
|   // 获取用户信息
 |   // 获取用户信息
 | ||||||
|     let getUserInfo = (params = {}) => vm.$u.get('app/User/HomePage', params); |   let getUserInfo = (params = {}) => vm.$u.get("app/User/HomePage", params); | ||||||
|   // 获取校友帮帮列表
 |   // 获取校友帮帮列表
 | ||||||
|     let GetHelpList = (params = {}) => vm.$u.get('app/HelpArticle/GetHelpArticleListByKey', params); |   let GetHelpList = (params = {}) => | ||||||
|  |     vm.$u.get("app/HelpArticle/GetHelpArticleListByKey", params); | ||||||
|   // 获取学校资讯
 |   // 获取学校资讯
 | ||||||
|     let GetSchoolList = (params = {}) => vm.$u.get('app/AlumnRange/AlumnRangeSchool', params); |   let GetSchoolList = (params = {}) => | ||||||
|  |     vm.$u.get("app/AlumnRange/AlumnRangeSchool", params); | ||||||
|   //获取最新的用户信息(更新用户数据)
 |   //获取最新的用户信息(更新用户数据)
 | ||||||
|     let getUser = (params = {}) => vm.$u.get('app/User/GetUser', {userId: vm.vuex_user.id}).then(res => { |   let getUser = (params = {}) => | ||||||
|         vm.$u.get('/app/User/GetUserSchool').then(ress => { |     vm.$u.get("app/User/GetUser", { userId: vm.vuex_user.id }).then((res) => { | ||||||
|  |       vm.$u.get("/app/User/GetUserSchool").then((ress) => { | ||||||
|         // res.isAttestationGLY = ress.isAttestationGLY
 |         // res.isAttestationGLY = ress.isAttestationGLY
 | ||||||
|         // res.isAttestationJZG = ress.isAttestationJZG
 |         // res.isAttestationJZG = ress.isAttestationJZG
 | ||||||
|         // res.isAttestationQY = ress.isAttestationQY
 |         // res.isAttestationQY = ress.isAttestationQY
 | ||||||
|         // res.isAttestationXY = res.isAttestationXY
 |         // res.isAttestationXY = res.isAttestationXY
 | ||||||
|         // res.isAttestationZXS = ress.isAttestationZXS
 |         // res.isAttestationZXS = ress.isAttestationZXS
 | ||||||
|             res.schoolId = ress.items.schoolId |         res.schoolId = ress.items.schoolId; | ||||||
|             vm.$u.vuex('vuex_user', {...res.user,...res.userExtension}) |         vm.$u.vuex("vuex_user", { ...res.user, ...res.userExtension }); | ||||||
|             vm.$u.vuex('vuex_user_hobby', res.lableList) |         vm.$u.vuex("vuex_user_hobby", res.lableList); | ||||||
|         }) |       }); | ||||||
|     }) |     }); | ||||||
|   //获取用户消息列表
 |   //获取用户消息列表
 | ||||||
|     let getcharList = (params = {}) => vm.$u.get('app/Chat/GetUserMessageList', params); |   let getcharList = (params = {}) => | ||||||
|  |     vm.$u.get("app/Chat/GetUserMessageList", params); | ||||||
|   //获取用户获取关注列表
 |   //获取用户获取关注列表
 | ||||||
|     let getFollowList = (params = {}) => vm.$u.get('app/Chat/GetFollowList', {id: vm.vuex_user.id}); |   let getFollowList = (params = {}) => | ||||||
|  |     vm.$u.get("app/Chat/GetFollowList", { id: vm.vuex_user.id }); | ||||||
|   //	获取系统消息列表
 |   //	获取系统消息列表
 | ||||||
|     let getSysList = (params = {}) => vm.$u.get('app/Chat/GetSystemMessageList', {id: vm.vuex_user.id}); |   let getSysList = (params = {}) => | ||||||
|  |     vm.$u.get("app/Chat/GetSystemMessageList", { id: vm.vuex_user.id }); | ||||||
|   //获取管理消息列表
 |   //获取管理消息列表
 | ||||||
|     let getAdminList = (params = {}) => vm.$u.get('app/Chat/GetManageMessageList', {schoolId: vm.vuex_user.id}); |   let getAdminList = (params = {}) => | ||||||
|  |     vm.$u.get("app/Chat/GetManageMessageList", { schoolId: vm.vuex_user.id }); | ||||||
|   //获取互动信息列表
 |   //获取互动信息列表
 | ||||||
|     let getinteractionList = (params) => vm.$u.get('app/Chat/GetInterMessageList', {id: vm.vuex_user.id, type: params}); |   let getinteractionList = (params) => | ||||||
|  |     vm.$u.get("app/Chat/GetInterMessageList", { | ||||||
|  |       id: vm.vuex_user.id, | ||||||
|  |       type: params, | ||||||
|  |     }); | ||||||
|   //校友找找推荐列表
 |   //校友找找推荐列表
 | ||||||
|     let getAlumnSearch = (params = {}) => vm.$u.get('app/AlumnRange/AlumnSearch', params); |   let getAlumnSearch = (params = {}) => | ||||||
|  |     vm.$u.get("app/AlumnRange/AlumnSearch", params); | ||||||
|   //获取聊天记录
 |   //获取聊天记录
 | ||||||
|     let getChatRecord = (params = {}) => vm.$u.get('app/Chat/GetChatRecord', params); |   let getChatRecord = (params = {}) => | ||||||
|  |     vm.$u.get("app/Chat/GetChatRecord", params); | ||||||
|   //校友找找列表
 |   //校友找找列表
 | ||||||
|     let AlumnSearchList = (params = {}) => vm.$u.get('app/AlumnRange/AlumnSearchList', params); |   let AlumnSearchList = (params = {}) => | ||||||
|  |     vm.$u.get("app/AlumnRange/AlumnSearchList", params); | ||||||
|   // 初始化的数据调用微信接口返回参数
 |   // 初始化的数据调用微信接口返回参数
 | ||||||
|     let GetInfoMation = (params = {}) => vm.$u.get('api/Token/GetInfoMation', params); |   let GetInfoMation = (params = {}) => | ||||||
|  |     vm.$u.get("api/Token/GetInfoMation", params); | ||||||
|   // 回复绑定
 |   // 回复绑定
 | ||||||
|     let toBind = (params = {}) => vm.$u.get('app/Chat/ReplyBind', params); |   let toBind = (params = {}) => vm.$u.get("app/Chat/ReplyBind", params); | ||||||
|   //我的资讯
 |   //我的资讯
 | ||||||
|     let MyAlumnRange = (params = {}) => vm.$u.get('app/My/MyAlumnRange', params); |   let MyAlumnRange = (params = {}) => vm.$u.get("app/My/MyAlumnRange", params); | ||||||
|   // 解除绑定
 |   // 解除绑定
 | ||||||
|     let colseBind = (params = {}) => vm.$u.get('app/Chat/UnbindReply', params); |   let colseBind = (params = {}) => vm.$u.get("app/Chat/UnbindReply", params); | ||||||
|   // 删除评论
 |   // 删除评论
 | ||||||
|     let DelateComment = (params = {}) => vm.$u.get('app/AlumnRange/DelateComment', params); |   let DelateComment = (params = {}) => | ||||||
|     let userVerify = (params = {}) => vm.$u.post('api/Token/IsIdentityCard', params) |     vm.$u.get("app/AlumnRange/DelateComment", params); | ||||||
|  |   let userVerify = (params = {}) => | ||||||
|  |     vm.$u.post("api/Token/IsIdentityCard", params); | ||||||
| 
 | 
 | ||||||
|   // 获取人脸验证token
 |   // 获取人脸验证token
 | ||||||
|     let getAPIToken = (params = {}) => vm.$u.post('app/My/GetVerifyToken', params) |   let getAPIToken = (params = {}) => | ||||||
|  |     vm.$u.post("app/My/GetVerifyToken", params); | ||||||
|   // 查询人脸核验结果
 |   // 查询人脸核验结果
 | ||||||
|     let getVerifyInfo = (params = {}) => vm.$u.post('app/My/GetDetailInfo?VerifyToken=' + params) |   let getVerifyInfo = (params = {}) => | ||||||
|  |     vm.$u.post("app/My/GetDetailInfo?VerifyToken=" + params); | ||||||
|   // 根据身份证获取信息
 |   // 根据身份证获取信息
 | ||||||
|     let getInfoByCard = (params = {}) => vm.$u.get('app/User/GetCardByPreConfiguredUser', params); |   let getInfoByCard = (params = {}) => | ||||||
|  |     vm.$u.get("app/User/GetCardByPreConfiguredUser", params); | ||||||
|   // 更新身份信息
 |   // 更新身份信息
 | ||||||
|     let updateCard = (params = {}) => vm.$u.post('api/Token/UpdateCard', params) |   let updateCard = (params = {}) => vm.$u.post("api/Token/UpdateCard", params); | ||||||
| 
 | 
 | ||||||
|   //【手机端】添加心愿
 |   //【手机端】添加心愿
 | ||||||
|     let PushWishDan = (params = {}) => vm.$u.post("app/My/PushWishDan", params) |   let PushWishDan = (params = {}) => vm.$u.post("app/My/PushWishDan", params); | ||||||
| 
 | 
 | ||||||
|   //【手机端】获取个人心愿列表
 |   //【手机端】获取个人心愿列表
 | ||||||
|     let GetWishListAsync_mobile = (params = {}) => vm.$u.get("app/My/GetWishListAsync_mobile", params) |   let GetWishListAsync_mobile = (params = {}) => | ||||||
|  |     vm.$u.get("app/My/GetWishListAsync_mobile", params); | ||||||
|   //【手机端】删除心愿 删除=失效
 |   //【手机端】删除心愿 删除=失效
 | ||||||
|     let DeleteWish = (params = {}) => vm.$u.post("app/My/DeleteWish", params) |   let DeleteWish = (params = {}) => vm.$u.post("app/My/DeleteWish", params); | ||||||
|   //【管理端】获取当前是否开启匿名 开启true 关闭false
 |   //【管理端】获取当前是否开启匿名 开启true 关闭false
 | ||||||
|     let CheckNM = (params = {}) => vm.$u.get("/app/My/CheckNM", params) |   let CheckNM = (params = {}) => vm.$u.get("/app/My/CheckNM", params); | ||||||
| 
 | 
 | ||||||
|   /** 首页ai对话 */ |   /** 首页ai对话 */ | ||||||
|   // 发送消息
 |   // 发送消息
 | ||||||
|     let SendMessageApi = (params = {}) => vm.$u.post('api/ChatAI/CreateChat', params, {showLoading: false}); |   let SendMessageApi = (params = {}) => | ||||||
|  |     vm.$u.post("api/ChatAI/CreateChat", params, { showLoading: false }); | ||||||
|   // 获取历史对话列表
 |   // 获取历史对话列表
 | ||||||
|     let GetConversationPage = (params = {}) => vm.$u.get('api/ChatAI/GetConversationPage', params); |   let GetConversationPage = (params = {}) => | ||||||
|  |     vm.$u.get("api/ChatAI/GetConversationPage", params); | ||||||
|   // 获取对话详情
 |   // 获取对话详情
 | ||||||
|     let GetConversationDetail = (params = {}) => vm.$u.get('api/ChatAI/GetHistoricalConversations', params); |   let GetConversationDetail = (params = {}) => | ||||||
|  |     vm.$u.get("api/ChatAI/GetHistoricalConversations", params); | ||||||
| 
 | 
 | ||||||
|   /** 登录 */ |   /** 登录 */ | ||||||
|   // 获取图形验证码
 |   // 获取图形验证码
 | ||||||
|     let GetCaptcha = (params = {}) => vm.$u.get('api/Login/GetCaptcha', params); |   let GetCaptcha = (params = {}) => vm.$u.get("api/Login/GetCaptcha", params); | ||||||
|     // 发送验证码
 |   // 发送验证码-学生
 | ||||||
|     let GetStuVerifyCode = (params = {}) => vm.$u.post('api/Login/GetSMSCodeAccountRegister', params); |   let GetStuVerifyCode = (params = {}) => | ||||||
|     // 学生登录
 |     vm.$u.post("api/Login/GetSMSCodeAccountRegister", params); | ||||||
|     let StuLogin = (params = {}) => vm.$u.post('api/Login/PhoneLoginExpertUser', params); |   // 登录-学生
 | ||||||
|  |   let StuLogin = (params = {}) => | ||||||
|  |     vm.$u.post("api/Login/PhoneLoginExpertUser", params); | ||||||
|  | 
 | ||||||
|  |   // 发送验证码-教师
 | ||||||
|  |   let GetTeacherVerifyCode = (params = {}) => | ||||||
|  |     vm.$u.post("api/Login/RequestLoginSMSCode", params); | ||||||
|  |   // 密码登录-教师
 | ||||||
|  |   let TeacherLogin = (params = {}) => | ||||||
|  |     vm.$u.post("api/Login/LoginManagementEnd", params); | ||||||
|  |   // 验证码登录-教师
 | ||||||
|  |   let TeacherLoginByCode = (params = {}) => | ||||||
|  |     vm.$u.post("api/Login/PhoneLoginManagementEnd", params); | ||||||
| 
 | 
 | ||||||
|   // 将各个定义的接口名称,统一放进对象挂载到vm.$u.api(因为vm就是this,也即this.$u.api)下
 |   // 将各个定义的接口名称,统一放进对象挂载到vm.$u.api(因为vm就是this,也即this.$u.api)下
 | ||||||
|   vm.$u.api = { |   vm.$u.api = { | ||||||
|     getTeacherInfo, |     getTeacherInfo, | ||||||
|     getData, |     getData, | ||||||
|     updateTeacherInfo, |     updateTeacherInfo, | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
|     LoginApp, |     LoginApp, | ||||||
|     RegisterUser, |     RegisterUser, | ||||||
|     saveUserInfo, |     saveUserInfo, | ||||||
|  | @ -163,10 +208,13 @@ const install = (Vue, vm) => { | ||||||
|     GetStuVerifyCode, |     GetStuVerifyCode, | ||||||
|     StuLogin, |     StuLogin, | ||||||
|     GetConversationPage, |     GetConversationPage, | ||||||
|         GetConversationDetail |     GetConversationDetail, | ||||||
|  |     GetTeacherVerifyCode, | ||||||
|  |     TeacherLogin, | ||||||
|  |     TeacherLoginByCode, | ||||||
|  |   }; | ||||||
| }; | }; | ||||||
| } |  | ||||||
| 
 | 
 | ||||||
| export default { | export default { | ||||||
|     install |   install, | ||||||
| } | }; | ||||||
|  |  | ||||||
|  | @ -0,0 +1,173 @@ | ||||||
|  | <template> | ||||||
|  |   <view> | ||||||
|  |     <view | ||||||
|  |       class="answer-item" | ||||||
|  |       v-for="(item, index) in answerList" | ||||||
|  |       :key="item.id" | ||||||
|  |     > | ||||||
|  |       <view class="student-info"> | ||||||
|  |         <image class="student-avatar" :src="item.studentAvatar"></image> | ||||||
|  |         <text class="student-name">{{ item.studentName }}</text> | ||||||
|  |         <text class="answer-time">{{ item.time }}</text> | ||||||
|  |       </view> | ||||||
|  | 
 | ||||||
|  |       <view class="question"> | ||||||
|  |         <image | ||||||
|  |           class="question-tag" | ||||||
|  |           src="/static/common/images/icon_ask.png" | ||||||
|  |         ></image> | ||||||
|  |         <view class="question-content">{{ item.question }}</view> | ||||||
|  |       </view> | ||||||
|  | 
 | ||||||
|  |       <view class="answer"> | ||||||
|  |         <image | ||||||
|  |           class="answer-tag" | ||||||
|  |           src="/static/common/images/icon_answer.png" | ||||||
|  |         ></image> | ||||||
|  |         <view class="answer-content"> | ||||||
|  |           <!-- <view class="answer-text">{{ item.fullAnswer }}</view> --> | ||||||
|  |           <xzj-readMore>{{ item.fullAnswer }}</xzj-readMore> | ||||||
|  |         </view> | ||||||
|  |       </view> | ||||||
|  |     </view> | ||||||
|  |   </view> | ||||||
|  | </template> | ||||||
|  | 
 | ||||||
|  | <script> | ||||||
|  | import XzjReadMore from "@/components/xzj-readMore/xzj-readMore.vue"; | ||||||
|  | export default { | ||||||
|  |   name: "AnswerList", | ||||||
|  |   components: { | ||||||
|  |     XzjReadMore, | ||||||
|  |   }, | ||||||
|  |   props: { | ||||||
|  |     answerList: { | ||||||
|  |       type: Array, | ||||||
|  |       default: () => [], | ||||||
|  |     }, | ||||||
|  |   }, | ||||||
|  | }; | ||||||
|  | </script> | ||||||
|  | 
 | ||||||
|  | <style lang="scss" scoped> | ||||||
|  | .answer-item { | ||||||
|  |   background-color: #ffffff; | ||||||
|  |   border-radius: 16rpx; | ||||||
|  |   padding: 32rpx; | ||||||
|  |   margin-bottom: 32rpx; | ||||||
|  | 
 | ||||||
|  |   .student-info { | ||||||
|  |     display: flex; | ||||||
|  |     align-items: center; | ||||||
|  |     margin-bottom: 32rpx; | ||||||
|  | 
 | ||||||
|  |     .student-avatar { | ||||||
|  |       width: 40rpx; | ||||||
|  |       height: 40rpx; | ||||||
|  |       border-radius: 20rpx; | ||||||
|  |       margin-right: 16rpx; | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|  |     .student-name { | ||||||
|  |       flex: 1; | ||||||
|  |       font-size: 26rpx; | ||||||
|  |       color: #666666; | ||||||
|  |       font-weight: 500; | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|  |     .answer-time { | ||||||
|  |       font-size: 24rpx; | ||||||
|  |       color: #666666; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   .question { | ||||||
|  |     display: flex; | ||||||
|  |     margin-bottom: 24rpx; | ||||||
|  | 
 | ||||||
|  |     .question-tag { | ||||||
|  |       width: 42rpx; | ||||||
|  |       height: 42rpx; | ||||||
|  |       margin-right: 32rpx; | ||||||
|  |       flex-shrink: 0; | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|  |     .question-content { | ||||||
|  |       font-size: 32rpx; | ||||||
|  |       color: #333333; | ||||||
|  |       flex: 1; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   .answer { | ||||||
|  |     display: flex; | ||||||
|  |     align-items: flex-start; | ||||||
|  | 
 | ||||||
|  |     .answer-tag { | ||||||
|  |       width: 42rpx; | ||||||
|  |       height: 42rpx; | ||||||
|  |       margin-right: 32rpx; | ||||||
|  |       flex-shrink: 0; | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|  |     .answer-content { | ||||||
|  |       font-size: 24rpx; | ||||||
|  |       line-height: 40rpx; | ||||||
|  |       color: #666666; | ||||||
|  |       flex: 1; | ||||||
|  |       position: relative; | ||||||
|  | 
 | ||||||
|  |       .answer-text { | ||||||
|  |         word-break: break-word; | ||||||
|  |         transition: all 0.3s; | ||||||
|  |       } | ||||||
|  | 
 | ||||||
|  |       &:not(.content-expanded) .answer-text { | ||||||
|  |         display: -webkit-box; | ||||||
|  |         -webkit-line-clamp: 3; | ||||||
|  |         -webkit-box-orient: vertical; | ||||||
|  |         overflow: hidden; | ||||||
|  |         text-overflow: ellipsis; | ||||||
|  |         position: relative; | ||||||
|  |       } | ||||||
|  | 
 | ||||||
|  |       &.content-expanded { | ||||||
|  |         .expand-btn-container { | ||||||
|  |           margin-top: 16rpx; | ||||||
|  |           text-align: right; | ||||||
|  |         } | ||||||
|  |       } | ||||||
|  | 
 | ||||||
|  |       .expand-btn-container { | ||||||
|  |         display: block; | ||||||
|  |       } | ||||||
|  | 
 | ||||||
|  |       &:not(.content-expanded) .expand-btn-container { | ||||||
|  |         position: absolute; | ||||||
|  |         right: 0; | ||||||
|  |         bottom: 0; | ||||||
|  |         z-index: 2; | ||||||
|  |         background-color: #ffffff; | ||||||
|  |         padding-left: 10rpx; | ||||||
|  |         padding-right: 0; | ||||||
|  |       } | ||||||
|  | 
 | ||||||
|  |       .expand-btn { | ||||||
|  |         color: #4e7eff; | ||||||
|  |         display: inline-block; | ||||||
|  |         font-size: 26rpx; | ||||||
|  |         cursor: pointer; | ||||||
|  |         white-space: nowrap; | ||||||
|  |         padding: 0 4rpx; | ||||||
|  | 
 | ||||||
|  |         .expand-icon { | ||||||
|  |           font-size: 20rpx; | ||||||
|  |           display: inline-block; | ||||||
|  |           vertical-align: middle; | ||||||
|  |           margin-left: 4rpx; | ||||||
|  |         } | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </style> | ||||||
|  | @ -0,0 +1,477 @@ | ||||||
|  | <template> | ||||||
|  |   <view class="message-board-component"> | ||||||
|  |     <!-- 一个列表一个swipe-action容器更符合官方推荐用法 --> | ||||||
|  |     <view v-for="(item, index) in answerList" :key="item.id"> | ||||||
|  |       <uni-swipe-action ref="swipeActionRef"> | ||||||
|  |         <!-- :right-options="swipeOptions" --> | ||||||
|  |         <uni-swipe-action-item | ||||||
|  |           :disabled="!canSwipe" | ||||||
|  |           :threshold="0.3" | ||||||
|  |           :auto-close="false" | ||||||
|  |           @change="handleSwipeChange($event, index)" | ||||||
|  |         > | ||||||
|  |           <template v-slot:right> | ||||||
|  |             <view | ||||||
|  |               class="right-btn-box" | ||||||
|  |               @touchend.stop="handleSwipeClick(item, index)" | ||||||
|  |             > | ||||||
|  |               <image | ||||||
|  |                 class="right-btn" | ||||||
|  |                 src="/static/common/images/icon_delete.png" | ||||||
|  |               ></image> | ||||||
|  |               <text>撤回</text> | ||||||
|  |             </view> | ||||||
|  |           </template> | ||||||
|  | 
 | ||||||
|  |           <view class="answer-item-box"> | ||||||
|  |             <view | ||||||
|  |               class="answer-item" | ||||||
|  |               :class="{ | ||||||
|  |                 'no-right-radius': openedItems[index] === 'right', | ||||||
|  |                 'is-web-mode': isWebMode, | ||||||
|  |               }" | ||||||
|  |             > | ||||||
|  |               <view class="student-info"> | ||||||
|  |                 <image | ||||||
|  |                   class="student-avatar" | ||||||
|  |                   :src="item.studentAvatar || AvatarDefault" | ||||||
|  |                 ></image> | ||||||
|  | 
 | ||||||
|  |                 <view class="student-info-content"> | ||||||
|  |                   <text class="student-name">{{ item.studentName }}</text> | ||||||
|  |                   <text class="answer-time">{{ item.time }}</text> | ||||||
|  |                 </view> | ||||||
|  |               </view> | ||||||
|  | 
 | ||||||
|  |               <view class="question"> | ||||||
|  |                 <image | ||||||
|  |                   class="question-tag" | ||||||
|  |                   src="/static/common/images/icon_ask.png" | ||||||
|  |                 ></image> | ||||||
|  |                 <view class="question-content">{{ item.question }}</view> | ||||||
|  |               </view> | ||||||
|  | 
 | ||||||
|  |               <view v-if="item.isReply"> | ||||||
|  |                 <view class="line"></view> | ||||||
|  | 
 | ||||||
|  |                 <view class="student-info"> | ||||||
|  |                   <image | ||||||
|  |                     class="student-avatar" | ||||||
|  |                     :src="item.teacherAvatar || AvatarDefault" | ||||||
|  |                   ></image> | ||||||
|  | 
 | ||||||
|  |                   <view class="student-info-content"> | ||||||
|  |                     <text class="student-name">{{ item.teacherName }}</text> | ||||||
|  |                     <text class="answer-time">{{ item.replyTime }}</text> | ||||||
|  |                   </view> | ||||||
|  |                 </view> | ||||||
|  | 
 | ||||||
|  |                 <view class="answer"> | ||||||
|  |                   <image | ||||||
|  |                     class="answer-tag" | ||||||
|  |                     src="/static/common/images/icon_answer.png" | ||||||
|  |                   ></image> | ||||||
|  |                   <view class="answer-content"> | ||||||
|  |                     <!-- <view class="answer-text">{{ item.fullAnswer }}</view> --> | ||||||
|  |                     <xzj-readMore>{{ item.fullAnswer }}</xzj-readMore> | ||||||
|  |                   </view> | ||||||
|  |                 </view> | ||||||
|  |               </view> | ||||||
|  | 
 | ||||||
|  |               <!-- 回复按钮-老师 --> | ||||||
|  |               <view class="reply-btn-box" v-if="isTeacher"> | ||||||
|  |                 <button | ||||||
|  |                   class="reply-btn uni-btn-reset" | ||||||
|  |                   :class="{ 'disabled-reply': item.isReply }" | ||||||
|  |                   @click.stop="handleReplyClick(item)" | ||||||
|  |                 > | ||||||
|  |                   <image | ||||||
|  |                     class="reply-btn-icon" | ||||||
|  |                     src="/static/common/images/icon_reply.png" | ||||||
|  |                   ></image | ||||||
|  |                   >回复 | ||||||
|  |                 </button> | ||||||
|  |               </view> | ||||||
|  |             </view> | ||||||
|  | 
 | ||||||
|  |             <view | ||||||
|  |               v-if="isWebMode" | ||||||
|  |               class="right-btn-box" | ||||||
|  |               :class="{ | ||||||
|  |                 'web-mode-cursor': isWebMode, | ||||||
|  |               }" | ||||||
|  |               @click.stop="handleWebModeClick(item)" | ||||||
|  |             > | ||||||
|  |               <image | ||||||
|  |                 class="right-btn" | ||||||
|  |                 src="/static/common/images/icon_delete.png" | ||||||
|  |               ></image> | ||||||
|  |               <text>撤回</text> | ||||||
|  |             </view> | ||||||
|  |           </view> | ||||||
|  |         </uni-swipe-action-item> | ||||||
|  |       </uni-swipe-action> | ||||||
|  |     </view> | ||||||
|  | 
 | ||||||
|  |     <!-- 模态弹窗 --> | ||||||
|  |     <u-popup | ||||||
|  |       v-model="modalShow" | ||||||
|  |       mode="center" | ||||||
|  |       width="70%" | ||||||
|  |       border-radius="16" | ||||||
|  |       :mask-close-able="false" | ||||||
|  |     > | ||||||
|  |       <view class="custom-modal"> | ||||||
|  |         <view class="modal-title">提示</view> | ||||||
|  |         <view class="modal-content">{{ content }}</view> | ||||||
|  |         <view class="modal-footer"> | ||||||
|  |           <view class="modal-btn cancel" @click="handleCancel">取消</view> | ||||||
|  |           <view class="modal-btn confirm" @click="handleConfirm">确认</view> | ||||||
|  |         </view> | ||||||
|  |       </view> | ||||||
|  |     </u-popup> | ||||||
|  |   </view> | ||||||
|  | </template> | ||||||
|  | 
 | ||||||
|  | <script> | ||||||
|  | import AvatarDefault from "@/static/common/images/avatar_default.jpg"; | ||||||
|  | import UniSwipeAction from "@/uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action.vue"; | ||||||
|  | import XzjReadMore from "@/components/xzj-readMore/xzj-readMore.vue"; | ||||||
|  | 
 | ||||||
|  | export default { | ||||||
|  |   name: "MessageBoard", | ||||||
|  |   components: { | ||||||
|  |     UniSwipeAction, | ||||||
|  |     XzjReadMore, | ||||||
|  |   }, | ||||||
|  |   props: { | ||||||
|  |     answerList: { | ||||||
|  |       type: Array, | ||||||
|  |       default: () => [], | ||||||
|  |     }, | ||||||
|  |     isTeacher: { | ||||||
|  |       type: Boolean, | ||||||
|  |       default: false, | ||||||
|  |     }, | ||||||
|  |     // 是否允许左滑 | ||||||
|  |     canSwipe: { | ||||||
|  |       type: Boolean, | ||||||
|  |       default: true, | ||||||
|  |     }, | ||||||
|  |   }, | ||||||
|  |   data() { | ||||||
|  |     return { | ||||||
|  |       AvatarDefault, // 默认头像 | ||||||
|  |       currentItem: {}, // 当前操作的item | ||||||
|  |       currentIndex: 0, // 当前操作的item索引 | ||||||
|  |       openedItems: {}, // 记录每个项目的滑动状态 | ||||||
|  |       isWebMode: false, // 是否是web模式 | ||||||
|  | 
 | ||||||
|  |       // 模态弹窗 | ||||||
|  |       modalShow: false, | ||||||
|  |       content: "确定要撤回该留言吗?", | ||||||
|  |       modalOpenTime: 0, | ||||||
|  |       preventCloseOnce: false, // 添加防误触标记 | ||||||
|  |     }; | ||||||
|  |   }, | ||||||
|  |   mounted() { | ||||||
|  |     // #ifdef H5 | ||||||
|  |     const userAgent = navigator.userAgent.toLowerCase(); | ||||||
|  |     this.isWebMode = !/mobile|android|iphone|ipod|ipad/.test(userAgent); | ||||||
|  |     // #endif | ||||||
|  | 
 | ||||||
|  |     console.log("isWebMode", this.isWebMode); | ||||||
|  |   }, | ||||||
|  |   methods: { | ||||||
|  |     // 监听滑动状态变化 | ||||||
|  |     handleSwipeChange(e, index) { | ||||||
|  |       // 使用Vue的响应式更新方法来更新对象 | ||||||
|  |       this.$set(this.openedItems, index, e); | ||||||
|  |       // console.log("滑动状态", this.openedItems); | ||||||
|  |     }, | ||||||
|  |     // 处理左滑按钮点击 | ||||||
|  |     handleSwipeClick(item, index) { | ||||||
|  |       // console.log("swipeClick", item, index); | ||||||
|  |       // console.log("swipeActionRef", this.$refs.swipeActionRef); | ||||||
|  |       this.currentItem = item; | ||||||
|  |       this.currentIndex = index; | ||||||
|  |       this.modalShow = true; | ||||||
|  |       this.modalOpenTime = Date.now(); // 记录模态框打开时间 | ||||||
|  |     }, | ||||||
|  | 
 | ||||||
|  |     // 处理web模式点击 | ||||||
|  |     handleWebModeClick(item) { | ||||||
|  |       console.log("web模式点击", item); | ||||||
|  |     }, | ||||||
|  | 
 | ||||||
|  |     // 处理回复按钮点击 | ||||||
|  |     handleReplyClick(item) { | ||||||
|  |       if (item.isReply) { | ||||||
|  |         return; | ||||||
|  |       } | ||||||
|  | 
 | ||||||
|  |       this.$emit("reply", item); | ||||||
|  |     }, | ||||||
|  | 
 | ||||||
|  |     // 处理取消按钮点击 | ||||||
|  |     handleCancel() { | ||||||
|  |       this.modalShow = false; | ||||||
|  |     }, | ||||||
|  | 
 | ||||||
|  |     // 处理确认按钮点击 | ||||||
|  |     handleConfirm() { | ||||||
|  |       // 检查是否是快速点击(防止误触) | ||||||
|  |       if (this.modalOpenTime && Date.now() - this.modalOpenTime < 300) { | ||||||
|  |         console.log("防止误触,请重新点击"); | ||||||
|  |         return; | ||||||
|  |       } | ||||||
|  | 
 | ||||||
|  |       // 发送删除事件,并传递回调函数 | ||||||
|  |       this.$emit("delete", this.currentItem, (success) => { | ||||||
|  |         // 只有当操作成功时才关闭模态框 | ||||||
|  |         console.log("callback success", success); | ||||||
|  | 
 | ||||||
|  |         if (success) { | ||||||
|  |           this.$refs.swipeActionRef[this.currentIndex].closeAll(); | ||||||
|  |           this.modalShow = false; | ||||||
|  |         } | ||||||
|  |       }); | ||||||
|  |     }, | ||||||
|  |   }, | ||||||
|  | }; | ||||||
|  | </script> | ||||||
|  | 
 | ||||||
|  | <style lang="scss" scoped> | ||||||
|  | .message-board-component { | ||||||
|  |   .right-btn-box { | ||||||
|  |     width: 120rpx; | ||||||
|  |     // height: inherit; | ||||||
|  |     color: #ffffff; | ||||||
|  |     background-color: #ff5252; | ||||||
|  |     display: flex; | ||||||
|  |     flex-direction: column; | ||||||
|  |     gap: 10rpx; | ||||||
|  |     align-items: center; | ||||||
|  |     justify-content: center; | ||||||
|  |     border-radius: 0 16rpx 16rpx 0; | ||||||
|  |     border-left: 1px solid #fff; /* 防止初始状态下出现红线 */ | ||||||
|  |     margin-bottom: 32rpx; | ||||||
|  |     .right-btn { | ||||||
|  |       width: 32rpx; | ||||||
|  |       height: 32rpx; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   .answer-item-box { | ||||||
|  |     display: flex; | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   .answer-item { | ||||||
|  |     flex: 1; | ||||||
|  |     background-color: #ffffff; | ||||||
|  |     border-radius: 16rpx; | ||||||
|  |     padding: 32rpx; | ||||||
|  |     margin-bottom: 32rpx; | ||||||
|  |     position: relative; | ||||||
|  |     /* 删除 overflow: hidden; 可能妨碍滑动 */ | ||||||
|  |     transition: border-radius 0.3s; /* 添加过渡效果使圆角变化更平滑 */ | ||||||
|  | 
 | ||||||
|  |     /* 滑动时移除右侧圆角 */ | ||||||
|  |     &.no-right-radius { | ||||||
|  |       border-top-right-radius: 0; | ||||||
|  |       border-bottom-right-radius: 0; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   .is-web-mode { | ||||||
|  |     cursor: default; | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   .web-mode-cursor { | ||||||
|  |     cursor: pointer; | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   .student-info { | ||||||
|  |     display: flex; | ||||||
|  |     align-items: center; | ||||||
|  |     margin-bottom: 32rpx; | ||||||
|  | 
 | ||||||
|  |     .student-avatar { | ||||||
|  |       width: 60rpx; | ||||||
|  |       height: 60rpx; | ||||||
|  |       border-radius: 50%; | ||||||
|  |       margin-right: 16rpx; | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|  |     .student-info-content { | ||||||
|  |       display: flex; | ||||||
|  |       flex-direction: column; | ||||||
|  | 
 | ||||||
|  |       .student-name { | ||||||
|  |         font-size: 28rpx; | ||||||
|  |         color: #333333; | ||||||
|  |         font-weight: 500; | ||||||
|  |       } | ||||||
|  | 
 | ||||||
|  |       .answer-time { | ||||||
|  |         font-size: 24rpx; | ||||||
|  |         color: #666666; | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   .line { | ||||||
|  |     width: 100%; | ||||||
|  |     height: 1rpx; | ||||||
|  |     background-color: rgba(238, 238, 238, 0.8); | ||||||
|  |     margin: 28rpx 0; | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   .question { | ||||||
|  |     display: flex; | ||||||
|  |     margin-bottom: 24rpx; | ||||||
|  | 
 | ||||||
|  |     .question-tag { | ||||||
|  |       width: 42rpx; | ||||||
|  |       height: 42rpx; | ||||||
|  |       margin-left: 6rpx; | ||||||
|  |       margin-right: 26rpx; | ||||||
|  |       flex-shrink: 0; | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|  |     .question-content { | ||||||
|  |       font-size: 32rpx; | ||||||
|  |       color: #333333; | ||||||
|  |       flex: 1; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   .answer { | ||||||
|  |     display: flex; | ||||||
|  |     align-items: flex-start; | ||||||
|  | 
 | ||||||
|  |     .answer-tag { | ||||||
|  |       width: 42rpx; | ||||||
|  |       height: 42rpx; | ||||||
|  |       margin-left: 6rpx; | ||||||
|  |       margin-right: 26rpx; | ||||||
|  |       flex-shrink: 0; | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|  |     .answer-content { | ||||||
|  |       font-size: 24rpx; | ||||||
|  |       line-height: 40rpx; | ||||||
|  |       color: #666666; | ||||||
|  |       flex: 1; | ||||||
|  | 
 | ||||||
|  |       .answer-text { | ||||||
|  |         display: -webkit-box; | ||||||
|  |         -webkit-line-clamp: 3; | ||||||
|  |         -webkit-box-orient: vertical; | ||||||
|  |         overflow: hidden; | ||||||
|  |         text-overflow: ellipsis; | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   .reply-btn-box { | ||||||
|  |     width: 100%; | ||||||
|  |     margin-top: 28rpx; | ||||||
|  | 
 | ||||||
|  |     .uni-btn-reset::after { | ||||||
|  |       border: none !important; | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|  |     .reply-btn { | ||||||
|  |       display: flex; | ||||||
|  |       align-items: center; | ||||||
|  |       justify-content: center; | ||||||
|  |       width: 280rpx; | ||||||
|  |       height: 64rpx; | ||||||
|  |       background: #4f6aff; | ||||||
|  |       border-radius: 16rpx; | ||||||
|  |       font-size: 28rpx; | ||||||
|  |       color: #ffffff; | ||||||
|  |       margin-right: 0; | ||||||
|  | 
 | ||||||
|  |       .reply-btn-icon { | ||||||
|  |         width: 28rpx; | ||||||
|  |         height: 28rpx; | ||||||
|  |         margin-right: 12rpx; | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|  |     .disabled-reply { | ||||||
|  |       background: #cccccc; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /* 自定义滑动按钮样式,保持简洁 */ | ||||||
|  | ::v-deep .uni-swipe-action__button { | ||||||
|  |   display: flex; | ||||||
|  |   flex-direction: row; | ||||||
|  |   align-items: center; | ||||||
|  |   padding: 0 32rpx; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /* 自定义图标样式 - 如果使用默认图标系统 */ | ||||||
|  | ::v-deep .uni-swipe-action__button-icon { | ||||||
|  |   width: 32rpx; | ||||||
|  |   height: 32rpx; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /* 如果需要使用自定义图标 */ | ||||||
|  | ::v-deep .uni-swipe-action__button-image { | ||||||
|  |   width: 32rpx; | ||||||
|  |   height: 32rpx; | ||||||
|  |   margin-right: 8rpx; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .custom-modal { | ||||||
|  |   background-color: #fff; | ||||||
|  |   overflow: hidden; | ||||||
|  | 
 | ||||||
|  |   .modal-title { | ||||||
|  |     font-size: 32rpx; | ||||||
|  |     font-weight: 500; | ||||||
|  |     text-align: center; | ||||||
|  |     padding: 30rpx 0; | ||||||
|  |     color: #333; | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   .modal-content { | ||||||
|  |     padding: 30rpx; | ||||||
|  |     font-size: 28rpx; | ||||||
|  |     color: #666; | ||||||
|  |     text-align: center; | ||||||
|  |     min-height: 80rpx; | ||||||
|  |     display: flex; | ||||||
|  |     align-items: center; | ||||||
|  |     justify-content: center; | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   .modal-footer { | ||||||
|  |     display: flex; | ||||||
|  |     border-top: 1px solid #eee; | ||||||
|  | 
 | ||||||
|  |     .modal-btn { | ||||||
|  |       flex: 1; | ||||||
|  |       height: 90rpx; | ||||||
|  |       display: flex; | ||||||
|  |       align-items: center; | ||||||
|  |       justify-content: center; | ||||||
|  |       font-size: 30rpx; | ||||||
|  | 
 | ||||||
|  |       &.cancel { | ||||||
|  |         color: #666; | ||||||
|  |         border-right: 1px solid #eee; | ||||||
|  |       } | ||||||
|  | 
 | ||||||
|  |       &.confirm { | ||||||
|  |         color: #4f6aff; | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </style> | ||||||
|  | @ -0,0 +1,87 @@ | ||||||
|  | <template> | ||||||
|  |   <view class="header"> | ||||||
|  |     <div class="header-left"> | ||||||
|  |       <u-icon | ||||||
|  |         v-if="showLeftIcon" | ||||||
|  |         class="header-left-icon" | ||||||
|  |         :name="leftIcon" | ||||||
|  |         @click="handleLeftClick" | ||||||
|  |       ></u-icon> | ||||||
|  |       <slot name="left"></slot> | ||||||
|  |     </div> | ||||||
|  |     <text class="header-title" :style="{ color: titleColor }">{{ title }}</text> | ||||||
|  |     <div class="header-right"> | ||||||
|  |       <slot name="right"></slot> | ||||||
|  |     </div> | ||||||
|  |   </view> | ||||||
|  | </template> | ||||||
|  | 
 | ||||||
|  | <script> | ||||||
|  | export default { | ||||||
|  |   name: 'HeaderBar', | ||||||
|  |   props: { | ||||||
|  |     // 标题 | ||||||
|  |     title: { | ||||||
|  |       type: String, | ||||||
|  |       default: '' | ||||||
|  |     }, | ||||||
|  |     // 标题颜色 | ||||||
|  |     titleColor: { | ||||||
|  |       type: String, | ||||||
|  |       default: '#333333' | ||||||
|  |     }, | ||||||
|  |     // 是否显示左侧图标 | ||||||
|  |     showLeftIcon: { | ||||||
|  |       type: Boolean, | ||||||
|  |       default: true | ||||||
|  |     }, | ||||||
|  |     // 左侧图标 | ||||||
|  |     leftIcon: { | ||||||
|  |       type: String, | ||||||
|  |       default: 'arrow-left' | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   methods: { | ||||||
|  |     // 处理左侧按钮点击 | ||||||
|  |     handleLeftClick() { | ||||||
|  |       this.$emit('leftClick'); | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  | 
 | ||||||
|  | <style lang="scss" scoped> | ||||||
|  | .header { | ||||||
|  |   position: fixed; | ||||||
|  |   top: 0; | ||||||
|  |   left: 0; | ||||||
|  |   right: 0; | ||||||
|  |   background-color: #ffffff; | ||||||
|  |   height: 88rpx; | ||||||
|  |   display: flex; | ||||||
|  |   align-items: center; | ||||||
|  |   justify-content: space-between; | ||||||
|  |   padding: 0 30rpx; | ||||||
|  |   z-index: 99; | ||||||
|  | 
 | ||||||
|  |   .header-left { | ||||||
|  |     width: 40rpx; | ||||||
|  |     font-size: 36rpx; | ||||||
|  |     display: flex; | ||||||
|  |     align-items: center; | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   .header-title { | ||||||
|  |     font-size: 36rpx; | ||||||
|  |     font-weight: bold; | ||||||
|  |     color: #333333; | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   .header-right { | ||||||
|  |     width: 40rpx; | ||||||
|  |     display: flex; | ||||||
|  |     align-items: center; | ||||||
|  |     justify-content: flex-end; | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </style>  | ||||||
|  | @ -0,0 +1,113 @@ | ||||||
|  | <template> | ||||||
|  | 	<!-- readMore 组件 --> | ||||||
|  | 	<view class="qaBox"> | ||||||
|  | 		<view class="content-box"> | ||||||
|  | 			<view :class="[{ watchMoreContent: isWatchMore  }, {contentt:isLongContent} ,'xzj']" :style="[zxy]" ><slot></slot></view> | ||||||
|  | 			<view class="watchMore" v-if="isLongContent" @click="watchMore">{{ isWatchMore ? '收起' : '展开' }}</view> | ||||||
|  | 		</view> | ||||||
|  | 	</view> | ||||||
|  | </template> | ||||||
|  | <script> | ||||||
|  | export default { | ||||||
|  | 	data() { | ||||||
|  | 		return { | ||||||
|  | 			isWatchMore: false, | ||||||
|  | 			isLongContent: false, | ||||||
|  | 			zxy:{ | ||||||
|  | 				'-webkit-line-clamp':'', /* 行数*/ | ||||||
|  | 				lineClamp: '', /*行数*/ | ||||||
|  | 			} | ||||||
|  | 		}; | ||||||
|  | 	}, | ||||||
|  | 	props: { | ||||||
|  | 		// 默认的显示占位高度,单位为rpx | ||||||
|  | 		showHeight: { //文本本身高度超出   showHeight  才会显示 查看更多 | ||||||
|  | 			type: [Number, String], | ||||||
|  | 			default: 120, | ||||||
|  | 			// 这里是rpx | ||||||
|  | 		}, | ||||||
|  | 		hideLineNum:{ | ||||||
|  | 			type:[Number,String], | ||||||
|  | 			default:3, | ||||||
|  | 			// 3行 | ||||||
|  | 		} | ||||||
|  | 	}, | ||||||
|  | 	mounted() { | ||||||
|  | 		this.$nextTick(function() { | ||||||
|  | 			this.init(); | ||||||
|  | 		}); | ||||||
|  | 	}, | ||||||
|  | 	created(){ | ||||||
|  | 		for (let key in this.zxy) { | ||||||
|  | 			this.zxy[key]=this.hideLineNum | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | 	, | ||||||
|  | 	methods: { | ||||||
|  | 		watchMore() { | ||||||
|  | 			this.isWatchMore = !this.isWatchMore; | ||||||
|  | 		}, | ||||||
|  | 		init() { | ||||||
|  | 			this.getHeight('.xzj').then(res => { | ||||||
|  | 				// 判断高度,如果真实内容高度大于占位高度,则显示收起与展开的控制按钮 | ||||||
|  | 				if (res.height > uni.upx2px(this.showHeight)) { | ||||||
|  | 					this.isLongContent = true; | ||||||
|  | 				} | ||||||
|  | 			}); | ||||||
|  | 		}, | ||||||
|  | 		getHeight(selector, all) { | ||||||
|  | 			return new Promise(resolve => { | ||||||
|  | 				uni.createSelectorQuery() | ||||||
|  | 					.in(this) | ||||||
|  | 					[all ? 'selectAll' : 'select'](selector) | ||||||
|  | 					.boundingClientRect(rect => { | ||||||
|  | 						if (all && Array.isArray(rect) && rect.length) { | ||||||
|  | 							resolve(rect); | ||||||
|  | 						} | ||||||
|  | 						if (!all && rect) { | ||||||
|  | 							resolve(rect); | ||||||
|  | 						} | ||||||
|  | 					}) | ||||||
|  | 					.exec(); | ||||||
|  | 			}); | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | }; | ||||||
|  | </script> | ||||||
|  | 
 | ||||||
|  | <style lang="scss" scoped> | ||||||
|  | .qaBox { | ||||||
|  | 	text-align: right; | ||||||
|  | 	font-size: 24rpx; | ||||||
|  | 	font-weight: 400; | ||||||
|  | 	color: #4f6aff; | ||||||
|  | 	display: flex; | ||||||
|  | } | ||||||
|  | .content-box { | ||||||
|  | 	width: 100%; | ||||||
|  | } | ||||||
|  | .contentt { | ||||||
|  | 	overflow: hidden; | ||||||
|  | 	text-overflow: ellipsis; /*超出则...代替*/ | ||||||
|  | 	display: -webkit-box; | ||||||
|  | 	// -webkit-line-clamp: 4; /* 行数*/ | ||||||
|  | 	// line-clamp: 4; /*行数*/ | ||||||
|  | 	-webkit-box-orient: vertical; | ||||||
|  | 	// line-height: 56rpx; | ||||||
|  | } | ||||||
|  | .xzj{ | ||||||
|  | 	color: #666666; | ||||||
|  | 	font-size: 24rpx; | ||||||
|  | 	// text-align; | ||||||
|  | 	text-align: left; | ||||||
|  | 	word-break: break-all; | ||||||
|  | } | ||||||
|  | .watchMoreContent { | ||||||
|  | 	display: inline-block ; | ||||||
|  | 	width: 100%; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .watchMore { | ||||||
|  | 	margin-top: 10rpx; | ||||||
|  | } | ||||||
|  | </style> | ||||||
|  | @ -20,6 +20,13 @@ | ||||||
|         "navigationStyle": "custom" |         "navigationStyle": "custom" | ||||||
|       } |       } | ||||||
|     }, |     }, | ||||||
|  |     { | ||||||
|  |       "path": "pages/home/messageBoard/index", | ||||||
|  |       "style": { | ||||||
|  |         "navigationBarTitleText": "留言板", | ||||||
|  |         "navigationStyle": "custom" | ||||||
|  |       } | ||||||
|  |     }, | ||||||
|     { |     { | ||||||
|       "path": "pages/notes/index", |       "path": "pages/notes/index", | ||||||
|       "style": { |       "style": { | ||||||
|  |  | ||||||
|  | @ -1,16 +1,10 @@ | ||||||
| <template> | <template> | ||||||
|   <view class="home-container"> |   <view class="home-container"> | ||||||
|     <view class="header"> |     <header-bar | ||||||
|       <div class="header-left"> |       title="源小新" | ||||||
|         <u-icon |       leftIcon="list" | ||||||
|           class="header-left-icon" |       @leftClick="handleLeftClick" | ||||||
|           name="list" |     ></header-bar> | ||||||
|           @click="handleLeftClick" |  | ||||||
|         ></u-icon> |  | ||||||
|       </div> |  | ||||||
|       <text class="header-title">源小新</text> |  | ||||||
|       <div class="header-right"></div> |  | ||||||
|     </view> |  | ||||||
| 
 | 
 | ||||||
|     <!-- 首页 --> |     <!-- 首页 --> | ||||||
|     <view class="main-content" v-if="!isChat"> |     <view class="main-content" v-if="!isChat"> | ||||||
|  | @ -264,6 +258,7 @@ import CustomTabBar from "@/components/custom-tab-bar/custom-tab-bar.vue"; | ||||||
| import AdvicePhone from "@/components/AdvicePhone.vue"; | import AdvicePhone from "@/components/AdvicePhone.vue"; | ||||||
| import PerfectInfo from "@/components/PerfectInfo.vue"; | import PerfectInfo from "@/components/PerfectInfo.vue"; | ||||||
| import ChatHistory from "@/components/ChatHistory.vue"; // 导入新组件 | import ChatHistory from "@/components/ChatHistory.vue"; // 导入新组件 | ||||||
|  | import HeaderBar from "@/components/HeaderBar.vue"; // 导入头部组件 | ||||||
| 
 | 
 | ||||||
| export default { | export default { | ||||||
|   components: { |   components: { | ||||||
|  | @ -271,7 +266,8 @@ export default { | ||||||
|     AdvicePhone, |     AdvicePhone, | ||||||
|     MarkdownViewer, |     MarkdownViewer, | ||||||
|     PerfectInfo, |     PerfectInfo, | ||||||
|     ChatHistory, // 注册新组件 |     ChatHistory, | ||||||
|  |     HeaderBar, // 注册头部组件 | ||||||
|   }, |   }, | ||||||
|   data() { |   data() { | ||||||
|     return { |     return { | ||||||
|  | @ -300,10 +296,12 @@ export default { | ||||||
|         { |         { | ||||||
|           title: "招办在线", |           title: "招办在线", | ||||||
|           icon: "/static/common/images/icon_admissions.png", |           icon: "/static/common/images/icon_admissions.png", | ||||||
|  |           path: "/pages/home/admissions/index", | ||||||
|         }, |         }, | ||||||
|         { |         { | ||||||
|           title: "留言板", |           title: "留言板", | ||||||
|           icon: "/static/common/images/icon_messageBoard.png", |           icon: "/static/common/images/icon_messageBoard.png", | ||||||
|  |           path: "/pages/home/messageBoard/index", | ||||||
|         }, |         }, | ||||||
|         { |         { | ||||||
|           title: "电话咨询", |           title: "电话咨询", | ||||||
|  | @ -464,6 +462,11 @@ export default { | ||||||
|       if (item.title === "电话咨询") { |       if (item.title === "电话咨询") { | ||||||
|         this.advicePhoneShow = true; |         this.advicePhoneShow = true; | ||||||
|         return; |         return; | ||||||
|  |       } else if (item.path) { | ||||||
|  |         uni.navigateTo({ | ||||||
|  |           url: item.path, | ||||||
|  |         }); | ||||||
|  |         return; | ||||||
|       } else { |       } else { | ||||||
|         this.$refs.uToast.show({ |         this.$refs.uToast.show({ | ||||||
|           title: "暂未开放", |           title: "暂未开放", | ||||||
|  | @ -764,34 +767,7 @@ export default { | ||||||
|   background-position: 0 88rpx; |   background-position: 0 88rpx; | ||||||
|   background-attachment: fixed; |   background-attachment: fixed; | ||||||
| 
 | 
 | ||||||
|   .header { |   /* Header样式移至HeaderBar组件 */ | ||||||
|     position: fixed; |  | ||||||
|     top: 0; |  | ||||||
|     left: 0; |  | ||||||
|     right: 0; |  | ||||||
|     background-color: #ffffff; |  | ||||||
|     height: 88rpx; |  | ||||||
|     display: flex; |  | ||||||
|     align-items: center; |  | ||||||
|     justify-content: space-between; |  | ||||||
|     padding: 0 30rpx; |  | ||||||
|     z-index: 99; |  | ||||||
| 
 |  | ||||||
|     .header-left { |  | ||||||
|       width: 40rpx; |  | ||||||
|       font-size: 36rpx; |  | ||||||
|     } |  | ||||||
| 
 |  | ||||||
|     .header-title { |  | ||||||
|       font-size: 36rpx; |  | ||||||
|       font-weight: bold; |  | ||||||
|       color: #333333; |  | ||||||
|     } |  | ||||||
| 
 |  | ||||||
|     .header-right { |  | ||||||
|       width: 40rpx; |  | ||||||
|     } |  | ||||||
|   } |  | ||||||
| 
 | 
 | ||||||
|   .main-content { |   .main-content { | ||||||
|     padding: 30rpx; |     padding: 30rpx; | ||||||
|  |  | ||||||
|  | @ -0,0 +1,141 @@ | ||||||
|  | <template> | ||||||
|  |   <view class="message-board-page"> | ||||||
|  |     <header-bar title="留言板" @leftClick="handleLeftClick"></header-bar> | ||||||
|  |     <view class="custom-tabs-box"> | ||||||
|  |       <u-tabs | ||||||
|  |         :list="tabList" | ||||||
|  |         :current="tabCurrent" | ||||||
|  |         @change="onTabChange" | ||||||
|  |         :is-scroll="false" | ||||||
|  |         :height="80" | ||||||
|  |         :font-size="28" | ||||||
|  |         active-color="#4A6CF7" | ||||||
|  |         inactive-color="#333333" | ||||||
|  |         :bar-width="120" | ||||||
|  |         :bar-height="4" | ||||||
|  |         bg-color="#ffffff" | ||||||
|  |         :item-width="200" | ||||||
|  |       ></u-tabs> | ||||||
|  |     </view> | ||||||
|  | 
 | ||||||
|  |     <!-- 内容区域包装器 --> | ||||||
|  |     <view class="content-wrapper"> | ||||||
|  |       <!-- 问答列表组件 --> | ||||||
|  |       <message-board | ||||||
|  |         :answerList="answerList" | ||||||
|  |         @delete="handleDelete" | ||||||
|  |       ></message-board> | ||||||
|  |     </view> | ||||||
|  | 
 | ||||||
|  |     <!-- 提示 --> | ||||||
|  |     <u-toast ref="uToast" /> | ||||||
|  |   </view> | ||||||
|  | </template> | ||||||
|  | 
 | ||||||
|  | <script> | ||||||
|  | import HeaderBar from "@/components/HeaderBar.vue"; | ||||||
|  | import MessageBoard from "@/components/AnswerList/messageBoard.vue"; | ||||||
|  | 
 | ||||||
|  | export default { | ||||||
|  |   components: { | ||||||
|  |     HeaderBar, | ||||||
|  |     MessageBoard, | ||||||
|  |   }, | ||||||
|  |   data() { | ||||||
|  |     return { | ||||||
|  |       tabList: [{ name: "未回复" }, { name: "已回复" }], | ||||||
|  |       tabCurrent: 0, | ||||||
|  |       activeTab: "unread", | ||||||
|  | 
 | ||||||
|  |       answerList: [ | ||||||
|  |         { | ||||||
|  |           id: 1, | ||||||
|  |           studentName: "浙江考生13024", | ||||||
|  |           studentAvatar: "/static/common/images/avatar.png", | ||||||
|  |           time: "2025/6/26 15:45:12", | ||||||
|  |           question: "学校在录取时有没有一些专业会有特殊要求?", | ||||||
|  |           fullAnswer: | ||||||
|  |             "考生身体健康状况必须符合教育部、原卫生部中国残疾人联合的《普通高等学校招生体检工作指导意见》和人力资源社会保障部", | ||||||
|  |           isReply: false, | ||||||
|  |         }, | ||||||
|  |         { | ||||||
|  |           id: 2, | ||||||
|  |           studentName: "浙江考生13024", | ||||||
|  |           studentAvatar: "/static/common/images/avatar.png", | ||||||
|  |           time: "2025/6/26 15:45:12", | ||||||
|  |           question: "学校在录取时有没有一些专业会有特殊要求?", | ||||||
|  |           teacherName: "招生办 张老师", | ||||||
|  |           teacherAvatar: "/static/common/images/avatar.png", | ||||||
|  |           replyTime: "2025/6/26 15:45:12", | ||||||
|  |           fullAnswer: | ||||||
|  |             "考生身体健康状况必须符合教育部、原卫生部中国残疾人联合的《普通高等学校招生体检工作指导意见》。", | ||||||
|  |           isReply: true, | ||||||
|  |         }, | ||||||
|  |         { | ||||||
|  |           id: 3, | ||||||
|  |           studentName: "浙江考生13024", | ||||||
|  |           studentAvatar: "/static/common/images/avatar.png", | ||||||
|  |           time: "2025/6/26 15:45:12", | ||||||
|  |           question: "学校在录取时有没有一些专业会有特殊要求?", | ||||||
|  |           teacherName: "招生办 张老师", | ||||||
|  |           // teacherAvatar: "/static/common/images/avatar.png", | ||||||
|  |           replyTime: "2025/6/26 15:45:12", | ||||||
|  |           fullAnswer: | ||||||
|  |             "考生身体健康状况必须符合教育部、原卫生部中国残疾人联合的《普通高等学校招生体检工作指导意见》和人力资源社会保障部、教育部、原卫生部、见》和人力资源社会保障部、教育部、原卫生部中共发布的相关规定。部分专业确有特殊要求,如航空服务类专业对身高、视力等有特殊要求,艺术类专业要求有艺术基础等。建议考生在填报志愿前,详细了解意向专业的招生要求。", | ||||||
|  |           isReply: true, | ||||||
|  |         }, | ||||||
|  |       ], | ||||||
|  |     }; | ||||||
|  |   }, | ||||||
|  |   computed: {}, | ||||||
|  |   methods: { | ||||||
|  |     handleLeftClick() { | ||||||
|  |       uni.navigateBack(); | ||||||
|  |     }, | ||||||
|  |     onTabChange(index) { | ||||||
|  |       this.tabCurrent = index; | ||||||
|  |       // 根据索引设置activeTab值 | ||||||
|  |       this.activeTab = index === 0 ? "unread" : "replied"; | ||||||
|  |     }, | ||||||
|  |     handleDelete(item, callback) { | ||||||
|  |       console.log("handleDelete", item); | ||||||
|  | 
 | ||||||
|  |       setTimeout(() => { | ||||||
|  |         this.$refs.uToast.show({ | ||||||
|  |           title: "撤回成功", | ||||||
|  |           type: "success", | ||||||
|  |         }); | ||||||
|  |         callback(true); | ||||||
|  |       }, 1500); | ||||||
|  |     }, | ||||||
|  |   }, | ||||||
|  | }; | ||||||
|  | </script> | ||||||
|  | 
 | ||||||
|  | <style lang="scss" scoped> | ||||||
|  | .message-board-page { | ||||||
|  |   height: 100vh; | ||||||
|  |   background-color: #f5f6fa; | ||||||
|  |   display: flex; | ||||||
|  |   flex-direction: column; | ||||||
|  |   position: relative; | ||||||
|  |   padding-top: 88rpx; | ||||||
|  | 
 | ||||||
|  |   .custom-tabs-box { | ||||||
|  |     display: flex; | ||||||
|  |     align-items: center; | ||||||
|  |     position: fixed; | ||||||
|  |     top: 88rpx; | ||||||
|  |     left: 0; | ||||||
|  |     right: 0; | ||||||
|  |     z-index: 98; | ||||||
|  |     background-color: #ffffff; | ||||||
|  |     box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   .content-wrapper { | ||||||
|  |     padding: 30rpx; | ||||||
|  |     margin-top: 80rpx; /* 为固定的tabs留出空间,与u-tabs的height属性值保持一致 */ | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </style> | ||||||
|  | @ -1,16 +1,9 @@ | ||||||
| <template> | <template> | ||||||
|   <view class="teacherInfo-container"> |   <view class="teacherInfo-container"> | ||||||
|     <view class="header"> |     <header-bar | ||||||
|       <div class="header-left"> |       title="老师详情" | ||||||
|         <u-icon |       @leftClick="handleLeftClick" | ||||||
|           class="header-left-icon" |     ></header-bar> | ||||||
|           name="arrow-left" |  | ||||||
|           @click="handleLeftClick" |  | ||||||
|         ></u-icon> |  | ||||||
|       </div> |  | ||||||
|       <text class="header-title">老师详情</text> |  | ||||||
|       <div></div> |  | ||||||
|     </view> |  | ||||||
| 
 | 
 | ||||||
|     <div class="teacher-info-card"> |     <div class="teacher-info-card"> | ||||||
|       <div class="card-content"> |       <div class="card-content"> | ||||||
|  | @ -58,36 +51,21 @@ | ||||||
|     <view class="teacher-answers"> |     <view class="teacher-answers"> | ||||||
|       <view class="answer-title">老师回答</view> |       <view class="answer-title">老师回答</view> | ||||||
| 
 | 
 | ||||||
|       <view |       <!-- 问答列表组件 --> | ||||||
|         class="answer-item" |       <answer-list :answerList="answerList"></answer-list> | ||||||
|         v-for="(item, index) in answerList" |  | ||||||
|         :key="item.id" |  | ||||||
|       > |  | ||||||
|         <view class="student-info"> |  | ||||||
|           <image class="student-avatar" :src="item.studentAvatar"></image> |  | ||||||
|           <text class="student-name">{{ item.studentName }}</text> |  | ||||||
|           <text class="answer-time">{{ item.time }}</text> |  | ||||||
|         </view> |  | ||||||
| 
 |  | ||||||
|         <view class="question"> |  | ||||||
|           <view class="question-tag">问</view> |  | ||||||
|           <view class="question-content">{{ item.question }}</view> |  | ||||||
|         </view> |  | ||||||
| 
 |  | ||||||
|         <view class="answer"> |  | ||||||
|           <view class="answer-tag">答</view> |  | ||||||
|           <view class="answer-content"> |  | ||||||
|             <view class="answer-text">{{ item.fullAnswer }}</view> |  | ||||||
|           </view> |  | ||||||
|         </view> |  | ||||||
|       </view> |  | ||||||
|     </view> |     </view> | ||||||
|   </view> |   </view> | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
| <script> | <script> | ||||||
|  | import HeaderBar from "@/components/HeaderBar.vue"; | ||||||
|  | import AnswerList from "@/components/AnswerList/index.vue"; | ||||||
|  | 
 | ||||||
| export default { | export default { | ||||||
|   components: {}, |   components: { | ||||||
|  |     HeaderBar, | ||||||
|  |     AnswerList, | ||||||
|  |   }, | ||||||
|   data() { |   data() { | ||||||
|     return { |     return { | ||||||
|       teacherId: "", |       teacherId: "", | ||||||
|  | @ -139,7 +117,7 @@ export default { | ||||||
| 
 | 
 | ||||||
|     // 在页面加载后检查文本是否超过三行 |     // 在页面加载后检查文本是否超过三行 | ||||||
|     this.$nextTick(() => { |     this.$nextTick(() => { | ||||||
|       this.checkTextOverflow(); |       // this.checkTextOverflow(); | ||||||
|     }); |     }); | ||||||
|   }, |   }, | ||||||
|   methods: { |   methods: { | ||||||
|  | @ -175,29 +153,7 @@ export default { | ||||||
|   background-size: 100% 100%; |   background-size: 100% 100%; | ||||||
|   background-position: 50%; |   background-position: 50%; | ||||||
| 
 | 
 | ||||||
|   .header { |   /* Header样式移至HeaderBar组件 */ | ||||||
|     position: fixed; |  | ||||||
|     top: 0; |  | ||||||
|     left: 0; |  | ||||||
|     right: 0; |  | ||||||
|     background-color: #ffffff; |  | ||||||
|     height: 88rpx; |  | ||||||
|     display: flex; |  | ||||||
|     align-items: center; |  | ||||||
|     justify-content: space-between; |  | ||||||
|     padding: 0 30rpx; |  | ||||||
|     z-index: 99; |  | ||||||
| 
 |  | ||||||
|     .header-left { |  | ||||||
|       font-size: 36rpx; |  | ||||||
|     } |  | ||||||
| 
 |  | ||||||
|     .header-title { |  | ||||||
|       font-size: 36rpx; |  | ||||||
|       font-weight: 500; |  | ||||||
|       color: #333333; |  | ||||||
|     } |  | ||||||
|   } |  | ||||||
| 
 | 
 | ||||||
|   .teacher-info-card { |   .teacher-info-card { | ||||||
|     // margin: 30rpx; |     // margin: 30rpx; | ||||||
|  | @ -305,143 +261,6 @@ export default { | ||||||
|     color: #333333; |     color: #333333; | ||||||
|     margin-bottom: 28rpx; |     margin-bottom: 28rpx; | ||||||
|   } |   } | ||||||
| 
 |  | ||||||
|   .answer-item { |  | ||||||
|     background-color: #ffffff; |  | ||||||
|     border-radius: 16rpx; |  | ||||||
|     padding: 32rpx; |  | ||||||
|     margin-bottom: 32rpx; |  | ||||||
|     border: 1px solid #ccc; |  | ||||||
| 
 |  | ||||||
|     .student-info { |  | ||||||
|       display: flex; |  | ||||||
|       align-items: center; |  | ||||||
|       margin-bottom: 32rpx; |  | ||||||
| 
 |  | ||||||
|       .student-avatar { |  | ||||||
|         width: 40rpx; |  | ||||||
|         height: 40rpx; |  | ||||||
|         border-radius: 20rpx; |  | ||||||
|         margin-right: 16rpx; |  | ||||||
|       } |  | ||||||
| 
 |  | ||||||
|       .student-name { |  | ||||||
|         flex: 1; |  | ||||||
|         font-size: 26rpx; |  | ||||||
|         color: #666666; |  | ||||||
|         font-weight: 500; |  | ||||||
|       } |  | ||||||
| 
 |  | ||||||
|       .answer-time { |  | ||||||
|         font-size: 24rpx; |  | ||||||
|         color: #666666; |  | ||||||
|       } |  | ||||||
|     } |  | ||||||
| 
 |  | ||||||
|     .question { |  | ||||||
|       display: flex; |  | ||||||
|       margin-bottom: 24rpx; |  | ||||||
| 
 |  | ||||||
|       .question-tag { |  | ||||||
|         width: 40rpx; |  | ||||||
|         height: 40rpx; |  | ||||||
|         background-color: #4e7eff; |  | ||||||
|         color: #ffffff; |  | ||||||
|         font-size: 24rpx; |  | ||||||
|         display: flex; |  | ||||||
|         align-items: center; |  | ||||||
|         justify-content: center; |  | ||||||
|         border-radius: 8rpx; |  | ||||||
|         margin-right: 32rpx; |  | ||||||
|         flex-shrink: 0; |  | ||||||
|         font-weight: 500; |  | ||||||
|       } |  | ||||||
| 
 |  | ||||||
|       .question-content { |  | ||||||
|         font-size: 32rpx; |  | ||||||
|         color: #333333; |  | ||||||
|         flex: 1; |  | ||||||
|       } |  | ||||||
|     } |  | ||||||
| 
 |  | ||||||
|     .answer { |  | ||||||
|       display: flex; |  | ||||||
|       align-items: flex-start; |  | ||||||
| 
 |  | ||||||
|       .answer-tag { |  | ||||||
|         width: 40rpx; |  | ||||||
|         height: 40rpx; |  | ||||||
|         background-color: #ffbd41; |  | ||||||
|         color: #ffffff; |  | ||||||
|         font-size: 24rpx; |  | ||||||
|         display: flex; |  | ||||||
|         align-items: center; |  | ||||||
|         justify-content: center; |  | ||||||
|         border-radius: 8rpx; |  | ||||||
|         margin-right: 32rpx; |  | ||||||
|         flex-shrink: 0; |  | ||||||
|         font-weight: 500; |  | ||||||
|       } |  | ||||||
| 
 |  | ||||||
|       .answer-content { |  | ||||||
|         font-size: 28rpx; |  | ||||||
|         color: #666666; |  | ||||||
|         flex: 1; |  | ||||||
|         position: relative; |  | ||||||
| 
 |  | ||||||
|         .answer-text { |  | ||||||
|           word-break: break-word; |  | ||||||
|           transition: all 0.3s; |  | ||||||
|         } |  | ||||||
| 
 |  | ||||||
|         &:not(.content-expanded) .answer-text { |  | ||||||
|           display: -webkit-box; |  | ||||||
|           -webkit-line-clamp: 3; |  | ||||||
|           -webkit-box-orient: vertical; |  | ||||||
|           overflow: hidden; |  | ||||||
|           text-overflow: ellipsis; |  | ||||||
|           position: relative; |  | ||||||
|         } |  | ||||||
| 
 |  | ||||||
|         &.content-expanded { |  | ||||||
|           .expand-btn-container { |  | ||||||
|             margin-top: 16rpx; |  | ||||||
|             text-align: right; |  | ||||||
|           } |  | ||||||
|         } |  | ||||||
| 
 |  | ||||||
|         .expand-btn-container { |  | ||||||
|           display: block; |  | ||||||
|         } |  | ||||||
| 
 |  | ||||||
|         &:not(.content-expanded) .expand-btn-container { |  | ||||||
|           position: absolute; |  | ||||||
|           right: 0; |  | ||||||
|           bottom: 0; |  | ||||||
|           z-index: 2; |  | ||||||
|           background-color: #ffffff; |  | ||||||
|           padding-left: 10rpx; |  | ||||||
|           padding-right: 0; |  | ||||||
|         } |  | ||||||
| 
 |  | ||||||
|         .expand-btn { |  | ||||||
|           color: #4e7eff; |  | ||||||
|           display: inline-block; |  | ||||||
|           font-size: 26rpx; |  | ||||||
|           cursor: pointer; |  | ||||||
|           white-space: nowrap; |  | ||||||
|           padding: 0 4rpx; |  | ||||||
| 
 |  | ||||||
|           .expand-icon { |  | ||||||
|             font-size: 20rpx; |  | ||||||
|             display: inline-block; |  | ||||||
|             vertical-align: middle; |  | ||||||
|             margin-left: 4rpx; |  | ||||||
|           } |  | ||||||
|         } |  | ||||||
|       } |  | ||||||
|     } |  | ||||||
|   } |  | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| /* 响应式布局 - PC端样式 */ | /* 响应式布局 - PC端样式 */ | ||||||
|  |  | ||||||
|  | @ -151,6 +151,7 @@ | ||||||
| <script> | <script> | ||||||
| import { generateSign } from "@/utils/signUtil.js"; | import { generateSign } from "@/utils/signUtil.js"; | ||||||
| import { getUserInfoFromJWT } from "@/utils/jwt-util"; | import { getUserInfoFromJWT } from "@/utils/jwt-util"; | ||||||
|  | import md5 from "js-md5"; | ||||||
| 
 | 
 | ||||||
| export default { | export default { | ||||||
|   data() { |   data() { | ||||||
|  | @ -166,7 +167,7 @@ export default { | ||||||
|         captchaId: "", // 图形验证码ID |         captchaId: "", // 图形验证码ID | ||||||
|       }, |       }, | ||||||
|       captchaUrl: "", // 图形验证码URL,实际使用时需替换 |       captchaUrl: "", // 图形验证码URL,实际使用时需替换 | ||||||
|       loginType: "code", // 默认验证码登录,与图片一致 |       loginType: "psd", // 教师默认密码登录 | ||||||
|       codeText: "获取验证码", |       codeText: "获取验证码", | ||||||
|       countdown: 60, |       countdown: 60, | ||||||
|       timer: null, |       timer: null, | ||||||
|  | @ -178,6 +179,11 @@ export default { | ||||||
|       }, |       }, | ||||||
|     }; |     }; | ||||||
|   }, |   }, | ||||||
|  |   onLoad(e) { | ||||||
|  |     // console.log("onLoad", e.type); // 0:学生 1:教师 | ||||||
|  |     this.isTeacher = e.type == 1; | ||||||
|  |     this.loginType = e.type == 1 ? "psd" : "code"; | ||||||
|  |   }, | ||||||
|   mounted() { |   mounted() { | ||||||
|     this.refreshCaptcha(); |     this.refreshCaptcha(); | ||||||
|   }, |   }, | ||||||
|  | @ -188,8 +194,12 @@ export default { | ||||||
|   }, |   }, | ||||||
|   methods: { |   methods: { | ||||||
|     switchLoginType(type) { |     switchLoginType(type) { | ||||||
|       this.loginType = type; |  | ||||||
|       this.clearErrors(); |       this.clearErrors(); | ||||||
|  |       this.clearLoginParams(); | ||||||
|  |       this.loginType = type; | ||||||
|  |       if (this.loginType === "code") { | ||||||
|  |         this.refreshCaptcha(); | ||||||
|  |       } | ||||||
|     }, |     }, | ||||||
| 
 | 
 | ||||||
|     // 刷新图形验证码 |     // 刷新图形验证码 | ||||||
|  | @ -224,7 +234,11 @@ export default { | ||||||
| 
 | 
 | ||||||
|       console.log("获取验证码...", params); |       console.log("获取验证码...", params); | ||||||
| 
 | 
 | ||||||
|       this.$u.api.GetStuVerifyCode(params).then((res) => { |       const apiMethod = this.isTeacher | ||||||
|  |         ? "GetTeacherVerifyCode" | ||||||
|  |         : "GetStuVerifyCode"; | ||||||
|  | 
 | ||||||
|  |       this.$u.api[apiMethod](params).then((res) => { | ||||||
|         console.log("获取验证码...", res); |         console.log("获取验证码...", res); | ||||||
|         if (res.succeed) { |         if (res.succeed) { | ||||||
|           this.$refs.uToast.show({ |           this.$refs.uToast.show({ | ||||||
|  | @ -330,6 +344,16 @@ export default { | ||||||
|         captcha: "", |         captcha: "", | ||||||
|       }; |       }; | ||||||
|     }, |     }, | ||||||
|  |     // 清除登录参数 | ||||||
|  |     clearLoginParams() { | ||||||
|  |       this.loginParams = { | ||||||
|  |         phone: "", | ||||||
|  |         password: "", | ||||||
|  |         code: "", | ||||||
|  |         captcha: "", // 图形验证码 | ||||||
|  |         captchaId: "", // 图形验证码ID | ||||||
|  |       }; | ||||||
|  |     }, | ||||||
| 
 | 
 | ||||||
|     // 登录 |     // 登录 | ||||||
|     login() { |     login() { | ||||||
|  | @ -378,25 +402,21 @@ export default { | ||||||
|       }); |       }); | ||||||
| 
 | 
 | ||||||
|       if (this.isTeacher) { |       if (this.isTeacher) { | ||||||
|         this.teacherLogin(); |         if (this.loginType === "psd") { | ||||||
|  |           this.teacherLogin(); // 密码登录 | ||||||
|         } else { |         } else { | ||||||
|         this.stuLogin(); |           this.teacherLoginByCode(); // 验证码登录 | ||||||
|  |         } | ||||||
|  |       } else { | ||||||
|  |         this.stuLogin(); // 学生登录 | ||||||
|       } |       } | ||||||
|     }, |     }, | ||||||
| 
 | 
 | ||||||
|     // 学生登录 |     // 通用登录处理函数 | ||||||
|     stuLogin() { |     handleLogin(apiMethod, params, userType = 0) { | ||||||
|       // 构建登录参数 |       // console.log("登录参数:", params); | ||||||
|       const params = { |  | ||||||
|         phone: this.loginParams.phone, |  | ||||||
|         // password: this.loginParams.password, |  | ||||||
|         password: "", |  | ||||||
|         code: this.loginParams.code, |  | ||||||
|       }; |  | ||||||
| 
 | 
 | ||||||
|       console.log("登录参数:", params); |       this.$u.api[apiMethod](params).then((res) => { | ||||||
| 
 |  | ||||||
|       this.$u.api.StuLogin(params).then((res) => { |  | ||||||
|         console.log("登录结果:", res); |         console.log("登录结果:", res); | ||||||
|         if (!res.succeed) { |         if (!res.succeed) { | ||||||
|           this.$refs.uToast.show({ |           this.$refs.uToast.show({ | ||||||
|  | @ -417,20 +437,56 @@ export default { | ||||||
|         // 保存登录后得到的用户数据 |         // 保存登录后得到的用户数据 | ||||||
|         this.$u.vuex("vuex_token", token); |         this.$u.vuex("vuex_token", token); | ||||||
|         this.$u.vuex("vuex_user", userInfo); |         this.$u.vuex("vuex_user", userInfo); | ||||||
|  |         this.$u.vuex("vuex_userType", userType); // 0:学生 1:教师 | ||||||
|  | 
 | ||||||
|  |         // 保存用户类型到本地存储,用于退出登录时重定向 | ||||||
|  |         // uni.setStorageSync("userType", userType); | ||||||
| 
 | 
 | ||||||
|         // 跳转至首页 |         // 跳转至首页 | ||||||
|  |         const url = this.isTeacher | ||||||
|  |           ? "/pages/notes/index" | ||||||
|  |           : "/pages/home/index/index"; | ||||||
|         uni.reLaunch({ |         uni.reLaunch({ | ||||||
|           url: "/pages/home/index/index", |           url: url, | ||||||
|         }); |         }); | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
| 
 | 
 | ||||||
|     // 教师登录 |     // 学生登录 | ||||||
|  |     stuLogin() { | ||||||
|  |       // 构建登录参数 | ||||||
|  |       const params = { | ||||||
|  |         phone: this.loginParams.phone, | ||||||
|  |         password: "", | ||||||
|  |         code: this.loginParams.code, | ||||||
|  |       }; | ||||||
|  | 
 | ||||||
|  |       // 使用通用登录处理函数,传入学生特定的参数 | ||||||
|  |       this.handleLogin("StuLogin", params, 0); | ||||||
|  |     }, | ||||||
|  | 
 | ||||||
|  |     // 教师密码登录 | ||||||
|     teacherLogin() { |     teacherLogin() { | ||||||
|       return; |       // 构建登录参数 | ||||||
|       this.$u.api.TeacherLogin(this.loginParams).then((res) => { |       const params = { | ||||||
|         console.log(res); |         phone: this.loginParams.phone, | ||||||
|       }); |         password: md5(this.loginParams.password), | ||||||
|  |         code: this.loginParams.code, | ||||||
|  |       }; | ||||||
|  | 
 | ||||||
|  |       this.handleLogin("TeacherLogin", params, 1); | ||||||
|  |     }, | ||||||
|  | 
 | ||||||
|  |     // 教师验证码登录 | ||||||
|  |     teacherLoginByCode() { | ||||||
|  |       // 构建登录参数 | ||||||
|  |       const params = { | ||||||
|  |         phone: this.loginParams.phone, | ||||||
|  |         password: "", | ||||||
|  |         code: this.loginParams.code, | ||||||
|  |       }; | ||||||
|  | 
 | ||||||
|  |       this.handleLogin("TeacherLoginByCode", params, 1); | ||||||
|     }, |     }, | ||||||
| 
 | 
 | ||||||
|     // 手机号输入过滤 |     // 手机号输入过滤 | ||||||
|  | @ -554,7 +610,18 @@ export default { | ||||||
| 
 | 
 | ||||||
|     .form-content { |     .form-content { | ||||||
|       .form-item { |       .form-item { | ||||||
|         margin-bottom: 32rpx; |         margin-bottom: 20rpx; | ||||||
|  |         position: relative; | ||||||
|  |         padding-bottom: 40rpx; /* 为错误提示预留空间 */ | ||||||
|  | 
 | ||||||
|  |         .error-tip { | ||||||
|  |           position: absolute; | ||||||
|  |           bottom: 0; | ||||||
|  |           font-size: 24rpx; | ||||||
|  |           color: #ff6481; | ||||||
|  |           height: 40rpx; /* 固定高度 */ | ||||||
|  |           line-height: 40rpx; | ||||||
|  |         } | ||||||
| 
 | 
 | ||||||
|         .form-label { |         .form-label { | ||||||
|           display: flex; |           display: flex; | ||||||
|  | @ -628,14 +695,6 @@ export default { | ||||||
|             } |             } | ||||||
|           } |           } | ||||||
|         } |         } | ||||||
| 
 |  | ||||||
|         .error-tip { |  | ||||||
|           display: block; |  | ||||||
|           font-size: 24rpx; |  | ||||||
|           color: #ff6481; |  | ||||||
|           margin-top: 10rpx; |  | ||||||
|           padding-left: 10rpx; |  | ||||||
|         } |  | ||||||
|       } |       } | ||||||
|     } |     } | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
										
											
												File diff suppressed because it is too large
												Load Diff
											
										
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 1.9 KiB | 
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 1.7 KiB | 
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 1.3 KiB | 
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 2.0 KiB | 
|  | @ -14,7 +14,7 @@ try { | ||||||
| 
 | 
 | ||||||
| // 需要永久存储,且下次APP启动需要取出的,在state中的变量名
 | // 需要永久存储,且下次APP启动需要取出的,在state中的变量名
 | ||||||
| // let saveStateKeys = ['vuex_user', 'vuex_token', 'vuex_msgList', 'vuex_glyType', 'vuex_userLocation','vuex_userInfo','vuex_user_hobby'];
 | // let saveStateKeys = ['vuex_user', 'vuex_token', 'vuex_msgList', 'vuex_glyType', 'vuex_userLocation','vuex_userInfo','vuex_user_hobby'];
 | ||||||
| let saveStateKeys = ['vuex_user', 'vuex_token']; | let saveStateKeys = ['vuex_user', 'vuex_token', 'vuex_userType']; | ||||||
| 
 | 
 | ||||||
| // 保存变量到本地存储中
 | // 保存变量到本地存储中
 | ||||||
| const saveLifeData = function (key, value) { | const saveLifeData = function (key, value) { | ||||||
|  | @ -34,6 +34,7 @@ const store = new Vuex.Store({ | ||||||
|         vuex_teacherInfo: lifeData.vuex_teacherInfo ? lifeData.vuex_teacherInfo : '', |         vuex_teacherInfo: lifeData.vuex_teacherInfo ? lifeData.vuex_teacherInfo : '', | ||||||
|         // 如果上面从本地获取的lifeData对象下有对应的属性,就赋值给state中对应的变量
 |         // 如果上面从本地获取的lifeData对象下有对应的属性,就赋值给state中对应的变量
 | ||||||
|         // 加上vuex_前缀,是防止变量名冲突,也让人一目了然
 |         // 加上vuex_前缀,是防止变量名冲突,也让人一目了然
 | ||||||
|  |         vuex_userType: lifeData.vuex_userType ? lifeData.vuex_userType : 0, // 0:学生 1:教师
 | ||||||
|         vuex_user: lifeData.vuex_user ? lifeData.vuex_user : '', |         vuex_user: lifeData.vuex_user ? lifeData.vuex_user : '', | ||||||
|         vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '', |         vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '', | ||||||
|         vuex_glyType: lifeData.vuex_glyType ? lifeData.vuex_glyType : '', |         vuex_glyType: lifeData.vuex_glyType ? lifeData.vuex_glyType : '', | ||||||
|  |  | ||||||
|  | @ -0,0 +1,5 @@ | ||||||
|  | { | ||||||
|  |   "vueCompilerOptions": { | ||||||
|  |     "globalTypesPath": "./types/global.d.ts" | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | @ -0,0 +1,128 @@ | ||||||
|  | // @ts-nocheck
 | ||||||
|  | export {}; | ||||||
|  | 
 | ||||||
|  | ; declare global { | ||||||
|  | 	const __VLS_directiveBindingRestFields: { instance: null, oldValue: null, modifiers: any, dir: any }; | ||||||
|  | 	const __VLS_unref: typeof import('vue').unref; | ||||||
|  | 	const __VLS_placeholder: any; | ||||||
|  | 
 | ||||||
|  | 	type __VLS_NativeElements = __VLS_SpreadMerge<SVGElementTagNameMap, HTMLElementTagNameMap>; | ||||||
|  | 	type __VLS_IntrinsicElements = import('vue/jsx-runtime').JSX.IntrinsicElements; | ||||||
|  | 	type __VLS_Element = import('vue/jsx-runtime').JSX.Element; | ||||||
|  | 	type __VLS_GlobalComponents = import('vue').GlobalComponents; | ||||||
|  | 	type __VLS_GlobalDirectives = import('vue').GlobalDirectives; | ||||||
|  | 	type __VLS_IsAny<T> = 0 extends 1 & T ? true : false; | ||||||
|  | 	type __VLS_PickNotAny<A, B> = __VLS_IsAny<A> extends true ? B : A; | ||||||
|  | 	type __VLS_SpreadMerge<A, B> = Omit<A, keyof B> & B; | ||||||
|  | 	type __VLS_WithComponent<N0 extends string, LocalComponents, Self, N1 extends string, N2 extends string, N3 extends string> = | ||||||
|  | 		N1 extends keyof LocalComponents ? N1 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : { [K in N0]: LocalComponents[N1] } : | ||||||
|  | 		N2 extends keyof LocalComponents ? N2 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : { [K in N0]: LocalComponents[N2] } : | ||||||
|  | 		N3 extends keyof LocalComponents ? N3 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : { [K in N0]: LocalComponents[N3] } : | ||||||
|  | 		Self extends object ? { [K in N0]: Self } : | ||||||
|  | 		N1 extends keyof __VLS_GlobalComponents ? N1 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : { [K in N0]: __VLS_GlobalComponents[N1] } : | ||||||
|  | 		N2 extends keyof __VLS_GlobalComponents ? N2 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : { [K in N0]: __VLS_GlobalComponents[N2] } : | ||||||
|  | 		N3 extends keyof __VLS_GlobalComponents ? N3 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : { [K in N0]: __VLS_GlobalComponents[N3] } : | ||||||
|  | 		{}; | ||||||
|  | 	type __VLS_FunctionalComponentCtx<T, K> = __VLS_PickNotAny<'__ctx' extends keyof __VLS_PickNotAny<K, {}> | ||||||
|  | 		? K extends { __ctx?: infer Ctx } ? NonNullable<Ctx> : never : any | ||||||
|  | 		, T extends (props: any, ctx: infer Ctx) => any ? Ctx : any | ||||||
|  | 	>; | ||||||
|  | 	type __VLS_FunctionalComponentProps<T, K> = '__ctx' extends keyof __VLS_PickNotAny<K, {}> | ||||||
|  | 		? K extends { __ctx?: { props?: infer P } } ? NonNullable<P> : never | ||||||
|  | 		: T extends (props: infer P, ...args: any) => any ? P | ||||||
|  | 		: {}; | ||||||
|  | 	type __VLS_FunctionalComponent<T> = (props: (T extends { $props: infer Props } ? Props : {}) & Record<string, unknown>, ctx?: any) => __VLS_Element & { | ||||||
|  | 		__ctx?: { | ||||||
|  | 			attrs?: any; | ||||||
|  | 			slots?: T extends { $slots: infer Slots } ? Slots : Record<string, any>; | ||||||
|  | 			emit?: T extends { $emit: infer Emit } ? Emit : {}; | ||||||
|  | 			props?: (T extends { $props: infer Props } ? Props : {}) & Record<string, unknown>; | ||||||
|  | 			expose?: (exposed: T) => void; | ||||||
|  | 		}; | ||||||
|  | 	}; | ||||||
|  | 	type __VLS_IsFunction<T, K> = K extends keyof T | ||||||
|  | 		? __VLS_IsAny<T[K]> extends false | ||||||
|  | 		? unknown extends T[K] | ||||||
|  | 		? false | ||||||
|  | 		: true | ||||||
|  | 		: false | ||||||
|  | 		: false; | ||||||
|  | 	type __VLS_NormalizeComponentEvent< | ||||||
|  | 		Props, | ||||||
|  | 		Emits, | ||||||
|  | 		onEvent extends keyof Props, | ||||||
|  | 		Event extends keyof Emits, | ||||||
|  | 		CamelizedEvent extends keyof Emits, | ||||||
|  | 	> = __VLS_IsFunction<Props, onEvent> extends true | ||||||
|  | 		? Props | ||||||
|  | 		: __VLS_IsFunction<Emits, Event> extends true | ||||||
|  | 			? { [K in onEvent]?: Emits[Event] } | ||||||
|  | 			: __VLS_IsFunction<Emits, CamelizedEvent> extends true | ||||||
|  | 				? { [K in onEvent]?: Emits[CamelizedEvent] } | ||||||
|  | 				: Props; | ||||||
|  | 	// fix https://github.com/vuejs/language-tools/issues/926
 | ||||||
|  | 	type __VLS_UnionToIntersection<U> = (U extends unknown ? (arg: U) => unknown : never) extends ((arg: infer P) => unknown) ? P : never; | ||||||
|  | 	type __VLS_OverloadUnionInner<T, U = unknown> = U & T extends (...args: infer A) => infer R | ||||||
|  | 		? U extends T | ||||||
|  | 		? never | ||||||
|  | 		: __VLS_OverloadUnionInner<T, Pick<T, keyof T> & U & ((...args: A) => R)> | ((...args: A) => R) | ||||||
|  | 		: never; | ||||||
|  | 	type __VLS_OverloadUnion<T> = Exclude< | ||||||
|  | 		__VLS_OverloadUnionInner<(() => never) & T>, | ||||||
|  | 		T extends () => never ? never : () => never | ||||||
|  | 	>; | ||||||
|  | 	type __VLS_ConstructorOverloads<T> = __VLS_OverloadUnion<T> extends infer F | ||||||
|  | 		? F extends (event: infer E, ...args: infer A) => any | ||||||
|  | 		? { [K in E & string]: (...args: A) => void; } | ||||||
|  | 		: never | ||||||
|  | 		: never; | ||||||
|  | 	type __VLS_NormalizeEmits<T> = __VLS_PrettifyGlobal< | ||||||
|  | 		__VLS_UnionToIntersection< | ||||||
|  | 			__VLS_ConstructorOverloads<T> & { | ||||||
|  | 				[K in keyof T]: T[K] extends any[] ? { (...args: T[K]): void } : never | ||||||
|  | 			} | ||||||
|  | 		> | ||||||
|  | 	>; | ||||||
|  | 	type __VLS_ResolveEmits< | ||||||
|  | 		Comp, | ||||||
|  | 		Emits, | ||||||
|  | 		TypeEmits = Comp extends { __typeEmits?: infer T } ? unknown extends T ? {} : import('vue').ShortEmitsToObject<T> : {}, | ||||||
|  | 		NormalizedEmits = __VLS_NormalizeEmits<Emits> extends infer E ? string extends keyof E ? {} : E : never, | ||||||
|  | 	> = __VLS_SpreadMerge<NormalizedEmits, TypeEmits>; | ||||||
|  | 	type __VLS_ResolveDirectives<T> = { | ||||||
|  | 		[K in Exclude<keyof T, keyof __VLS_GlobalDirectives> & string as `v${Capitalize<K>}`]: T[K]; | ||||||
|  | 	}; | ||||||
|  | 	type __VLS_PrettifyGlobal<T> = { [K in keyof T as K]: T[K]; } & {}; | ||||||
|  | 	type __VLS_UseTemplateRef<T> = Readonly<import('vue').ShallowRef<T | null>>; | ||||||
|  | 
 | ||||||
|  | 	function __VLS_getVForSourceType<T extends number | string | any[] | Iterable<any>>(source: T): [ | ||||||
|  | 		item: T extends number ? number | ||||||
|  | 			: T extends string ? string | ||||||
|  | 			: T extends any[] ? T[number] | ||||||
|  | 			: T extends Iterable<infer T1> ? T1 | ||||||
|  | 			: any, | ||||||
|  | 		index: number, | ||||||
|  | 	][]; | ||||||
|  | 	function __VLS_getVForSourceType<T>(source: T): [ | ||||||
|  | 		item: T[keyof T], | ||||||
|  | 		key: keyof T, | ||||||
|  | 		index: number, | ||||||
|  | 	][]; | ||||||
|  | 	function __VLS_getSlotParameters<S, D extends S>(slot: S, decl?: D): | ||||||
|  | 		D extends (...args: infer P) => any ? P : any[]; | ||||||
|  | 	function __VLS_asFunctionalDirective<T>(dir: T): T extends import('vue').ObjectDirective | ||||||
|  | 		? NonNullable<T['created' | 'beforeMount' | 'mounted' | 'beforeUpdate' | 'updated' | 'beforeUnmount' | 'unmounted']> | ||||||
|  | 		: T extends (...args: any) => any | ||||||
|  | 			? T | ||||||
|  | 			: (arg1: unknown, arg2: unknown, arg3: unknown, arg4: unknown) => void; | ||||||
|  | 	function __VLS_makeOptional<T>(t: T): { [K in keyof T]?: T[K] }; | ||||||
|  | 	function __VLS_asFunctionalComponent<T, K = T extends new (...args: any) => any ? InstanceType<T> : unknown>(t: T, instance?: K): | ||||||
|  | 		T extends new (...args: any) => any ? __VLS_FunctionalComponent<K> | ||||||
|  | 		: T extends () => any ? (props: {}, ctx?: any) => ReturnType<T> | ||||||
|  | 		: T extends (...args: any) => any ? T | ||||||
|  | 		: __VLS_FunctionalComponent<{}>; | ||||||
|  | 	function __VLS_functionalComponentArgsRest<T extends (...args: any) => any>(t: T): 2 extends Parameters<T>['length'] ? [any] : []; | ||||||
|  | 	function __VLS_asFunctionalElement<T>(tag: T, endTag?: T): (attrs: T & Record<string, unknown>) => void; | ||||||
|  | 	function __VLS_asFunctionalSlot<S>(slot: S): S extends () => infer R ? (props: {}) => R : NonNullable<S>; | ||||||
|  | 	function __VLS_tryAsConstant<const T>(t: T): T; | ||||||
|  | } | ||||||
|  | @ -0,0 +1,8 @@ | ||||||
|  | ## 1.0.3(2022-01-21) | ||||||
|  | - 优化 组件示例 | ||||||
|  | ## 1.0.2(2021-11-22) | ||||||
|  | - 修复 / 符号在 vue 不同版本兼容问题引起的报错问题 | ||||||
|  | ## 1.0.1(2021-11-22) | ||||||
|  | - 修复 vue3中scss语法兼容问题 | ||||||
|  | ## 1.0.0(2021-11-18) | ||||||
|  | - init | ||||||
|  | @ -0,0 +1 @@ | ||||||
|  | @import './styles/index.scss'; | ||||||
|  | @ -0,0 +1,82 @@ | ||||||
|  | { | ||||||
|  |   "id": "uni-scss", | ||||||
|  |   "displayName": "uni-scss 辅助样式", | ||||||
|  |   "version": "1.0.3", | ||||||
|  |   "description": "uni-sass是uni-ui提供的一套全局样式 ,通过一些简单的类名和sass变量,实现简单的页面布局操作,比如颜色、边距、圆角等。", | ||||||
|  |   "keywords": [ | ||||||
|  |     "uni-scss", | ||||||
|  |     "uni-ui", | ||||||
|  |     "辅助样式" | ||||||
|  | ], | ||||||
|  |   "repository": "https://github.com/dcloudio/uni-ui", | ||||||
|  |   "engines": { | ||||||
|  |     "HBuilderX": "^3.1.0" | ||||||
|  |   }, | ||||||
|  |   "dcloudext": { | ||||||
|  |     "category": [ | ||||||
|  |         "JS SDK", | ||||||
|  |         "通用 SDK" | ||||||
|  |     ], | ||||||
|  |     "sale": { | ||||||
|  |       "regular": { | ||||||
|  |         "price": "0.00" | ||||||
|  |       }, | ||||||
|  |       "sourcecode": { | ||||||
|  |         "price": "0.00" | ||||||
|  |       } | ||||||
|  |     }, | ||||||
|  |     "contact": { | ||||||
|  |       "qq": "" | ||||||
|  |     }, | ||||||
|  |     "declaration": { | ||||||
|  |       "ads": "无", | ||||||
|  |       "data": "无", | ||||||
|  |       "permissions": "无" | ||||||
|  |     }, | ||||||
|  |     "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" | ||||||
|  |   }, | ||||||
|  |   "uni_modules": { | ||||||
|  |     "dependencies": [], | ||||||
|  |     "encrypt": [], | ||||||
|  |     "platforms": { | ||||||
|  |       "cloud": { | ||||||
|  |         "tcb": "y", | ||||||
|  |         "aliyun": "y" | ||||||
|  |       }, | ||||||
|  |       "client": { | ||||||
|  |         "App": { | ||||||
|  |           "app-vue": "y", | ||||||
|  |           "app-nvue": "u" | ||||||
|  |         }, | ||||||
|  |         "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" | ||||||
|  |         }, | ||||||
|  |         "快应用": { | ||||||
|  |           "华为": "n", | ||||||
|  |           "联盟": "n" | ||||||
|  |         }, | ||||||
|  |         "Vue": { | ||||||
|  |             "vue2": "y", | ||||||
|  |             "vue3": "y" | ||||||
|  |         } | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | @ -0,0 +1,4 @@ | ||||||
|  | `uni-sass` 是 `uni-ui`提供的一套全局样式 ,通过一些简单的类名和`sass`变量,实现简单的页面布局操作,比如颜色、边距、圆角等。 | ||||||
|  | 
 | ||||||
|  | ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass) | ||||||
|  | #### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839  | ||||||
|  | @ -0,0 +1,7 @@ | ||||||
|  | @import './setting/_variables.scss'; | ||||||
|  | @import './setting/_border.scss'; | ||||||
|  | @import './setting/_color.scss'; | ||||||
|  | @import './setting/_space.scss'; | ||||||
|  | @import './setting/_radius.scss'; | ||||||
|  | @import './setting/_text.scss'; | ||||||
|  | @import './setting/_styles.scss'; | ||||||
|  | @ -0,0 +1,3 @@ | ||||||
|  | .uni-border { | ||||||
|  | 	border: 1px $uni-border-1 solid; | ||||||
|  | } | ||||||
|  | @ -0,0 +1,66 @@ | ||||||
|  | 
 | ||||||
|  | // TODO 暂时不需要 class ,需要用户使用变量实现 ,如果使用类名其实并不推荐 | ||||||
|  | // @mixin get-styles($k,$c) { | ||||||
|  | // 	@if $k == size or $k == weight{ | ||||||
|  | // 		font-#{$k}:#{$c} | ||||||
|  | // 	}@else{ | ||||||
|  | // 		#{$k}:#{$c} | ||||||
|  | // 	} | ||||||
|  | // } | ||||||
|  | $uni-ui-color:( | ||||||
|  | 	// 主色 | ||||||
|  | 	primary: $uni-primary, | ||||||
|  | 	primary-disable: $uni-primary-disable, | ||||||
|  | 	primary-light: $uni-primary-light, | ||||||
|  | 	// 辅助色 | ||||||
|  | 	success: $uni-success, | ||||||
|  | 	success-disable: $uni-success-disable, | ||||||
|  | 	success-light: $uni-success-light, | ||||||
|  | 	warning: $uni-warning, | ||||||
|  | 	warning-disable: $uni-warning-disable, | ||||||
|  | 	warning-light: $uni-warning-light, | ||||||
|  | 	error: $uni-error, | ||||||
|  | 	error-disable: $uni-error-disable, | ||||||
|  | 	error-light: $uni-error-light, | ||||||
|  | 	info: $uni-info, | ||||||
|  | 	info-disable: $uni-info-disable, | ||||||
|  | 	info-light: $uni-info-light, | ||||||
|  | 	// 中性色 | ||||||
|  | 	main-color: $uni-main-color, | ||||||
|  | 	base-color: $uni-base-color, | ||||||
|  | 	secondary-color: $uni-secondary-color, | ||||||
|  | 	extra-color: $uni-extra-color, | ||||||
|  | 	// 背景色 | ||||||
|  | 	bg-color: $uni-bg-color, | ||||||
|  | 	// 边框颜色 | ||||||
|  | 	border-1: $uni-border-1, | ||||||
|  | 	border-2: $uni-border-2, | ||||||
|  | 	border-3: $uni-border-3, | ||||||
|  | 	border-4: $uni-border-4, | ||||||
|  | 	// 黑色 | ||||||
|  | 	black:$uni-black, | ||||||
|  | 	// 白色 | ||||||
|  | 	white:$uni-white, | ||||||
|  | 	// 透明 | ||||||
|  | 	transparent:$uni-transparent | ||||||
|  | ) !default; | ||||||
|  | @each $key, $child in $uni-ui-color { | ||||||
|  | 	.uni-#{"" + $key} { | ||||||
|  | 		color: $child; | ||||||
|  | 	} | ||||||
|  | 	.uni-#{"" + $key}-bg { | ||||||
|  | 		background-color: $child; | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  | .uni-shadow-sm { | ||||||
|  | 	box-shadow: $uni-shadow-sm; | ||||||
|  | } | ||||||
|  | .uni-shadow-base { | ||||||
|  | 	box-shadow: $uni-shadow-base; | ||||||
|  | } | ||||||
|  | .uni-shadow-lg { | ||||||
|  | 	box-shadow: $uni-shadow-lg; | ||||||
|  | } | ||||||
|  | .uni-mask { | ||||||
|  | 	background-color:$uni-mask; | ||||||
|  | } | ||||||
|  | @ -0,0 +1,55 @@ | ||||||
|  | @mixin radius($r,$d:null ,$important: false){ | ||||||
|  |   $radius-value:map-get($uni-radius, $r) if($important, !important, null); | ||||||
|  |   // Key exists within the $uni-radius variable | ||||||
|  |   @if (map-has-key($uni-radius, $r) and  $d){ | ||||||
|  | 		@if $d == t { | ||||||
|  | 				border-top-left-radius:$radius-value; | ||||||
|  | 				border-top-right-radius:$radius-value; | ||||||
|  | 		}@else if $d == r { | ||||||
|  | 				border-top-right-radius:$radius-value; | ||||||
|  | 				border-bottom-right-radius:$radius-value; | ||||||
|  | 		}@else if $d == b { | ||||||
|  | 				border-bottom-left-radius:$radius-value; | ||||||
|  | 				border-bottom-right-radius:$radius-value; | ||||||
|  | 		}@else if $d == l { | ||||||
|  | 				border-top-left-radius:$radius-value; | ||||||
|  | 				border-bottom-left-radius:$radius-value; | ||||||
|  | 		}@else if $d == tl { | ||||||
|  | 				border-top-left-radius:$radius-value; | ||||||
|  | 		}@else if $d == tr { | ||||||
|  | 				border-top-right-radius:$radius-value; | ||||||
|  | 		}@else if $d == br { | ||||||
|  | 				border-bottom-right-radius:$radius-value; | ||||||
|  | 		}@else if $d == bl { | ||||||
|  | 				border-bottom-left-radius:$radius-value; | ||||||
|  | 		} | ||||||
|  |   }@else{ | ||||||
|  | 		border-radius:$radius-value; | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | @each $key, $child in $uni-radius { | ||||||
|  | 	@if($key){ | ||||||
|  | 		.uni-radius-#{"" + $key} { | ||||||
|  | 				@include radius($key) | ||||||
|  | 		} | ||||||
|  | 	}@else{ | ||||||
|  | 		.uni-radius { | ||||||
|  | 				@include radius($key) | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | @each $direction in t, r, b, l,tl, tr, br, bl { | ||||||
|  | 	@each $key, $child in $uni-radius { | ||||||
|  | 		@if($key){ | ||||||
|  | 			.uni-radius-#{"" + $direction}-#{"" + $key} { | ||||||
|  | 				@include radius($key,$direction,false) | ||||||
|  | 			} | ||||||
|  | 		}@else{ | ||||||
|  | 			.uni-radius-#{$direction} { | ||||||
|  | 				@include radius($key,$direction,false) | ||||||
|  | 			} | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  | @ -0,0 +1,56 @@ | ||||||
|  | 
 | ||||||
|  | @mixin fn($space,$direction,$size,$n) { | ||||||
|  | 	@if $n { | ||||||
|  | 		#{$space}-#{$direction}: #{$size*$uni-space-root}px | ||||||
|  | 	} @else { | ||||||
|  | 		 #{$space}-#{$direction}: #{-$size*$uni-space-root}px | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  | @mixin get-styles($direction,$i,$space,$n){ | ||||||
|  | 	@if $direction == t { | ||||||
|  | 		@include fn($space, top,$i,$n); | ||||||
|  | 	}  | ||||||
|  | 	@if $direction == r { | ||||||
|  | 		@include fn($space, right,$i,$n); | ||||||
|  | 	}  | ||||||
|  | 	@if $direction == b { | ||||||
|  | 		@include fn($space, bottom,$i,$n); | ||||||
|  | 	}  | ||||||
|  | 	@if $direction == l { | ||||||
|  | 	 @include fn($space, left,$i,$n); | ||||||
|  | 	}  | ||||||
|  | 	@if $direction == x { | ||||||
|  | 		@include fn($space, left,$i,$n); | ||||||
|  | 		@include fn($space, right,$i,$n); | ||||||
|  | 	}  | ||||||
|  | 	@if $direction == y { | ||||||
|  | 		@include fn($space, top,$i,$n); | ||||||
|  | 		@include fn($space, bottom,$i,$n); | ||||||
|  | 	}  | ||||||
|  | 	@if $direction == a { | ||||||
|  | 		@if $n { | ||||||
|  | 			#{$space}:#{$i*$uni-space-root}px; | ||||||
|  | 		} @else { | ||||||
|  | 			#{$space}:#{-$i*$uni-space-root}px; | ||||||
|  | 		} | ||||||
|  | 	}  | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | @each $orientation in m,p { | ||||||
|  | 	$space: margin; | ||||||
|  | 	@if $orientation == m { | ||||||
|  | 		$space: margin; | ||||||
|  | 	} @else { | ||||||
|  | 		$space: padding; | ||||||
|  | 	} | ||||||
|  | 	@for $i from 0 through 16 { | ||||||
|  | 		@each $direction in t, r, b, l, x, y, a { | ||||||
|  | 			.uni-#{$orientation}#{$direction}-#{$i} {  | ||||||
|  | 				@include  get-styles($direction,$i,$space,true); | ||||||
|  | 			}  | ||||||
|  | 			.uni-#{$orientation}#{$direction}-n#{$i} {  | ||||||
|  | 				@include  get-styles($direction,$i,$space,false); | ||||||
|  | 			} | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  | @ -0,0 +1,167 @@ | ||||||
|  | /* #ifndef APP-NVUE */ | ||||||
|  | 
 | ||||||
|  | $-color-white:#fff; | ||||||
|  | $-color-black:#000; | ||||||
|  | @mixin base-style($color) { | ||||||
|  | 	color: #fff; | ||||||
|  | 	background-color: $color; | ||||||
|  | 	border-color: mix($-color-black, $color, 8%); | ||||||
|  | 	&:not([hover-class]):active { | ||||||
|  | 		background: mix($-color-black, $color, 10%); | ||||||
|  | 		border-color: mix($-color-black, $color, 20%); | ||||||
|  | 		color: $-color-white; | ||||||
|  | 		outline: none; | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  | @mixin is-color($color) { | ||||||
|  | 	@include base-style($color); | ||||||
|  | 	&[loading] { | ||||||
|  | 		@include base-style($color); | ||||||
|  | 		&::before { | ||||||
|  | 			margin-right:5px; | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | 	&[disabled] { | ||||||
|  | 	  &, | ||||||
|  | 		&[loading], | ||||||
|  | 	  &:not([hover-class]):active { | ||||||
|  | 	    color: $-color-white; | ||||||
|  | 			border-color: mix(darken($color,10%), $-color-white); | ||||||
|  | 	    background-color: mix($color, $-color-white); | ||||||
|  | 	  } | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | } | ||||||
|  | @mixin base-plain-style($color) { | ||||||
|  | 	color:$color; | ||||||
|  | 	background-color: mix($-color-white, $color, 90%); | ||||||
|  | 	border-color: mix($-color-white, $color, 70%); | ||||||
|  | 	&:not([hover-class]):active { | ||||||
|  | 	  background: mix($-color-white, $color, 80%); | ||||||
|  | 	  color: $color; | ||||||
|  | 	  outline: none; | ||||||
|  | 		border-color: mix($-color-white, $color, 50%); | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  | @mixin is-plain($color){ | ||||||
|  | 	&[plain] { | ||||||
|  | 		@include base-plain-style($color); | ||||||
|  | 		&[loading] { | ||||||
|  | 			@include base-plain-style($color); | ||||||
|  | 			&::before { | ||||||
|  | 				margin-right:5px; | ||||||
|  | 			} | ||||||
|  | 		} | ||||||
|  | 		&[disabled] { | ||||||
|  | 		  &, | ||||||
|  | 		  &:active { | ||||||
|  | 		    color: mix($-color-white, $color, 40%); | ||||||
|  | 		    background-color: mix($-color-white, $color, 90%); | ||||||
|  | 				border-color: mix($-color-white, $color, 80%); | ||||||
|  | 		  } | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | .uni-btn { | ||||||
|  | 	margin: 5px; | ||||||
|  | 	color: #393939; | ||||||
|  | 	border:1px solid #ccc; | ||||||
|  | 	font-size: 16px; | ||||||
|  | 	font-weight: 200; | ||||||
|  | 	background-color: #F9F9F9; | ||||||
|  | 	// TODO 暂时处理边框隐藏一边的问题 | ||||||
|  | 	overflow: visible; | ||||||
|  | 	&::after{ | ||||||
|  | 		border: none; | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	&:not([type]),&[type=default] { | ||||||
|  | 		color: #999; | ||||||
|  | 		&[loading] { | ||||||
|  | 			background: none; | ||||||
|  | 			&::before { | ||||||
|  | 				margin-right:5px; | ||||||
|  | 			} | ||||||
|  | 		} | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 		&[disabled]{ | ||||||
|  | 			color: mix($-color-white, #999, 60%); | ||||||
|  | 		  &, | ||||||
|  | 			&[loading], | ||||||
|  | 		  &:active { | ||||||
|  | 				color: mix($-color-white, #999, 60%); | ||||||
|  | 		    background-color: mix($-color-white,$-color-black , 98%); | ||||||
|  | 				border-color: mix($-color-white,  #999, 85%); | ||||||
|  | 		  } | ||||||
|  | 		} | ||||||
|  | 
 | ||||||
|  | 		&[plain] { | ||||||
|  | 			color: #999; | ||||||
|  | 			background: none; | ||||||
|  | 			border-color: $uni-border-1; | ||||||
|  | 			&:not([hover-class]):active { | ||||||
|  | 				background: none; | ||||||
|  | 			  color: mix($-color-white, $-color-black, 80%); | ||||||
|  | 				border-color: mix($-color-white, $-color-black, 90%); | ||||||
|  | 			  outline: none; | ||||||
|  | 			} | ||||||
|  | 			&[disabled]{ | ||||||
|  | 			  &, | ||||||
|  | 				&[loading], | ||||||
|  | 			  &:active { | ||||||
|  | 			    background: none; | ||||||
|  | 					color: mix($-color-white, #999, 60%); | ||||||
|  | 					border-color: mix($-color-white,  #999, 85%); | ||||||
|  | 			  } | ||||||
|  | 			} | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	&:not([hover-class]):active { | ||||||
|  | 	  color: mix($-color-white, $-color-black, 50%); | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	&[size=mini] { | ||||||
|  | 		font-size: 16px; | ||||||
|  | 		font-weight: 200; | ||||||
|  | 		border-radius: 8px; | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 	&.uni-btn-small { | ||||||
|  | 		font-size: 14px; | ||||||
|  | 	} | ||||||
|  | 	&.uni-btn-mini { | ||||||
|  | 		font-size: 12px; | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	&.uni-btn-radius { | ||||||
|  | 		border-radius: 999px; | ||||||
|  | 	} | ||||||
|  | 	&[type=primary] { | ||||||
|  | 		@include is-color($uni-primary); | ||||||
|  | 		@include is-plain($uni-primary) | ||||||
|  | 	} | ||||||
|  | 	&[type=success] { | ||||||
|  | 		@include is-color($uni-success); | ||||||
|  | 		@include is-plain($uni-success) | ||||||
|  | 	} | ||||||
|  | 	&[type=error] { | ||||||
|  | 		@include is-color($uni-error); | ||||||
|  | 		@include is-plain($uni-error) | ||||||
|  | 	} | ||||||
|  | 	&[type=warning] { | ||||||
|  | 		@include is-color($uni-warning); | ||||||
|  | 		@include is-plain($uni-warning) | ||||||
|  | 	} | ||||||
|  | 	&[type=info] { | ||||||
|  | 		@include is-color($uni-info); | ||||||
|  | 		@include is-plain($uni-info) | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  | /* #endif */ | ||||||
|  | @ -0,0 +1,24 @@ | ||||||
|  | @mixin get-styles($k,$c) { | ||||||
|  | 	@if $k == size or $k == weight{ | ||||||
|  | 		font-#{$k}:#{$c} | ||||||
|  | 	}@else{ | ||||||
|  | 		#{$k}:#{$c} | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | @each $key, $child in $uni-headings { | ||||||
|  | 	/* #ifndef APP-NVUE */ | ||||||
|  | 	.uni-#{$key} { | ||||||
|  | 		@each $k, $c in $child { | ||||||
|  | 			@include get-styles($k,$c) | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | 	/* #endif */ | ||||||
|  | 	/* #ifdef APP-NVUE */ | ||||||
|  | 	.container .uni-#{$key} { | ||||||
|  | 		@each $k, $c in $child { | ||||||
|  | 			@include get-styles($k,$c) | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | 	/* #endif */ | ||||||
|  | } | ||||||
|  | @ -0,0 +1,146 @@ | ||||||
|  | // @use "sass:math"; | ||||||
|  | @import  '../tools/functions.scss'; | ||||||
|  | // 间距基础倍数 | ||||||
|  | $uni-space-root: 2 !default; | ||||||
|  | // 边框半径默认值 | ||||||
|  | $uni-radius-root:5px !default; | ||||||
|  | $uni-radius: () !default; | ||||||
|  | // 边框半径断点 | ||||||
|  | $uni-radius: map-deep-merge( | ||||||
|  |   ( | ||||||
|  |     0: 0, | ||||||
|  | 		// TODO 当前版本暂时不支持 sm 属性 | ||||||
|  |     // 'sm': math.div($uni-radius-root, 2), | ||||||
|  |     null: $uni-radius-root, | ||||||
|  |     'lg': $uni-radius-root * 2, | ||||||
|  |     'xl': $uni-radius-root * 6, | ||||||
|  |     'pill': 9999px, | ||||||
|  |     'circle': 50% | ||||||
|  |   ), | ||||||
|  |   $uni-radius | ||||||
|  | ); | ||||||
|  | // 字体家族 | ||||||
|  | $body-font-family: 'Roboto', sans-serif !default; | ||||||
|  | // 文本 | ||||||
|  | $heading-font-family: $body-font-family !default; | ||||||
|  | $uni-headings: () !default; | ||||||
|  | $letterSpacing: -0.01562em; | ||||||
|  | $uni-headings: map-deep-merge( | ||||||
|  |   ( | ||||||
|  |     'h1': ( | ||||||
|  |       size: 32px, | ||||||
|  | 			weight: 300, | ||||||
|  | 			line-height: 50px, | ||||||
|  | 			// letter-spacing:-0.01562em | ||||||
|  |     ), | ||||||
|  |     'h2': ( | ||||||
|  |       size: 28px, | ||||||
|  |       weight: 300, | ||||||
|  |       line-height: 40px, | ||||||
|  |       // letter-spacing: -0.00833em | ||||||
|  |     ), | ||||||
|  |     'h3': ( | ||||||
|  |       size: 24px, | ||||||
|  |       weight: 400, | ||||||
|  |       line-height: 32px, | ||||||
|  |       // letter-spacing: normal | ||||||
|  |     ), | ||||||
|  |     'h4': ( | ||||||
|  |       size: 20px, | ||||||
|  |       weight: 400, | ||||||
|  |       line-height: 30px, | ||||||
|  |       // letter-spacing: 0.00735em | ||||||
|  |     ), | ||||||
|  |     'h5': ( | ||||||
|  |       size: 16px, | ||||||
|  |       weight: 400, | ||||||
|  |       line-height: 24px, | ||||||
|  |       // letter-spacing: normal | ||||||
|  |     ), | ||||||
|  |     'h6': ( | ||||||
|  |       size: 14px, | ||||||
|  |       weight: 500, | ||||||
|  |       line-height: 18px, | ||||||
|  |       // letter-spacing: 0.0125em | ||||||
|  |     ), | ||||||
|  |     'subtitle': ( | ||||||
|  |       size: 12px, | ||||||
|  |       weight: 400, | ||||||
|  |       line-height: 20px, | ||||||
|  |       // letter-spacing: 0.00937em | ||||||
|  |     ), | ||||||
|  |     'body': ( | ||||||
|  |       font-size: 14px, | ||||||
|  | 			font-weight: 400, | ||||||
|  | 			line-height: 22px, | ||||||
|  | 			// letter-spacing: 0.03125em | ||||||
|  |     ), | ||||||
|  |     'caption': ( | ||||||
|  |       'size': 12px, | ||||||
|  |       'weight': 400, | ||||||
|  |       'line-height': 20px, | ||||||
|  |       // 'letter-spacing': 0.03333em, | ||||||
|  |       // 'text-transform': false | ||||||
|  |     ) | ||||||
|  |   ), | ||||||
|  |   $uni-headings | ||||||
|  | ); | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | // 主色 | ||||||
|  | $uni-primary: #2979ff !default; | ||||||
|  | $uni-primary-disable:lighten($uni-primary,20%) !default; | ||||||
|  | $uni-primary-light: lighten($uni-primary,25%) !default; | ||||||
|  | 
 | ||||||
|  | // 辅助色 | ||||||
|  | // 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。 | ||||||
|  | $uni-success: #18bc37 !default; | ||||||
|  | $uni-success-disable:lighten($uni-success,20%) !default; | ||||||
|  | $uni-success-light: lighten($uni-success,25%) !default; | ||||||
|  | 
 | ||||||
|  | $uni-warning: #f3a73f !default; | ||||||
|  | $uni-warning-disable:lighten($uni-warning,20%) !default; | ||||||
|  | $uni-warning-light: lighten($uni-warning,25%) !default; | ||||||
|  | 
 | ||||||
|  | $uni-error: #e43d33 !default; | ||||||
|  | $uni-error-disable:lighten($uni-error,20%) !default; | ||||||
|  | $uni-error-light: lighten($uni-error,25%) !default; | ||||||
|  | 
 | ||||||
|  | $uni-info: #8f939c !default; | ||||||
|  | $uni-info-disable:lighten($uni-info,20%) !default; | ||||||
|  | $uni-info-light: lighten($uni-info,25%) !default; | ||||||
|  | 
 | ||||||
|  | // 中性色 | ||||||
|  | // 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。 | ||||||
|  | $uni-main-color: #3a3a3a !default; 			// 主要文字 | ||||||
|  | $uni-base-color: #6a6a6a !default;			// 常规文字 | ||||||
|  | $uni-secondary-color: #909399 !default;	// 次要文字 | ||||||
|  | $uni-extra-color: #c7c7c7 !default;			// 辅助说明 | ||||||
|  | 
 | ||||||
|  | // 边框颜色 | ||||||
|  | $uni-border-1: #F0F0F0 !default; | ||||||
|  | $uni-border-2: #EDEDED !default; | ||||||
|  | $uni-border-3: #DCDCDC !default; | ||||||
|  | $uni-border-4: #B9B9B9 !default; | ||||||
|  | 
 | ||||||
|  | // 常规色 | ||||||
|  | $uni-black: #000000 !default; | ||||||
|  | $uni-white: #ffffff !default; | ||||||
|  | $uni-transparent: rgba($color: #000000, $alpha: 0) !default; | ||||||
|  | 
 | ||||||
|  | // 背景色 | ||||||
|  | $uni-bg-color: #f7f7f7 !default; | ||||||
|  | 
 | ||||||
|  | /* 水平间距 */ | ||||||
|  | $uni-spacing-sm: 8px !default; | ||||||
|  | $uni-spacing-base: 15px !default; | ||||||
|  | $uni-spacing-lg: 30px !default; | ||||||
|  | 
 | ||||||
|  | // 阴影 | ||||||
|  | $uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default; | ||||||
|  | $uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default; | ||||||
|  | $uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default; | ||||||
|  | 
 | ||||||
|  | // 蒙版 | ||||||
|  | $uni-mask: rgba($color: #000000, $alpha: 0.4) !default; | ||||||
|  | @ -0,0 +1,19 @@ | ||||||
|  | // 合并 map | ||||||
|  | @function map-deep-merge($parent-map, $child-map){ | ||||||
|  | 	$result: $parent-map; | ||||||
|  | 	@each $key, $child in $child-map { | ||||||
|  | 		$parent-has-key: map-has-key($result, $key); | ||||||
|  | 		$parent-value: map-get($result, $key); | ||||||
|  | 		$parent-type: type-of($parent-value); | ||||||
|  | 		$child-type: type-of($child); | ||||||
|  | 		$parent-is-map: $parent-type == map; | ||||||
|  | 		$child-is-map: $child-type == map; | ||||||
|  | 			 | ||||||
|  | 		@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){ | ||||||
|  | 			$result: map-merge($result, ( $key: $child )); | ||||||
|  | 		}@else { | ||||||
|  | 			$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) )); | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | 	@return $result; | ||||||
|  | }; | ||||||
|  | @ -0,0 +1,31 @@ | ||||||
|  | // 间距基础倍数 | ||||||
|  | $uni-space-root: 2; | ||||||
|  | // 边框半径默认值 | ||||||
|  | $uni-radius-root:5px; | ||||||
|  | // 主色 | ||||||
|  | $uni-primary: #2979ff; | ||||||
|  | // 辅助色 | ||||||
|  | $uni-success: #4cd964; | ||||||
|  | // 警告色 | ||||||
|  | $uni-warning: #f0ad4e; | ||||||
|  | // 错误色 | ||||||
|  | $uni-error: #dd524d; | ||||||
|  | // 描述色 | ||||||
|  | $uni-info: #909399; | ||||||
|  | // 中性色 | ||||||
|  | $uni-main-color: #303133; | ||||||
|  | $uni-base-color: #606266; | ||||||
|  | $uni-secondary-color: #909399; | ||||||
|  | $uni-extra-color: #C0C4CC; | ||||||
|  | // 背景色 | ||||||
|  | $uni-bg-color: #f5f5f5; | ||||||
|  | // 边框颜色 | ||||||
|  | $uni-border-1: #DCDFE6; | ||||||
|  | $uni-border-2: #E4E7ED; | ||||||
|  | $uni-border-3: #EBEEF5; | ||||||
|  | $uni-border-4: #F2F6FC; | ||||||
|  | 
 | ||||||
|  | // 常规色 | ||||||
|  | $uni-black: #000000; | ||||||
|  | $uni-white: #ffffff; | ||||||
|  | $uni-transparent: rgba($color: #000000, $alpha: 0); | ||||||
|  | @ -0,0 +1,62 @@ | ||||||
|  | @import './styles/setting/_variables.scss'; | ||||||
|  | // 间距基础倍数 | ||||||
|  | $uni-space-root: 2; | ||||||
|  | // 边框半径默认值 | ||||||
|  | $uni-radius-root:5px; | ||||||
|  | 
 | ||||||
|  | // 主色 | ||||||
|  | $uni-primary: #2979ff; | ||||||
|  | $uni-primary-disable:mix(#fff,$uni-primary,50%); | ||||||
|  | $uni-primary-light: mix(#fff,$uni-primary,80%); | ||||||
|  | 
 | ||||||
|  | // 辅助色 | ||||||
|  | // 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。 | ||||||
|  | $uni-success: #18bc37; | ||||||
|  | $uni-success-disable:mix(#fff,$uni-success,50%); | ||||||
|  | $uni-success-light: mix(#fff,$uni-success,80%); | ||||||
|  | 
 | ||||||
|  | $uni-warning: #f3a73f; | ||||||
|  | $uni-warning-disable:mix(#fff,$uni-warning,50%); | ||||||
|  | $uni-warning-light: mix(#fff,$uni-warning,80%); | ||||||
|  | 
 | ||||||
|  | $uni-error: #e43d33; | ||||||
|  | $uni-error-disable:mix(#fff,$uni-error,50%); | ||||||
|  | $uni-error-light: mix(#fff,$uni-error,80%); | ||||||
|  | 
 | ||||||
|  | $uni-info: #8f939c; | ||||||
|  | $uni-info-disable:mix(#fff,$uni-info,50%); | ||||||
|  | $uni-info-light: mix(#fff,$uni-info,80%); | ||||||
|  | 
 | ||||||
|  | // 中性色 | ||||||
|  | // 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。 | ||||||
|  | $uni-main-color: #3a3a3a; 			// 主要文字 | ||||||
|  | $uni-base-color: #6a6a6a;			// 常规文字 | ||||||
|  | $uni-secondary-color: #909399;	// 次要文字 | ||||||
|  | $uni-extra-color: #c7c7c7;			// 辅助说明 | ||||||
|  | 
 | ||||||
|  | // 边框颜色 | ||||||
|  | $uni-border-1: #F0F0F0; | ||||||
|  | $uni-border-2: #EDEDED; | ||||||
|  | $uni-border-3: #DCDCDC; | ||||||
|  | $uni-border-4: #B9B9B9; | ||||||
|  | 
 | ||||||
|  | // 常规色 | ||||||
|  | $uni-black: #000000; | ||||||
|  | $uni-white: #ffffff; | ||||||
|  | $uni-transparent: rgba($color: #000000, $alpha: 0); | ||||||
|  | 
 | ||||||
|  | // 背景色 | ||||||
|  | $uni-bg-color: #f7f7f7; | ||||||
|  | 
 | ||||||
|  | /* 水平间距 */ | ||||||
|  | $uni-spacing-sm: 8px; | ||||||
|  | $uni-spacing-base: 15px; | ||||||
|  | $uni-spacing-lg: 30px; | ||||||
|  | 
 | ||||||
|  | // 阴影 | ||||||
|  | $uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5); | ||||||
|  | $uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2); | ||||||
|  | $uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5); | ||||||
|  | 
 | ||||||
|  | // 蒙版 | ||||||
|  | $uni-mask: rgba($color: #000000, $alpha: 0.4); | ||||||
|  | @ -0,0 +1,58 @@ | ||||||
|  | ## 1.3.16(2025-06-11) | ||||||
|  | - 修复 鸿蒙 next 浏览器上无法滑动的问题 | ||||||
|  | ## 1.3.14(2025-06-09) | ||||||
|  | - 优化 更新示例项目 | ||||||
|  | ## 1.3.13(2025-04-15) | ||||||
|  | - 修复 app 端 缺少leftOptions 或 rightOptions 时无法滑动的问题 | ||||||
|  | ## 1.3.12(2025-04-14) | ||||||
|  | - 修复 由上一个兼容版本引发的 安卓运行报错且无法回弹的问题 | ||||||
|  | ## 1.3.11(2025-04-08) | ||||||
|  | - 优化 兼容鸿蒙平台 | ||||||
|  | - 修复 WEB 平台控制台报错 | ||||||
|  | ## 1.3.10(2024-01-17) | ||||||
|  | - 修复 点击按钮时,按钮会被点击穿透导致自动收缩的 bug(兼容阿里/百度/抖音小程序) | ||||||
|  | ## 1.3.9(2024-01-17) | ||||||
|  | - 修复 点击按钮时,按钮会被点击穿透导致自动收缩的 bug | ||||||
|  | ## 1.3.8(2023-04-13) | ||||||
|  | - 修复`uni-swipe-action`和`uni-swipe-action-item`不同时使用导致 closeOther 方法报错的 bug | ||||||
|  | ## 1.3.7(2022-06-06) | ||||||
|  | - 修复 vue3 下使用组件不能正常运行的Bug | ||||||
|  | ## 1.3.6(2022-05-31) | ||||||
|  | - 修复 h5端点击click触发两次的Bug | ||||||
|  | ## 1.3.5(2022-05-23) | ||||||
|  | - 修复 isPC 找不到的Bug | ||||||
|  | ## 1.3.4(2022-05-19) | ||||||
|  | -  修复 在 nvue 下 disabled 失效的bug | ||||||
|  | ## 1.3.3(2022-03-31) | ||||||
|  | - 修复 按钮字体大小不能设置的bug | ||||||
|  | ## 1.3.2(2022-03-16) | ||||||
|  | - 修复 h5和app端下报el错误的bug | ||||||
|  | ## 1.3.1(2022-03-07) | ||||||
|  | - 修复 HBuilderX 1.4.X 版本中,h5和app端下报错的bug | ||||||
|  | ## 1.3.0(2021-11-19) | ||||||
|  | - 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) | ||||||
|  | - 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-swipe-action](https://uniapp.dcloud.io/component/uniui/uni-swipe-action) | ||||||
|  | ## 1.2.4(2021-08-20) | ||||||
|  | - 优化 close-all 方法 | ||||||
|  | ## 1.2.3(2021-08-20) | ||||||
|  | - 新增 close-all 方法,关闭所有已打开的组件 | ||||||
|  | ## 1.2.2(2021-08-17) | ||||||
|  | - 新增 resize() 方法,在非微信小程序、h5、app-vue端出现不能滑动的问题的时候,重置组件 | ||||||
|  | - 修复 app 端偶尔出现类似 Page[x][-x,xx;-x,xx,x,x-x] 的问题  | ||||||
|  | - 优化 微信小程序、h5、app-vue 滑动逻辑,避免出现动态新增组件后不能滑动的问题 | ||||||
|  | ## 1.2.1(2021-07-30) | ||||||
|  | - 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | ||||||
|  | - 修复 跨页面修改组件数据 ,导致不能滑动的问题 | ||||||
|  | ## 1.1.10(2021-06-17) | ||||||
|  | - 修复 按钮点击执行两次的bug | ||||||
|  | ## 1.1.9(2021-05-12) | ||||||
|  | - 新增 项目示例地址 | ||||||
|  | ## 1.1.8(2021-03-26) | ||||||
|  | - 修复 微信小程序 nv_navigator is not defined 报错的bug | ||||||
|  | ## 1.1.7(2021-02-05) | ||||||
|  | - 调整为uni_modules目录规范 | ||||||
|  | - 新增 左侧滑动 | ||||||
|  | - 新增 插槽使用方式 | ||||||
|  | - 新增 threshold 属性,可以控制滑动缺省值 | ||||||
|  | - 优化 长列表滚动性能 | ||||||
|  | - 修复 滚动页面时触发组件滑动的Bug | ||||||
|  | @ -0,0 +1,302 @@ | ||||||
|  | let bindIngXMixins = {} | ||||||
|  | 
 | ||||||
|  | // #ifdef APP-NVUE
 | ||||||
|  | const BindingX = uni.requireNativePlugin('bindingx'); | ||||||
|  | const dom = uni.requireNativePlugin('dom'); | ||||||
|  | const animation = uni.requireNativePlugin('animation'); | ||||||
|  | 
 | ||||||
|  | bindIngXMixins = { | ||||||
|  | 	data() { | ||||||
|  | 		return {} | ||||||
|  | 	}, | ||||||
|  | 
 | ||||||
|  | 	watch: { | ||||||
|  | 		show(newVal) { | ||||||
|  | 			if (this.autoClose) return | ||||||
|  | 			if (this.stop) return | ||||||
|  | 			this.stop = true | ||||||
|  | 			if (newVal) { | ||||||
|  | 				this.open(newVal) | ||||||
|  | 			} else { | ||||||
|  | 				this.close() | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
|  | 		leftOptions() { | ||||||
|  | 			this.getSelectorQuery() | ||||||
|  | 			this.init() | ||||||
|  | 		}, | ||||||
|  | 		rightOptions(newVal) { | ||||||
|  | 			this.init() | ||||||
|  | 		} | ||||||
|  | 	}, | ||||||
|  | 	created() { | ||||||
|  | 		this.swipeaction = this.getSwipeAction() | ||||||
|  | 		if (this.swipeaction && Array.isArray(this.swipeaction.children)) { | ||||||
|  | 			this.swipeaction.children.push(this) | ||||||
|  | 		} | ||||||
|  | 	}, | ||||||
|  | 	mounted() { | ||||||
|  | 		this.box = this.getEl(this.$refs['selector-box--hock']) | ||||||
|  | 		this.selector = this.getEl(this.$refs['selector-content--hock']); | ||||||
|  | 		this.leftButton = this.getEl(this.$refs['selector-left-button--hock']); | ||||||
|  | 		this.rightButton = this.getEl(this.$refs['selector-right-button--hock']); | ||||||
|  | 		this.init() | ||||||
|  | 	}, | ||||||
|  | 	// beforeDestroy() {
 | ||||||
|  | 	// 	this.swipeaction.children.forEach((item, index) => {
 | ||||||
|  | 	// 		if (item === this) {
 | ||||||
|  | 	// 			this.swipeaction.children.splice(index, 1)
 | ||||||
|  | 	// 		}
 | ||||||
|  | 	// 	})
 | ||||||
|  | 	// },
 | ||||||
|  | 	methods: { | ||||||
|  | 		init() { | ||||||
|  | 			this.$nextTick(() => { | ||||||
|  | 				this.x = 0 | ||||||
|  | 				this.button = { | ||||||
|  | 					show: false | ||||||
|  | 				} | ||||||
|  | 				setTimeout(() => { | ||||||
|  | 					this.getSelectorQuery() | ||||||
|  | 				}, 200) | ||||||
|  | 			}) | ||||||
|  | 		}, | ||||||
|  | 		onClick(index, item, position) { | ||||||
|  | 			this.$emit('click', { | ||||||
|  | 				content: item, | ||||||
|  | 				index, | ||||||
|  | 				position | ||||||
|  | 			}) | ||||||
|  | 		}, | ||||||
|  | 		touchstart(e) { | ||||||
|  | 			// fix by mehaotian 禁止滑动
 | ||||||
|  | 			if (this.disabled) return | ||||||
|  | 			// 每次只触发一次,避免多次监听造成闪烁
 | ||||||
|  | 			if (this.stop) return | ||||||
|  | 			this.stop = true | ||||||
|  | 			if (this.autoClose && this.swipeaction) { | ||||||
|  | 				this.swipeaction.closeOther(this) | ||||||
|  | 			} | ||||||
|  | 
 | ||||||
|  | 			const leftWidth = this.button.left.width | ||||||
|  | 			const rightWidth = this.button.right.width | ||||||
|  | 			let expression = this.range(this.x, -rightWidth, leftWidth) | ||||||
|  | 			let leftExpression = this.range(this.x - leftWidth, -leftWidth, 0) | ||||||
|  | 			let rightExpression = this.range(this.x + rightWidth, 0, rightWidth) | ||||||
|  | 
 | ||||||
|  | 			this.eventpan = BindingX.bind({ | ||||||
|  | 				anchor: this.box, | ||||||
|  | 				eventType: 'pan', | ||||||
|  | 				props: [{ | ||||||
|  | 					element: this.selector, | ||||||
|  | 					property: 'transform.translateX', | ||||||
|  | 					expression | ||||||
|  | 				}, { | ||||||
|  | 					element: this.leftButton, | ||||||
|  | 					property: 'transform.translateX', | ||||||
|  | 					expression: leftExpression | ||||||
|  | 				}, { | ||||||
|  | 					element: this.rightButton, | ||||||
|  | 					property: 'transform.translateX', | ||||||
|  | 					expression: rightExpression | ||||||
|  | 				}, ] | ||||||
|  | 			}, (e) => { | ||||||
|  | 				// nope
 | ||||||
|  | 				if (e.state === 'end') { | ||||||
|  | 					this.x = e.deltaX + this.x; | ||||||
|  | 					this.isclick = true | ||||||
|  | 					this.bindTiming(e.deltaX) | ||||||
|  | 				} | ||||||
|  | 			}); | ||||||
|  | 		}, | ||||||
|  | 		touchend(e) { | ||||||
|  | 			if (this.isopen !== 'none' && !this.isclick) { | ||||||
|  | 				this.open('none') | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
|  | 		bindTiming(x) { | ||||||
|  | 			const left = this.x | ||||||
|  | 			const leftWidth = this.button.left.width | ||||||
|  | 			const rightWidth = this.button.right.width | ||||||
|  | 			const threshold = this.threshold | ||||||
|  | 			if (!this.isopen || this.isopen === 'none') { | ||||||
|  | 				if (left > threshold) { | ||||||
|  | 					this.open('left') | ||||||
|  | 				} else if (left < -threshold) { | ||||||
|  | 					this.open('right') | ||||||
|  | 				} else { | ||||||
|  | 					this.open('none') | ||||||
|  | 				} | ||||||
|  | 			} else { | ||||||
|  | 				if ((x > -leftWidth && x < 0) || x > rightWidth) { | ||||||
|  | 					if ((x > -threshold && x < 0) || (x - rightWidth > threshold)) { | ||||||
|  | 						this.open('left') | ||||||
|  | 					} else { | ||||||
|  | 						this.open('none') | ||||||
|  | 					} | ||||||
|  | 				} else { | ||||||
|  | 					if ((x < threshold && x > 0) || (x + leftWidth < -threshold)) { | ||||||
|  | 						this.open('right') | ||||||
|  | 					} else { | ||||||
|  | 						this.open('none') | ||||||
|  | 					} | ||||||
|  | 				} | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
|  | 
 | ||||||
|  | 		/** | ||||||
|  | 		 * 移动范围 | ||||||
|  | 		 * @param {Object} num | ||||||
|  | 		 * @param {Object} mix | ||||||
|  | 		 * @param {Object} max | ||||||
|  | 		 */ | ||||||
|  | 		range(num, mix, max) { | ||||||
|  | 			return `min(max(x+${num}, ${mix}), ${max})` | ||||||
|  | 		}, | ||||||
|  | 
 | ||||||
|  | 		/** | ||||||
|  | 		 * 开启swipe | ||||||
|  | 		 */ | ||||||
|  | 		open(type) { | ||||||
|  | 			this.animation(type) | ||||||
|  | 		}, | ||||||
|  | 
 | ||||||
|  | 		/** | ||||||
|  | 		 * 关闭swipe | ||||||
|  | 		 */ | ||||||
|  | 		close() { | ||||||
|  | 			this.animation('none') | ||||||
|  | 		}, | ||||||
|  | 
 | ||||||
|  | 		/** | ||||||
|  | 		 * 开启关闭动画 | ||||||
|  | 		 * @param {Object} type | ||||||
|  | 		 */ | ||||||
|  | 		animation(type) { | ||||||
|  | 			const time = 300 | ||||||
|  | 			const leftWidth = this.button.left.width | ||||||
|  | 			const rightWidth = this.button.right.width | ||||||
|  | 			if (this.eventpan && this.eventpan.token) { | ||||||
|  | 				BindingX.unbind({ | ||||||
|  | 					token: this.eventpan.token, | ||||||
|  | 					eventType: 'pan' | ||||||
|  | 				}) | ||||||
|  | 			} | ||||||
|  | 
 | ||||||
|  | 			switch (type) { | ||||||
|  | 				case 'left': | ||||||
|  | 					Promise.all([ | ||||||
|  | 						this.move(this.selector, leftWidth), | ||||||
|  | 						this.move(this.leftButton, 0), | ||||||
|  | 						this.move(this.rightButton, rightWidth * 2) | ||||||
|  | 					]).then(() => { | ||||||
|  | 						this.setEmit(leftWidth, type) | ||||||
|  | 					}) | ||||||
|  | 					break | ||||||
|  | 				case 'right': | ||||||
|  | 					Promise.all([ | ||||||
|  | 						this.move(this.selector, -rightWidth), | ||||||
|  | 						this.move(this.leftButton, -leftWidth * 2), | ||||||
|  | 						this.move(this.rightButton, 0) | ||||||
|  | 					]).then(() => { | ||||||
|  | 						this.setEmit(-rightWidth, type) | ||||||
|  | 					}) | ||||||
|  | 					break | ||||||
|  | 				default: | ||||||
|  | 					Promise.all([ | ||||||
|  | 						this.move(this.selector, 0), | ||||||
|  | 						this.move(this.leftButton, -leftWidth), | ||||||
|  | 						this.move(this.rightButton, rightWidth) | ||||||
|  | 					]).then(() => { | ||||||
|  | 						this.setEmit(0, type) | ||||||
|  | 					}) | ||||||
|  | 
 | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
|  | 		setEmit(x, type) { | ||||||
|  | 			const leftWidth = this.button.left.width | ||||||
|  | 			const rightWidth = this.button.right.width | ||||||
|  | 			this.isopen = this.isopen || 'none' | ||||||
|  | 			this.stop = false | ||||||
|  | 			this.isclick = false | ||||||
|  | 			// 只有状态不一致才会返回结果
 | ||||||
|  | 			if (this.isopen !== type && this.x !== x) { | ||||||
|  | 				if (type === 'left' && leftWidth > 0) { | ||||||
|  | 					this.$emit('change', 'left') | ||||||
|  | 				} | ||||||
|  | 				if (type === 'right' && rightWidth > 0) { | ||||||
|  | 					this.$emit('change', 'right') | ||||||
|  | 				} | ||||||
|  | 				if (type === 'none') { | ||||||
|  | 					this.$emit('change', 'none') | ||||||
|  | 				} | ||||||
|  | 			} | ||||||
|  | 			this.x = x | ||||||
|  | 			this.isopen = type | ||||||
|  | 		}, | ||||||
|  | 		move(ref, value) { | ||||||
|  | 			return new Promise((resolve, reject) => { | ||||||
|  | 				animation.transition(ref, { | ||||||
|  | 					styles: { | ||||||
|  | 						transform: `translateX(${value})`, | ||||||
|  | 					}, | ||||||
|  | 					duration: 150, //ms
 | ||||||
|  | 					timingFunction: 'linear', | ||||||
|  | 					needLayout: false, | ||||||
|  | 					delay: 0 //ms
 | ||||||
|  | 				}, function(res) { | ||||||
|  | 					resolve(res) | ||||||
|  | 				}) | ||||||
|  | 			}) | ||||||
|  | 
 | ||||||
|  | 		}, | ||||||
|  | 
 | ||||||
|  | 		/** | ||||||
|  | 		 * 获取ref | ||||||
|  | 		 * @param {Object} el | ||||||
|  | 		 */ | ||||||
|  | 		getEl(el) { | ||||||
|  | 			return el.ref | ||||||
|  | 		}, | ||||||
|  | 		/** | ||||||
|  | 		 * 获取节点信息 | ||||||
|  | 		 */ | ||||||
|  | 		getSelectorQuery() { | ||||||
|  | 			Promise.all([ | ||||||
|  | 				this.getDom('left'), | ||||||
|  | 				this.getDom('right'), | ||||||
|  | 			]).then((data) => { | ||||||
|  | 				let show = 'none' | ||||||
|  | 				if (this.autoClose) { | ||||||
|  | 					show = 'none' | ||||||
|  | 				} else { | ||||||
|  | 					show = this.show | ||||||
|  | 				} | ||||||
|  | 
 | ||||||
|  | 				if (show === 'none') { | ||||||
|  | 					// this.close()
 | ||||||
|  | 				} else { | ||||||
|  | 					this.open(show) | ||||||
|  | 				} | ||||||
|  | 
 | ||||||
|  | 			}) | ||||||
|  | 
 | ||||||
|  | 		}, | ||||||
|  | 		getDom(str) { | ||||||
|  | 			return new Promise((resolve, reject) => { | ||||||
|  | 				dom.getComponentRect(this.$refs[`selector-${str}-button--hock`], (data) => { | ||||||
|  | 					if (data) { | ||||||
|  | 						this.button[str] = data.size | ||||||
|  | 						resolve(data) | ||||||
|  | 					} else { | ||||||
|  | 						reject() | ||||||
|  | 					} | ||||||
|  | 				}) | ||||||
|  | 			}) | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | // #endif
 | ||||||
|  | 
 | ||||||
|  | export default bindIngXMixins | ||||||
|  | @ -0,0 +1,12 @@ | ||||||
|  | export function isPC() { | ||||||
|  | 	var userAgentInfo = navigator.userAgent; | ||||||
|  | 	var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; | ||||||
|  | 	var flag = true; | ||||||
|  | 	for (let v = 0; v < Agents.length - 1; v++) { | ||||||
|  | 		if (userAgentInfo.indexOf(Agents[v]) > 0) { | ||||||
|  | 			flag = false; | ||||||
|  | 			break; | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | 	return flag; | ||||||
|  | } | ||||||
|  | @ -0,0 +1,195 @@ | ||||||
|  | export default { | ||||||
|  | 	data() { | ||||||
|  | 		return { | ||||||
|  | 			x: 0, | ||||||
|  | 			transition: false, | ||||||
|  | 			width: 0, | ||||||
|  | 			viewWidth: 0, | ||||||
|  | 			swipeShow: 0 | ||||||
|  | 		} | ||||||
|  | 	}, | ||||||
|  | 	watch: { | ||||||
|  | 		show(newVal) { | ||||||
|  | 			if (this.autoClose) return | ||||||
|  | 			if (newVal && newVal !== 'none') { | ||||||
|  | 				this.transition = true | ||||||
|  | 				this.open(newVal) | ||||||
|  | 			} else { | ||||||
|  | 				this.close() | ||||||
|  | 			} | ||||||
|  | 		} | ||||||
|  | 	}, | ||||||
|  | 	created() { | ||||||
|  | 		this.swipeaction = this.getSwipeAction() | ||||||
|  | 		if (this.swipeaction && Array.isArray(this.swipeaction.children)) { | ||||||
|  | 			this.swipeaction.children.push(this) | ||||||
|  | 		} | ||||||
|  | 	}, | ||||||
|  | 	mounted() { | ||||||
|  | 		this.isopen = false | ||||||
|  | 		setTimeout(() => { | ||||||
|  | 			this.getQuerySelect() | ||||||
|  | 		}, 50) | ||||||
|  | 	}, | ||||||
|  | 	methods: { | ||||||
|  | 		appTouchStart(e) { | ||||||
|  | 			const { | ||||||
|  | 				clientX | ||||||
|  | 			} = e.changedTouches[0] | ||||||
|  | 			this.clientX = clientX | ||||||
|  | 			this.timestamp = new Date().getTime() | ||||||
|  | 		}, | ||||||
|  | 		appTouchEnd(e, index, item, position) { | ||||||
|  | 			const { | ||||||
|  | 				clientX | ||||||
|  | 			} = e.changedTouches[0] | ||||||
|  | 			// fixed by xxxx 模拟点击事件,解决 ios 13 点击区域错位的问题
 | ||||||
|  | 			let diff = Math.abs(this.clientX - clientX) | ||||||
|  | 			let time = (new Date().getTime()) - this.timestamp | ||||||
|  | 			if (diff < 40 && time < 300) { | ||||||
|  | 				this.$emit('click', { | ||||||
|  | 					content: item, | ||||||
|  | 					index, | ||||||
|  | 					position | ||||||
|  | 				}) | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
|  | 		/** | ||||||
|  | 		 * 移动触发 | ||||||
|  | 		 * @param {Object} e | ||||||
|  | 		 */ | ||||||
|  | 		onChange(e) { | ||||||
|  | 			this.moveX = e.detail.x | ||||||
|  | 			this.isclose = false | ||||||
|  | 		}, | ||||||
|  | 		touchstart(e) { | ||||||
|  | 			this.transition = false | ||||||
|  | 			this.isclose = true | ||||||
|  | 			if (this.autoClose && this.swipeaction) { | ||||||
|  | 				this.swipeaction.closeOther(this) | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
|  | 		touchmove(e) {}, | ||||||
|  | 		touchend(e) { | ||||||
|  | 			// 0的位置什么都不执行
 | ||||||
|  | 			if (this.isclose && this.isopen === 'none') return | ||||||
|  | 			if (this.isclose && this.isopen !== 'none') { | ||||||
|  | 				this.transition = true | ||||||
|  | 				this.close() | ||||||
|  | 			} else { | ||||||
|  | 				this.move(this.moveX + this.leftWidth) | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
|  | 
 | ||||||
|  | 		/** | ||||||
|  | 		 * 移动 | ||||||
|  | 		 * @param {Object} moveX | ||||||
|  | 		 */ | ||||||
|  | 		move(moveX) { | ||||||
|  | 			// 打开关闭的处理逻辑不太一样
 | ||||||
|  | 			this.transition = true | ||||||
|  | 			// 未打开状态
 | ||||||
|  | 			if (!this.isopen || this.isopen === 'none') { | ||||||
|  | 				if (moveX > this.threshold) { | ||||||
|  | 					this.open('left') | ||||||
|  | 				} else if (moveX < -this.threshold) { | ||||||
|  | 					this.open('right') | ||||||
|  | 				} else { | ||||||
|  | 					this.close() | ||||||
|  | 				} | ||||||
|  | 			} else { | ||||||
|  | 				if (moveX < 0 && moveX < this.rightWidth) { | ||||||
|  | 					const rightX = this.rightWidth + moveX | ||||||
|  | 					if (rightX < this.threshold) { | ||||||
|  | 						this.open('right') | ||||||
|  | 					} else { | ||||||
|  | 						this.close() | ||||||
|  | 					} | ||||||
|  | 				} else if (moveX > 0 && moveX < this.leftWidth) { | ||||||
|  | 					const leftX = this.leftWidth - moveX | ||||||
|  | 					if (leftX < this.threshold) { | ||||||
|  | 						this.open('left') | ||||||
|  | 					} else { | ||||||
|  | 						this.close() | ||||||
|  | 					} | ||||||
|  | 				} | ||||||
|  | 
 | ||||||
|  | 			} | ||||||
|  | 
 | ||||||
|  | 		}, | ||||||
|  | 
 | ||||||
|  | 		/** | ||||||
|  | 		 * 打开 | ||||||
|  | 		 */ | ||||||
|  | 		open(type) { | ||||||
|  | 			this.x = this.moveX | ||||||
|  | 			this.animation(type) | ||||||
|  | 		}, | ||||||
|  | 
 | ||||||
|  | 		/** | ||||||
|  | 		 * 关闭 | ||||||
|  | 		 */ | ||||||
|  | 		close() { | ||||||
|  | 			this.x = this.moveX | ||||||
|  | 			// TODO 解决 x 值不更新的问题,所以会多触发一次 nextTick ,待优化
 | ||||||
|  | 			this.$nextTick(() => { | ||||||
|  | 				this.x = -this.leftWidth | ||||||
|  | 				if (this.isopen !== 'none') { | ||||||
|  | 					this.$emit('change', 'none') | ||||||
|  | 				} | ||||||
|  | 				this.isopen = 'none' | ||||||
|  | 			}) | ||||||
|  | 		}, | ||||||
|  | 
 | ||||||
|  | 		/** | ||||||
|  | 		 * 执行结束动画 | ||||||
|  | 		 * @param {Object} type | ||||||
|  | 		 */ | ||||||
|  | 		animation(type) { | ||||||
|  | 			this.$nextTick(() => { | ||||||
|  | 				if (type === 'left') { | ||||||
|  | 					this.x = 0 | ||||||
|  | 				} else { | ||||||
|  | 					this.x = -this.rightWidth - this.leftWidth | ||||||
|  | 				} | ||||||
|  | 
 | ||||||
|  | 				if (this.isopen !== type) { | ||||||
|  | 					this.$emit('change', type) | ||||||
|  | 				} | ||||||
|  | 				this.isopen = type | ||||||
|  | 			}) | ||||||
|  | 
 | ||||||
|  | 		}, | ||||||
|  | 		getSlide(x) {}, | ||||||
|  | 		getQuerySelect() { | ||||||
|  | 			const query = uni.createSelectorQuery().in(this); | ||||||
|  | 			query.selectAll('.movable-view--hock').boundingClientRect(data => { | ||||||
|  | 				this.leftWidth = data[1].width | ||||||
|  | 				this.rightWidth = data[2].width | ||||||
|  | 				this.width = data[0].width | ||||||
|  | 				this.viewWidth = this.width + this.rightWidth + this.leftWidth | ||||||
|  | 				if (this.leftWidth === 0) { | ||||||
|  | 					// TODO 疑似bug ,初始化的时候如果x 是0,会导致移动位置错误,所以让元素超出一点
 | ||||||
|  | 					this.x = -0.1 | ||||||
|  | 				} else { | ||||||
|  | 					this.x = -this.leftWidth | ||||||
|  | 				} | ||||||
|  | 				this.moveX = this.x | ||||||
|  | 				this.$nextTick(() => { | ||||||
|  | 					this.swipeShow = 1 | ||||||
|  | 				}) | ||||||
|  | 
 | ||||||
|  | 				if (!this.buttonWidth) { | ||||||
|  | 					this.disabledView = true | ||||||
|  | 				} | ||||||
|  | 
 | ||||||
|  | 				if (this.autoClose) return | ||||||
|  | 				if (this.show !== 'none') { | ||||||
|  | 					this.transition = true | ||||||
|  | 					this.open(this.shows) | ||||||
|  | 				} | ||||||
|  | 			}).exec(); | ||||||
|  | 
 | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  | @ -0,0 +1,260 @@ | ||||||
|  | let otherMixins = {} | ||||||
|  | 
 | ||||||
|  | // #ifndef APP-PLUS|| MP-WEIXIN  ||  H5
 | ||||||
|  | const MIN_DISTANCE = 10; | ||||||
|  | otherMixins = { | ||||||
|  | 	data() { | ||||||
|  | 		// TODO 随机生生元素ID,解决百度小程序获取同一个元素位置信息的bug
 | ||||||
|  | 		const elClass = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}` | ||||||
|  | 		return { | ||||||
|  | 			uniShow: false, | ||||||
|  | 			left: 0, | ||||||
|  | 			buttonShow: 'none', | ||||||
|  | 			ani: false, | ||||||
|  | 			moveLeft: '', | ||||||
|  | 			elClass | ||||||
|  | 		} | ||||||
|  | 	}, | ||||||
|  | 	watch: { | ||||||
|  | 		show(newVal) { | ||||||
|  | 			if (this.autoClose) return | ||||||
|  | 			this.openState(newVal) | ||||||
|  | 		}, | ||||||
|  | 		left() { | ||||||
|  | 			this.moveLeft = `translateX(${this.left}px)` | ||||||
|  | 		}, | ||||||
|  | 		buttonShow(newVal) { | ||||||
|  | 			if (this.autoClose) return | ||||||
|  | 			this.openState(newVal) | ||||||
|  | 		}, | ||||||
|  | 		leftOptions() { | ||||||
|  | 			this.init() | ||||||
|  | 		}, | ||||||
|  | 		rightOptions() { | ||||||
|  | 			this.init() | ||||||
|  | 		} | ||||||
|  | 	}, | ||||||
|  | 	mounted() { | ||||||
|  | 		this.swipeaction = this.getSwipeAction() | ||||||
|  | 		if (this.swipeaction && Array.isArray(this.swipeaction.children)) { | ||||||
|  | 			this.swipeaction.children.push(this) | ||||||
|  | 		} | ||||||
|  | 		this.init() | ||||||
|  | 	}, | ||||||
|  | 	methods: { | ||||||
|  | 		init() { | ||||||
|  | 			clearTimeout(this.timer) | ||||||
|  | 			this.timer = setTimeout(() => { | ||||||
|  | 				this.getSelectorQuery() | ||||||
|  | 			}, 100) | ||||||
|  | 			// 移动距离
 | ||||||
|  | 			this.left = 0 | ||||||
|  | 			this.x = 0 | ||||||
|  | 		}, | ||||||
|  | 
 | ||||||
|  | 		closeSwipe(e) { | ||||||
|  | 			if (this.autoClose && this.swipeaction) { | ||||||
|  | 				this.swipeaction.closeOther(this) | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
|  | 		appTouchStart(e) { | ||||||
|  | 			const { | ||||||
|  | 				clientX | ||||||
|  | 			} = e.changedTouches[0] | ||||||
|  | 			this.clientX = clientX | ||||||
|  | 			this.timestamp = new Date().getTime() | ||||||
|  | 		}, | ||||||
|  | 		appTouchEnd(e, index, item, position) { | ||||||
|  | 			const { | ||||||
|  | 				clientX | ||||||
|  | 			} = e.changedTouches[0] | ||||||
|  | 			// fixed by xxxx 模拟点击事件,解决 ios 13 点击区域错位的问题
 | ||||||
|  | 			let diff = Math.abs(this.clientX - clientX) | ||||||
|  | 			let time = (new Date().getTime()) - this.timestamp | ||||||
|  | 			if (diff < 40 && time < 300) { | ||||||
|  | 				this.$emit('click', { | ||||||
|  | 					content: item, | ||||||
|  | 					index, | ||||||
|  | 					position | ||||||
|  | 				}) | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
|  | 		touchstart(e) { | ||||||
|  | 			if (this.disabled) return | ||||||
|  | 			this.ani = false | ||||||
|  | 			this.x = this.left || 0 | ||||||
|  | 			this.stopTouchStart(e) | ||||||
|  | 			this.autoClose && this.closeSwipe() | ||||||
|  | 		}, | ||||||
|  | 		touchmove(e) { | ||||||
|  | 			if (this.disabled) return | ||||||
|  | 			// 是否可以滑动页面
 | ||||||
|  | 			this.stopTouchMove(e); | ||||||
|  | 			if (this.direction !== 'horizontal') { | ||||||
|  | 				return; | ||||||
|  | 			} | ||||||
|  | 			this.move(this.x + this.deltaX) | ||||||
|  | 			return false | ||||||
|  | 		}, | ||||||
|  | 		touchend() { | ||||||
|  | 			if (this.disabled) return | ||||||
|  | 			this.moveDirection(this.left) | ||||||
|  | 		}, | ||||||
|  | 		/** | ||||||
|  | 		 * 设置移动距离 | ||||||
|  | 		 * @param {Object} value | ||||||
|  | 		 */ | ||||||
|  | 		move(value) { | ||||||
|  | 			value = value || 0 | ||||||
|  | 			const leftWidth = this.leftWidth | ||||||
|  | 			const rightWidth = this.rightWidth | ||||||
|  | 			// 获取可滑动范围
 | ||||||
|  | 			this.left = this.range(value, -rightWidth, leftWidth); | ||||||
|  | 		}, | ||||||
|  | 
 | ||||||
|  | 		/** | ||||||
|  | 		 * 获取范围 | ||||||
|  | 		 * @param {Object} num | ||||||
|  | 		 * @param {Object} min | ||||||
|  | 		 * @param {Object} max | ||||||
|  | 		 */ | ||||||
|  | 		range(num, min, max) { | ||||||
|  | 			return Math.min(Math.max(num, min), max); | ||||||
|  | 		}, | ||||||
|  | 		/** | ||||||
|  | 		 * 移动方向判断 | ||||||
|  | 		 * @param {Object} left | ||||||
|  | 		 * @param {Object} value | ||||||
|  | 		 */ | ||||||
|  | 		moveDirection(left) { | ||||||
|  | 			const threshold = this.threshold | ||||||
|  | 			const isopen = this.isopen || 'none' | ||||||
|  | 			const leftWidth = this.leftWidth | ||||||
|  | 			const rightWidth = this.rightWidth | ||||||
|  | 			if (this.deltaX === 0) { | ||||||
|  | 				this.openState('none') | ||||||
|  | 				return | ||||||
|  | 			} | ||||||
|  | 			if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > | ||||||
|  | 					0 && rightWidth + | ||||||
|  | 					left < threshold)) { | ||||||
|  | 				// right
 | ||||||
|  | 				this.openState('right') | ||||||
|  | 			} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > | ||||||
|  | 					0 && | ||||||
|  | 					leftWidth - left < threshold)) { | ||||||
|  | 				// left
 | ||||||
|  | 				this.openState('left') | ||||||
|  | 			} else { | ||||||
|  | 				// default
 | ||||||
|  | 				this.openState('none') | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
|  | 
 | ||||||
|  | 		/** | ||||||
|  | 		 * 开启状态 | ||||||
|  | 		 * @param {Boolean} type | ||||||
|  | 		 */ | ||||||
|  | 		openState(type) { | ||||||
|  | 			const leftWidth = this.leftWidth | ||||||
|  | 			const rightWidth = this.rightWidth | ||||||
|  | 			let left = '' | ||||||
|  | 			this.isopen = this.isopen ? this.isopen : 'none' | ||||||
|  | 			switch (type) { | ||||||
|  | 				case "left": | ||||||
|  | 					left = leftWidth | ||||||
|  | 					break | ||||||
|  | 				case "right": | ||||||
|  | 					left = -rightWidth | ||||||
|  | 					break | ||||||
|  | 				default: | ||||||
|  | 					left = 0 | ||||||
|  | 			} | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 			if (this.isopen !== type) { | ||||||
|  | 				this.throttle = true | ||||||
|  | 				this.$emit('change', type) | ||||||
|  | 			} | ||||||
|  | 
 | ||||||
|  | 			this.isopen = type | ||||||
|  | 			// 添加动画类
 | ||||||
|  | 			this.ani = true | ||||||
|  | 			this.$nextTick(() => { | ||||||
|  | 				this.move(left) | ||||||
|  | 			}) | ||||||
|  | 			// 设置最终移动位置,理论上只要进入到这个函数,肯定是要打开的
 | ||||||
|  | 		}, | ||||||
|  | 		close() { | ||||||
|  | 			this.openState('none') | ||||||
|  | 		}, | ||||||
|  | 		getDirection(x, y) { | ||||||
|  | 			if (x > y && x > MIN_DISTANCE) { | ||||||
|  | 				return 'horizontal'; | ||||||
|  | 			} | ||||||
|  | 			if (y > x && y > MIN_DISTANCE) { | ||||||
|  | 				return 'vertical'; | ||||||
|  | 			} | ||||||
|  | 			return ''; | ||||||
|  | 		}, | ||||||
|  | 
 | ||||||
|  | 		/** | ||||||
|  | 		 * 重置滑动状态 | ||||||
|  | 		 * @param {Object} event | ||||||
|  | 		 */ | ||||||
|  | 		resetTouchStatus() { | ||||||
|  | 			this.direction = ''; | ||||||
|  | 			this.deltaX = 0; | ||||||
|  | 			this.deltaY = 0; | ||||||
|  | 			this.offsetX = 0; | ||||||
|  | 			this.offsetY = 0; | ||||||
|  | 		}, | ||||||
|  | 
 | ||||||
|  | 		/** | ||||||
|  | 		 * 设置滑动开始位置 | ||||||
|  | 		 * @param {Object} event | ||||||
|  | 		 */ | ||||||
|  | 		stopTouchStart(event) { | ||||||
|  | 			this.resetTouchStatus(); | ||||||
|  | 			const touch = event.touches[0]; | ||||||
|  | 			this.startX = touch.clientX; | ||||||
|  | 			this.startY = touch.clientY; | ||||||
|  | 		}, | ||||||
|  | 
 | ||||||
|  | 		/** | ||||||
|  | 		 * 滑动中,是否禁止打开 | ||||||
|  | 		 * @param {Object} event | ||||||
|  | 		 */ | ||||||
|  | 		stopTouchMove(event) { | ||||||
|  | 			const touch = event.touches[0]; | ||||||
|  | 			this.deltaX = touch.clientX - this.startX; | ||||||
|  | 			this.deltaY = touch.clientY - this.startY; | ||||||
|  | 			this.offsetX = Math.abs(this.deltaX); | ||||||
|  | 			this.offsetY = Math.abs(this.deltaY); | ||||||
|  | 			this.direction = this.direction || this.getDirection(this.offsetX, this.offsetY); | ||||||
|  | 		}, | ||||||
|  | 
 | ||||||
|  | 		getSelectorQuery() { | ||||||
|  | 			const views = uni.createSelectorQuery().in(this) | ||||||
|  | 			views | ||||||
|  | 				.selectAll('.' + this.elClass) | ||||||
|  | 				.boundingClientRect(data => { | ||||||
|  | 					if (data.length === 0) return | ||||||
|  | 					let show = 'none' | ||||||
|  | 					if (this.autoClose) { | ||||||
|  | 						show = 'none' | ||||||
|  | 					} else { | ||||||
|  | 						show = this.show | ||||||
|  | 					} | ||||||
|  | 					this.leftWidth = data[0].width || 0 | ||||||
|  | 					this.rightWidth = data[1].width || 0 | ||||||
|  | 					this.buttonShow = show | ||||||
|  | 				}) | ||||||
|  | 				.exec() | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | // #endif
 | ||||||
|  | 
 | ||||||
|  | export default otherMixins | ||||||
|  | @ -0,0 +1,84 @@ | ||||||
|  | let mpMixins = {} | ||||||
|  | let is_pc = null | ||||||
|  | // #ifdef H5
 | ||||||
|  | import { | ||||||
|  | 	isPC | ||||||
|  | } from "./isPC" | ||||||
|  | is_pc = isPC() | ||||||
|  | // #endif
 | ||||||
|  | // #ifdef APP-VUE || APP-HARMONY || MP-WEIXIN || H5
 | ||||||
|  | 
 | ||||||
|  | mpMixins = { | ||||||
|  | 	data() { | ||||||
|  | 		return { | ||||||
|  | 			is_show: 'none' | ||||||
|  | 		} | ||||||
|  | 	}, | ||||||
|  | 	watch: { | ||||||
|  | 		show(newVal) { | ||||||
|  | 			this.is_show = this.show | ||||||
|  | 		} | ||||||
|  | 	}, | ||||||
|  | 	created() { | ||||||
|  | 		this.swipeaction = this.getSwipeAction() | ||||||
|  | 		if (this.swipeaction && Array.isArray(this.swipeaction.children)) { | ||||||
|  | 			this.swipeaction.children.push(this) | ||||||
|  | 		} | ||||||
|  | 	}, | ||||||
|  | 	mounted() { | ||||||
|  | 		this.is_show = this.show | ||||||
|  | 	}, | ||||||
|  | 	methods: { | ||||||
|  | 		// wxs 中调用
 | ||||||
|  | 		closeSwipe(e) { | ||||||
|  | 			if (this.autoClose && this.swipeaction) { | ||||||
|  | 				this.swipeaction.closeOther(this) | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
|  | 
 | ||||||
|  | 		change(e) { | ||||||
|  | 			this.$emit('change', e.open) | ||||||
|  | 			if (this.is_show !== e.open) { | ||||||
|  | 				this.is_show = e.open | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
|  | 
 | ||||||
|  | 		appTouchStart(e) { | ||||||
|  | 			if (is_pc) return | ||||||
|  | 			const { | ||||||
|  | 				clientX | ||||||
|  | 			} = e.changedTouches[0] | ||||||
|  | 			this.clientX = clientX | ||||||
|  | 			this.timestamp = new Date().getTime() | ||||||
|  | 		}, | ||||||
|  | 		appTouchEnd(e, index, item, position) { | ||||||
|  | 			if (is_pc) return | ||||||
|  | 			const { | ||||||
|  | 				clientX | ||||||
|  | 			} = e.changedTouches[0] | ||||||
|  | 			// fixed by xxxx 模拟点击事件,解决 ios 13 点击区域错位的问题
 | ||||||
|  | 			let diff = Math.abs(this.clientX - clientX) | ||||||
|  | 			let time = (new Date().getTime()) - this.timestamp | ||||||
|  | 			if (diff < 40 && time < 300) { | ||||||
|  | 				this.$emit('click', { | ||||||
|  | 					content: item, | ||||||
|  | 					index, | ||||||
|  | 					position | ||||||
|  | 				}) | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
|  | 		onClickForPC(index, item, position) { | ||||||
|  | 			if (!is_pc) return | ||||||
|  | 			// #ifdef H5
 | ||||||
|  | 			this.$emit('click', { | ||||||
|  | 				content: item, | ||||||
|  | 				index, | ||||||
|  | 				position | ||||||
|  | 			}) | ||||||
|  | 			// #endif
 | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | // #endif
 | ||||||
|  | export default mpMixins | ||||||
|  | @ -0,0 +1,277 @@ | ||||||
|  | const MIN_DISTANCE = 10; | ||||||
|  | export default { | ||||||
|  | 	showWatch(newVal, oldVal, ownerInstance, instance, self) { | ||||||
|  | 		var state = self.state || {} | ||||||
|  | 		var $el = ownerInstance.$el || ownerInstance.$vm && ownerInstance.$vm.$el | ||||||
|  | 		if (!$el) return | ||||||
|  | 		this.getDom(instance, ownerInstance, self) | ||||||
|  | 		if (newVal && newVal !== 'none') { | ||||||
|  | 			this.openState(newVal, instance, ownerInstance, self) | ||||||
|  | 			return | ||||||
|  | 		} | ||||||
|  | 
 | ||||||
|  | 		if (state.left) { | ||||||
|  | 			this.openState('none', instance, ownerInstance, self) | ||||||
|  | 		} | ||||||
|  | 		this.resetTouchStatus(instance, self) | ||||||
|  | 	}, | ||||||
|  | 
 | ||||||
|  | 	/** | ||||||
|  | 	 * 开始触摸操作 | ||||||
|  | 	 * @param {Object} e | ||||||
|  | 	 * @param {Object} ins | ||||||
|  | 	 */ | ||||||
|  | 	touchstart(e, ownerInstance, self) { | ||||||
|  | 		let instance = e.instance; | ||||||
|  | 		let disabled = instance.getDataset().disabled | ||||||
|  | 		let state = self.state || {}; | ||||||
|  | 		this.getDom(instance, ownerInstance, self) | ||||||
|  | 		// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
 | ||||||
|  | 		disabled = this.getDisabledType(disabled) | ||||||
|  | 		if (disabled) return | ||||||
|  | 		// 开始触摸时移除动画类
 | ||||||
|  | 		instance.requestAnimationFrame(function() { | ||||||
|  | 			instance.removeClass('ani'); | ||||||
|  | 			ownerInstance.callMethod('closeSwipe'); | ||||||
|  | 		}) | ||||||
|  | 
 | ||||||
|  | 		// 记录上次的位置
 | ||||||
|  | 		state.x = state.left || 0 | ||||||
|  | 		// 计算滑动开始位置
 | ||||||
|  | 		this.stopTouchStart(e, ownerInstance, self) | ||||||
|  | 	}, | ||||||
|  | 
 | ||||||
|  | 	/** | ||||||
|  | 	 * 开始滑动操作 | ||||||
|  | 	 * @param {Object} e | ||||||
|  | 	 * @param {Object} ownerInstance | ||||||
|  | 	 */ | ||||||
|  | 	touchmove(e, ownerInstance, self) { | ||||||
|  | 		let instance = e.instance; | ||||||
|  | 		// 删除之后已经那不到实例了
 | ||||||
|  | 		if (!instance) return; | ||||||
|  | 		let disabled = instance.getDataset().disabled | ||||||
|  | 		let state = self.state || {} | ||||||
|  | 		// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
 | ||||||
|  | 		disabled = this.getDisabledType(disabled) | ||||||
|  | 		if (disabled) return | ||||||
|  | 		// 是否可以滑动页面
 | ||||||
|  | 		this.stopTouchMove(e, self); | ||||||
|  | 		if (state.direction !== 'horizontal') { | ||||||
|  | 			return; | ||||||
|  | 		} | ||||||
|  | 		if (e.preventDefault) { | ||||||
|  | 			// 阻止页面滚动
 | ||||||
|  | 			e.preventDefault() | ||||||
|  | 		} | ||||||
|  | 		let x = state.x + state.deltaX | ||||||
|  | 		this.move(x, instance, ownerInstance, self) | ||||||
|  | 	}, | ||||||
|  | 
 | ||||||
|  | 	/** | ||||||
|  | 	 * 结束触摸操作 | ||||||
|  | 	 * @param {Object} e | ||||||
|  | 	 * @param {Object} ownerInstance | ||||||
|  | 	 */ | ||||||
|  | 	touchend(e, ownerInstance, self) { | ||||||
|  | 		let instance = e.instance; | ||||||
|  | 		let disabled = instance.getDataset().disabled | ||||||
|  | 		let state = self.state || {} | ||||||
|  | 		// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
 | ||||||
|  | 		disabled = this.getDisabledType(disabled) | ||||||
|  | 
 | ||||||
|  | 		if (disabled) return | ||||||
|  | 		// 滑动过程中触摸结束,通过阙值判断是开启还是关闭
 | ||||||
|  | 		// fixed by mehaotian 定时器解决点击按钮,touchend 触发比 click 事件时机早的问题 ,主要是 ios13
 | ||||||
|  | 		this.moveDirection(state.left, instance, ownerInstance, self) | ||||||
|  | 
 | ||||||
|  | 	}, | ||||||
|  | 
 | ||||||
|  | 	/** | ||||||
|  | 	 * 设置移动距离 | ||||||
|  | 	 * @param {Object} value | ||||||
|  | 	 * @param {Object} instance | ||||||
|  | 	 * @param {Object} ownerInstance | ||||||
|  | 	 */ | ||||||
|  | 	move(value, instance, ownerInstance, self) { | ||||||
|  | 		value = value || 0 | ||||||
|  | 		let state = self.state || {} | ||||||
|  | 		let leftWidth = state.leftWidth | ||||||
|  | 		let rightWidth = state.rightWidth | ||||||
|  | 		// 获取可滑动范围
 | ||||||
|  | 		state.left = this.range(value, -rightWidth, leftWidth); | ||||||
|  | 		instance.requestAnimationFrame(function() { | ||||||
|  | 			instance.setStyle({ | ||||||
|  | 				transform: 'translateX(' + state.left + 'px)', | ||||||
|  | 				'-webkit-transform': 'translateX(' + state.left + 'px)' | ||||||
|  | 			}) | ||||||
|  | 		}) | ||||||
|  | 
 | ||||||
|  | 	}, | ||||||
|  | 
 | ||||||
|  | 	/** | ||||||
|  | 	 * 获取元素信息 | ||||||
|  | 	 * @param {Object} instance | ||||||
|  | 	 * @param {Object} ownerInstance | ||||||
|  | 	 */ | ||||||
|  | 	getDom(instance, ownerInstance, self) { | ||||||
|  | 		var state = self.state || {} | ||||||
|  | 		var $el = ownerInstance.$el || ownerInstance.$vm && ownerInstance.$vm.$el | ||||||
|  | 		var leftDom = $el.querySelector('.button-group--left') | ||||||
|  | 		var rightDom = $el.querySelector('.button-group--right') | ||||||
|  | 		if (leftDom && leftDom.offsetWidth) { | ||||||
|  | 			state.leftWidth = leftDom.offsetWidth || 0 | ||||||
|  | 		} else { | ||||||
|  | 			state.leftWidth = 0 | ||||||
|  | 		} | ||||||
|  | 		if (rightDom && rightDom.offsetWidth) { | ||||||
|  | 			state.rightWidth = rightDom.offsetWidth || 0 | ||||||
|  | 		} else { | ||||||
|  | 			state.rightWidth = 0 | ||||||
|  | 		} | ||||||
|  | 		state.threshold = instance.getDataset().threshold | ||||||
|  | 	}, | ||||||
|  | 
 | ||||||
|  | 	getDisabledType(value) { | ||||||
|  | 		return (typeof(value) === 'string' ? JSON.parse(value) : value) || false; | ||||||
|  | 	}, | ||||||
|  | 
 | ||||||
|  | 	/** | ||||||
|  | 	 * 获取范围 | ||||||
|  | 	 * @param {Object} num | ||||||
|  | 	 * @param {Object} min | ||||||
|  | 	 * @param {Object} max | ||||||
|  | 	 */ | ||||||
|  | 	range(num, min, max) { | ||||||
|  | 		return Math.min(Math.max(num, min), max); | ||||||
|  | 	}, | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 	/** | ||||||
|  | 	 * 移动方向判断 | ||||||
|  | 	 * @param {Object} left | ||||||
|  | 	 * @param {Object} value | ||||||
|  | 	 * @param {Object} ownerInstance | ||||||
|  | 	 * @param {Object} ins | ||||||
|  | 	 */ | ||||||
|  | 	moveDirection(left, ins, ownerInstance, self) { | ||||||
|  | 		var state = self.state || {} | ||||||
|  | 		var threshold = state.threshold | ||||||
|  | 		var position = state.position | ||||||
|  | 		var isopen = state.isopen || 'none' | ||||||
|  | 		var leftWidth = state.leftWidth | ||||||
|  | 		var rightWidth = state.rightWidth | ||||||
|  | 		if (state.deltaX === 0) { | ||||||
|  | 			this.openState('none', ins, ownerInstance, self) | ||||||
|  | 			return | ||||||
|  | 		} | ||||||
|  | 		if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > 0 && | ||||||
|  | 				rightWidth + | ||||||
|  | 				left < threshold)) { | ||||||
|  | 			// right
 | ||||||
|  | 			this.openState('right', ins, ownerInstance, self) | ||||||
|  | 		} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > 0 && | ||||||
|  | 				leftWidth - left < threshold)) { | ||||||
|  | 			// left
 | ||||||
|  | 			this.openState('left', ins, ownerInstance, self) | ||||||
|  | 		} else { | ||||||
|  | 			// default
 | ||||||
|  | 			this.openState('none', ins, ownerInstance, self) | ||||||
|  | 		} | ||||||
|  | 	}, | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 	/** | ||||||
|  | 	 * 开启状态 | ||||||
|  | 	 * @param {Boolean} type | ||||||
|  | 	 * @param {Object} ins | ||||||
|  | 	 * @param {Object} ownerInstance | ||||||
|  | 	 */ | ||||||
|  | 	openState(type, ins, ownerInstance, self) { | ||||||
|  | 		let state = self.state || {} | ||||||
|  | 		let leftWidth = state.leftWidth | ||||||
|  | 		let rightWidth = state.rightWidth | ||||||
|  | 		let left = '' | ||||||
|  | 		state.isopen = state.isopen ? state.isopen : 'none' | ||||||
|  | 		switch (type) { | ||||||
|  | 			case "left": | ||||||
|  | 				left = leftWidth | ||||||
|  | 				break | ||||||
|  | 			case "right": | ||||||
|  | 				left = -rightWidth | ||||||
|  | 				break | ||||||
|  | 			default: | ||||||
|  | 				left = 0 | ||||||
|  | 		} | ||||||
|  | 
 | ||||||
|  | 		// && !state.throttle
 | ||||||
|  | 
 | ||||||
|  | 		if (state.isopen !== type) { | ||||||
|  | 			state.throttle = true | ||||||
|  | 			ownerInstance.callMethod('change', { | ||||||
|  | 				open: type | ||||||
|  | 			}) | ||||||
|  | 
 | ||||||
|  | 		} | ||||||
|  | 
 | ||||||
|  | 		state.isopen = type | ||||||
|  | 		// 添加动画类
 | ||||||
|  | 		ins.requestAnimationFrame(() => { | ||||||
|  | 			ins.addClass('ani'); | ||||||
|  | 			this.move(left, ins, ownerInstance, self) | ||||||
|  | 		}) | ||||||
|  | 	}, | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 	getDirection(x, y) { | ||||||
|  | 		if (x > y && x > MIN_DISTANCE) { | ||||||
|  | 			return 'horizontal'; | ||||||
|  | 		} | ||||||
|  | 		if (y > x && y > MIN_DISTANCE) { | ||||||
|  | 			return 'vertical'; | ||||||
|  | 		} | ||||||
|  | 		return ''; | ||||||
|  | 	}, | ||||||
|  | 
 | ||||||
|  | 	/** | ||||||
|  | 	 * 重置滑动状态 | ||||||
|  | 	 * @param {Object} event | ||||||
|  | 	 */ | ||||||
|  | 	resetTouchStatus(instance, self) { | ||||||
|  | 		let state = self.state || {}; | ||||||
|  | 		state.direction = ''; | ||||||
|  | 		state.deltaX = 0; | ||||||
|  | 		state.deltaY = 0; | ||||||
|  | 		state.offsetX = 0; | ||||||
|  | 		state.offsetY = 0; | ||||||
|  | 	}, | ||||||
|  | 
 | ||||||
|  | 	/** | ||||||
|  | 	 * 设置滑动开始位置 | ||||||
|  | 	 * @param {Object} event | ||||||
|  | 	 */ | ||||||
|  | 	stopTouchStart(event, ownerInstance, self) { | ||||||
|  | 		let instance = event.instance; | ||||||
|  | 		let state = self.state || {} | ||||||
|  | 		this.resetTouchStatus(instance, self); | ||||||
|  | 		var touch = event.touches[0]; | ||||||
|  | 		state.startX = touch.clientX; | ||||||
|  | 		state.startY = touch.clientY; | ||||||
|  | 	}, | ||||||
|  | 
 | ||||||
|  | 	/** | ||||||
|  | 	 * 滑动中,是否禁止打开 | ||||||
|  | 	 * @param {Object} event | ||||||
|  | 	 */ | ||||||
|  | 	stopTouchMove(event, self) { | ||||||
|  | 		let instance = event.instance; | ||||||
|  | 		let state = self.state || {}; | ||||||
|  | 		let touch = event.touches[0]; | ||||||
|  | 
 | ||||||
|  | 		state.deltaX = touch.clientX - state.startX; | ||||||
|  | 		state.deltaY = touch.clientY - state.startY; | ||||||
|  | 		state.offsetY = Math.abs(state.deltaY); | ||||||
|  | 		state.offsetX = Math.abs(state.deltaX); | ||||||
|  | 		state.direction = state.direction || this.getDirection(state.offsetX, state.offsetY); | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  | @ -0,0 +1,348 @@ | ||||||
|  | <template> | ||||||
|  | 	<!-- 在微信小程序 app vue端 h5 使用wxs 实现--> | ||||||
|  | 	<!-- #ifdef APP-VUE || APP-HARMONY || MP-WEIXIN || H5 --> | ||||||
|  | 	<view class="uni-swipe"> | ||||||
|  | 		<!--  #ifdef MP-WEIXIN || H5 --> | ||||||
|  | 		<view class="uni-swipe_box" :change:prop="wxsswipe.showWatch" :prop="is_show" :data-threshold="threshold" | ||||||
|  | 			:data-disabled="disabled" @touchstart="wxsswipe.touchstart" @touchmove="wxsswipe.touchmove" | ||||||
|  | 			@touchend="wxsswipe.touchend"> | ||||||
|  | 			<!-- #endif --> | ||||||
|  | 			<!--  #ifndef MP-WEIXIN || H5 --> | ||||||
|  | 			<view class="uni-swipe_box" :change:prop="renderswipe.showWatch" :prop="is_show" :data-threshold="threshold" | ||||||
|  | 				:data-disabled="disabled+''" @touchstart="renderswipe.touchstart" @touchmove="renderswipe.touchmove" | ||||||
|  | 				@touchend="renderswipe.touchend"> | ||||||
|  | 			<!-- #endif --> | ||||||
|  | 				<!-- 在微信小程序 app vue端 h5 使用wxs 实现--> | ||||||
|  | 				<view class="uni-swipe_button-group button-group--left"> | ||||||
|  | 					<slot name="left"> | ||||||
|  | 						<view v-for="(item,index) in leftOptions" :key="index" :style="{ | ||||||
|  | 					  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD' | ||||||
|  | 					}" class="uni-swipe_button button-hock" @touchstart.stop="appTouchStart" | ||||||
|  | 							@touchend.stop="appTouchEnd($event,index,item,'left')" @click.stop="onClickForPC(index,item,'left')"> | ||||||
|  | 							<text class="uni-swipe_button-text" | ||||||
|  | 								:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text> | ||||||
|  | 						</view> | ||||||
|  | 					</slot> | ||||||
|  | 				</view> | ||||||
|  | 				<view class="uni-swipe_text--center"> | ||||||
|  | 					<slot></slot> | ||||||
|  | 				</view> | ||||||
|  | 				<view class="uni-swipe_button-group button-group--right"> | ||||||
|  | 					<slot name="right"> | ||||||
|  | 						<view v-for="(item,index) in rightOptions" :key="index" :style="{ | ||||||
|  | 					  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD' | ||||||
|  | 					}" class="uni-swipe_button button-hock" @touchstart.stop="appTouchStart" | ||||||
|  | 							@touchend.stop="appTouchEnd($event,index,item,'right')" @click.stop="onClickForPC(index,item,'right')"><text | ||||||
|  | 								class="uni-swipe_button-text" | ||||||
|  | 								:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text> | ||||||
|  | 						</view> | ||||||
|  | 					</slot> | ||||||
|  | 				</view> | ||||||
|  | 			</view> | ||||||
|  | 		</view> | ||||||
|  | 		<!-- #endif --> | ||||||
|  | 		<!-- app nvue端 使用 bindingx --> | ||||||
|  | 		<!-- #ifdef APP-NVUE --> | ||||||
|  | 		<view ref="selector-box--hock" class="uni-swipe" @horizontalpan="touchstart" @touchend="touchend"> | ||||||
|  | 			<view ref='selector-left-button--hock' class="uni-swipe_button-group button-group--left"> | ||||||
|  | 				<slot name="left"> | ||||||
|  | 					<view v-for="(item,index) in leftOptions" :key="index" :style="{ | ||||||
|  | 				  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD' | ||||||
|  | 				}" class="uni-swipe_button button-hock" @click.stop="onClick(index,item,'left')"> | ||||||
|  | 						<text class="uni-swipe_button-text" | ||||||
|  | 							:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF', fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}"> | ||||||
|  | 							{{ item.text }} | ||||||
|  | 						</text> | ||||||
|  | 					</view> | ||||||
|  | 				</slot> | ||||||
|  | 			</view> | ||||||
|  | 			<view ref='selector-right-button--hock' class="uni-swipe_button-group button-group--right"> | ||||||
|  | 				<slot name="right"> | ||||||
|  | 					<view v-for="(item,index) in rightOptions" :key="index" :style="{ | ||||||
|  | 				  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD' | ||||||
|  | 				}" class="uni-swipe_button button-hock" @click.stop="onClick(index,item,'right')"><text | ||||||
|  | 							class="uni-swipe_button-text" | ||||||
|  | 							:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text> | ||||||
|  | 					</view> | ||||||
|  | 				</slot> | ||||||
|  | 			</view> | ||||||
|  | 			<view ref='selector-content--hock' class="uni-swipe_box"> | ||||||
|  | 				<slot></slot> | ||||||
|  | 			</view> | ||||||
|  | 		</view> | ||||||
|  | 		<!-- #endif --> | ||||||
|  | 		<!-- 其他平台使用 js ,长列表性能可能会有影响--> | ||||||
|  | 		<!-- #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-HARMONY --> | ||||||
|  | 		<view class="uni-swipe"> | ||||||
|  | 			<view class="uni-swipe_box" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" | ||||||
|  | 				:style="{transform:moveLeft}" :class="{ani:ani}"> | ||||||
|  | 				<view class="uni-swipe_button-group button-group--left" :class="[elClass]"> | ||||||
|  | 					<slot name="left"> | ||||||
|  | 						<view v-for="(item,index) in leftOptions" :key="index" :style="{ | ||||||
|  | 					  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD', | ||||||
|  | 					  fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px' | ||||||
|  | 					}" class="uni-swipe_button button-hock" @touchstart.stop="appTouchStart" | ||||||
|  | 							@touchend.stop="appTouchEnd($event,index,item,'left')"><text class="uni-swipe_button-text" | ||||||
|  | 								:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text> | ||||||
|  | 						</view> | ||||||
|  | 					</slot> | ||||||
|  | 				</view> | ||||||
|  | 				<slot></slot> | ||||||
|  | 				<view class="uni-swipe_button-group button-group--right" :class="[elClass]"> | ||||||
|  | 					<slot name="right"> | ||||||
|  | 						<view v-for="(item,index) in rightOptions" :key="index" :style="{ | ||||||
|  | 					  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD', | ||||||
|  | 					  fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px' | ||||||
|  | 					}" @touchstart.stop="appTouchStart" @touchend.stop="appTouchEnd($event,index,item,'right')" | ||||||
|  | 							class="uni-swipe_button button-hock"><text class="uni-swipe_button-text" | ||||||
|  | 								:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text> | ||||||
|  | 						</view> | ||||||
|  | 					</slot> | ||||||
|  | 				</view> | ||||||
|  | 			</view> | ||||||
|  | 		</view> | ||||||
|  | 		<!-- #endif --> | ||||||
|  | 
 | ||||||
|  | </template> | ||||||
|  | <script src="./wx.wxs" module="wxsswipe" lang="wxs"></script> | ||||||
|  | 
 | ||||||
|  | <script module="renderswipe" lang="renderjs"> | ||||||
|  | 	import render from './render.js' | ||||||
|  | 	export default { | ||||||
|  | 		mounted(e, ins, owner) { | ||||||
|  | 			this.state = {} | ||||||
|  | 		}, | ||||||
|  | 		methods: { | ||||||
|  | 			showWatch(newVal, oldVal, ownerInstance, instance) { | ||||||
|  | 				render.showWatch(newVal, oldVal, ownerInstance, instance, this) | ||||||
|  | 			}, | ||||||
|  | 			touchstart(e, ownerInstance) { | ||||||
|  | 				render.touchstart(e, ownerInstance, this) | ||||||
|  | 			}, | ||||||
|  | 			touchmove(e, ownerInstance) { | ||||||
|  | 				render.touchmove(e, ownerInstance, this) | ||||||
|  | 			}, | ||||||
|  | 			touchend(e, ownerInstance) { | ||||||
|  | 				render.touchend(e, ownerInstance, this) | ||||||
|  | 			} | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | </script> | ||||||
|  | <script> | ||||||
|  | 	import mpwxs from './mpwxs' | ||||||
|  | 	import bindingx from './bindingx.js' | ||||||
|  | 	import mpother from './mpother' | ||||||
|  | 
 | ||||||
|  | 	/** | ||||||
|  | 	 * SwipeActionItem 滑动操作子组件 | ||||||
|  | 	 * @description 通过滑动触发选项的容器 | ||||||
|  | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=181 | ||||||
|  | 	 * @property {Boolean} show = [left|right|none] 	开启关闭组件,auto-close = false 时生效 | ||||||
|  | 	 * @property {Boolean} disabled = [true|false] 		是否禁止滑动 | ||||||
|  | 	 * @property {Boolean} autoClose = [true|false] 	滑动打开当前组件,是否关闭其他组件 | ||||||
|  | 	 * @property {Number}  threshold 					滑动缺省值 | ||||||
|  | 	 * @property {Array} leftOptions 					左侧选项内容及样式 | ||||||
|  | 	 * @property {Array} rightOptions 					右侧选项内容及样式 | ||||||
|  | 	 * @event {Function} click 							点击选项按钮时触发事件,e = {content,index} ,content(点击内容)、index(下标) | ||||||
|  | 	 * @event {Function} change 						组件打开或关闭时触发,left\right\none | ||||||
|  | 	 */ | ||||||
|  | 
 | ||||||
|  | 	export default { | ||||||
|  | 		mixins: [mpwxs, bindingx, mpother], | ||||||
|  | 		emits: ['click', 'change'], | ||||||
|  | 		props: { | ||||||
|  | 			// 控制开关 | ||||||
|  | 			show: { | ||||||
|  | 				type: String, | ||||||
|  | 				default: 'none' | ||||||
|  | 			}, | ||||||
|  | 
 | ||||||
|  | 			// 禁用 | ||||||
|  | 			disabled: { | ||||||
|  | 				type: Boolean, | ||||||
|  | 				default: false | ||||||
|  | 			}, | ||||||
|  | 
 | ||||||
|  | 			// 是否自动关闭 | ||||||
|  | 			autoClose: { | ||||||
|  | 				type: Boolean, | ||||||
|  | 				default: true | ||||||
|  | 			}, | ||||||
|  | 
 | ||||||
|  | 			// 滑动缺省距离 | ||||||
|  | 			threshold: { | ||||||
|  | 				type: Number, | ||||||
|  | 				default: 20 | ||||||
|  | 			}, | ||||||
|  | 
 | ||||||
|  | 			// 左侧按钮内容 | ||||||
|  | 			leftOptions: { | ||||||
|  | 				type: Array, | ||||||
|  | 				default () { | ||||||
|  | 					return [] | ||||||
|  | 				} | ||||||
|  | 			}, | ||||||
|  | 
 | ||||||
|  | 			// 右侧按钮内容 | ||||||
|  | 			rightOptions: { | ||||||
|  | 				type: Array, | ||||||
|  | 				default () { | ||||||
|  | 					return [] | ||||||
|  | 				} | ||||||
|  | 			} | ||||||
|  | 
 | ||||||
|  | 		}, | ||||||
|  | 		// #ifndef VUE3 | ||||||
|  | 		// TODO vue2 | ||||||
|  | 		destroyed() { | ||||||
|  | 			if (this.__isUnmounted) return | ||||||
|  | 			this.uninstall() | ||||||
|  | 		}, | ||||||
|  | 		// #endif | ||||||
|  | 		// #ifdef VUE3 | ||||||
|  | 		// TODO vue3 | ||||||
|  | 		unmounted() { | ||||||
|  | 			this.__isUnmounted = true | ||||||
|  | 			this.uninstall() | ||||||
|  | 		}, | ||||||
|  | 		// #endif | ||||||
|  | 
 | ||||||
|  | 		methods: { | ||||||
|  | 			uninstall() { | ||||||
|  | 				if (this.swipeaction) { | ||||||
|  | 					this.swipeaction.children.forEach((item, index) => { | ||||||
|  | 						if (item === this) { | ||||||
|  | 							this.swipeaction.children.splice(index, 1) | ||||||
|  | 						} | ||||||
|  | 					}) | ||||||
|  | 				} | ||||||
|  | 			}, | ||||||
|  | 			/** | ||||||
|  | 			 * 获取父元素实例 | ||||||
|  | 			 */ | ||||||
|  | 			getSwipeAction(name = 'uniSwipeAction') { | ||||||
|  | 				let parent = this.$parent; | ||||||
|  | 				let parentName = parent.$options.name; | ||||||
|  | 				while (parentName !== name) { | ||||||
|  | 					parent = parent.$parent; | ||||||
|  | 					if (!parent) return false; | ||||||
|  | 					parentName = parent.$options.name; | ||||||
|  | 				} | ||||||
|  | 				return parent; | ||||||
|  | 			} | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | </script> | ||||||
|  | <style lang="scss"> | ||||||
|  | 	.uni-swipe { | ||||||
|  | 		position: relative; | ||||||
|  | 		/* #ifndef APP-NVUE */ | ||||||
|  | 		overflow: hidden; | ||||||
|  | 		/* #endif */ | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	.uni-swipe_box { | ||||||
|  | 		/* #ifndef APP-NVUE */ | ||||||
|  | 		display: flex; | ||||||
|  | 		flex-shrink: 0; | ||||||
|  | 		// touch-action: none; | ||||||
|  | 		/* #endif */ | ||||||
|  | 		position: relative; | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	.uni-swipe_content { | ||||||
|  | 		// border: 1px red solid; | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	.uni-swipe_text--center { | ||||||
|  | 		width: 100%; | ||||||
|  | 		/* #ifndef APP-NVUE */ | ||||||
|  | 		cursor: grab; | ||||||
|  | 		/* #endif */ | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	.uni-swipe_button-group { | ||||||
|  | 		/* #ifndef APP-NVUE */ | ||||||
|  | 		box-sizing: border-box; | ||||||
|  | 		display: flex; | ||||||
|  | 		/* #endif */ | ||||||
|  | 		flex-direction: row; | ||||||
|  | 		position: absolute; | ||||||
|  | 		top: 0; | ||||||
|  | 		bottom: 0; | ||||||
|  | 		/* #ifdef H5 */ | ||||||
|  | 		cursor: pointer; | ||||||
|  | 		/* #endif */ | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	.button-group--left { | ||||||
|  | 		left: 0; | ||||||
|  | 		transform: translateX(-100%) | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	.button-group--right { | ||||||
|  | 		right: 0; | ||||||
|  | 		transform: translateX(100%) | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	.uni-swipe_button { | ||||||
|  | 		/* #ifdef APP-NVUE */ | ||||||
|  | 		flex: 1; | ||||||
|  | 		/* #endif */ | ||||||
|  | 		/* #ifndef APP-NVUE */ | ||||||
|  | 		display: flex; | ||||||
|  | 		/* #endif */ | ||||||
|  | 		flex-direction: row; | ||||||
|  | 		justify-content: center; | ||||||
|  | 		align-items: center; | ||||||
|  | 		padding: 0 20px; | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	.uni-swipe_button-text { | ||||||
|  | 		/* #ifndef APP-NVUE */ | ||||||
|  | 		flex-shrink: 0; | ||||||
|  | 		/* #endif */ | ||||||
|  | 		font-size: 14px; | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	.ani { | ||||||
|  | 		transition-property: transform; | ||||||
|  | 		transition-duration: 0.3s; | ||||||
|  | 		transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	/* #ifdef MP-ALIPAY */ | ||||||
|  | 	.movable-area { | ||||||
|  | 		/* width: 100%; */ | ||||||
|  | 		height: 45px; | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	.movable-view { | ||||||
|  | 		display: flex; | ||||||
|  | 		/* justify-content: center; */ | ||||||
|  | 		position: relative; | ||||||
|  | 		flex: 1; | ||||||
|  | 		height: 45px; | ||||||
|  | 		z-index: 2; | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	.movable-view-button { | ||||||
|  | 		display: flex; | ||||||
|  | 		flex-shrink: 0; | ||||||
|  | 		flex-direction: row; | ||||||
|  | 		height: 100%; | ||||||
|  | 		background: #C0C0C0; | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	/* .transition { | ||||||
|  | 		transition: all 0.3s; | ||||||
|  | 	} */ | ||||||
|  | 
 | ||||||
|  | 	.movable-view-box { | ||||||
|  | 		flex-shrink: 0; | ||||||
|  | 		height: 100%; | ||||||
|  | 		background-color: #fff; | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	/* #endif */ | ||||||
|  | </style> | ||||||
|  | @ -0,0 +1,349 @@ | ||||||
|  | var MIN_DISTANCE = 10; | ||||||
|  | 
 | ||||||
|  | /** | ||||||
|  |  * 判断当前是否为H5、app-vue | ||||||
|  |  */ | ||||||
|  | var IS_HTML5 = false | ||||||
|  | if (typeof window === 'object') IS_HTML5 = true | ||||||
|  | 
 | ||||||
|  | /** | ||||||
|  |  * 监听页面内值的变化,主要用于动态开关swipe-action | ||||||
|  |  * @param {Object} newValue | ||||||
|  |  * @param {Object} oldValue | ||||||
|  |  * @param {Object} ownerInstance | ||||||
|  |  * @param {Object} instance | ||||||
|  |  */ | ||||||
|  | function showWatch(newVal, oldVal, ownerInstance, instance) { | ||||||
|  | 	var state = instance.getState() | ||||||
|  | 	getDom(instance, ownerInstance) | ||||||
|  | 	if (newVal && newVal !== 'none') { | ||||||
|  | 		openState(newVal, instance, ownerInstance) | ||||||
|  | 		return | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	if (state.left) { | ||||||
|  | 		openState('none', instance, ownerInstance) | ||||||
|  | 	} | ||||||
|  | 	resetTouchStatus(instance) | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /** | ||||||
|  |  * 开始触摸操作 | ||||||
|  |  * @param {Object} e | ||||||
|  |  * @param {Object} ins | ||||||
|  |  */ | ||||||
|  | function touchstart(e, ownerInstance) { | ||||||
|  | 	var instance = e.instance; | ||||||
|  | 	var disabled = instance.getDataset().disabled | ||||||
|  | 	var state = instance.getState(); | ||||||
|  | 	getDom(instance, ownerInstance) | ||||||
|  | 	// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复 | ||||||
|  | 	disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false; | ||||||
|  | 	if (disabled) return | ||||||
|  | 	// 开始触摸时移除动画类 | ||||||
|  | 	instance.requestAnimationFrame(function() { | ||||||
|  | 		instance.removeClass('ani'); | ||||||
|  | 		ownerInstance.callMethod('closeSwipe'); | ||||||
|  | 	}) | ||||||
|  | 
 | ||||||
|  | 	// 记录上次的位置 | ||||||
|  | 	state.x = state.left || 0 | ||||||
|  | 	// 计算滑动开始位置 | ||||||
|  | 	stopTouchStart(e, ownerInstance) | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /** | ||||||
|  |  * 开始滑动操作 | ||||||
|  |  * @param {Object} e | ||||||
|  |  * @param {Object} ownerInstance | ||||||
|  |  */ | ||||||
|  | function touchmove(e, ownerInstance) { | ||||||
|  | 	var instance = e.instance; | ||||||
|  | 	var disabled = instance.getDataset().disabled | ||||||
|  | 	var state = instance.getState() | ||||||
|  | 	// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复 | ||||||
|  | 	disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false; | ||||||
|  | 	if (disabled) return | ||||||
|  | 	// 是否可以滑动页面 | ||||||
|  | 	stopTouchMove(e); | ||||||
|  | 	if (state.direction !== 'horizontal') { | ||||||
|  | 		return; | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	if (e.preventDefault) { | ||||||
|  | 		// 阻止页面滚动 | ||||||
|  | 		e.preventDefault() | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	move(state.x + state.deltaX, instance, ownerInstance) | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /** | ||||||
|  |  * 结束触摸操作 | ||||||
|  |  * @param {Object} e | ||||||
|  |  * @param {Object} ownerInstance | ||||||
|  |  */ | ||||||
|  | function touchend(e, ownerInstance) { | ||||||
|  | 	var instance = e.instance; | ||||||
|  | 	var disabled = instance.getDataset().disabled | ||||||
|  | 	var state = instance.getState() | ||||||
|  | 	// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复 | ||||||
|  | 	disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false; | ||||||
|  | 
 | ||||||
|  | 	if (disabled) return | ||||||
|  | 	// 滑动过程中触摸结束,通过阙值判断是开启还是关闭 | ||||||
|  | 	// fixed by mehaotian 定时器解决点击按钮,touchend 触发比 click 事件时机早的问题 ,主要是 ios13 | ||||||
|  | 	moveDirection(state.left, instance, ownerInstance) | ||||||
|  | 
 | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /** | ||||||
|  |  * 设置移动距离 | ||||||
|  |  * @param {Object} value | ||||||
|  |  * @param {Object} instance | ||||||
|  |  * @param {Object} ownerInstance | ||||||
|  |  */ | ||||||
|  | function move(value, instance, ownerInstance) { | ||||||
|  | 	value = value || 0 | ||||||
|  | 	var state = instance.getState() | ||||||
|  | 	var leftWidth = state.leftWidth | ||||||
|  | 	var rightWidth = state.rightWidth | ||||||
|  | 	// 获取可滑动范围 | ||||||
|  | 	state.left = range(value, -rightWidth, leftWidth); | ||||||
|  | 	instance.requestAnimationFrame(function() { | ||||||
|  | 		instance.setStyle({ | ||||||
|  | 			transform: 'translateX(' + state.left + 'px)', | ||||||
|  | 			'-webkit-transform': 'translateX(' + state.left + 'px)' | ||||||
|  | 		}) | ||||||
|  | 	}) | ||||||
|  | 
 | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /** | ||||||
|  |  * 获取元素信息 | ||||||
|  |  * @param {Object} instance | ||||||
|  |  * @param {Object} ownerInstance | ||||||
|  |  */ | ||||||
|  | function getDom(instance, ownerInstance) { | ||||||
|  | 	var state = instance.getState() | ||||||
|  | 	var leftDom = ownerInstance.selectComponent('.button-group--left') | ||||||
|  | 	var rightDom = ownerInstance.selectComponent('.button-group--right') | ||||||
|  | 	var leftStyles = { | ||||||
|  | 		width: 0 | ||||||
|  | 	} | ||||||
|  | 	var rightStyles = { | ||||||
|  | 		width: 0 | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	if (leftDom) { | ||||||
|  | 		leftStyles = leftDom.getBoundingClientRect() | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	if (rightDom) { | ||||||
|  | 		rightStyles = rightDom.getBoundingClientRect() | ||||||
|  | 	} | ||||||
|  | 	state.leftWidth = leftStyles.width || 0 | ||||||
|  | 	state.rightWidth = rightStyles.width || 0 | ||||||
|  | 	state.threshold = instance.getDataset().threshold | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /** | ||||||
|  |  * 获取范围 | ||||||
|  |  * @param {Object} num | ||||||
|  |  * @param {Object} min | ||||||
|  |  * @param {Object} max | ||||||
|  |  */ | ||||||
|  | function range(num, min, max) { | ||||||
|  | 	return Math.min(Math.max(num, min), max); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | /** | ||||||
|  |  * 移动方向判断 | ||||||
|  |  * @param {Object} left | ||||||
|  |  * @param {Object} value | ||||||
|  |  * @param {Object} ownerInstance | ||||||
|  |  * @param {Object} ins | ||||||
|  |  */ | ||||||
|  | function moveDirection(left, ins, ownerInstance) { | ||||||
|  | 	var state = ins.getState() | ||||||
|  | 	var threshold = state.threshold | ||||||
|  | 	var position = state.position | ||||||
|  | 	var isopen = state.isopen || 'none' | ||||||
|  | 	var leftWidth = state.leftWidth | ||||||
|  | 	var rightWidth = state.rightWidth | ||||||
|  | 	if (state.deltaX === 0) { | ||||||
|  | 		openState('none', ins, ownerInstance) | ||||||
|  | 		return | ||||||
|  | 	} | ||||||
|  | 	if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > 0 && | ||||||
|  | 			rightWidth + | ||||||
|  | 			left < threshold)) { | ||||||
|  | 		// right | ||||||
|  | 		openState('right', ins, ownerInstance) | ||||||
|  | 	} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > 0 && | ||||||
|  | 			leftWidth - left < threshold)) { | ||||||
|  | 		// left | ||||||
|  | 		openState('left', ins, ownerInstance) | ||||||
|  | 	} else { | ||||||
|  | 		// default | ||||||
|  | 		openState('none', ins, ownerInstance) | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | /** | ||||||
|  |  * 开启状态 | ||||||
|  |  * @param {Boolean} type | ||||||
|  |  * @param {Object} ins | ||||||
|  |  * @param {Object} ownerInstance | ||||||
|  |  */ | ||||||
|  | function openState(type, ins, ownerInstance) { | ||||||
|  | 	var state = ins.getState() | ||||||
|  | 	var leftWidth = state.leftWidth | ||||||
|  | 	var rightWidth = state.rightWidth | ||||||
|  | 	var left = '' | ||||||
|  | 	state.isopen = state.isopen ? state.isopen : 'none' | ||||||
|  | 	switch (type) { | ||||||
|  | 		case "left": | ||||||
|  | 			left = leftWidth | ||||||
|  | 			break | ||||||
|  | 		case "right": | ||||||
|  | 			left = -rightWidth | ||||||
|  | 			break | ||||||
|  | 		default: | ||||||
|  | 			left = 0 | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	// && !state.throttle | ||||||
|  | 
 | ||||||
|  | 	if (state.isopen !== type) { | ||||||
|  | 		state.throttle = true | ||||||
|  | 		ownerInstance.callMethod('change', { | ||||||
|  | 			open: type | ||||||
|  | 		}) | ||||||
|  | 
 | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	state.isopen = type | ||||||
|  | 	// 添加动画类 | ||||||
|  | 	ins.requestAnimationFrame(function() { | ||||||
|  | 		ins.addClass('ani'); | ||||||
|  | 		move(left, ins, ownerInstance) | ||||||
|  | 	}) | ||||||
|  | 	// 设置最终移动位置,理论上只要进入到这个函数,肯定是要打开的 | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | function getDirection(x, y) { | ||||||
|  | 	if (x > y && x > MIN_DISTANCE) { | ||||||
|  | 		return 'horizontal'; | ||||||
|  | 	} | ||||||
|  | 	if (y > x && y > MIN_DISTANCE) { | ||||||
|  | 		return 'vertical'; | ||||||
|  | 	} | ||||||
|  | 	return ''; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /** | ||||||
|  |  * 重置滑动状态 | ||||||
|  |  * @param {Object} event | ||||||
|  |  */ | ||||||
|  | function resetTouchStatus(instance) { | ||||||
|  | 	var state = instance.getState(); | ||||||
|  | 	state.direction = ''; | ||||||
|  | 	state.deltaX = 0; | ||||||
|  | 	state.deltaY = 0; | ||||||
|  | 	state.offsetX = 0; | ||||||
|  | 	state.offsetY = 0; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /** | ||||||
|  |  * 设置滑动开始位置 | ||||||
|  |  * @param {Object} event | ||||||
|  |  */ | ||||||
|  | function stopTouchStart(event) { | ||||||
|  | 	var instance = event.instance; | ||||||
|  | 	var state = instance.getState(); | ||||||
|  | 	resetTouchStatus(instance); | ||||||
|  | 	var touch = event.touches[0]; | ||||||
|  | 	if (IS_HTML5 && isPC()) { | ||||||
|  | 		touch = event; | ||||||
|  | 	} | ||||||
|  | 	state.startX = touch.clientX; | ||||||
|  | 	state.startY = touch.clientY; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /** | ||||||
|  |  * 滑动中,是否禁止打开 | ||||||
|  |  * @param {Object} event | ||||||
|  |  */ | ||||||
|  | function stopTouchMove(event) { | ||||||
|  | 	var instance = event.instance; | ||||||
|  | 	var state = instance.getState(); | ||||||
|  | 	var touch = event.touches[0]; | ||||||
|  | 	if (IS_HTML5 && isPC()) { | ||||||
|  | 		touch = event; | ||||||
|  | 	} | ||||||
|  | 	state.deltaX = touch.clientX - state.startX; | ||||||
|  | 	state.deltaY = touch.clientY - state.startY; | ||||||
|  | 	state.offsetY = Math.abs(state.deltaY); | ||||||
|  | 	state.offsetX = Math.abs(state.deltaX); | ||||||
|  | 	state.direction = state.direction || getDirection(state.offsetX, state.offsetY); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | function isPC() { | ||||||
|  | 	var userAgentInfo = navigator.userAgent; | ||||||
|  | 	var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; | ||||||
|  | 	var flag = true; | ||||||
|  | 	for (var v = 0; v < Agents.length - 1; v++) { | ||||||
|  | 		if (userAgentInfo.indexOf(Agents[v]) > 0) { | ||||||
|  | 			flag = false; | ||||||
|  | 			break; | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  |   if(userAgentInfo.indexOf('Phone') > 0 && userAgentInfo.indexOf('Harmony') > 0){ | ||||||
|  |     flag = false; | ||||||
|  |   } | ||||||
|  | 	return flag; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | var movable = false | ||||||
|  | 
 | ||||||
|  | function mousedown(e, ins) { | ||||||
|  | 	if (!IS_HTML5) return | ||||||
|  | 	if (!isPC()) return | ||||||
|  | 	touchstart(e, ins) | ||||||
|  | 	movable = true | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | function mousemove(e, ins) { | ||||||
|  | 	if (!IS_HTML5) return | ||||||
|  | 	if (!isPC()) return | ||||||
|  | 	if (!movable) return | ||||||
|  | 	touchmove(e, ins) | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | function mouseup(e, ins) { | ||||||
|  | 	if (!IS_HTML5) return | ||||||
|  | 	if (!isPC()) return | ||||||
|  | 	touchend(e, ins) | ||||||
|  | 	movable = false | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | function mouseleave(e, ins) { | ||||||
|  | 	if (!IS_HTML5) return | ||||||
|  | 	if (!isPC()) return | ||||||
|  | 	movable = false | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | module.exports = { | ||||||
|  | 	showWatch: showWatch, | ||||||
|  | 	touchstart: touchstart, | ||||||
|  | 	touchmove: touchmove, | ||||||
|  | 	touchend: touchend, | ||||||
|  | 	mousedown: mousedown, | ||||||
|  | 	mousemove: mousemove, | ||||||
|  | 	mouseup: mouseup, | ||||||
|  | 	mouseleave: mouseleave | ||||||
|  | } | ||||||
|  | @ -0,0 +1,60 @@ | ||||||
|  | <template> | ||||||
|  | 	<view> | ||||||
|  | 		<slot></slot> | ||||||
|  | 	</view> | ||||||
|  | </template> | ||||||
|  | 
 | ||||||
|  | <script> | ||||||
|  | 	/** | ||||||
|  | 	 * SwipeAction 滑动操作 | ||||||
|  | 	 * @description 通过滑动触发选项的容器 | ||||||
|  | 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=181 | ||||||
|  | 	 */ | ||||||
|  | 	export default { | ||||||
|  | 		name:"uniSwipeAction", | ||||||
|  | 		data() { | ||||||
|  | 			return {}; | ||||||
|  | 		}, | ||||||
|  | 		created() { | ||||||
|  | 			this.children = []; | ||||||
|  | 		}, | ||||||
|  | 		methods: { | ||||||
|  | 			// 公开给用户使用,重制组件样式 | ||||||
|  | 			resize(){ | ||||||
|  | 				// wxs 会自己计算组件大小,所以无需执行下面代码 | ||||||
|  | 				// #ifndef APP-VUE || H5 || MP-WEIXIN || MP-HARMONY | ||||||
|  | 				this.children.forEach(vm=>{ | ||||||
|  | 					vm.init() | ||||||
|  | 				}) | ||||||
|  | 				// #endif | ||||||
|  | 			}, | ||||||
|  | 			// 公开给用户使用,关闭全部 已经打开的组件 | ||||||
|  | 			closeAll(){ | ||||||
|  | 				this.children.forEach(vm=>{ | ||||||
|  | 					// #ifdef APP-VUE || H5 || MP-WEIXIN || MP-HARMONY | ||||||
|  | 					vm.is_show = 'none' | ||||||
|  | 					// #endif | ||||||
|  | 
 | ||||||
|  | 					// #ifndef APP-VUE || H5 || MP-WEIXIN || MP-HARMONY | ||||||
|  | 					vm.close() | ||||||
|  | 					// #endif | ||||||
|  | 				}) | ||||||
|  | 			}, | ||||||
|  | 			closeOther(vm) { | ||||||
|  | 				if (this.openItem && this.openItem !== vm) { | ||||||
|  | 					// #ifdef APP-VUE || H5 || MP-WEIXIN || MP-HARMONY | ||||||
|  | 					this.openItem.is_show = 'none' | ||||||
|  | 					// #endif | ||||||
|  | 
 | ||||||
|  | 					// #ifndef APP-VUE || H5 || MP-WEIXIN || MP-HARMONY | ||||||
|  | 					this.openItem.close() | ||||||
|  | 					// #endif | ||||||
|  | 				} | ||||||
|  | 				// 记录上一个打开的 swipe-action-item ,用于 auto-close | ||||||
|  | 				this.openItem = vm | ||||||
|  | 			} | ||||||
|  | 		} | ||||||
|  | 	}; | ||||||
|  | </script> | ||||||
|  | 
 | ||||||
|  | <style></style> | ||||||
|  | @ -0,0 +1,112 @@ | ||||||
|  | { | ||||||
|  |   "id": "uni-swipe-action", | ||||||
|  |   "displayName": "uni-swipe-action 滑动操作", | ||||||
|  |   "version": "1.3.16", | ||||||
|  |   "description": "SwipeAction 滑动操作操作组件", | ||||||
|  |   "keywords": [ | ||||||
|  |     "", | ||||||
|  |     "uni-ui", | ||||||
|  |     "uniui", | ||||||
|  |     "滑动删除", | ||||||
|  |     "侧滑删除" | ||||||
|  | ], | ||||||
|  |   "repository": "https://github.com/dcloudio/uni-ui", | ||||||
|  |   "engines": { | ||||||
|  |     "HBuilderX": "", | ||||||
|  |     "uni-app": "^4.27", | ||||||
|  |     "uni-app-x": "" | ||||||
|  |   }, | ||||||
|  |   "directories": { | ||||||
|  |     "example": "../../temps/example_temps" | ||||||
|  |   }, | ||||||
|  |   "dcloudext": { | ||||||
|  |     "sale": { | ||||||
|  |       "regular": { | ||||||
|  |         "price": "0.00" | ||||||
|  |       }, | ||||||
|  |       "sourcecode": { | ||||||
|  |         "price": "0.00" | ||||||
|  |       } | ||||||
|  |     }, | ||||||
|  |     "contact": { | ||||||
|  |       "qq": "" | ||||||
|  |     }, | ||||||
|  |     "declaration": { | ||||||
|  |       "ads": "无", | ||||||
|  |       "data": "无", | ||||||
|  |       "permissions": "无" | ||||||
|  |     }, | ||||||
|  |     "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", | ||||||
|  |     "type": "component-vue", | ||||||
|  |     "darkmode": "x", | ||||||
|  |     "i18n": "x", | ||||||
|  |     "widescreen": "x" | ||||||
|  |   }, | ||||||
|  |   "uni_modules": { | ||||||
|  |     "dependencies": [ | ||||||
|  |       "uni-scss" | ||||||
|  |     ], | ||||||
|  |     "encrypt": [], | ||||||
|  |     "platforms": { | ||||||
|  |       "cloud": { | ||||||
|  |         "tcb": "x", | ||||||
|  |         "aliyun": "x", | ||||||
|  |         "alipay": "x" | ||||||
|  |       }, | ||||||
|  |       "client": { | ||||||
|  |         "uni-app": { | ||||||
|  |           "vue": { | ||||||
|  |             "vue2": { | ||||||
|  |                 "extVersion": "1.3.14", | ||||||
|  |                 "minVersion": "" | ||||||
|  |             }, | ||||||
|  |             "vue3": { | ||||||
|  |                 "extVersion": "1.3.14", | ||||||
|  |                 "minVersion": "" | ||||||
|  |             } | ||||||
|  |           }, | ||||||
|  |           "web": { | ||||||
|  |             "safari": "-", | ||||||
|  |             "chrome": "-" | ||||||
|  |           }, | ||||||
|  |           "app": { | ||||||
|  |             "vue": "-", | ||||||
|  |             "nvue": "-", | ||||||
|  |             "android": "-", | ||||||
|  |             "ios": "-", | ||||||
|  |             "harmony": "-" | ||||||
|  |           }, | ||||||
|  |           "mp": { | ||||||
|  |             "weixin": "-", | ||||||
|  |             "alipay": "-", | ||||||
|  |             "toutiao": "-", | ||||||
|  |             "baidu": "-", | ||||||
|  |             "kuaishou": "-", | ||||||
|  |             "jd": "-", | ||||||
|  |             "harmony": "-", | ||||||
|  |             "qq": "-", | ||||||
|  |             "lark": "-" | ||||||
|  |           }, | ||||||
|  |           "quickapp": { | ||||||
|  |             "huawei": "-", | ||||||
|  |             "union": "-" | ||||||
|  |           } | ||||||
|  |         }, | ||||||
|  |         "uni-app-x": { | ||||||
|  |           "web": { | ||||||
|  |             "safari": "-", | ||||||
|  |             "chrome": "-" | ||||||
|  |           }, | ||||||
|  |           "app": { | ||||||
|  |             "android": "-", | ||||||
|  |             "ios": "-", | ||||||
|  |             "harmony": "-" | ||||||
|  |           }, | ||||||
|  |           "mp": { | ||||||
|  |             "weixin": "-" | ||||||
|  |           } | ||||||
|  |         } | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | @ -0,0 +1,11 @@ | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | ## SwipeAction 滑动操作 | ||||||
|  | > **组件名:uni-swipe-action** | ||||||
|  | > 代码块: `uSwipeAction`、`uSwipeActionItem` | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 通过滑动触发选项的容器 | ||||||
|  | 
 | ||||||
|  | ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-swipe-action) | ||||||
|  | #### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839  | ||||||
		Loading…
	
		Reference in New Issue