driverSchool/newPages/register/index.vue

<template>
	<view class="content">
		<view class="container">
			<!-- #ifdef MP-WEIXIN -->
			<!-- #ifdef MP-WEIXIN -->
			<headers :titles="titles">
				<uni-icons @click="goback()" type="left" color="#000000" size="22px"></uni-icons>
			</headers>
			<!-- #endif -->
			<!-- #endif -->
			<u-loadmore :status="status" v-if="show == true" />
		</view>
		<view class="bm-page">
			<view class="bm-page-top">
				<image class="top-left-img" :src="baseUrl +'/'+ rightInfoList.photo" mode=""></image>
				<view class="bm-page-right">
					<view class="bm-page-right-1">{{ rightInfoList.name}}</view>
					<view class="bm-page-right-2">
						<view class="bm-page-right-zd">{{rightInfoList.tittle}}</view>
						<view class="bm-page-right-c2">{{rightInfoList.type}}</view>
					</view>
					<view class="bm-page-right-3"> <text class="bm-page-right-price">￥{{rightInfoList.price}}</text>
						<text class="bm-page-right-jprice">￥{{rightInfoList.price}}</text>
					</view>
				</view>
			</view>
			<view class="bm-page-info" v-if="hideTeacher==0">
				<view style="width: 100%; display: flex;align-items: center;justify-content: space-between; ">
					<view class="bm-page-info-title">
						选择教练
					</view>
					<view class="d-s" @click="showjl = true">
						<view class="" v-if="!jlName">请选择</view>
						<view class="" v-else>{{jlName}}</view>
						<u-icon name="arrow-right" size="16"></u-icon>
					</view>
				</view>

			</view>
			<view class="bm-page-info">
				<view style="width: 100%; display: flex;align-items: center;justify-content: space-between; ">
					<view class="bm-page-info-title">
						填写身份信息
					</view>
					<view class="anniu" @click="popupShow = true">
						点击上传身份证
					</view>
				</view>

				<view class="info-name">
					<view class="info-name-left">姓名</view>
					<view class="info-name-right">
						<input class="info-name-input" v-model="name" type="text" placeholder="请填写真实姓名">
					</view>
				</view>
				<view class="info-name">
					<view class="info-name-left">性别</view>
					<view class="d-s" style="width: 70%;">
						<view class="size-lv" :class="{'clv' : sex == index }" v-for=" (item,index) in sexlist"
							:key="index" @click="getsexindex(index)">{{item}}</view>
					</view>
				</view>
				<view class="info-name">
					<view class="info-name-left">年龄</view>
					<view class="info-name-right">
						<input class="info-name-input" v-model="age" type="number" placeholder="请填写真实年龄">
					</view>
				</view>
				<view class="info-name">
					<view class="info-name-left">手机号</view>
					<view class="info-name-right">
						<input class="info-name-input" v-model="phone" type="text" placeholder="请输入正确手机号">
					</view>
				</view>
				<view class="info-name">
					<view class="info-name-left">身份证号</view>
					<view class="info-name-right">
						<input class="info-name-input" v-model="identity" type="text" placeholder="请输入身份证号">
					</view>
				</view>
				<!-- <view style="padding: 0;" class="info-name">
					<view class="info-name-left">选择教练</view>
					<view class="info-name-right">
						<view class="bm-page-button">
							<button @click="goBookingJl()" class="bm-page-button-main">预约教师</button>
						</view>
					</view>

				</view> -->
			</view>
			<view class="bm-page-dj">
				<view class="bm-page-dj-title" @click="show = true">
					<view class="d-s">
						<view>{{dname}}</view>：
						<text class="bm-page-dj-title-price">
						        ￥{{ currentPrice }}  <!-- 动态显示当前价格 -->
						      </text>
					</view>
					<u-icon name="arrow-right" color="#999" size="18"></u-icon>
				</view>

				<view @click="changeStartPay(2)" class="dj-list">
					<view class="dj-list-left">
						<image class="dj-list-left-img" src="../../static/imgs/yfk.png" mode=""></image>
						<view class="dj-list-left-name">线下支付</view>
					</view>
					<view class="dj-list-right">
						<view v-if="startPay === 1" class="onel"></view>
						<view v-else class="twol">
							<u-icon name="checkmark" color="#FFF" size="16"></u-icon>
						</view>
					</view>
				</view>
				<view @click="changeStartPay(1)" class="dj-list">
					<view class="dj-list-left">
						<image class="dj-list-left-img" src="../../static/imgs/qbdd.png" mode=""></image>
						<view class="dj-list-left-name">微信</view>
					</view>
					<view class="dj-list-right">
						<view v-if="startPay === 2" class="onel"></view>
						<view v-else class="twol">
							<u-icon name="checkmark" color="#FFF" size="16"></u-icon>
						</view>
					</view>
				</view>
			</view>


			<view class="bm-page-button">
				<button @click="applicationClick" class="bm-page-button-main">点击报名</button>
			</view>
			<u-picker :show="show" :columns="columns" keyName="label" @confirm="confirm" @cancel="cancel"></u-picker>
			<u-picker :show="showjl" :columns="columnjl" keyName="label" @confirm="jlconfirm"
				@cancel="jlcancel"></u-picker>
			<u-popup :show="popupShow" :round="10" mode="center" @close="close" @open="open">
				<view class="popup-box">
					<view class="title_s">请上传身份证人像面</view>
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="1" width="280" height="150">
						<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix"
							style="width: 280px;height: 150px;"></image>
					</u-upload>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import headers from '../../components/header/headers.vue'
	import request from '@/utils/request.js'
	import tabbar from '../../components/tabbar/tabbar.vue'
	import upload from '@/utils/upload.js'
