theluyuan/beelink
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

xbx #60

Merged
theluyuan merged 9 commits from xbx into master 2020-10-20 17:09:35 +08:00
Conversation 0 Commits 9 Files Changed 10 +2848 -2629
10 changed files with 2848 additions and 2629 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/base.ts
View File

@ -4,14 +4,22 @@ import { AxiosRequestConfig, CustomSuccessData } from 'axios';
import { getValue } from '@/utils/common'; import { getValue } from '@/utils/common';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import router from '@/router'; import router from '@/router';
import { MessageType } from 'ant-design-vue/types/message';
// 泛型接口 // 泛型接口
export interface Get { export interface Get {
<T>(url: string, params?: unknown, config?: AxiosRequestConfig): Promise<CustomSuccessData<T>>; <T>(url: string, params?: unknown, config?: AxiosRequestConfig): Promise<CustomSuccessData<T>>;
} }
const login:MessageType[] = []
axios.interceptors.request.use((config)=>{
login.push(message.loading('加载中..', 0))
return config;
})
axios.interceptors.response.use((response)=>{ axios.interceptors.response.use((response)=>{
// console.log(response) // console.log(response)
login[0]();
login.splice(0,1);
if(response.data.code == 1001){ if(response.data.code == 1001){
router.push("/") router.push("/")
} }

54
src/api/index.ts
View File

@ -574,6 +574,9 @@ export async function getarchives(): Promise<[Countries[],Willsay[]]>{
return [(await get<Countries[]>("countries")).data, (await get<Willsay[]>("willsay")).data]; return [(await get<Countries[]>("countries")).data, (await get<Willsay[]>("willsay")).data];
} }
export async function getwillsay(): Promise<Willsay[]>{
return (await get<Willsay[]>("willsay")).data;
}
/** /**
* 客户端语言 * 客户端语言
@ -629,8 +632,9 @@ export async function putmember(data: any): Promise<any>{
desc:data.desc desc:data.desc
} }
console.log(newdata) console.log(newdata)
return (await put<Liveaddrule>(`member/${store.state.userinfo.memberid}`, newdata) ) const res = await put<Liveaddrule>(`member/${store.state.userinfo.memberid}`, newdata)
store.dispatch("setUserInfo"); store.dispatch("setUserInfo");
return res;
} }
@ -698,3 +702,51 @@ export async function cancellive(id: number, status: number){
return false; return false;
} }
} }
/**
* 验证验证码
*/
export async function checksmscode(phone: string, smscode: string){
const res = await get("checkSmscode",{phone, smscode});
if(res.code == 0){
return true;
}else{
message.error(res.msg);
return false;
}
}
export async function register(data: any){
const res = await post<any>("register",{
mobile: data.phone,
code: data.quhao,
password: data.pass,
topassword: data.passtow,
name: data.name,
email: data.emil,
mtongue: data.muyu,
tlanguage: data.jiaoshou
})
if(res.code == 0){
message.success(res.msg)
if(!saveValue("token", res.data.api_token) && !saveValue("memberid", res.data.memberid) ){
message.error("存储错误, 请允许网页使用本地存储！")
return false;
}else{
setToken();
store.commit("login", true);
store.dispatch("setUserInfo");
// router.push("/mine/archives")
}
return true;
}else{
message.error(res.msg)
return false;
}
}

34
src/utils/date.ts
View File

@ -68,30 +68,36 @@ export function getweek(zhou?: number){
if(zhou != undefined){ if(zhou != undefined){
now = now.day(now.day() + (zhou * 6)); now = now.day(now.day() + (zhou * 6));
} }
const yue = now.month() + 1; const yue = (now.month() + 1 < 10 ? '0' + (now.month() + 1) : (now.month() + 1));
const day = now.date() // 当前天 const day = now.date() // 当前天
zhou = now.day(); // 当前周几 zhou = now.day(); // 当前周几
const year = now.year() const year = now.year()
const startd = now.day(1).date();
const start = `${year}-${yue}-${startd}`
interface Date{ interface Date{
day: string; day: string;
list?: Array<any>; list?: Array<any>;
} }
const date: Array<Date> = []; const date: Array<Date> = [];
for(let i = 0; i < 7; i++){ for(let i = 0; i < 7; i++){
console.log(i); console.log(i);
now = now.day(i + 1) now = now.day(i + 1)
date[i] = {day: ""}; date[i] = {day: ""};
date[i].day = now.year() + "-" + (now.month() < 10 ? '0' + now.month() : now.month()) + "-" + (now.date() < 10 ? '0' + now.date() : now.date()) date[i].day = now.year() + "-" + (now.month() + 1 < 10 ? '0' + (now.month() + 1) : (now.month() + 1)) + "-" + (now.date() < 10 ? '0' + now.date() : now.date())
date[i].list = [] date[i].list = []
for(let j = 0;j < 24; j++){ for(let j = 0;j < 24; j++){
date[i].list?.push({ date[i].list?.push({
start:"", start:"",
num:"" num:"",
title: "",
time:""
}) })
} }
} }
const end = `${now.year()}-${(now.month() + 1 < 10 ? '0' + (now.month() + 1) : (now.month() + 1))}-${now.date()}`
console.log(date) console.log(date)
return {date, year, yue, day, zhou} return {date, year, yue, day, zhou, start, end}
} }
@ -100,3 +106,23 @@ export function getDay(date: string){
console.log(now.date()) console.log(now.date())
return now.date(); return now.date();
} }
export function gethour(date: string){
const now = dayjs(date)
console.log(now.hour(), now.date(), now.minute())
return now.hour();
}
export function getminute(date: string){
const now = dayjs(date)
// console.log(now.hour(), now.date(), now.minute())
return now.minute();
}
export function gettime(date: string, num: number){
let now = dayjs(date)
const start = `${now.hour() > 9 ? now.hour() : '0' + now.hour()}:${now.minute() > 9 ? now.minute() : '0' + now.minute()}`
now = now.minute(now.minute() + num);
const end = `${now.hour() > 9 ? now.hour() : '0' + now.hour()}:${now.minute() > 9 ? now.minute() : '0' + now.minute()}`
return start + "-" + end;
}

25
src/views/Home.vue
View File

@ -1,25 +0,0 @@
<template>
<div class="home">
<!-- <img alt="Vue logo" src="../assets/logo.png"> -->
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import { getinfo } from "../api/index"
export default defineComponent({
name: 'Home',
components: {
HelloWorld,
},
setup(){
// ctx.axios.get("https://www.baidu.com")
getinfo().then((res)=>{
console.log(res)
})
}
});
</script>

499
src/views/login/Sign.vue
View File

@ -1,213 +1,330 @@
<template> <template>
<div class="login"> <div class="login">
<NavTop :type="0" style="flex-shrink: 0"></NavTop> <NavTop :type="0" style="flex-shrink: 0"></NavTop>
<div class="box"> <div class="box">
<div :class="stepnow != 2 ? 'left' : 'left left1'"> <div :class="stepnow != 2 ? 'left' : 'left left1'">
<div class="title"> <div class="title">
您好，欢迎来到 <span class="orgname">Beelink</span> 您好，欢迎来到 <span class="orgname">Beelink</span>
</div> </div>
<div v-if="stepnow == 1"> <div v-if="stepnow == 1">
<div class="nosign"> <div class="nosign">
已有账号？ 已有账号？
<span class="tosign"> 去登录 </span> <span class="tosign" @click="navto('/')"> 去登录 </span>
</div> </div>
<a-form :layout="formLayout"> <a-form :layout="formLayout">
<a-form-item label="手机号" class="form-item"> <a-form-item label="手机号" class="form-item">
<a-input-group compact> <a-input-group compact>
<a-select <a-select
class="getcode" class="getcode"
style="width: 50%" style="width: 50%"
v-model:value="phone.quhao" v-model:value="phone.quhao"
> >
<a-select-option value="86"> <a-select-option value="86"> 中国+0086 </a-select-option>
中国+0086 <a-select-option value="Jiangsu"> Jiangsu </a-select-option>
</a-select-option> </a-select>
<a-select-option value="Jiangsu"> Jiangsu </a-select-option> <div class="line"></div>
</a-select> <a-input
<div class="line"></div> v-model:value="phone.phone"
<a-input v-model:value="phone.phone" style="width: 50%" placeholder="请输入您的手机号" /> style="width: 50%"
</a-input-group> placeholder="请输入您的手机号"
</a-form-item> />
<a-form-item label="验证码" class="form-item"> </a-input-group>
<a-input-group compact> </a-form-item>
<div class="getcode" style="width: 50%" @click="getcode"> <a-form-item label="验证码" class="form-item">
点击获取验证码{{ time == 60 ? "" : "(" + time + ")" }} <a-input-group compact>
<div class="getcode" style="width: 50%" @click="getcode">
点击获取验证码{{ time == 60 ? "" : "(" + time + ")" }}
</div>
<div class="line"></div>
<a-input
v-model:value="phone.code"
style="width: 50%"
placeholder="请输入您的验证码"
/>
</a-input-group>
</a-form-item>
<div class="submit" @click="next(2)">下一步</div>
<div class="agreement" @click="agree">
<div class="ifagree">
<img
src="@/static/images/agree.png"
alt=""
class="agree"
v-if="ifagree"
/>
</div> </div>
<div class="line"></div> 勾选表示同意 《用户注册协议和隐私政策》
<a-input v-model:value="phone.code" style="width: 50%" placeholder="请输入您的验证码" /> </div>
</a-input-group> </a-form>
</a-form-item>
<div class="submit" @click="next(2)">下一步</div>
<div class="agreement" @click="agree">
<div class="ifagree">
<img
src="@/static/images/agree.png"
alt=""
class="agree"
v-if="ifagree"
/>
</div>
勾选表示同意 《用户注册协议和隐私政策》
</div>
</a-form>
</div>
<div v-if="stepnow == 2">
<div class="nosign">
已有账号？
<span class="tosign"> 去登录 </span>
</div>
<a-form :layout="formLayout">
<div class="signform">
<a-form-item label="设置密码" class="form-item">
<a-input
class="shuru"
placeholder="请输入您的密码"
type="password"
/>
</a-form-item>
<a-form-item label="设置密码" class="form-item">
<a-input
class="shuru"
placeholder="请再次输入您的密码"
type="password"
/>
</a-form-item>
<a-form-item label="姓名" class="form-item">
<a-input class="shuru" placeholder="请输入您的姓名" />
</a-form-item>
<a-form-item label="邮箱" class="form-item">
<a-input class="shuru" placeholder="请输入您的邮箱" />
</a-form-item>
<a-form-item label="母语" class="form-item">
<a-input class="shuru" placeholder="请输入您的母语" />
</a-form-item>
<a-form-item label="教授" class="form-item">
<a-select class="getcode" placeholder="请选择您的教授">
<a-select-option value="Zhejiang">
中国+0086
</a-select-option>
<a-select-option value="Jiangsu"> Jiangsu </a-select-option>
</a-select>
</a-form-item>
</div> </div>
<div class="submit" @click="next(3)">立刻注册</div> <div v-if="stepnow == 2">
<div class="orginfo">Beelink公司版权所有 2019—2022</div> <div class="nosign">
</a-form> 已有账号？
</div> <span class="tosign" @click="navto('/')"> 去登录 </span>
</div>
<div v-if="stepnow == 3"> <a-form :layout="formLayout">
<div class="nosign">您已完成注册</div> <div class="signform">
<img src="@/static/images/success.png" alt="" class="success" /> <a-form-item label="设置密码" class="form-item">
<div class="ale">恭喜您注册成功，点击跳转到我的档案页面</div> <a-input
</div> class="shuru"
</div> placeholder="请输入您的密码"
<div :class="stepnow != 2 ? 'right' : 'right right1'"> type="password"
<div class="steps"> v-model:value="userinfo.pass"
<div class="step"> />
<div :class="stepnow == 1 ? 'circle step1' : 'circle'">01</div> </a-form-item>
<div :class="stepnow == 1 ? 'stepnow' : ''">验证手机号</div> <a-form-item label="设置密码" class="form-item">
</div> <a-input
<div class="stepline"></div> class="shuru"
<div class="step"> placeholder="请再次输入您的密码"
<div :class="stepnow == 2 ? 'circle step1' : 'circle'">02</div> type="password"
<div :class="stepnow == 2 ? 'stepnow' : ''">填写帐号信息</div> v-model:value="userinfo.passtow"
<div class="back" @click="next(1)" v-if="stepnow == 2"> />
返回上一步 </a-form-item>
<a-form-item label="姓名" class="form-item">
<a-input
class="shuru"
placeholder="请输入您的姓名"
v-model:value="userinfo.name"
/>
</a-form-item>
<a-form-item label="邮箱" class="form-item">
<a-input
class="shuru"
placeholder="请输入您的邮箱"
v-model:value="userinfo.emil"
/>
</a-form-item>
<a-form-item label="母语" class="form-item">
<a-input
class="shuru"
placeholder="请输入您的母语"
v-model:value="userinfo.muyu"
/>
</a-form-item>
<a-form-item label="教授" class="form-item">
<a-select
v-model:value="userinfo.jiaoshou"
class="getcode"
style="color: #111"
placeholder="请选择您的教授"
>
<a-select-option
v-for="(item, index) in willsay"
:key="index"
:value="item.languageid"
>
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
</div>
<div class="submit" @click="next(3)">立刻注册</div>
<div class="orginfo">Beelink公司版权所有 2019—2022</div>
</a-form>
</div>
<div v-if="stepnow == 3">
<div class="nosign">您已完成注册</div>
<img src="@/static/images/success.png" alt="" class="success" />
<div class="ale" @click="navto('/mine/archives')">
恭喜您注册成功，点击跳转到我的档案页面
</div>
</div>
</div>
<div :class="stepnow != 2 ? 'right' : 'right right1'">
<div class="steps">
<div class="step">
<div :class="stepnow == 1 ? 'circle step1' : 'circle'">01</div>
<div :class="stepnow == 1 ? 'stepnow' : ''">验证手机号</div>
</div>
<div class="stepline"></div>
<div class="step">
<div :class="stepnow == 2 ? 'circle step1' : 'circle'">02</div>
<div :class="stepnow == 2 ? 'stepnow' : ''">填写帐号信息</div>
<div class="back" @click="next(1)" v-if="stepnow == 2">
返回上一步
</div>
</div>
<div class="stepline"></div>
<div class="step">
<div :class="stepnow == 3 ? 'circle step1' : 'circle'">03</div>
<div :class="stepnow == 3 ? 'stepnow' : ''">帐号注册完成</div>
</div>
</div>
<div class="icons" v-if="stepnow == 2">
<img src="@/static/images/weixin.png" alt="" class="icon" />
<img src="@/static/images/weibo.png" alt="" class="icon" />
<img src="@/static/images/facebook.png" alt="" class="icon" />
</div> </div>
</div>
<div class="stepline"></div>
<div class="step">
<div :class="stepnow == 3 ? 'circle step1' : 'circle'">03</div>
<div :class="stepnow == 3 ? 'stepnow' : ''">帐号注册完成</div>
</div>
</div> </div>
<div class="icons" v-if="stepnow == 2">
<img src="@/static/images/weixin.png" alt="" class="icon" />
<img src="@/static/images/weibo.png" alt="" class="icon" />
<img src="@/static/images/facebook.png" alt="" class="icon" />
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, reactive, ref } from "vue"; import { defineComponent, reactive, ref, toRaw } from "vue";
import NavTop from "@/components/NavTop.vue"; import NavTop from "@/components/NavTop.vue";
import { sendsms } from '@/api'; import { checksmscode, getwillsay, register, sendsms } from "@/api";
import { message } from "ant-design-vue";
import router from "@/router";
export default defineComponent({ export default defineComponent({
name: "Sign", name: "Sign",
components: { NavTop }, components: { NavTop },
setup() { setup() {
const formLayout = { const formLayout = {
labelCol: 4, labelCol: 4,
wrapperCol: 14, wrapperCol: 14,
}; };
const time = ref(60); //倒计时初始化 const time = ref(60); //倒计时初始化
const phone = reactive({ const phone = ref({
quhao:"86", quhao: "86",
phone: "", phone: "",
code: "" code: "",
}); });
const userinfo = ref({
pass: "",
passtow: "",
name: "",
emil: "",
muyu: "",
jiaoshou: "",
});
const willsay = ref<any>();
getwillsay().then((res) => {
willsay.value = res;
});
/**
* @param
* 点击获取验证码 触发60S倒计时
*/
let lock = false;
const getcode: () => void = () => {
console.log(11111);
if (lock) {
return;
}
if (phone.value.phone == "") {
message.error("手机号不能为空");
return;
}
lock = true;
sendsms(phone.value.quhao + phone.value.phone, 0);
const timestep = setInterval(() => {
console.log(phone);
time.value = time.value - 1;
if (time.value <= 0) {
time.value = 60;
clearInterval(timestep);
lock = false;
}
}, 1000);
};
const ifagree = ref(true); //是否同意用户协议
/** /**
* @param *@param
* 点击获取验证码 触发60S倒计时 * 用户协议前面radio 的点击效果
*/ */
let lock = false; const agree: () => void = () => {
const getcode: () => void = () => { ifagree.value = ifagree.value == true ? false : true;
console.log(11111); console.log(ifagree.value, 600);
if (lock) { };
return;
const stepnow = ref(1); // 步骤条初始
function yanzheng() {
if (userinfo.value.pass == "") {
message.error("密码不能为空");
return false;
}
if (userinfo.value.passtow == "") {
message.error("密码不能为空");
return false;
}
if (userinfo.value.name == "") {
message.error("姓名不能为空");
return false;
}
if (userinfo.value.emil == "") {
message.error("邮箱不能为空");
return false;
}
if (userinfo.value.muyu == "") {
message.error("母语不能为空");
return false;
}
if (userinfo.value.jiaoshou == "") {
message.error("请选择教授语言");
return false;
}
return true;
} }
lock = true; /**
sendsms(phone.quhao + phone.phone, 0); *@param e 跳到哪一步
const timestep = setInterval(() => { * 步骤条跳到某一步
console.log(phone); */
time.value = time.value - 1;
if (time.value <= 0) { async function next(e: number) {
time.value = 60; if (stepnow.value > e) {
clearInterval(timestep); stepnow.value = e;
lock = false; return;
}
switch (e) {
case 2: {
console.log(e);
if (phone.value.phone == "") {
message.error("手机号不能为空");
return;
} else if (phone.value.code == "") {
message.error("验证码不能为空");
return;
}
const res = await checksmscode(
phone.value.quhao + phone.value.phone,
phone.value.code
);
if (res) {
stepnow.value = e;
}
break;
}
case 3: {
console.log(userinfo.value);
const yz = yanzheng();
if (yz) {
const res = await register({
...toRaw(phone.value),
...toRaw(userinfo.value),
});
if (res) {
stepnow.value = e;
}
}
}
}
} }
}, 1000); function navto(url: string) {
}; router.push(url);
const ifagree = ref(true); //是否同意用户协议 }
return {
/** formLayout,
*@param getcode,
* 用户协议前面radio 的点击效果 time,
*/ agree,
const agree: () => void = () => { ifagree,
ifagree.value = ifagree.value == true ? false : true; stepnow,
console.log(ifagree.value, 600); next,
}; phone,
userinfo,
const stepnow = ref(1); // 步骤条初始 willsay,
navto,
/** };
*@param e 跳到哪一步 },
* 步骤条跳到某一步
*/
const next: (e: number) => void = (e: number) => {
stepnow.value = e;
};
return {
formLayout,
getcode,
time,
agree,
ifagree,
stepnow,
next,
phone
};
},
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

20
src/views/mine/Archives.vue
View File

@ -203,20 +203,20 @@
</template> </template>
<!-- 换绑手机号第一步 --> <!-- 换绑手机号第一步 -->
<div class="public-class phone-container" v-if="!isSecondStep"> <div class="public-class phone-container" v-if="!isSecondStep">
<div class="title">完成以下操作，修改账号密码</div> <div class="title">请完成以下认证</div>
<div class="title sub-title">请输入{{ formData.phone }}收到的验证短信码</div> <div class="title sub-title">请输入{{ userinfo.mobile }}收到的验证短信码</div>
<div class="form-box"> <div class="form-box">
<div class="form-item"> <div class="form-item">
<label class="label">手机验证码</label> <label class="label">手机验证码</label>
<a-input size="small" v-model:value="verificationCode" /> <a-input size="small" v-model:value="verificationCode" />
<div @click="sendVerificationCode" class="confirm-btn">获取验证码<span v-if="remainTime>0">（{{ remainTime }}s）</span></div> <div @click="sendVerificationCode(userinfo.mobile)" class="confirm-btn">获取验证码<span v-if="remainTime>0">（{{ remainTime }}s）</span></div>
</div> </div>
</div> </div>
<div @click="nextPhoneStep" class="confirm-btn">下一步</div> <div @click="nextPhoneStep" class="confirm-btn">下一步</div>
</div> </div>
<!-- 换绑手机号第二步 --> <!-- 换绑手机号第二步 -->
<div class="public-class phone-container second-step" v-else> <div class="public-class phone-container second-step" v-else>
<div class="title">完成以下操作，修改账号密码</div> <div class="title">完成以下操作，绑定新号码</div>
<div class="form-box"> <div class="form-box">
<div class="form-item"> <div class="form-item">
<label class="label">手机号</label> <label class="label">手机号</label>
@ -277,7 +277,7 @@ import { uploadflie } from "@/utils/vod"
import store from '@/store'; import store from '@/store';
import smile from "@/static/images/smile.png" import smile from "@/static/images/smile.png"
import smilet from "@/static/images/smilet.png" import smilet from "@/static/images/smilet.png"
import { editpassword, getarchives, getlanguages, putmember } from "@/api/index" import { editpassword, getarchives, getlanguages, putmember, sendsms } from "@/api/index"
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
export default defineComponent({ export default defineComponent({
@ -360,16 +360,20 @@ export default defineComponent({
function computedVerificationCode(): void { function computedVerificationCode(): void {
remainTime.value = 60; remainTime.value = 60;
const timer = setInterval(() => { const timer = setInterval(() => {
if(remainTime.value > 0) remainTime.value --; if(remainTime.value > 0) {
else clearInterval(timer); remainTime.value --;
} else {
clearInterval(timer);
}
}, 1000) }, 1000)
} }
/** /**
* 发送验证码 * 发送验证码
*/ */
function sendVerificationCode(): void { function sendVerificationCode(phone: string): void {
if(remainTime.value === 0) { if(remainTime.value === 0) {
computedVerificationCode(); computedVerificationCode();
sendsms(phone, 0)
} }
} }
// 绑定手机号是否是第二步 // 绑定手机号是否是第二步

16
src/views/regime/Subscriber.vue
View File

@ -16,34 +16,34 @@
<div class="info"> <div class="info">
<div class="infoitem"> <div class="infoitem">
<span class="label">姓名:</span> <span class="label">姓名:</span>
<span>{{i.name}}</span> <span class="one-line-hide">{{i.name}}</span>
</div> </div>
<div class="infoitem"> <div class="infoitem">
<span class="label">所在国家:</span> <span class="label">所在国家:</span>
<span>{{i.live}}</span> <span class="one-line-hide">{{i.live}}</span>
</div> </div>
<div class="infoitem"> <div class="infoitem">
<span class="label">年龄:</span> <span class="label">年龄:</span>
<span>{{i.age}}</span> <span class="one-line-hide">{{i.age}}</span>
</div> </div>
</div> </div>
<div class="info"> <div class="info">
<div class="infoitem"> <div class="infoitem">
<span class="label">学生母语:</span> <span class="label">学生母语:</span>
<span>{{i.mtongue }}</span> <span class="one-line-hide">{{i.mtongue }}</span>
</div> </div>
<div class="infoitem"> <div class="infoitem">
<span class="label">兴趣点:</span> <span class="label">兴趣点:</span>
<span>{{interest}}</span> <span class="one-line-hide">{{i.interestStr}}</span>
</div> </div>
<div class="infoitem"> <div class="infoitem">
<span class="label">语言等级:</span> <span class="label">语言等级:</span>
<span>asd</span> <span class="one-line-hide">asd</span>
</div> </div>
<div>参加平台直播课程总时长：<span class="time">{{i.longtime}}min</span></div> <div>参加平台直播课程总时长：<span class="time">{{i.longtime}}min</span></div>
@ -130,6 +130,10 @@
line-height: 45px; line-height: 45px;
.infoitem { .infoitem {
width: 194px; width: 194px;
display: flex;
.label{
flex-shrink: 0;
}
} }
} }

9
src/views/regime/date.vue
View File

@ -6,7 +6,7 @@
上一月 上一月
</div> </div>
{{month.year}}年{{month.yue}}月 {{month.year}}年{{month.yue}}月
<a-button type="primary" class="button"> <a-button type="primary" class="button" @click="navto()">
周日历 周日历
</a-button> </a-button>
<div @click="xia"> <div @click="xia">
@ -190,6 +190,7 @@ import { computed, defineComponent, ref, watch } from 'vue';
import { getdate, getDay } from "@/utils/date" import { getdate, getDay } from "@/utils/date"
import { getdatelist } from '@/api'; import { getdatelist } from '@/api';
import store from '@/store'; import store from '@/store';
import router from '@/router';
export default defineComponent({ export default defineComponent({
props:{ props:{
@ -238,12 +239,16 @@ export default defineComponent({
console.log(month.value.date) console.log(month.value.date)
}) })
} }
function navto(){
router.push("/regime/week")
}
getdates(userid.value); getdates(userid.value);
return { return {
month, month,
xia, xia,
shang, shang,
yue yue,
navto
} }
} }
}) })

281
src/views/regime/week.vue
View File

@ -2,49 +2,69 @@
<div class="week"> <div class="week">
<div class="head"> <div class="head">
<div @click="zhou--"> <div @click="zhou--">
<img src="" alt=""> <img src="" alt="" />
上一周 上一周
</div> </div>
2020年10月 2020年10月
<a-button type="primary" class="button"> <a-button type="primary" class="button"> 月日历 </a-button>
月日历
</a-button>
<div @click="zhou++"> <div @click="zhou++">
下一周 下一周
<img src="" alt=""> <img src="" alt="" />
</div> </div>
</div> </div>
<div class="week"> <div class="week">
<div class="heads"> <div class="heads">
<div></div> <div></div>
<div :class="{zhou: zhou == 0 && week.zhou == 1}">周一<span>{{week.date[0].day}}</span></div> <div :class="{ zhou: zhou == 0 && week.zhou == 1 }">
<div :class="{zhou: zhou == 0 && week.zhou == 2}">周二<span>{{week.date[1].day}}</span></div> 周一<span>{{ week.date[0].day }}</span>
<div :class="{zhou: zhou == 0 && week.zhou == 3}">周三<span>{{week.date[2].day}}</span></div>
<div :class="{zhou: zhou == 0 && week.zhou == 4}">周四<span>{{week.date[3].day}}</span></div>
<div :class="{zhou: zhou == 0 && week.zhou == 5}">周五<span>{{week.date[4].day}}</span></div>
<div :class="{zhou: zhou == 0 && week.zhou == 6}">周六<span>{{week.date[5].day}}</span></div>
<div :class="{zhou: zhou == 0 && week.zhou == 0}">周日<span>{{week.date[6].day}}</span></div>
</div> </div>
<div class="body"> <div :class="{ zhou: zhou == 0 && week.zhou == 2 }">
<div class="row" v-for="item in 24" :key="item"> 周二<span>{{ week.date[1].day }}</span>
<div class="day date">{{item > 10 ? item : '0' + item}}:00</div> </div>
<div v-for="i in 7" :key="i"> <div :class="{ zhou: zhou == 0 && week.zhou == 3 }">
<div class="day"> 周三<span>{{ week.date[2].day }}</span>
</div>
<div :class="{ zhou: zhou == 0 && week.zhou == 4 }">
周四<span>{{ week.date[3].day }}</span>
</div>
<div :class="{ zhou: zhou == 0 && week.zhou == 5 }">
周五<span>{{ week.date[4].day }}</span>
</div>
<div :class="{ zhou: zhou == 0 && week.zhou == 6 }">
周六<span>{{ week.date[5].day }}</span>
</div>
<div :class="{ zhou: zhou == 0 && week.zhou == 0 }">
周日<span>{{ week.date[6].day }}</span>
</div>
</div>
<div class="body">
<div class="row" v-for="item in 24" :key="item">
<div class="day date">
{{ item > 10 ? item - 1 : "0" + (item - 1) }}:00-{{
item > 9 ? item : "0" + item
}}:00
</div>
<div v-for="i in 7" :key="i">
<div class="day">
<div class="next" v-if="week.date[i -1].list[item - 1].title != ''">
<div class="one-line-hide" style="max-width: 1.5rem">
{{week.date[i -1].list[item - 1].title}}
</div>
<div>{{week.date[i -1].list[item - 1].time}}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.week{ .week {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.head{ .head {
width: 1320px; width: 1320px;
height: 57px; height: 57px;
background-color: #fff; background-color: #fff;
@ -52,33 +72,33 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
>div{ > div {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 13px; font-size: 13px;
color: #0DBBA4; color: #0dbba4;
>img{ > img {
width: 7px; width: 7px;
height: 11px; height: 11px;
} }
} }
>div:first-child{ > div:first-child {
margin-right: 90px; margin-right: 90px;
>img{ > img {
margin-right: 11px; margin-right: 11px;
} }
} }
>div:last-child{ > div:last-child {
margin-left: 90px; margin-left: 90px;
>img{ > img {
margin-left: 11px; margin-left: 11px;
} }
} }
.button{ .button {
width: 57px; width: 57px;
height: 26px; height: 26px;
background-color: #0DBBA4; background-color: #0dbba4;
border-right: 4px; border-right: 4px;
border: none; border: none;
font-size: 10px; font-size: 10px;
@ -88,19 +108,19 @@
right: 40px; right: 40px;
} }
} }
.week{ .week {
.heads{ .heads {
width: 1320px; width: 1320px;
height: 63px; height: 63px;
display: flex; display: flex;
>div{ > div {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #F5FEFD; background-color: #f5fefd;
text-align: center; text-align: center;
line-height: 1; line-height: 1;
font-size: 13px; font-size: 13px;
color: #08AE98; color: #08ae98;
border-right: 1px solid #eee; border-right: 1px solid #eee;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@ -108,118 +128,127 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
>span{ > span {
font-size: 11px; font-size: 11px;
margin-top: 9px; margin-top: 9px;
color: #111; color: #111;
} }
} }
.zhou{ .zhou {
color: #fff;
background: #08ae98;
> span {
color: #fff; color: #fff;
background: #08AE98;
>span{
color: #fff;
} }
} }
} }
.body{ .body {
width: 100%; width: 100%;
.row{ .row {
background-color: #fff; background-color: #fff;
height: 63px; height: 63px;
width: 100%;
display: flex;
.date {
background-color: #f5fefd;
text-align: center;
line-height: 63px;
font-size: 11px;
color: #111;
}
> div {
width: 100%; width: 100%;
display: flex; border-top: 1px solid #eee;
.date{ border-right: 1px solid #eee;
background-color: #F5FEFD; .day {
text-align: center; height: 100%;
line-height: 63px; display: flex;
font-size: 11px; flex-direction: column;
color: #111; color: #111;
}
>div{ > div {
width: 100%; min-height: 100%;
border-top: 1px solid #eee;
border-right: 1px solid #eee;
.day{
width: 100%; width: 100%;
height: 100%; border-radius: 6px;
overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: #111; align-items: center;
>div{ justify-content: center;
height: 100%; font-size: 11px;
border-radius: 6px; border-radius: 6px;
padding: 18px; overflow: hidden;
overflow: hidden; > div:last-child {
.item{ font-size: 11px;
display: flex; margin-top: 8px;
align-items: center;
margin-top: 11px;
>div{
width: 6px;
height: 6px;
background-color: #111;
margin-right: 6px;
border-radius: 50%;
}
>p{
line-height: 1;
margin: 0;
}
}
}
.old{
background-color: #F7F7F7;
}
.ing{
background-color: #0DBBA4;
color: #fff;
.item{
>div{
background-color: #fff;
}
}
}
.next{
background-color: #CEF9F0;
color: #0DBBA4;
.item{
>div{
background-color: #0DBBA4;
}
}
} }
} }
.old {
background-color: #f7f7f7;
color: #111;
}
.ing {
background-color: #0dbba4;
color: #fff;
}
.next {
background-color: #cef9f0;
color: #0dbba4;
}
} }
>div::last-child{ }
border: unset; > div::last-child {
} border: unset;
}
} }
} }
} }
} }
</style> </style>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, watch } from 'vue'; import { defineComponent, ref, watch } from "vue";
import { getweek } from "@/utils/date" import { getDay, gethour, getminute, gettime, getweek } from "@/utils/date";
import store from '@/store';
import { getdatelist, userinfo } from '@/api';
export default defineComponent({ export default defineComponent({
props:{ props: {},
setup() {
},
setup(){
const zhou = ref(0); const zhou = ref(0);
const week = ref(getweek()); const week = ref<any>(getweek());
console.log(week.value) const userid = store.state.userinfo.memberid;
watch(zhou,(value) => { console.log(week.value);
week.value = getweek(value) getdates(userid);
console.log(week.value) function getdates(userid: number){
}) getdatelist(week.value.start, week.value.end, userid).then((res: any)=>{
console.log(res)
for(let i in res){
const day = getDay(res[i].dateline)
console.log(day)
for(let j in week.value.date){
console.log(getDay(week.value.date[j].day))
if(day == getDay(week.value.date[j].day)){
console.log("fuzhi")
week.value.date[j].list[gethour(res[i].dateline)].start = getminute(res[i].dateline);
week.value.date[j].list[gethour(res[i].dateline)].num = res[i].livetime
week.value.date[j].list[gethour(res[i].dateline)].title = res[i].title
week.value.date[j].list[gethour(res[i].dateline)].time = gettime(res[i].dateline, res[i].livetime)
}
}
}
console.log(week.value)
})
}
watch(zhou, (value) => {
week.value = getweek(value);
console.log(week.value);
getdates(userid)
});
return { return {
zhou, zhou,
week week,
} };
} },
}) });
</script> </script>

4529
yarn.lock
View File

File diff suppressed because it is too large Load Diff