liveShop/pages/anchor/commonVip.vue

<template>
	<!-- 	<view class="content"> -->
	<view class="dredge-box">
		<view class="box-top">
			<view class="left">
				<view class="head"><image :src="userInfo.avatar || '/static/error/missing-face.png'" mode=""></image></view>

				<view class="text">
					<view class="name">{{ userInfo.nickname }}</view>
					<view class="state">{{ userInfo.level_info ? userInfo.level_info.name : '普通用户' }}</view>
				</view>
			</view>
			<view class="right" v-if="userInfo.level < 1" @click="submit">立刻开通</view>
			<view class="right" v-else>已开通</view>
		</view>
		<view class="box-between">
			<view class="top">
				<view class="label">会员权益</view>
				<view class="jurisdiction-list">
					<view class="interests">
						<view class="img"><image src="https://zhibo.liuniu946.com/img/anchor7.png" mode="" style="width: 46rpx;height: 44rpx;"></image></view>
						<view class="commission">佣金奖励</view>
					</view>
					<view class="interests">
						<view class="img"><image src="https://zhibo.liuniu946.com/img/anchor8.png" mode="" style="width: 46rpx;height: 44rpx;"></image></view>
						<view class="commission">专属折扣</view>
					</view>
					<view class="interests">
						<view class="img"><image src="https://zhibo.liuniu946.com/img/anchor9.png" mode="" style="width: 46rpx;height: 44rpx;"></image></view>
						<view class="commission">申请网店</view>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="font-header">台州智播商城</view>
				<view class="font-header">创业网店开户协议</view>

				<view class="banben">1.0版</view>
				<view class="main">为了您能在台州智播商城办理网店开户手续并享受到优质的服务，更好的提升用户体验及服务，请您认真阅读以下内容，并共同遵照约守：</view>
				<view class="main">
					台州智播商城：指由台州智播直播城商业管理有限公司（以下简称“直播城”）开发、管理、运营的线上商城、在线信息发布及交易平台，包含网站、客户端、小程序和微信公众号等，并依托直播城供应商资源和线下直播间及产品展示中心等公共资源，为其提供整体产品销售和服务解决方案。
				</view>
				<view class="main">
					入驻台州智播商城开设网店，如您为企业、个体工商户、事业单位、社会团体、民办非企业单位，可选择企业会员入驻，需提交机构认证资料和相关资质证明。如您准备开设个人店铺，请准备您的个人身份证（需要未开过店）和手机号即可；如您准备开设企业店铺，请您准备好营业执照、社会信用代码（注册号）、法人、店铺负责人的身份证件和手机号即可。
				</view>
				<view class="main">
					您需要提交本人身份证、完成网店基本信息注册登记、支付开户费人民币500元后，方可开通创业网店。直播城将赠送一张预存100元的直播城会员食堂消费卡，该赠送部分属于直播城给予用户的福利政策，直播城有权根据经营管理需求作相应调整。
				</view>
				<view class="main">
					创业网店店主在每年缴纳上架服务费500元后（首年可享受减免），可通过客服小助手上传产品详细资料、申请加入商城选品库，经直播城选品部门审核通过后，可在网店内进行产品展示和销售，直播城按照销售额的5%收取软件服务费。
				</view>
				<view class="main">创业网店店主可以在商城选品库内选择产品进行产品展示和销售，可根据商城相关规定按照销售额的5‰享有奖励。</view>
				<view class="main">创业网店店主发展新用户（包括创业网店店主、创业播主会员），可根据商城相关规定享有开户费20%的奖励。</view>
				<view class="main">
					创业网店店主可在自主选品内重点推荐2件商品，经商城选品部门审核通过后，准予优先上架直播城线下产品展示中心（首年可享受上架费用免除），具体费用、产品展示、位置与形式等均由直播城统筹安排，线下展示产品、特装费用由店主负责提供。
				</view>
				<view class="main">创业网店店主享有的权益无论何种情况、包括但不限于您单方解约、中途退出等情况的，开户费、上架服务费、软件服务费均不予退回。</view>
				<view class="main">创业网店申请遵循合法、自愿、实名的原则，创业网店店主承诺提供真实的资料与信息，如实填写注册登记信息，以保障相关权益。</view>
				<view class="main">若您销售的产品属于国家法律法规禁止或限制交易的商品（且无法提供相关资质的），不允许通过本平台或直播城其他展示渠道发布相关信息。</view>
				<view class="main">为了规范第三方服务市场，“商务服务”类目下如运营外包等不予以支持。</view>
				<view class="main">创业网店仅限于店主本人使用，不得出租和转借，否则因此而产生的风险损失和法律责任由店主本人承担。</view>
				<view class="main">
					双方在共同签署的《直播城服务条款》协议基础之上，还应当遵守直播城包括且不仅限于安全、网络、直播、运营管理等各项规章制度，不得实施危害社会秩序、公共安全、他人健康和违反法律法规及公序良俗的行为。
				</view>
				<view class="main">
					由于创业网店店主使用不当所引起的纠纷、经济损失及法律后果，由创业网店店主自行承担经济损失和法律责任；如果造成直播城相关损失的，直播城有权向创业网店店主追偿；对于因使用服务而产生的相关税费，由创业网店店主自行申报、自行承担。
				</view>
				<view class="main">
					直播城如发现创业网店店主有以下故意行为之一，有权保留取消创业网店店主使用服务的权利，并无需做出任何补偿：<br/>
					<text>
						（1）可能造成直播城全部或局部的服务受影响，或危害直播城运行。
						（2）以任何欺诈行为获得用户资格。
						（3）在直播城经营场所和相关互联网平台内发布涉及敏感政治、宗教或其他违反有关国家法律法规和公序良俗的文字、图片、视频、直播等。
						（4）以任何非法目的而使用直播城包括且不仅限于经营场所、空间、网络系统、服务系统等。
					</text>
				</view>
				<view class="main">16、除非法律规定，在没有获得您的授权下，我们不会向第三方共享、转让和公开披露您的个人信息。</view>
				<view class="main">
					17、创业网店店主承诺在使用商城服务时，实施的所有行为均遵守国家与地方相关法律法规、相关直播平台规则以及直播城的相关规则、规定以及各种社会公共利益及公序良俗，如有违反，由其自行承担相应的经济损失和法律责任。
				</view>
				<view class="main">
					18、您有权在开户前向直播城详细了解相关费用、使用权限等相关内容，同时承诺已充分阅读并同意《台州智播商城服务条款》的全部内容、并将基于您的真实贸易需求而使用台州智播商城的服务。
				</view>
				<view class="main">19、直播城对商城的使用享有最终解释权。</view>
				<view class="main">20、如对开户手续有疑问，建议联系直播城客服核实。</view>
				<view class="main">直播城客服热线：0576-88551888</view>
				<view class="main">用户签字；</view>
				<view class="main">用户身份证号：</view>
				<view class="main">用户联络电话：</view>
				<view class="main">台州智播直播城商业管理有限公司</view>
				<view class="main">日期:</view>
			</view>

			<text></text>
		</view>

		<view class="box-buttom">
			<view class="price-left">
				<!-- v-for="(item, index) in payList" key = "" -->
				<text class="entrepreneurship">开户费</text>

				<view class="discounts">限时特惠</view>
				<view class="price">
					<text>¥</text>
					<text>{{ money }}</text>
				</view>
			</view>
			<view class="price-right" v-if="userInfo.level < 1" @click="submit">马上开通</view>
			<view class="price-right1" v-else>已开通</view>
		</view>
		<uni-popup ref="popupPay" type="bottom">
			<view class="popup-box">
				<view class="popup-pay">
					<view class="paybox-top flex">
						<view class="type">选择支付方式</view>
						<view class="image" @click="close"><image src="https://zhibo.liuniu946.com/img/x.png" mode="aspectFill"></image></view>
					</view>
					<view class="paybox-main flex">
						<view class="zftype flex">
							<image src="https://zhibo.liuniu946.com/img/weixin.png" mode="aspectFill"></image>
							<view class="zf">微信支付</view>
						</view>
						<label class="radio1" @click="changePayType(1)"><radio style="transform:scale(0.7)" value="" :checked="payType == 1" color="#FE4141"></radio></label>
					</view>
					<view class="paybox-main flex">
						<view class="zftype flex">
							<image src="https://zhibo.liuniu946.com/img/yue.png" mode="aspectFill"></image>
							<view class="zf">余额支付</view>
						</view>
						<label class="radio" @click="changePayType(2)">
							<radio style="transform:scale(0.7)" class="rad" value="" :checked="payType == 2" color="#FE4141"></radio>
						</label>
					</view>
				</view>
				<view class="buttom flex">
					<view class="heji">
						合计：
						<text>
							￥
							<text class="money">{{ money }}</text>
						</text>
					</view>
					<view class="zhifu" @click="readyPay()">立即支付</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup" type="center" @click="close">
			<view class="popup_row">
				<view class="title">
					<view class="title-left">请输入您的手机号，开通会员网店!</view>
					<view class="cancel" @click="cancel"><!-- <image src="../../static/img/cancel1.png" mode=""></image> --></view>
				</view>
				<view class="inpBox"><input type="text" value="" placeholder="请输入您的手机号" v-model="to_phone" /></view>
				<view class="inpedit">可在方框中修改您的手机号</view>
				<view class="inpBox"><input type="text" value="" placeholder="请输入您的身份证号" v-model="Idcard" /></view>
				<view class="inpedit">可在方框中修改您的身份证号</view>
				<view class="comfirm"><view class="comfirm1" @click="comfirm1()">确认</view></view>
			</view>
		</uni-popup>
	</view>
	<!-- 	</view> -->
