init

common/httpList/systemPlan.js

@@ -13,7 +13,7 @@ export default {
 	//修改学习计划
 	editsystemplan(data) {
 		return myRequest({
-			url: '/system/plan',
+			url: '/system/plan/edit',
 			method: 'post',
 			data: data
 		})
@@ -38,7 +38,7 @@ export default {
 	getsystemplanlistPlan(data) {
 		return myRequest({
 			url: '/system/plan/listPlan',
-			method: 'get',
+			method: 'post',
 			data: data
 		})
 	},
@@ -46,7 +46,7 @@ export default {
 	systemplanInfo(data) {
 		return myRequest({
 			url: '/system/plan/' + data,
-			method: 'post',
+			method: 'get',
 			data: data
 		})
 	}

pages.json

@@ -391,6 +391,16 @@
 					}
 				}
 			},
+			{
+				"path": "plan/edit",
+				"style": {
+					"navigationBarTitleText": "修改计划",
+					"app-plus": {
+						"titleNView": false, //禁用原生导航栏 
+						"bounce": "none"
+					}
+				}
+			},
 			{
 				"path": "verify/input",
 				"style": {

pages2/plan/create.vue

@@ -3,16 +3,21 @@
 		<view class="list_box">
 			<view class="item" v-for="(item, index) in list" :key="index">
 				<image :src="item.coverUrl"></image>
-				<text>{{ item.courseName }}</text>
+				<text>{{ item.goodsName }}</text>
+				<text style="color:#999;margin-left:12rpx;">{{ item.secAllNum }}节</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 style="color:#999;text-align: center;">添加网课</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="课程类型" :label-width="auto">
+					<view style="line-height: 40rpx;" v-if="form.category">{{ form.category }}</view>
+					<view v-else style="text-align: end;">请添加网课</view>
+				</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>
@@ -37,9 +42,15 @@
 			</u-form>
 		</view>
 		<view class="list_box form">
-			<view style="height: 80rpx;line-height: 80rpx;color: #007AFF;">
-				根据当前计划每个学习日需完成 <text style="color: #FF9500;">3</text> 个学时
-				</view>
+			<view class="dis_ss">
+				<image src="@/static/icon/computeIcon.png" style="width:32rpx;height:32rpx;" mode=""></image>
+				<text class="getNums" @click="resultForm(1)">点击计算</text>
+			</view>
+			<view style="padding: 25rpx 0rpx; color: #999;text-align: center;font-size: 30rpx;">
+				根据当前计划每个学习日需完成
+				<text style="color: #FF9500;margin: 0rpx 10rpx;font-size: 30rpx;font-weight: bold;">{{ studyNums }}</text>
+				个学时
+			</view>
 		</view>
 		<u-calendar v-model="calendar_show" :min-date="minDate" :mode="calendar" @change="change" :max-date="maxDate"></u-calendar>
 		<!-- 弹框-->
@@ -71,11 +82,14 @@
 								active-color="#32467B"
 								v-model="item.checked"
 								:key="index"
-								:name="item.courseId"
+								:name="item.goodsId"
 							></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 style="margin: 30rpx;">
+							<view>{{ item.goodsName }}</view>
+							<view style="color:#999;">{{ item.secAllNum }}节</view>
+						</view>
 					</view>
 				</view>
 				<view v-else><u-empty text="请前往购买课程" mode="list"></u-empty></view>
@@ -98,13 +112,14 @@ export default {
 				endDate: '2021-05-31',
 				week: '一、三、五'
 			},
+			studyNums: '?',
 			calendar: 'range',
 			list: [],
 			list2: [],
 			show: false,
 			calendar_show: false,
 			maxDate: '2023-01-01',
-			minDate:'',
+			minDate: '',
 			list3: [
 				{
 					name: '一',
@@ -158,11 +173,27 @@ export default {
 		this.minDate = this.$method.timestampToTime(new Date().getTime() / 1000);
 		this.form.startDate = this.minDate;
 		this.form.endDate = this.$method.timestampToTime(new Date().getTime() / 1000 + 24 * 3600 * 30);
-		this.getMyCourse();
+		this.getGoods();
+		// this.getMyCourse();
 	},
 	onShow() {},
 	methods: {
-		resultForm() {
+		getGoods() {
+			var self = this;
+			self.$api.courseGoodsList().then(res => {
+				if (res.data.code === 200) {
+					if (res.data.rows.length) {
+						for (let i = 0; i < res.data.rows.length; i++) {
+							res.data.rows[i].checked = false;
+							res.data.rows[i].disabled = false;
+							res.data.rows[i].coverUrl = self.$method.splitImgHost(res.data.rows[i].coverUrl);
+						}
+					}
+					self.list2 = res.data.rows;
+				}
+			});
+		},
+		resultForm(int) {
 			if (this.list.length == 0) {
 				uni.showModal({
 					title: '提示',
@@ -179,9 +210,9 @@ export default {
 			// 	});
 			// 	return;
 			// }
-			let courseId = [];
+			let goodsId = [];
 			for (let i = 0; i < this.list.length; i++) {
-				courseId.push(this.list[i].courseId);
+				goodsId.push(this.list[i].goodsId);
 			}
 			let ss = this.form.week.split('、');
 			let weekArray = [];
@@ -209,35 +240,50 @@ export default {
 				}
 			}
 			let data = {
-				courseId: courseId.join(','),
+				goodsId: goodsId,
 				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(','),
+				studyCount: weekArray,
 				studyDay: this.array_review[this.index_review],
 				status: 1
 			};
-			console.log(this.form);
 			console.log(data);
-			this.$api.planGenerate(data).then(result => {
-				if (result.data.code == 200) {
-					uni.showModal({
-						title: '提示',
-						content: '提交成功',
-						success: function(resst) {
-							uni.navigateBack()
-						}
-					});
-				}else{
-					uni.showToast({
-						title: result.data.msg,
-						icon: 'none',
-						duration: 2000
-					});
-				}
-				console.log(result);
-			});
+			if (int === 1) {
+				this.$api.getsystemplanlistPlan(data).then(result => {
+					if (result.data.code == 200) {
+						this.studyNums = result.data.data.studyCourseKnob;
+					} else {
+						uni.showToast({
+							title: result.data.msg,
+							icon: 'none',
+							duration: 2000
+						});
+					}
+				});
+			} else {
+				this.$api.addsystemplan(data).then(result => {
+					if (result.data.code == 200) {
+						uni.showModal({
+							title: '提示',
+							content: '提交成功',
+							showCancel: false,
+							success: function(resst) {
+								if (resst.confirm) {
+									uni.navigateBack();
+								}
+							}
+						});
+					} else {
+						uni.showToast({
+							title: result.data.msg,
+							icon: 'none',
+							duration: 2000
+						});
+					}
+				});
+			}
 		},
 		selItem(item) {
 			console.log(34);
@@ -313,14 +359,16 @@ export default {
 			});
 			this.checkSameItem();
 			this.show = false;
-			this.form.category = this.list[0].categoryName;
+			if (this.list.length) {
+				this.form.category = this.list[0].educationName + '-' + this.list[0].projectName + '-' + this.list[0].businessName;
+			}
 		},
 		checkboxChange(e) {},
 		checkSameItem() {
 			this.list2.map(val => {
 				val.disabled = false;
 				this.list.map(val1 => {
-					if (val.courseId == val1.courseId) {
+					if (val.goodsId == val1.goodsId) {
 						val.disabled = true;
 					}
 					val.checked = false;
@@ -332,10 +380,11 @@ export default {
 			if (this.list.length === 0) {
 				this.form.category = '';
 			} else {
-				this.form.category = this.list[0].categoryName;
+				this.form.category = this.list[0].educationName + '-' + this.list[0].projectName + '-' + this.list[0].businessName;
 			}
 		},
 		openSel() {
+			console.log(this.list2, 321);
 			this.show = true;
 			this.checkSameItem();
 		}
@@ -354,14 +403,30 @@ export default {
 }
 </style>
 <style scope>
+.dis_ss {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	padding: 22rpx 0rpx;
+	border-bottom: 1rpx solid #eee;
+}
+.getNums {
+	margin-left: 14rpx;
+	color: #007aff;
+	font-size: 30rpx;
+	font-weight: bold;
+	display: inline-block;
+	text-decoration: underline;
+}
 .submit_btn {
 	width: 526rpx;
 	height: 80rpx;
-	background: #007AFF;
+	background: #007aff;
 	border-radius: 40rpx;
 	text-align: center;
 	line-height: 80rpx;
-	color: #FFFFFF;
+	color: #ffffff;
 	margin: 30rpx auto;
 }
 .picker {

pages2/plan/edit.vue

@@ -0,0 +1,546 @@
+<template>
+	<view style="padding: 30rpx;">
+		<view class="list_box">
+			<view class="item" v-for="(item, index) in list" :key="index">
+				<image :src="$method.splitImgHost(item.coverUrl)"></image>
+				<text>{{ item.goodsName }}</text>
+				<text style="color:#999;margin-left:12rpx;">{{ item.secAllNum }}节</text>
+				<view class="del_icon"><u-icon name="minus-circle-fill" color="#EB4D3D" size="40" @click="delItem(index, item.goodsId)"></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 style="color:#999;text-align: center;">添加网课</view>
+			</view>
+		</view>
+		<view class="list_box form">
+			<u-form :model="form" ref="uForm">
+				<u-form-item label="课程类型" :label-width="auto">
+					<view style="line-height: 40rpx;" v-if="form.category">{{ form.category }}</view>
+					<view v-else style="text-align: end;">请添加网课</view>
+				</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>
+				<u-form-item label="学习频率" :label-width="auto">
+					<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>
+				</u-form-item>
+				<u-form-item label="起止日期" :label-width="auto">
+					<view class="picker" @click="openCalendar">{{ form.startDate }}~{{ form.endDate }}</view>
+				</u-form-item>
+			</u-form>
+		</view>
+		<view class="list_box form">
+			<view class="dis_ss">
+				<image src="@/static/icon/computeIcon.png" style="width:32rpx;height:32rpx;" mode=""></image>
+				<text class="getNums" @click="resultForm(1)">点击计算</text>
+			</view>
+			<view style="padding: 25rpx 0rpx; color: #999;text-align: center;font-size: 30rpx;">
+				根据当前计划每个学习日需完成
+				<text style="color: #FF9500;margin: 0rpx 10rpx;font-size: 30rpx;font-weight: bold;">{{ studyNums }}</text>
+				个学时
+			</view>
+		</view>
+		<u-calendar v-model="calendar_show" :min-date="minDate" :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>
+		</u-popup>
+		<u-popup v-model="show" mode="bottom">
+			<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>
+				</view>
+				<view class="popup_list" v-if="list2.length !== 0">
+					<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="list2[index].checked"
+								:key="index"
+								:name="item.goodsId"
+							></u-checkbox>
+						</view>
+						<view style="display: flex;align-items: center;"><image :src="$method.splitImgHost(item.coverUrl)" style="width: 278rpx;height: 134rpx;"></image></view>
+						<view style="margin: 30rpx;">
+							<view>{{ item.goodsName }}</view>
+							<view style="color:#999;">{{ item.secAllNum }}节</view>
+						</view>
+					</view>
+				</view>
+				<view v-else><u-empty text="请前往购买课程" mode="list"></u-empty></view>
+			</view>
+		</u-popup>
+		<view @click="resultForm" class="submit_btn">确认计划</view>
+	</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: [],
+			show: false,
+			calendar_show: false,
+			maxDate: '2023-01-01',
+			minDate: '',
+			list3: [
+				{
+					name: '一',
+					checked: false,
+					disabled: false,
+					id: 1
+				},
+				{
+					name: '二',
+					checked: false,
+					disabled: false,
+					id: 2
+				},
+				{
+					name: '三',
+					checked: false,
+					disabled: false,
+					id: 3
+				},
+				{
+					name: '四',
+					checked: false,
+					disabled: false,
+					id: 4
+				},
+				{
+					name: '五',
+					checked: false,
+					disabled: false,
+					id: 5
+				},
+				{
+					name: '六',
+					checked: false,
+					disabled: false,
+					id: 6
+				},
+				{
+					name: '日',
+					checked: false,
+					disabled: false,
+					id: 0
+				}
+			],
+			selWeek: '',
+			index_review: 4,
+			array_review: [1, 2, 3, 4, 5, 6, 7],
+			planId: null,
+			studyNums: '?'
+		};
+	},
+	onLoad(option) {
+		this.planId = Number(option.id);
+		this.minDate = this.$method.timestampToTime(new Date().getTime() / 1000);
+		this.form.startDate = this.minDate;
+		this.form.endDate = this.$method.timestampToTime(new Date().getTime() / 1000 + 24 * 3600 * 30);
+		this.getGoods();
+		this.getInfo();
+	},
+	onShow() {},
+	methods: {
+		getGoods() {
+			var self = this;
+			self.$api.courseGoodsList().then(res => {
+				if (res.data.code === 200) {
+					if (res.data.rows.length) {
+						for (let i = 0; i < res.data.rows.length; i++) {
+							res.data.rows[i].checked = false;
+							res.data.rows[i].disabled = false;
+						}
+					}
+					self.list2 = res.data.rows;
+				}
+			});
+		},
+		resultForm(int) {
+			if (this.list.length == 0) {
+				uni.showModal({
+					title: '提示',
+					content: '请选择课程',
+					showCancel: false
+				});
+				return;
+			}
+			// if (this.form.week == '请选择') {
+			// 	uni.showModal({
+			// 		title: '提示',
+			// 		content: '请选择学习频率',
+			// 		showCancel: false
+			// 	});
+			// 	return;
+			// }
+			let goodsId = [];
+			for (let i = 0; i < this.list.length; i++) {
+				goodsId.push(this.list[i].goodsId);
+			}
+			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);
+				}
+			}
+			let data = {
+				goodsId: goodsId,
+				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: 1
+			};
+			console.log(data);
+			if (int === 1) {
+				this.$api.getsystemplanlistPlan(data).then(result => {
+					if (result.data.code == 200) {
+						this.studyNums = result.data.data.studyCourseKnob;
+					} else {
+						uni.showToast({
+							title: result.data.msg,
+							icon: 'none',
+							duration: 2000
+						});
+					}
+				});
+			} else {
+				data.planId = this.planId;
+				this.$api.editsystemplan(data).then(result => {
+					if (result.data.code == 200) {
+						uni.showModal({
+							title: '提示',
+							content: '提交成功',
+							showCancel: false,
+							success: function (res) {
+								if (res.confirm) {
+									uni.navigateBack();
+								}
+							}
+						});
+					} else {
+						uni.showToast({
+							title: result.data.msg,
+							icon: 'none',
+							duration: 2000
+						});
+					}
+				});
+			}
+		},
+		selItem(item) {
+			console.log(34);
+			item.checked = !item.checked;
+		},
+		getInfo(int) {
+			var self = this;
+			this.$api.systemplanInfo(this.planId).then(res => {
+				this.form.date = this.$method.timestampToTime(res.data.data.examDate);
+				this.form.time = res.data.data.reminderTime;
+				this.form.startDate = this.$method.timestampToTime(res.data.data.startTime);
+				this.form.endDate = this.$method.timestampToTime(res.data.data.endTime);
+				this.index_review = res.data.data.studyDay - 1;
+				this.form.week = res.data.data.studyCount;
+				this.list = res.data.data.goodsVos;
+				this.form.category = this.list[0].educationName + '-' + this.list[0].projectName + '-' + this.list[0].businessName;
+				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('、');
+				this.resultForm(1);
+			});
+		},
+		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;
+			if (this.list.length) {
+				this.form.category = this.list[0].educationName + '-' + this.list[0].projectName + '-' + this.list[0].businessName;
+			}
+		},
+		checkboxChange(e) {},
+		checkSameItem() {
+			this.list2.map(val => {
+				val.disabled = false;
+				this.list.map(val1 => {
+					if (val.goodsId == val1.goodsId) {
+						val.disabled = true;
+					}
+					val.checked = false;
+				});
+			});
+		},
+		delItem(index, ids) {
+			this.list.splice(index, 1);
+			if (this.list.length === 0) {
+				this.form.category = '';
+			} else {
+				this.form.category = this.list[0].educationName + '-' + this.list[0].projectName + '-' + this.list[0].businessName;
+			}
+		},
+		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;
+}
+</style>
+<style scope>
+.dis_ss {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	padding: 22rpx 0rpx;
+	border-bottom: 1rpx solid #eee;
+}
+.getNums {
+	margin-left: 14rpx;
+	color: #007aff;
+	font-size: 30rpx;
+	font-weight: bold;
+	display: inline-block;
+	text-decoration: underline;
+}
+.submit_btn {
+	width: 526rpx;
+	height: 80rpx;
+	background: #007aff;
+	border-radius: 40rpx;
+	text-align: center;
+	line-height: 80rpx;
+	color: #ffffff;
+	margin: 30rpx auto;
+}
+.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;
+}
+</style>

pages2/plan/index.vue

@@ -1,91 +1,106 @@
 <template>
 	<view style="padding: 30rpx;">
-	<view v-if="havePlan">
-		<view class="card" v-if="havePlan">
-			<view class="date_t1">
-				<u-icon name="arrow-left" size="28" v-if="havePreviousMonth" @click="swipeMonth(-1)"></u-icon>
-				<text style="padding: 0 15rpx;">{{ calendarStudyVo.year }}年 {{ calendarStudyVo.month }}月</text>
-				<u-icon name="arrow-right" size="28" v-if="haveNextMonth" @click="swipeMonth(1)"></u-icon>
-			</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>
-			<view style="width: 100%;margin-top: 20rpx;">
-				<view v-for="(item, index) in showDayList" :key="index" class="date_num">
-					<view v-if="item.color == 0" class="date_num_color0" v-show="item.date > 0">
-						{{ item.date }}
-						<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.date }}
-						<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.date }}
-						<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.date }}
-						<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="havePlan">
+			<view class="card" v-if="havePlan">
+				<view class="date_t1">
+					<u-icon name="arrow-left" size="28" v-if="havePreviousMonth" @click="swipeMonth(-1)"></u-icon>
+					<text style="padding: 0 15rpx;">{{ calendarStudyVo.year }}年 {{ calendarStudyVo.month }}月</text>
+					<u-icon name="arrow-right" size="28" v-if="haveNextMonth" @click="swipeMonth(1)"></u-icon>
 				</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 style="margin-left: 30rpx;margin-top: 10rpx;display: flex;align-items: center;" @click="jumpDetail(item)">
-					<text class="date_t2">{{ item.courseName }}</text>
-					<view class="circle_num" style="margin-left: 20rpx;">{{ item.chapterNum }}</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>
-			</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'" @click.stop="openEdit(item)">
-						<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></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 style="width: 100%;margin-top: 20rpx;">
+					<view v-for="(item, index) in showDayList" :key="index" class="date_num">
+						<view v-if="item.color == 0" class="date_num_color0" v-show="item.date > 0">
+							{{ item.date }}
+							<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
+							<view v-if="item.dot" class="date_dot"></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>
+						<view v-if="item.color == 1" class="date_num_color1">
+							{{ item.date }}
+							<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.date }}
+							<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.date }}
+							<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
+							<view v-if="item.dot" class="date_dot"></view>
 						</view>