import { getLocalUserInfo } from '../../utils/auth'
	export default {
		data() {
			return {
				titles: "报名",
				id: null,
				List: [],
				show: false,
				showjl: false,
				popupShow: false,
				sfzimg: null,
				fileList1: [],
				baseUrl: this.$imagesUrl,
				status: 'loading',
				sexlist: [
					"男",
					"女"
				],
				name: null,
				phone: null,
				sex: 0,

				identity: null,
				age: null,
				startPay: 2,
				courseId: null,
				rightInfoList: [],
				columnjl: [],
				jxId: null,
				orderId: null,
				orderNo: null,
				dname: "全款", // 默认显示全款
				currentPrice: 0,
				selectedPayType: 2, // 默认选中全款(2)
				settings: { //签名设置
					width: '750', //签名区域的宽
					height: '500', //签名区域的高
					lineWidth: 4, //签名时线宽
					textColor: '#000' //签名文字颜色
				},
				jlName: null,
				jlId: null,
				hideTeacher: 0,
				Address: '',
				djshow: false,
				userId: null,
				tenantId: null,
				userinfo: [],
				columns: [
					[{
						label: '全款',
						// 其他属性值
						id: 2
						// ...
					}, {
						label: '定金',
						id: 1
					}]
				],
			}
		},
		onLoad: function(option) {
			uni.showToast({
				title: '请完善个人信息',
				icon: 'none'
			})
			if (uni.getStorageSync('jlId')) {
				this.hideTeacher = 1
			}
			this.jlId = uni.getStorageSync('jlId');
			this.courseId = option.courseId,
			this.userId = option.userId,
			this.tenantId = option.tenantId
			this.userinfo = getLocalUserInfo()
			console.log("驾校id", this.jxId, "课程id", this.courseId)
			console.log("userId", this.userId, "tenantId", this.tenantId)
			console.log("userinfo",this.userinfo)
			console.log('当前存储的所有键:', uni.getStorageInfoSync().keys)
			console.log('token值:', uni.getStorageSync('App-Token'))
		},
		onShow() {
			this.getListAll()
			// this.actList = ["1", "1", "1", "1", "1", ]
			// this.status = "nomore" 底部刷新结束
			this.getRightInfoList()
		},
		onPullDownRefresh() {
			console.log("刷新");
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			// this.show = true
			setTimeout(() => {
				console.log("加载执行");
			}, 2000)
		},
		// 发送好友
		onShareAppMessage(res) {
			return {
				title: this.titles,
				path: '/pages/index/index',
			}
		},
		// 分享朋友圈
		onShareTimeline(res) {
			return {
				title: this.titles,
				path: '/pages/index/index',
			}
		},
		components: {
			headers,
			tabbar
		},

		methods: {
			updateDisplayPrice() {
			  
			  this.currentPrice = this.selectedPayType === 1
			    ? this.rightInfoList.reserveMoney
			    : this.rightInfoList.price;
			},
			async getListAll() {
				this.columnjl = []
				let res = await request({
					url: '/app-api/dl-drive-school-coach-small/page',
					method: 'get',
					params: {
					  tenantId: this.tenantId,
					},
					tenantIdFlag: false
				})
				console.log(res);
				this.columnjl = [
				            res.data.records.map(coach => ({
				                label: coach.name,
				                value: coach
				            }))
				        ];
			},
			getsexindex(index) {
				this.sex = index
			},
			open() {
				// console.log('open');
			},
			close() {
				this.popupShow = false
				// console.log('close');
			},
			jlconfirm(e) {
			    console.log("选中教练:", e.value[0]);
			    this.jlName = e.value[0].label; // 显示名称
			    this.jlId = e.value[0].value.id; // 获取教练ID
			    this.showjl = false;
			},
			jlcancel() {
				this.showjl = false
			},
			confirm(e) {
			  const selected = e.value[0];
			  this.dname = selected.label;
			  this.selectedPayType = selected.id;
			  this.updateDisplayPrice(); // 只在切换时更新价格
			  this.show = false;
			},
			cancel() {
				this.show = false
			},
			goback() {
				uni.navigateBack()
			},
			changeStartPay(id) {
				this.startPay = id
			},

			goBookingJl() {
				uni.navigateTo({
					url: '/pages/index/bookingJl',
				})
			},

			// 校验手机号
			isValidPhoneNumber(phoneNumber) {
				const regex = /^1[3-9]\d{9}$/;
				if (regex.test(phoneNumber)) {
					return true;
				} else {
					return false;
				}
			},


			// 校验身份证
			isValidIDNumber(idNumber) {
				const regex = /^\d{15}|\d{17}(?:\d|X)$/;
				if (regex.test(idNumber)) {
					return true;
				} else {
					return false;
				}
			},


			applicationClick() {
				// 登录校验
				  if (!this.checkLogin()) {
				    uni.navigateTo({ url: '/pages/login/login' });
				    return;
				  }
          // 校验身份证照片
        /*if(this.sfzimg === null ){
          uni.showToast({
            title: '请上传身份证照片',
            icon: 'error',
            duration: 2000
          })
          return
        }*/

				// 判断如果为空
				if (this.phone === null || this.name === null) {
					uni.showToast({
						title: '请输入完整信息',
						icon: 'error',
						duration: 2000
					})
					return
				}

				// 判断手机号是否满足
				let isPhone = this.isValidPhoneNumber(this.phone)
				if (isPhone === false) {
					uni.showToast({
						title: '输入的手机号不规范',
						icon: 'error',
						duration: 2000
					})
					return
				}

				// 判断身份证是否满足
				let isIdentity = this.isValidIDNumber(this.identity)
				if (isIdentity === false) {
					uni.showToast({
						title: '输入的身份证不规范',
						icon: 'error',
						duration: 2000
					})
					return
				}


				if (this.startPay === 1) {
					// 微信支付

          if(this.selectedPayType === 1){
          //   定金
            let payType = 1
            let reserveMoney = this.rightInfoList.reserveMoney
           /* let restMoney = new Decimal(this.rightInfoList.price)
                .minus(new Decimal(this.rightInfoList.reserveMoney))*/
            let restMoney = this.rightInfoList.price - this.rightInfoList.reserveMoney
            console.log("定金")
            console.log("reserveMoney", reserveMoney)
            console.log("restMoney", restMoney)
            this.wxPayClick(this.name, this.phone, this.identity, this.courseId, payType, reserveMoney, restMoney)
          }else if (this.selectedPayType === 2) {
          //   全款
            let payType = 2
            let reserveMoney = this.rightInfoList.price
            let restMoney = 0
            console.log('全款')
            console.log("reserveMoney", reserveMoney)
            console.log("restMoney", restMoney)
            this.wxPayClick(this.name, this.phone, this.identity, this.courseId, payType, reserveMoney, restMoney)
          }

				} else {
					// 线下支付
					this.xxiaPayClick(this.name, this.phone, this.identity, this.startPay, this.courseId, this.jxId)
				}


			},
			async wxPayClick(name, phone, identity, courseId, payType, reserveMoney, restMoney) {
				console.log("微信支付", )
				console.log("reserveMoney123",reserveMoney)
				const that = this; // 保存this引用
				let res = await request({
					url: '/small/jxInfo/onLinePay',
					data: {
            userName: name,
            userPhone: phone,
            userSex: this.sex,
            tenantId: this.tenantId,
            userNo: identity,
            courseId: courseId,
            coachUserName: this.jlName,
            coachUserId: this.jlId,
            courseType: this.rightInfoList.type,
            courseName: this.rightInfoList.name,
            userId: this.userId,
            reserveMoney: reserveMoney,
            payType: payType,
            restMoney: restMoney,
					},
					method: 'post',
				})

				this.orderId = res.orderId
				this.orderNo = res.orderNo
					console.log("收到为单位1 =====>", this.orderId)
					console.log("收到为单位2 =====>", this.orderNo)
					console.log("收到为单位3 =====>", res)

				let item = await request({
					url: '/small/jxInfo/prepayment?type=jsapi' + '&orderNo=' + this.orderNo + '&orderId=' + this.orderId + "&payType=" + payType,
					method: 'get'
				})

				console.log("获取到的数据为 =========>", item)


				wx.requestPayment({
					timeStamp: item.timeStamp, // 时间戳，从1970年1月1日00:00:00至今的秒数，即当前的时间
					nonceStr: item.nonceStr, // 随机字符串，长度为32个字符以下。
					package: item.package, // 统一下单接口返回的 prepay_id 参数值，格式如“prepay_id=*”
					signType: item.signType, // 签名算法类型，默认为 MD5，支持RSA等其他加密算法
					paySign: item.paySign, // 签名，详见签名生成算法
					success: function(res) {
						console.log('微信支付成功返回信息', res);
						if (res.errMsg = 'requestPayment:ok') {
							uni.showToast({
								title: '支付成功'
							})
              that.updateOrderStatus(that.orderId,'2')
			  that.insertSchoolStudent()

              const contractData = {
                adress: that.Address,
                name: that.name,
                tenantId: that.tenantId,
                type: that.rightInfoList.type,
                money: reserveMoney,
                indent: that.identity,
                phone: that.phone,
                time: that.getCurrentDateTime()
              };
              uni.navigateTo({
                url: '/pages/index/contract?data=' + encodeURIComponent(JSON.stringify(contractData))
              })
							/*uni.navigateTo({
								url: '/pages/index/contract?Address=' +
									this.Address + '&name=' + this.name
							})*/
						}
						// 支付成功后的回调函数， res.errMsg = 'requestPayment:ok'
					},
					fail: function(res) {
						console.log('执行失败1', res);
						that.cancelpay()
					}
				})

				uni.showToast({
					title: '成功提示',
					icon: 'success',
					duration: 2000
				})
			},
			async xxiaPayClick(name, phone, identity, startPay, courseId) {

				let res = await request({
					url: '/small/jxInfo/offLinePay',
					data: {
						userName: name,
						userPhone: phone,
						userSex: this.sex,
						tenantId: this.tenantId,
						userNo: this.identity,
						courseId: courseId,
						coachUserName: this.jlName,
						coachUserId: this.jlId,
						courseType: this.rightInfoList.type,
						courseName: this.rightInfoList.name,
						reserveMoney: this.rightInfoList.price,
						payType: '2',
						
            userId: this.userId,
					},
					method: 'post',
				})
				if (res.code == 0) {
          console.log('OK')
          // this.updateOrderStatus('20b1fd5446aef14c7023da05332e4e43','2')
          const contractData = {
            adress: this.Address,
            name: this.name,
            tenantId: this.tenantId,
            type: this.rightInfoList.type,
            money: this.rightInfoList.price,
            indent: this.identity,
            phone: this.phone,
            time: this.getCurrentDateTime()
          };

			uni.navigateTo({
            url: '/pages/index/contract?data=' + encodeURIComponent(JSON.stringify(contractData))
			})

          /*uni.navigateTo({
						url: '/pages/index/contract?Address=' +
							this.Address + '&name=' + this.name + '&tenantId=' + this.tenantId
					})*/
				}


			},
			async getRightInfoList() {
				let res = await request({
					url: '/app-api/dl-drive-school-course-small/get?id=' + this.courseId,
					method: 'get',
				})
				this.rightInfoList = res.data,
				this.currentPrice = this.rightInfoList.price;
					console.log("111222333", this.rightInfoList)
			},
			async xxgetRightInfoList() {
				let res = await request({
					url: '/drivingSchool/system/driveSchoolCourse/list?id=' + this.courseId + '&payType=' +
						this.id,
					method: 'get',
				})
				this.rightInfoList = res.data.records[0],
					console.log("报名班类型", this.rightInfoList)
			},
			// 上传
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				if (event.name == '1') {
					this.photoUrl.splice(event.index, 1)
				}
				if (event.name == '2') {
					this.videoUr = null
				}

			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,

					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(e) {
				console.log(e);
				upload({
					url: '/app-api/small-upload/common/upload',
					filePath: e,
				}).then((res) => {
					console.log('sfz', res)
					this.sfzimg = this.baseUrl + '/' + res.data.url
					console.log(this.sfzimg);

					if (this.sfzimg) {
						this.idOcr(this.sfzimg)
					}

				})
			},
			async idOcr(url) {
				console.log('url', url)
				console.log('sfz', this.sfzimg)

				let that = this
				let res = await request({
					url: '/app-api/small-upload/idOcr',
					method: 'post',
					params: {
						imagePath: url
					}
				})
				console.log('321',res)
				that.name = res.data.name
				that.phone = res.data.phone
				that.sex = res.data.sex
				that.identity = res.data.idCard
				that.age = res.data.age
				that.Address = res.data.Address
				console.log('654',res);
				that.popupShow = false
			},
      updateOrderStatus(orderId,paymentStatus){
        console.log('orderId',orderId)
        console.log('paymentStatus',paymentStatus)
        request({
        	url: '/app-api/small/drive/school-course-order/update',
          method: 'put',
          data: {
            id: orderId,
            paymentStatus: paymentStatus
          }
        })
      },
	  
	  insertSchoolStudent(){
		  request({
			  url: '/app-api/small/dl-drive-school-student/create',
			  method: 'post',
			  data: {
				  avatar:this.userinfo.avatar,
				  name:this.name,
				  age:this.age,
				  sex:this.sex,
				  phone:this.phone,
				  idCard:this.identity,
				  registAddress:this.Address,
				  userId:this.userinfo.id,
				  tenantId:this.tenantId,
				  idPhoto: this.sfzimg,
				  
			  }
		  })
	  },

			checkLogin() {
			  const token = uni.getStorageSync('App-Token');
			  console.log(token)
			  if (!token) {
			    uni.showToast({ title: '请先登录', icon: 'none' });
			    return false;
			  }
			  return true;
			},
      getCurrentDateTime() {
        const now = new Date();

       const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0'); 
        const day = String(now.getDate()).padStart(2, '0');
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		// return now;
      }

		}
	}
