Commit 7e2ce587 by yuzhenWang

合并代码,已发布生产

parents 17a9e6a2 270fef94
......@@ -202,12 +202,81 @@
image{
width: 100%!important;
}
.container{
background-color: #FBFBFB;
min-height: 100vh; /* 使用视口高度 */
/* .container{
background-color: rgba(235, 239, 247, 1);
min-height: 100vh;
height: auto !important;
height: 100vh;
} */
/* 全局基础样式 - 移动端优先 */
.container {
background-color: rgba(235, 239, 247, 1);
min-height: 100vh;
height: auto !important;
height: 100vh;
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
font-size: 28rpx;
}
/* 手机端默认样式 (小于768px) */
/* @media (max-width: 767px) {
.container {
}
} */
/* 平板设备 (768px-1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
.container {
/* max-width: 100%; */
}
/* iPad竖屏*/
/* @media (orientation: portrait) {
.container {
max-width: 650px;
}
} */
/* iPad横屏 */
@media (orientation: landscape) {
.container {
max-width: 1024px;
display: flex;
align-items: center;
flex-direction: column;
}
}
}
/* 小桌面设备 (1024px-1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
.container {
max-width: 1000px;
}
}
/* 大桌面设备 (1280px以上) */
@media (min-width: 1280px) {
.container {
max-width: 1200px;
}
}
/* 特殊iPad Pro尺寸适配 */
/* @media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {
.container {
max-width: 1100px;
}
} */
.uni-popup .uni-popup__wrapper{
/* margin: 30rpx!important; */
}
......
<template>
<!-- 悬浮按钮 -->
<view
class="floating-button"
:style="{ right: buttonRight + 'rpx', bottom: buttonBottom + 'rpx' }"
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@touchend="handleTouchEnd"
@click="handleClick"
>
<!-- 默认内容 -->
<slot>
<view class="consultBtn">
<view class="iconfont icon-kefu"></view>
<view>咨询客服</view>
</view>
</slot>
</view>
</template>
<script>
export default {
name: 'FloatingButton',
data() {
return {
buttonRight: 10, // 初始位置,单位rpx
buttonBottom: 200, // 初始位置,单位rpx
startX: 0,
startY: 0,
isDragging: false,
windowWidth: 0,
windowHeight: 0,
buttonWidth: 140, // 按钮宽度,单位rpx
buttonHeight: 140 // 按钮高度,单位rpx
}
},
mounted() {
this.updateWindowSize();
// 监听窗口变化
uni.onWindowResize(() => {
this.updateWindowSize();
});
},
methods: {
// 更新窗口尺寸
updateWindowSize() {
const systemInfo = uni.getSystemInfoSync();
this.windowWidth = systemInfo.windowWidth;
this.windowHeight = systemInfo.windowHeight;
},
// 触摸开始事件
handleTouchStart(event) {
const touch = event.touches[0];
// 记录触摸点相对于按钮右下角的偏移量
this.startX = touch.clientX - (this.windowWidth - this.rpxToPx(this.buttonRight));
this.startY = touch.clientY - (this.windowHeight - this.rpxToPx(this.buttonBottom));
this.isDragging = false;
},
// 触摸移动事件
handleTouchMove(event) {
event.preventDefault(); // 阻止默认滚动行为
const touch = event.touches[0];
// 计算新的right和bottom值(像素单位)
let newRight = this.windowWidth - touch.clientX + this.startX;
let newBottom = this.windowHeight - touch.clientY + this.startY;
// 转换为rpx单位
this.buttonRight = this.pxToRpx(newRight);
this.buttonBottom = this.pxToRpx(newBottom);
this.isDragging = true;
// 限制按钮不超出屏幕(rpx单位)
const maxRight = this.windowWidth - this.rpxToPx(this.buttonWidth);
const maxBottom = this.windowHeight - this.rpxToPx(this.buttonHeight);
if (newRight < 0) {
this.buttonRight = this.pxToRpx(0);
} else if (newRight > maxRight) {
this.buttonRight = this.pxToRpx(maxRight);
}
if (newBottom < 0) {
this.buttonBottom = this.pxToRpx(0);
} else if (newBottom > maxBottom) {
this.buttonBottom = this.pxToRpx(maxBottom);
}
},
// 触摸结束事件
handleTouchEnd() {
if (!this.isDragging) {
this.handleClick();
}
},
// 点击事件
handleClick() {
// 现在还没转化成小程序,暂时放在这
// #ifdef MP-WEIXIN
uni.openCustomerServiceChat({
extInfo: {
url: 'https://work.weixin.qq.com/kfid/kfc08c55f4170e7fc9e'
},
corpId: 'ww43cac1cf9dd6a3d0', // 客服会话按钮打开后,在微信客服会话按钮处理的事件类型
showMessageCard: true,
sendMessageTitle: (uni.getStorageSync('hoservice_mobileNo')?(uni.getStorageSync('hoservice_mobileNo')+",") :"" ) + "进入个人中心-->咨询客服",
sendMessagePath: `/pages/index/mySelf.html`,
//sendMessageImg: cardItem.value['list'][0]['itemImg']
});
// #endif
// #ifndef MP-WEIXIN
window.open('https://work.weixin.qq.com/kfid/kfc08c55f4170e7fc9e')
// #endif
},
// rpx转px
rpxToPx(rpx) {
return rpx / 750 * this.windowWidth;
},
// px转rpx
pxToRpx(px) {
return px * 750 / this.windowWidth;
}
}
}
</script>
<style scoped lang="scss">
.floating-button {
position: fixed;
width: 140rpx;
height: 140rpx;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
cursor: pointer;
user-select: none;
z-index: 9999;
.consultBtn{
display: flex;
align-items: center;
flex-direction: column;
color: #20279B;
font-size: 28rpx;
.icon-kefu{
font-size: 60rpx;
}
}
}
</style>
\ No newline at end of file
<template>
<view class="container" >
<!-- #ifdef APP -->
<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="top: 20rpx;" v-if="isBack !=1"></text>
<!-- #endif -->
<view class="content" v-if="type == 1" :style="{'margin-top': isBack!=1 ? '60rpx' : '0'}">
<view class="agreement-container">
<!-- <scroll-view scroll-y="true" class="scroll-content"> -->
......@@ -322,10 +325,7 @@
<style lang="scss" scoped>
.container{
padding: 30rpx;
// padding-top: 40rpx;
letter-spacing: 1px;
background-color:#fff;
margin-bottom: 50rpx;
background-color: #f7f7f7;
}
.privacy-policy {
padding: 20rpx 30rpx;
......@@ -387,8 +387,6 @@
}
.agreement-container {
padding: 20rpx;
background-color: #fff;
// height: 100vh;
margin-bottom: 50rpx;
}
......@@ -444,4 +442,4 @@
// height: 100%; // scroll-view 高度填满父容器
// overflow-y: auto; // 允许内部滚动
// }
</style>
\ No newline at end of file
</style>
......@@ -3,7 +3,7 @@
<view class="timeTitle">
<view class="" v-if="initDate">
<text style="font-size: 30rpx;">{{initDate}}</text>
<text v-if="iconDirection== 'down'" class="iconfont icon-xiajiantou iconStyle"></text>
<text v-if="iconDirection== 'down'" class="iconfont icon-xiajiantou iconStyle" :style="{color:iconColor?iconColor:''}"></text>
<text v-if="iconDirection== 'right'" class="iconfont icon-youjiantou iconStyle"></text>
</view>
<view class="emptyTxt" v-else>
......@@ -64,6 +64,10 @@
type: String,
default: 'down'
},
iconColor:{
type: String,
default: '#000'
},
visible: { //显示组件
type: Boolean,
default: false
......
<template>
<view class="itemContent">
<view class="thumbnailBox">
<image :src="thumbnailPath" alt="" mode="widthFix"></image>
<image :src="thumbnailPath" alt="" mode="widthFix" ></image>
</view>
<view class="courseDetailBox">
<view class="title">
<view style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{title}}</view>
<!-- <text class="detailBtn" @click="viewDetail()" v-if="isNeedViewDetail">订单详情></text> -->
<!-- <text class="iconfont icon-youjiantou " v-if="showDetail"></text> -->
</view>
<view class="summaryBox" v-if="summaryBox">
<view class="text-wrap">{{summaryBox}}</view>
</view>
<view class="dataBox" v-if="dataList">
<view class="price" v-if="dataList.coursePrice != 0" >{{dataList.coursePrice}}</view>
<!-- <text v-if="dataList.coursePrice == 0">免费</text> -->
<text v-if="dataList.coursePrice != 0">{{dataList.salesNumber}}人购买</text>
<view class="price" v-if="dataList.coursePrice != 0" >{{Number(dataList.coursePrice).toFixed(2)}}</view>
<text v-if="dataList.coursePrice != 0 && dataList.salesNumber">{{dataList.salesNumber}}人购买</text>
</view>
<!-- <view class="tagListBox" v-if="tagList || fileLecturerId">
<template v-if="tagList">
<view class="tagItem" v-for="tagItem in tagConcat(tagList.v1,tagList.v2)">{{tagItem}}</view>
</template>
<template v-else-if="_tagList">
<view class="tagItem" v-for="tagItem in tagConcat(_tagList.v1,_tagList.v2)">{{tagItem}}</view>
</template>
</view> -->
</view>
</view>
</template>
......@@ -61,7 +51,11 @@
},
fileId: {
type: Number
}
},
showDetail: { //展示详情箭头
type: Boolean,
default:false
},
},
data() {
return {
......@@ -134,6 +128,8 @@
.title {
// flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
// max-width: 260rpx;
// width: 0;
// flex-basis: 100rpx;
......
......@@ -115,7 +115,6 @@
}
this.loginType='visitor'
this.initForm()
uni.removeTabBarBadge({ index: 3 });
// 获取跳转来源(通过路由参数)
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
......
......@@ -18,40 +18,7 @@
<view class="d-td">
<view class="" style="display: flex;text-align: center;">
<!-- <view class="d-td" v-if="item.levelCode == 'B1'&& item.itemType == '1'"
@click="open(item, i)" :style="{'margin-left':(item.level * 20)+'rpx'}">
<view class="" style="display: flex;">
<text>{{item.areaCenterName}}</text>
<view class="" style="width: 36rpx;height: 36rpx;margin-left: 5rpx; ">
<image style="width: 36rpx;height: 36rpx;" src="../../static/Group1665.png"
mode="widthFix"></image>
</view>
</view>
</view> -->
<!-- <view class="d-td" @click="open(item, i)"
v-else-if="item.levelCode == 'C3'&& item.itemType == '1'"
:style="{'margin-left':(item.level * 20)+'rpx'}">
<view class="" style="display: flex;">
<text>{{item.areaCenterName}}</text>
<view class="" style="width: 36rpx;height: 36rpx;margin-left: 5rpx; ">
<image style="width: 36rpx;height: 36rpx;" src="../../static/Group1665.png"
mode="widthFix"></image>
</view>
</view>
</view> -->
<!-- <view class="d-td" @click="open(item, i)"
v-else-if="item.levelCode == 'C2'&& item.itemType == '1'"
:style="{'margin-left':(item.level * 20)+'rpx'}">
<view class="" style="display: flex;">
<text>{{item.areaCenterName}}</text>
<view class="" style="width: 36rpx;height: 36rpx;margin-left: 5rpx;">
<image style="width: 36rpx;height: 36rpx;" src="../../static/Group1665.png"
mode="widthFix"></image>
</view>
</view>
</view> -->
<!-- @click="open(item, i)" -->
<view class="d-td" :style="{'margin-left':(item.level * 20)+'rpx'}">
<text v-if="dataShowType == 1">{{item.parentName}}</text>
<view v-if="dataShowType == 2" style="text-align:center;">
......
<template>
<view class="search">
<text class="iconfont icon-sousuo" @click="searchBtn()"></text>
<input
class="searchInput"
type="text"
......@@ -9,9 +10,6 @@
@confirm="searchBtn()"
@input="handleInput"
/>
<text class="iconfont icon-sousuo" @click="searchBtn()"></text>
<!-- <text class="iconfont icon-xiaoxi"></text>
<text class="system_msg" @click="jumpToSystemMsg()">{{messageUnreadCount}}</text> -->
</view>
</template>
......@@ -105,23 +103,25 @@
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.search{
display: flex;
margin: 30rpx auto;
align-items: center;
justify-content: space-between;
background: linear-gradient(to right,#E6F5FC,#FDE9F2);
border-radius: 60rpx;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 15rpx;
padding: 0 15rpx;
.searchInput{
margin-right: 20rpx;
width: 85%;
margin-left: 20rpx;
width: 100%;
padding: 15rpx;
color: #fff;
font-size: 26rpx;
}
.icon-sousuo{
font-size: 50rpx;
margin-right: 10rpx;
opacity: .7;
color: #fff;
}
.icon-xiaoxi{
font-size: 50rpx;
......
......@@ -33,7 +33,7 @@ let companyInfo = {
appName: '银盾家办',
companyName: '银盾家办',
companyFullName: '银盾家办(广州)企业管理咨询有限公司',
companyLogo:'../../static/yd_Logo.png',
companyLogo:'../../static/logo2.png',
systemType: 'NoIOS'
}
const config = {
......
......@@ -21,4 +21,4 @@ export function createApp() {
//#ifdef H5
window.sessionStorage.setItem('firstEntryUrl',window.location.href.split('#')[0])
// #endif
\ No newline at end of file
// #endif
......@@ -73,7 +73,7 @@
}, {
"path": "pages/application-process/basic-info",
"style": {
"navigationBarTitleText": "基本资料",
"navigationBarTitleText": "申请加盟-基本资料",
"enablePullDownRefresh": false,
"app-plus": {
"softinputMode": "adjustPan"
......@@ -145,6 +145,22 @@
},
{
"path": "pages/personalCenter/myTeamIncubate",
"style": {
"navigationBarTitleText": "育成团队",
"enablePullDownRefresh": false
}
},
{
"path": "pages/personalCenter/helpCenter",
"style": {
"navigationBarTitleText": "帮助中心",
"enablePullDownRefresh": false
}
},
{
"path": "pages/myShare/myShare",
"style": {
"navigationBarTitleText": "分享数据",
......@@ -235,7 +251,7 @@
}, {
"path": "pages/applyDropClass/applyDropClass",
"style": {
"navigationBarTitleText": "申请退",
"navigationBarTitleText": "申请退",
"enablePullDownRefresh": false
}
}, {
......
<template>
<view class="container">
<!-- #ifdef APP -->
<view class="top">
<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()"></text>
<text style="font-size: 30rpx;">退单详情</text>
</view>
<view class="returnCountsContainer">
<view class="left">
<h3 style="font-size: 40rpx;">{{courseInfoItem.orderStatusName}}</h3>
<text style="font-size: 26rpx;">{{courseInfoItem.refundTime}}</text>
</view>
<view class="right">
<h3>{{courseInfoItem.refundAmount}}</h3>
<text style="font-size: 26rpx;" @click="goDetail()">到账说明</text>
<!-- #endif -->
<view class="conentBox">
<view class="returnCountsContainer">
<view class="left">
<h3 style="font-size: 40rpx;">{{courseInfoItem.orderStatusName}}</h3>
<text style="font-size: 26rpx;">{{courseInfoItem.refundTime}}</text>
</view>
<view class="right">
<h3>{{courseInfoItem.refundAmount}}</h3>
<text style="font-size: 26rpx;" @click="goDetail()">到账说明</text>
</view>
</view>
</view>
<!-- 退款进度 -->
<view class="returnProcessContainer">
<h4>退款进度</h4>
<view class="stepContainer">
<view class="iconContainer">
<view v-for="(item,index) in options" :key="index" :class="{'actived':index===processIndex}">
<view class="icon"></view>
<view class="line"></view>
<!-- 退款进度 -->
<view class="returnProcessContainer">
<h4>退款进度</h4>
<view class="stepContainer">
<view class="iconContainer">
<view v-for="(item,index) in options" :key="index" :class="{'actived':index===processIndex}">
<view class="icon"></view>
<view class="line"></view>
</view>
</view>
</view>
<view class="stepProcessContainer">
<view v-for="(item,index) in options" :key="index">
<text class="steps__column-title">{{item.title}}</text>
<text class="steps__column-desc">{{item.desc}}</text>
<text class="steps__column-desc">{{item.time}}</text>
<view class="stepProcessContainer">
<view v-for="(item,index) in options" :key="index">
<text class="steps__column-title">{{item.title}}</text>
<text class="steps__column-desc">{{item.desc}}</text>
<text class="steps__column-desc">{{item.time}}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 退款详情 -->
<view class="returnDetailContainer">
<h4>退款详情</h4>
<template v-if="courseInfoItem">
<course-item :thumbnailPath="courseInfoItem.displayImage" :title="courseInfoItem.fileTitle" :summaryBox="courseInfoItem.fileSynopsis" :dataList="{coursePrice:courseInfoItem.coursePrice,salesNumber:courseInfoItem.salesNumber}" :fileLecturerId="courseInfoItem.fileLecturerId"></course-item>
</template>
<view class="returnInfoContent">
<view>
<text>退款单号:</text>
<text>{{courseInfoItem.orderNo}}</text>
</view>
<view>
<text>申请时间:</text>
<text>{{courseInfoItem.applyRefundTime}}</text>
</view>
<view>
<text>退款金额:</text>
<text>¥{{courseInfoItem.refundAmount}}</text>
</view>
<view>
<text>支付违约金:</text>
<text>{{courseInfoItem.breachCommission?'¥':''}}{{courseInfoItem.breachCommission}}</text>
</view>
<view>
<text>退还积分:</text>
<text>{{courseInfoItem.refundIntegralExchange}}</text>
</view>
<view v-if="courseInfoItem.orderRemark">
<text >退款原因:</text>
<text>{{courseInfoItem.orderRemark}}</text>
<!-- 退款详情 -->
<view class="returnDetailContainer">
<h4>退款详情</h4>
<template v-if="courseInfoItem">
<course-item :thumbnailPath="courseInfoItem.displayImage" :title="courseInfoItem.fileTitle" :summaryBox="courseInfoItem.fileSynopsis" :dataList="{coursePrice:courseInfoItem.coursePrice,salesNumber:courseInfoItem.salesNumber}" :fileLecturerId="courseInfoItem.fileLecturerId"></course-item>
</template>
<view class="returnInfoContent">
<view>
<text>退款单号:</text>
<text>{{courseInfoItem.orderNo}}</text>
</view>
<view>
<text>申请时间:</text>
<text>{{courseInfoItem.applyRefundTime}}</text>
</view>
<view>
<text>退款金额:</text>
<text>¥{{courseInfoItem.refundAmount}}</text>
</view>
<view>
<text>支付违约金:</text>
<text>{{courseInfoItem.breachCommission?'¥':''}}{{courseInfoItem.breachCommission}}</text>
</view>
<view>
<text>退还积分:</text>
<text>{{courseInfoItem.refundIntegralExchange}}</text>
</view>
<view v-if="courseInfoItem.orderRemark">
<text >退款原因:</text>
<text>{{courseInfoItem.orderRemark}}</text>
</view>
</view>
</view>
</view>
</view>
</template>
......@@ -142,6 +147,11 @@
<style lang="scss" scoped>
.container{
height:100%;
box-sizing: border-box;
.conentBox{
padding: 20rpx;
box-sizing: border-box;
}
.top{
display: flex;
height: 80rpx;
......@@ -160,7 +170,8 @@
.returnCountsContainer,.returnProcessContainer,.returnDetailContainer{
background-color: #fff;
padding: 20rpx 40rpx;
margin: 10rpx auto;
margin-bottom: 20rpx;
border-radius: 10rpx;
h4{
font-size: 32rpx;
color: #333;
......
<template>
<view class="container">
<view class="top">
<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()"></text>
<text style="font-size: 30rpx;">我的售后</text>
</view>
<!-- #ifdef APP -->
<view class="top">
<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()"></text>
<text style="font-size: 30rpx;">我的售后</text>
</view>
<!-- #endif -->
<h4 class="noListTip" v-if="userCourses.length <=0 ">暂无售后</h4>
<view class="ulBox" v-if="userCourses.length > 0">
<view class="conent">
<view class="liBox" v-for="item in userCourses" :key="item.orderId">
<course-item :thumbnailPath="item.displayImage" :title="item.fileTitle" :summaryBox="item.fileSynopsis" :dataList="{coursePrice:item.coursePrice,salesNumber:item.salesNumber}" :fileLecturerId="item.fileLecturerId"></course-item>
<view class="statusBox">
<text>{{item.orderStatusName}}</text>
<text @click="goDetail(item)">查看详情></text>
<text @click="goDetail(item)">查看详情</text>
</view>
</view>
</view>
</view>
</view>
</template>
......@@ -62,7 +67,14 @@
<style lang="scss" scoped>
.container{
height: 100%;
.noListTip{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 0%;
padding-top: 20%;
}
.top{
display: flex;
height: 80rpx;
......@@ -79,19 +91,28 @@
}
}
.ulBox{
margin-top: 20rpx;
box-sizing: border-box;
padding: 20rpx 20rpx 5rpx 20rpx;
.conent{
border-radius: 10rpx;
}
.liBox{
background-color: #fff;
margin-bottom: 20rpx;
padding: 36rpx 30rpx;
border-radius: 10rpx;
.statusBox{
display: flex;
justify-content: space-between;
align-items: center;
text{
color: #333;
font-size: 32rpx;
&:last-child{
color: #666;
background-color: #2A36AD;
padding: 10rpx 20rpx;
border-radius: 40rpx;
color: #fff;
font-size: 28rpx;
}
}
......
.container {
font-size: 36rpx;
// background: #fff;
// min-height: 100%;
overflow: auto;
// padding-bottom: 80rpx;
.wrapper{
background: #fff;
}
......
<template>
<view class="container" style="height: 1000rpx;">
<view >
<!-- #ifdef APP -->
<view class="top">
<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()"></text>
<text>申请加盟</text>
</view>
<!-- #endif -->
<view class="page">
<text class="num actived pass">1</text>
<text class="line line_pass"></text>
......
<template>
<view class="container">
<!-- #ifdef APP -->
<view class="top">
<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()"></text>
<text>申请加盟</text>
</view>
<!-- #endif -->
<view class="page">
<text class="num actived">1</text>
<text class="line"></text>
......@@ -121,7 +124,7 @@
/>
</view>
<view class="contentItem">
<text>居住地址</text>
<text style="margin-left: 12rpx;">居住地址</text>
<view>
<input
maxlength="50"
......
<template>
<view class="container">
<!-- #ifdef APP -->
<view class="top">
<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()"></text>
<text>申请加盟</text>
</view>
<!-- #endif -->
<view class="page">
<text class="num actived pass">1</text>
<text class="line line_pass"></text>
......
<template>
<view class="container">
<!-- #ifdef APP -->
<view class="top">
<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()"></text>
<text>申请加盟</text>
</view>
<!-- #endif -->
<view class="page">
<text class="num actived pass">1</text>
<text class="line line_pass"></text>
......@@ -18,8 +21,6 @@
<text class="num">6</text>
<text class="line"></text>
<text class="num">7</text>
<!-- <text class="line"></text>
<text class="num">8</text> -->
</view>
<view class="wrapper">
<view class="title">
......@@ -239,7 +240,7 @@
<style lang="scss" scoped>
@import 'applyCommon.scss';
.content_wrapper {
display: flex;
justify-content: center;
......
<template>
<view class="container">
<!-- #ifdef APP -->
<view class="top">
<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()"></text>
<text>申请加盟</text>
</view>
<!-- #endif -->
<view class="page">
<text class="num actived pass">1</text>
<text class="line line_pass"></text>
......
<template class="sign">
<view class="container" style="margin-bottom: 0;" >
<!-- #ifdef APP -->
<view class="top">
<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()"></text>
<text>申请加盟</text>
</view>
<view class="page">
<!-- #endif -->
<view class="page" >
<text class="num actived pass">1</text>
<text class="line line_pass"></text>
<text class="num actived pass">2</text>
......
......@@ -2,8 +2,10 @@
<view class="container">
<view style="flex: 1;">
<view class="classInfo" style="padding-top:80rpx">
<view class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="top:18rpx">
</view>
<!-- #ifdef APP -->
<view class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="top:18rpx"></view>
<!-- #endif -->
<course-item :thumbnailPath="courseInfoItem.displayImage" :title="courseInfoItem.fileTitle" :summaryBox="courseInfoItem.fileSynopsis" :dataList="{coursePrice:courseInfoItem.coursePrice,salesNumber:courseInfoItem.salesNumber}" :fileLecturerId="courseInfoItem.fileLecturerId"></course-item>
</view>
<!-- 订单支付明细 -->
......@@ -218,7 +220,7 @@
<style lang="scss" scoped>
.container{
padding: 10rpx 20rpx;
// padding: 10rpx 0;
height: 100%;
position: relative;
.commonTitle{
......@@ -235,7 +237,7 @@
padding: 30rpx 14rpx 14rpx 20rpx;
margin-bottom: 10rpx;
background-color: #fff;
border-radius: 10rpx;
// border-radius: 10rpx;
view{
margin-top: 22rpx;
display: flex;
......@@ -251,9 +253,6 @@
}
.submitApply{
margin-top: 30rpx;
// position: fixed;
// bottom: 0rpx;
// left: 0;
width: 100%;
text{
display: flex;
......@@ -295,7 +294,7 @@
align-items: baseline;
background-color: #fff;
padding: 20rpx;
border-radius: 10rpx;
// border-radius: 10rpx;
box-sizing: border-box;
.pickerBox{
display: flex;
......
<template>
<view>
<!-- #ifdef APP -->
<text class="iconfont icon-youjiantou zuojiantou" style="top: 20rpx;" @click="goBack()" ></text>
<!-- #endif -->
<template v-if="title">
<view style="padding-top: 50rpx;"><my-list-item :title="title" :lists="lists"></my-list-item></view>
<view v-if="lists.length<=0" style="text-align: center;margin-top: 40rpx;">暂无{{typeName}}记录</view>
......
<template>
<view class="container">
<view class="shareheader" style="" v-if="coursesharing != 1 || deviceType==3">
<view class="iconfont icon-youjiantou" style="margin-left: 30rpx;" @click="goBack()">
</view>
<!-- #ifdef APP -->
<view class="iconfont icon-youjiantou" style="margin-left: 30rpx;" @click="goBack()"></view>
<!-- #endif -->
<view class="share-entrance">
<view style="z-index: 99999;">
<uni-popup ref="share" type="top" safeArea backgroundColor="#F4F2F3" :maskClick='true'
......@@ -51,25 +54,11 @@
<view class="" style="width: 100%;">
<h4>{{courseInfo.fileTitle}}</h4>
</view>
<view class="shareF">
<!-- <view class="awakenApp" @click="jumpapp()" v-if="coursesharing == 1">
<view class="" style="width: 50rpx; height: 50rpx;">
<image style="width: 50rpx; height: 50rpx;" src="../../static/Slice117.png" mode=""></image>
</view>
<text>唤醒App</text>
</view> -->
<!-- v-if="isWeixin == true" -->
<strong>
</strong>
</view>
</view>
<view class="dataBox">
<strong v-if="(courseInfo.status==1 || courseInfo.status==2 )&& courseInfo.coursePrice !== 0">{{Number(courseInfo.coursePrice).toFixed(2)}}</strong>
<!-- <strong v-if="(courseInfo.status==1 || courseInfo.status==2 )&& courseInfo.coursePrice == 0">免费</strong> -->
<!-- <text v-if="courseInfo.status==2" style="color: #F15A1F;margin-right: 20rpx;"><i
class="iconfont icon-yifukuan"></i>已购</text> -->
<text v-if="courseInfo.coursePrice != 0">{{courseInfo.salesNumber}}{{showName}}</text>
</view>
......@@ -124,7 +113,7 @@
<view>
<p><text class="lecturerName">{{lecturerInfo.lecturerName}}</text></p>
<template v-if="lecturerInfo?.lecturerRankNames">
<p v-for="item in lecturerInfo.lecturerRankNames.split(',')" class="lecturerTitle">
<p v-for="(item,index) in lecturerInfo.lecturerRankNames.split(',')" :key="index" class="lecturerTitle">
<text>{{item}}</text>
</p>
</template>
......@@ -414,7 +403,6 @@
}
},
goBack() {
console.log('返回');
uni.navigateBack({
delta: 1
});
......@@ -454,13 +442,14 @@
this.$refs.share.open()
},
sharechange(val) {
if(val.index != 3){
if(val.tabbar){
uni.switchTab({
url: val.item.link
url: val.link
})
return
}else{
uni.navigateTo({
url: val.item.link
url: val.link
})
}
},
......@@ -1018,10 +1007,10 @@
<style lang="scss" scoped>
.container{
// background-color: #f7f7f7;
width: 100%;
height: auto;
box-sizing: border-box;
// padding: 20rpx;
}
page {
padding: 0;
......@@ -1043,11 +1032,6 @@
}
.swiperBox {
height: 930rpx;
image {
border-radius: 12rpx;
}
padding: 0 40rpx;
margin-top: 0rpx;
}
.swiper-box {
height: 930rpx;
......@@ -1108,18 +1092,22 @@
align-items: center;
border-top-left-radius: 30rpx;
border-bottom-left-radius: 30rpx;
// padding-left: 10rpx;
color: #fff;
height: 60rpx;
background: #20269B;
}
.shareheader {
// padding-top: 60rpx;
background-color: #fff;
display: flex;
/* #ifdef H5 */
justify-content: flex-end;
/* #endif */
/* #ifdef APP */
justify-content: space-between;
/* #endif */
align-items: center;
height: 80rpx;
height: 100rpx;
.icon-youjiantou {
display: inline-block;
......
......@@ -46,7 +46,7 @@
return {
companyType:'',
areaName: companyInfo.companyName,
imgSrc:'../../static/yd_Logo.png',
imgSrc:'../../static/logo2.png',
//imgSrc: '../../static/cffp_logo.png',
liginName: '登录',
disabledSendBtn:false,
......
<template>
<view class="padding-top container">
<!-- #ifdef APP -->
<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="top: 20rpx;"></text>
<!-- #endif -->
<view class="tabTitle">
<text :class="{'actived': tabType===1}" @click="switchTab(1)">基本信息</text>
......@@ -495,17 +498,17 @@
}
&.listUl::before {
display: block;
content: '';
position: absolute;
left: 10rpx;
top: 20rpx;
width: 8rpx;
height: 20rpx;
background-color: #FA882F;
border-radius: 8rpx;
}
// &.listUl::before {
// display: block;
// content: '';
// position: absolute;
// left: 10rpx;
// top: 20rpx;
// width: 8rpx;
// height: 20rpx;
// background-color: #FA882F;
// border-radius: 8rpx;
// }
}
.sendInvite {
......
<template>
<view class="container">
<view style="flex: 1;">
<!-- #ifdef APP -->
<view class="backArrow">
<text class="iconfont icon-youjiantou zuojiantou" style="left: 5rpx;" @click="goBack()"></text>
</view>
<!-- #endif -->
<!-- 课程详情 -->
<template v-if="courseInfoItem">
<view class="courseItemBox" style="padding-top:80rpx">
<view class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="top:18rpx">
</view>
<view class="courseItemBox" >
<course-item :thumbnailPath="courseInfoItem.displayImage" :title="courseInfoItem.fileTitle"
:summaryBox="courseInfoItem.fileSynopsis"
:dataList="{coursePrice:courseInfoItem.coursePrice,salesNumber:courseInfoItem.salesNumber}"
......@@ -543,10 +547,29 @@
display: flex;
flex-direction: column;
.backArrow{
box-sizing: border-box;
display: flex;
height: 100rpx;
justify-content: space-between;
align-items: center;
position: relative;
width: 100%;
margin-bottom: 10rpx;
color: #333333;
background-color: #fff;
text:nth-child(2){
width: 100%;
text-align: center;
position: absolute;
}
}
.txtFont{
font-size: 27rpx;
}
.courseItemBox {
margin: 20rpx;
border-radius: 10rpx;
padding: 20rpx 30rpx;
background-color: #fff;
}
......@@ -700,7 +723,7 @@
.paymentMethodContent,
.totalContent {
background-color: #fff;
margin: 0 10rpx;
margin: 0 20rpx;
padding: 20rpx;
border-radius: 10rpx;
}
......
<template>
<view class="container" style="padding-top: 50rpx;">
<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="top: 16rpx;"></text>
<view class="container" >
<!-- #ifdef APP -->
<view class="backArrow">
<text class="iconfont icon-youjiantou zuojiantou" style="left: 5rpx;" @click="goBack()"></text>
<text style="font-size: 30rpx;">订单详情</text>
</view>
<!-- #endif -->
<view class="orderInfoContent">
<view class="ulBox">
<view v-for="item in orderInfoList.filter(item=>item.pageArea===1)" :key="item.id" class="liBox">
<text>{{item.name}}:</text>
<text
:style="{color:item.color ? item.color : '#666'}">{{item.type==='currency' && item.value ? '¥' : ''}}{{item.value ? item.value : '/'}}</text>
<view class="conent">
<view v-for="item in orderInfoList.filter(item=>item.pageArea===1)" :key="item.id" class="liBox">
<text>{{item.name}}:</text>
<text
:style="{color:item.color ? item.color : '#666'}">{{item.type==='currency' && item.value ? '¥' : ''}}{{item.value ? item.value : '/'}}</text>
</view>
</view>
</view>
<view class="ulBox">
<view v-for="item in orderInfoList.filter(item=>item.pageArea===2)" :key="item.id" class="liBox">
<text>{{item.name}}:</text>
<text
:style="{color:item.color ? item.color : '#666'}"
>
{{item.type==='currency' && item.value ? '¥' : ''}}{{item.value ? item.value : '/'}}
</text>
<view class="conent">
<view v-for="item in orderInfoList.filter(item=>item.pageArea===2)" :key="item.id" class="liBox">
<text>{{item.name}}:</text>
<text
:style="{color:item.color ? item.color : '#666'}"
>
{{item.type==='currency' && item.value ? '¥' : ''}}{{item.value ? item.value : '/'}}
</text>
</view>
</view>
</view>
<!-- 退课 -->
<view class="dropClassBox" v-if="Withdrawal=='1' && orderDetail.isRefund == '1'&& type == 'drop'">
<!-- <view class="dropClassBox" v-if="Withdrawal=='1' && orderDetail.operationStatus == '1'&& type == 'drop'"> -->
<view class="dropBtn" @click="dropClasses()">退款</view>
</view>
</view>
......@@ -232,13 +242,32 @@
<style lang="scss" scoped>
.container {
height: 100%;
.backArrow{
box-sizing: border-box;
display: flex;
height: 100rpx;
justify-content: space-between;
align-items: center;
position: relative;
width: 100%;
margin-bottom: 10rpx;
color: #333333;
background-color: #fff;
text:nth-child(2){
width: 100%;
text-align: center;
position: absolute;
}
}
.orderInfoContent {
.ulBox {
background-color: #fff;
margin: 20rpx 22rpx;
padding: 20rpx;
box-sizing: border-box;
padding: 20rpx 20rpx 5rpx 20rpx;
.conent{
padding: 20rpx ;
background-color: #fff;
border-radius: 10rpx;
}
.liBox {
margin-bottom: 20rpx;
display: flex;
......
......@@ -4,7 +4,7 @@
<view class="successBox" v-if="orderStatus=='2'">
<i class="iconfont icon-dengdai"></i>
<text class="statusText">订单支付成功</text>
<text @click="viewDetail()" class="viewOrder">查看订单 ></text>
<text @click="viewDetail()" class="viewOrder">查看订单</text>
</view>
<view class="failBox" v-if="orderStatus=='1'">
<text style="color:#F04604"><i class="iconfont icon-guanbi"></i>订单支付失败</text>
......@@ -14,19 +14,38 @@
</view>
</view>
</view>
<!-- 精选课程 -->
<view class="courlistBox">
<view class="course_content">
<view class="tag">
<h4>推荐产品</h4>
<view @click="goToCourselist()">更多<text class="iconfont icon-youjiantou"></text></view>
</view>
<view class="ulBox" v-if="cffpCourseInfos.length>0">
<view class="liBox" v-for="item in cffpCourseInfos" :key="item.fileId" @click="goDetail(item)">
<course-item :thumbnailPath="item.displayImage" :title="item.fileTitle" :summaryBox="item.fileSynopsis" :dataList="{coursePrice:item.coursePrice,salesNumber:item.salesNumber}" ></course-item>
</view>
<view class="productBox">
<view class="productTitle">
<view class="titleTxt">
<text style="font-size: 30rpx;font-weight: 500;">推荐产品</text>
<text class="more" @click="goToCourselist()">更多 <text class="iconfont icon-youjiantou"></text> </text>
</view>
</view>
<view class="productList" v-if="cffpCourseInfos.length>0">
<view class="productListBox">
<view class="productListItem" v-for="item in cffpCourseInfos" :key="item.fileId" @click="goDetail(item)">
<view class="top">
<image class="productImg" :src="item.displayImage" alt="" mode="widthFix"></image>
<view class="productDesBox">
{{item.fileSynopsis}}
</view>
</view>
<view class="bottom" style="text-align: left !important;">
<view class="one">
{{item.fileTitle}}
</view>
<view class="two">
<text class="price" style="">{{item.coursePrice}}</text>
<text v-if="Number(item.salesNumber)>0" class="num" >已售{{item.salesNumber}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="productEmpty" v-else>
暂无数据
</view>
</view>
<tabBar :currentPage="currentPage" :infoTotal="infoTotal"></tabBar>
</view>
......@@ -147,14 +166,175 @@
</script>
<style lang="scss" scoped>
.ulBox{
flex-direction: column;
}
.liBox{
background-color: #fff;
border-radius: 20rpx;
margin-bottom: 10rpx;
padding: 10rpx;
.container{
padding-bottom: 50rpx;
.productBox {
background-color: #fff;
margin-top: 15rpx;
box-sizing: border-box;
margin-bottom: 100rpx;
.productTitle {
border-bottom: 1rpx solid rgba(238, 238, 238, 1);
padding-bottom: 10rpx;
.titleTxt {
padding: 15rpx 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.more {
font-size: 26rpx;
color: rgba(84, 84, 84, 1);
.icon-youjiantou {
font-size: 26rpx;
}
}
}
.productList {
width: 100%;
box-sizing: border-box;
.productListBox {
padding: 30rpx;
display: grid;
/* 默认两列,固定宽度 */
grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
gap: 30rpx;
justify-content: center;
.productListItem {
width: 100%;
max-width: 350rpx; /* 设置最大宽度 */
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
margin: 0 auto; /* 居中显示 */
.top {
width: 100%;
position: relative;
border-radius: 20rpx;
overflow: hidden;
/* 确保图片容器有固定宽高比 */
&::before {
content: "";
display: block;
padding-top: 100%; /* 1:1 宽高比 */
}
.productImg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.productDesBox {
box-sizing: border-box;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 0 15rpx;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.1);
border-radius: 0 0 20rpx 20rpx;
font-size: 24rpx;
color: #fff;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* 关键修改:添加精确的高度计算 */
max-height: calc(2 * 1.4 * 24rpx); /* 2行 × 行高 × 字体大小 */
line-height: 1.5;
/* 确保在Firefox等浏览器也有效 */
display: -moz-box;
-moz-box-orient: vertical;
-moz-line-clamp: 2;
}
}
.bottom {
width: 100%;
box-sizing: border-box;
padding: 10rpx 0;
.one {
font-size: 27rpx;
margin-bottom: 5rpx;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.two {
display: flex;
justify-content: space-between;
align-items: center;
.price {
font-size: 28rpx;
color: rgba(32, 39, 155, 1);
}
.num {
font-size: 24rpx;
color: rgba(166, 166, 166, 1);
}
}
}
}
}
}
/* iPad竖屏和小屏幕平板 */
@media (min-width: 768px) and (max-width: 1023px) {
.productList .productListBox {
grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
gap: 30rpx;
}
}
/* iPad横屏和大屏幕平板 */
@media (min-width: 1024px) and (max-width: 1279px) {
.productList .productListBox {
grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
gap: 30rpx;
}
}
/* 电脑端 */
@media (min-width: 1280px) {
.productList .productListBox {
grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
gap: 30rpx;
}
}
.productEmpty {
color: rgba(166, 166, 166, 1);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30rpx 0;
font-size: 28rpx;
}
}
.statusBox{
padding: 30rpx 0;
......@@ -210,29 +390,7 @@
}
}
}
.course_content{
background: #fff;
position: relative;
padding: 0 30rpx 100rpx 30rpx;
.tag{
padding: 20rpx;
display: flex;
justify-content: space-between;
h4{
// margin-left: 20rpx;
}
}
.tag:before{
position: absolute;
left: 20rpx;
top: 20rpx;
display: inline-block;
content: '';
width: 2px;
height: 16px;
background-color: #F15A1F;
border-radius: 2px;
}
}
}
</style>
<template>
<view class="content">
<!-- #ifdef APP -->
<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="top: 10rpx;"></text>
<!-- #endif -->
<view class="header">
<view class="header-box">
<view class="header-box-img" >
......@@ -40,7 +43,7 @@
companyType : companyInfo.companyType,
companyFullName : companyInfo.companyFullName,
appName : companyInfo.appName,
companyLogo : '../../../static/myteam/logo.png'
companyLogo : '../../../static/logo2.png'
}
},
created() {
......@@ -53,14 +56,14 @@
if(this.companyType == '1'){
this.companyLogo='../../../static/myteam/Group1633.png';
}else if(this.companyType == '2'){
this.companyLogo='../../../static/myteam/logo.png'
this.companyLogo='../../../static/logo2.png'
}
},
onShow() {
if(this.companyType == '1'){
this.companyLogo='../../../static/myteam/Group1633.png';
}else if(this.companyType == '2'){
this.companyLogo='../../../static/myteam/logo.png'
this.companyLogo='../../../static/logo2.png'
}
},
methods:{
......@@ -113,19 +116,10 @@
text-align: center;
padding: 50rpx;
}
// .header-box{
// height: 300rpx;
// margin: 0 50rpx;
// display: flex;
// border-bottom: 1px solid #E6E6E6;
// }
.header-box-img{
width: 124rpx;
height: 124rpx;
margin: 90rpx auto 45rpx auto;
//background: url({{this.companyLogo}});
//background: url('../../../static/myteam/logo.png');
background-size: auto 100%;
}
</style>
\ No newline at end of file
<template>
<view class="container">
<!-- #ifdef APP -->
<view class="backArrow">
<text class="iconfont icon-youjiantou zuojiantou" style="left: 5rpx;" @click="goBack()"></text>
<text style="font-size: 30rpx;">帮助中心</text>
</view>
<!-- #endif -->
<view class="filterBox">
<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
<view
class="scroll-view-item_H"
v-for="item in tabList"
:key="item.id"
:class="{active:item.id == currentTab }"
@click="changeTab(item)"
>
{{item.title}}
</view>
</scroll-view>
</view>
<view class="questionsBox">
<view class="questionItem" v-for="item in newQuestionData" :key="item.id">
<view class="" >
<view class="itemTit">
<text class="iconfont myIcon" :class="item.icon" ></text>
{{item.category}}
</view>
<view class="itemQuestion" v-for="(question, index) in item.questions" :key="index">
<view class="Q">
Q:{{question.Q}}
</view>
<view class="A" v-if="question.isMore">
<view class="">
A:
</view>
<view class="" v-for="(a, index1) in question.A" :key="index1">
{{a}}
</view>
</view>
<view class="A" v-else>
A:{{question.A}}
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import questionsData from "@/util/questions";
export default {
data() {
return {
tabList:[
{title:'关于团队',id: '1'},
{title:'关于订单',id: '2'},
{title:'关于佣金',id: '3'},
],
currentTab:'1',
// questionsData:[]
}
},
computed:{
newQuestionData(){
let result = questionsData.filter(item=>item.id==this.currentTab)
return result
}
},
methods:{
changeTab(item){
this.currentTab = item.id
},
goBack(){
uni.navigateBack({
delta: 1
});
},
},
}
</script>
<style lang="scss" scoped>
.container{
padding-bottom: 50rpx;
.backArrow{
box-sizing: border-box;
display: flex;
height: 100rpx;
justify-content: space-between;
align-items: center;
position: relative;
width: 100%;
color: #333333;
background-color: #fff;
text:nth-child(2){
width: 100%;
text-align: center;
position: absolute;
}
}
.filterBox{
box-sizing: border-box;
width: 100%;
background-color: #fff;
padding: 20rpx 60rpx 0 60rpx;
display: flex;
align-items: center;
justify-content: space-between;
.scroll-view_H {
white-space: nowrap;
width: 100%;
box-sizing: border-box;
}
.scroll-view-item {
text-align: center;
font-size: 36rpx;
}
.scroll-view-item_H {
margin-bottom: 20rpx;
display: inline-block;
margin-right: 20rpx;
text-align: center;
font-size: 27rpx;
padding: 10rpx 20rpx;
color: rgba(46, 38, 29, 1);
&.active{
color: rgba(32, 39, 155, 1);
position: relative;
}
&.active::before{
display: block;
content: "";
position: absolute;
left: 50%;
transform: translate(-50%);
bottom: -3%;
width: 50%;
// height: 1rpx;
border: 1rpx solid rgba(32, 39, 155, 1);
border-radius: 5rpx;
}
}
.scroll-view-item_H:last-child{
margin-right: 0rpx;
}
.scrollBtn:last-child{
margin-right: 0rpx;
}
.filterItem{
background: #f7f7f7;
font-size: 27rpx;
padding: 10rpx;
color: rgba(46, 38, 29, 1);
border-radius: 8rpx;
&.active{
background: rgba(32, 39, 155, 1);
color: #fff;
}
}
}
.questionsBox{
padding: 20rpx;
box-sizing: border-box;
.questionItem{
box-sizing: border-box;
margin-bottom: 20rpx;
width: 100%;
background-color: #fff;
border-radius: 10rpx;
padding: 20rpx;
.itemTit{
font-size: 30rpx;
font-weight: 500;
.myIcon{
font-size: 32rpx;
color: rgba(32, 39, 155, 1);
}
}
.itemQuestion{
padding: 20rpx 0;
border-bottom: 1rpx solid #f2f2f2;
.Q{
margin-bottom: 10rpx;
font-size: 28rpx;
}
.A{
font-size: 26rpx;
color: #666;
line-height: 1.5;
}
}
.itemQuestion:last-child{
border: none;
}
}
}
}
</style>
\ No newline at end of file
<template>
<view style="display: flex;flex-direction: column;">
<!-- #ifdef APP -->
<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="top: 10rpx;"></text>
<!-- #endif -->
<view class="">
<menu-list :menuList="minorMenuLists"></menu-list>
</view>
......@@ -29,15 +32,15 @@
isTips: false,
isType: 'text'
},
{
title: '重置密码',
icon: '',
link: '/pages/personalCenter/accountoperation/resetpassword',
isOpen: true,
isShow: true,
isTips: false,
isType: 'radio'
},
// {
// title: '重置密码',
// icon: '',
// link: '/pages/personalCenter/accountoperation/resetpassword',
// isOpen: true,
// isShow: true,
// isTips: false,
// isType: 'radio'
// },
{
title: '注销账号',
icon: '',
......
<template>
<view class="container">
<!-- #ifdef APP -->
<view class="top">
<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()"></text>
<text>注销账号</text>
</view>
<view class="" style="text-align: center;font-size: 40rpx;">
<!-- #endif -->
<view class="mobileBox" >
<text>注销手机号:</text>
<text style="color: #20269B;">{{hideMoblie(mobile)}}</text>
</view>
......@@ -78,6 +81,7 @@
<style lang="scss" scoped>
.container{
padding: 0 20rpx;
background-color: #f7f7f7;
}
.top{
display: flex;
......@@ -86,7 +90,7 @@
align-items: center;
position: relative;
width: 100%;
margin: 0 auto 60rpx auto;
// margin: 0 auto 60rpx auto;
.zuojiantou{
display: inline-block;
transform: rotate(180deg);
......@@ -100,6 +104,11 @@
position: absolute;
}
}
.mobileBox{
text-align: center;
font-size: 40rpx;
padding-top: 40rpx;
}
.tips{
color: #666666;
li{
......
<template>
<view style="display: flex;flex-direction: column;">
<!-- #ifdef APP -->
<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="top: 10rpx;"></text>
<!-- #endif -->
<view>
<menu-list v-if="menuList != 'undefined '" :menuList="minorMenuLists"></menu-list>
</view>
......
......@@ -91,6 +91,7 @@
.content-box-title {
flex: 1;
font-size: 28rpx;
text-align: center;
}
.content-sam-box{
background-color: #fff;
......
......@@ -246,20 +246,6 @@
delete this.CffpOrgInfoReqVO.sortType
this.getqueryTeamAchievement()
}
// 以前的写法
// this.teListsort = !this.teListsort
// this.dataList.sort((a, b) => {
// //排序基于的数据
// if (this.teListsort == false) {
// return b.courseIncome - a.courseIncome;
// } else {
// return b.coursePrice - a.coursePrice;
// }
// })
// this.dataList.sort((a, b) => {
// return b.key - a.key;
// })
},
mountdchange(e) {
this.montdindex = e.detail.value
......
<template>
<view class="content">
<!-- #ifdef APP -->
<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="left: 20rpx;"></text>
<!-- #endif -->
<view class="header">
<view class="headportrait" @click="uploadAvatar()">
<image :src="optionForm.headPicture ? optionForm.headPicture :companyLogo" mode="widthFix"></image>
......@@ -53,7 +56,7 @@
// 敏感词列表(可扩展)
bannedWords: ["admin", "test", "root", "password"],
companyType : companyInfo.companyType,
companyLogo : '../../static/myteam/logo.png',
companyLogo : '../../static/logo2.png',
dataForm: {
loginId: "1",
targetType: "5",
......@@ -92,7 +95,7 @@
if(this.companyType == '1'){
this.companyLogo='../../static/myteam/Group1633.png';
}else if(this.companyType == '2'){
this.companyLogo='../../static/myteam/logo.png';
this.companyLogo='../../static/logo2.png';
}
this.optionForm = JSON.parse(options.customerBasicInfo)
},
......
......@@ -141,7 +141,6 @@
<style lang="scss" scoped>
.container{
box-sizing:border-box;
background-color: #f7f7f7;
height: 92.9vh;
padding: 30rpx;
.kuaiBox{
......
<template>
<view class="container">
<view class="top">
<view class="iconfont icon-youjiantou zuojiantou" @click="goBack()">
</view>
<!-- #ifdef APP -->
<view class="iconfont icon-youjiantou zuojiantou" @click="goBack()"></view>
<view class="commonTitle" style="width: 60%;text-align: right;">
消息列表
</view>
<!-- #endif -->
<view class="clear" @click="oneKeyRead()" >
<text class="iconfont icon-saoba myIcon" ></text>
<text>一键已读</text>
......@@ -131,7 +133,12 @@
.top{
display: flex;
height: 100rpx;
/* #ifdef APP */
justify-content: space-between;
/* #endif */
/* #ifdef H5 */
justify-content: flex-end;
/* #endif */
align-items: center;
position: relative;
background: #fff;
......
<template>
<!-- #ifdef APP -->
<view class="top">
<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()"></text>
<text class="commonTitle">消息详情</text>
</view>
<!-- #endif -->
<view class="announcement_detail_wrapper container">
<view class="content">
<view class="title">
......@@ -84,10 +87,11 @@
font-size: 24rpx;
}
.content{
margin-top: 20rpx;
// margin-top: 20rpx;
padding: 20rpx;
background: #fff;
word-break: break-word;
border-radius: 10rpx;
}
}
</style>
\ No newline at end of file
<template>
<view class="container">
<!-- #ifdef APP -->
<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="top: 20rpx;"></text>
<!-- #endif -->
<view class="top">
<view>
可兑换
......@@ -23,7 +26,7 @@
<text>{{noTaxAmount}}</text>
</view>
</view>
<view class="content_wrapper">
<view class="content_wrapper tixian">
<h4>提现到</h4>
<view class="paymentItem" @click="selectPaymentMethod(2)">
<view>
......@@ -323,10 +326,16 @@
</script>
<style lang="scss" scoped>
.container{
box-sizing: border-box;
padding: 20rpx;
}
.top{
width: 100%;
text-align: center;
padding: 20rpx 0;
background-color: #fff;
border-radius: 10rpx;
view:nth-child(1){
font-size: 36rpx;
color: #666;
......@@ -338,6 +347,7 @@
}
}
.content_wrapper{
border-radius: 10rpx;
background: #fff;
margin: 20rpx auto;
padding:0 30rpx;
......@@ -420,4 +430,7 @@
}
}
}
.tixian{
padding: 20rpx;
}
</style>
\ No newline at end of file
<template>
<view>
<view class="wrapper">
<!-- #ifdef APP -->
<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="top: 30rpx;"></text>
<!-- #endif -->
<view class="banner">
<!--头部技术支持组件-->
<!-- <commonHead></commonHead> -->
......
<template>
<view class="wrapper">
<!-- #ifdef APP -->
<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="top: 30rpx;"></text>
<!-- #endif -->
<view class="banner">
<!--头部技术支持组件-->
<!-- <commonHead></commonHead> -->
......
<template>
<!-- 已关注公众号用户 -->
<view class="content">
<!-- #ifdef APP -->
<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="top: 30rpx;"></text>
<!-- #endif -->
<view class="banner">
<image src="/static/images/policyIrrBanner.png" mode="widthFix"></image>
<!-- 使用说明 -->
......
......@@ -55,6 +55,48 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe116;</span>
<div class="name">客服</div>
<div class="code-name">&amp;#xe116;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xecc0;</span>
<div class="name">双右箭头</div>
<div class="code-name">&amp;#xecc0;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe641;</span>
<div class="name">雷电</div>
<div class="code-name">&amp;#xe641;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe610;</span>
<div class="name">信息</div>
<div class="code-name">&amp;#xe610;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe759;</span>
<div class="name">搜索</div>
<div class="code-name">&amp;#xe759;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6be;</span>
<div class="name">使用教程</div>
<div class="code-name">&amp;#xe6be;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe65e;</span>
<div class="name">公司</div>
<div class="code-name">&amp;#xe65e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe115;</span>
<div class="name">下箭头</div>
<div class="code-name">&amp;#xe115;</div>
......@@ -228,9 +270,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1749031328434') format('woff2'),
url('iconfont.woff?t=1749031328434') format('woff'),
url('iconfont.ttf?t=1749031328434') format('truetype');
src: url('iconfont.woff2?t=1750649292857') format('woff2'),
url('iconfont.woff?t=1750649292857') format('woff'),
url('iconfont.ttf?t=1750649292857') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
......@@ -257,6 +299,69 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-kefu"></span>
<div class="name">
客服
</div>
<div class="code-name">.icon-kefu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shuangyoujiantou"></span>
<div class="name">
双右箭头
</div>
<div class="code-name">.icon-shuangyoujiantou
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-leidian"></span>
<div class="name">
雷电
</div>
<div class="code-name">.icon-leidian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xinxi"></span>
<div class="name">
信息
</div>
<div class="code-name">.icon-xinxi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-sousuo"></span>
<div class="name">
搜索
</div>
<div class="code-name">.icon-sousuo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shiyongjiaocheng"></span>
<div class="name">
使用教程
</div>
<div class="code-name">.icon-shiyongjiaocheng
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gongsi"></span>
<div class="name">
公司
</div>
<div class="code-name">.icon-gongsi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiajiantou"></span>
<div class="name">
下箭头
......@@ -519,6 +624,62 @@
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-kefu"></use>
</svg>
<div class="name">客服</div>
<div class="code-name">#icon-kefu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shuangyoujiantou"></use>
</svg>
<div class="name">双右箭头</div>
<div class="code-name">#icon-shuangyoujiantou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-leidian"></use>
</svg>
<div class="name">雷电</div>
<div class="code-name">#icon-leidian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xinxi"></use>
</svg>
<div class="name">信息</div>
<div class="code-name">#icon-xinxi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-sousuo"></use>
</svg>
<div class="name">搜索</div>
<div class="code-name">#icon-sousuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shiyongjiaocheng"></use>
</svg>
<div class="name">使用教程</div>
<div class="code-name">#icon-shiyongjiaocheng</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gongsi"></use>
</svg>
<div class="name">公司</div>
<div class="code-name">#icon-gongsi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiajiantou"></use>
</svg>
<div class="name">下箭头</div>
......
@font-face {
font-family: "iconfont"; /* Project id 4933433 */
src: url('iconfont.woff2?t=1749031328434') format('woff2'),
url('iconfont.woff?t=1749031328434') format('woff'),
url('iconfont.ttf?t=1749031328434') format('truetype');
src: url('iconfont.woff2?t=1750649292857') format('woff2'),
url('iconfont.woff?t=1750649292857') format('woff'),
url('iconfont.ttf?t=1750649292857') format('truetype');
}
.iconfont {
......@@ -13,6 +13,34 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-kefu:before {
content: "\e116";
}
.icon-shuangyoujiantou:before {
content: "\ecc0";
}
.icon-leidian:before {
content: "\e641";
}
.icon-xinxi:before {
content: "\e610";
}
.icon-sousuo:before {
content: "\e759";
}
.icon-shiyongjiaocheng:before {
content: "\e6be";
}
.icon-gongsi:before {
content: "\e65e";
}
.icon-xiajiantou:before {
content: "\e115";
}
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -6,6 +6,55 @@
"description": "",
"glyphs": [
{
"icon_id": "518189",
"name": "客服",
"font_class": "kefu",
"unicode": "e116",
"unicode_decimal": 57622
},
{
"icon_id": "6999657",
"name": "双右箭头",
"font_class": "shuangyoujiantou",
"unicode": "ecc0",
"unicode_decimal": 60608
},
{
"icon_id": "39934155",
"name": "雷电",
"font_class": "leidian",
"unicode": "e641",
"unicode_decimal": 58945
},
{
"icon_id": "4550364",
"name": "信息",
"font_class": "xinxi",
"unicode": "e610",
"unicode_decimal": 58896
},
{
"icon_id": "4933408",
"name": "搜索",
"font_class": "sousuo",
"unicode": "e759",
"unicode_decimal": 59225
},
{
"icon_id": "29085756",
"name": "使用教程",
"font_class": "shiyongjiaocheng",
"unicode": "e6be",
"unicode_decimal": 59070
},
{
"icon_id": "29941060",
"name": "公司",
"font_class": "gongsi",
"unicode": "e65e",
"unicode_decimal": 58974
},
{
"icon_id": "9021520",
"name": "下箭头",
"font_class": "xiajiantou",
......
......@@ -48,38 +48,31 @@
return {
bottomData: [{
text: '首页',
icon: 'iconfont icon-shouye',
icon: 'iconfont icon-shouye16',
name: 'home',
link:'/pages/index/index'
},
{
text: '搜索',
icon: 'iconfont icon-sousuo',
name: 'searh',
link:'/pages/courselist/courselist'
link:'/pages/index/index',
tabbar:true
},
// {
// icon: 'iconfont icon-sousuo',
// name: 'searh',
// link:'/pages/courselist/courselist'
// },
{
text: '我的',
icon: 'iconfont icon-wode',
icon: 'iconfont icon-gerenzhongxin',
name: 'user',
link:'/pages/personalCenter/personalCenter'
link:'/pages/personalCenter/personalCenter',
tabbar:true
},
{
text: '消息',
icon: 'iconfont icon-xiaoxi',
name: 'news',
link:'/pages/systemMsg/system_msg'
link:'/pages/systemMsg/system_msg',
tabbar:false
},
// {
// text: '百度',
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
// name: 'copy'
// },
// {
// text: '其他',
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
// name: 'more'
// }
]
}
},
......@@ -97,10 +90,7 @@
* 选择内容
*/
select(item, index) {
this.$emit('select', {
item,
index
})
this.$emit('select',item )
this.close()
},
......@@ -117,8 +107,8 @@
</script>
<style lang="scss" >
.uni-popup-share {
background-color: #F4F2F3;
// background-color: #fff;
// background-color: #F4F2F3;
background-color: #fff;
border-top-left-radius: 11rpx;
border-top-right-radius: 11rpx;
}
......
## 1.2.9(2025-04-14)
- 修复: 下拉筛选中 toISOString() 引发的时区问题
## 1.2.8(2024-10-15)
- 修复 运行到抖音小程序上出现的问题
## 1.2.7(2024-10-15)
- 修复 微信小程序中的getSystemInfo警告
## 1.2.4(2023-12-19)
- 修复 uni-tr只有一列时minWidth计算错误,列变化实时计算更新
## 1.2.3(2023-03-28)
- 修复 在vue3模式下可能会出现错误的问题
## 1.2.2(2022-11-29)
- 优化 主题样式
## 1.2.1(2022-06-06)
- 修复 微信小程序存在无使用组件的问题
## 1.2.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-table](https://uniapp.dcloud.io/component/uniui/uni-table)
## 1.1.0(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.7(2021-07-08)
- 新增 uni-th 支持 date 日期筛选范围
## 1.0.6(2021-07-05)
- 新增 uni-th 支持 range 筛选范围
## 1.0.5(2021-06-28)
- 新增 uni-th 筛选功能
## 1.0.4(2021-05-12)
- 新增 示例地址
- 修复 示例项目缺少组件的Bug
## 1.0.3(2021-04-16)
- 新增 sortable 属性,是否开启单列排序
- 优化 表格多选逻辑
## 1.0.2(2021-03-22)
- uni-tr 添加 disabled 属性,用于 type=selection 时,设置某行是否可由全选按钮控制
## 1.0.1(2021-02-05)
- 调整为uni_modules目录规范
<template>
<!-- #ifdef H5 -->
<tbody>
<slot></slot>
</tbody>
<!-- #endif -->
<!-- #ifndef H5 -->
<view><slot></slot></view>
<!-- #endif -->
</template>
<script>
export default {
name: 'uniBody',
options: {
// #ifdef MP-TOUTIAO
virtualHost: false,
// #endif
// #ifndef MP-TOUTIAO
virtualHost: true
// #endif
},
data() {
return {
}
},
created() {},
methods: {}
}
</script>
<style>
</style>
<template>
<!-- #ifdef H5 -->
<td class="uni-table-td" :rowspan="rowspan" :colspan="colspan" :class="{'table--border':border}" :style="{width:width + 'px','text-align':align}">
<slot></slot>
</td>
<!-- #endif -->
<!-- #ifndef H5 -->
<!-- :class="{'table--border':border}" -->
<view class="uni-table-td" :class="{'table--border':border}" :style="{width:width + 'px','text-align':align}">
<slot></slot>
</view>
<!-- #endif -->
</template>
<script>
/**
* Td 单元格
* @description 表格中的标准单元格组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=3270
* @property {Number} align = [left|center|right] 单元格对齐方式
*/
export default {
name: 'uniTd',
options: {
// #ifdef MP-TOUTIAO
virtualHost: false,
// #endif
// #ifndef MP-TOUTIAO
virtualHost: true
// #endif
},
props: {
width: {
type: [String, Number],
default: ''
},
align: {
type: String,
default: 'left'
},
rowspan: {
type: [Number,String],
default: 1
},
colspan: {
type: [Number,String],
default: 1
}
},
data() {
return {
border: false
};
},
created() {
this.root = this.getTable()
this.border = this.root.border
},
methods: {
/**
* 获取父元素实例
*/
getTable() {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== 'uniTable') {
parent = parent.$parent;
if (!parent) return false;
parentName = parent.$options.name;
}
return parent;
},
}
}
</script>
<style lang="scss">
$border-color:#EBEEF5;
.uni-table-td {
display: table-cell;
padding: 8px 10px;
font-size: 14px;
border-bottom: 1px $border-color solid;
font-weight: 400;
color: #606266;
line-height: 23px;
box-sizing: border-box;
}
.table--border {
border-right: 1px $border-color solid;
}
</style>
<template>
<!-- #ifdef H5 -->
<th :rowspan="rowspan" :colspan="colspan" class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: customWidth + 'px', 'text-align': align }">
<view class="uni-table-th-row">
<view class="uni-table-th-content" :style="{ 'justify-content': contentAlign }" @click="sort">
<slot></slot>
<view v-if="sortable" class="arrow-box">
<text class="arrow up" :class="{ active: ascending }" @click.stop="ascendingFn"></text>
<text class="arrow down" :class="{ active: descending }" @click.stop="descendingFn"></text>
</view>
</view>
<dropdown v-if="filterType || filterData.length" :filterDefaultValue="filterDefaultValue" :filterData="filterData" :filterType="filterType" @change="ondropdown"></dropdown>
</view>
</th>
<!-- #endif -->
<!-- #ifndef H5 -->
<view class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: customWidth + 'px', 'text-align': align }"><slot></slot></view>
<!-- #endif -->
</template>
<script>
// #ifdef H5
import dropdown from './filter-dropdown.vue'
// #endif
/**
* Th 表头
* @description 表格内的表头单元格组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=3270
* @property {Number | String} width 单元格宽度(支持纯数字、携带单位px或rpx)
* @property {Boolean} sortable 是否启用排序
* @property {Number} align = [left|center|right] 单元格对齐方式
* @value left 单元格文字左侧对齐
* @value center 单元格文字居中
* @value right 单元格文字右侧对齐
* @property {Array} filterData 筛选数据
* @property {String} filterType [search|select] 筛选类型
* @value search 关键字搜素
* @value select 条件选择
* @event {Function} sort-change 排序触发事件
*/
export default {
name: 'uniTh',
options: {
// #ifdef MP-TOUTIAO
virtualHost: false,
// #endif
// #ifndef MP-TOUTIAO
virtualHost: true
// #endif
},
components: {
// #ifdef H5
dropdown
// #endif
},
emits:['sort-change','filter-change'],
props: {
width: {
type: [String, Number],
default: ''
},
align: {
type: String,
default: 'left'
},
rowspan: {
type: [Number, String],
default: 1
},
colspan: {
type: [Number, String],
default: 1
},
sortable: {
type: Boolean,
default: false
},
filterType: {
type: String,
default: ""
},
filterData: {
type: Array,
default () {
return []
}
},
filterDefaultValue: {
type: [Array,String],
default () {
return ""
}
}
},
data() {
return {
border: false,
ascending: false,
descending: false
}
},
computed: {
// 根据props中的width属性 自动匹配当前th的宽度(px)
customWidth(){
if(typeof this.width === 'number'){
return this.width
} else if(typeof this.width === 'string') {
let regexHaveUnitPx = new RegExp(/^[1-9][0-9]*px$/g)
let regexHaveUnitRpx = new RegExp(/^[1-9][0-9]*rpx$/g)
let regexHaveNotUnit = new RegExp(/^[1-9][0-9]*$/g)
if (this.width.match(regexHaveUnitPx) !== null) { // 携带了 px
return this.width.replace('px', '')
} else if (this.width.match(regexHaveUnitRpx) !== null) { // 携带了 rpx
let numberRpx = Number(this.width.replace('rpx', ''))
// #ifdef MP-WEIXIN
let widthCoe = uni.getWindowInfo().screenWidth / 750
// #endif
// #ifndef MP-WEIXIN
let widthCoe = uni.getSystemInfoSync().screenWidth / 750
// #endif
return Math.round(numberRpx * widthCoe)
} else if (this.width.match(regexHaveNotUnit) !== null) { // 未携带 rpx或px 的纯数字 String
return this.width
} else { // 不符合格式
return ''
}
} else {
return ''
}
},
contentAlign() {
let align = 'left'
switch (this.align) {
case 'left':
align = 'flex-start'
break
case 'center':
align = 'center'
break
case 'right':
align = 'flex-end'
break
}
return align
}
},
created() {
this.root = this.getTable('uniTable')
this.rootTr = this.getTable('uniTr')
this.rootTr.minWidthUpdate(this.customWidth ? this.customWidth : 140)
this.border = this.root.border
this.root.thChildren.push(this)
},
methods: {
sort() {
if (!this.sortable) return
this.clearOther()
if (!this.ascending && !this.descending) {
this.ascending = true
this.$emit('sort-change', { order: 'ascending' })
return
}
if (this.ascending && !this.descending) {
this.ascending = false
this.descending = true
this.$emit('sort-change', { order: 'descending' })
return
}
if (!this.ascending && this.descending) {
this.ascending = false
this.descending = false
this.$emit('sort-change', { order: null })
}
},
ascendingFn() {
this.clearOther()
this.ascending = !this.ascending
this.descending = false
this.$emit('sort-change', { order: this.ascending ? 'ascending' : null })
},
descendingFn() {
this.clearOther()
this.descending = !this.descending
this.ascending = false
this.$emit('sort-change', { order: this.descending ? 'descending' : null })
},
clearOther() {
this.root.thChildren.map(item => {
if (item !== this) {
item.ascending = false
item.descending = false
}
return item
})
},
ondropdown(e) {
this.$emit("filter-change", e)
},
/**
* 获取父元素实例
*/
getTable(name) {
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">
$border-color: #ebeef5;
$uni-primary: #007aff !default;
.uni-table-th {
padding: 12px 10px;
/* #ifndef APP-NVUE */
display: table-cell;
box-sizing: border-box;
/* #endif */
font-size: 14px;
font-weight: bold;
color: #909399;
border-bottom: 1px $border-color solid;
}
.uni-table-th-row {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.table--border {
border-right: 1px $border-color solid;
}
.uni-table-th-content {
display: flex;
align-items: center;
flex: 1;
}
.arrow-box {
}
.arrow {
display: block;
position: relative;
width: 10px;
height: 8px;
// border: 1px red solid;
left: 5px;
overflow: hidden;
cursor: pointer;
}
.down {
top: 3px;
::after {
content: '';
width: 8px;
height: 8px;
position: absolute;
left: 2px;
top: -5px;
transform: rotate(45deg);
background-color: #ccc;
}
&.active {
::after {
background-color: $uni-primary;
}
}
}
.up {
::after {
content: '';
width: 8px;
height: 8px;
position: absolute;
left: 2px;
top: 5px;
transform: rotate(45deg);
background-color: #ccc;
}
&.active {
::after {
background-color: $uni-primary;
}
}
}
</style>
<template>
<!-- #ifdef H5 -->
<thead class="uni-table-thead">
<tr class="uni-table-tr">
<th :rowspan="rowspan" colspan="1" class="checkbox" :class="{ 'tr-table--border': border }">
<table-checkbox :indeterminate="indeterminate" :checked="checked"
@checkboxSelected="checkboxSelected"></table-checkbox>
</th>
</tr>
<slot></slot>
</thead>
<!-- #endif -->
<!-- #ifndef H5 -->
<view class="uni-table-thead">
<slot></slot>
</view>
<!-- #endif -->
</template>
<script>
import tableCheckbox from '../uni-tr/table-checkbox.vue'
export default {
name: 'uniThead',
components: {
tableCheckbox
},
options: {
// #ifdef MP-TOUTIAO
virtualHost: false,
// #endif
// #ifndef MP-TOUTIAO
virtualHost: true
// #endif
},
data() {
return {
border: false,
selection: false,
rowspan: 1,
indeterminate: false,
checked: false
}
},
created() {
this.root = this.getTable()
// #ifdef H5
this.root.theadChildren = this
// #endif
this.border = this.root.border
this.selection = this.root.type
},
methods: {
init(self) {
this.rowspan++
},
checkboxSelected(e) {
this.indeterminate = false
const backIndexData = this.root.backIndexData
const data = this.root.trChildren.filter(v => !v.disabled && v.keyValue)
if (backIndexData.length === data.length) {
this.checked = false
this.root.clearSelection()
} else {
this.checked = true
this.root.selectionAll()
}
},
/**
* 获取父元素实例
*/
getTable(name = 'uniTable') {
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">
$border-color: #ebeef5;
.uni-table-thead {
display: table-header-group;
}
.uni-table-tr {
/* #ifndef APP-NVUE */
display: table-row;
transition: all 0.3s;
box-sizing: border-box;
/* #endif */
border: 1px red solid;
background-color: #fafafa;
}
.checkbox {
padding: 0 8px;
width: 26px;
padding-left: 12px;
/* #ifndef APP-NVUE */
display: table-cell;
vertical-align: middle;
/* #endif */
color: #333;
font-weight: 500;
border-bottom: 1px $border-color solid;
font-size: 14px;
// text-align: center;
}
.tr-table--border {
border-right: 1px $border-color solid;
}
/* #ifndef APP-NVUE */
.uni-table-tr {
::v-deep .uni-table-th {
&.table--border:last-child {
// border-right: none;
}
}
::v-deep .uni-table-td {
&.table--border:last-child {
// border-right: none;
}
}
}
/* #endif */
</style>
<template>
<view class="uni-table-checkbox" @click="selected">
<view v-if="!indeterminate" class="checkbox__inner" :class="{'is-checked':isChecked,'is-disable':isDisabled}">
<view class="checkbox__inner-icon"></view>
</view>
<view v-else class="checkbox__inner checkbox--indeterminate">
<view class="checkbox__inner-icon"></view>
</view>
</view>
</template>
<script>
export default {
name: 'TableCheckbox',
emits:['checkboxSelected'],
props: {
indeterminate: {
type: Boolean,
default: false
},
checked: {
type: [Boolean,String],
default: false
},
disabled: {
type: Boolean,
default: false
},
index: {
type: Number,
default: -1
},
cellData: {
type: Object,
default () {
return {}
}
}
},
watch:{
checked(newVal){
if(typeof this.checked === 'boolean'){
this.isChecked = newVal
}else{
this.isChecked = true
}
},
indeterminate(newVal){
this.isIndeterminate = newVal
}
},
data() {
return {
isChecked: false,
isDisabled: false,
isIndeterminate:false
}
},
created() {
if(typeof this.checked === 'boolean'){
this.isChecked = this.checked
}
this.isDisabled = this.disabled
},
methods: {
selected() {
if (this.isDisabled) return
this.isIndeterminate = false
this.isChecked = !this.isChecked
this.$emit('checkboxSelected', {
checked: this.isChecked,
data: this.cellData
})
}
}
}
</script>
<style lang="scss">
$uni-primary: #007aff !default;
$border-color: #DCDFE6;
$disable:0.4;
.uni-table-checkbox {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
margin: 5px 0;
cursor: pointer;
// 多选样式
.checkbox__inner {
/* #ifndef APP-NVUE */
flex-shrink: 0;
box-sizing: border-box;
/* #endif */
position: relative;
width: 16px;
height: 16px;
border: 1px solid $border-color;
border-radius: 2px;
background-color: #fff;
z-index: 1;
.checkbox__inner-icon {
position: absolute;
/* #ifdef APP-NVUE */
top: 2px;
/* #endif */
/* #ifndef APP-NVUE */
top: 2px;
/* #endif */
left: 5px;
height: 7px;
width: 3px;
border: 1px solid #fff;
border-left: 0;
border-top: 0;
opacity: 0;
transform-origin: center;
transform: rotate(45deg);
box-sizing: content-box;
}
&.checkbox--indeterminate {
border-color: $uni-primary;
background-color: $uni-primary;
.checkbox__inner-icon {
position: absolute;
opacity: 1;
transform: rotate(0deg);
height: 2px;
top: 0;
bottom: 0;
margin: auto;
left: 0px;
right: 0px;
bottom: 0;
width: auto;
border: none;
border-radius: 2px;
transform: scale(0.5);
background-color: #fff;
}
}
&:hover{
border-color: $uni-primary;
}
// 禁用
&.is-disable {
/* #ifdef H5 */
cursor: not-allowed;
/* #endif */
background-color: #F2F6FC;
border-color: $border-color;
}
// 选中
&.is-checked {
border-color: $uni-primary;
background-color: $uni-primary;
.checkbox__inner-icon {
opacity: 1;
transform: rotate(45deg);
}
// 选中禁用
&.is-disable {
opacity: $disable;
}
}
}
}
</style>
<template>
<!-- #ifdef H5 -->
<tr class="uni-table-tr">
<th v-if="selection === 'selection' && ishead" class="checkbox" :class="{ 'tr-table--border': border }">
<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled"
@checkboxSelected="checkboxSelected"></table-checkbox>
</th>
<slot></slot>
<!-- <uni-th class="th-fixed">123</uni-th> -->
</tr>
<!-- #endif -->
<!-- #ifndef H5 -->
<view class="uni-table-tr">
<view v-if="selection === 'selection' " class="checkbox" :class="{ 'tr-table--border': border }">
<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled"
@checkboxSelected="checkboxSelected"></table-checkbox>
</view>
<slot></slot>
</view>
<!-- #endif -->
</template>
<script>
import tableCheckbox from './table-checkbox.vue'
/**
* Tr 表格行组件
* @description 表格行组件 仅包含 th,td 组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=
*/
export default {
name: 'uniTr',
components: {
tableCheckbox
},
props: {
disabled: {
type: Boolean,
default: false
},
keyValue: {
type: [String, Number],
default: ''
}
},
options: {
// #ifdef MP-TOUTIAO
virtualHost: false,
// #endif
// #ifndef MP-TOUTIAO
virtualHost: true
// #endif
},
data() {
return {
value: false,
border: false,
selection: false,
widthThArr: [],
ishead: true,
checked: false,
indeterminate: false
}
},
created() {
this.root = this.getTable()
this.head = this.getTable('uniThead')
if (this.head) {
this.ishead = false
this.head.init(this)
}
this.border = this.root.border
this.selection = this.root.type
this.root.trChildren.push(this)
const rowData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
if (rowData) {
this.rowData = rowData
}
this.root.isNodata()
},
mounted() {
if (this.widthThArr.length > 0) {
const selectionWidth = this.selection === 'selection' ? 50 : 0
this.root.minWidth = Number(this.widthThArr.reduce((a, b) => Number(a) + Number(b))) + selectionWidth;
}
},
// #ifndef VUE3
destroyed() {
const index = this.root.trChildren.findIndex(i => i === this)
this.root.trChildren.splice(index, 1)
this.root.isNodata()
},
// #endif
// #ifdef VUE3
unmounted() {
const index = this.root.trChildren.findIndex(i => i === this)
this.root.trChildren.splice(index, 1)
this.root.isNodata()
},
// #endif
methods: {
minWidthUpdate(width) {
this.widthThArr.push(width)
if (this.widthThArr.length > 0) {
const selectionWidth = this.selection === 'selection' ? 50 : 0;
this.root.minWidth = Number(this.widthThArr.reduce((a, b) => Number(a) + Number(b))) + selectionWidth;
}
},
// 选中
checkboxSelected(e) {
let rootData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
this.checked = e.checked
this.root.check(rootData || this, e.checked, rootData ? this.keyValue : null)
},
change(e) {
this.root.trChildren.forEach(item => {
if (item === this) {
this.root.check(this, e.detail.value.length > 0 ? true : false)
}
})
},
/**
* 获取父元素实例
*/
getTable(name = 'uniTable') {
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">
$border-color: #ebeef5;
.uni-table-tr {
/* #ifndef APP-NVUE */
display: table-row;
transition: all 0.3s;
box-sizing: border-box;
/* #endif */
}
.checkbox {
padding: 0 8px;
width: 26px;
padding-left: 12px;
/* #ifndef APP-NVUE */
display: table-cell;
vertical-align: middle;
/* #endif */
color: #333;
font-weight: 500;
border-bottom: 1px $border-color solid;
font-size: 14px;
// text-align: center;
}
.tr-table--border {
border-right: 1px $border-color solid;
}
/* #ifndef APP-NVUE */
.uni-table-tr {
::v-deep .uni-table-th {
&.table--border:last-child {
// border-right: none;
}
}
::v-deep .uni-table-td {
&.table--border:last-child {
// border-right: none;
}
}
}
/* #endif */
</style>
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