亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

【備戰春招】第20天 flex 布局

標簽:
Vue.js

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


课程章节: 第1章


课程讲师:神思者


课程内容

https://img1.sycdn.imooc.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 :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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);}


https://img1.sycdn.imooc.com//63fbf7650001a01d08660467.jpg

























點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
27
獲贊與收藏
19

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消