coach_assistant/src/pages/course/task_info/task_info.vue

<template>
    <view class="task-info">
        <block v-if="taskInfo.course_kind == '私教课'">
            <view class="i-header">
                <picker disabled>
                    <view class="top-bar"><text>{{optionsQuery.course_name || '-'}}</text></view>
                </picker>
                <picker class="select-picker" disabled>
                    <view>
                        <input disabled :value="taskInfo.homework_record.created_at.substr(0,10)" />
                        <!-- <image></image> -->
                    </view>
                </picker>
                
            </view>
            <view class="i-user">
                <image mode="aspectFit" :src="optionsQuery.user_avatar"></image>
                <view>
                    <text>学员姓名:</text>{{ optionsQuery.user_name || '-'}}
                </view>
            </view>
        </block>

        <view class="ti-section">
            <block v-if="taskInfo.course_kind == '成班课'">
                <view class="s-name">
                    <view>{{optionsQuery.course_name || '-'}}</view>
                    <view>{{optionsQuery.class_name || ''}}</view>
                </view>
                <view class="s-user">
                    <view>学员名称:</view>
                    <picker class="select-picker" disabled>
                        <view>
                            <input disabled v-model="optionsQuery.user_name" />
                            <!-- <image></image> -->
                        </view>
                    </picker>
                </view>
            </block>
            
            <view class="s-detail">
                <view>完成情况</view>
                <view>{{ taskInfo.homework_record.completion || '-' }}</view>
            </view>
            <view class="s-addr">
                <view>视频链接：</view>
                <view>{{ taskInfo.homework_record.video_url || '-' }}</view>
                <view @click="copyUrl">复制</view>
            </view>
            <view class="s-imgs">
                <image v-for="(e,i) in taskInfo.homework_record.images" :key="i" mode="aspectFit" :src="e"></image>
            </view>
        </view>
    </view>
</template>

<script>
import { API } from '../../../js/api'
import { servers } from '../../../js/server'
import util from '../../../utils/util'
export default {
    data(){
        return {
            taskInfo: {},
            optionsQuery: {},
        }
    },
    onLoad(options){
        let _query = util.jsonPar(options.query);
        this.optionsQuery = _query;
        console.warn('query' , _query)
        this.getTaskInfo(_query.homework_record_id);
    },
    methods: {
        copyUrl(){
            let { taskInfo } = this;
            uni.setClipboardData({
                data: taskInfo.homework_record.video_url,
            })
        },
        getTaskInfo( homework_record_id ){
            servers.get({
                url: API.course.homeworkRecordInfo,
                data: {
                    homework_record_id
                },
                failMsg: '加载失败！'
            })
            .then(res=>{
                this.taskInfo = res || {};
            })
        }
    }
}
</script>

<style lang="scss">
    @import '~style/public.scss';
    .ti-section{
        padding: 0 24upx 26upx;
        background-color: #fff;
        
        .s-name{
            height: 128upx;
            border-bottom: 2upx solid #D8D8D8;
            @include centerFlex(space-between);
            >view{
                line-height: 44upx;
                font-size: 32upx;
                color: #333;
                @include textHide(1);
                &+view{
                    margin-left: 10upx;
                    flex-shrink: 0;
                    max-width: 20%;
                }
            }
        }
        .s-user{
            padding: 16upx 0;
            @include centerFlex(flex-start);
            >view{
                margin-right: 22upx;
                font-size: 28upx;
                line-height: 40upx;
                color: #9a9a9d;
            }
            
        }
        .s-detail{
            padding-top: 20upx;
            >view{
                &:first-child{
                    margin-bottom: 12upx;
                    line-height: 40upx;
                    font-size: 28upx;
                    color: #333;
                }
                &+view{
                    word-break: break-all;
                    line-height: 40upx;
                    font-size: 28upx;
                    color: #9a9a9d;
                }
            }
        }
        .s-addr{
            padding: 30upx 0;
            @include centerFlex(space-between);
            >view{
                line-height: 40upx;
                font-size: 28upx;
                &:first-child{
                    flex-shrink: 0;
                    color: #333;
                }
                &:nth-child(2){
                    flex-grow: 1;
                    color: #9A9A9D;
                    @include textHide(1);
                }
                &:nth-child(3){
                    margin-left: 10upx;
                    flex-shrink: 0;
                    width: 98upx;
                    height: 42upx;
                    line-height: 38upx;
                    text-align: center;
                    border: 2upx solid #009874;
                    border-radius: 22upx;
                    color: $themeColor;
                }
            }
        }
        .s-imgs{
            padding-top: 20upx;
            font-size: 0;
            >image{
                margin-bottom: 24upx;
                width: 200upx;
                height: 200upx;
                border-radius: 10upx;
                &:not(:nth-child(3n)){
                    margin-right: 44upx;
                }
            }
        }
        
    }
    .i-header{
        padding: 0 24upx 26upx;
        background-color: #fff;
        
    }
    .i-user{
        margin: 24upx 0 24upx;
        padding: 30upx;
        background-color: #fff;
        @include centerFlex(flex-start);
        >image{
            flex-shrink: 0;
            margin-right: 32upx;
            width: 112upx;
            height: 112upx;
            border-radius: 50%;
            background-color: slateblue;

        }
        >view{
            line-height: 40upx;
            font-size: 28upx;
            color: #333;
            @include textHide(1);
            >text{
                color: #9a9a9d;
            }
        }
    }
    .select-picker{
        width: 312upx;
        border: 2upx solid #D8D8D8;
        border-radius: 10upx;
        background-color: #F2F2F7;
        view{
            padding: 0 24upx;
            height: 68upx;
            @include centerFlex(center);
            >input{
                flex-grow: 1;
                line-height: 40upx;
                font-size: 28upx;
                color: #333;
            }
            >image{
                flex-shrink: 0;
                width: 28upx;
                height: 28upx;
                background-color: skyblue;
            }
        }
    }
</style>