</script>

<style scoped lang="scss">
	.bm-page {
		padding: 30rpx;

		.bm-page-button {
			margin-top: 30rpx;

			.bm-page-button-main {
				border-radius: 50rpx;
				background-color: #4aa76f;
				color: #fff;
			}
		}

		.bm-page-dj {
			margin-top: 30rpx;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.dj-list {
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.dj-list-left {
					display: flex;
					align-items: center;

					.dj-list-left-name {
						margin-left: 20rpx;
					}

					.dj-list-left-img {
						height: 50rpx;
						width: 50rpx;
					}
				}
			}

			.bm-page-dj-title {
				border-bottom: 1rpx solid #eee;
				padding-bottom: 20rpx;
				margin-bottom: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.bm-page-dj-title-price {
					color: red;
				}
			}
		}

		.bm-page-info {
			margin-top: 30rpx;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.info-name {
				width: 100%;
				padding: 40rpx 0;
				border-bottom: 1px solid #eee;
				display: flex;
				justify-content: space-between;
				width: 100%;
				align-items: center;

				.info-name-right {
					display: flex;
					align-items: center;
					margin-left: 30rpx;
					flex: 3;
				}

				.info-name-left {
					flex: 1;
				}
			}

			.bm-page-info-title {

				font-size: 34rpx;
				font-weight: 600;
			}
		}

		.bm-page-top {
			display: flex;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.bm-page-right {
				margin-left: 30rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.bm-page-right-3 {
					.bm-page-right-price {
						color: red;
					}

					.bm-page-right-jprice {
						margin-left: 20rpx;
						text-decoration: underline;
						font-size: 20rpx;
					}
				}

				.bm-page-right-1 {
					font-weight: 800;
				}

				.bm-page-right-2 {
					display: flex;
					font-size: 22rpx;

					.bm-page-right-zd {
						background-color: rgba(94, 255, 153, 0.2);
					}

					.bm-page-right-c2 {
						background-color: rgba(255, 208, 112, 0.2);
					}

					view {
						text-align: center;
						border-radius: 12rpx;
						padding: 10rpx;
						background-color: red;
						margin-right: 10rpx;
					}

					&:last-child {
						margin-right: 20rpx;
					}
				}
			}

			.top-left-img {
				height: 150rpx;
				width: 230rpx;
				border-radius: 12rpx;
			}
		}
	}

	.content {
		background: #f4f5f6;
		// background: linear-gradient(180deg, #9ffcc5 0%, #84fcbc 14%, rgba(255, 255, 255, 0.84) 24%, rgba(255, 255, 255, 0.84) 100%);
		height: 100vh;
	}

	.container {
		width: 100%;
		background: #f4f5f6;
		box-sizing: border-box;
		padding-top: 88px;
	}

	.onel {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		overflow: hidden;
		border: 1px solid #8c8c8d;
	}

	.twol {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		overflow: hidden;
		border: 1px solid #4aa76f;
		background: #4aa76f;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}

	.d-s {
		display: flex;
		align-items: center;
	}

	.anniu {
		width: 120px;
		height: 35px;
		border-radius: 4px;
		background: #4aa76f;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
	}

	.popup-box {
		width: 300px;
		border-radius: 10px;
		background: #fff;
		box-sizing: border-box;
		padding: 10px;
	}

	.title_s {
		font-weight: bold;
		margin-bottom: 10px;
	}

	.clv {
		color: #fff;
		background: #4aa76f;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		display: flex;
		font-size: 14px;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}

	.size-lv {
		margin-right: 35px;
	}
</style>