Compare commits
No commits in common. "main" and "main-ai对话" have entirely different histories.
3
App.vue
3
App.vue
|
@ -36,12 +36,11 @@ export default {
|
|||
});
|
||||
|
||||
if (!that.vuex_token) {
|
||||
const type = that.vuex_userType || 0; // 0:学生 1:教师
|
||||
this.$u.vuex("vuex_user", "");
|
||||
this.$u.vuex("vuex_token", "");
|
||||
uni.clearStorage();
|
||||
uni.reLaunch({
|
||||
url: `/pages/login/login/index?type=${type}`,
|
||||
url: "/pages/login/login/index",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
|
|
@ -1,220 +1,172 @@
|
|||
// 此处第二个参数vm,就是我们在页面使用的this,你可以通过vm获取vuex等操作
|
||||
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 RegisterUser = (params = {}) =>
|
||||
vm.$u.post("api/Token/RegisterUser", params);
|
||||
// 基础资料以及保存用户头像
|
||||
let saveUserInfo = (params = {}) =>
|
||||
vm.$u.post("app/User/UploadingFormFileHead", params);
|
||||
// 更新用户定位信息
|
||||
let upPosition = (params = {}) =>
|
||||
vm.$u.post("app/Position/InsertPosition", params);
|
||||
// 获取用户当前定位信息
|
||||
let getPosition = (params = {}) =>
|
||||
vm.$u.get("app/Position/GetPositionByUser", {
|
||||
userId: vm.vuex_user.id,
|
||||
// 登录
|
||||
let LoginApp = (params = {}) => vm.$u.post('api/Token/LoginApp', params)
|
||||
// 注册
|
||||
let RegisterUser = (params = {}) => vm.$u.post('api/Token/RegisterUser', params);
|
||||
// 基础资料以及保存用户头像
|
||||
let saveUserInfo = (params = {}) => vm.$u.post('app/User/UploadingFormFileHead', params);
|
||||
// 更新用户定位信息
|
||||
let upPosition = (params = {}) => vm.$u.post('app/Position/InsertPosition', params);
|
||||
// 获取用户当前定位信息
|
||||
let getPosition = (params = {}) => vm.$u.get('app/Position/GetPositionByUser', {
|
||||
userId: vm.vuex_user.id
|
||||
});
|
||||
// 获取所有学校
|
||||
let GetAllSchool = (params = {}) =>
|
||||
vm.$u.get("app/User/GetSchoolList", params);
|
||||
//获取首页地图信息
|
||||
let HomeMap = (params = {}) => vm.$u.get("/app/User/HomeMap", params);
|
||||
//修改密码
|
||||
let ChangePassword = (params = {}) =>
|
||||
vm.$u.post("app/User/ChangePassword", params);
|
||||
//修改密码
|
||||
let myChangePassword = (params = {}) =>
|
||||
vm.$u.post("app/My/ChangePassword", params);
|
||||
// 获取搜索页面相关信息
|
||||
let SearchInfo = (params = {}) =>
|
||||
vm.$u.get("app/User/SearchRelevant", params);
|
||||
//获取搜索结果页面
|
||||
let getSearch = (params = {}) => vm.$u.get("app/User/GetSearchList", params);
|
||||
// 获取用户信息
|
||||
let getUserInfo = (params = {}) => vm.$u.get("app/User/HomePage", params);
|
||||
// 获取校友帮帮列表
|
||||
let GetHelpList = (params = {}) =>
|
||||
vm.$u.get("app/HelpArticle/GetHelpArticleListByKey", 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) => {
|
||||
vm.$u.get("/app/User/GetUserSchool").then((ress) => {
|
||||
// res.isAttestationGLY = ress.isAttestationGLY
|
||||
// res.isAttestationJZG = ress.isAttestationJZG
|
||||
// res.isAttestationQY = ress.isAttestationQY
|
||||
// res.isAttestationXY = res.isAttestationXY
|
||||
// res.isAttestationZXS = ress.isAttestationZXS
|
||||
res.schoolId = ress.items.schoolId;
|
||||
vm.$u.vuex("vuex_user", { ...res.user, ...res.userExtension });
|
||||
vm.$u.vuex("vuex_user_hobby", res.lableList);
|
||||
});
|
||||
});
|
||||
//获取用户消息列表
|
||||
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 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 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 getChatRecord = (params = {}) =>
|
||||
vm.$u.get("app/Chat/GetChatRecord", params);
|
||||
//校友找找列表
|
||||
let AlumnSearchList = (params = {}) =>
|
||||
vm.$u.get("app/AlumnRange/AlumnSearchList", params);
|
||||
// 初始化的数据调用微信接口返回参数
|
||||
let GetInfoMation = (params = {}) =>
|
||||
vm.$u.get("api/Token/GetInfoMation", params);
|
||||
// 回复绑定
|
||||
let toBind = (params = {}) => vm.$u.get("app/Chat/ReplyBind", params);
|
||||
//我的资讯
|
||||
let MyAlumnRange = (params = {}) => vm.$u.get("app/My/MyAlumnRange", params);
|
||||
// 解除绑定
|
||||
let colseBind = (params = {}) => vm.$u.get("app/Chat/UnbindReply", params);
|
||||
// 删除评论
|
||||
let DelateComment = (params = {}) =>
|
||||
vm.$u.get("app/AlumnRange/DelateComment", params);
|
||||
let userVerify = (params = {}) =>
|
||||
vm.$u.post("api/Token/IsIdentityCard", params);
|
||||
// 获取所有学校
|
||||
let GetAllSchool = (params = {}) => vm.$u.get('app/User/GetSchoolList', params);
|
||||
//获取首页地图信息
|
||||
let HomeMap = (params = {}) => vm.$u.get('/app/User/HomeMap', params);
|
||||
//修改密码
|
||||
let ChangePassword = (params = {}) => vm.$u.post('app/User/ChangePassword', params);
|
||||
//修改密码
|
||||
let myChangePassword = (params = {}) => vm.$u.post('app/My/ChangePassword', params);
|
||||
// 获取搜索页面相关信息
|
||||
let SearchInfo = (params = {}) => vm.$u.get('app/User/SearchRelevant', params);
|
||||
//获取搜索结果页面
|
||||
let getSearch = (params = {}) => vm.$u.get('app/User/GetSearchList', params);
|
||||
// 获取用户信息
|
||||
let getUserInfo = (params = {}) => vm.$u.get('app/User/HomePage', params);
|
||||
// 获取校友帮帮列表
|
||||
let GetHelpList = (params = {}) => vm.$u.get('app/HelpArticle/GetHelpArticleListByKey', 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 => {
|
||||
vm.$u.get('/app/User/GetUserSchool').then(ress => {
|
||||
// res.isAttestationGLY = ress.isAttestationGLY
|
||||
// res.isAttestationJZG = ress.isAttestationJZG
|
||||
// res.isAttestationQY = ress.isAttestationQY
|
||||
// res.isAttestationXY = res.isAttestationXY
|
||||
// res.isAttestationZXS = ress.isAttestationZXS
|
||||
res.schoolId = ress.items.schoolId
|
||||
vm.$u.vuex('vuex_user', {...res.user,...res.userExtension})
|
||||
vm.$u.vuex('vuex_user_hobby', res.lableList)
|
||||
})
|
||||
})
|
||||
//获取用户消息列表
|
||||
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 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 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 getChatRecord = (params = {}) => vm.$u.get('app/Chat/GetChatRecord', params);
|
||||
//校友找找列表
|
||||
let AlumnSearchList = (params = {}) => vm.$u.get('app/AlumnRange/AlumnSearchList', params);
|
||||
// 初始化的数据调用微信接口返回参数
|
||||
let GetInfoMation = (params = {}) => vm.$u.get('api/Token/GetInfoMation', params);
|
||||
// 回复绑定
|
||||
let toBind = (params = {}) => vm.$u.get('app/Chat/ReplyBind', params);
|
||||
//我的资讯
|
||||
let MyAlumnRange = (params = {}) => vm.$u.get('app/My/MyAlumnRange', params);
|
||||
// 解除绑定
|
||||
let colseBind = (params = {}) => vm.$u.get('app/Chat/UnbindReply', params);
|
||||
// 删除评论
|
||||
let DelateComment = (params = {}) => vm.$u.get('app/AlumnRange/DelateComment', params);
|
||||
let userVerify = (params = {}) => vm.$u.post('api/Token/IsIdentityCard', params)
|
||||
|
||||
// 获取人脸验证token
|
||||
let getAPIToken = (params = {}) =>
|
||||
vm.$u.post("app/My/GetVerifyToken", params);
|
||||
// 查询人脸核验结果
|
||||
let getVerifyInfo = (params = {}) =>
|
||||
vm.$u.post("app/My/GetDetailInfo?VerifyToken=" + params);
|
||||
// 根据身份证获取信息
|
||||
let getInfoByCard = (params = {}) =>
|
||||
vm.$u.get("app/User/GetCardByPreConfiguredUser", params);
|
||||
// 更新身份信息
|
||||
let updateCard = (params = {}) => vm.$u.post("api/Token/UpdateCard", params);
|
||||
// 获取人脸验证token
|
||||
let getAPIToken = (params = {}) => vm.$u.post('app/My/GetVerifyToken', params)
|
||||
// 查询人脸核验结果
|
||||
let getVerifyInfo = (params = {}) => vm.$u.post('app/My/GetDetailInfo?VerifyToken=' + params)
|
||||
// 根据身份证获取信息
|
||||
let getInfoByCard = (params = {}) => vm.$u.get('app/User/GetCardByPreConfiguredUser', 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 DeleteWish = (params = {}) => vm.$u.post("app/My/DeleteWish", params);
|
||||
//【管理端】获取当前是否开启匿名 开启true 关闭false
|
||||
let CheckNM = (params = {}) => vm.$u.get("/app/My/CheckNM", params);
|
||||
//【手机端】获取个人心愿列表
|
||||
let GetWishListAsync_mobile = (params = {}) => vm.$u.get("app/My/GetWishListAsync_mobile", params)
|
||||
//【手机端】删除心愿 删除=失效
|
||||
let DeleteWish = (params = {}) => vm.$u.post("app/My/DeleteWish", params)
|
||||
//【管理端】获取当前是否开启匿名 开启true 关闭false
|
||||
let CheckNM = (params = {}) => vm.$u.get("/app/My/CheckNM", params)
|
||||
|
||||
/** 首页ai对话 */
|
||||
// 发送消息
|
||||
let SendMessageApi = (params = {}) =>
|
||||
vm.$u.post("api/ChatAI/CreateChat", params, { showLoading: false });
|
||||
// 获取历史对话列表
|
||||
let GetConversationPage = (params = {}) =>
|
||||
vm.$u.get("api/ChatAI/GetConversationPage", params);
|
||||
// 获取对话详情
|
||||
let GetConversationDetail = (params = {}) =>
|
||||
vm.$u.get("api/ChatAI/GetHistoricalConversations", params);
|
||||
/** 首页ai对话 */
|
||||
// 发送消息
|
||||
let SendMessageApi = (params = {}) => vm.$u.post('api/ChatAI/CreateChat', params, {showLoading: false});
|
||||
// 获取历史对话列表
|
||||
let GetConversationPage = (params = {}) => vm.$u.get('api/ChatAI/GetConversationPage', params);
|
||||
// 获取对话详情
|
||||
let GetConversationDetail = (params = {}) => vm.$u.get('api/ChatAI/GetHistoricalConversations', params);
|
||||
|
||||
/** 登录 */
|
||||
// 获取图形验证码
|
||||
let GetCaptcha = (params = {}) => vm.$u.get("api/Login/GetCaptcha", params);
|
||||
// 发送验证码-学生
|
||||
let GetStuVerifyCode = (params = {}) =>
|
||||
vm.$u.post("api/Login/GetSMSCodeAccountRegister", params);
|
||||
// 登录-学生
|
||||
let StuLogin = (params = {}) =>
|
||||
vm.$u.post("api/Login/PhoneLoginExpertUser", params);
|
||||
/** 登录 */
|
||||
// 获取图形验证码
|
||||
let GetCaptcha = (params = {}) => vm.$u.get('api/Login/GetCaptcha', params);
|
||||
// 发送验证码
|
||||
let GetStuVerifyCode = (params = {}) => vm.$u.post('api/Login/GetSMSCodeAccountRegister', 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 = {
|
||||
getTeacherInfo,
|
||||
getData,
|
||||
updateTeacherInfo,
|
||||
|
||||
// 将各个定义的接口名称,统一放进对象挂载到vm.$u.api(因为vm就是this,也即this.$u.api)下
|
||||
vm.$u.api = {
|
||||
getTeacherInfo,
|
||||
getData,
|
||||
updateTeacherInfo,
|
||||
LoginApp,
|
||||
RegisterUser,
|
||||
saveUserInfo,
|
||||
upPosition,
|
||||
getPosition,
|
||||
GetAllSchool,
|
||||
HomeMap,
|
||||
ChangePassword,
|
||||
myChangePassword,
|
||||
SearchInfo,
|
||||
getSearch,
|
||||
getUserInfo,
|
||||
GetHelpList,
|
||||
GetSchoolList,
|
||||
getUser,
|
||||
getcharList,
|
||||
getFollowList,
|
||||
getSysList,
|
||||
getAdminList,
|
||||
getinteractionList,
|
||||
getAlumnSearch,
|
||||
getChatRecord,
|
||||
AlumnSearchList,
|
||||
GetInfoMation,
|
||||
toBind,
|
||||
colseBind,
|
||||
MyAlumnRange,
|
||||
DelateComment,
|
||||
userVerify,
|
||||
GetWishListAsync_mobile,
|
||||
DeleteWish,
|
||||
CheckNM,
|
||||
PushWishDan,
|
||||
getAPIToken,
|
||||
getVerifyInfo,
|
||||
getInfoByCard,
|
||||
updateCard,
|
||||
SendMessageApi,
|
||||
GetCaptcha,
|
||||
GetStuVerifyCode,
|
||||
StuLogin,
|
||||
GetConversationPage,
|
||||
GetConversationDetail,
|
||||
GetTeacherVerifyCode,
|
||||
TeacherLogin,
|
||||
TeacherLoginByCode,
|
||||
};
|
||||
};
|
||||
|
||||
LoginApp,
|
||||
RegisterUser,
|
||||
saveUserInfo,
|
||||
upPosition,
|
||||
getPosition,
|
||||
GetAllSchool,
|
||||
HomeMap,
|
||||
ChangePassword,
|
||||
myChangePassword,
|
||||
SearchInfo,
|
||||
getSearch,
|
||||
getUserInfo,
|
||||
GetHelpList,
|
||||
GetSchoolList,
|
||||
getUser,
|
||||
getcharList,
|
||||
getFollowList,
|
||||
getSysList,
|
||||
getAdminList,
|
||||
getinteractionList,
|
||||
getAlumnSearch,
|
||||
getChatRecord,
|
||||
AlumnSearchList,
|
||||
GetInfoMation,
|
||||
toBind,
|
||||
colseBind,
|
||||
MyAlumnRange,
|
||||
DelateComment,
|
||||
userVerify,
|
||||
GetWishListAsync_mobile,
|
||||
DeleteWish,
|
||||
CheckNM,
|
||||
PushWishDan,
|
||||
getAPIToken,
|
||||
getVerifyInfo,
|
||||
getInfoByCard,
|
||||
updateCard,
|
||||
SendMessageApi,
|
||||
GetCaptcha,
|
||||
GetStuVerifyCode,
|
||||
StuLogin,
|
||||
GetConversationPage,
|
||||
GetConversationDetail
|
||||
};
|
||||
}
|
||||
|
||||
export default {
|
||||
install,
|
||||
};
|
||||
install
|
||||
}
|
||||
|
|
|
@ -1,173 +0,0 @@
|
|||
<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>
|
|
@ -1,477 +0,0 @@
|
|||
<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>
|
|
@ -1,87 +0,0 @@
|
|||
<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>
|
|
@ -1,113 +0,0 @@
|
|||
<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,13 +20,6 @@
|
|||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/home/messageBoard/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "留言板",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/notes/index",
|
||||
"style": {
|
||||
|
|
|
@ -1,10 +1,16 @@
|
|||
<template>
|
||||
<view class="home-container">
|
||||
<header-bar
|
||||
title="源小新"
|
||||
leftIcon="list"
|
||||
@leftClick="handleLeftClick"
|
||||
></header-bar>
|
||||
<view class="header">
|
||||
<div class="header-left">
|
||||
<u-icon
|
||||
class="header-left-icon"
|
||||
name="list"
|
||||
@click="handleLeftClick"
|
||||
></u-icon>
|
||||
</div>
|
||||
<text class="header-title">源小新</text>
|
||||
<div class="header-right"></div>
|
||||
</view>
|
||||
|
||||
<!-- 首页 -->
|
||||
<view class="main-content" v-if="!isChat">
|
||||
|
@ -111,7 +117,7 @@
|
|||
<view class="loading-more" v-if="isLoading">
|
||||
<u-loading mode="circle" color="#4370fe"></u-loading>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 到顶部提示 -->
|
||||
<view class="no-more-data" v-if="noMoreData">
|
||||
<text>已经到顶了</text>
|
||||
|
@ -258,7 +264,6 @@ import CustomTabBar from "@/components/custom-tab-bar/custom-tab-bar.vue";
|
|||
import AdvicePhone from "@/components/AdvicePhone.vue";
|
||||
import PerfectInfo from "@/components/PerfectInfo.vue";
|
||||
import ChatHistory from "@/components/ChatHistory.vue"; // 导入新组件
|
||||
import HeaderBar from "@/components/HeaderBar.vue"; // 导入头部组件
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
@ -266,8 +271,7 @@ export default {
|
|||
AdvicePhone,
|
||||
MarkdownViewer,
|
||||
PerfectInfo,
|
||||
ChatHistory,
|
||||
HeaderBar, // 注册头部组件
|
||||
ChatHistory, // 注册新组件
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
@ -279,7 +283,7 @@ export default {
|
|||
isLoadingMore: false, // 是否正在加载更多的标志位
|
||||
noMoreData: false, // 是否已加载全部历史消息
|
||||
isSwitchingConversation: false, // 是否正在切换对话的标志位
|
||||
|
||||
|
||||
pageQuery: {
|
||||
PageIndex: 1,
|
||||
PageSize: 20,
|
||||
|
@ -296,12 +300,10 @@ export default {
|
|||
{
|
||||
title: "招办在线",
|
||||
icon: "/static/common/images/icon_admissions.png",
|
||||
path: "/pages/home/admissions/index",
|
||||
},
|
||||
{
|
||||
title: "留言板",
|
||||
icon: "/static/common/images/icon_messageBoard.png",
|
||||
path: "/pages/home/messageBoard/index",
|
||||
},
|
||||
{
|
||||
title: "电话咨询",
|
||||
|
@ -462,11 +464,6 @@ export default {
|
|||
if (item.title === "电话咨询") {
|
||||
this.advicePhoneShow = true;
|
||||
return;
|
||||
} else if (item.path) {
|
||||
uni.navigateTo({
|
||||
url: item.path,
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
this.$refs.uToast.show({
|
||||
title: "暂未开放",
|
||||
|
@ -505,7 +502,7 @@ export default {
|
|||
// 添加到消息列表
|
||||
this.messageGroups.push(userMessage);
|
||||
this.messageValue = "";
|
||||
|
||||
|
||||
// 立即添加一个AI回复的加载状态消息
|
||||
const loadingMessage = {
|
||||
id: "loading_" + Math.random().toString(36).substring(2, 15),
|
||||
|
@ -519,7 +516,7 @@ export default {
|
|||
displayTime: "",
|
||||
isLoading: true, // 标记为加载状态
|
||||
};
|
||||
|
||||
|
||||
// 添加加载状态消息到列表
|
||||
this.messageGroups.push(loadingMessage);
|
||||
|
||||
|
@ -559,12 +556,12 @@ export default {
|
|||
})
|
||||
.catch((error) => {
|
||||
console.error("API请求失败:", error);
|
||||
|
||||
|
||||
// 从消息列表中移除加载状态消息
|
||||
this.messageGroups = this.messageGroups.filter(
|
||||
(msg) => !msg.isLoading
|
||||
);
|
||||
|
||||
|
||||
// 添加错误消息
|
||||
const errorMessage = {
|
||||
id: "error_" + Math.random().toString(36).substring(2, 15),
|
||||
|
@ -577,7 +574,7 @@ export default {
|
|||
timeLabel: 0,
|
||||
displayTime: "",
|
||||
};
|
||||
|
||||
|
||||
this.messageGroups.push(errorMessage);
|
||||
});
|
||||
},
|
||||
|
@ -645,18 +642,18 @@ export default {
|
|||
// 关闭弹窗
|
||||
this.popupShow = false;
|
||||
this.isChat = true;
|
||||
|
||||
|
||||
// 设置切换对话标志位,防止触发上拉刷新
|
||||
this.isSwitchingConversation = true;
|
||||
|
||||
|
||||
this.currentConversationId = "";
|
||||
this.messageGroups = [];
|
||||
|
||||
|
||||
// 重置分页和加载状态
|
||||
this.pageQuery.PageIndex = 1;
|
||||
this.isLoadingMore = false;
|
||||
this.noMoreData = false;
|
||||
|
||||
|
||||
// 延迟重置切换对话标志位
|
||||
setTimeout(() => {
|
||||
this.isSwitchingConversation = false;
|
||||
|
@ -666,18 +663,18 @@ export default {
|
|||
// 开始新对话
|
||||
handleStartChat() {
|
||||
this.isChat = true;
|
||||
|
||||
|
||||
// 设置切换对话标志位,防止触发上拉刷新
|
||||
this.isSwitchingConversation = true;
|
||||
|
||||
|
||||
this.currentConversationId = "";
|
||||
this.messageGroups = [];
|
||||
|
||||
|
||||
// 重置分页和加载状态
|
||||
this.pageQuery.PageIndex = 1;
|
||||
this.isLoadingMore = false;
|
||||
this.noMoreData = false;
|
||||
|
||||
|
||||
// 延迟重置切换对话标志位
|
||||
setTimeout(() => {
|
||||
this.isSwitchingConversation = false;
|
||||
|
@ -692,7 +689,7 @@ export default {
|
|||
// 滚动到顶部事件处理
|
||||
onScrollToUpper() {
|
||||
console.log("触发上拉刷新");
|
||||
|
||||
|
||||
// 如果已经没有更多数据或正在切换对话,不再触发上拉刷新
|
||||
if (this.noMoreData || this.isSwitchingConversation) {
|
||||
return;
|
||||
|
@ -767,7 +764,34 @@ export default {
|
|||
background-position: 0 88rpx;
|
||||
background-attachment: fixed;
|
||||
|
||||
/* Header样式移至HeaderBar组件 */
|
||||
.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;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
width: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 30rpx;
|
||||
|
@ -982,7 +1006,7 @@ export default {
|
|||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
|
||||
.no-more-data {
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
|
@ -1030,7 +1054,7 @@ export default {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
|
||||
.dot {
|
||||
display: inline-block;
|
||||
width: 12rpx;
|
||||
|
@ -1040,20 +1064,20 @@ export default {
|
|||
margin: 0 6rpx;
|
||||
opacity: 0.6;
|
||||
animation: dot-flashing 1.5s infinite linear alternate;
|
||||
|
||||
|
||||
&:nth-child(1) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes dot-flashing {
|
||||
0% {
|
||||
opacity: 0.6;
|
||||
|
|
|
@ -1,141 +0,0 @@
|
|||
<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,9 +1,16 @@
|
|||
<template>
|
||||
<view class="teacherInfo-container">
|
||||
<header-bar
|
||||
title="老师详情"
|
||||
@leftClick="handleLeftClick"
|
||||
></header-bar>
|
||||
<view class="header">
|
||||
<div class="header-left">
|
||||
<u-icon
|
||||
class="header-left-icon"
|
||||
name="arrow-left"
|
||||
@click="handleLeftClick"
|
||||
></u-icon>
|
||||
</div>
|
||||
<text class="header-title">老师详情</text>
|
||||
<div></div>
|
||||
</view>
|
||||
|
||||
<div class="teacher-info-card">
|
||||
<div class="card-content">
|
||||
|
@ -51,21 +58,36 @@
|
|||
<view class="teacher-answers">
|
||||
<view class="answer-title">老师回答</view>
|
||||
|
||||
<!-- 问答列表组件 -->
|
||||
<answer-list :answerList="answerList"></answer-list>
|
||||
<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">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeaderBar from "@/components/HeaderBar.vue";
|
||||
import AnswerList from "@/components/AnswerList/index.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
HeaderBar,
|
||||
AnswerList,
|
||||
},
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
teacherId: "",
|
||||
|
@ -117,7 +139,7 @@ export default {
|
|||
|
||||
// 在页面加载后检查文本是否超过三行
|
||||
this.$nextTick(() => {
|
||||
// this.checkTextOverflow();
|
||||
this.checkTextOverflow();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
|
@ -153,7 +175,29 @@ export default {
|
|||
background-size: 100% 100%;
|
||||
background-position: 50%;
|
||||
|
||||
/* Header样式移至HeaderBar组件 */
|
||||
.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 {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.teacher-info-card {
|
||||
// margin: 30rpx;
|
||||
|
@ -261,6 +305,143 @@ export default {
|
|||
color: #333333;
|
||||
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端样式 */
|
||||
|
|
|
@ -151,7 +151,6 @@
|
|||
<script>
|
||||
import { generateSign } from "@/utils/signUtil.js";
|
||||
import { getUserInfoFromJWT } from "@/utils/jwt-util";
|
||||
import md5 from "js-md5";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
@ -167,7 +166,7 @@ export default {
|
|||
captchaId: "", // 图形验证码ID
|
||||
},
|
||||
captchaUrl: "", // 图形验证码URL,实际使用时需替换
|
||||
loginType: "psd", // 教师默认密码登录
|
||||
loginType: "code", // 默认验证码登录,与图片一致
|
||||
codeText: "获取验证码",
|
||||
countdown: 60,
|
||||
timer: null,
|
||||
|
@ -179,11 +178,6 @@ export default {
|
|||
},
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
// console.log("onLoad", e.type); // 0:学生 1:教师
|
||||
this.isTeacher = e.type == 1;
|
||||
this.loginType = e.type == 1 ? "psd" : "code";
|
||||
},
|
||||
mounted() {
|
||||
this.refreshCaptcha();
|
||||
},
|
||||
|
@ -194,12 +188,8 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
switchLoginType(type) {
|
||||
this.clearErrors();
|
||||
this.clearLoginParams();
|
||||
this.loginType = type;
|
||||
if (this.loginType === "code") {
|
||||
this.refreshCaptcha();
|
||||
}
|
||||
this.clearErrors();
|
||||
},
|
||||
|
||||
// 刷新图形验证码
|
||||
|
@ -234,11 +224,7 @@ export default {
|
|||
|
||||
console.log("获取验证码...", params);
|
||||
|
||||
const apiMethod = this.isTeacher
|
||||
? "GetTeacherVerifyCode"
|
||||
: "GetStuVerifyCode";
|
||||
|
||||
this.$u.api[apiMethod](params).then((res) => {
|
||||
this.$u.api.GetStuVerifyCode(params).then((res) => {
|
||||
console.log("获取验证码...", res);
|
||||
if (res.succeed) {
|
||||
this.$refs.uToast.show({
|
||||
|
@ -344,16 +330,6 @@ export default {
|
|||
captcha: "",
|
||||
};
|
||||
},
|
||||
// 清除登录参数
|
||||
clearLoginParams() {
|
||||
this.loginParams = {
|
||||
phone: "",
|
||||
password: "",
|
||||
code: "",
|
||||
captcha: "", // 图形验证码
|
||||
captchaId: "", // 图形验证码ID
|
||||
};
|
||||
},
|
||||
|
||||
// 登录
|
||||
login() {
|
||||
|
@ -402,21 +378,25 @@ export default {
|
|||
});
|
||||
|
||||
if (this.isTeacher) {
|
||||
if (this.loginType === "psd") {
|
||||
this.teacherLogin(); // 密码登录
|
||||
} else {
|
||||
this.teacherLoginByCode(); // 验证码登录
|
||||
}
|
||||
this.teacherLogin();
|
||||
} else {
|
||||
this.stuLogin(); // 学生登录
|
||||
this.stuLogin();
|
||||
}
|
||||
},
|
||||
|
||||
// 通用登录处理函数
|
||||
handleLogin(apiMethod, params, userType = 0) {
|
||||
// console.log("登录参数:", params);
|
||||
// 学生登录
|
||||
stuLogin() {
|
||||
// 构建登录参数
|
||||
const params = {
|
||||
phone: this.loginParams.phone,
|
||||
// password: this.loginParams.password,
|
||||
password: "",
|
||||
code: this.loginParams.code,
|
||||
};
|
||||
|
||||
this.$u.api[apiMethod](params).then((res) => {
|
||||
console.log("登录参数:", params);
|
||||
|
||||
this.$u.api.StuLogin(params).then((res) => {
|
||||
console.log("登录结果:", res);
|
||||
if (!res.succeed) {
|
||||
this.$refs.uToast.show({
|
||||
|
@ -437,56 +417,20 @@ export default {
|
|||
// 保存登录后得到的用户数据
|
||||
this.$u.vuex("vuex_token", token);
|
||||
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({
|
||||
url: url,
|
||||
url: "/pages/home/index/index",
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 学生登录
|
||||
stuLogin() {
|
||||
// 构建登录参数
|
||||
const params = {
|
||||
phone: this.loginParams.phone,
|
||||
password: "",
|
||||
code: this.loginParams.code,
|
||||
};
|
||||
|
||||
// 使用通用登录处理函数,传入学生特定的参数
|
||||
this.handleLogin("StuLogin", params, 0);
|
||||
},
|
||||
|
||||
// 教师密码登录
|
||||
// 教师登录
|
||||
teacherLogin() {
|
||||
// 构建登录参数
|
||||
const params = {
|
||||
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);
|
||||
return;
|
||||
this.$u.api.TeacherLogin(this.loginParams).then((res) => {
|
||||
console.log(res);
|
||||
});
|
||||
},
|
||||
|
||||
// 手机号输入过滤
|
||||
|
@ -610,18 +554,7 @@ export default {
|
|||
|
||||
.form-content {
|
||||
.form-item {
|
||||
margin-bottom: 20rpx;
|
||||
position: relative;
|
||||
padding-bottom: 40rpx; /* 为错误提示预留空间 */
|
||||
|
||||
.error-tip {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
font-size: 24rpx;
|
||||
color: #ff6481;
|
||||
height: 40rpx; /* 固定高度 */
|
||||
line-height: 40rpx;
|
||||
}
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
.form-label {
|
||||
display: flex;
|
||||
|
@ -695,6 +628,14 @@ 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.
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
Before Width: | Height: | Size: 2.0 KiB |
|
@ -14,7 +14,7 @@ try {
|
|||
|
||||
// 需要永久存储,且下次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_userType'];
|
||||
let saveStateKeys = ['vuex_user', 'vuex_token'];
|
||||
|
||||
// 保存变量到本地存储中
|
||||
const saveLifeData = function (key, value) {
|
||||
|
@ -34,7 +34,6 @@ const store = new Vuex.Store({
|
|||
vuex_teacherInfo: lifeData.vuex_teacherInfo ? lifeData.vuex_teacherInfo : '',
|
||||
// 如果上面从本地获取的lifeData对象下有对应的属性,就赋值给state中对应的变量
|
||||
// 加上vuex_前缀,是防止变量名冲突,也让人一目了然
|
||||
vuex_userType: lifeData.vuex_userType ? lifeData.vuex_userType : 0, // 0:学生 1:教师
|
||||
vuex_user: lifeData.vuex_user ? lifeData.vuex_user : '',
|
||||
vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '',
|
||||
vuex_glyType: lifeData.vuex_glyType ? lifeData.vuex_glyType : '',
|
||||
|
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"vueCompilerOptions": {
|
||||
"globalTypesPath": "./types/global.d.ts"
|
||||
}
|
||||
}
|
|
@ -1,128 +0,0 @@
|
|||
// @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;
|
||||
}
|
|
@ -1,8 +0,0 @@
|
|||
## 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
|
|
@ -1 +0,0 @@
|
|||
@import './styles/index.scss';
|
|
@ -1,82 +0,0 @@
|
|||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,4 +0,0 @@
|
|||
`uni-sass` 是 `uni-ui`提供的一套全局样式 ,通过一些简单的类名和`sass`变量,实现简单的页面布局操作,比如颜色、边距、圆角等。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
|
||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
|
@ -1,7 +0,0 @@
|
|||
@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';
|
|
@ -1,3 +0,0 @@
|
|||
.uni-border {
|
||||
border: 1px $uni-border-1 solid;
|
||||
}
|
|
@ -1,66 +0,0 @@
|
|||
|
||||
// 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;
|
||||
}
|
|
@ -1,55 +0,0 @@
|
|||
@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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,56 +0,0 @@
|
|||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,167 +0,0 @@
|
|||
/* #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 */
|
|
@ -1,24 +0,0 @@
|
|||
@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 */
|
||||
}
|
|
@ -1,146 +0,0 @@
|
|||
// @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;
|
|
@ -1,19 +0,0 @@
|
|||
// 合并 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;
|
||||
};
|
|
@ -1,31 +0,0 @@
|
|||
// 间距基础倍数
|
||||
$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);
|
|
@ -1,62 +0,0 @@
|
|||
@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);
|
|
@ -1,58 +0,0 @@
|
|||
## 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
|
|
@ -1,302 +0,0 @@
|
|||
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
|
|
@ -1,12 +0,0 @@
|
|||
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;
|
||||
}
|
|
@ -1,195 +0,0 @@
|
|||
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();
|
||||
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,260 +0,0 @@
|
|||
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
|
|
@ -1,84 +0,0 @@
|
|||
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
|
|
@ -1,277 +0,0 @@
|
|||
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);
|
||||
}
|
||||
}
|
|
@ -1,348 +0,0 @@
|
|||
<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>
|
|
@ -1,349 +0,0 @@
|
|||
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
|
||||
}
|
|
@ -1,60 +0,0 @@
|
|||
<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>
|
|
@ -1,112 +0,0 @@
|
|||
{
|
||||
"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": "-"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,11 +0,0 @@
|
|||
|
||||
|
||||
## 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