|
@@ -0,0 +1,526 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <image class="topbg" src="https://sg-mmyy-oss.yjfzy.com/sgs/image/20241102/e07b38daf749cb02e9f5ce69c57b44ea.png" mode="scaleToFill"></image>
|
|
|
+ <view class="container-body">
|
|
|
+ <view class="coursebox">
|
|
|
+ <view class="coursebox-info">
|
|
|
+ <view class="status">进行中</view>
|
|
|
+ <!-- <view class="status" style="background-color: #ff4746;">已结束</view> -->
|
|
|
+ <view class="coursebox-name">
|
|
|
+ <text class="more-t">7.明医有话说-杜老师给您讲讲抑郁杜老师给您讲讲抑郁</text>
|
|
|
+ <view class="btn_icon">ID
|
|
|
+ <image src="@/static/images/copy_icon.png" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="coursebox-name">7.明医有话说-杜老师给您讲讲抑郁杜老师给您讲讲抑郁</view> -->
|
|
|
+ <view style="margin-top: 5px;">明医有话说-七天先导课(长期有效,自行选择)简约课程</view>
|
|
|
+ <view class="coursebox-time x-start">
|
|
|
+ <view class="coursebox-time-item" style="margin-right: 14px;">
|
|
|
+ <view>直播时间</view>
|
|
|
+ <view class="coursebox-time-t">2024-08-20 00:00:00-2029-09-30 23:59:59</view>
|
|
|
+ </view>
|
|
|
+ <view class="coursebox-time-item duration">
|
|
|
+ <view>课程时长</view>
|
|
|
+ <view class="coursebox-time-t">12分18秒</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="statistics">
|
|
|
+ <u-tabs :list="list1" :current='current' :scrollable="false" :lineWidth="40" lineColor="#1677ff" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" @click="clickTab"></u-tabs>
|
|
|
+ <u-collapse :border='false' :value='collapseValue' @change="changeCollapse" v-if="current == 0">
|
|
|
+ <u-collapse-item name="live">
|
|
|
+ <view slot="title" class="statistics-title">直播数据<text class="statistics-title-tip">2分钟自动更新</text></view>
|
|
|
+ <text slot="value" class="statistics-slot-title">{{collapseValue.includes('live')?'收回':'展开'}}</text>
|
|
|
+ <text slot="right-icon">
|
|
|
+ <u-icon name="arrow-right" color="#1677ff" size="12"></u-icon>
|
|
|
+ </text>
|
|
|
+ <view class="collapse-content x-ac">
|
|
|
+ <view class="collapse-content-item">
|
|
|
+ <view class="collapse-content-title">观看人数</view>
|
|
|
+ <view class="collapse-content-num"><text>0</text>人</view>
|
|
|
+ </view>
|
|
|
+ <view class="collapse-content-item">
|
|
|
+ <view class="collapse-content-title">完播人数</view>
|
|
|
+ <view class="collapse-content-num"><text>0</text>人</view>
|
|
|
+ </view>
|
|
|
+ <view class="collapse-content-item">
|
|
|
+ <view class="collapse-content-title">完播率</view>
|
|
|
+ <view class="collapse-content-num"><text>0</text>%</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-collapse-item>
|
|
|
+ <u-collapse-item name="questions">
|
|
|
+ <text slot="title" class="statistics-title">答题数据<text class="statistics-title-tip">2分钟自动更新</text></text>
|
|
|
+ <text slot="value" class="statistics-slot-title">{{collapseValue.includes('questions')?'收回':'展开'}}</text>
|
|
|
+ <text slot="right-icon">
|
|
|
+ <u-icon name="arrow-right" color="#1677ff" size="12"></u-icon>
|
|
|
+ </text>
|
|
|
+ <view class="collapse-content">
|
|
|
+ <view class="x-ac">
|
|
|
+ <view class="collapse-content-item">
|
|
|
+ <view class="collapse-content-title">答题人数</view>
|
|
|
+ <view class="collapse-content-num"><text>0</text>人</view>
|
|
|
+ </view>
|
|
|
+ <view class="collapse-content-item">
|
|
|
+ <view class="collapse-content-title">正确人数</view>
|
|
|
+ <view class="collapse-content-num"><text>0</text>人</view>
|
|
|
+ </view>
|
|
|
+ <view class="collapse-content-item">
|
|
|
+ <view class="collapse-content-title">答题红包数</view>
|
|
|
+ <view class="collapse-content-num"><text>0</text>个</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="redenvelope x-bc">
|
|
|
+ <view class="x-f">
|
|
|
+ <image src="@/static/images/redenvelope.png" mode="aspectFill"></image>
|
|
|
+ <text>答题红包金额</text>
|
|
|
+ </view>
|
|
|
+ <view class="collapse-content-num"><text>0.00</text>元</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-collapse-item>
|
|
|
+ <u-collapse-item name="funnelplot">
|
|
|
+ <text slot="title" class="statistics-title">转化漏斗图<text class="statistics-title-tip">2分钟自动更新</text></text>
|
|
|
+ <text slot="value" class="statistics-slot-title">{{collapseValue.includes('funnelplot')?'收回':'展开'}}</text>
|
|
|
+ <text slot="right-icon">
|
|
|
+ <u-icon name="arrow-right" color="#1677ff" size="12"></u-icon>
|
|
|
+ </text>
|
|
|
+ <view>
|
|
|
+ ddd
|
|
|
+ </view>
|
|
|
+ </u-collapse-item>
|
|
|
+ </u-collapse>
|
|
|
+ </view>
|
|
|
+ <!-- 参与记录 -->
|
|
|
+ <view>
|
|
|
+ <view class="participate-search">
|
|
|
+ <view class="x-bc">
|
|
|
+ <u-search placeholder="会员ID、昵称、姓名、手机" v-model="keyword" :showAction="false" height="30px"></u-search>
|
|
|
+ <u-button type="primary" class="refresh" color='#1677ff' size="small" :disabled="disabled" text="刷新"></u-button>
|
|
|
+ </view>
|
|
|
+ <view class="x-bc">
|
|
|
+ <u-tabs :list="list2" :current='currentType' :lineWidth="40" lineColor="#1677ff" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" @click="clickTypeTab"></u-tabs>
|
|
|
+ <view class="participate-order x-f">
|
|
|
+ <image src="@/static/images/order_icon2.png" mode="aspectFill" v-if="searchTypeIndex == 3"></image>
|
|
|
+ <image src="@/static/images/order_icon.png" mode="aspectFill" v-else></image>
|
|
|
+ <picker @change="bindPickerChange" :value="searchTypeIndex" :range="typeArray">
|
|
|
+ {{typeoption[searchTypeIndex]}}
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <mescroll-body top="88rpx" bottom="0" ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback"> -->
|
|
|
+ <view class="list">
|
|
|
+ <view class="list-item">
|
|
|
+ <view class="list-item-head x-bc">
|
|
|
+ <view class="x-f" style="flex: 1;overflow: hidden;">
|
|
|
+ <u-avatar src='http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'></u-avatar>
|
|
|
+ <view class="list-item-head-l">
|
|
|
+ <view style="flex: 1;overflow: hidden;display: flex;">
|
|
|
+ <text class="list-item-name one-t">7.明医有话说-杜老师给您讲讲抑郁杜老师给您讲讲抑郁</text>
|
|
|
+ <image class="list-item-copy" src="@/static/images/copy_icon.png" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="list-item-re">注册时间:2022-12-12</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image class="phone" src="@/static/logo.png" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="list-item-desc">
|
|
|
+ <view class="taglist">
|
|
|
+ <view>测试</view>
|
|
|
+ </view>
|
|
|
+ <view style="margin-top: 5px;">
|
|
|
+ <text class="label">观看次数</text><text class="value-num">1</text>
|
|
|
+ <text class="label">完播次数</text><text class="value-num">2</text>
|
|
|
+ <text class="label">累计时长</text><text class="value-num">04分50秒</text>
|
|
|
+ </view>
|
|
|
+ <view style="margin-top: 5px;"><text class="label">红包领取状态</text><text class="value-num">1</text></view>
|
|
|
+ <view style="margin-top: 5px;"><text class="label">观看时间</text><text class="value-num">2023-12-01 12:33</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="list-item-footer x-f">
|
|
|
+ <view class="list-item-footer-btn x-f">改姓名</view>
|
|
|
+ <view class="list-item-footer-btn x-f">改备注</view>
|
|
|
+ <view class="list-item-footer-btn footer-tagbtn x-f">改标签</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- </mescroll-body> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default{
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list1: [{
|
|
|
+ name: '课程数据',
|
|
|
+ }, {
|
|
|
+ name: '参与记录',
|
|
|
+ }, {
|
|
|
+ name: '活动节目'
|
|
|
+ }],
|
|
|
+ current: 1,
|
|
|
+ list2: [{
|
|
|
+ name: '答题正确',
|
|
|
+ }, {
|
|
|
+ name: '仅播完',
|
|
|
+ }, {
|
|
|
+ name: '未完播'
|
|
|
+ }, {
|
|
|
+ name: '未播放'
|
|
|
+ }],
|
|
|
+ currentType: 0,
|
|
|
+ activeStyle:{
|
|
|
+ color: '#1677ff',
|
|
|
+ fontSize: '14px',
|
|
|
+ fontWeight: 'bold'
|
|
|
+ },
|
|
|
+ inactiveStyle:{
|
|
|
+ fontSize: '14px'
|
|
|
+ },
|
|
|
+ collapseValue:['live','questions','funnelplot'],
|
|
|
+ keyword: '',
|
|
|
+ disabled: false,
|
|
|
+ searchTypeIndex: 0,
|
|
|
+ typeArray: ['按看课时间从晚到早', '按完播时间从晚到早', '按观看次数从多到少', '按注册时间从晚到早','按会员姓名0-9-A-Z'],
|
|
|
+ typeoption: ['看课时间', '完播时间', '观看次数', '注册时间','会员姓名'],
|
|
|
+ mescroll:null,
|
|
|
+ downOption: {
|
|
|
+ auto:false//不要自动加载
|
|
|
+ },
|
|
|
+ upOption: {
|
|
|
+ onScroll:false,
|
|
|
+ use: true, // 是否启用上拉加载; 默认true
|
|
|
+ page: {
|
|
|
+ num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
|
|
|
+ size: 10 // 每页数据的数量,默认10
|
|
|
+ },
|
|
|
+ noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
|
|
|
+ textNoMore:"已经到底了",
|
|
|
+ empty: {
|
|
|
+ icon:'/static/images/empty.png',
|
|
|
+ tip: '暂无数据'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dataList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: '数据统计'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ clickTab(e) {
|
|
|
+ this.current = e.index
|
|
|
+ },
|
|
|
+ clickTypeTab(e) {
|
|
|
+ this.currentType = e.index
|
|
|
+ },
|
|
|
+ bindPickerChange(e) {
|
|
|
+ console.log('picker发送选择改变,携带值为', e.detail.value)
|
|
|
+ this.searchTypeIndex = e.detail.value
|
|
|
+ },
|
|
|
+ changeCollapse(e) {
|
|
|
+ this.collapseValue = e.filter(item=>item.status == 'open').map(it=>it.name)
|
|
|
+ },
|
|
|
+ mescrollInit(mescroll) {
|
|
|
+ this.mescroll = mescroll;
|
|
|
+ },
|
|
|
+ /*下拉刷新的回调 */
|
|
|
+ downCallback(mescroll) {
|
|
|
+ mescroll.resetUpScroll()
|
|
|
+ },
|
|
|
+ upCallback(page) {
|
|
|
+ // //联网加载数据
|
|
|
+ // var that = this;
|
|
|
+ // var data={
|
|
|
+ // customerName:this.searchKey,
|
|
|
+ // pageNum: page.num,
|
|
|
+ // pageSize: page.size
|
|
|
+ // };
|
|
|
+ // uni.showLoading({
|
|
|
+ // title:"加载中..."
|
|
|
+ // })
|
|
|
+ // getMyCustomerList(data).then(res => {
|
|
|
+ // uni.hideLoading()
|
|
|
+ // if(res.code==200){
|
|
|
+ // //设置列表数据
|
|
|
+ // if (page.num == 1) {
|
|
|
+ // that.dataList = res.data.list;
|
|
|
+
|
|
|
+ // } else {
|
|
|
+ // that.dataList = that.dataList.concat(res.data.list);
|
|
|
+
|
|
|
+ // }
|
|
|
+ // that.mescroll.endBySize(res.data.list.length, res.data.total);
|
|
|
+
|
|
|
+ // }else{
|
|
|
+ // uni.showToast({
|
|
|
+ // icon:'none',
|
|
|
+ // title: "请求失败",
|
|
|
+ // });
|
|
|
+ // that.dataList = null;
|
|
|
+ // that.mescroll.endErr();
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.container {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #222;
|
|
|
+ .topbg {
|
|
|
+ position: absolute;
|
|
|
+ z-index: -1;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 210px;
|
|
|
+ }
|
|
|
+ &-body {
|
|
|
+
|
|
|
+ }
|
|
|
+ .coursebox {
|
|
|
+ padding: 120px 50rpx 20px 50rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ .status {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 2;
|
|
|
+ height: 30px;
|
|
|
+ padding: 0 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ line-height: 30px;
|
|
|
+ border-radius: 0 12px 0 12px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #08ce36;
|
|
|
+ }
|
|
|
+ &-info {
|
|
|
+ padding: 12px;
|
|
|
+ background-color: rgba(255,255,255,0.88);
|
|
|
+ border-radius: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ &-name {
|
|
|
+ color: #222;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ padding-right: 50px;
|
|
|
+ .more-t {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #222;
|
|
|
+ display: inline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-time-item {
|
|
|
+ flex: 1;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ &-time-t {
|
|
|
+ color: #222;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 5px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .duration {
|
|
|
+ position: relative;
|
|
|
+ padding-left: 14px;
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ height: 30px;
|
|
|
+ width: 1px;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.statistics {
|
|
|
+ background-color: #fff;
|
|
|
+ &-title {
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ &-title-tip {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 11px;
|
|
|
+ color: #999;
|
|
|
+ padding-left: 10px;
|
|
|
+ }
|
|
|
+ &-slot-title {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #1677ff;
|
|
|
+ }
|
|
|
+ .collapse-content {
|
|
|
+ margin: 0 -8px -8rpx 0;
|
|
|
+ &-item {
|
|
|
+ flex: 1;
|
|
|
+ padding: 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #f5f5f5;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 10px;
|
|
|
+ color: #222222;
|
|
|
+ margin: 0 8px 8rpx 0;
|
|
|
+ }
|
|
|
+ &-title {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ &-num {
|
|
|
+ color: #1677ff;
|
|
|
+ font-size: 10px;
|
|
|
+ text {
|
|
|
+ font-family: DIN, DIN;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .redenvelope {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ margin-right: 8px;
|
|
|
+ margin-top: 4px;
|
|
|
+ padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 10px;
|
|
|
+ color: #222222;
|
|
|
+ image {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.participate-search {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10px 15px;
|
|
|
+ .refresh {
|
|
|
+ height: 26px;
|
|
|
+ min-width: 40px;
|
|
|
+ width: 40px;
|
|
|
+ padding: 0;
|
|
|
+ display: inline-flex;
|
|
|
+ margin-left: 15px;
|
|
|
+ border-radius: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+}
|
|
|
+.participate-order {
|
|
|
+ font-size: 12px;
|
|
|
+ image {
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.btn_icon {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1677ff;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 5px;
|
|
|
+ image {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.list {
|
|
|
+ padding: 20px 10px;
|
|
|
+}
|
|
|
+.list-item{
|
|
|
+ padding: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 12px;
|
|
|
+ &-head {
|
|
|
+ .phone {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ &-l {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-copy {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ &-re {
|
|
|
+ font-size: 10px;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ &-desc {
|
|
|
+ padding: 5px;
|
|
|
+ color: #999;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .label {
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ .value-num {
|
|
|
+ margin-right: 18px;
|
|
|
+ color: #222;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .taglist {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ color: #555;
|
|
|
+ padding-top: 5px;
|
|
|
+ view {
|
|
|
+ margin: 0 5px 5px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-footer {
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding: 6px 0;
|
|
|
+ .footer-tagbtn {
|
|
|
+ color: #1677ff;
|
|
|
+ background-color: #e7f2fe;
|
|
|
+ border: 1px solid #c9e1fb;
|
|
|
+ }
|
|
|
+ &-btn {
|
|
|
+ height: 26px;
|
|
|
+ padding: 0 10px;
|
|
|
+ margin-left: 10px;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ border-radius: 25px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 10px;
|
|
|
+ line-height: 26px;
|
|
|
+ border: 1px solid #f5f5f5;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|