Skip to content

M
mallapp
Commit 974c6ef1 authored by Mac's avatar Mac
Browse files
Options

1

parent 512f71be
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 886 additions and 0 deletions
pages.json
View file @ 974c6ef1
......@@ -498,6 +498,13 @@
"path":"activeContent" //活动列表 活动内容
}]
},
//约课
{
"root": "pages/appointment",
"pages": [{
"path": "appointment"//约课
}]
},
//抖音商品短视频
{
"root": "pages/video",
......
pages/appointment/appointment.vue 0 → 100644
View file @ 974c6ef1
<style>
.appointment{
width: 100%;
height: 100vh;
background: #FFF;
}
.appointment-box{
padding: 0 15px ;
}
.appointment .tanchu {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
background: #FFF;
position: absolute;
top: 41px;
left: 0;
z-index: 1999;
}
.appointment .tanchu_item {
width: 94%;
margin-left: 3%;
height: 45px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #f1f1f1;
}
.appointment .subscribeList{
width: 100%;
position: relative;
}
.appointment .subscribe-item{
width: 100%;
box-shadow:0 6px 10px 1px #F2F2F2;
border-radius: 6px;
margin-top: 15px;
padding: 0 15px;
}
.appointment .item-top{
width: 100%;
padding: 15px;
border-bottom: 1px solid #E2E2E2;
}
.appointment .item-top-o{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-size: 15px;
color: #1B1D1E;
}
.appointment .item-top-o-r{
padding: 0 10px 0 15px;
font-size: 10px;
color: #FFFFFF;
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 17px;
margin-right: -15px;
}
.appointment .item-top-san{
width: 0;
height: 0;
border-top: 18px solid #FFF;
border-right: 10px solid transparent;
position: absolute;
left: 0;
top: 0;
}
.appointment .item-top-t{
margin-top: 15px;
display: flex;
flex-direction: row;
align-items: center;
}
.appointment .item-top-t-r{
margin-left: 10px;
display: flex;
flex-direction: column;
height: 40px;
justify-content: space-between;
font-size:13px ;
color: #111111;
}
.appointment .chaochu1{
white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: calc(100vw - 120px);
}
.appointment .item-b{
width: 100%;
height: 55px;
padding: 15px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
.appointment .yuyue{
width: 69px;
height: 26px;
border-radius: 4px;
font-size: 13px;
color: #FFFFFF;
background: #40766E;
margin-left: 15px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<template>
<view class="appointment">
<view class="appointment-box">
<zzx-calendar ref='zzx' @selected-change="datechange" @getweekMode = 'getweekMode'></zzx-calendar>
</view>
<view style="position:relative;">
<view style=" border-bottom: 1px solid rgba(0, 0, 0, 0.03);">
<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" bar-height='4' :active-color="mainColor"></u-tabs>
</view>
<view v-if="screenshow==true" class="tanchu">
<scroll-view :scroll-y="true" :enable-back-to-top="true" style="max-height: 200px;">
<view class="tanchu_item" v-for="(item, index) in screenList" :key="index" @click="onItemSelect(item)">
<view style="display: flex;flex-direction: row;align-items: center;">
<span>{{item.Name}}</span>
</view>
<u-icon name="success" :color="mainColor" size="30" v-if='item.ID==msg.OrderBy && current==1'></u-icon>
<u-icon name="success" :color="mainColor" size="30" v-if='item.ID==msg.CarBrandId && current==2'></u-icon>
</view>
</scroll-view>
</view>
<!-- 预约的列表 -->
<view class="subscribeList" style="height: calc(100vh - 190px);width: calc(100vw);overflow: auto;">
<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scroll='getscroll'>
<view style="padding: 0 15px;" @touchstart="getscroll">
<view class="subscribe-item" v-for="(item,index) in subscribeList" :key='index' :style="{'margin-bottom':subscribeList.length==index+1?'20px':'0'}">
<view class="item-top">
<view class="item-top-o">
<text>{{item.time}}</text>
<view class="item-top-o-r" :style="{'background':mainColor}">
{{item.CourseClassName}}
<view class="item-top-san"></view>
</view>
</view>
<view class="item-top-t">
<u-avatar :src="item.photo" size='80' mode="circle"></u-avatar>
<view class="item-top-t-r">
<view class="chaochu1" style="font-weight: bold;">{{item.kecheng}}</view>
<view class="chaochu1" style="font-size: 12px;color: #666666;">{{item.teacher}}</view>
</view>
</view>
</view>
<view class="item-b">
<view class="yuyue">预约</view>
<view class="yuyue" style="background: #FFFFFF;color: #40766E;border: 1px solid #40766E;">取消预约</view>
<view class="yuyue">去上课</view>
</view>
</view>
</view>
<view style="width: 100%;height: 100%;background: #000000;opacity: 0.4;position: absolute;left: 0;top: 0;" v-if="screenshow==true" @touchstart="screenshow=false" ></view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
import zzxCalendar from './components/zzx-calendar/zzx-calendar.vue'
export default{
components:{
zzxCalendar,
},
data(){
return{
pageTitle:'约课',
mainColor: "",
secondary: '',
list: [{
name: '综合排序'
}, {
name: '课程'
},{
name: '老师'
}],
current: 0,
screenshow:false,
screenList:[],
contents:[
{'ID': 0, Name: '体验课'},
{'ID': 1, Name: '一对一'},
],
contents2:[
{'ID': 0, Name: '李老师'},
{'ID': 1, Name: '林老师'},
],
subscribeList:[
{kecheng:'日语年月日正确表达',teacher:'张小碗儿',CourseClassName:'一对一',time:'20:30',photo:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1609315660000_6.png'},
{kecheng:'日语年月日正确表2达',teacher:'小林子',CourseClassName:'体验课',time:'20:30',photo:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1609315660000_6.png'},
{kecheng:'日语年月日正确表2达',teacher:'小林子',CourseClassName:'体验课',time:'20:30',photo:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1609315660000_6.png'},
{kecheng:'日语年月日正确表2达',teacher:'小林子',CourseClassName:'体验课',time:'20:30',photo:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1609315660000_6.png'},
{kecheng:'日语年月日正确表2达',teacher:'小林子',CourseClassName:'体验课',time:'20:30',photo:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1609315660000_6.png'},
{kecheng:'日语年月日正确表2达',teacher:'小林子',CourseClassName:'体验课',time:'20:30',photo:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1609315660000_6.png'},
{kecheng:'厉害',teacher:'小林子',CourseClassName:'体验课',time:'20:30',photo:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1609315660000_6.png'},
],
weekMode:true
}
},
onLoad() {
uni.setNavigationBarTitle({
title: this.pageTitle,
});
this.mainColor = this.$uiConfig.mainColor;
this.secondary = this.$uiConfig.secondary;
},
onPageScroll(e){
console.log(e)
},
methods:{
datechange(e){
console.log(e)
},
getweekMode(e){
console.log(e)
this.weekMode = e
},
getscroll: function() {//一直在调用 空了处理
let that = this
if(that.weekMode == false){
that.$refs.zzx.changeMode()
}
},
onItemSelect(){
this.screenshow = false;
},
change(val){
if (val == 0) {
this.screenshow = false
} else if(val == 1){
if (val == this.current && this.screenshow == true) {
this.screenshow = false
} else {
this.screenshow = true
}
this.screenList = this.contents
}
else if(val == 2){
if (val == this.current && this.screenshow == true) {
this.screenshow = false
} else {
this.screenshow = true
}
this.screenList = this.contents2
}
this.current = val
}
}
}
</script>
pages/appointment/components/zzx-calendar/generateDates.js 0 → 100644
View file @ 974c6ef1
/*
*此函数的作用是根据传入的一个日期，返回这一周的日期或者这一个月的日期，
* 如果是月的话注意还包含上个月和下个月的日期，月的话总共数据有 6 * 7 = 42个
*
*/
/*
* 时间格式化函数
* 重要提示，微信小程序new Date('2020-04-16')在ios中无法获取时间对象
* 解决方式: 建议将时间都格式化成'2020/04/16 00:00:00'的格式
* 函数示例: formatDate(new Date(), 'YYYY/MM/dd hh:mm:ss')
*/
export const formatDate = (date, fmt) => {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + ''
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
}
}
return fmt
}
const padLeftZero = (str) => {
return ('00' + str).substr(str.length)
}
export const judgeType = (s) => {
// 函数返回数据的具体类型
return Object.prototype.toString.call(s).slice(8,-1);
}
export const equalDate = (d1, d2) => {
let result = false;
if (d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate()) {
result = true;
}
return result;
}
/* 比较时间,时间格式为2020-04-04
*/
export const dateEqual = (before, after) => {
before = new Date(before.replace('-', '/').replace('-', '/'))
after = new Date(after.replace('-', '/').replace('-', '/'))
if (before.getTime() - after.getTime() === 0) {
return true
} else {
return false
}
}
export const gegerateDates = (date = new Date(), type='week') => {
const result = [];
if (judgeType(date) === 'Date') {
// 年，月，日
const y = date.getFullYear();
const m = date.getMonth();
const d = date.getDate();
const days = new Date(y, m+1, 0).getDate();
// 获取日期是星期几
let weekIndex = date.getDay() === 0 ? 7 : date.getDay();
if (type === 'month') {
const dobj = new Date(y,m,1);
weekIndex = dobj.getDay() === 0 ? 7 : dobj.getDay();
}
if (type === 'week') {
for(let i = weekIndex - 1; i >0; i--) {
const dtemp = new Date(y,m,d);
dtemp.setDate(dtemp.getDate() - i);
result.push({
time: dtemp,
show: true,
fullDate: formatDate(dtemp, 'yyyy-MM-dd'),
isToday: equalDate(new Date(), dtemp)
})
}
for(let i = 0; i <= 7 - weekIndex; i++) {
const dtemp = new Date(y,m,d);
dtemp.setDate(dtemp.getDate() + i);
result.push({
time: dtemp,
show: true,
fullDate: formatDate(dtemp, 'yyyy-MM-dd'),
isToday: equalDate(new Date(), dtemp)
})
}
} else if (type === 'month') {
// 上个月
for(let i = weekIndex - 1; i > 0; i--) {
const dtemp = new Date(y,m,1);
dtemp.setDate(dtemp.getDate() - i);
result.push({
time: dtemp,
show: false,
fullDate: formatDate(dtemp, 'yyyy-MM-dd'),
isToday: equalDate(new Date(), dtemp)
});
}
// 这个月的日期
for (let i = 0; i < days; i++) {
const dtemp = new Date(y,m,1);
dtemp.setDate(dtemp.getDate() + i);
result.push({
time: dtemp,
show: true,
fullDate: formatDate(dtemp, 'yyyy-MM-dd'),
isToday: equalDate(new Date(), dtemp)
});
}
const len = 42 - result.length;
// 下个月的日期
for (let i = 1; i <= len;i++) {
const dtemp = new Date(y,m+1,0);
dtemp.setDate(dtemp.getDate() + i);
result.push({
time: dtemp,
show: false,
fullDate: formatDate(dtemp, 'yyyy-MM-dd'),
isToday: equalDate(new Date(), dtemp)
})
}
}
}
return result;
}
pages/appointment/components/zzx-calendar/zzx-calendar.vue 0 → 100644
View file @ 974c6ef1
This diff is collapsed.
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