Skip to content

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

1

parent 512f71be
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
<template>
<view class="zzx-calendar">
<view class="calendar-heander">
{{timeStr}}
<view class="back-today" @click="goback" v-if="showBack">
返回今日
</view>
</view>
<view class="calendar-weeks">
<view class="calendar-week" v-for="(week, index) in weeks" :key="index">
{{week}}
</view>
</view>
<view class="calendar-content">
<swiper class="calendar-swiper" :style="{
width: '100%',
height: sheight
}" :indicator-dots="false" :autoplay="false" :duration="duration" :current="current" @change="changeSwp" :circular="true">
<swiper-item class="calendar-item" v-for="sitem in swiper" :key="sitem">
<view class="calendar-days">
<template v-if="sitem === current">
<view class="calendar-day" v-for="(item,index) in days" :key="index"
style="position: relative;"
:class="{
'day-hidden': !item.show
}" @click="clickItem(item)">
<view
class="date"
:class="[
item.isToday ? todayClass : '',
item.fullDate === selectedDate ? checkedClass : ''
]"
:style="{background:item.fullDate === selectedDate?mainColor:''}"
>
{{item.time.getDate()}}
</view>
<view class="dot-show" v-if="item.info" :style="{color:mainColor}">
课
</view>
</view>
</template>
<template v-else>
<template v-if="current - sitem === 1 || current-sitem ===-2">
<view class="calendar-day" v-for="(item,index) in predays" :key="index"
:class="{
'day-hidden': !item.show
}">
<view
class="date"
:class="[
item.isToday ? todayClass : ''
]"
>
{{item.time.getDate()}}
</view>
</view>
</template>
<template v-else>
<view class="calendar-day" v-for="(item,index) in nextdays" :key="index"
:class="{
'day-hidden': !item.show
}">
<view
class="date"
:class="[
item.isToday ? todayClass : ''
]"
>
{{item.time.getDate()}}
</view>
</view>
</template>
</template>
</view>
</swiper-item>
</swiper>
<view class="mode-change" @click="changeMode">
<view :class="weekMode ? 'mode-arrow-bottom' : 'mode-arrow-top'" >
</view>
</view>
</view>
</view>
</template>
<script>
import {gegerateDates, dateEqual,formatDate} from './generateDates.js';
export default {
props: {
duration: {
type: Number,
default: 500
},
dotList: {
type: Array, /// 打点日期列表
default() {
return [
{date: '2021-01-27',}
]
}
},
showBack: {
type: Boolean, // 是否返回今日
default: true
},
todayClass: {
type: String, // 今日的自定义样式class
default: 'is-today'
},
checkedClass: {
type: String, // 选中日期的样式class
default: 'is-checked'
},
dotStyle: {
type: Object, // 打点日期的自定义样式
default() {
return {
background: '#c6c6c6'
}
}
},
},
watch:{
dotList: function(newvalue){
const days = this.days.slice(0);
newvalue.forEach(item => {
const index = days.findIndex(ditem => ditem.fullDate === item.date);
if (index > 0) {
days[index].info = item
}
});
this.days = days;
}
},
computed: {
sheight() {
// 根据年月判断有多少行
// 判断该月有多少天
let h = '70rpx';
if (!this.weekMode) {
const d = new Date(this.currentYear, this.currentMonth, 0);
const days = d.getDate(); // 判断本月有多少天
let day = new Date(d.setDate(1)).getDay();
if (day === 0) {
day = 7;
}
const pre = 8 - day;
const rows = Math.ceil((days-pre) / 7) + 1;
h = 70 * rows + 'rpx'
}
return h
},
timeStr() {
let str = '';
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate);
const y = d.getFullYear();
const m = (d.getMonth()+1) <=9 ? `0${d.getMonth()+1}` : d.getMonth()+1;
str = `${y}年${m}月`;
return str;
},
predays() {
let pres = [];
if (this.weekMode) {
const d = new Date(this.currentYear, this.currentMonth - 1,this.currentDate)
d.setDate(d.getDate() - 7);
pres = gegerateDates(d, 'week')
} else {
const d = new Date(this.currentYear, this.currentMonth - 2,1)
pres = gegerateDates(d, 'month')
}
return pres;
},
nextdays() {
let nexts = [];
if (this.weekMode) {
const d = new Date(this.currentYear, this.currentMonth - 1,this.currentDate)
d.setDate(d.getDate() + 7);
nexts = gegerateDates(d, 'week')
} else {
const d = new Date(this.currentYear, this.currentMonth,1)
nexts = gegerateDates(d, 'month')
}
return nexts;
}
},
data() {
return {
weeks: ['一', '二', '三', '四', '五', '六', '日'],
current: 1,
currentYear: '',
currentMonth: '',
currentDate: '',
days: [],
weekMode: true,
swiper: [0,1,2],
// dotList: [], // 打点的日期列表
selectedDate: formatDate(new Date(), 'yyyy-MM-dd'),
mainColor: "",
secondary: '',
};
},
methods: {
changeSwp(e) {
// console.log(e);
const pre = this.current;
const current = e.target.current;
/* 根据前一个减去目前的值我们可以判断是下一个月/周还是上一个月/周
*current - pre === 1, -2时是下一个月/周
*current -pre === -1, 2时是上一个月或者上一周
*/
this.current = current;
if (current - pre === 1 || current - pre === -2) {
this.daysNext();
} else {
this.daysPre();
}
},
// 初始化日历的方法
initDate(cur) {
let date = ''
if (cur) {
date = new Date(cur)
} else {
date = new Date()
}
this.currentDate = date.getDate() // 今日日期 几号
this.currentYear = date.getFullYear() // 当前年份
this.currentMonth = date.getMonth() + 1 // 当前月份
this.currentWeek = date.getDay() === 0 ? 7 : date.getDay() // 1...6,0 // 星期几
const nowY = new Date().getFullYear() // 当前年份
const nowM = new Date().getMonth() + 1
const nowD = new Date().getDate() // 今日日期 几号
const nowW = new Date().getDay();
// this.selectedDate = formatDate(new Date(), 'yyyy-MM-dd')
this.days = [];
let days = [];
if (this.weekMode) {
days = gegerateDates(date, 'week');
// this.selectedDate = days[0].fullDate;
} else {
days = gegerateDates(date, 'month');
// const sel = new Date(this.selectedDate.replace('-', '/').replace('-', '/'));
// const isMonth = sel.getFullYear() === this.currentYear && (sel.getMonth() + 1) === this.currentMonth;
// if(!isMonth) {
// this.selectedDate = formatDate(new Date(this.currentYear, this.currentMonth-1,1), 'yyyy-MM-dd')
// }
}
days.forEach(day => {
const dot = this.dotList.find(item => {
return dateEqual(item.date, day.fullDate);
})
if (dot) {
day.info = dot;
}
})
this.days = days;
// 派发事件,时间发生改变
let obj = {
start: '',
end: ''
};
if (this.weekMode) {
obj.start = this.days[0].time;
obj.end = this.days[6].time
} else {
const start = new Date(this.currentYear, this.currentMonth - 1, 1);
const end = new Date(this.currentYear, this.currentMonth , 0);
obj.start = start;
obj.end = end;
}
this.$emit('days-change', obj)
},
// 上一个
daysPre () {
if (this.weekMode) {
const d = new Date(this.currentYear, this.currentMonth - 1,this.currentDate);
d.setDate(d.getDate() - 7);
this.initDate(d);
} else {
const d = new Date(this.currentYear, this.currentMonth -2, 1);
this.initDate(d);
}
},
// 下一个
daysNext () {
if (this.weekMode) {
const d = new Date(this.currentYear, this.currentMonth - 1,this.currentDate);
d.setDate(d.getDate() + 7);
this.initDate(d);
} else {
const d = new Date(this.currentYear, this.currentMonth, 1);
this.initDate(d);
}
},
changeMode() {
console.log(2)
const premode = this.weekMode;
let isweek = false;
if (premode) {
isweek = !!this.days.find(item => item.fullDate === this.selectedDate)
}
this.weekMode = !this.weekMode;
if(this.weekMode==false){
this.$emit('getweekMode', this.weekMode);
}
let d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate)
const sel = new Date(this.selectedDate.replace('-', '/').replace('-', '/'));
const isMonth = sel.getFullYear() === this.currentYear && (sel.getMonth() + 1) === this.currentMonth;
if ((this.selectedDate && isMonth) || isweek) {
d = new Date(this.selectedDate.replace('-', '/').replace('-', '/'))
}
this.initDate(d)
},
// 点击日期
clickItem(e) {
this.selectedDate = e.fullDate;
this.$emit('selected-change', e);
},
goback() {
const d = new Date();
this.initDate(d);
},
},
created() {
this.initDate();
},
mounted() {
this.mainColor = this.$uiConfig.mainColor;
this.secondary = this.$uiConfig.secondary;
}
}
</script>
<style lang="scss" scoped>
.zzx-calendar {
font-family: aa;
width: 100%;
height: auto;
padding: 10px 0;
.calendar-heander {
text-align: center;
height: 60upx;
line-height: 60upx;
position: relative;
font-size: 24upx;
.back-today {
position: absolute;
right: 0;
width: 100upx;
height: 30upx;
line-height: 30upx;
font-size: 20upx;
top: 15upx;
border-radius: 15upx 0 0 15upx;
color: #ffffff;
background-color: #FF6633;
}
}
.calendar-weeks {
background: #F5F6F7;
padding-top: 5px;
border-top-left-radius:8px ;
border-top-right-radius:8px ;
width: 100%;
display: flex;
flex-flow:row nowrap;
height: 60upx;
line-height: 60upx;
justify-content: center;
align-items: center;
font-size: 30upx;
.calendar-week {
width: calc(100% / 7);
height: 100%;
text-align: center;
}
}
swiper {
width: 100%;
height: 60upx;
}
.calendar-content {
min-height: 60upx;
background: #F5F6F7;
padding-bottom:10px ;
border-bottom-left-radius:8px ;
border-bottom-right-radius:8px ;
}
.calendar-swiper {
min-height: 70upx;
transition: height ease-out 0.3s;
}
.calendar-item {
margin: 0;
padding: 0;
height: 100%;
}
.calendar-days {
display: flex;
flex-flow: row wrap;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 28upx;
.calendar-day {
width: calc(100% / 7);
height: 70upx;
text-align: center;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
}
}
.day-hidden {
visibility: hidden;
}
.mode-change {
display: flex;
justify-content: center;
margin-top:10upx;
.mode-arrow-top {
width: 0;
height:0;
border-left: 12upx solid transparent;
border-right: 12upx solid transparent;
border-bottom: 10upx solid #ddb766;
}
.mode-arrow-bottom {
width: 0;
height:0;
border-left: 12upx solid transparent;
border-right: 12upx solid transparent;
border-top: 10upx solid #ddb766;
}
}
.is-today {
background: #ffffff;
// border: 1upx solid #FF6633;
border-radius: 50%;
color: #FF6633;
}
.is-checked {
background: #FF6633;
color: #ffffff;
}
.date {
width: 50upx;
height: 50upx;
line-height: 50upx;
margin: 0 auto;
border-radius: 50upx;
}
.dot-show {
font-size: 10px;
// margin-top:4upx;
// width: 10upx;
// height: 10upx;
// background: #c6c6c6;
// border-radius: 10upx;
position: absolute;
top: 1px;
right: 6px;
}
}
</style>
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