Skip to content

C
CFFP-HB
Commit a4e61618 by sunchao
Options

合并冲突

parents 6492f6e1 3ef1480d
Showing with 1289 additions and 34 deletions
App.vue
......@@ -36,6 +36,7 @@
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
.container{
background-color: #FBFBFB;
......
api/api.ts
......@@ -60,5 +60,25 @@ export default {
//消息详情&单个阅读
querySystemMessageDetail(params){
return request(`${apiURL}/systemMessage/querySystemMessageDetail`, "POST", params)
},
// 学习认证列表
querySignupList(params){
return request(`${cffpURL}/signup/querySignupList`, "POST", params)
},
// 个人认证列表
userCertificateList(params){
return request(`${cffpURL}/signup/userCertificateList`, "POST", params)
},
// 认证详情
queryCertificateInfo(params){
return request(`${cffpURL}/certificate/queryCertificateInfo`, "POST", params)
},
// 课程详情
courseDetail(params){
return request(`${cffpURL}/course/detail`, "POST", params)
},
// 相关课程黎贝澳查询
relatedCoursesList(params){
return request(`${cffpURL}/course/relatedCoursesList`, "POST", params)
}
}
components/courselist/courselist.vue
......@@ -2,7 +2,7 @@
<view>
<h4 v-if="cffpCourseInfos.length<=0" class="noLists">暂无课程列表</h4>
<ul v-if="cffpCourseInfos.length>0">
<li v-for="item in cffpCourseInfos" :key="item.fileId">
<li v-for="item in cffpCourseInfos" :key="item.fileId" @click="goDetail(item)">
<view class="thumbnailBox">
<img src="" alt="">
</view>
......@@ -37,13 +37,19 @@
components:{
},
onLoad(){
this.courseList()
},
methods:{
goDetail(item){
uni.navigateTo({
url: `/pages/courseDetail/courseDetail?fileId=${item.fileId}`
});
},
courseList(){
api.courseList().then(res=>{
console.log(res)
if(res['success']){
this.cffpCourseInfos = res['data']['cffpCourseInfos'];
this.cffpCourseInfos = res['data']['data'];
}else{
uni.showToast({
title: res['message'],
......
manifest.json
......@@ -17,7 +17,9 @@
"delay" : 0
},
/* 模块配置 */
"modules" : {},
"modules" : {
"Share" : {}
},
/* 应用发布信息 */
"distribute" : {
/* android打包配置 */
......@@ -43,7 +45,9 @@
/* ios打包配置 */
"ios" : {},
/* SDK配置 */
"sdkConfigs" : {}
"sdkConfigs" : {
"share" : {}
}
}
},
/* 快应用特有相关 */
......@@ -77,24 +81,24 @@
"enable" : false
},
"vueVersion" : "3",
"h5" : {
"router" : {
"base" : "/cffp/",
"mode" : "history"
},
"devServer" : {
"proxy" : {
"/api" : {
"port" : 3000, // 端口号
"target" : "https://mdev.zuihuibi.cn", //请求的目标域名
"changeOrigin" : true, //是否跨域
"secure" : false, //设置支持https协议的代理
"logLevel" : "debug",
"pathRewrite" : {
"^/api" : ""
}
}
}
}
}
"h5" : {
"router" : {
"base" : "/cffp/",
"mode" : "history"
},
"devServer" : {
"proxy" : {
"/api" : {
"port" : 3000, // 端口号
"target" : "https://mdev.zuihuibi.cn", //请求的目标域名
"changeOrigin" : true, //是否跨域
"secure" : false, //设置支持https协议的代理
"logLevel" : "debug",
"pathRewrite" : {
"^/api" : ""
}
}
}
}
}
}
pages.json
......@@ -74,8 +74,45 @@
"enablePullDownRefresh": false
}
}
<<<<<<< HEAD
],
=======
,{
"path" : "pages/inviteJoin/inviteJoin",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},{
"path" : "pages/invitationRegister/invitationRegister",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},{
"path" : "pages/myCertify/myCertify",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},{
"path" : "pages/certifyDetail/certifyDetail",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
>>>>>>> 3ef1480d0dbd758ecf9ffea4c0641ecf16c57490
"tabBar": {
"color": "#7A7E83", // tab 上的文字默认颜色
"selectedColor": "#7A7E83", // tab 上的文字选中时的颜色
......
pages/certifyDetail/certifyDetail.vue 0 → 100644
<template>
<view class="container">
<view class="certifyIntro">
{{certificateInfo.cerIntroduce}}
</view>
<view class="certifySignInfo">
<ul>
<li><text>报名时间：</text><text>{{certificateInfo.startDate}} - {{certificateInfo.endDate}}</text></li>
<li><text>考试费用：</text><text>{{certificateInfo.examinationPrice}}</text></li>
<li><text>培训费用：</text><text>{{certificateInfo.trainPrice}}</text></li>
<li><text>培训课程：</text><text>{{certificateInfo.courseName}}</text></li>
<li><text>培训方式：</text><text>{{certificateInfo.trainType == 1 ? '线上培训' : '/'}}</text></li>
<li><text>考试方式：</text><text>{{certificateInfo.examinationType == 1 ? '线上考试' : '/'}}</text></li>
<li><text>及格分数：</text><text>{{certificateInfo.passScore}}</text></li>
</ul>
<view class="eqrocdeContent">
<img :src="certificateInfo.wechatCodeUrl" alt="" srcset="">
<text>请扫二维码进群学习~</text>
</view>
</view>
<!-- 荣誉证书 -->
<view class="certifyImgBox">
<h3>荣誉证书</h3>
<img :src="certificateInfo.cerUrl" alt="" srcset="">
</view>
<!-- 考试计划 -->
<view class="examPlanning">
<h3>考试计划</h3>
<view class="content">
<h4>Ⅰ.考核类型</h4>
<view>理论考试：客观+主观题</view>
<h4>Ⅱ.考试内容</h4>
<view>考核内容包括：保险，财会，基金，信托</view>
<h4>Ⅲ.得分说明</h4>
<view>总分：客观题得分+主观题得分</view>
</view>
</view>
<!-- 考试认证流程 -->
<view class="examProcessContainer">
<h3>考试认证流程</h3>
<ul>
<li>
<view>
<img src="../../static/certifyProcess/onlineSign.png" alt="" srcset="">
</view>
<view>
<h4>线上报名</h4>
<view>点击右下方“立即报名”，提交信息，选择时间 并缴费后即可完成报名。</view>
</view>
</li>
<li>
<view>
<img src="../../static/certifyProcess/onlineExam.png" alt="" srcset="">
</view>
<view>
<h4>线上考试</h4>
<view>考试必须在电脑端进行，通过浏览器访问考试链 接进行考试。电脑须配置摄像头设备用于考前人 脸和身份验证、考中监考等。考试前请确认设备 网络、摄像头可正常运行！</view>
</view>
</li>
<li>
<view>
<img src="../../static/certifyProcess/getCertify.png" alt="" srcset="">
</view>
<view>
<h4>获得证书</h4>
<view>考试分及格后，即可获得证书</view>
</view>
</li>
<li>
<view>
<img src="../../static/certifyProcess/feedback.png" alt="" srcset="">
</view>
<view>
<h4>填写反馈</h4>
<view>培训完成后，请填写培训反馈，考试质量进行评估。</view>
</view>
</li>
</ul>
<!-- 报名按钮区域 -->
<view class="signBtnContent">
<view class="consultBtn">咨询客服</view>
<view class="signBtn">立即报名</view>
</view>
</view>
</view>
</template>
<script>
import api from "@/api/api";
export default {
data() {
return {
certificateInfo:{}
};
},
methods:{
queryCertificateInfo(certificateId=null,userSignupId=null){
const params = {
certificateId:certificateId,
userSignupId:userSignupId
}
api.queryCertificateInfo(params).then(res=>{
console.log(res)
if(res['success']){
this.certificateInfo = res['data'];
}
})
}
}
}
</script>
<style lang="scss">
.container{
.certifyIntro{
padding: 20rpx 30rpx;
text-indent: 60rpx;
line-height: 1.5;
border-bottom: 1px solid #e4e4e4;
background-color: #fff;
}
.certifySignInfo{
padding: 20rpx 30rpx;
line-height: 2;
background-color: #fff;
margin-bottom: 10rpx;
}
.certifyImgBox,.examPlanning,.examProcessContainer{
padding: 20rpx 30rpx;
margin-bottom: 10rpx;
background-color: #fff;
}
.examPlanning{
h3{
font-size: 32rpx;
margin-bottom: 30rpx;
}
.content{
h4{
margin-bottom: 10rpx;
color: #333;
margin-left: 24rpx;
}
view{
margin-bottom: 20rpx;
margin-left: 65rpx;
color: #666;
}
}
}
.certifyImgBox{
h3{
font-size: 32rpx;
margin-bottom: 30rpx;
}
}
.examProcessContainer{
h3{
font-size: 32rpx;
margin-bottom: 30rpx;
}
li{
margin-bottom: 20rpx;
display: flex;
view{
img{
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
h4{
color: #333;
margin-bottom: 10rpx;
}
view{
color: #666;
}
}
}
}
.signBtnContent{
margin-top: 30rpx;
display: flex;
justify-content: space-around;
width: 100%;
.consultBtn{
display:flex;
justify-content: center;
align-items: center;
background-color: #EAEFFF;
color: #3671F4;
border-radius: 80rpx;
width: 40%;
height: 90rpx;
}
.signBtn{
display:flex;
justify-content: center;
align-items: center;
background-color: #3671F4;
color: #fff;
border-radius: 80rpx;
width: 40%;
height: 90rpx;
}
}
}
</style>
pages/courseDetail/courseDetail.vue
......@@ -5,15 +5,15 @@
<!-- 课程详情图 -->
<view class="courseTitleContent">
<view class="courseTitle">
<h4>CFFP初级认证（报名+培训）</h4>
<h4>{{courseInfo.fileTitle}}</h4>
<view class="shareF">
<view></view>
<!-- <view>送好友</view> -->
</view>
</view>
<view class="dataBox">
<strong>￥6888.00</strong>
<text>5656人购买</text>
<strong>￥{{courseInfo.coursePrice}}</strong>
<text>{{courseInfo.salesNumber}}人购买</text>
</view>
</view>
<!-- 课程介绍，相关课程，讲师 -->
......@@ -26,6 +26,10 @@
</view>
<!-- tabContent区域 -->
<view class="tabContent">
<!-- 课程介绍 -->
<view class="courseIntroContent" v-if="tabType===1">
<view v-html="courseInfo?.fileIntroduce"></view>
</view>
<!-- 讲师介绍 -->
<view class="lecturerContent" v-if="tabType===3">
<view class="lecturerIntro">
......@@ -58,9 +62,11 @@
export default {
data() {
return {
lecturerId:9,
fileId:null,
lecturerId:null,
tabType:3,
lecturerInfo:{}
lecturerInfo:{},
courseInfo:{}
};
},
methods:{
......@@ -70,7 +76,7 @@
if (type === 3) {
this.lecturerQuery();
} else if (type == 2) {
// this.filePathQuery(null, null,this.fileUploadItem.mdDropOptionCode)
this.relatedCoursesList()
} else {
// this.filePathQuery(this.status, this.fileId)
}
......@@ -78,6 +84,7 @@
// 讲师信息查询
lecturerQuery(){
api.lecturerQuery({id:this.lecturerId}).then(res=>{
console.log('讲师信息',res);
if(res['success']){
this.lecturerInfo = res['data']['lecturerInfos'][0];
}else{
......@@ -88,10 +95,34 @@
})
}
})
},
// 课程详情页面
courseDetail(){
api.courseDetail({fileId:this.fileId}).then(res=>{
console.log('课程详情',res);
if(res['success']){
this.courseInfo = res['data']['data'];
this.lecturerId = res['data']['data']['fileLecturerId'];
this.lecturerQuery();
}
})
},
// 相关课程查询
relatedCoursesList(){
api.relatedCoursesList({fileId:3937}).then(res=>{
console.log('相关课程详情',res);
if(res['success']){
this.relatedCoursesLists = res['data']['data'];
}
})
}
},
mounted(){
this.switchTab(this.tabType)
},
onLoad(option){
this.fileId = option.fileId;
this.courseDetail();
}
}
</script>
......
pages/invitationRegister/invitationRegister.vue 0 → 100644
<template>
<view class="container">
<view class="logo">
<img src="../../static/cffp_logo.jpg" alt="">
<text>欢迎使用CFFP</text>
</view>
<view class="inviteInfo">
<text>XXX邀请您</text>
<text>申请为XXXX区域推广人</text>
</view>
<view class="register">
<text>点击注册</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style lang="scss">
.container{
height: 100%;
background: url('../../static/app-plus/registerBg.png') 100% 100%;
background-size: contain;
color: #fff;
.logo{
padding-top: 100rpx;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 30rpx;
overflow: hidden;
font-size: 40rpx;
img{
margin-bottom: 20rpx;
width: 160rpx;
height: 160rpx;
border-radius: 30rpx;
overflow: hidden;
}
}
.inviteInfo{
position: absolute;
bottom: 60%;
left: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 40rpx;
display: flex;
flex-direction: column;
}
}
.register{
position: absolute;
bottom: 20%;
left: 0;
right: 0;
margin: 0 auto;
width: 60%;
height: 100rpx;
border-radius: 80rpx;
background-color: #20269B;
color: #fff;
font-size: 36rpx;
display: flex;
justify-content: center;
align-items: center;
}
</style>
\ No newline at end of file
pages/inviteJoin/inviteJoin.vue 0 → 100644
<template>
<view class="container">
<!-- tab选项 -->
<view class="tabTitle">
<text :class="{'actived': tabType===1}" @click="switchTab(1)">基本信息</text>
<text :class="{'actived': tabType===2}" @click="switchTab(2)">邀请信息</text>
</view>
<!-- tab内容 -->
<view class="tabContent">
<!-- 基本信息 -->
<view v-if="tabType===1">
<ul>
<li>
<text>姓名：</text>
<text><input class="uni-input" maxlength="15" placeholder="姓名" /></text>
</li>
<li>
<text>手机号：</text>
<text><input class="uni-input" type="number" maxlength="11" placeholder="手机号" /></text>
</li>
<li>
<text>申请身份：</text>
<text>
<picker @change="bindPickerChange" :value="applyIdentity" :range="identityArr">
<view class="uni-input">{{identityArr[applyIdentity]}}</view>
</picker>
</text>
</li>
<li>
<text>所属组织：</text>
<text>XXXXXX</text>
</li>
</ul>
<share></share>
<button type="primary" plain="true" class="sendInvite" @click="uniShare">发出邀请</button>
</view>
<!-- 邀请信息 -->
<view class="inviteListsBox" v-if="tabType===2">
<ul class="listUl">
<li>
<text>姓名：</text>
<text></text>
</li>
<li>
<text>手机号：</text>
<text></text>
</li>
<li>
<text>申请身份：</text>
<text></text>
</li>
<li>
<text>所属组织：</text>
<text></text>
</li>
<li>
<text>邀请状态：</text>
<text></text>
</li>
</ul>
</view>
</view>
</view>
</template>
<script>
import UniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js';
const uniShare = new UniShare();
export default {
data() {
return {
tabType:1,
identityArr:['工作室','事业伙伴'],
applyIdentity:0
};
},
methods:{
switchTab(type){
this.tabType = type;
},
bindPickerChange: function(e) {
this.applyIdentity = e.detail.value
},
uniShare() {
uniShare.show({
content: { //公共的分享参数配置 类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
type: 0,
href: 'https://uniapp.dcloud.io/',
title: '标题',
summary: '描述',
imageUrl: 'https://img-cdn-aliyun.dcloud.net.cn/stream/icon/__UNI__HelloUniApp.png'
},
menus: [{
"img": "/static/app-plus/sharemenu/wechatfriend.png",
"text": "微信好友",
"share": { //当前项的分享参数配置。可覆盖公共的配置如下：分享到微信小程序，配置了type=5
"provider": "weixin",
"scene": "WXSceneSession"
}
},
{
"img": "/static/app-plus/sharemenu/wechatmoments.png",
"text": "微信朋友圈",
"share": {
"provider": "weixin",
"scene": "WXSceneTimeline"
}
}
],
cancelText: "取消分享",
}, e => { //callback
console.log(uniShare.isShow);
console.log(e);
})
}
}
}
</script>
<style lang="scss">
.container{
position: relative;
height: 100%;
.tabTitle{
color: #666666;
background-color:#fff;
display: flex;
align-items: center;
justify-content: space-around;
padding: 30rpx 60rpx 0;
text{
&.actived{
color: #333;
border-bottom: 4rpx solid #20269B;
}
}
}
.tabContent{
margin-top: 10rpx;
ul{
width: 95%;
margin: 0 auto 20rpx;
padding: 0.3125rem 1.25rem;
color: #333;
border-radius: 0.3125rem;
background-color: #fff;
box-sizing: border-box;
position: relative;
li{
border-bottom: 1px solid #F0F0F0;
height: 76rpx;
display: flex;
justify-content: space-between;
align-items: center;
&:last-child{
border:none;
}
.uni-input{
text-align: right;
}
text{
&.success{
color: #78C06E;
}
&.fail{
color: #FF0000;
}
}
}
&.listUl::before{
display: block;
content: '';
position: absolute;
left: 10rpx;
top: 20rpx;
width: 8rpx;
height: 20rpx;
background-color: #FA882F;
border-radius: 8rpx;
}
}
.sendInvite{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 60%;
border-radius: 80rpx;
background-color: #20269B;
color: #fff;
font-size: 36rpx;
}
}
}
</style>
pages/myCertify/myCertify.vue 0 → 100644
<template>
<view class="container">
<!-- tab选项 -->
<view class="tabTitle">
<text :class="{'actived': tabType===1}" @click="switchTab(1)">报名项目</text>
<text :class="{'actived': tabType===2}" @click="switchTab(2)">获得认证</text>
</view>
<!-- tab内容 -->
<view class="tabContent">
<!-- 报名项目 -->
<view class="signItemsInfoBox" v-if="tabType===1">
<view class="signListsBox" v-if="signupInfos.length>0">
<view class="signItem" v-for="item in signupInfos" :key="item.cerNo">
<view class="seriesNo">{{item.cerNo}}</view>
<view class="certifyInfo">
<text>报名时间：{{item.signupDate}}</text>
<view>
<text>认证方向：{{item.cerName}}</text>
<i class="iconfont icon-youjiantou"></i>
</view>
</view>
</view>
</view>
<!-- 没有报名项目 -->
<view class="noSign" v-if="signupInfos.length==0">
<h4>暂没有报名项目！</h4>
</view>
</view>
<view class="getCertifyListsBox" v-if="tabType===2">
<view class="certifyListContent" v-if="userCertificates.length>0">
<view class="certifyInfoItem" v-for="item in userCertificates" :key="item.cerNo">
<h4>{{item.cerName}}</h4>
<view class="certifyImgBox">
<img :src="item.cerUrl" alt="" srcset="">
<view>认证编号：{{item.authenticationCode}}</view>
<view>有效期至：{{item.endDate}}</view>
</view>
</view>
</view>
<!-- 没有证书 -->
<view class="noSign" v-if="userCertificates.length==0">
<h4>暂没有取得证书！</h4>
</view>
</view>
</view>
</view>
</template>
<script>
import api from "../../api/api";
export default {
data() {
return {
tabType:1,
signupInfos:[],
userCertificates:[]
};
},
methods:{
switchTab(type){
this.tabType = type;
if(type===1){
this.querySignupList();
}else{
this.userCertificateList();
}
},
querySignupList(){
api.querySignupList({user_id:1}).then(res=>{
console.log(res);
if(res['success']){
this.signupInfos = res['data']['signupInfos']
}
})
},
userCertificateList(){
const param = {
queryType:1,
userId:1
}
api.userCertificateList(param).then(res=>{
console.log(res);
if(res['success']){
this.userCertificates = res['data']['userCertificates']
}
})
}
},
onLoad(){
this.querySignupList();
},
}
</script>
<style lang="scss">
.container{
position: relative;
height: 100%;
.tabTitle{
color: #666666;
background-color:#fff;
display: flex;
align-items: center;
justify-content: space-around;
padding: 30rpx 60rpx 0;
text{
&.actived{
color: #333;
border-bottom: 4rpx solid #20269B;
}
}
}
.tabContent{
.signListsBox{
width: 95%;
margin: 0 auto;
.signItem{
margin-top: 20rpx;
display: flex;
align-items: center;
background-color: #fff;
padding:20rpx 20rpx 20rpx 50rpx;
border-radius: 10rpx;
.seriesNo{
width: 0;
height: 56rpx;
flex: 0 0 56rpx;
border-radius: 50%;
background:linear-gradient(137deg, #E1B972 0%, #CDA464 100%);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
margin-right: 60rpx;
}
.certifyInfo{
width: 0;
flex: 1;
view{
display: flex;
justify-content: space-between;
align-items: baseline;
}
}
}
}
.noSign{
text-align: center;
margin-top: 10%;
}
.getCertifyListsBox{
.certifyInfoItem{
background-color: #fff;
margin-bottom: 10rpx;
padding: 20rpx 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
img{
max-width: 60%;
height: auto;
}
}
}
}
}
</style>
pages/personalCenter/personalCenter.vue
......@@ -59,7 +59,7 @@
mainMenuLists:[
{id:'00',categoryName:'销售管理',
children:[
{title:'销售课程',icon:'salesCourse',link:'',isOpen:true,isShow:true},
{title:'销售课程',icon:'salesCourse',link:'/components/courselist/courselist',isOpen:true,isShow:true},
{title:'销售保单',icon:'salesOrder',link:'',isOpen:true,isShow:true},
{title:'我的售后',icon:'afterSales',link:'',isOpen:false,isShow:true}
],
......@@ -73,7 +73,7 @@
{id:'02',categoryName:'活动管理',
children:[
{title:'我的学习',icon:'myLearning',link:'',isOpen:true,isShow:true},
{title:'学习认证',icon:'learningCertify',link:'',isOpen:true,isShow:true},
{title:'学习认证',icon:'learningCertify',link:'/pages/myCertify/myCertify',isOpen:true,isShow:true},
{title:'我的分享',icon:'share',link:'',isOpen:true,isShow:true}
],
},
......@@ -104,7 +104,9 @@
// 菜单跳转页面
goDetail(item){
if(item.isShow && item.isOpen){
uni.navigateTo({
url: item.link
});
}else{
common.errorDialog(2,'该模块正在开发中，敬请期待！','提示');
}
......
uni_modules/uni-share/changelog.md 0 → 100644
## 2.0.2（2021-12-16）
修复在某些情况下报：`Cannot read property 'hide' of undefined`的问题
## 2.0.1（2021-11-29）
修改错误的scene值WXSenceTimeline(分享到朋友圈)更正为WXSceneTimeline
## 2.0.0（2021-10-14）
支持监听返回操作(如：物理返回，全面屏手机侧滑)关闭分享弹窗
## 1.0.6（2021-08-25）
兼容vue3
## 1.0.5（2021-08-05）
优化代码实现，修改原来用`eval()`函数实现的逻辑
## 1.0.4（2021-06-07）
为符合苹果应用市场的审核，只显示存在对应的分享客户端的选项。如：配置包含微信分享，但是用户手机上并没有安装微信，就不显示微信分享。
## 1.0.2（2021-05-06）
修复错误的提示：“打包时未添加oauth模块”
## 1.0.1（2021-04-30）
新增完整示例
## 1.0.0（2021-04-28）
第1版发布
uni_modules/uni-share/js_sdk/uni-image-menu.js 0 → 100644
var nvMask, nvImageMenu;
class NvImageMenu {
constructor(arg) {
this.isShow = false
}
show({
list,
cancelText
}, callback) {
if (!list) {
list = [{
"img": "/static/sharemenu/wechatfriend.png",
"text": "图标文字"
}]
}
//以下为计算菜单的nview绘制布局，为固定算法，使用者无关关心
var screenWidth = plus.screen.resolutionWidth
//以360px宽度屏幕为例，上下左右边距及2排按钮边距留25像素，图标宽度55像素，同行图标间的间距在360宽的屏幕是30px，但需要动态计算，以此原则计算4列图标分别的left位置
//图标下的按钮文字距离图标5像素，文字大小12像素
//底部取消按钮高度固定为44px
//TODO 未处理横屏和pad，这些情况6个图标应该一排即可
var margin = 20,
iconWidth = 60,
icontextSpace = 5,
textHeight = 12
var left1 = margin / 360 * screenWidth
var iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距，再减去4个图标的宽度，就是3个同行图标的间距
if (iconSpace <= 5) { //屏幕过窄时，缩小边距和图标大小，再算一次
margin = 15
iconWidth = 40
left1 = margin / 360 * screenWidth
iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距，再减去4个图标的宽度，就是3个同行图标的间距
}
var left2 = left1 + iconWidth + iconSpace
var left3 = left1 + (iconWidth + iconSpace) * 2
var left4 = left1 + (iconWidth + iconSpace) * 3
var top1 = left1
var top2 = top1 + iconWidth + icontextSpace + textHeight + left1
const TOP = {
top1,
top2
},
LEFT = {
left1,
left2,
left3,
left4
};
nvMask = new plus.nativeObj.View("nvMask", { //先创建遮罩层
top: '0px',
left: '0px',
height: '100%',
width: '100%',
backgroundColor: 'rgba(0,0,0,0.2)'
});
nvImageMenu = new plus.nativeObj.View("nvImageMenu", { //创建底部图标菜单
bottom: '0px',
left: '0px',
height: (iconWidth + textHeight + 2 * margin) * Math.ceil(list.length / 4) + 44 +
'px', //'264px',
width: '100%',
backgroundColor: 'rgb(255,255,255)'
});
nvMask.addEventListener("click", () => { //处理遮罩层点击
// console.log('处理遮罩层点击');
this.hide()
callback({
event: "clickMask"
})
})
let myList = []
list.forEach((item, i) => {
myList.push({
tag: 'img',
src: item.img,
position: {
top: TOP['top' + (parseInt(i / 4) + 1)],
left: LEFT['left' + (1 + i % 4)],
width: iconWidth,
height: iconWidth
}
})
myList.push({
tag: 'font',
text: item.text,
textStyles: {
size: textHeight
},
position: {
top: TOP['top' + (parseInt(i / 4) + 1)] + iconWidth + icontextSpace,
left: LEFT['left' + (1 + i % 4)],
width: iconWidth,
height: textHeight
}
})
})
//绘制底部图标菜单的内容
nvImageMenu.draw([{
tag: 'rect', //菜单顶部的分割灰线
color: '#e7e7e7',
position: {
top: '0px',
height: '1px'
}
},
{
tag: 'font',
text: cancelText, //底部取消按钮的文字
textStyles: {
size: '14px'
},
position: {
bottom: '0px',
height: '44px'
}
},
{
tag: 'rect', //底部取消按钮的顶部边线
color: '#e7e7e7',
position: {
bottom: '45px',
height: '1px'
}
},
...myList
])
nvMask.show()
nvImageMenu.show()
// 开始动画
/*
plus.nativeObj.View.startAnimation({
type: 'slide-in-bottom',
duration: 300
}, nvImageMenu, {}, function() {
console.log('plus.nativeObj.View.startAnimation动画结束');
// 关闭原生动画
plus.nativeObj.View.clearAnimation();
nvImageMenu.show()
});
*/
this.isShow = true
nvImageMenu.addEventListener("click", e => { //处理底部图标菜单的点击事件，根据点击位置触发不同的逻辑
// console.log("click menu"+JSON.stringify(e));
if (e.screenY > plus.screen.resolutionHeight - 44) { //点击了底部取消按钮
// callback({event:"clickCancelButton"})
this.hide()
} else if (e.clientX < 5 || e.clientX > screenWidth - 5 || e.clientY < 5) {
//屏幕左右边缘5像素及菜单顶部5像素不处理点击
} else { //点击了图标按钮
var iClickIndex = -1 //点击的图标按钮序号，第一个图标按钮的index为0
var iRow = e.clientY < (top2 - (left1 / 2)) ? 0 : 1
var iCol = -1
if (e.clientX < (left2 - (iconSpace / 2))) {
iCol = 0
} else if (e.clientX < (left3 - (iconSpace / 2))) {
iCol = 1
} else if (e.clientX < (left4 - (iconSpace / 2))) {
iCol = 2
} else {
iCol = 3
}
if (iRow == 0) {
iClickIndex = iCol
} else {
iClickIndex = iCol + 4
}
// console.log("点击按钮的序号: " + iClickIndex);
// if (iClickIndex >= 0 && iClickIndex <= 5) { //处理具体的点击逻辑，此处也可以自行定义逻辑。如果增减了按钮，此处也需要跟着修改
// }
callback({
event: "clickMenu",
index: iClickIndex
})
}
})
/* nvImageMenu.addEventListener("touchstart", function(e) {
if (e.screenY > (plus.screen.resolutionHeight - 44)) {
//TODO 这里可以处理按下背景变灰的效果
}
})
nvImageMenu.addEventListener("touchmove", function(e) {
//TODO 这里可以处理按下背景变灰的效果
if (e.screenY > plus.screen.resolutionHeight - 44) {}
})
nvImageMenu.addEventListener("touchend", function(e) {
//TODO 这里可以处理释放背景恢复的效果
})
*/
}
hide() {
if (this.isShow) {
nvMask.hide()
nvImageMenu.hide()
this.isShow = false
}
}
}
export default NvImageMenu
\ No newline at end of file
uni_modules/uni-share/js_sdk/uni-share.js 0 → 100644
import UniImageMenu from './uni-image-menu.js';
class UniShare extends UniImageMenu{
constructor(arg) {
super()
this.isShow = super.isShow
}
async show(param, callback){
var menus = []
plus.share.getServices(services => { //只显示有服务的项目
services = services.filter(item => item.nativeClient)
let servicesList = services.map(e => e.id)
param.menus.forEach(item => {
if (servicesList.includes(item.share.provider) || typeof(item.share) == 'string') {
menus.push(item)
}
})
super.show({
list: menus,
cancelText: param.cancelText
}, e => {
callback(e)
if(e.event == 'clickMenu'){
if (typeof(menus[e.index]['share']) == 'string') {
this[menus[e.index]['share']](param)
} else {
uni.share({
...param.content,
...menus[e.index].share,
success: res=> {
console.log("success:" + JSON.stringify(res));
super.hide()
},
fail: function(err) {
console.log("fail:" + JSON.stringify(err));
uni.showModal({
content: JSON.stringify(err),
showCancel: false,
confirmText: "知道了"
});
}
})
}
}
})
}, err => {
uni.showModal({
title: '获取服务供应商失败：' + JSON.stringify(err),
showCancel: false,
confirmText: '知道了'
});
console.error('获取服务供应商失败：' + JSON.stringify(err));
})
}
hide(){
super.hide()
}
copyurl(param) {
console.log('copyurl',param);
uni.setClipboardData({
data: param.content.href,
success: ()=>{
console.log('success');
uni.hideToast() //关闭自带的toast
uni.showToast({
title: '复制成功',
icon: 'none'
});
super.hide();
},
fail: (err) => {
uni.showModal({
content: JSON.stringify(err),
showCancel: false
});
}
});
}
// 使用系统分享发送分享消息
shareSystem(param) {
console.log('shareSystem',param);
plus.share.sendWithSystem({
type: 'text',
content: param.content.title + param.content.summary || '',
href: param.content.href,
}, (e)=> {
console.log('分享成功');
super.hide()
}, (err)=> {
console.log('分享失败：' + JSON.stringify(err));
uni.showModal({
title: '获取服务供应商失败：' + JSON.stringify(err),
showCancel: false,
confirmText: '知道了'
});
});
}
}
export default UniShare
\ No newline at end of file
uni_modules/uni-share/package.json 0 → 100644
{
"id": "uni-share",
"displayName": "uni-share",
"version": "2.0.2",
"description": "底部弹出宫格图标式的分享菜单，可覆盖原生组件。",
"keywords": [
"分享菜单"
],
"repository": "",
"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": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "n",
"Android Browser": "n",
"微信浏览器(Android)": "n",
"QQ浏览器(Android)": "n"
},
"H5-pc": {
"Chrome": "n",
"IE": "n",
"Edge": "n",
"Firefox": "n",
"Safari": "n"
},
"小程序": {
"微信": "n",
"阿里": "n",
"百度": "n",
"字节跳动": "n",
"QQ": "n"
},
"快应用": {
"华为": "n",
"联盟": "n"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
uni_modules/uni-share/readme.md 0 → 100644
#### 本功能基于[底部图标菜单](https://ext.dcloud.net.cn/plugin?id=4858)封装而成。
### 示例代码
```
<template>
<button type="default" @click="uniShare">显示</button>
</template>
<script>
import uniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js';
export default {
onBackPress({from}) {
console.log(from);
if(from=='backbutton'){
this.$nextTick(function(){
uniShare.hide()
})
return uniShare.isShow;
}
},
methods: {
uniShare() {
uniShare.show({
content: { //公共的分享参数配置 类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
type: 0,
href: 'https://uniapp.dcloud.io/',
title: '标题',
summary: '描述',
imageUrl: 'https://img-cdn-aliyun.dcloud.net.cn/stream/icon/__UNI__HelloUniApp.png'
},
menus: [{
"img": "/static/app-plus/sharemenu/wechatfriend.png",
"text": "微信好友",
"share": { //当前项的分享参数配置。可覆盖公共的配置如下：分享到微信小程序，配置了type=5
"provider": "weixin",
"scene": "WXSceneSession"
}
},
{
"img": "/static/app-plus/sharemenu/wechatmoments.png",
"text": "微信朋友圈",
"share": {
"provider": "weixin",
"scene": "WXSceneTimeline"
}
},
{
"img": "/static/app-plus/sharemenu/mp_weixin.png",
"text": "微信小程序",
"share": {
provider: "weixin",
scene: "WXSceneSession",
type: 5,
miniProgram: {
id: '123',
path: '/pages/list/detail',
webUrl: '/#/pages/list/detail',
type: 0
},
}
},
{
"img": "/static/app-plus/sharemenu/weibo.png",
"text": "微博",
"share": {
"provider": "sinaweibo"
}
},
{
"img": "/static/app-plus/sharemenu/qq.png",
"text": "QQ",
"share": {
"provider": "qq"
}
},
{
"img": "/static/app-plus/sharemenu/copyurl.png",
"text": "复制",
"share": "copyurl"
},
{
"img": "/static/app-plus/sharemenu/more.png",
"text": "更多",
"share": "shareSystem"
}
],
cancelText: "取消分享",
}, e => { //callback
console.log(uniShare.isShow);
console.log(e);
})
}
}
}
</script>
```
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment