继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【备战春招】第20天 flex 布局

有梦
关注TA
已关注
手记 82
粉丝 27
获赞 19

课程名称:SpringBoot2.X + Vue + UniAPP,全栈开发医疗小程序


课程章节: 第1章


课程讲师:神思者


课程内容

http://img4.mukewang.com/63fbf6910001664d03590498.jpg



诊室出诊计划页面

<view>
    <view class="date-container">
        <view class="item" v-for="one in dateList">
            <text class="day">{{ one.day }}</text>
            <view :class="one.date == date ? 'selector active' : 'selector'" 
                @tap="clickDataHandle(one.date)">
                <text class="date">{{ one.dateOfMonth }}</text>
                <text :class="one.status == '无号' ? 'status gray' : 'status'">
                    {{ one.status }}                </text>
            </view>
        </view>
    </view>
    <view class="doctor" v-for="one in doctorList">
        <u-avatar :src="one.photo" size="45"></u-avatar>
        <view class="info">
            <view class="row">
                <text class="name">{{ one.name }}</text>
                <text class="job">({{ one.job }})</text>
                <button class="btn" @tap="clickBtnHandle(one.id, date)">挂号</button>
            </view>
            <view class="row">
                <text class="num">总量:{{ one.maximum }}</text>
                <text class="price">¥{{ one.price }}</text>
            </view>
            <view class="row">
                <rich-text class="desc">{{ one.description }}</rich-text>
            </view>
        </view>
    </view>
    <u-empty v-if="showEmpty" mode="list" text="无医生出诊记录" width="150" 
             icon="http://cdn.uviewui.com/uview/empty/order.png"/>
</view>


进入页面时 发送ajax 请求 获取7天得出诊计划

//查询某个诊室7天出诊情况searchCanRegisterInDateRange: function(ref, deptSubId) {
    let startDate = dayjs().format('YYYY-MM-DD');
    let endDate = dayjs().add(6, 'day').format('YYYY-MM-DD');
    let data = {
        deptSubId: deptSubId,
        startDate: startDate,
        endDate: endDate    };
    ref.ajax(ref.api.searchCanRegisterInDateRange, 'POST', data,
        function(resp) {
            let result = resp.data.result;
            //定义工具数组
            let array = ['日', '一', '二', '三', '四', '五', '六'];
            for (let one of result) {
                //把星期几的阿拉伯数字转换成汉字数字
                let day = array[dayjs(one.date).day()];
                one.day = day;
                one.dateOfMonth = dayjs(one.date).date();
            }
            ref.dateList = result;
        },
        false
    );},//查找某天科室医生出诊列表searchDeptSubDoctorPlanInDay: function(ref) {
    let data = {
        deptSubId: ref.deptSubId,
        date: ref.date    };

    ref.ajax(ref.api.searchDeptSubDoctorPlanInDay, 'POST', data,
        function(resp) {
            let result = resp.data.result;
            //把头像相对路径合成绝对路径
            for (let one of result) {
                one.photo = `${ref.minioUrl}/${one.photo}`;
            }
            ref.doctorList = result;
            if (result.length == 0) {
                ref.showEmpty = true;
            } else {
                ref.showEmpty = false;
            }
        },
        false
    );},


当 时间  为 0 时 就是数组里的 周日  1 是 周一

onLoad: function(options) {
    let that = this;
    //取出URL参数
    let deptSubId = options.deptSubId;
    let deptSubName = options.deptSubName;

    that.deptSubId = deptSubId;
    //设置当前页面标题栏文字
    uni.setNavigationBarTitle({
        title: deptSubName    });
  
    that.searchCanRegisterInDateRange(that,deptSubId)
    that.searchDeptSubDoctorPlanInDay(that);}


http://img2.mukewang.com/63fbf7650001a01d08660467.jpg

























打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP