<template>
	<view class="container commonDetailPage" style="background-color: #fff !important">
		<view class="contentBox commonPageContentBox order_box">
			<view class="order_top goods_box pay_box">
				<view class="pay_title">支付方式</view>

				<view style="margin-bottom: 20rpx" v-if="!dataInfo.list">
					<u-tag :text="`已选：${dataInfo.title}`" bgColor="#DCF2FA" borderColor="#DCF2FA" color="#7dc1f0"
						plain></u-tag>
				</view>
				<view v-if="dataInfo.list&&dataInfo.list.length>0">
					{{dataInfo.list[0].title}}<text v-if="dataInfo.type==1">延期价格：</text><text v-else>价格：</text>
					<text v-for="(item,index) in dataInfo.list" :key="index" 
					class="list_choose" 
					:class="activeIndex==index?'list_choose_active':''"
					@click="chooseYear(item, index)">{{item.year}}年</text>
				</view>
				
				
				<view class="curriulum_title_box goods_item pay_item" v-for="(v, i) in payList">
					<view :class="i != 2 ? 'bgGrey top' : 'top'">
						<view class="left">
							<image class="pay_item_img" :src="v.imgUrl" mode="aspectFil" :style="v.style">
							</image>
							<template v-if="v.type == 4">
								<text> {{ v.text }}</text>
								<text style="color: #7dc1f0; font-weight: 400; margin-left: 10rpx">
									（余额：{{
                    initData && initData.user ? initData.user.peanutCoin : 0
                  }}）</text>
							</template>

							<text v-else> {{ v.text }}</text>
						</view>
						
						<radio :value="v.value" color="#7dc1f0" :checked="selectPayIndex == i ? true : false"
							@click="radioChange(i)" size="10" />
					</view>
				</view>
				<template v-if="selectPayIndex == 2||$platform=='ios'">
					<view class="goods_detail_list_title bg_box_shandow color_shandow bg_color">
						<view class="linlanzhifu" style="
						width: 100%;
						overflow: hidden;
						justify-content: space-between;
					  ">
							<view class="linlanzhifu">
								<u-icon name="error-circle" color="#7dc1f0" size="18"
									style="display: inline-block; margin-right: 10rpx"></u-icon>
								确保您的天医币足够支付
							</view>

							<text class="fdButtonBox aui-text-danger fdButtonBoxRed" style="float: right"
								@click="onPageJump('/pages/wallet/recharge?source=order')">立即充值</text>
						</view>

						<view class="other_info" style="margin-top: 12rpx">
							<view class="explain" style="margin-bottom: 10rpx"> 说明 </view>
							<view class="explain"> 1. 1天医币 = 1元人民币 </view>
							<view class="explain">
								2.若有疑问或意见请致电客服
								<span style="font-size: 15px"><u @click="gotoPhone">022-24142321</u></span>
							</view>
							<view class="explain">
								3.非中国大陆用户可以信用卡支付。简单快捷，推荐使用！
								支付时使用的信用卡需要带有Visa或MasterCard的标识。请向邮箱
								<text @click="fnCopy('publisher@tmrjournals.com', '邮箱')" class="aui-text-success"
									style="text-decoration: underline; color: #7dc1f0">
									publisher@tmrjournals.com
								</text>
								（点击复制）发送支付请求，内容需包含：拟购买的课程名称、支付金额、APP注册姓名及手机号码，或者加一路健康客服微信（
								<text class="aui-text-success" @click="fnCopy('yilujiankangkefu', '微信名')"
									style="text-decoration: underline; color: #7dc1f0">
									yilujiankangkefu </text>）（点击复制）联系我们，我们将在24小时内向您的邮箱或者微信发送支付链接，根据提示即可完成信用卡支付，无需兑换外币。
							</view>
						</view>
					</view>
				</template>
			</view>

			<template>
				<common-sticky label="title" :itemStyle="`width:${
            cateList.length == 2 ? '50' : '33'
          }%;padding-left: 15px; padding-right: 15px; height: 68rpx;`" :list="cateList"
					:currentCateIndex="currentCateIndex" @handleselectCate="handleselectCate">
				</common-sticky>
			</template>
		</view>
		<view class="goods_nav_box">
			<common-goods-nav :iconList="[]" :customButton="customButton" @submit="goBuyJie">
				<!-- leftSlot -->
				<template slot="leftSlot" slot-scope="slotProps">
					<view class="price_box order_bottom_box">
						<text class="price">合计：
							<text class="total">￥{{ dataInfo.lastFee }}</text>
						</text>
					</view>
				</template>
			</common-goods-nav>
			<view class="agree_wo">
				<radio-group class="agree">
					<view v-for="(item, index) in argee" :key="index">
						<radio class="agreeRadio" :value="item.id" :checked="item.id == radioValue" color="#7dc1f0"
							@click="radioCheck(index)"></radio>
					</view>
				</radio-group>
				<view>* 我已阅读并同意<span class="highlight" @click="showXieyi">《会员服务协议》</span></view>
			</view>
		</view>
		<!-- 会员协议 -->
		<u-popup :show="xieyiShow" :round="10" @close="xieyiShow = false">
			<view class="tanchu">
				<view class="dp_title">{{ xieyi.title }}</view>
				<view style="max-height: 1000rpx; overflow-y: scroll">
					<view v-html="xieyi.content"></view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import courseDescription from "@/pages/component/commonComponents/list";
import {
	setPay,
	setPayAssign,
	setWXPay
} from "@/config/utils";
import $http from "@/config/requestConfig.js";
const { platform } = uni.getSystemInfoSync();
import {
	mapState
} from "vuex";
export default {
	props: ["dataInfo"],
	components: {
		courseDescription, //课程说明
	},
	watch:{
		lastFee:{
			immediate: true,
			handler(newRoute) {
				if(this.dataInfo.list&&this.dataInfo.list.length>0){
					this.dataInfo.lastFee = this.dataInfo.list[0].rebateFee
				}
			}
		}
	},
	data() {
		return {
			isDefaultCurrency: false,
			isShowAddress: false,
			jfNumber: 0,
			totalPrice: 0,
			actualPayment: 0,
			jfNumberShow: "",
			jfNumberMax: 0,
			goodsDataList: [],
			orderModalShowInfo: {},
			orderModalShow: false,
			payType: 1,
			freightNum: 0,
			addressData: {
				address: "",
				consigneeName: "",
				consigneePhone: "",
			},
			selectPayIndex: 1,
			farePrice: 0,
			payList: [],
			priceBreakdownList: [],
			number: 1,
			detailInfo: {},
			content: "",
			remark: "",
			iconList: [],

			swiperList: [],
			options: {},
			relatedCoursesList: [], //相关课程
			curriculumData: {},
			curriculumInfo: {},
			detailInfo: {},
			fdButtonStyle: {
				width: "90rpx",
				"border-color": "#7dc1f0",
				color: "#7dc1f0",
				float: "right",
				"margin-right": "20rpx",
				"margin-left": "30rpx",
			},
			modalInfo: {},
			currentCateIndex: 0,
			show: false,
			playData: {},
			initData: {},
			taiHuClassInfo: {},
			searchValue: "",
			argee: [{value: false, id: "1"}], // 同意权限
			radioValue: "",
			xieyi: {
				title: "",
				content: "",
			},
			xieyiShow: false,
			
			cateList: [], // 一级分类标题1
			twoCateList: [], // 二级分类标题
			dataList: [], // 方剂标题
			defaultAddressList: {},
			allDataList: [], // 方剂标题
			currentStatusIndex: 0, // 当前选中的一级分类

			curTwoCateIndex: 0, // 当前选中的二级分类
			searchList: [], // 搜索结果数组
			showSearchList: false,
			userMes: {}, // 用户信息
			searchDisable: false, // 搜索不可用
			limitShow: false,
			limitTitle: "提示",
			goToInfo: {},
			limitContent: "",
			scrollViewHeight: 0,
			urlList: {
				list: "app/phone.do?getCourseDetail_new",
				initPrepareOrder: "common/buyOrder/initPrepareOrder",
				buyOrder: "common/userVip/placeVipOrder",
				curriculumInfo: "app/phone.do?getCourseInfo",
				detailInfo: "app/phoneDoctor.do?getTaiHuClassInfo_new",
				addressList: "common/userAddress/getUserAddress",
				freightNum: "book/buyOrder/calculateTransportPrice", //运费
			},
			customButton: [{
				width: "180rpx",
				text: "立即支付",
				backgroundColor: "linear-gradient(90deg, #294a97 0%,#7dc1f0 100%)",
				color: "#fff",
			}, ],
			customButtonGroup1: [{
				with: 200,
				text: "确定",
				backgroundColor: "linear-gradient(90deg, #294a97 0%,#7dc1f0 100%)",
				color: "#fff",
			}, ],
			activeIndex: 0,  //选择付款 下标
		};
	},
	created(){
		//判断是什么系统
		if(platform=='ios'){
			this.payList = [
				{
					text: "天医币",
					imgUrl: require("@/static/icon/pay_3.png"),
					type: 4,
					value: "2",
				}]
				this.selectPayIndex = 0;
				this.payType=4
		}else{
			this.payList = [{
					text: "支付宝",
					imgUrl: require("@/static/icon/pay_1.png"),
					type: 2,
					value: "0",
				},
				{
					text: "微信",
					imgUrl: require("@/static/icon/pay_2.png"),
					type: 1,
					value: "1",
				},
				{
					text: "天医币",
					imgUrl: require("@/static/icon/pay_3.png"),
					type: 4,
					value: "2",
				}]
				this.selectPayIndex = 1;
				this.payType=1
		}
	},
	async onLoad(options) {
		var that = this;
		this.options = JSON.parse(options.data);
		this.goodsDataList = this.options.goods;
	},
	async onShow() {
		var that = this;
		await uni.$on("returnData", function(data) {
			if (data) {
				that.addressData = {
					...data,
					address: `${data.province}${data.city}${data.county}${data.detailAddress}`,
					consigneeName: data.consigneeName,
					consigneePhone: data.consigneePhone,
				};
				that.$forceUpdate();

				that.getUserAddress();
			} else {
				
			}
		});
	},
	computed: {
		...mapState(["userInfo"]),
	},
	methods: {
		onPageJump(url) {
			uni.navigateTo({
				url: url,
			});
		},
		//父级调用
		async initPrepareOrder() {
			this.priceBreakdownList = [{
					text: "商品总价",
					imgUrl: "",
					type: 1,
				},
				{
					text: "运费",
					imgUrl: "",
					type: 2,
				},
			];
			var data = {
				uid: this.userInfo.id,
				productList: [],
			};

			var that = this;

			this.$http.request({
				url: `${this.urlList.initPrepareOrder}`,
				method: "POST",
				data,
				header: {
					"Content-Type": "application/json",
				},
			})

			.then(async (res) => {
				console.log("res at line 374:", res);
				if (res.code == 0) {
					this.initData = res.data;
				}

				this.$forceUpdate();
			});
		},
		//复制
		fnCopy(value, title) {
			this.$commonJS.handleMakingPhoneCalls(value, title);
		},
		//打电话
		gotoPhone() {
			this.$commonJS.handleMakingPhoneCalls("022-24142321");
		},
		//支付请求
		async goBuyJie() {
			var that = this;
			this.nowClick = false;
			setTimeout(() => {
				this.nowClick = true;
			}, 5000);
			//判断勾选
			if(that.radioValue!='1'){
				uni.showToast({
					title: "请勾选 已阅读会员服务协议",
					icon: "none",
				});
				return false;
			}
			let xiaBiao = [];
			if (this.payType == 4 && this.initData.user.peanutCoin < this.dataInfo.lastFee) {
				uni.showToast({
					title: '天医币余额不足',
					icon: 'none'
				})
				return
			}
			let data = {
				paymentMethod: this.payType, //1微信2支付宝3苹果支付4虚拟币
				orderMoney: this.dataInfo.lastFee, //订单金额
				realMoney: this.dataInfo.lastFee, //实际金额
				shippingMoney: 0, //运费
				jfDeduction: 0, //积分抵扣
				vipBuyConfigId: this.dataInfo.id,
				come: 3, //订单来源，0疯子读书1国学众妙之门2医学吴门医述 3心灵空间
			};
			await $http.request({
				url: that.urlList.buyOrder,
				method: "POST",
				data,
				header: {
					"Content-Type": "application/json",
				},
			})
			.then(async (res) => {
				if (res.code == 0) {
					if (res.orderSn == null) {
						uni.showToast({
							title: "失败,请重新下单",
							icon: "none"
						});
					} else {
						if (that.payType == 2) {
							// 常规支付
							uni.showToast({
								title: "正在支付",
								icon: "loading",
							});
							await setPay({
									typePay: "alipay",
									subject: "vip",
									totalAmount: res.money,
									type: 2,
									relevanceoid: res.orderSn,
									customerId: that.userInfo.id,
								},
								(res) => {
									uni.showLoading({
										title: "加载中",
									});
									console.log(res, "支付支付");
									if (res.success) {
										uni.showToast({
											title: "支付成功",
										});
										setTimeout(() => {
											uni.switchTab({
												url: "/pages/order/index",
											});
										}, 1000);
									} else {
										setTimeout(() => {
											uni.showToast({
												title: "支付失败"
											});
										}, 0);
									}
								}
							);
						} else if (this.payType == 1) {
							// 微信支付
							let data1 = {
								orderSn: res.orderSn,
								buyOrderId: null,
								totalAmount: res.money,
							};
							setWXPay(data1, (res) => {
								if (res.success) {
									uni.showToast({
										title: "支付成功",
									});
									setTimeout(() => {
										uni.switchTab({
											url: "/pages/order/index",
										});
									}, 1000);
								} else {
									if (res.data.errMsg.indexOf("User canceled") != -1) {
										uni.showToast({
											title: "用户取消支付",
											icon: "none"
										});
									} else {
										uni.showToast({
											title: "支付失败",
											icon: "none"
										});
									}
								}
							});
						} else if (this.payType == 4) {
							// 天医币支付
							uni.showToast({
								title: "购买成功",
								icon: "success",
							});
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/order/index",
								});
							}, 1000);
						}
					}
				}
			});
		},
		//切换年份选项
		chooseYear(item,index){
			this.activeIndex = index;
			this.dataInfo.lastFee = item.rebateFee;
			this.dataInfo.id = item.id;
		},
		//切换付款方式
		radioChange(index) {
			this.selectPayIndex = index;
			this.payType = this.payList[this.selectPayIndex].type;
			this.$forceUpdate();
		},
		async handleselectCate(item, index) {
			this.dataList = [];
			var data = [];
			var that = this;
			this.$http
				.post(this.urlList.curriculumInfo, {
					customerType: "D",
					token: uni.getStorageSync("token"),
					customerOid: uni.getStorageSync("customerOid"),
					oid: item.coid,
				})
				.then(async (res) => {
					that.curriculumInfo = res.obj;
					that.dataList = res.obj.courseList;
				});
			this.searchValue = "";
			this.searchList = [];
			this.showSearchList = false;
			return data;
		},
		//勾选会员协议
		radioCheck(index) {
			this.argee.forEach((item) => {
				item.isCheck = false;
			});
			if (this.radioValue == this.argee[index].id) {
				this.radioValue = null;
			} else {
				this.radioValue = this.argee[index].id;
			}
		},
		//会员协议
		async showXieyi() {
			var data = await this.$commonJS.getAgreement(111);
			if (data.content) {
				data.content = data.content.replace(
					/<h5>/g,
					'<view style="font-weight: bold;font-size: 32rpx;margin-top: 20rpx;margin-bottom: 20rpx;">'
				);
				data.content = data.content.replace(/<\/h5>/g, "</view>");
			}
		
			this.xieyi = data;
			this.xieyiShow = true;
		},
	},
	onBackPress() {
		// #ifdef APP-PLUS
		plus.key.hideSoftKeybord();
		// #endif
	},
};
</script>

<style lang="scss" scoped>
@import "@/static/mixin.scss";

.pay_title {
	text-align: center;
	font-size: 32rpx;
	margin-bottom: 40rpx;
}

.order_box {
	padding: 20rpx;

	.order_top {
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.goods_item {
		width: 100%;
		overflow: hidden;

		.textarea {
			margin-top: 20rpx;
			background-color: #fffdfd;
		}

		.goods_item_img {
			width: 140rpx;
			height: 140rpx;
			float: left;
			background-color: #f5f5f5;
			border-radius: 10rpx;
		}

		.normal_box {
			width: calc(100% - 160rpx);
			height: auto;
			float: right;
			
			.normal_box_top {
				width: 100%;
				display: flex;
				height: 100rpx;
			}
		}
	}
}

.flexbox {
	display: flex;
}

.dataList {
	height: 100%;
}

.titleList2 {
	height: calc(100% - 150rpx);
}

.priceDetail {
	height: calc(100% - 180rpx) !important;
	padding: 0rpx 0;
	box-sizing: border-box;
}

.componentPage {
	height: calc(100% - 90rpx) !important;
}

.dateReminder {
	width: 100%;
	font-size: 24rpx;
	text-align: right;
	line-height: 40rpx;
}

.fdButtonBox {
	border: 1rpx solid $themeColor;
	background-color: $themeColor;
	color: #fff;
	float: right;
	padding: 4rpx 14rpx;
	font-size: 24rpx;
	font-weight: 500;
	line-height: 30rpx;
	border-radius: 10rpx;
	box-sizing: border-box;
}

.commonDetailPage {
	padding: 0 !important;
	padding-bottom: 150rpx !important;
}

.goods_box {
	background-color: #fff;
	box-sizing: border-box;
	width: 100%;

	.title {
		color: #333;
		font-weight: 600;
		margin-bottom: 20rpx;
	}

	.curriulum_title_box {
		width: calc(100%) !important;
		padding-bottom: 20rpx;
		background-color: #fff;

		.curriulum_title {
			width: calc(100% - 80rpx);
			font-weight: 500;
			font-size: 30rpx;
			margin-top: 10rpx;
			float: left;
			margin-bottom: 0rpx;
			color: #333;
			box-sizing: border-box;
		}
	}
}

.dataList {
	background-color: #fff !important;
	padding: 0 30rpx 40rpx !important;
	box-sizing: border-box;
}

/deep/.scroll-view-item:nth-child(2n-1) {
	background-color: transparent !important;
}

.dataList {
	height: auto !important;
}

.related_courses_box {
	background-color: #fff;

	.small_class_teaching_content {
		padding: 10rpx 20rpx;
		box-sizing: border-box;
	}
}

.related_courses_name {
	display: inline-block;
	width: calc(100% - 150rpx) !important;

	.aui-text-danger {
		display: inline-block;
		float: right;
	}
}

.original_price {
	font-size: 28rpx !important;
	font-weight: 500;
	color: #999 !important;
	white-space: nowrap;
	text-decoration: line-through;
	float: left;
	margin-top: 6rpx;
}

.price {
	width: auto;
	font-size: 30rpx;
	font-weight: 600;
	float: right;
	margin-right: 10rpx;
	color: #333;
}

.price_box {
	width: auto;
	overflow: hidden;
	margin-top: 10rpx;
}

.commonTags {
	margin-right: 20rpx;
	margin-top: -5rpx !important;
}

.sales_number {
	text-decoration: none;
	color: #b0b0b0;
	font-weight: 500;
}

/deep/.common_curriculum_list {
	margin-top: 20rpx;
	padding: 20rpx 20rpx 20rpx;

	.content_item {
		width: 100% !important;
		margin-bottom: 0 !important;
		padding: 15rpx 0 0rpx;
		border-top: 1rpx solid #f1f0f0;

		.book_image {
			width: 60rpx !important;
			height: 60rpx !important;
			float: left !important;
			background-color: #f5f5f5;
		}

		.common_curriculum_item {
			width: calc(100% - 88rpx);
			float: right;
			display: block !important;
			
			.related_courses_name {
				width: 100% !important;
			}
		}
	}

	.content_item:nth-child(1) {
		border-top: none !important;
	}
}

/deep/.common_section {
	padding: 0 !important;
	padding-bottom: 20rpx !important;
}

.goods_detail_list_title {
	display: block;
	padding-top: 20rpx;
	padding-bottom: 40rpx;

	.linlanzhifu {
		display: flex;
		align-items: center;
	}

	.other_info {
		font-size: 28rpx;
		color: #5a5a5a;
	}

	.left {
		display: flex;
		align-items: center;
	}

	.right {
		font-size: 24rpx;
		font-weight: 500 !important;
		color: #999;
		font-family: none;
	}
}

.commonPageContentBox {
	height: auto !important;
}

.minus {
	width: 50rpx;
	height: 50rpx;
	border-width: 2rpx;
	border-color: #e6e6e6;
	border-right-color: transparent;

	border-top-left-radius: 10rpx;
	border-bottom-left-radius: 10rpx;
	border-style: solid;
	@include flex;
	justify-content: center;
	align-items: center;
}

.input {
	padding: 0 10px;
	height: 50rpx;
	border: 1rpx solid #e6e6e6;
}

.plus {
	width: 50rpx;
	height: 50rpx;
	border-width: 2rpx;
	border-color: #e6e6e6;
	border-left-color: transparent;
	border-style: solid;

	border-top-right-radius: 10rpx;
	border-bottom-right-radius: 10rpx;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	justify-content: center;
	align-items: center;
	color: $themeColor;
}

.order_bottom_box {
	position: absolute;
	right: 20rpx;

	.number {
		font-size: 28rpx;
		margin-right: 15rpx;
		margin-top: 5rpx;
	}

	.price {
		.total {
			font-size: 38rpx;
			color: red;
		}
	}
}

/deep/.goods_nav_box {
	.goods_nav{
		padding: 20rpx 20rpx 10rpx 20rpx;
	}
	.left {
		margin-top: -10rpx;
		width: calc(100% - 180rpx);
		height: auto;
		position: relative;
	}
}

.explain {
	word-wrap: break-word;
	word-break: normal;
	word-break: break-all;
}

.order_bottom_box {
	display: flex;
	align-items: center;
}

.pay_box {
	.pay_item {
		border-bottom: 1rpx solid #eeecec;
		padding-top: 20rpx;
		justify-content: space-between;

		.top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.left {
			line-height: 50rpx;
			font-family: MicrosoftYaHei;
			font-weight: 500;

			color: #242323;

			.pay_item_img {
				width: 50rpx;
				height: 50rpx;
				float: left;
				margin-right: 20rpx;
			}
		}

		.bottom {
			width: calc(100% - 60rpx);
			float: right;
			background-color: #f5f5f5;
			border-radius: 20rpx;
			margin-top: 20rpx;

			.jf_box {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				box-sizing: border-box;
				justify-content: space-between;
				color: #aaa;
			}

			.jf_input {
				width: calc(100% - 320rpx) !important;
				padding: 10rpx 0;
				box-sizing: border-box;
			}
		}
	}

	/deep/.pay_item:nth-last-child(1) {
		border-bottom: none !important;
	}
}

.linlanzhifu {
	font-size: 28rpx;
	line-height: 24rpx;
}

.address_box {
	display: flex;
	align-items: center;

	.order_top {
		background-color: #fff;
	}

	.user_info {
		width: 100%;
		float: left;
		display: flex;
		margin-top: 10rpx;
		align-items: center;

		.name {
			color: #838282;
			margin-right: 10rpx;
		}

		.tel {
			color: #838282;
		}
	}

	.curriulum_title {
		width: auto;
		font-size: 34rpx;
		font-weight: 700;
		float: left;
		margin-right: 10rpx;
		color: #333;
		line-height: 50rpx;
		letter-spacing: 2rpx;
	}

	.normal_box {
		margin-left: 5rpx;
		width: calc(100% - 120rpx);
	}

	.goods_box {
		display: flex;
		align-items: center;
	}

	.rightArrow {
		margin-left: 40rpx;
		width: 40rpx;
		height: 40rpx;
	}
}

.rightArrow {
	width: 40rpx;
	height: 40rpx;
}

.orderModalShow {
	width: 100%;
	max-height: 48vh;
	padding-bottom: 120rpx;
}

.popup_box {
	.curriulum_title_box {
		.title {
			text-align: center;
			font-size: 34rpx !important;
			padding-top: 15rpx !important;
			margin-bottom: 60rpx !important;
		}
	}
}

.hasRemark {
	color: #333 !important;
	font-size: 40rpx !important;
}
.pay_info {
	margin-bottom: 60rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/deep/.commonDetailPage {
	height: 100vh !important;
}

.list_choose{
	display: inline-block;
	border:1rpx solid #999;
	color: #999;
	border-radius: 10rpx;
	margin-right: 20rpx;
	margin-bottom: 30rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	line-height: 40rpx;
}
.list_choose_active{
	border:1rpx solid #ff1f00;
	color: #ff1f00;
}

.agree_wo {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	color: #aaa;
	line-height: 30rpx;
	font-size: 28rpx;
	padding: 10rpx 10rpx 20rpx 0;
}
.agreeRadio {
	zoom: 0.8;
}
.agree {
	width: auto !important;
}
.highlight {
	color: $uni-color-primary;
}

.tanchu {
	padding: 40rpx 30rpx 40rpx 30rpx;
	position: relative;

	.dp_title {
		font-size: 32rpx;
		margin-bottom: 50rpx;
		color: #555;
		text-align: center;
		font-weight: bold;
	}
}
</style>