init

common/api.js

@@ -15,6 +15,7 @@ import record from './httpList/record.js'
 import plan from './httpList/plan.js'
 import wxpay from './httpList/wxpay.js'
 import order from './httpList/order.js'
+import category from './httpList/category.js'
 export default {
 	...login,
 	...polyvVideo,
@@ -32,5 +33,6 @@ export default {
 	...record,
 	...plan,
 	...wxpay,
-	...order
+	...order,
+	...category
 }

common/httpList/category.js

@@ -0,0 +1,20 @@
+import {
+	myRequest
+} from '../request.js'
+export default {
+	//查询【专业分类】列表
+	coursecategorylist(data) {
+		return myRequest({
+			url: '/course/category/list',
+			method: 'get',
+			data: data,
+		})
+	},
+	//获取【专业分类】详细信息
+	coursecategory(data) {
+		return myRequest({
+			url: '/course/category/' + data,
+			method: 'get',
+		})
+	},
+}

common/httpList/collect.js

@@ -109,6 +109,14 @@ export default {
 		})
 	},
 	
+	//查询用户做历史列表
+	questionListrecordDoneList(data) {
+		return myRequest({
+			url: '/bank/question/record/doneList',
+			method: 'get',
+			data: data,
+		})
+	},
 	//查询用户错题历史列表
 	questionListrecord(data) {
 		return myRequest({

common/httpList/plan.js

@@ -2,6 +2,7 @@ import {
 	myRequest
 } from '../request.js'
 export default {
+	//生成学习计划
 	planGenerate(data) {
 		return myRequest({
 			url: '/plan/generate',
@@ -9,6 +10,15 @@ export default {
 			data: data
 		})
 	},
+	//修改计划
+	planupdateGenerate(data) {
+		return myRequest({
+			url:'/plan/updateGenerate',
+			method: 'post',
+			data: data
+		})
+	},
+	//获得用户学习计划
 	planUserPlan(data) {
 		return myRequest({
 			url: '/plan/userPlan',

common/request.js

@@ -1,7 +1,7 @@
 
-//const BASE_URL = 'http://127.0.0.1:8088'
+const BASE_URL = 'http://192.168.0.222:8088'
 // const BASE_URL = 'http://192.168.0.145:8088'   //
-const BASE_URL = 'https://api.xyyxt.net'  //
+// const BASE_URL = 'https://api.xyyxt.net'  //
 import store from '@/store/index.js'
 import api from './api.js'
 var num = 1

pages2/bank/detail.vue

@@ -14,7 +14,7 @@
 												<canvas class="progress_bg" canvas-id="canvasProgressbg"></canvas>
 												<canvas class="progress_canvas" canvas-id="canvasProgress"></canvas>
 												<view class="progress_text">
-													<view class="u-progress-dot">68</view>
+													<view class="u-progress-dot">{{isDoneListsLenght === 0 && pageData.questionNum === 0 ? 0 :((isDoneListsLenght / pageData.questionNum) * 100).toFixed(0) }}</view>
 													<text class="u-progress-info">%</text>
 												</view>
 											</view>
@@ -24,9 +24,9 @@
 								<u-col span="5">
 									<view style="margin-top: 20rpx;">
 										<view class="t1">总题数</view>
-										<view class="t3">{{pageData.questionNum}}</view>
+										<view class="t3">{{ pageData.questionNum }}</view>
 										<view class="t1">已答过</view>
-										<view class="t3">0</view>
+										<view class="t3">{{ isDoneListsLenght }}</view>
 									</view>
 								</u-col>
 							</u-row>
@@ -35,7 +35,7 @@
 					<view class="box2" @click="jumpExam(2)">
 						<view style="height: 100%;display: flex;flex-direction: column;justify-content: center;">
 							<view style="text-align: center;">
-								<view class="big_num">{{errorLists}}</view>
+								<view class="big_num">{{ errorLists }}</view>
 								<view class="t4">
 									错题集
 									<u-icon name="arrow-right" size="28"></u-icon>
@@ -46,7 +46,7 @@
 					<view class="box2" @click="jumpExam(1)">
 						<view style="height: 100%;display: flex;flex-direction: column;justify-content: center;">
 							<view style="text-align: center;">
-								<view class="big_num">{{favoritesLength}}</view>
+								<view class="big_num">{{ favoritesLength }}</view>
 								<view class="t4">
 									收藏集
 									<u-icon name="arrow-right" size="28"></u-icon>
@@ -244,14 +244,14 @@ export default {
 			pageData: [], //传入数据
 			teachersList: [], //教师数据
 			recommendListS: [], //推荐列表
-			favoritesLength: 0,//收藏集数量
-			errorLists: 0,//错题集数量
-			id: 0
+			favoritesLength: 0, //收藏集数量
+			errorLists: 0, //错题集数量
+			id: 0,
+			isDoneListsLenght: 0
 		};
 	},
 	onLoad(option) {
 		this.drawProgressbg();
-		this.drawCircle(1.3); // 0-2
 		this.id = option.id;
 		var options = {};
 		this.$api.bankInfo(option.id).then(res => {
@@ -273,29 +273,43 @@ export default {
 		} else {
 			this.favoritesStatus();
 			this.favoritesList();
-			this.errorList()
+			this.errorList();
+			this.isDoneList();
 		}
 	},
 	methods: {
+		isDoneList() {
+			var self = this;
+			var data = {
+				bankId: self.id
+			};
+			self.$api.questionListrecordDoneList(data).then(res => {
+				self.isDoneListsLenght = res.data.rows.length;
+				if (res.data.rows.length === 0 && self.pageData.questionNum === 0) {
+					self.drawCircle(0)
+				} else {
+					self.drawCircle(((res.data.rows.length / self.pageData.questionNum) * 2).toFixed(1)); // 0-2
+				}
+			});
+		},
 		// 收藏
 		favoritesList() {
-			var data ={
+			var data = {
 				bankId: this.id
-			}
+			};
 			this.$api.systemquestionList(data).then(res => {
-				console.log(res)
-				this.favoritesLength = res.data.rows.length
-			})
+				this.favoritesLength = res.data.rows.length;
+			});
 		},
 		//错题集
-		errorList(){
-			var self = this
-			var data ={
+		errorList() {
+			var self = this;
+			var data = {
 				bankId: self.id
-			}
+			};
 			self.$api.questionListrecord(data).then(res => {
-				self.errorLists = res.data.rows.length
-			})
+				self.errorLists = res.data.rows.length;
+			});
 		},
 		getBankDList(options) {
 			var data = {
@@ -434,7 +448,7 @@ export default {
 				}
 			}
 		},
-		changeComNewPages(item){
+		changeComNewPages(item) {
 			this.$navTo.togo('/pages2/bank/detail', {
 				id: item.bankId
 			});

pages2/bank/question.vue

@@ -851,6 +851,7 @@ export default {
 }
 .footer_tab {
 	position: fixed;
+	z-index: 999;
 	bottom: 0;
 	height: 96rpx;
 	width: 100%;

pages2/plan/create.vue

@@ -1,447 +1,428 @@
 <template>
-	<view style="padding: 30rpx;" >
+	<view style="padding: 30rpx;">
 		<view class="list_box">
-			<view class="item" v-for="(item,index) in list" :key="index" >
-				<image :src="item.coverUrl" ></image>
-				<text >{{item.courseName}}</text>
-				<view class="del_icon">
-					<u-icon name="minus-circle-fill" color="#EB4D3D" size="40" @click="delItem(index)"></u-icon>
-				</view>
+			<view class="item" v-for="(item, index) in list" :key="index">
+				<image :src="item.coverUrl"></image>
+				<text>{{ item.courseName }}</text>
+				<view class="del_icon"><u-icon name="minus-circle-fill" color="#EB4D3D" size="40" @click="delItem(index)"></u-icon></view>
 			</view>
 			<view class="item" style="vertical-align: top;">
-				<view class="item_add" @click="openSel">
-					<u-icon name="plus-circle-fill" color="#32467B" size="32"></u-icon>
-				</view>
+				<view class="item_add" @click="openSel"><u-icon name="plus-circle-fill" color="#32467B" size="32"></u-icon></view>
 			</view>
 		</view>
 		<view class="list_box form">
 			<u-form :model="form" ref="uForm">
-				<u-form-item label="课程类型" :label-width="auto"><u-input v-model="form.category" :disabled="true"/></u-form-item>
-				<u-form-item  label="考试日期" prop="birth" :label-width="auto">
-					<picker mode="date" :value="form.date"   @change="bindDateChange">
-						<view class="picker">
-						  {{form.date}}
-						</view>
-					  </picker>
+				<u-form-item label="课程类型" :label-width="auto"><u-input v-model="form.category" :disabled="true" /></u-form-item>
+				<u-form-item label="考试日期" prop="birth" :label-width="auto">
+					<picker mode="date" :value="form.date" @change="bindDateChange">
+						<view class="picker">{{ form.date }}</view>
+					</picker>
 				</u-form-item>
-				<u-form-item  label="学习提醒" prop="birth" :label-width="auto">
-					<picker mode="time" :value="form.time"   @change="bindTimeChange">
-						<view class="picker">
-						  {{form.time}}
-						</view>
-					  </picker>
+				<u-form-item label="学习提醒" prop="birth" :label-width="auto">
+					<picker mode="time" :value="form.time" @change="bindTimeChange">
+						<view class="picker">{{ form.time }}</view>
+					</picker>
 				</u-form-item>
 				<u-form-item label="学习频率" :label-width="auto">
-					<view class="picker" @click="openWeek" >
-					  {{form.week}}
-					</view>
+					<view class="picker" @click="openWeek">{{ form.week }}</view>
 				</u-form-item>
 				<u-form-item label="复习天数" :label-width="auto">
 					<picker @change="bindPickerChangeReview" :value="index_review" :range="array_review">
-					              <view class="picker">
-					                {{array_review[index_review]}}
-					              </view>
-					    </picker>
+						<view class="picker">{{ array_review[index_review] }}</view>
+					</picker>
 				</u-form-item>
 				<u-form-item label="起止日期" :label-width="auto">
-					<view class="picker" @click="openCalendar">
-							{{form.startDate}}~{{form.endDate}}
-					</view>
-					
+					<view class="picker" @click="openCalendar">{{ form.startDate }}~{{ form.endDate }}</view>
 				</u-form-item>
 			</u-form>
 		</view>
-		<u-calendar v-model="calendar_show" :mode="calendar" @change="change" :max-date="maxDate">
-		    </u-calendar>
+		<u-calendar v-model="calendar_show" :mode="calendar" @change="change" :max-date="maxDate"></u-calendar>
 		<!-- 弹框-->
 		<u-popup v-model="week_show" mode="bottom">
 			<view style="height: 400rpx;text-align: center">
-					<view style="padding-top: 100rpx;padding-left: 40rpx;text-align: center;">
-						<u-checkbox-group @change="checkboxGroupChange">
-							<u-checkbox 	
-								v-model="item.checked" 
-								v-for="(item, index) in list3" :key="index" 
-								:name="item.name"
-							>{{item.name}}</u-checkbox>
-						</u-checkbox-group>
-						<view class="title_l" @click="week_submit" style="margin: 50rpx auto;">确认</view>
-					</view>
+				<view style="padding-top: 100rpx;padding-left: 40rpx;text-align: center;">
+					<u-checkbox-group @change="checkboxGroupChange">
+						<u-checkbox v-model="item.checked" v-for="(item, index) in list3" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
+					</u-checkbox-group>
+					<view class="title_l" @click="week_submit" style="margin: 50rpx auto;">确认</view>
 				</view>
+			</view>
 		</u-popup>
 		<u-popup v-model="show" mode="bottom">
-			<view class="popup_box" >
+			<view class="popup_box">
 				<view class="popup_title">
-					<u-row >
-						<u-col span="6">
-							<view class="title_r">我的课程</view>
-						</u-col>
-						<u-col span="3" offset="3">
-							<view class="title_l" @click="submit">确认</view>
-						</u-col>
+					<u-row>
+						<u-col span="6"><view class="title_r">我的课程</view></u-col>
+						<u-col span="3" offset="3"><view class="title_l" @click="submit">确认</view></u-col>
 					</u-row>
 				</view>
 				<view class="popup_list">
-					<view class="popup_item" v-for="(item,index) in list2" :key="index">
-						<view style="line-height:182rpx ;">
-							<u-checkbox :disabled="item.disabled"
-								@change="checkboxChange"  shape="circle" active-color="#32467B"
-								v-model="item.checked"  :key="index" :name="item.courseId"></u-checkbox>
-						</view>
-						<view >
-							<image :src="item.coverUrl" style="width: 278rpx;height: 134rpx;"></image>
-						</view>
-						<view style="margin: 30rpx;">
-							{{item.courseName}}
+					<view class="popup_item" v-for="(item, index) in list2" :key="index">
+						<view style="display: flex;align-items: center;">
+							<u-checkbox
+								:disabled="item.disabled"
+								@change="checkboxChange"
+								shape="circle"
+								active-color="#32467B"
+								v-model="item.checked"
+								:key="index"
+								:name="item.courseId"
+							></u-checkbox>
 						</view>
+						<view style="display: flex;align-items: center;"><image :src="item.coverUrl" style="width: 278rpx;height: 134rpx;"></image></view>
+						<view style="margin: 30rpx;">{{ item.courseName }}</view>
 					</view>
-					
 				</view>
 			</view>
 		</u-popup>
-		<button  @click="resultForm" class="submit_btn">提交</button>
+		<button @click="resultForm" class="submit_btn">提交</button>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				week_show:false,
-				form:{
-					category:'二级建造师',
-					date:'2021-01-01',
-					time:'20:30',
-					startDate:'2021-05-07',
-					endDate:'2021-05-31',
-					week:'一'
-				},
-				calendar: 'range',
-				list:[
-					],
-				list2:[
-					{url:'/static/banner.png',id:33,disabled:false,
-					checked:false},
-					{url:'/static/banner.png',id:34,disabled:false,checked:false},
-					{url:'/static/banner.png',id:35,disabled:false,checked:false}],
-				show:false,
-				calendar_show:false,
-				maxDate:'2023-01-01',
-				list3:[{
+export default {
+	data() {
+		return {
+			week_show: false,
+			form: {
+				category: '',
+				date: '2021-01-01',
+				time: '20:30',
+				startDate: '2021-05-07',
+				endDate: '2021-05-31',
+				week: '一'
+			},
+			calendar: 'range',
+			list: [],
+			list2: [
+				{ url: '/static/banner.png', id: 33, disabled: false, checked: false },
+				{ url: '/static/banner.png', id: 34, disabled: false, checked: false },
+				{ url: '/static/banner.png', id: 35, disabled: false, checked: false }
+			],
+			show: false,
+			calendar_show: false,
+			maxDate: '2023-01-01',
+			list3: [
+				{
 					name: '一',
 					checked: false,
 					disabled: false,
-					id:1
-				},{
+					id: 1
+				},
+				{
 					name: '二',
 					checked: false,
 					disabled: false,
-					id:2
-				},{
+					id: 2
+				},
+				{
 					name: '三',
 					checked: false,
 					disabled: false,
-					id:3
-				},{
+					id: 3
+				},
+				{
 					name: '四',
 					checked: false,
 					disabled: false,
-					id:4
-				},{
+					id: 4
+				},
+				{
 					name: '五',
 					checked: false,
 					disabled: false,
-					id:5
+					id: 5
 				},
 				{
 					name: '六',
 					checked: false,
 					disabled: false,
-					id:6
+					id: 6
 				},
 				{
 					name: '日',
 					checked: false,
 					disabled: false,
-					id:0
-				}],
-				selWeek:'',
-				index_review: 4,
-				array_review: [1, 2, 3, 4, 5, 6, 7],	
+					id: 0
+				}
+			],
+			selWeek: '',
+			index_review: 4,
+			array_review: [1, 2, 3, 4, 5, 6, 7]
+		};
+	},
+	onLoad(option) {
+		this.form.startDate = this.$method.timestampToTime(new Date().getTime() / 1000);
+		this.form.endDate = this.$method.timestampToTime(new Date().getTime() / 1000 + 24 * 3600 * 10);
+		this.getMyCourse();
+	},
+	onShow() {},
+	methods: {
+		resultForm() {
+			if (this.list.length == 0) {
+				uni.showModal({
+					title: '提示',
+					content: '请选择课程',
+					showCancel: false
+				});
+				return;
 			}
-		},
-		onLoad(option) {
-			this.form.startDate = this.$method.timestampToTime((new Date()).getTime()/1000)
-			this.form.endDate = this.$method.timestampToTime((new Date()).getTime()/1000 + 24*3600*10)
-			this.getMyCourse()
-		},
-		onShow(){
-			
-		},
-		methods: {
-			resultForm(){
-				if(this.list.length==0){
-					uni.showModal({
-						title: '提示',
-						content: '请选择课程',
-						showCancel: false
-					});
-					return 
+			let courseId = [];
+			for (let i = 0; i < this.list.length; i++) {
+				courseId.push(this.list[i].courseId);
+			}
+			let ss = this.form.week.split('、');
+			let weekArray = [];
+			for (let i = 0; i < ss.length; i++) {
+				if (ss[i] == '日') {
+					weekArray.push(0);
 				}
-				let courseId = [];
-				for(let i=0;i<this.list.length;i++){
-					courseId.push(this.list[i].courseId)
+				if (ss[i] == '一') {
+					weekArray.push(1);
 				}
-				let ss = this.form.week.split("、");
-				let weekArray = []
-				for(let i=0;i<ss.length;i++){
-					if(ss[i]=='日'){
-						weekArray.push(0)
-					}
-					if(ss[i]=='一'){
-						weekArray.push(1)
-					}
-					if(ss[i]=='二'){
-						weekArray.push(2)
-					}
-					if(ss[i]=='三'){
-						weekArray.push(3)
-					}
-					if(ss[i]=='四'){
-						weekArray.push(4)
-					}
-					if(ss[i]=='五'){
-						weekArray.push(5)
-					}
-					if(ss[i]=='六'){
-						weekArray.push(6)
-					}
+				if (ss[i] == '二') {
+					weekArray.push(2);
 				}
-				let data = {
-					courseId:courseId.join(","),
-					reminderTime:this.form.time,
-					examDate:this.$method.TimeTotimestamp(this.form.date),
-					startTime:this.$method.TimeTotimestamp(this.form.startDate),
-					endTime:this.$method.TimeTotimestamp(this.form.endDate),
-					endTime:this.$method.TimeTotimestamp(this.form.endDate),
-					studyCount:weekArray.join(","),
-					studyDay:this.array_review[this.index_review],
-					status:1
+				if (ss[i] == '三') {
+					weekArray.push(3);
 				}
-				console.log(data)
-				this.$api.planGenerate(data).then(result => {
-					if(result.data.code==200){
-						uni.showModal({
-						    title: '提示',
-						    content: '提交成功',
-						});
-					}
-					console.log(result)
-				});
-				
-			},
-			selItem(item){
-				console.log(34)
-				item.checked = !item.checked
-			},
-			getMyCourse(){
-			    let data = {
-			     typeId:0
-			    }
-			    let self = this
-			    this.$api.getUserBuy(data).then(result => {
-			     if(result.data.data.courseVoList.length>0){
-			      for(let i=0;i<result.data.data.courseVoList.length;i++){
-			       let item = result.data.data.courseVoList[i]
-			       item.checked = false
-			       item.disabled = false
-				   item.coverUrl = self.$method.splitImgHost(item.coverUrl)
-			      }
-			     }
-			     self.list2 = result.data.data.courseVoList
-			     console.log(self.list2)
-			    });
-			   },
-			bindPickerChangeReview(e){
-				this.index_review= e.detail.value
-			},
-			week_submit(){
-				if(this.selWeek==''){
+				if (ss[i] == '四') {
+					weekArray.push(4);
+				}
+				if (ss[i] == '五') {
+					weekArray.push(5);
+				}
+				if (ss[i] == '六') {
+					weekArray.push(6);
+				}
+			}
+			let data = {
+				courseId: courseId.join(','),
+				reminderTime: this.form.time,
+				examDate: this.$method.TimeTotimestamp(this.form.date),
+				startTime: this.$method.TimeTotimestamp(this.form.startDate),
+				endTime: this.$method.TimeTotimestamp(this.form.endDate),
+				studyCount: weekArray.join(','),
+				studyDay: this.array_review[this.index_review],
+				status: 1
+			};
+			console.log(data);
+			this.$api.planGenerate(data).then(result => {
+				if (result.data.code == 200) {
 					uni.showModal({
-					    title: '提示',
-					    content: '至少选择一个',
+						title: '提示',
+						content: '提交成功'
 					});
-					return
 				}
-				this.form.week = this.selWeek
-				this.week_show = false
-			},
-			openWeek(){
-				this.week_show = true
-				this.selWeek = this.form.week
-				let that = this
-				this.list3.map(val => {
-					val.checked = false
-					if(that.form.week.indexOf(val.name) != -1){
-						val.checked = true
+				console.log(result);
+			});
+		},
+		selItem(item) {
+			console.log(34);
+			item.checked = !item.checked;
+		},
+		getMyCourse() {
+			let data = {
+				typeId: 0
+			};
+			let self = this;
+			this.$api.getUserBuy(data).then(result => {
+				if (result.data.data.courseVoList.length > 0) {
+					for (let i = 0; i < result.data.data.courseVoList.length; i++) {
+						let item = result.data.data.courseVoList[i];
+						item.checked = false;
+						item.disabled = false;
+						item.coverUrl = self.$method.splitImgHost(item.coverUrl);
 					}
-				})
-			},
-			checkboxGroupChange(e){
-				this.selWeek = e.join("、")
-			},
-			openCalendar(){
-				this.calendar_show = true
-			},
-			change(e) {
-				console.log(e);
-				this.form.startDate = e.startDate
-				this.form.endDate = e.endDate
-			},
-			bindTimeChange(e){
-				this.form.time=e.detail.value
-			},
-			bindDateChange(e){
-				this.form.date=e.detail.value
-				
-			},
-			submit(){
-				let that = this
-				this.list2.map(val => {
-					if(val.checked){
-						that.list.push(val);
+				}
+				self.list2 = result.data.data.courseVoList;
+				console.log(self.list2);
+			});
+		},
+		bindPickerChangeReview(e) {
+			this.index_review = e.detail.value;
+		},
+		week_submit() {
+			if (this.selWeek == '') {
+				uni.showModal({
+					title: '提示',
+					content: '至少选择一个'
+				});
+				return;
+			}
+			this.form.week = this.selWeek;
+			this.week_show = false;
+		},
+		openWeek() {
+			this.week_show = true;
+			this.selWeek = this.form.week;
+			let that = this;
+			this.list3.map(val => {
+				val.checked = false;
+				if (that.form.week.indexOf(val.name) != -1) {
+					val.checked = true;
+				}
+			});
+		},
+		checkboxGroupChange(e) {
+			this.selWeek = e.join('、');
+		},
+		openCalendar() {
+			this.calendar_show = true;
+		},
+		change(e) {
+			console.log(e);
+			this.form.startDate = e.startDate;
+			this.form.endDate = e.endDate;
+		},
+		bindTimeChange(e) {
+			this.form.time = e.detail.value;
+		},
+		bindDateChange(e) {
+			this.form.date = e.detail.value;
+		},
+		submit() {
+			let that = this;
+			this.list2.map(val => {
+				if (val.checked) {
+					that.list.push(val);
+				}
+			});
+			this.checkSameItem();
+			this.show = false;
+			this.form.category = this.list[0].categoryName
+		},
+		checkboxChange(e) {},
+		checkSameItem() {
+			this.list2.map(val => {
+				val.disabled = false;
+				this.list.map(val1 => {
+					if (val.courseId == val1.courseId) {
+						val.disabled = true;
 					}
-				})
-				this.checkSameItem()
-				this.show = false
-			},
-			checkboxChange(e){
-			},
-			checkSameItem(){
-				this.list2.map(val => {
-					val.disabled = false
-					this.list.map(val1 => {
-						if(val.courseId == val1.courseId){
-							val.disabled = true
-						}
-						val.checked= false
-					})
-				})
-			},
-			delItem(index){
-				this.list.splice(index,1)
-			},
-			openSel(){
-				this.show = true
-				this.checkSameItem()
+					val.checked = false;
+				});
+			});
+		},
+		delItem(index) {
+			this.list.splice(index, 1);
+			if(this.list.length === 0){
+				this.form.category = ''
+			}else{
+				this.form.category = this.list[0].categoryName
 			}
 		},
-		
+		openSel() {
+			this.show = true;
+			this.checkSameItem();
+		}
 	}
+};
 </script>
 <style>
-	::-webkit-scrollbar{
-		width: 0;
-		height: 0;
-		color: transparent;
-	}
-	.u-drawer-content-visible{
-		border-radius: 32rpx 32rpx 0rpx 0rpx;
-		overflow: hidden;
-	}
+::-webkit-scrollbar {
+	width: 0;
+	height: 0;
+	color: transparent;
+}
+.u-drawer-content-visible {
+	border-radius: 32rpx 32rpx 0rpx 0rpx;
+	overflow: hidden;
+}
 </style>
 <style scope>
-	.submit_btn{
-		background-color: #32467B !important;
-		border-color: #32467B !important;
-		color: #FFFFFF;
-		font-size: 30rpx;
-		padding: 5rpx;
-		margin-top: 50rpx;
-	}
-	.picker{
-		text-align: right;
-	}
-	.form{
-		padding:0 16rpx !important;
-		margin-top: 30rpx;
-	}
-	input{
-		text-align: right;
-	}
-	.popup_item{
-		width: 100%;
-		height: 182rpx;
-		background: #FFFFFF;
-		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
-		border-radius: 32rpx;
-		margin: 20rpx 0;
-		padding: 10rpx;
-		display: flex;
-	}
-	.popup_list{
-		height: 500rpx;
-		padding: 0 20rpx;
-	}
-	.title_l{
-		width: 88rpx;
-		height: 48rpx;
-		background: #32467B;
-		border-radius: 16rpx;
-		font-size: 28rpx;
-		color: #FFFFFF;
-		text-align: center;
-		line-height: 48rpx;
-	}
-	.title_r{
-		font-size: 30rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
-		color: #2F4379;
-	}
-	.popup_title{
-		width: 100%;
-		margin: 40rpx;	
-	}
-	.popup_box{
-		height: 600rpx;
-	}
-	.del_icon{
-		position: absolute;
-		right: -15rpx;
-		top: -15rpx;
-	}
-	.item_add{
-		background: #F9F9F9;
-		border-radius: 32rpx;
-		width: 100%;
-		height:150rpx ;
-		text-align: center;
-		line-height: 150rpx;
-	}
-	.item text{
-		font-size: 24rpx;
-		color: #0C141F;
-	}
-	.item image{
-		border-radius: 32rpx;
-		width: 100%;
-		height:150rpx ;
-	}
-	.item{
-		width: 46%;
-		display: inline-block;
-		margin: 1% 2%;
-		position: relative;
-	}
-	.list_box{
-		width: 100%;
-		background: #FFFFFF;
-		box-shadow: 0rpx 0rpx 1rpx 4rpx rgba(145, 156, 178, 0.1);
-		border-radius: 32rpx;
-		padding: 20rpx 0;
-	}
-	
+.submit_btn {
+	background-color: #32467b !important;
+	border-color: #32467b !important;
+	color: #ffffff;
+	font-size: 30rpx;
+	padding: 5rpx;
+	margin-top: 50rpx;
+}
+.picker {
+	text-align: right;
+}
+.form {
+	padding: 0 16rpx !important;
+	margin-top: 30rpx;
+}
+input {
+	text-align: right;
+}
+.popup_item {
+	width: 100%;
+	height: 182rpx;
+	background: #ffffff;
+	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
+	border-radius: 32rpx;
+	margin: 20rpx 0;
+	padding: 10rpx;
+	display: flex;
+}
+.popup_list {
+	height: 500rpx;
+	padding: 0 20rpx;
+}
+.title_l {
+	width: 88rpx;
+	height: 48rpx;
+	background: #32467b;
+	border-radius: 16rpx;
+	font-size: 28rpx;
+	color: #ffffff;
+	text-align: center;
+	line-height: 48rpx;
+}
+.title_r {
+	font-size: 30rpx;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #2f4379;
+}
+.popup_title {
+	width: 100%;
+	margin: 40rpx;
+}
+.popup_box {
+	height: 600rpx;
+}
+.del_icon {
+	position: absolute;
+	right: -15rpx;
+	top: -15rpx;
+}
+.item_add {
+	background: #f9f9f9;
+	border-radius: 32rpx;
+	width: 100%;
+	height: 150rpx;
+	text-align: center;
+	line-height: 150rpx;
+}
+.item text {
+	font-size: 24rpx;
+	color: #0c141f;
+}
+.item image {
+	border-radius: 32rpx;
+	width: 100%;
+	height: 150rpx;
+}
+.item {
+	width: 46%;
+	display: inline-block;
+	margin: 1% 2%;
+	position: relative;
+}
+.list_box {
+	width: 100%;
+	background: #ffffff;
+	box-shadow: 0rpx 0rpx 1rpx 4rpx rgba(145, 156, 178, 0.1);
+	border-radius: 32rpx;
+	padding: 20rpx 0;
+}
+
 page {
-		background: #FFFFFF;
-	}
+	background: #ffffff;
+}
 </style>

pages2/plan/detail.vue

@@ -1,482 +1,442 @@
 <template>
-	<view style="padding: 30rpx;" >
+	<view style="padding: 30rpx;">
 		<view class="card">
-			<view class="date_t1">
-				2021年 6月
-			</view>
+			<view class="date_t1">2021年 6月</view>
 			<view style="width: 100%;display: flex;justify-content:center;margin-top: 20rpx;">
-				<view v-for="(item,index) in date" :key="index" class="card_date">{{item}}</view>
+				<view v-for="(item, index) in date" :key="index" class="card_date">{{ item }}</view>
 			</view>
 			<view style="width: 100%;margin-top: 20rpx;">
-				<view v-for="(item,index) in date_use" :key="index"  class='date_num'>
-					<view v-if="item.color==0" class="date_num_color0">
-						{{item.num}}
-						<view v-if="item.note>0" class="date_note">
-							{{item.note}}
-						</view>
-						<view v-if="item.dot" class="date_dot">
-						</view>
+				<view v-for="(item, index) in date_use" :key="index" class="date_num">
+					<view v-if="item.color == 0" class="date_num_color0">
+						{{ item.num }}
+						<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
+						<view v-if="item.dot" class="date_dot"></view>
 					</view>
-					<view v-if="item.color==1" class="date_num_color1">
-						{{item.num}}
-						<view v-if="item.note>0" class="date_note">
-							{{item.note}}
-						</view>
-						<view v-if="item.dot" class="date_dot">
-						</view>
+					<view v-if="item.color == 1" class="date_num_color1">
+						{{ item.num }}
+						<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
+						<view v-if="item.dot" class="date_dot"></view>
 					</view>
-					<view v-if="item.color==2" class="date_num_color2">
-						{{item.num}}
-						<view v-if="item.note>0" class="date_note">
-							{{item.note}}
-						</view>
-						<view v-if="item.dot" class="date_dot">
-						</view>
+					<view v-if="item.color == 2" class="date_num_color2">
+						{{ item.num }}
+						<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
+						<view v-if="item.dot" class="date_dot"></view>
 					</view>
-					<view v-if="item.color==3" class="date_num_color3">
-						{{item.num}}
-						<view v-if="item.note>0" class="date_note">
-							{{item.note}}
-						</view>
-						<view v-if="item.dot" class="date_dot">
-						</view>
+					<view v-if="item.color == 3" class="date_num_color3">
+						{{ item.num }}
+						<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
+						<view v-if="item.dot" class="date_dot"></view>
 					</view>
 				</view>
 			</view>
-			<view style="width: 100%;display: flex;justify-content: center;" v-if="isOpen==false">
-				<view @click="oepn_calendar" style="height: 20rpx;width: 40rpx;padding:20rpx 0;">
-					<view class="date_line" ></view>
-				</view>
+			<view style="width: 100%;display: flex;justify-content: center;" v-if="isOpen == false">
+				<view @click="oepn_calendar" style="height: 20rpx;width: 40rpx;padding:20rpx 0;"><view class="date_line"></view></view>
 			</view>
 			<view style="width: 100%;display: flex;justify-content: center;" v-else>
 				<image class="date_line_close" @click="close_calendar" src="/static/close_card.png"></image>
 			</view>
-			<view v-for="(item,index) in workList">
+			<view v-for="(item, index) in workList">
 				<view style="margin-left: 30rpx;margin-top: 10rpx;" @click="jumpDetail(item)">
-					<text class="date_t2">{{item.courseName}}</text>
-					<view class="circle_num" style="margin-left: 20rpx;">{{item.chapterNum}}</view>
+					<text class="date_t2">{{ item.courseName }}</text>
+					<view class="circle_num" style="margin-left: 20rpx;">{{ item.chapterNum }}</view>
 				</view>
 			</view>
-
-
 		</view>
 		<!-- 列表-->
-		<view  >
-			<uni-swipe-action >
-			    <uni-swipe-action-item :autoClose="false" @change="swipeChange($event, item)" :show="item.show" v-for="(item,index) in list" :key="index">
-			        <view class="list_item" :class="index%2==0?'list_item_bac1':'list_item_bac2'">
+		<view>
+			<uni-swipe-action>
+				<uni-swipe-action-item :autoClose="false" @change="swipeChange($event, item)" :show="item.show" v-for="(item, index) in list" :key="index">
+					<view class="list_item" :class="index % 2 == 0 ? 'list_item_bac1' : 'list_item_bac2'">
 						<u-row>
 							<u-col span="11">
-								 <text class="item_t1">{{item.coursePlanVo[0].categoryName}}：{{$method.timestampToTime(item.endTime)}}截止</text>
-							</u-col>
-							<u-col span="1">
-								<image src="/static/more.png" class="img_more" @click.stop="openShow(item)"></image>
+								<text class="item_t1">{{ item.coursePlanVo[0].categoryName }}：{{ $method.timestampToTime(item.endTime) }}截止</text>
 							</u-col>
+							<u-col span="1"><image src="/static/more.png" class="img_more" @click.stop="openShow(item)"></image></u-col>
 						</u-row>
 						<view style="margin-top: 30rpx;">
 							<image :src="$method.splitImgHost(item.coursePlanVo[0].coverUrl)" class="r_image"></image>
-							<view class="r_t2">
-								{{item.coursePlanVo[0].courseName}}
-							</view>
+							<view class="r_t2">{{ item.coursePlanVo[0].courseName }}</view>
 						</view>
 						<view style="display: flex;margin-top: 30rpx;">
 							<text class="item_t2">学习频率：</text>
 							<view style="display: flex;justify-content:center;">
-								<view v-for="(item1,index) in item.studyCount" :key="index" class="item_date">{{replay(item1)}}</view>
+								<view v-for="(item1, index) in item.studyCount" :key="index" class="item_date">{{ replay(item1) }}</view>
 							</view>
 						</view>
-						<view style="display: flex;margin-top: 20rpx;">
-							<text class="item_t2">学习进度：60/120</text>
+						<view style="display: flex;margin-top: 20rpx;"><text class="item_t2">学习进度：60/120</text></view>
+					</view>
+					<template v-slot:right>
+						<view class="operate">
+							<image src="/static/operate_1.png" class="operate_img operate_img1"></image>
+							<image src="/static/operate_2.png" class="operate_img operate_img2"></image>
+							<image @click="edit(item)" src="/static/operate_3.png" class="operate_img operate_img3"></image>
 						</view>
-			        </view>
-					<template v-slot:right >
-					               <view class="operate">
-					       <image src="/static/operate_1.png" class="operate_img operate_img1"></image>
-					       <image src="/static/operate_2.png" class="operate_img operate_img2"></image>
-					       <image @click="edit(item)" src="/static/operate_3.png" class="operate_img operate_img3"></image>
-					      </view>
-					           </template>
-			       
-			    </uni-swipe-action-item>
-
+					</template>
+				</uni-swipe-action-item>
 			</uni-swipe-action>
 		</view>
-		<view class="newPlan" @click="newPlan()">
-			新建计划
-		</view>
+		<view class="newPlan" @click="newPlan()">新建计划</view>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				workList:[],
-				dayLisy:[],
-				index:0,
-				date:['日','一','二','三','四','五','六'],
-				list:[
-					{
-						show:'right',
-						id:1,
-						coursePlanVo:{}
-					},
-					{
-						show:'none',
-						id:2
-					},
-					{
-						show:'none',
-						id:3
-					},
-					{
-						show:'none',
-						id:4
-					},
-					{
-						show:'none',
-						id:5
+export default {
+	data() {
+		return {
+			workList: [],
+			dayLisy: [],
+			index: 0,
+			date: ['日', '一', '二', '三', '四', '五', '六'],
+			list: [],
+			isOpen: false,
+			date_num: [
+				{
+					num: 20,
+					color: 0,
+					note: 0,
+					dot: false
+				},
+				{
+					num: 21,
+					color: 1,
+					note: 0,
+					dot: false
+				},
+				{
+					num: 22,
+					color: 0,
+					note: 0,
+					dot: true
+				},
+				{
+					num: 23,
+					color: 2,
+					note: 0,
+					dot: false
+				},
+				{
+					num: 24,
+					color: 1,
+					note: 0,
+					dot: false
+				},
+				{
+					num: 25,
+					color: 3,
+					note: 2,
+					dot: false
+				},
+				{
+					num: 26,
+					color: 0,
+					note: 1,
+					dot: true
+				}
+			],
+			date_use: [],
+			options: [
+				{
+					text: '取消',
+					style: {
+						backgroundColor: '#007aff'
+					}
+				},
+				{
+					text: '确认',
+					style: {
+						backgroundColor: '#dd524d'
 					}
-				],
-				isOpen:false,
-				date_num:[
-					{
-						num:20,
-						color:0,
-						note:0,
-						dot:false,
-					},{
-						num:21,
-						color:1,
-						note:0,
-						dot:false,
-					},{
-						num:22,
-						color:0,
-						note:0,
-						dot:true,
-					},{
-						num:23,
-						color:2,
-						note:0,
-						dot:false,
-					},{
-						num:24,
-						color:1,
-						note:0,
-						dot:false,
-					},{
-						num:25,
-						color:3,
-						note:2,
-						dot:false,
-					},{
-						num:26,
-						color:0,
-						note:1,
-						dot:true,
-					}],
-					date_use:[],
-					 options:[
-					        {
-					            text: '取消',
-					            style: {
-					                backgroundColor: '#007aff'
-					            }
-					        }, {
-					            text: '确认',
-					            style: {
-					                backgroundColor: '#dd524d'
-					            }
-					        }]
-			}
-		},
-		onLoad(option) {
-			this.date_use = this.date_num
-			let date = new Date()
-			let num = date.getDate()
-			for(let i=0;i<this.date_num.length;i++){
-				let item = this.date_num[i]
-				if(item.num ==num ){
-					item.color = 3
 				}
+			]
+		};
+	},
+	onLoad(option) {
+		this.date_use = this.date_num;
+		let date = new Date();
+		let num = date.getDate();
+		for (let i = 0; i < this.date_num.length; i++) {
+			let item = this.date_num[i];
+			if (item.num == num) {
+				item.color = 3;
 			}
-			this.getList()
+		}
+		
+	},
+	onShow() {
+		this.getList();
+	},
+	methods: {
+		jumpDetail(item) {
+			this.$navTo.togo('/pages2/course/detail', {
+				id: item.courseId
+			});
+			return;
 		},
-		onShow(){
+		replay(index) {
+			if (index == 0) {
+				return '日';
+			}
+			if (index == 1) {
+				return '一';
+			}
+			if (index == 2) {
+				return '二';
+			}
+			if (index == 3) {
+				return '三';
+			}
+			if (index == 4) {
+				return '四';
+			}
+			if (index == 5) {
+				return '五';
+			}
+			if (index == 6) {
+				return '六';
+			}
 		},
-		methods: {
-			jumpDetail(item) {
-				this.$navTo.togo('/pages2/course/detail', {
-					id: item.courseId
+		getList() {
+			let self = this;
+			this.$api.planUserPlan().then(result => {
+				result.data.data.forEach((item, index) => {
+					item.show = 'none';
 				});
-				return;
-			},
-			replay(index){
-				if(index==0){
-					return '日'
-				}
-				if(index==1){
-					return '一'
-				}
-				if(index==2){
-					return '二'
-				}
-				if(index==3){
-					return '三'
-				}
-				if(index==4){
-					return '四'
-				}
-				if(index==5){
-					return '五'
-				}
-				if(index==6){
-					return '六'
-				}
-			},
-			getList(){
-				let self = this
-				this.$api.planUserPlan().then(result => {
-					self.list = result.data.data
-					self.dayLisy = result.data.data[0].calendarStudyVo[0].dayStudyList
-					let start = self.dayLisy[0].studyDay
-					self.workList = result.data.data[0].coursePlanVo
-					console.log(self.workList)
-				});
-			},
-			newPlan(){
-				this.$navTo.togo('/pages2/plan/create')
-			},
-			edit(item){
-				this.$navTo.togo('/pages2/plan/edit', {
-					id:item.id
-				})
-			},
-			swipeChange(e, item){
-				item.show = e;
-			},
-			openShow(item){
-				if(item.show=='none'){
-					item.show = 'right'
-				}else{
-					item.show = 'none'
-				}
-			},
-			close_calendar(){
-				this.isOpen = false
-				this.date_use = this.date_num
-			},
-			oepn_calendar(){
-				this.isOpen = true
-				this.date_use = []
-				for(let i =1;i<=30;i++){
-					let item={}
-					item.num = i
-					item.color = this.random(0, 3)
-					let note = this.random(0, 20)
-					item.note = note>17?note-15:0
-					item.dot = this.random(0, 3)<2?false:true
-					let date = new Date()
-					let num = date.getDate()
-					if(num==i){
-						item.color = 3
-					}
-					this.date_use.push(item)
+				self.list = result.data.data;
+				self.dayLisy = result.data.data[0].calendarStudyVo[0].dayStudyList;
+				let start = self.dayLisy[0].studyDay;
+				self.workList = result.data.data[0].coursePlanVo;
+				console.log(self.workList);
+			});
+		},
+		newPlan() {
+			this.$navTo.togo('/pages2/plan/create');
+		},
+		edit(item) {
+			this.$navTo.togo('/pages2/plan/edit', {
+				id: item.planId
+			});
+		},
+		swipeChange(e, item) {
+			item.show = e;
+		},
+		openShow(item) {
+			if (item.show == 'none') {
+				item.show = 'right';
+			} else {
+				item.show = 'none';
+			}
+		},
+		close_calendar() {
+			this.isOpen = false;
+			this.date_use = this.date_num;
+		},
+		oepn_calendar() {
+			this.isOpen = true;
+			this.date_use = [];
+			for (let i = 1; i <= 30; i++) {
+				let item = {};
+				item.num = i;
+				item.color = this.random(0, 3);
+				let note = this.random(0, 20);
+				item.note = note > 17 ? note - 15 : 0;
+				item.dot = this.random(0, 3) < 2 ? false : true;
+				let date = new Date();
+				let num = date.getDate();
+				if (num == i) {
+					item.color = 3;
 				}
-				
-			},
-			random(min, max) {
-			  return Math.floor(Math.random() * (max - min)) + min;
+				this.date_use.push(item);
 			}
-		
 		},
-		
+		random(min, max) {
+			return Math.floor(Math.random() * (max - min)) + min;
+		}
 	}
+};
 </script>
 
 <style scope>
-	.newPlan{
-		width: 200rpx;
-		height: 64rpx;
-		background: #FFFFFF;
-		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.15);
-		border-radius: 32rpx;
-		font-size: 24rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
-		color: #32467B;
-		text-align: center;
-		line-height: 64rpx;
-		position: fixed;
-		bottom: 60rpx;
-		left: 40%;
-	}
-	.operate_img3{
-		background: #3478F6;
-	}
-	.operate_img2{
-		background: #F09A37;
-	}
-	.operate_img1{
-		background: #EB4D3D;
-	}
-	.operate_img{
-		width: 45rpx;
-		height: 45rpx;
-		border-radius: 50%;
-		padding: 20rpx;
-		margin: 10rpx 0;
-	}
-	.operate{
-		height: 418rpx;
-		width: 90rpx;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-	.item_t2{
-		font-size: 23rpx;
-		color: #32467B;
-	}
-	.item_date{
-		width: 26rpx;
-		height: 26rpx;
-		background: #32467B;
-		border-radius: 50%;
-		margin-left: 20rpx;
-		font-size: 18rpx;
-		color: #FEFEFF;
-		text-align: center;
-	}
-	.r_t2{
-		font-size: 20rpx;
-		font-family: PingFang SC;
-		font-weight: 400;
-		color: #0C141F;
-	}
-	.r_image{
-		width: 278rpx;
-		height: 134rpx;
-	}
-	.img_more{
-		width: 26rpx;
-		height: 26rpx;
-	}
-	.item_t1{
-		font-size: 30rpx;
-		font-family: PingFang SC;
-		font-weight: 500;
-		color: #32467B;
-	}
-	.list_item_bac1{
-		background: linear-gradient(45deg, rgba(172, 203, 238, 0.2), rgba(231, 240, 253, 0.2));
-	}
-	.list_item_bac2{
-		background: linear-gradient(45deg, rgba(255, 232, 206, 0.3), rgba(251, 184, 160, 0.3));
-	}
-	.list_item{
-		width: 100%;
-		height: 418rpx;
-		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.05);
-		border-radius: 24rpx;
-		margin-top: 20rpx;
-		padding: 15rpx;
-	}
-	.date_dot{
-		width: 6rpx;
-		height: 6rpx;
-		background: #FFCC00;
-		border-radius: 50%;
-		margin:0 auto
-	}
-	.date_note{
-		border-radius: 50%;
-		width: 29rpx;
-		height: 29rpx; 
-		border: 1px solid #FFCC00;
-		font-size: 18rpx;
-		color: #FFCC00;
-		text-align: center;
-		display: inline-block;
-		position: absolute;
-		top: -19rpx;
-		right: 9rpx;
-	}
-	.circle_num {
-		border-radius: 50%;
-		width: 29rpx;
-		height: 29rpx; 
-		border: 1px solid #FFCC00;
-		font-size: 18rpx;
-		color: #FFCC00;
-		text-align: center;
-		display: inline-block;
-		margin: 5rpx;
-	}
-	.date_t2{
-		font-size: 30rpx;
-		font-family: PingFang SC;
-		font-weight: 500;
-		color: #2F4379;
-	}
-	.date_line_close{
-		width: 40rpx;
-		height: 20rpx;
-	}
-	.date_line{
-		width: 40rpx;
-		height: 6rpx;
-		background: #7F8CAF;
-		border-radius: 2rpx;
-	}
-	.date_num{
-		width: 14%;
-		text-align: center;
-		position: relative;
-		display: inline-block;
-		margin-top: 20rpx;
-	}
-	.date_num_color0{
-		color: #32467B;
-	}
-	.date_num_color1{
-		color: #34C759;
-	}
-	.date_num_color2{
-		color: #FF3B30;
-	}
-	.date_num_color3{
-		color: #FFFFFF;
-		background-color: #FFCC00;
-		border-radius: 50%;
-		width: 40rpx;
-		height: 40rpx; 
-		display: inline-block;
-	}
-	.card_date{
-		width: 14%;
-		text-align: center;
-		color: #7F8CAF;
-	}
-	.date_t1{
-		font-size: 24rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
-		color: #2F4379;
-		width: 100%;
-		text-align: center;
-		padding: 20rpx 0;
-	}
-	.card{
-		width: 100%;
-		background: #FFFFFF;
-		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.05);
-		border-radius: 24rpx;
-		padding-bottom: 20rpx;
-	}
+.newPlan {
+	width: 200rpx;
+	height: 64rpx;
+	background: #ffffff;
+	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.15);
+	border-radius: 32rpx;
+	font-size: 24rpx;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #32467b;
+	text-align: center;
+	line-height: 64rpx;
+	position: fixed;
+	bottom: 60rpx;
+	left: 40%;
+}
+.operate_img3 {
+	background: #3478f6;
+}
+.operate_img2 {
+	background: #f09a37;
+}
+.operate_img1 {
+	background: #eb4d3d;
+}
+.operate_img {
+	width: 45rpx;
+	height: 45rpx;
+	border-radius: 50%;
+	padding: 20rpx;
+	margin: 10rpx 0;
+}
+.operate {
+	height: 418rpx;
+	width: 90rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+.item_t2 {
+	font-size: 23rpx;
+	color: #32467b;
+}
+.item_date {
+	width: 26rpx;
+	height: 26rpx;
+	background: #32467b;
+	border-radius: 50%;
+	margin-left: 20rpx;
+	font-size: 18rpx;
+	color: #fefeff;
+	text-align: center;
+}
+.r_t2 {
+	font-size: 20rpx;
+	font-family: PingFang SC;
+	font-weight: 400;
+	color: #0c141f;
+}
+.r_image {
+	width: 278rpx;
+	height: 134rpx;
+}
+.img_more {
+	width: 26rpx;
+	height: 26rpx;
+}
+.item_t1 {
+	font-size: 30rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
+	color: #32467b;
+}
+.list_item_bac1 {
+	background: linear-gradient(45deg, rgba(172, 203, 238, 0.2), rgba(231, 240, 253, 0.2));
+}
+.list_item_bac2 {
+	background: linear-gradient(45deg, rgba(255, 232, 206, 0.3), rgba(251, 184, 160, 0.3));
+}
+.list_item {
+	width: 100%;
+	height: 418rpx;
+	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.05);
+	border-radius: 24rpx;
+	margin-top: 20rpx;
+	padding: 15rpx;
+}
+.date_dot {
+	width: 6rpx;
+	height: 6rpx;
+	background: #ffcc00;
+	border-radius: 50%;
+	margin: 0 auto;
+}
+.date_note {
+	border-radius: 50%;
+	width: 29rpx;
+	height: 29rpx;
+	border: 1px solid #ffcc00;
+	font-size: 18rpx;
+	color: #ffcc00;
+	text-align: center;
+	display: inline-block;
+	position: absolute;
+	top: -19rpx;
+	right: 9rpx;
+}
+.circle_num {
+	border-radius: 50%;
+	width: 29rpx;
+	height: 29rpx;
+	border: 1px solid #ffcc00;
+	font-size: 18rpx;
+	color: #ffcc00;
+	text-align: center;
+	display: inline-block;
+	margin: 5rpx;
+}
+.date_t2 {
+	font-size: 30rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
+	color: #2f4379;
+}
+.date_line_close {
+	width: 40rpx;
+	height: 20rpx;
+}
+.date_line {
+	width: 40rpx;
+	height: 6rpx;
+	background: #7f8caf;
+	border-radius: 2rpx;
+}
+.date_num {
+	width: 14%;
+	text-align: center;
+	position: relative;
+	display: inline-block;
+	margin-top: 20rpx;
+}
+.date_num_color0 {
+	color: #32467b;
+}
+.date_num_color1 {
+	color: #34c759;
+}
+.date_num_color2 {
+	color: #ff3b30;
+}
+.date_num_color3 {
+	color: #ffffff;
+	background-color: #ffcc00;
+	border-radius: 50%;
+	width: 40rpx;
+	height: 40rpx;
+	display: inline-block;
+}
+.card_date {
+	width: 14%;
+	text-align: center;
+	color: #7f8caf;
+}
+.date_t1 {
+	font-size: 24rpx;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #2f4379;
+	width: 100%;
+	text-align: center;
+	padding: 20rpx 0;
+}
+.card {
+	width: 100%;
+	background: #ffffff;
+	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.05);
+	border-radius: 24rpx;
+	padding-bottom: 20rpx;
+}
 page {
-		background: #FDFDFD;
-	}
+	background: #fdfdfd;
+}
 </style>

pages2/plan/edit.vue

@@ -1,347 +1,475 @@
 <template>
-	<view style="padding: 30rpx;" >
+	<view style="padding: 30rpx;">
 		<view class="list_box">
-			<view class="item" v-for="(item,index) in list" :key="index" >
-				<image :src="item.url" ></image>
-				<text >二级建造师必修</text>
-				<view class="del_icon">
-					<u-icon name="minus-circle-fill" color="#EB4D3D" size="40" @click="delItem(index)"></u-icon>
-				</view>
+			<view class="item" v-for="(item, index) in list" :key="index">
+				<image :src="item.coverUrl"></image>
+				<text>{{item.courseName}}</text>
+				<view class="del_icon"><u-icon name="minus-circle-fill" color="#EB4D3D" size="40" @click="delItem(index)"></u-icon></view>
 			</view>
 			<view class="item" style="vertical-align: top;">
-				<view class="item_add" @click="openSel">
-					<u-icon name="plus-circle-fill" color="#32467B" size="32"></u-icon>
-				</view>
+				<view class="item_add" @click="openSel"><u-icon name="plus-circle-fill" color="#32467B" size="32"></u-icon></view>
 			</view>
 		</view>
 		<view class="list_box form">
 			<u-form :model="form" ref="uForm">
-				<u-form-item label="课程类型" :label-width="auto"><u-input v-model="form.category" :disabled="true"/></u-form-item>
-				<u-form-item  label="考试日期" prop="birth" :label-width="auto">
-					<picker mode="date" :value="form.date"   @change="bindDateChange">
-						<view class="picker">
-						  {{form.date}}
-						</view>
-					  </picker>
+				<u-form-item label="课程类型" :label-width="auto"><u-input v-model="form.category" :disabled="true" /></u-form-item>
+				<u-form-item label="考试日期" prop="birth" :label-width="auto">
+					<picker mode="date" :value="form.date" @change="bindDateChange">
+						<view class="picker">{{ form.date }}</view>
+					</picker>
 				</u-form-item>
-				<u-form-item  label="学习提醒" prop="birth" :label-width="auto">
-					<picker mode="time" :value="form.time"   @change="bindTimeChange">
-						<view class="picker">
-						  {{form.time}}
-						</view>
-					  </picker>
+				<u-form-item label="学习提醒" prop="birth" :label-width="auto">
+					<picker mode="time" :value="form.time" @change="bindTimeChange">
+						<view class="picker">{{ form.time }}</view>
+					</picker>
 				</u-form-item>
 				<u-form-item label="学习频率" :label-width="auto">
-					<view class="picker" @click="openWeek" >
-					  {{form.week}}
-					</view>
+					<view class="picker" @click="openWeek">{{ form.week }}</view>
 				</u-form-item>
 				<u-form-item label="复习天数" :label-width="auto">
 					<picker @change="bindPickerChangeReview" :value="index_review" :range="array_review">
-					              <view class="picker">
-					                {{array_review[index_review]}}
-					              </view>
-					    </picker>
+						<view class="picker">{{ array_review[index_review] }}</view>
+					</picker>
 				</u-form-item>
 				<u-form-item label="起止日期" :label-width="auto">
-					<view class="picker" @click="openCalendar">
-							{{form.startDate}}~{{form.endDate}}
-					</view>
-					
+					<view class="picker" @click="openCalendar">{{ form.startDate }}~{{ form.endDate }}</view>
 				</u-form-item>
 			</u-form>
 		</view>
-		<u-calendar v-model="calendar_show" :mode="calendar" @change="change" :max-date="maxDate">
-		    </u-calendar>
+		<u-calendar v-model="calendar_show" :mode="calendar" @change="change" :max-date="maxDate"></u-calendar>
 		<!-- 弹框-->
 		<u-popup v-model="week_show" mode="bottom">
 			<view style="height: 400rpx;text-align: center">
-					<view style="padding-top: 100rpx;padding-left: 40rpx;text-align: center;">
-						<u-checkbox-group @change="checkboxGroupChange">
-							<u-checkbox 	
-								v-model="item.checked" 
-								v-for="(item, index) in list3" :key="index" 
-								:name="item.name"
-							>{{item.name}}</u-checkbox>
-						</u-checkbox-group>
-						<view class="title_l" @click="week_submit" style="margin: 50rpx auto;">确认</view>
-					</view>
+				<view style="padding-top: 100rpx;padding-left: 40rpx;text-align: center;">
+					<u-checkbox-group @change="checkboxGroupChange">
+						<u-checkbox v-model="item.checked" v-for="(item, index) in list3" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
+					</u-checkbox-group>
+					<view class="title_l" @click="week_submit" style="margin: 50rpx auto;">确认</view>
 				</view>
+			</view>
 		</u-popup>
 		<u-popup v-model="show" mode="bottom">
-			<view class="popup_box" >
+			<view class="popup_box">
 				<view class="popup_title">
-					<u-row >
-						<u-col span="6">
-							<view class="title_r">我的课程</view>
-						</u-col>
-						<u-col span="3" offset="3">
-							<view class="title_l" @click="submit">确认</view>
-						</u-col>
+					<u-row>
+						<u-col span="6"><view class="title_r">我的课程</view></u-col>
+						<u-col span="3" offset="3"><view class="title_l" @click="submit">确认</view></u-col>
 					</u-row>
 				</view>
 				<view class="popup_list">
-					<view class="popup_item" v-for="(item,index) in list2" :key="index">
-						<view style="line-height:182rpx ;">
-							<u-checkbox :disabled="item.disabled"
-								@change="checkboxChange"  shape="circle" active-color="#32467B"
-								v-model="item.checked"  :key="index" :name="item.id"></u-checkbox>
-						</view>
-						<view >
-							<image src="/static/banner.png" style="width: 278rpx;height: 134rpx;"></image>
+					<view class="popup_item" v-for="(item, index) in list2" :key="index">
+						<view style="display: flex;align-items: center;">
+							<u-checkbox
+								:disabled="item.disabled"
+								@change="checkboxChange"
+								shape="circle"
+								active-color="#32467B"
+								v-model="item.checked"
+								:key="index"
+								:name="item.id"
+							></u-checkbox>
 						</view>
+						<view style="display: flex;align-items: center;"><image :src="item.coverUrl" style="width: 278rpx;height: 134rpx;"></image></view>
+						<view style="margin: 30rpx;">{{ item.courseName }}</view>
 					</view>
-					
 				</view>
 			</view>
 		</u-popup>
+		<button @click="resultForm" class="submit_btn">提交</button>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				week_show:false,
-				form:{
-					category:'二级建造师',
-					date:'1990-01-01',
-					time:'20:30',
-					startDate:'2021-05-07',
-					endDate:'2021-05-31',
-					week:'一'
-				},
-				calendar: 'range',
-				list:[
-					{url:'/static/banner.png',id:23,
-					checked:false},
-					{url:'/static/banner.png',id:34,checked:false},
-					{url:'/static/banner.png',id:25,checked:false}],
-				list2:[
-					{url:'/static/banner.png',id:33,disabled:false,
-					checked:false},
-					{url:'/static/banner.png',id:34,disabled:false,checked:false},
-					{url:'/static/banner.png',id:35,disabled:false,checked:false}],
-				show:false,
-				calendar_show:false,
-				maxDate:'2023-01-01',
-				list3:[{
+export default {
+	data() {
+		return {
+			week_show: false,
+			form: {
+				category: '',
+				date: '',
+				time: '',
+				startDate: '',
+				endDate: '',
+				week: ''
+			},
+			calendar: 'range',
+			list: [],
+			list2: [],
+			show: false,
+			calendar_show: false,
+			maxDate: '2023-01-01',
+			list3: [
+				{
 					name: '一',
 					checked: false,
-					disabled: false
-				},{
+					disabled: false,
+					id: 1
+				},
+				{
 					name: '二',
 					checked: false,
-					disabled: false
-				},{
+					disabled: false,
+					id: 2
+				},
+				{
 					name: '三',
 					checked: false,
-					disabled: false
-				},{
+					disabled: false,
+					id: 3
+				},
+				{
 					name: '四',
 					checked: false,
-					disabled: false
-				},{
+					disabled: false,
+					id: 4
+				},
+				{
 					name: '五',
 					checked: false,
-					disabled: false
+					disabled: false,
+					id: 5
 				},
 				{
 					name: '六',
 					checked: false,
-					disabled: false
+					disabled: false,
+					id: 6
 				},
 				{
 					name: '日',
 					checked: false,
-					disabled: false
-				}],
-				selWeek:'',
-				index_review: 4,
-				array_review: [1, 2, 3, 4, 5, 6, 7],	
-			}
-		},
-		onLoad(option) {
-	
-			
-		},
-		onShow(){
+					disabled: false,
+					id: 0
+				}
+			],
+			selWeek: '',
+			index_review: 4,
+			array_review: [1, 2, 3, 4, 5, 6, 7]
+		};
+	},
+	onLoad(option) {
+		this.planId = option.id
+		this.getMyCourse()
+		this.getListForm(option.id);
+	},
+	onShow() {},
+	methods: {
+		resultForm(){
 			
-		},
-		methods: {
-			bindPickerChangeReview(e){
-				this.index_review= e.detail.value
-			},
-			week_submit(){
-				if(this.selWeek==''){
+				if (this.list.length == 0) {
 					uni.showModal({
-					    title: '提示',
-					    content: '至少选择一个',
+						title: '提示',
+						content: '请选择课程',
+						showCancel: false
 					});
-					return
+					return;
 				}
-				this.form.week = this.selWeek
-				this.week_show = false
-			},
-			openWeek(){
-				this.week_show = true
-				this.selWeek = this.form.week
-				let that = this
-				this.list3.map(val => {
-					val.checked = false
-					if(that.form.week.indexOf(val.name) != -1){
-						val.checked = true
+				let courseId = [];
+				for (let i = 0; i < this.list.length; i++) {
+					courseId.push(this.list[i].courseId);
+				}
+				let ss = this.form.week.split('、');
+				let weekArray = [];
+				for (let i = 0; i < ss.length; i++) {
+					if (ss[i] == '日') {
+						weekArray.push(0);
 					}
-				})
-			},
-			checkboxGroupChange(e){
-				this.selWeek = e.join("、")
-			},
-			openCalendar(){
-				this.calendar_show = true
-			},
-			change(e) {
-				console.log(e);
-				this.form.startDate = e.startDate
-				this.form.endDate = e.endDate
-			},
-			bindTimeChange(e){
-				this.form.time=e.detail.value
-			},
-			bindDateChange(e){
-				this.form.date=e.detail.value
-				
-			},
-			submit(){
-				let that = this
-				this.list2.map(val => {
-					if(val.checked){
-						that.list.push(val);
+					if (ss[i] == '一') {
+						weekArray.push(1);
 					}
-				})
-				this.checkSameItem()
-				this.show = false
-			},
-			checkboxChange(e){
-			},
-			checkSameItem(){
-				this.list2.map(val => {
-					val.disabled = false
-					this.list.map(val1 => {
-						if(val.id == val1.id){
-							val.disabled = true
-						}
-						val.checked= false
-					})
-				})
-			},
-			delItem(index){
-				this.list.splice(index,1)
-			},
-			openSel(){
-				this.show = true
-				this.checkSameItem()
+					if (ss[i] == '二') {
+						weekArray.push(2);
+					}
+					if (ss[i] == '三') {
+						weekArray.push(3);
+					}
+					if (ss[i] == '四') {
+						weekArray.push(4);
+					}
+					if (ss[i] == '五') {
+						weekArray.push(5);
+					}
+					if (ss[i] == '六') {
+						weekArray.push(6);
+					}
+				}
+				let data = {
+					planId: this.planId,
+					courseId: courseId,
+					reminderTime: this.form.time,
+					examDate: this.$method.TimeTotimestamp(this.form.date),
+					startTime: this.$method.TimeTotimestamp(this.form.startDate),
+					endTime: this.$method.TimeTotimestamp(this.form.endDate),
+					studyCount: weekArray,
+					studyDay: this.array_review[this.index_review],
+					status: 2
+				};
+				this.$api.planupdateGenerate(data).then(result => {
+					if (result.data.code == 200) {
+						uni.showModal({
+							title: '提示',
+							content: '提交成功',
+							showCancel:	false,
+							success: function (res) {
+							        if (res.confirm) {
+							            uni.navigateBack({
+							                delta: 1
+							            });
+							        }
+							    }
+						});
+					}
+					console.log(result);
+				});
+		},
+		getMyCourse() {
+			let data = {
+				typeId: 0
+			};
+			let self = this;
+			this.$api.getUserBuy(data).then(result => {
+					self.form.courseId = result.data.data.courseVoList[0].courseId
+				if (result.data.data.courseVoList.length > 0) {
+					for (let i = 0; i < result.data.data.courseVoList.length; i++) {
+						let item = result.data.data.courseVoList[i];
+						item.checked = false;
+						item.disabled = false;
+						item.coverUrl = self.$method.splitImgHost(item.coverUrl);
+					}
+				}
+				self.list2 = result.data.data.courseVoList;
+			});
+		},
+		getListForm(int) {
+			var self = this
+			this.$api.planUserPlan({
+				planId: int
+			}).then(res => {
+						this.form.date = this.$method.timestampToTime(res.data.data[0].examDate);
+						this.form.time = res.data.data[0].reminderTime;
+						this.form.startDate = this.$method.timestampToTime(res.data.data[0].startTime);
+						this.form.endDate = this.$method.timestampToTime(res.data.data[0].endTime);
+						this.index_review = res.data.data[0].studyDay;
+						this.form.week = res.data.data[0].studyCount;
+						this.form.category = res.data.data[0].coursePlanVo[0].categoryName
+						this.list = res.data.data[0].coursePlanVo;
+						var numWeek = []
+						this.form.week.forEach((items,indexs) => {
+							if(items === 1){
+								numWeek.push('一')
+								return
+							}
+							if(items === 2){
+								numWeek.push('二')
+								return
+							}
+							if(items === 3){
+								numWeek.push('三')
+								return
+							}
+							if(items === 4){
+								numWeek.push('四')
+								return
+							}
+							if(items === 5){
+								numWeek.push('五')
+								return
+							}
+							if(items === 6){
+								numWeek.push('六')
+								return
+							}
+							if(items === 0){
+								numWeek.push('日')
+								return
+							}
+						})
+						this.form.week = numWeek.join('、')
+			});
+		},
+		bindPickerChangeReview(e) {
+			this.index_review = e.detail.value;
+		},
+		week_submit() {
+			if (this.selWeek == '') {
+				uni.showModal({
+					title: '提示',
+					content: '至少选择一个'
+				});
+				return;
 			}
+			this.form.week = this.selWeek;
+			this.week_show = false;
+		},
+		openWeek() {
+			this.week_show = true;
+			this.selWeek = this.form.week;
+			let that = this;
+			this.list3.map(val => {
+				val.checked = false;
+				if (that.form.week.indexOf(val.name) != -1) {
+					val.checked = true;
+				}
+			});
+		},
+		checkboxGroupChange(e) {
+			this.selWeek = e.join('、');
+		},
+		openCalendar() {
+			this.calendar_show = true;
+		},
+		change(e) {
+			console.log(e);
+			this.form.startDate = e.startDate;
+			this.form.endDate = e.endDate;
+		},
+		bindTimeChange(e) {
+			this.form.time = e.detail.value;
+		},
+		bindDateChange(e) {
+			this.form.date = e.detail.value;
+		},
+		submit() {
+			let that = this;
+			this.list2.map(val => {
+				if (val.checked) {
+					that.list.push(val);
+				}
+			});
+			this.checkSameItem();
+			this.show = false;
+			this.form.category = this.list[0].categoryName
+		},
+		checkboxChange(e) {},
+		checkSameItem() {
+			this.list2.map(val => {
+				val.disabled = false;
+				this.list.map(val1 => {
+					if (val.id == val1.id) {
+						val.disabled = true;
+					}
+					val.checked = false;
+				});
+			});
 		},
-		
+		delItem(index) {
+			this.list.splice(index, 1);
+			if(this.list.length === 0){
+				this.form.category = ''
+			}else{
+				this.form.category = this.list[0].categoryName
+			}
+		},
+		openSel() {
+			this.show = true;
+			this.checkSameItem();
+		}
 	}
+};
 </script>
 <style>
-	::-webkit-scrollbar{
-		width: 0;
-		height: 0;
-		color: transparent;
-	}
-	.u-drawer-content-visible{
-		border-radius: 32rpx 32rpx 0rpx 0rpx;
-		overflow: hidden;
-	}
+::-webkit-scrollbar {
+	width: 0;
+	height: 0;
+	color: transparent;
+}
+.u-drawer-content-visible {
+	border-radius: 32rpx 32rpx 0rpx 0rpx;
+	overflow: hidden;
+}
 </style>
 <style scope>
-	.picker{
-		text-align: right;
-	}
-	.form{
-		padding:0 16rpx !important;
-		margin-top: 30rpx;
-	}
-	input{
-		text-align: right;
-	}
-	.popup_item{
-		width: 100%;
-		height: 182rpx;
-		background: #FFFFFF;
-		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
-		border-radius: 32rpx;
-		margin: 20rpx 0;
-		padding: 10rpx;
-		display: flex;
-	}
-	.popup_list{
-		height: 500rpx;
-		padding: 0 20rpx;
-	}
-	.title_l{
-		width: 88rpx;
-		height: 48rpx;
-		background: #32467B;
-		border-radius: 16rpx;
-		font-size: 28rpx;
-		color: #FFFFFF;
-		text-align: center;
-		line-height: 48rpx;
-	}
-	.title_r{
-		font-size: 30rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
-		color: #2F4379;
-	}
-	.popup_title{
-		width: 100%;
-		margin: 40rpx;	
-	}
-	.popup_box{
-		height: 600rpx;
-	}
-	.del_icon{
-		position: absolute;
-		right: -15rpx;
-		top: -15rpx;
-	}
-	.item_add{
-		background: #F9F9F9;
-		border-radius: 32rpx;
-		width: 100%;
-		height:150rpx ;
-		text-align: center;
-		line-height: 150rpx;
-	}
-	.item text{
-		font-size: 24rpx;
-		color: #0C141F;
-	}
-	.item image{
-		border-radius: 32rpx;
-		width: 100%;
-		height:150rpx ;
-	}
-	.item{
-		width: 46%;
-		display: inline-block;
-		margin: 1% 2%;
-		position: relative;
-	}
-	.list_box{
-		width: 100%;
-		background: #FFFFFF;
-		box-shadow: 0rpx 0rpx 1rpx 4rpx rgba(145, 156, 178, 0.1);
-		border-radius: 32rpx;
-		padding: 20rpx 0;
-	}
-	
+.picker {
+	text-align: right;
+}
+.form {
+	padding: 0 16rpx !important;
+	margin-top: 30rpx;
+}
+input {
+	text-align: right;
+}
+.popup_item {
+	width: 100%;
+	height: 182rpx;
+	background: #ffffff;
+	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
+	border-radius: 32rpx;
+	margin: 20rpx 0;
+	padding: 10rpx;
+	display: flex;
+}
+.popup_list {
+	height: 500rpx;
+	padding: 0 20rpx;
+}
+.title_l {
+	width: 88rpx;
+	height: 48rpx;
+	background: #32467b;
+	border-radius: 16rpx;
+	font-size: 28rpx;
+	color: #ffffff;
+	text-align: center;
+	line-height: 48rpx;
+}
+.title_r {
+	font-size: 30rpx;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #2f4379;
+}
+.popup_title {
+	width: 100%;
+	margin: 40rpx;
+}
+.popup_box {
+	height: 600rpx;
+}
+.del_icon {
+	position: absolute;
+	right: -15rpx;
+	top: -15rpx;
+}
+.item_add {
+	background: #f9f9f9;
+	border-radius: 32rpx;
+	width: 100%;
+	height: 150rpx;
+	text-align: center;
+	line-height: 150rpx;
+}
+.item text {
+	font-size: 24rpx;
+	color: #0c141f;
+}
+.item image {
+	border-radius: 32rpx;
+	width: 100%;
+	height: 150rpx;
+}
+.item {
+	width: 46%;
+	display: inline-block;
+	margin: 1% 2%;
+	position: relative;
+}
+.list_box {
+	width: 100%;
+	background: #ffffff;
+	box-shadow: 0rpx 0rpx 1rpx 4rpx rgba(145, 156, 178, 0.1);
+	border-radius: 32rpx;
+	padding: 20rpx 0;
+}
+.submit_btn {
+	background-color: #32467b !important;
+	border-color: #32467b !important;
+	color: #ffffff;
+	font-size: 30rpx;
+	padding: 5rpx;
+	margin-top: 50rpx;
+}
 page {
-		background: #FFFFFF;
-	}
+	background: #ffffff;
+}
 </style>

pages2/wd/ranking.vue

@@ -1,11 +1,32 @@
 <template>
 	<view style="position: relative;height: 100%;">
-		<view style="width: 100%;">
-			<image src="/static/rank_bg.png" style="width: 100%;position: relative;top: -80rpx;"></image>
-		</view>
+		<view style="width: 100%;"><image src="/static/rank_bg.png" style="width: 100%;position: relative;top: -80rpx;"></image></view>
 		<view class="box">
-			<view style="margin-top: 15rpx;">
-				<u-row gutter="16" justify="center">
+			<view style="margin-top: 15rpx;display: flex;align-items: center;">
+				<view class="leftTitle" style="width: 64rpx;font-size: 32rpx;color: #0183fe;margin-left: 31rpx;margin-right: 51rpx;">我的成绩</view>
+				<view class="centerNameLogo" style="display: flex;align-items: center;">
+					<image :src="userInfo != null ? $method.splitImgHost(userInfo.avatar) : ''" style="width: 80rpx;height: 80rpx;border-radius: 50%;margin-right: 22rpx;"></image>
+					<span style="font-size: 32rpx;color: #32467b;font-weight: 800;width: 200rpx;">{{ userInfo.nickname }}</span>
+				</view>
+				<view v-if="current == 0" class="right_mc" style="display: flex;justify-content: center;flex: 1;">
+					<view class="fie" v-if="info.rank > 0" style="display: flex;align-items: center;font-size: 28rpx;color: #0183fe;font-weight: 500;">
+						<span>第{{ info.rank }}名</span>
+						<view class="ics" style="margin: 0rpx 17rpx;width: 1rpx;height: 26rpx;background-color: #d9edff;border-radius: 1rpx;"></view>
+						<span>{{ info.hourse }}h</span>
+					</view>
+					<view v-else style="display: flex;align-items: center;font-size: 28rpx;color: #0183fe;font-weight: 500;">
+						暂未上榜
+					</view>
+				</view>
+				<view v-if="current == 1" class="right_mc" style="display: flex;justify-content: center;flex: 1;">
+					<view class="fie" style="display: flex;align-items: center;font-size: 28rpx;color: #0183fe;font-weight: 500;">
+						<span>第{{ info2.rank }}名</span>
+						<view class="ics" style="margin: 0rpx 17rpx;width: 1rpx;height: 26rpx;background-color: #d9edff;border-radius: 1rpx;"></view>
+						<span>{{ info2.hourse }}h</span>
+					</view>
+				</view>
+
+				<!-- <u-row gutter="16" justify="center">
 					<u-col span="2" text-align="center">
 						<view class="r_t1" >
 							我的<br>
@@ -38,201 +59,191 @@
 							</view>
 						</view>
 					</u-col>
-				</u-row>
+				</u-row> -->
 			</view>
-			<view >
+			<view>
+				<view><u-tabs :list="list" font-size="24" :current="current" @change="change" active-color="#32467B"></u-tabs></view>
 				<view>
-					<u-tabs :list="list" font-size="24"  :current="current" @change="change" active-color="#32467B"></u-tabs>
-				</view>
-				<view >
-					<u-row >
-						<u-col span="2" text-align="center">
-							<view class="rank_t3">排名</view>
-						</u-col>
-						<u-col span="8" >
-							<view class="rank_t3">姓名</view>
-						</u-col>
-						<u-col span="2" >
-							<view class="rank_t3">时长</view>
-						</u-col>
+					<u-row>
+						<u-col span="2" text-align="center"><view class="rank_t3">排名</view></u-col>
+						<u-col span="8"><view class="rank_t3">姓名</view></u-col>
+						<u-col span="2"><view class="rank_t3">时长</view></u-col>
 					</u-row>
 				</view>
-				<scroll-view class='main-scroll' scroll-y  >
-					<view v-for="(item,index) in list2" :key="index" class="rank_item" v-if="current==0">
-						<u-row >
+				<scroll-view class="main-scroll" scroll-y>
+					<view v-for="(item, index) in list2" :key="index" class="rank_item" v-if="current == 0">
+						<u-row>
 							<u-col span="2" text-align="center">
 								<view class="rank_t3">
-									<image src="/static/sort_1.png" class="rank_img" v-if="index==0"></image>
-									<image src="/static/sort_2.png" class="rank_img" v-if="index==1"></image>
-									<image src="/static/sort_3.png" class="rank_img" v-if="index==2"></image>
-									<view v-if="index>2" class="rank_t5">{{index+1}}</view>
+									<image src="/static/sort_1.png" class="rank_img" v-if="index == 0"></image>
+									<image src="/static/sort_2.png" class="rank_img" v-if="index == 1"></image>
+									<image src="/static/sort_3.png" class="rank_img" v-if="index == 2"></image>
+									<view v-if="index > 2" class="rank_t5">{{ index + 1 }}</view>
 								</view>
 							</u-col>
-							<u-col span="8" >
+							<u-col span="8">
 								<view style="vertical-align: middle;display: flex;">
 									<image :src="$method.splitImgHost(item.avatar)" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
-									<view class="rank_t4" style="padding-left: 30rpx;">{{item.nickname}}</view>
+									<view class="rank_t4" style="padding-left: 30rpx;">{{ item.nickname }}</view>
 								</view>
 							</u-col>
 							<u-col span="2" text-align="left">
-								<view class="rank_t4">{{item.hourse}}h</view>
+								<view class="rank_t4">{{ item.hourse }}h</view>
 							</u-col>
 						</u-row>
 					</view>
-					<view v-for="(item,index) in list3" :key="index" class="rank_item" v-if="current==1">
-						<u-row >
+					<view v-for="(item, index) in list3" :key="index" class="rank_item" v-if="current == 1">
+						<u-row>
 							<u-col span="2" text-align="center">
 								<view class="rank_t3">
-									<image src="/static/sort_1.png" class="rank_img" v-if="index==0"></image>
-									<image src="/static/sort_2.png" class="rank_img" v-if="index==1"></image>
-									<image src="/static/sort_3.png" class="rank_img" v-if="index==2"></image>
-									<view v-if="index>2" class="rank_t5">{{index+1}}</view>
+									<image src="/static/sort_1.png" class="rank_img" v-if="index == 0"></image>
+									<image src="/static/sort_2.png" class="rank_img" v-if="index == 1"></image>
+									<image src="/static/sort_3.png" class="rank_img" v-if="index == 2"></image>
+									<view v-if="index > 2" class="rank_t5">{{ index + 1 }}</view>
 								</view>
 							</u-col>
-							<u-col span="8" >
+							<u-col span="8">
 								<view style="vertical-align: middle;display: flex;">
 									<image :src="$method.splitImgHost(item.avatar)" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
-									<view class="rank_t4" style="padding-left: 30rpx;">{{item.nickname}}</view>
+									<view class="rank_t4" style="padding-left: 30rpx;">{{ item.nickname }}</view>
 								</view>
 							</u-col>
 							<u-col span="2" text-align="left">
-								<view class="rank_t4">{{item.hourse}}h</view>
+								<view class="rank_t4">{{ item.hourse }}h</view>
 							</u-col>
 						</u-row>
 					</view>
 				</scroll-view>
-				
 			</view>
 		</view>
 	</view>
 </template>
 
 <script>
-		import {mapGetters} from 'vuex';
-	export default {
-		data() {
-			return {
-				list: [{
+import { mapGetters } from 'vuex';
+export default {
+	data() {
+		return {
+			list: [
+				{
 					name: '日榜'
-				}, {
-					name: '总榜'
-				}],
-				current: 0,
-				list2:[],
-				list3:[],
-				info:{
-					hourse:0,
-					rank:0
-				},
-				info2:{
-					hourse:0,
-					rank:0
 				},
+				{
+					name: '总榜'
+				}
+			],
+			current: 0,
+			list2: [],
+			list3: [],
+			info: {
+				hourse: 0,
+				rank: 0
+			},
+			info2: {
+				hourse: 0,
+				rank: 0
 			}
+		};
+	},
+	onLoad(option) {
+		this.rankList();
+		this.rankList2();
+	},
+	onShow() {},
+	methods: {
+		change(index) {
+			this.current = index;
 		},
-		onLoad(option) {
-			this.rankList()
-			this.rankList2()
-		},
-		onShow(){
-		},
-		methods: {
-			change(index) {
-				this.current = index;
-			},
-			rankList(){
-				let self = this
-				this.$api.rankList({status:0}).then(res => {
-					self.info = res.data.data
-					self.list2 = res.data.data.ranKingUsers
-				});
-			},
-			rankList2(){
-				let self = this
-				this.$api.rankList({status:1}).then(res => {
-					self.info2 = res.data.data
-					self.list3 = res.data.data.ranKingUsers
-					console.log(self.info2,333)
-				});
-			},
-		
+		rankList() {
+			let self = this;
+			this.$api.rankList({ status: 0 }).then(res => {
+				self.info = res.data.data;
+				self.list2 = res.data.data.ranKingUsers;
+			});
 		},
-		computed: {...mapGetters(['userInfo'])}
-	}
+		rankList2() {
+			let self = this;
+			this.$api.rankList({ status: 1 }).then(res => {
+				self.info2 = res.data.data;
+				self.list3 = res.data.data.ranKingUsers;
+				console.log(self.info2, 333);
+			});
+		}
+	},
+	computed: { ...mapGetters(['userInfo']) }
+};
 </script>
 
 <style scope>
-	.main-scroll{
-	  position: absolute;
-	  left: 0;
-	  right: 0;
-	  top: 300rpx;
-	  bottom: 0;
-	}
-	.rank_t5{
-		color: #AAB1B9;
-		text-align: center;
-	}
-	.rank_t3{
-		line-height: 80rpx;
-	}
-	.rank_t4{
-		line-height: 80rpx;
-		font-size: 30rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
-		color: #32467B;
-	}
-	.rank_item{
-		height: 100rpx;
-		vertical-align: middle;
-		padding: 0 25rpx;
-	}
-	.rank_img{
-		width: 54rpx;
-		height: 54rpx;
-	}
-	.rank_list{
-		width: 100%;
-		height: 100%;
-		position: relative;
+.main-scroll {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 300rpx;
+	bottom: 0;
+}
+.rank_t5 {
+	color: #aab1b9;
+	text-align: center;
+}
+.rank_t3 {
+	line-height: 80rpx;
+}
+.rank_t4 {
+	line-height: 80rpx;
+	font-size: 30rpx;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #32467b;
+}
+.rank_item {
+	height: 100rpx;
+	vertical-align: middle;
+	padding: 0 25rpx;
+}
+.rank_img {
+	width: 54rpx;
+	height: 54rpx;
+}
+.rank_list {
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+.rank_t3 {
+	font-size: 28rpx;
+	font-family: PingFang SC;
+	font-weight: 400;
+	color: #959ea8;
+}
+.r_t2 {
+	font-size: 32rpx;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #32467b;
+	line-height: 80rpx;
+	margin-left: 30rpx;
+}
+.r_t1 {
+	font-size: 32rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
+	color: #0183fe;
+}
 
-	}
-	.rank_t3{
-		font-size: 28rpx;
-		font-family: PingFang SC;
-		font-weight: 400;
-		color: #959EA8;
-	}
-	.r_t2{
-		font-size: 32rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
-		color: #32467B;
-		line-height: 80rpx;
-		margin-left: 30rpx;
-	}
-	.r_t1{
-		font-size: 32rpx;
-		font-family: PingFang SC;
-		font-weight: 500;
-		color: #0183FE;
-	}
-	
 page {
-		background: #FFFFFF;
-		height: 100%;
-		
-	}
-	.box{
-		height: 75%;
-		width: 100%;
-		border-top-right-radius: 32rpx;
-		border-top-left-radius: 32rpx;
-		z-index: 999;
-		background-color: #FFFFFF;
-		position: fixed;
-		bottom: 0;
-		padding: 25rpx;
-	}
+	background: #ffffff;
+	height: 100%;
+}
+.box {
+	height: 75%;
+	width: 100%;
+	border-top-right-radius: 32rpx;
+	border-top-left-radius: 32rpx;
+	z-index: 999;
+	background-color: #ffffff;
+	position: fixed;
+	bottom: 0;
+	padding: 25rpx;
+}
 </style>