-						<view style="display: flex;margin-top: 20rpx;"><text class="item_t2">学习进度：{{item.studyNum}}/{{item.pitchNum}}</text></view>
 					</view>
-					<template v-slot:right>
-						<view class="operate">
-							<image src="/static/operate_1.png" class="operate_img operate_img1" @click="delWorker(item)"></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 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 style="margin-left: 30rpx;margin-top: 10rpx;display: flex;align-items: center;" @click="jumpDetail(item)">
+						<text class="date_t2">{{ item.goodsName }}</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'" @click.stop="openEdit(item)">
+							<u-row>
+								<u-col span="11">
+									<text class="item_t1">
+										{{ item.goodsVos[0].educationName + '-' + item.goodsVos[0].projectName + '-' + item.goodsVos[0].businessName }}：{{
+											$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>
+							<scroll-view style="white-space: nowrap" class="scroll-view_H" scroll-x="true">
+								<view style="margin-top: 30rpx;display: inline-block;width:296rpx;margin-right: 30rpx;" v-for="(items, indexs) in 3" :key="indexs">
+									<image :src="$method.splitImgHost(item.goodsVos[0].coverUrl)" class="r_image"></image>
+									<view class="r_t2">{{ item.goodsVos[0].goodsName }}</view>
+								</view>
+							</scroll-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>
+							</view>
+							<view style="display: flex;margin-top: 20rpx;">
+								<text class="item_t2">学习进度：{{ item.studyNum }}/{{ item.pitchNum }}</text>
+							</view>
 						</view>
-					</template>
-				</uni-swipe-action-item>
-			</uni-swipe-action>
+						<template v-slot:right>
+							<view class="operate">
+								<image src="/static/operate_1.png" class="operate_img operate_img1" @click="delWorker(item)"></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>
+				</uni-swipe-action>
+			</view>
+
+			<view class="newPlan" @click="newPlan()">新建计划</view>
 		</view>
-		
-		<view class="newPlan" @click="newPlan()">新建计划</view>
-	</view>
 		<view v-else class="tipBox">
-			<view class="tip">您暂无相关计划哦~</view>
-			<view class="tipBtn" @click="newPlan()">马上制定~</view>
+			<view class="dis_ffs" v-if="goodsList.length">
+				<view class="tip">您暂无相关计划哦~</view>
+				<view class="tipBtn" @click="newPlan()">马上制定</view>
+			</view>
+			<view class="dis_ffs" v-else>
+				<view class="tip">您暂无课程可以制定计划哦~</view>
+				<view class="tipBtn" @click="newPlan()">马上选课</view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -166,30 +181,39 @@ export default {
 			dayStudyList: [],
 			listItem: {},
 			currentMonth: 0,
-			havePlan: false
+			havePlan: false,
+			goodsList: [] //用户拥有的商品
 		};
 	},
 	onLoad(option) {
 		this.date_use = this.date_num;
+		this.getUserGoodsList();
 	},
 	onShow() {
-		this.workList = []
-		this.showDayList = []
-		this.calendarStudyVo = {}
-		this.isOpen = false
-	//	this.getList();
+		this.workList = [];
+		this.showDayList = [];
+		this.calendarStudyVo = {};
+		this.isOpen = false;
+		this.getList();
 	},
 	methods: {
+		getUserGoodsList() {
+			this.$api.courseGoodsList().then(res => {
+				if (res.data.code === 200) {
+					this.goodsList = res.data.rows;
+				}
+			});
+		},
 		//删除计划
 		delWorker(option) {
 			var data = {
 				planId: option.planId,
-				status: 0
+				status: -1
 			};
-			let self = this
-			this.$api.planupdateGenerate(data).then(res => {
-				self.getList()
-			})
+			let self = this;
+			this.$api.editsystemplan(data).then(res => {
+				self.getList();
+			});
 		},
 		swipeMonth(index) {
 			this.isOpen = false;
@@ -199,7 +223,7 @@ export default {
 			this.currentMonth = this.currentMonth + index;
 			let item = this.listItem.calendarStudyVo[this.monthIndex];
 			this.calendarStudyVo = item;
-			this.workList = this.calendarStudyVo.coursePlanVo;
+			this.workList = this.calendarStudyVo.goodsVos;
 			if (this.monthIndex > 0) {
 				this.havePreviousMonth = true;
 			}
@@ -213,14 +237,15 @@ export default {
 			let currentMonth = date.getMonth() + 1;
 			this.haveNextMonth = false;
 			this.havePreviousMonth = false;
-			this.workList = this.listItem.coursePlanVo;
+			this.workList = this.listItem.goodsVos;
+			return;
 			if (this.listItem !== undefined) {
 				for (let i = 0; i < this.listItem.calendarStudyVo.length; i++) {
 					let item = this.listItem.calendarStudyVo[i];
 					if (item.month == currentMonth) {
 						this.monthIndex = i;
 						this.calendarStudyVo = item;
-						
+
 						if (i > 0) {
 							this.havePreviousMonth = true;
 						}
@@ -303,27 +328,26 @@ export default {
 		},
 		getList() {
 			let self = this;
-			this.$api.planUserPlan().then(result => {
-				result.data.data.forEach((item, index) => {
+			this.$api.getsystemplanlist({status:1}).then(result => {
+				result.data.rows.forEach((item, index) => {
 					item.show = 'none';
 				});
-				self.list = result.data.data;
-				if(result.data.data.length>0){
-					self.listItem = self.list[0]
-					self.dealMonth()
-					if(self.list.length>0){
-						self.listItem = self.list[0]
-						self.dealMonth()
-						self.havePlan = true
+				self.list = result.data.rows;
+				if (result.data.rows.length > 0) {
+					self.listItem = self.list[0];
+					self.dealMonth();
+					if (self.list.length > 0) {
+						self.listItem = self.list[0];
+						self.dealMonth();
+						self.havePlan = true;
 					}
-				}else{
-					self.havePlan = false
+				} else {
+					self.havePlan = false;
 				}
-				self.updateHomePlan()
-
+				self.updateHomePlan();
 			});
 		},
-		updateHomePlan(){
+		updateHomePlan() {
 			const pages = getCurrentPages(); //获取页面栈
 			const beforePage = pages[pages.length - 2]; //前一个页面
 			beforePage.$vm.updateHomePlan();
@@ -362,27 +386,33 @@ export default {
 </script>
 
 <style scope>
-	.tipBtn{
-		width: 160rpx;
-		height: 56rpx;
-		background: #007AFF;
-		border-radius: 16rpx;
-		color: #FFFFFF;
-		text-align: center;
-		line-height: 56rpx;
-		margin-top: 30rpx;
-	}
-	.tipBox{
-		display:flex;
-		align-items:center;/*垂直居中*/
-		justify-content: center;/*水平居中*/
-		flex-direction: column;
-		margin-top: 40%;
-	}
-	.tip{
-		color: #999999;
-		font-size: 32rpx;
-	}
+.dis_ffs {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+.tipBtn {
+	width: 160rpx;
+	height: 56rpx;
+	background: #007aff;
+	border-radius: 16rpx;
+	color: #ffffff;
+	text-align: center;
+	line-height: 56rpx;
+	margin-top: 30rpx;
+}
+.tipBox {
+	display: flex;
+	align-items: center; /*垂直居中*/
+	justify-content: center; /*水平居中*/
+	flex-direction: column;
+	margin-top: 40%;
+}
+.tip {
+	color: #999999;
+	font-size: 32rpx;
+}
 .newPlan {
 	width: 200rpx;
 	height: 64rpx;
@@ -443,10 +473,12 @@ export default {
 	font-family: PingFang SC;
 	font-weight: 400;
 	color: #0c141f;
+	white-space: pre-wrap;
 }
 .r_image {
 	width: 278rpx;
 	height: 134rpx;
+	border-radius: 16rpx;
 }
 .img_more {
 	width: 26rpx;
@@ -466,7 +498,7 @@ export default {
 }
 .list_item {
 	width: 100%;
-	height: 418rpx;
+	min-height: 418rpx;
 	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.05);
 	border-radius: 24rpx;
 	margin-top: 20rpx;

pages2/verify/input.vue

@@ -157,7 +157,7 @@
 				</template>
 			</u-form>
 		</view>
-		<view @click="submits" class="submit_btn">{{ nextStatus ? '下一步' : '提交资料' }}</view>
+		<view @click="submits" class="submit_btn">提交资料</view>
 	</view>
 </template>
 
@@ -192,12 +192,12 @@ export default {
 			slideValue: 50,
 			handwriting: '',
 			goodsId: null,
-			listData: {}, //页面数据
+			listData: [], //页面数据
 			fileList1: [], //个人近照
 			fileList2: [], //人像
 			fileList3: [], //国徽
 			openVerify: false, // 控制是否手动验证
-			nextStatus: false, //是否有下一步
+			// nextStatus: false, //是否有下一步
 			rules: {
 				name: [
 					{
@@ -342,7 +342,6 @@ export default {
 			}
 		};
 	},
-	created() {},
 	onLoad(option) {
 		this.goodsId = Number(option.id);
 		this.getInfo();
@@ -357,6 +356,33 @@ export default {
 	},
 	computed: { ...mapGetters(['dictObj']) },
 	methods: {
+		uploadDatas(data) {
+			var self= this
+			var objs = {};
+			for (let k in data) {
+				objs[k] = {
+					fieldKey: k,
+					value: data[k],
+					fieldName:function(){
+						for(let i = 0; i < self.listData.length;i++){
+							if(self.listData[i].fieldKey == k){
+								return self.listData[i].fieldName
+							}
+						}
+					}(),
+					status: 0
+				};
+			}
+			var datas = {
+				goodsId:this.goodsId,
+				keyValue:JSON.stringify(objs)
+			}
+			this.$api.addbaseprofiletp(datas).then(res => {
+				if(res.data.code === 200){
+					this.$method.showToast("提交成功")
+				}
+			})
+		},
 		//提交表单
 		async submitApi() {
 			var data = JSON.parse(JSON.stringify(this.form));
@@ -381,14 +407,15 @@ export default {
 			if (data['commitment_electr_signature']) {
 				data.commitment_electr_signature = await this.$method.uploadFile(data.commitment_electr_signature, 0);
 			}
-			if (this.nextStatus) {
-				this.$store.commit('updataCopyData', data);
-				this.$navTo.togo('/pages2/verify/input2', {
-					id: this.goodsId
-				});
-			} else {
-				console.log(data);
-			}
+			// if (this.nextStatus) {
+			// 	this.$store.commit('updataCopyData', data);
+			// 	this.$navTo.togo('/pages2/verify/input2', {
+			// 		id: this.goodsId
+			// 	});
+			// } else {
+				this.uploadDatas(data)
+			console.log(data);
+			// }
 		},
 		//验证表单
 		resultForm(int) {
@@ -489,10 +516,10 @@ export default {
 		getInfo() {
 			this.$api.getbaseprofiletpId(this.goodsId).then(res => {
 				var ast = JSON.parse(res.data.data.keyValue);
-				const key2 = JSON.parse(res.data.data.keyValue2);
-				if (key2.length) {
-					this.nextStatus = true;
-				}
+				// const key2 = JSON.parse(res.data.data.keyValue2);
+				// if (key2.length) {
+				// 	this.nextStatus = true;
+				// }
 				ast.forEach(item => {
 					if (item.fieldKey === 'school' || item.fieldKey === 'major') {
 						item.inputType = 1;

pages2/verify/input2.vue

@@ -22,20 +22,19 @@
 					>
 						<text style="color: blue;position: absolute;top: 20rpx;left: 180rpx;text-decoration: underline;" @click="downDocx(item.url)">点击下载</text>
 						<view class="dis_stys"><text style="color: #999999;">下载承诺书进行填写并签名盖章后上传（≤2M）</text></view>
-						<view style="width: 169rpx; height: 169rpx;position: relative;">
-							<image v-if="!form[item.fieldKey]" style="width: 100%; height: 100%;" @click="uploadFieds" src="@/static/info_4.png"></image>
-							<image v-if="form[item.fieldKey]" src="@/static/icon/jy_icon.png" style="width: 100%; height: 100%;"></image>
-							<u-icon v-if="form[item.fieldKey]" name="close-circle-fill" color="red" size="44" class="optionsAbs" @click="clearWord"></u-icon>
+						<image v-if="!form[item.fieldKey]" style="width: 169rpx; height: 169rpx;" @click="uploadFieds" src="@/static/info_4.png"></image>
+						<view class="quzw" v-if="form[item.fieldKey]">
+							<view v-if="form[item.fieldKey].split('.').splice(-1)[0] == 'docx' || form[item.fieldKey].split('.').splice(-1)[0] == 'doc'" class="borsrs">
+								<image src="@/static/icon/jy_icon.png" style="width: 168rpx; height: 168rpx;"></image>
+								<text>{{ titleName }}</text>
+							</view>
+							<image v-else :src="form[item.fieldKey]" style="width: 100%; height: 100%;" mode="aspectFit" @click="seePhotos(form[item.fieldKey])"></image>
+							<u-icon name="close-circle-fill" color="red" size="44" class="optionsAbs" @click="clearWord"></u-icon>
 						</view>
 					</u-form-item>
 				</template>
 			</u-form>
 		</view>
-		<!-- <view style="width: 169rpx; height: 169rpx;position: relative;">
-			<image v-if="!form.commitment_seal" style="width: 100%; height: 100%;" @click="uploadFieds" src="@/static/info_4.png"></image>
-			<image v-if="form.commitment_seal" src="@/static/icon/jy_icon.png" style="width: 100%; height: 100%;"></image>
-			<u-icon v-if="form.commitment_seal" name="close-circle-fill" color="red" size="44" class="optionsAbs" @click="clearWord"></u-icon>
-		</view> -->
 		<view @click="submits" class="submit_btn">提交资料</view>
 	</view>
 </template>
@@ -53,6 +52,7 @@ export default {
 			openVerify: false, // 控制是否手动验证
 			nextStatus: false, //是否有下一步
 			copyData: null,
+			titleName: '文件名称居中对齐过长换行', //word名称
 			rules: {
 				commitment_seal: [
 					{
@@ -73,6 +73,11 @@ export default {
 		this.$refs.uForm.setRules(this.rules);
 	},
 	methods: {
+		seePhotos(url) {
+			uni.previewImage({
+				urls: [url]
+			});
+		},
 		downDocx(url) {
 			uni.downloadFile({
 				url: this.$method.splitImgHost(url),
@@ -86,6 +91,7 @@ export default {
 		},
 		clearWord() {
 			this.$set(this.form, 'commitment_seal', '');
+			this.titleName = '';
 		},
 		uploadFieds() {
 			var self = this;
@@ -98,6 +104,12 @@ export default {
 						self.$method.showToast('上传文件不得大于2M');
 						return;
 					} else {
+						var type = res.tempFiles[0].path.split('.').splice(-1);
+						if (type[0] != 'jpg' && type[0] != 'png' && type[0] != 'jpeg' && type[0] != 'docx' && type[0] != 'doc') {
+							self.$method.showToast('请上传word文档或图片');
+							return;
+						}
+						self.titleName = res.tempFiles[0].name;
 						self.$set(self.form, 'commitment_seal', res.tempFiles[0].path);
 						self.$nextTick(function() {
 							this.resultForm();
@@ -125,7 +137,7 @@ export default {
 				for (let i = 0; i < this.listData.length; i++) {
 					if (this.listData[i].fieldKey === 'commitment_seal' && !this.listData[i].required) {
 						this.submitApi();
-						return
+						return;
 					}
 				}
 				this.$refs.uForm.validate(valid => {
@@ -176,6 +188,21 @@ page {
 }
 </style>
 <style scope>
+.quzw {
+	width: 638rpx;
+	height: 638rpx;
+	position: relative;
+	border: 2rpx solid #eee;
+	border-radius: 8rpx;
+}
+.borsrs {
+	width: 640rpx;
+	height: 640rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
 .optionsAbs {
 	position: absolute;
 	z-index: 99;