liveShop/pages/anchor/dredge.vue

<template>
	<!-- 	<view class="content"> -->
	<view class="dredge-box">
		<view class="box-top">
			<!-- <view class="goback-box" @click="goback()"><image class="goback" src="https://37shop.liuniu946.com/front/img/fanhui.png" mode=""></image></view>
			<view class="header">开通创业主播</view> -->
			<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" @click="submit">立刻开通</view> -->
			<view class="right" v-if="userInfo.level < 2" @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="between">
				<view class="label">主播优选</view>
				<view class="label-list">
					<view class="label-box">
						<view class="text-box">
							<view class="box-first">无需审核</view>
							<view class="box-second">开通网店</view>
						</view>
						<view class="img"><image src="https://zhibo.liuniu946.com/img/anchor4.png" mode="" style="width: 157rpx;height: 112rpx;"></image></view>
					</view>
					<view class="label-box">
						<view class="text-box">
							<view class="box-first">免费提供30次</view>
							<view class="box-second">直播设备</view>
						</view>
						<view class="img"><image src="https://zhibo.liuniu946.com/img/anchor5.png" mode="" style="width: 98rpx; height: 107rpx;"></image></view>
					</view>
					<view class="label-box">
						<view class="text-box">
							<view class="box-first">推广得</view>
							<view class="box-second">更多佣金</view>
						</view>
						<view class="img"><image src="https://zhibo.liuniu946.com/img/anchor6.png" mode="" style="width: 116rpx; height: 110rpx;"></image></view>
					</view>
				</view>
			</view>
		</view>
		<!-- <scroll-view scroll-y="true" class="img-box"> 
			<image class="img" v-for="item in imgList" :src="item" mode="widthFix"></image>
		</scroll-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="title">一、关于“创业播主会员卡”</view>
			<view class="main">
				创业播主会员卡，是指台州智播直播城商业管理有限公司发行的，具有一定价值、金额或消费次数，供持卡人在台州智播直播城及指定范围内消费活动中进行实名认证、会员认证和身份识别，并凭此消费、或免于付费、或享受折扣的凭证。
			</view>
			<view class="title">二、“创业播主会员卡”的服务功能</view>
			<view class="main">
				创业播主会员卡，拥有在指定空间、指定范围内、按照指定规则实现消费、活动、打折、积分、客户管理等多种服务功能。播主卡服务功能和服务项目根据产业发展变化而作相应微调。
			</view>
			<view class="title">三、会员服务对象</view>
			<view class="main">
				创业播主会员卡，是直播城为大众创业者、实体门店店主、小微企业主精心打造的专属服务卡，分为个人会员和团体会员两种类型，其中团体会员包含企事业单位、机构及非盈利组织等单位。
			</view>
			<view class="title">服务费用</view>
			<view class="main">您需要提交本人身份证、完成会员基本信息注册登记、支付服务费人民币3999元后，方可享有创业播主会员资格。</view>
			<view class="main">创业播主会员服务费用标准以直播城当年核定的标准执行，以一年为服务周期，按年收取，享受的权益到期即终止、不予延续。</view>
			<view class="main">创业播主会员卡次年续费按首次购买价格续费，价格出现浮动后，原会员续费保持不变。</view>
			<view class="main">3、持卡人享有的会员权益无论何种情况、包括但不限于持卡人单方解约、中途退会等情况的，服务费用均不予退回。</view>
			<view class="title">服务期限</view>
			<view class="main">创业播主会员卡首次使用即为激活之日，开始计算起始时间。 创业播主会员的权益和义务 （一）创业播主会员（个人）的权益</view>
			<view class="main">1、提供专业共享直播间15-25平，30次使用权，每次3小时；</view>
			<view class="main">2、提供专业直播设备：声卡、手机、电脑等；</view>
			<view class="main">3、提供一年初、中级互联网营销师（主播）辅导培训随到随学；</view>
			<view class="main">4、专业优秀主播或教培师带播陪播；</view>
			<view class="main">5、提供源头台州直播商城供应链选品；</view>
			<view class="main">6、提供直播平台一定的技术支持和流量扶持等；</view>
			<view class="main">7、定期举办路演对接产品及资源；</view>
			<view class="main">8、提供高档休闲会客区（消费另付）；</view>
			<view class="main">
				9、可享受产品首年免费进驻并优先推荐上架“台州智播商城”创业网店及线下展示区，具体产品上架和展示由直播城统筹安排（详见《台州智播商城创业网店开户协议》）；
			</view>
			<view class="main">10、除上述权益外，其他经直播城制定的相关权益。</view>

			<view class="main">（二）创业播主会员（小微企业）的权益</view>
			<view class="main">1、享受创业播主会员（个人）同等权益；</view>
			<view class="main">2、可根据企业需求，自主装修直播间，费用自理；</view>
			<view class="main">3、可提供上门直播培训服务；</view>
			<view class="main">4、可优先挑选直播城签约主播；</view>
			<view class="main">5、可享有直播城和平台优先带货权。</view>

			<view class="main">（三）创业播主会员的义务</view>
			<view class="main">1、会员申请遵循自愿的原则。</view>
			<view class="main">2、在办理会员卡时，务必提供真实的资料与信息，仔细阅读本会员协议，并如实填写会员登记表，以保障持卡人的会员权益。</view>
			<view class="main">3、在需要服务时须出示持卡人的会员卡，以便享受会员相关政策。</view>
			<view class="main">4、会员卡实行实名登记，仅限于持卡人本人使用，不得出租和转借，否则因此而产生的风险损失和法律责任由持卡人承担。</view>
			<view class="main">
				5、会员应当遵守直播城包括且不仅限于安全、网络、直播、运营管理等各项规章制度，不得实施危害社会秩序、公共安全、他人健康和违反法律、法规及公序良俗的行为。
			</view>

			<view class="title">七、如何申办及补办</view>
			<view class="main">1、客户可凭身份证、单位登记证书、营业执照、社会团体登记证书等有效身份证件办理“创业播主会员卡”。若有变更，请及时与直播城联系。</view>
			<view class="main">2、会员卡如有遗失，请及时与直播城工作人员联系、并补办新卡，补办新卡需缴纳20元工本费用。</view>
			<view class="main">3、会员卡一年之内仅限转让一次。</view>
			<view class="main">4、持卡人可凭会员卡在指定充值点进行充值。</view>

			<view class="title">八、配套服务</view>
			<view class="main">持卡人可优先享受直播城相关附加配套服务：</view>
			<view class="main">1、短视频、图片、影像等专业拍摄制作等服务；</view>
			<view class="main">2、银行金融服务；</view>
			<view class="main">3、企业咨询、策划服务；</view>
			<view class="main">4、财税、法务等咨询和代理服务；</view>
			<view class="main">5、电信移动5G业务服务；</view>
			<view class="main">6、休闲会客区消费和服务;</view>
			<view class="main">7、提供不同规格的会议室、路演、会展等场地和空间；</view>
			<view class="main">8、会员食堂、爱华国际酒店餐饮住宿等服务。</view>
			<view class="title">九、持卡人福利与奖励政策</view>
			<view class="main">1、推荐发展新用户（包括创业网店店主、创业播主会员），可根据商城相关规定享有服务费20%的奖励。</view>
			<view class="main">2、推荐供应链选品入驻直播城，可享受相应的奖励政策；</view>
			<view class="main">3、持卡人可获赠“台州智播商场”创业播主网店1个（详见《台州智播商城创业网店开户协议》），直播城将赠送一张预存300元的直播城会员食堂消费卡。</view>
			<view class="main">以上福利与奖励政策以直播城官方发布的信息为准。该赠送部分属于直播城给予用户的福利政策，直播城有权根据经营管理需求作相应调整。</view>

			<view class="title">十、风险承担</view>
			<view class="main">1、由于持卡人使用不当所引起的纠纷、经济损失及法律后果，由持卡人自行承担经济损失和法律责任。如果造成直播城相关损失的，直播城有权向持卡人追偿。</view>
			<view class="main">2、直播城如发现持卡人有以下故意行为之一，有权保留取消持卡人使用服务的权利，并无需做出任何补偿：</view>
			<view class="main">（1）可能造成直播城全部或局部的服务受影响，或危害直播城运行。</view>
			<view class="main">（2）以任何欺诈行为获得会员资格。</view>
			<view class="main">（3）在直播城经营场所和相关互联网平台内发布涉及敏感政治、宗教或其他违反有关国家法律法规和公序良俗的文字、图片、视频、直播等。</view>
			<view class="main">（4）以任何非法目的而使用直播城包括且不仅限于经营场所、空间、网络系统、服务系统等。</view>

			<view class="title">十一、保密条款</view>
			<view class="main">除法律需要等原因外，直播城将严格保密会员个人信息。</view>
			<view class="title">十二、承诺</view>
			<view class="main">1、申请人承诺完全同意本手册条款并在完成申领程序后，即可成为直播城创业播主会员，享受直播城为持卡人提供的平台服务。</view>
			<view class="main">
				2、双方在共同签署的《直播城服务条款》协议基础之上，还应当遵守直播城包括且不仅限于安全、网络、直播、运营管理等各项规章制度，不得实施危害社会秩序、公共安全、他人健康和违法法律法规及公序良俗的行为。
			</view>
			<view class="main">
				3、持卡人保证在使用服务时，实施的所有行为均遵守国家与地方相关法律法规、相关直播平台规则以及直播城的相关规则、规定以及各种社会公共利益及公共道德，如有违反，由其自行承担相应的经济损失和法律责任。
			</view>

			<view class="title">十三、解释权</view>
			<view class="main">
				1、持卡人有权在办卡前向直播城详细了解会员卡的费用、使用权限等相关内容，同时承诺已充分阅读并同意《直播城服务条款》《创业播主会员服务协议》《台州智播商城创业网店开户协议》的全部内容、并将基于您的真实贸易需求而使用直播城以及台州智播商城的服务。
			</view>
			<view class="main">
				2、直播城对会员卡的使用享有最终解释权。 再一次恭贺您成为直播城创业播主会员，并享受以上服务和权益。有任何疑问和需要帮助的，请联系您的客户经理及直播城工作人员。
			</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>
		<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 < 2" @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="pay">立即支付</view>
				</view>
			</view>
		</uni-popup>
	</view>
	<!-- 	</view> -->
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { getSign } from '@/api/contract.js';
import { getLevel, accessLevel } from '@/api/anchor.js';
import { openTheHost } from '@/api/anchor.js';
import {
	// computedOrderkey,
	balance
	// createOrderkey,
	// orderPay
} from '@/api/money.js';
export default {
	data() {
		return {
			imgList: [],
			payType: 1,
			name: '',
			payName: 'weixin',
			payList: [],
			froms: '',
			money: '',
			explain: '',
			url: 'me',
			check: 1,
			now_money: '', // 当前余额
			payLoding: false //判断是否支付中
		};
	},
	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() {
			getLevel({}, 2).then(({ data }) => {
				console.log('----', data);
				this.money = data.money;
				this.name = data.name;
				this.explain = data.explain;
			});
			getSign({}, 3).then(({ data }) => {
				console.log('获取合同内容', data);
				this.imgList = data.pictures;
			});
			// 载入余额
			balance({}).then(({ data }) => {
				// 获取余额
				this.now_money = data.now_money;
				console.log('获取当前余额', this.now_money);
			});
		},

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

		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		nav() {
			if (this.url == '') {
				this.$api.msg('请选择身份');
			} else if (this.url == 'me') {
				this.$refs.tiaozhuan.close();
				console.log('打开支付弹窗');
				this.$refs.popupPay.open();
			} else {
				uni.navigateTo({
					url: this.url
				});
			}
		},
		submit() {
			if (this.userInfo.company == 0) {
				uni.showModal({
					title: '友情提示',
					content: '您的企业认证正在审核中，请耐心等待',
					success: res => {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			} else {
				console.log('打开跳转弹窗');
				// this.$refs.tiaozhuan.open();
				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);
			}
		},
		changeType(url, type) {
			console.log(url);
			if (this.url == url) {
				this.url = '';
			} else {
				this.url = url;
			}
			this.check = type;
		},
		paySuccessTo() {
			uni.hideLoading();
			uni.redirectTo({
				url: '/pages/contract/contract?type=3'
			});
		},
		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: 2,
					// #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.showModal({
							title: '提示',
							content: '支付成功是否签订合同！',
							showCancel: false,
							success: res => {
								uni.navigateTo({
									url: '/pages/contract/contract?type=3'
								});
							},
							fail: () => {},
							complete: () => {}
						});
					}
					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);
					}

					// #endif

					uni.hideLoading();
					// #ifdef H5
					if (data.status == 'PAY_ERROR') {
						console.log(data);
					}
					if (data.status == 'SUCCESS') {
						this.$refs.popupPay.close();
						uni.showModal({
							title: '提示',
							content: '支付成功是否签订合同！',
							showCancel: false,
							success: res => {
								uni.navigateTo({
									url: '/pages/contract/contract?type=3'
								});
							},
							fail: () => {},
							complete: () => {}
						});
					}
					// #endif
				});
			} catch (e) {
				console.log('fufiecw', e);
				//TODO handle the exception
			}
		}
	}
};
</script>

<style lang="scss">
page {
	width: 100%;
	height: 100%;
	background-color: #f8f8f8;
	padding-bottom: 188rpx;
}
.dredge-box {
	background: #f8f8f8;
	.box-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		width: 750rpx;
		height: 210rpx;
		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: 180rpx;
						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;
		}
	}
}
.img-box {
	width: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	background-color: #ffffff;
	// margin-bottom: 188rpx;
	// height: 1935rpx;
	// height: 700rpx;
	.label {
		padding: 0 34rpx;
		// padding: 37rpx 0 0 31rpx;
		padding-top: 24rpx;
		font-size: 36rpx;
		// font-weight: 500;
		color: #000000;
	}
	.img {
		width: 100%;
		// height: 1350rpx;
		// margin-bottom: 188rpx;
	}
}
.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;
}
.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;
	text-indent: 2em;
	font-weight: bold;
	font-size: 32rpx;
}
</style>