</template>

<script>
// import { apply } from '@/api/apply.js';
import { getSign } from '@/api/contract.js';
import { mapState, mapMutations } from 'vuex';
import { getLevel, accessLevel } from '@/api/anchor.js';
import { openTheHost } from '@/api/anchor.js';
import {
	// computedOrderkey,
	balance
	// createOrderkey,
	// orderPay
} from '@/api/money.js';
import { xgxx } from '@/api/team.js';
export default {
	data() {
		return {
			imgList: [],
			payType: 1,
			name: '',
			payName: 'weixin',
			payList: [],
			froms: '',
			money: '',
			explain: '',
			now_money: '', // 当前余额
			payLoding: false, //判断是否支付中
			to_phone: '',
			Idcard: ''
		};
	},
	onLoad() {
		this.loadData();
		console.log('===this.userInfo', this.userInfo), console.log('===this.weichatObj', this.weichatObj);
	},
	computed: {
		...mapState(['userInfo', 'weichatObj']),
		level_name() {
			if (this.userInfo.level_info) {
				return this.userInfo.level_info.name;
			} else {
				return '暂无身份';
			}
		}
	},
	methods: {
		...mapMutations(['setUserInfo', 'setWeiChatObj']),
		async loadData() {
			if (this.userInfo.phone != '') {
				this.to_phone = this.userInfo.phone;
			}
			if (this.userInfo.card_id != '') {
				this.Idcard = this.userInfo.card_id;
			}
			getLevel({}, 1).then(({ data }) => {
				console.log('----', data);
				this.money = data.money;
				this.name = data.name;
				this.explain = data.explain;
			});
			// 载入余额
			balance({}).then(({ data }) => {
				// 获取余额
				this.now_money = data.now_money;
				console.log('获取当前余额', this.now_money);
			});
			getSign({}, 1).then(({ data }) => {
				console.log('获取合同内容', data);
				this.imgList = data.pictures;
			});
		},
		// comfirm1: function() {
		// 	let obj = this;
		// 	if (obj.to_phone.toString().trim() == '') {
		// 		obj.$api.msg('请填写正确的手机号码');
		// 		// uni.showModal({
		// 		// 	title:'输入框为空',
		// 		// 	// content:JSON.stringify(obj)
		// 		// })
		// 	} else {
		// 		console.log('obj.to_phone1111', obj.to_phone);
		// 		const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
		// 		if (!reg.test(obj.to_phone)) {
		// 			obj.$api.msg('请填写正确的手机号码');
		// 			return;
		// 		}
		// 		let reg1 = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
		// 		if (!reg1.test(obj.Idcard)) {
		// 			obj.$api.msg('请填写正确的身份证信息');
		// 			return;
		// 		}
		// 		xgxx({
		// 			card_id: obj.Idcard,
		// 		})
		// 			.then(e => {
		// 				console.log(e);
		// 			})
		// 			.catch(e => {
		// 				console.log(e);
		// 			});
		// 		this.pay();

		// 	}

		// },
		goback() {
			uni.switchTab({
				url: '../user/user'
			});
		},

		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		submit() {
			console.log('打开支付弹窗');
			this.$refs.popupPay.open();
		},
		close() {
			this.$refs.popupPay.close();
		},
		changePayType(type) {
			this.payType = type;
			console.log('this.payType', this.payType);
			if (this.payType == 1) {
				this.payName = 'weixin';
				console.log('weixin', this.payName);
			}
			if (this.payType == 2) {
				this.payName = 'yue';
				console.log('yue', this.payName);
			}
		},
		paySuccessTo() {
			uni.hideLoading();
			const obj = this;
		},
		readyPay() {
			// this.$refs.popup.open();
			this.pay();
		},
		pay() {
			console.log('点击');
			try {
				let obj = this;
				// 判断是否余额不足
				if (obj.payName == 'yue' && +obj.now_money < obj.money) {
					uni.showModal({
						title: '提示',
						content: '账户余额不足！',
						showCancel: false,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
					return;
				}
				// 支付中
				obj.payLoding = true;
				// #ifdef H5
				// 获取当前是否为微信浏览器
				obj.froms = uni.getStorageSync('weichatBrowser') || '';
				// #endif
				uni.showLoading({
					title: '支付中',
					mask: true
				});
				let data = {
					payType: this.payName,
					apply_level: 1,
					// #ifdef H5
					from: obj.froms ? 'weixin' : 'H5', //来源
					// #endif
					// #ifdef MP-WEIXIN
					from: 'routine', //来源
					// #endif
					// #ifdef APP-PLUS
					from: 'app' //来源
					// #endif
				};
				openTheHost(data).then(({ data }) => {
					console.log('fufei', data);
					uni.hideLoading();
					if (data.status == 'PAY_ERROR') {
						console.log(data);
					}
					if (data.status == 'SUCCESS') {
						this.$refs.popupPay.close();
						uni.navigateTo({
							url: '/pages/contract/contract?type=1'
						});
						// apply({
						// 	name: obj.userInfo.nickname + '的网店',
						// 	introduction: obj.userInfo.nickname + '的网店',
						// 	image: obj.userInfo.avatar,
						// 	phone: obj.to_phone || '',
						// 	card: obj.Idcard || '',
						// 	type: 2
						// })
						// 	.then(({ data }) => {
						// 		console.log(data);

						// 	})
						// 	.catch(err => {
						// 		console.log(err);
						// 	});
					}
					console.log('-----', data);
					let da = data.result.jsConfig;
					// #ifdef MP-WEIXIN
					if (obj.payName == 'weixin' || obj.payName == 'routine') {
						// let da = data.result.jsConfig;
						console.log('--da--', da);
						let data = {
							// #ifdef H5
							timestamp: da.timestamp,
							// #endif
							// #ifdef MP
							timeStamp: da.timestamp,
							// #endif
							nonceStr: da.nonceStr,
							package: da.package,
							signType: da.signType,
							paySign: da.paySign
						};
						console.log('--data--', data);
						wx.requestPayment(data);
					}
					// console.log('obj.weichatObj---',obj.weichatObj)
					// obj.weichatObj.chooseWXPay({
					// 	timestamp: res.timestamp,
					// 	nonceStr: res.nonceStr,
					// 	package: res.package,
					// 	signType: res.signType,
					// 	paySign: res.paySign,
					// 	success: function(res) {
					// 		// obj.$api.msg('支付成功')
					// 		uni.navigateTo({
					// 			url: '/pages/contract/success'
					// 		})
					// 	},
					// 	fail: function(res) {
					// 		this.$refs.popup1.open()
					// 		console.log(res, "失败")
					// 		console.log(res.errMsg)
					// 	}
					// });
					// #endif

					uni.hideLoading();
					// #ifdef H5
					if (data.status == 'PAY_ERROR') {
						console.log(data);
					}
					if (data.status == 'SUCCESS') {
						this.$refs.popupPay.close();
					}
					// #endif
				});
			} catch (e) {
				console.log('fufiecw', e);
				//TODO handle the exception
			}
		}
	}
};
</script>

<style lang="scss">
page {
	width: 100%;
	height: 100%;
	background-color: #fff;
}
.dredge-box {
	background: #fff;
	.box-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		width: 750rpx;
		height: 286rpx;
		background: #ff0000;
		.goback-box {
			position: absolute;
			left: 16rpx;
			// top: 19rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			.goback {
				z-index: 100;
				width: 32rpx;
				height: 32rpx;
			}
		}
		.header {
			position: absolute;
			left: 0;
			// top: 19rpx;
			width: 100%;
			height: 80rpx;
			font-size: 32rpx;
			// font-weight: 500;
			z-index: 99;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
		}
		.left {
			display: flex;
			align-items: center;
			padding-left: 24rpx;
			.head {
				// padding: 121rpx 0 0 33rpx;
				image {
					width: 104rpx;
					height: 104rpx;
					border-radius: 50%;
				}
			}
			.text {
				margin-left: 15rpx;
				// margin-top: 178rpx;
				.name {
					font-size: 35rpx;
					font-weight: 500;
					color: #ffffff;
					line-height: 28rpx;
				}
				.state {
					font-size: 23rpx;
					font-weight: 500;
					color: #ffffff;
					line-height: 28rpx;
					opacity: 0.52;
					padding-top: 16rpx;
				}
			}
		}
		.right {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 34rpx;
			// margin: 175rpx 23rpx 0 0;
			width: 190rpx;
			// height: 100%;
			height: 69rpx;
			background: #ff9090;
			border-radius: 35rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ff0000;
			line-height: 24rpx;
		}
	}
	.box-between {
		.top {
			background: #ffffff;
			.label {
				font-size: 36rpx;
				// font-weight: 500;
				color: #000000;
				line-height: 24rpx;
				padding: 41rpx 0 0 31rpx;
			}
			.jurisdiction-list {
				display: flex;
				text-align: center;
				justify-content: space-around;
				padding: 45rpx 0 39rpx 0;
				.interests {
					.img {
						font-size: 26rpx;
						// font-weight: 500;
						color: #ffffff;
					}
					.commission {
						font-size: 28rpx;
						font-family: PingFang SC;
						padding-top: 17rpx;
						// font-weight: 400;
						color: #505050;
						line-height: 24rpx;
					}
				}
			}
		}

		.between {
			background: #ffffff;
			// box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06); //模块之间间隔
			margin: 20rpx auto 20rpx;
			.label {
				padding: 37rpx 0 0 31rpx;
				font-size: 36rpx;
				// font-weight: 500;
				color: #000000;
				line-height: 24rpx;
			}
			.label-list {
				padding-top: 30rpx;
				display: flex;
				justify-content: space-around;
				.label-box {
					background: #fafbff;
					border-radius: 10px;
					width: 222rpx;
					height: 288rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.text-box {
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: center;
						width: 141rpx;
						height: 78rpx;

						.box-first {
							font-size: 28rpx;
							// font-weight: 400;
							color: #505050;
							line-height: 24rpx;
						}
						.box-second {
							font-size: 35rpx;
							// font-weight: 500;
							color: #000000;
							line-height: 24rpx;
						}
					}
					.img {
						padding-top: 39rpx;
					}
				}
			}
		}
		.buttom-box {
			width: 100%;
			line-height: 44rpx;
			font-size: 36rpx;
			color: #333;
			background: #ffffff;
			padding: 22rpx;
			.label {
				margin-bottom: 14rpx;
			}
			.info-1 {
				color: #666666;
				font-size: 28rpx;
			}
		}
	}
	.box-buttom {
		width: 750rpx;
		height: 98rpx;

		// position: absolute;
		// buttom:0;
		position: fixed;
		bottom: 0;
		right: 0;
		// position: absolute;
		// buttom:100rpx;
		display: flex;
		align-items: center;
		background: #34332f;
		.price-left {
			display: flex;
			.entrepreneurship {
				font-size: 30rpx;
				font-weight: 500;
				color: #ffffff;
				margin-left: 16rpx;
			}
			.price {
				color: #ff0000;
				font-size: 38rpx;
				font-weight: 500;
				margin-left: 16rpx;
			}
			.discounts {
				// width: 96rpx;
				// height: 40rpx;
				padding: 8rpx 7rpx 7rpx 8rpx;
				background: #fc4141;
				border-radius: 0rpx 16rpx 0rpx 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 18rpx;
				font-weight: 500;
				color: #ffffff;
				margin-left: 16rpx;
			}
		}
		.price-right {
			position: absolute;
			bottom: 0;
			right: 0;
			// position: fixed;
			// buttom: 0;
			// right: 0;
			width: 280rpx;
			height: 108rpx;
			background: linear-gradient(180deg, #fd4646, #ff3535);
			font-size: 36rpx;
			font-weight: bold;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.price-right1 {
			position: absolute;
			bottom: 0;
			right: 0;
			// position: fixed;
			// buttom: 0;
			// right: 0;
			width: 280rpx;
			height: 108rpx;
			background: #b5b5b5;
			font-size: 36rpx;
			font-weight: bold;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
.popup-box {
	width: 100%;
	height: 450rpx;
	background: #ffffff;
}
.popup-pay {
	position: relative;
	justify-content: space-between;
	padding: 0rpx 25rpx 32rpx 25rpx;
	.paybox-top {
		padding-top: 38rpx;
		width: 100%;
		.type {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.image {
			padding-right: 24rpx;
			padding-bottom: 10rpx;
			image {
				width: 16rpx;
				height: 16rpx;
			}
		}
	}
	.paybox-main {
		width: 100%;
		margin-top: 54rpx;
		.zftype {
			padding-left: 5rpx;
			image {
				width: 38rpx;
				height: 40rpx;
			}
			.zf {
				padding-left: 18rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #3f454b;
			}
		}
	}
}
.buttom {
	width: 100%;
	height: 113rpx;
	padding-top: 20rpx;
	align-items: center;
	.heji {
		height: 100%;
		width: 50%;
		padding-left: 23rpx;
		padding-top: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #3f454b;
		text {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ff0000;
			.money {
				font-size: 36rpx;
			}
		}
	}
	.zhifu {
		width: 50%;
		height: 92rpx;
		background: linear-gradient(180deg, #fd4646, #ff3535);
		text-align: center;
		line-height: 92rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
	}
}
.right .checkalls.checked {
	color: #fd4343;
	background: #ffffff;
}
.img-box {
	width: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	.label {
		padding: 37rpx 0 0 31rpx;
		font-size: 36rpx;
		// font-weight: 500;
		color: #000000;
	}
	.img {
		width: 100%;
		height: 1035rpx;
	}
}
.popup_row {
	// margin-top: 108rpx;
	border-radius: 25rpx;
	width: 100%;
	padding: 24rpx;
	background-color: #f8f8f8;
	z-index: 999;
	.title {
		border-bottom: 2rpx solid #f2f2f2;
		color: #e63931;
		font-size: 32rpx;
		padding-left: 4rpx;
		padding-bottom: 16rpx;
		display: flex;
		justify-content: space-between;
		// align-items: center;
		.cancel {
			margin-left: 52rpx;
			width: 36rpx;
			height: 36rpx;
			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}
	.inpBox {
		margin-top: 52rpx;
		border: 2px solid #f2f2f2;
		padding: 12rpx 24rpx;
		color: #ff9797;
		border-radius: 8rpx;
		.input-placeholder {
			// height: 70rpx;
			font-size: 32rpx;
			color: #ff9797;
		}
	}
	.inpedit {
		margin-top: 24rpx;
		margin-left: 14rpx;
		font-size: 28rpx;
		color: #ff9797;
	}
	.comfirm {
		display: flex;
		justify-content: flex-end;
		margin-top: 54rpx;
		.comfirm1 {
			padding: 12rpx 24rpx;
			border-radius: 12rpx;
			color: #ffffff;
			background-color: #e63931;
		}
	}
}
.box {
	padding: 0 20rpx 150rpx;
}
.font-header {
	width: 100%;
	height: 80rpx;
	font-size: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.banben {
	width: 100%;
	font-size: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.main {
	margin-top: 10rpx;
	text-indent: 2em;
	font-size: 28rpx;
	line-height: 52rpx;
}
.title {
	margin-top: 20rpx;
	font-weight: bold;
	font-size: 32rpx;
}
</style>