juliancheng/pages/tuijian/tuijian.vue

<template>
	<view class="main">
		<view class="model-one" v-if="modelStatus">
			<!-- <view class="model-one" v-if="true"> -->
			<view class="top-one">
				<image :src="imgHost+'/static/mine/topbg.png'" class="bg" mode=""></image>
				<view class="infobox">
					<view class="flex">
						<image class="avatar-img"
							:src="user.avatar== null||''? '../../static/tuijian/head.png':user.avatar" mode=""></image>
						<view class="avatar-content">
							<view class="nickname">
								{{user.realname == undefined||null ? '请登录': '欢迎您,' + user.realname}}
							</view>
							<view class="spread-protocol" @click="promoteProtocol">
								推广协议
								<uni-icons :size="30" class="uni-icon-wrapper" color="#7F786A" type="arrowright"
									style="width: 32rpx;height: 32rpx;padding-left:5px;" />
							</view>
						</view>
					</view>
					<view class="text-center" style="text-align: center;" @click="getthis(4)">
						<view class="qrcode-icon">
							<image src="../../static/tuijian/qrcode.png" mode="" style="width: 100%;height: 100%;">
							</image>
						</view>
						<view class="text-white" style="">
							推广二维码
						</view>
					</view>
					<!-- <view class="rule" @click="recommendRules" data-target="Modal">
						推荐规则
						<uni-icons :size="30" class="uni-icon-wrapper" color="#F5CC57" type="arrowright" style="width: 32rpx;height: 32rpx;padding-left:5px;" />
					</view> -->
				</view>
			</view>
			<view class="info-box" style="position: relative;height: 400rpx;">
				<view class="info"
					style="padding: 30rpx 15rpx;width: 80%;background-color: #FFFFFF;box-shadow: 6rpx 6rpx 20rpx rgba(26, 26, 26, 0.2);border-radius: 20rpx;z-index: 100;position: absolute;top: -50px;left: 50%;transform: translate(-50%, -10%);">
					<view class="price-content">
						<view class="price-title" style="text-align: center;font-size: 32rpx;font-weight: bold;">
							可提现金额(元)</view>
						<view class="price" style="text-align: center;font-size: 50rpx;">{{promoteInfo.balance}}
						</view>
					</view>
					<view class="flex align-center justify-between"
						style="margin: 0 20rpx;padding-bottom: 15rpx;border-bottom: 1px solid #B4B4B4;">
						<view class="">
							<view class="text-left" style="color: #B4B4B4;font-size: 32rpx;">已提现奖金(元)</view>
							<view class="text-center" style="margin: 10rpx 0;">{{promoteInfo.withdrawn}}</view>
						</view>
						<view>
							<view class="" style="color: #B4B4B4;font-size: 32rpx;">未结算奖金(元)</view>
							<view class="text-center" style="margin: 10rpx 0;">{{promoteInfo.audit_balance}}</view>
						</view>
					</view>
					<view class="flex align-center justify-around" style="padding-top: 30rpx;">
						<view @click="getthis(5)" class="bank flex align-center justify-center radius text-center"
							style="text-align: center;width: 45%;height: 60rpx;line-height:60rpx;border: 1px solid #F6CF87;">
							<image :src="$imgHost + '/static/tuijian/bank-1.png'" mode=""
								style="width: 35rpx;height: 25rpx;"></image>
							<view style="margin-left: 15rpx;">银行卡绑定</view>
						</view>
						<view @click="getthis(0)" class="flex align-center justify-center radius"
							style="text-align: center;width: 45%;height: 60rpx;line-height:60rpx;border: 1px solid #F6CF87;">
							<image :src="$imgHost + '/static/tuijian/bank-1.png'" mode=""
								style="width: 35rpx;height: 25rpx;">
								<view style="margin-left: 15rpx;">马上提现</view>
						</view>
					</view>

				</view>
			</view>
			<view class="btns">
				<view class="tab" v-for="( item , index ) in btns" :key="index" @click="getthis(index)">
					<view class="imgs">
						<view
							:class="['imgs-item',{'imgs-item1':index ==0},{'imgs-item2':index ==1},{'imgs-item3':index ==2},{'imgs-item4':index ==3},{'imgs-item5':index ==5}]">
							<image :src="imgHost + item.img" class="tab-img" mode=""></image>
						</view>
					</view>
					<view class="name">
						{{item.name == undefined ? '':item.name }}
					</view>
					<view class="price" :class="item.danwei=='人'?'ren':''">
						<text class="price-vlaue">
							{{index==0? promoteInfo.promote_reward:index==1? promoteInfo.promote_order_num:index==2? promoteInfo.withdrawn_detail_money:index==3? promoteInfo.invite_num:''}}
						</text>
						{{index==1?'个':item.danwei}}
					</view>
				</view>
			</view>
		</view>

		<view class="model-two" v-else>
			<!-- <view class="model-two" v-if="false"> -->
			<view class="top-img">
				<image :src="imgHost+'/static/mine/topbg2.png'" mode=""></image>
				<view class="top-box">
					<view class="title-box">
						<view class="title-top">销售拿奖金</view>
						<view class="protocol-btns" style="" @click="protocol" data-target="protocol">查看协议</view>
					</view>
					<view class="top-content" style="text-align: center;font-size: 26rpx;">
						成为推广人后，推广其他用户下单，您可以获得奖金<br>推广方式多样化，给你更多的体验
					</view>
				</view>
			</view>
			<view class="sponsor">
				<view class="sponsor-btn">立即成为聚联诚集团推广人</view>
			</view>
			<!-- <view class="top-two">
				<image :src="imgHost+'/static/mine/topbg2.png'" mode=""></image>
			</view> -->
			<!-- 		<view class="top-two">
				<image :src="imgHost+'/static/index/img1.png'" mode=""></image>
			</view>
			<view class="protocol">
				<view class="protocol-btn" @click="protocol" data-target="protocol">查看协议</view>
				<view class="protocol-content">
					<image :src="imgHost+'/static/apply/jiangjin.png'" mode="" class="protocol-content-img"></image>
					<view class="title">销售拿奖金</view>
					<view class="txt">成为推广人后，推广其他用户下单，您可以获得奖金<br>推广方式多样化，给你更多的体验</view>
				</view>
			</view> -->
			<view class="tabs">
				<view @click="join(index)" class="tab" :key="index" v-for="( item , index ) in tabs">
					<view class="tab-img-two">
						<image :src="item.img" mode="" class="i1"></image>
					</view>
					<view class="tab-txt">
						<view>{{index == 1 ? item.txt+money+'元即可': item.txt}}</view>
						<view>{{item.txt2}}</view>
					</view>
					<view class="tab-foot-img">
						<image :src="item.gimg" mode="" class="i2"></image>
					</view>

				</view>
			</view>
		</view>

		<!-- 推荐规则 -->
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">推荐规则</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close yellow"></text>
					</view>
				</view>
				<view class="padding-xl">
					{{promote_config.promote_agreement}}
				</view>
			</view>
		</view>
		<!-- 推广二维码 -->
		<view class="cu-modal" :class="modalName=='qrcode'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">推广二维码</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close yellow"></text>
					</view>
				</view>
				<view class="padding-xl">
					<image class="qrcodeImg" :src="inviteQr"></image>
					<canvas canvas-id="qrcode" class="canvas-hide" style="width: 354px;height: 354px;" />
					<view class="qrcodeBtn">
						<text class="textbgw">长按二维码保存</text>
						<button class="cu-btn yellowBg" @click="copyurl">复制链接</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 推荐规则 -->
		<view class="cu-modal" :class="modalName=='openSetting'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close yellow"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="">保存二维码需要您授权相关权限</view>
					<view class="">
						<button type="default" class="cu-btn" @tap="hideModal" style="margin: 10px;">取消</button>
						<button type="default" open-type="openSetting" class="cu-btn yellowBg" style="margin: 10px;"
							@tap="hideModal">确定</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 公告栏 -->
		<view class="cu-modal" :class="modalName == 'protocol'?'show':''">
			<view class="cu-dialog offset-top">
				<view class="cu-bar bg-white justify-end">
					<view class="content">协议</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close yellow" />
					</view>
				</view>
				<view class="padding-xl">
					<u-parse :content="promote_agreement == null? '暂无文章数据' : promote_agreement" @preview="preview"
						@navigate="navigate" className="articleDetailContent" />
				</view>
			</view>
		</view>
		<!-- 获取微信信息弹窗框 -->
		<view class="cu-modal" :class="modalName == 'login' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">登录</view>
					<view class="action" @tap="modalName = ''">
						<text class="cuIcon-close yellow" />
					</view>
				</view>
				<view class="padding-xl">
					<view class="top-title" style="">
						<text class="top-title1">您还未登陆</text></br>
						<text class="top-title2">请先登录再进行操作</text>
					</view>
					<view class="flex justify-around">
						<button type="primary" @tap="modalName = ''" class="cu-btn round greyBg lg">暂不登录</button>
						<button type="primary" @click="gotologin" class="cu-btn round yellowBg lg"
							hover-class="btn-hover">立刻登录</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var user = require('../../common/user.js');
	import store from '@/store'
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex';
	import uParse from '@/components/u-parse/u-parse.vue'
	import uQRCode from '../../js_sdk/Sansnn-uQRCode/uqrcode'
	import h5Copy from '@/js_sdk/junyi-h5-copy/junyi-h5-copy/junyi-h5-copy.js'
	export default {
		components: {
			uParse,
			uQRCode
		},
		computed: {
			...mapState(['user']),
			...mapGetters({
				hasLogin: 'verifyJwt'
			}),
		},
		data() {
			return {
				modelStatus: true,
				modalName: null,
				userInfo: {},
				gonggao: false,
				hasUserInfo: false,
				btnDisabled: false,
				background: ['../../static/index/img1.png', '../../static/index/img1.png', '../../static/index/img1.png'],
				indicatorDots: true,
				vertical: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				imgHost: '',
				btns: [{
						name: '推广奖金',
						img: '/static/tuijian/tuiguang-1.png',
						danwei: '元',
					},
					{
						name: '推广订单',
						img: '/static/tuijian/dan-1.png',
						danwei: '元',
					},
					{
						name: '提现明细',
						img: '/static/tuijian/tixian-1.png',
						danwei: '元',
					},
					{
						name: '我推荐的人',
						img: '/static/tuijian/group-1.png',
						danwei: '人',
					},
					// {
					// 	name: '推广二维码',
					// 	img: '/static/tuijian/qr.png',
					// 	danwei: '',
					// },
					// {
					// 	name: '银行卡绑定',
					// 	img: '/static/tuijian/bank-1.png',
					// 	danwei: '',
					// },
				],
				promoteInfo: {
					promote_reward: '',
					promote_order_num: '',
					withdrawn_detail_money: '',
					invite_num: '',
					audit_balance: 0,
					withdrawn: 0,
					balance: 0
				},
				inviteQr: '',
				promote_config: {},

				// 加盟数据
				promote_agreement: '',
				money: '',
				modalName: null, //协议框状态
				tabs: [{
						img: '../../static/apply/xiadan.png',
						txt: '完成任意订单即可',
						txt2: '享受推广人特权',
						gimg: '../../static/apply/godan.png'
					},
					{
						img: '../../static/apply/qianbao.png',
						txt: '支付',
						txt2: '享受推广人特权',
						gimg: '../../static/apply/gopay.png'
					},
				],
				qrcode: ""
			}
		},
		onLoad: function() {
			this.imgHost = this.$imgHost
			this.qrcode = this.$qrcode
		},
		onShow: function() {
            if (this.hasLogin) {
                // this.user刷新就没了，统一调用接口判断
                this.getPromoteInfo();
                this.getPromoteConfig();
                // this.getInviteQr();
            } else {
                this.modelStatus = false
            }
			console.log(this.user.id)
			this.make(this.user.id)
		},
		mounted() {
			this.configData()

		},
		methods: {
			...mapActions({
				getUser: 'getUser' // 将 `this.getUser()` 映射为 `this.$store.dispatch('getUser')`
			}),
			// 加盟数据
			configData: async function() {
				let res = await this.$request.post('/api/SystemConfig/getSysteConfig');
				console.log(res)
				if (res.code == 200) {
					this.money = res.data.promote_price
					this.promote_agreement = res.data.promote_agreement
				}
			},
			copyurl() {
				const result = h5Copy(this.qrcode + this.user.id)
				if (result === false) {
					uni.showToast({
						title: '复制失败',
						icon: "none"
					})
				} else {
					this.modalName = ''
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					})
				}
			},
			// 协议
			protocol(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			// 推广协议
			promoteProtocol() {
				uni.navigateTo({
					url: "/pages/tuijian/promoteProtocol"
				})
			},
			hideModal(e) {
				this.modalName = null
			},
			async make(id) {
				//生成二维码
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: this.qrcode + id,
					size: 354,
					margin: 10,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'png',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						this.inviteQr = res
					}
				})
			},
			onBridgeReady: function(res) {
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": res.data.appId,
						"timeStamp": res.data.timeStamp,
						"nonceStr": res.data.nonceStr,
						"package": res.data.package,
						"signType": res.data.signType,
						"paySign": res.data.paySign
					},
					function(re) {
						if (re.err_msg == "get_brand_wcpay_request:ok") {
							uni.showToast({
								icon: 'success',
								title: '支付成功',
								duration: 1000
							});
							setTimeout(function() {
								uni.navigateBack();
							}, 1000);
						}
					});
			},
			async join(index) {
				if (this.$isShow) {
					uni.showModal({
						title: "提示",
						content: "系统维护请等待通知",
						showCancel: false,
						success: (res) => {}
					})
					return false
				}
				let that = this
				if (index == 1) {
					if (this.hasLogin) {
						// if (this.$util.is_weixin()) {
						// 	let res = await this.$request.post('/api/payment/payPromote', {
						// 		plat_type: 1
						// 	});
						// 	if (res.code == 200) {
						// 		if (typeof WeixinJSBridge == "undefined") {
						// 			if (document.addEventListener) {
						// 				document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
						// 			} else if (document.attachEvent) {
						// 				document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
						// 				document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
						// 			}
						// 		} else {
						// 			this.onBridgeReady(res)
						// 		}
						// 	}
						// } else {
						// 	let res = await this.$request.post("/api/payment/webPayPromote")
						// 	if (res.code == 200) {
						// 		window.location.href = res.data.mweb_url
						// 	}
						// }
						uni.navigateTo({
							url: "tuijianpay"
						})
					} else {
						uni.navigateTo({
							url: "../login/login",
							fail: (err) => {
								console.log(err)
							}
						})
					}
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			},
			gotologin() {
				this.modalName = '';
				uni.navigateTo({
					url: "../login/login",
					fail: (err) => {
						console.log(err)
					}
				})
			},
			// wxLogin: function(e) {
			// 	if (e.detail.userInfo == undefined) {
			// 		uni.showToast({
			// 			title: '微信登录失败'
			// 		});
			// 		return;
			// 	}
			// 	user.loginByWeixin(e.detail.userInfo)
			// 		.then(res => {
			// 			console.log(res)
			// 			this.getUser(true);
			// 			let that = this;
			// 			if (res.code == 200) {
			// 				if (res.data.is_auth == 1){
			// 					this.modalName = ''
			// 					let promoter_type = this.user.promoter_type
			// 					if(promoter_type>0){
			// 						this.modelStatus = true
			// 						this.getPromoteInfo();
			// 						this.getPromoteConfig();
			// 						this.getInviteQr();
			// 					}else{
			// 						uni.navigateTo({
			// 							url: '/pages/mine/info'
			// 						});
			// 					}
			// 				}
			// 			}
			// 		})
			// 		.catch(res => {
			// 			if (res.code == 200) {
			// 				if (res.data.is_auth == 1) {
			// 					console.log(666)
			// 					uni.navigateTo({
			// 						url: '/pages/mine/info'
			// 					});
			// 				}
			// 			}
			// 		});
			// },
			// ------------------------------------------------------
			downloadImg: function(url) {
				uni.showLoading({
					title: '保存中...'
				})
				this.btnDisabled = true
				uni.downloadFile({
					url: url,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.hideLoading()
									this.btnDisabled = false
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: (res) => {
									uni.hideLoading()
									this.btnDisabled = false
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
									this.modalName = 'openSetting'
								}
							});
						}
					}
				})
			},
			getPromoteConfig: async function() {
				let res = await this.$request.post('/api/SystemConfig/getSysteConfig', {});
				if (res.code == 200) {
					this.promote_config = res.data;
				} else {
					uni.showToast({
						icon: 'none',
						title: res.message
					});
				}
			},
			getPromoteInfo: async function() {
				let res = await this.$request.post('/api/userPromote/promoteInfo', {});
				console.log(res, 666)
				if (res.code == 200) {
					this.promoteInfo = res.data
                    this.modelStatus = true
                } else if(res.code == 10001) { // 不是推广人
                    this.modelStatus = false
				} else {
					uni.showToast({
						icon: 'none',
						title: res.message,
						duration: 800
					});
					setTimeout(() => {
						uni.switchTab({
							url: "../index/index"
						})
					}, 800)
				}
			},
			// getInviteQr: async function() {
			// 	let res = await this.$request.post('/api/userPromote/getInviteQr', {
			// 		path: 'pages/index/index'
			// 	});
			// 	if (res.code == 200) {
			// 		this.inviteQr = res.data.invite_qr_url;
			// 	} else {
			// 		uni.showToast({
			// 			icon: 'none',
			// 			title: res.message
			// 		});
			// 	}
			// },
			close() {
				this.gonggao = false
			},
			showgg() {
				this.gonggao = true
			},
			gocash() {
				uni.navigateTo({
					url: '/pages/tuijian/cash'
				})
			},
			gothere(e) {
				if (e == 0) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else if (e == 1) {
					uni.redirectTo({
						url: '/pages/tuijian/tuijian'
					})
				} else if (e == 2) {
					uni.switchTab({
						url: '/pages/mine/mine'
					})
				}
			},
			getthis(e) {
				if (this.$isShow) {
					uni.showModal({
						title: "提示",
						content: "系统维护请等待通知",
						showCancel: false,
						success: (res) => {}
					})
					return false
				}
				if (e == 0) {
					uni.navigateTo({
						url: '/pages/tuijian/jiangjin'
					})
				} else if (e == 1) {
					uni.navigateTo({
						url: '/pages/tuijian/order?index=0'
					})
				} else if (e == 2) {
					uni.navigateTo({
						url: '/pages/tuijian/cashdetail'
					})
				} else if (e == 3) {
					uni.navigateTo({
						url: '/pages/mine/tuijian'
					})
				} else if (e == 4) {
					this.modalName = 'qrcode';
				} else {
					uni.navigateTo({
						url: '/pages/tuijian/bankCard'
					})
				}
			},
			recommendRules(e) {
				console.log(e)
				console.log('点击成功')
				this.modalName = e.currentTarget.dataset.target
			},
			// 关闭函数
			hideModal(e) {
				this.modalName = null
			},
		}
	}
</script>

<style>
	/* 推荐中心样式 */
	page {
		width: 100%;
		background: #fff;
	}

	.canvas-hide {
		/* 1 */
		position: fixed;
		right: 100vw;
		bottom: 100vh;
		/* 2 */
		z-index: -9999;
		/* 3 */
		opacity: 0;
	}

	.main {
		width: 100%;
		height: auto;
		background: #fff;
	}

	.top-one {
		width: 100%;
		height: 400rpx;
		font-size: 28rpx;
		/* position: relative; */
		padding-top: 5vw;
	}

	.top-one .rule {
		position: absolute;
		top: 4vw;
		right: 4vw;
		font-family: PingFangSC-Regular, sans-serif;
		font-weight: 400;
		color: #F5CC57;
	}

	.top-one .bg {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		height: 30vh;
	}

	.top-one .infobox {
		width: 90vw;
		height: 200rpx;
		margin: 0 5vw;
		position: absolute;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.infobox .avatar-img {
		width: 70px;
		height: 70px;
		border-radius: 60px;
		background: #eee;
	}

	.infobox .avatar-content {
		margin-left: 15rpx;
	}

	.infobox .qrcode-icon {
		margin: 0 auto;
		width: 70rpx;
		height: 70rpx;
		background: #eee;
		text-align: center;
		margin-bottom: 10rpx;
	}

	.avatar-content .nickname {
		font-size: 32rpx;
		margin-top: 20rpx;
		color: #FFFFFF;
	}

	.avatar-content .spread-protocol {
		margin-top: 20rpx;
		color: #7F786A;
	}

	.infobox .name {
		width: calc(90vw - 150px);
		height: 40px;
		line-height: 40px;
		margin: 40px 0;
		font-size: 18px;
		color: #394043;
	}

	.mainbg {
		width: 100%;
		height: 66vh;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.keti {
		width: 80vw;
		height: 60px;
		line-height: 60px;
		margin: 0 10vw;
		background: #F49A31;
		border-radius: 40px;
		color: #fff;
		position: fixed;
		top: 32vw;
		display: flex;
		justify-content: space-between;
		padding: 0 15px;
		font-size: 14px;
		font-weight: 300;
	}

	.btn {
		width: auto;
		border: 1px solid #fff;
		border-radius: 4px;
		padding: 0 15px;
		height: 33px;
		line-height: 33px;
		margin: 15px 0;
		font-size: 24rpx;
		font-weight: 300;
		font-family: PingFangSC-Regular, sans-serif;
	}

	.tixian-box {
		width: 80vw;
		height: auto;
		padding: 5vw;
		display: flex;
		justify-content: center;
		position: fixed;
		top: 55vw;
		left: 10vw;
		background: #fff;
	}

	.tixian-box .tbtn {
		width: 39.5vw;
		height: 60px;
	}

	.tbtn .title {
		width: 100%;
		height: 30px;
		text-align: center;
		line-height: 30px;
		font-size: 32rpx;
		font-weight: 400;
		color: #555864;
		font-family: PingFangSC-Regular, sans-serif;
	}

	.tbtn .num {
		width: 100%;
		height: 30px;
		line-height: 30px;
		text-align: center;
		color: #ED462F;
		font-family: PingFangSC-Regular, sans-serif;
	}

	.tbtn .num .num-value {
		font-size: 38rpx;
		font-weight: 500;
		color: #ED462F;
		font-family: PingFangSC-Regular, sans-serif;
	}

	.tixian-box .yiti {
		border-right: 1px dashed #F5CC57;
	}

	.btns {
		width: 90vw;
		height: auto;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		position: fixed;
		top: calc(70vw + 80px);
		left: 5vw;
	}

	.btns .tab {
		/* width: 27vw;
		height: 27vw; */
		width: 160rpx;
		height: 160rpx;
		margin-bottom: 3vw;
		background: rgba(255, 255, 255, 1);
		box-shadow: 6rpx 6rpx 20rpx rgba(26, 26, 26, 0.2);
		border-radius: 8px;
	}

	.tab .imgs {
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 5rpx;
	}

	.tab .imgs .imgs-item {
		width: 45rpx;
		height: 45rpx;
	}

	.imgs-item1 {
		width: 48rpx !important !;
	}

	.imgs-item2 {
		width: 39rpx !important;
	}

	.imgs-item3 {
		width: 40rpx !important;
	}

	.imgs-item4 {
		width: 52rpx !important;
	}

	.imgs-item5 {
		width: 50rpx !important;
		height: 42rpx !important;
	}

	.tab .tab-img {
		width: 100%;
		height: 100%;
		/* width: 48rpx;
		height: 48rpx; */
		/* margin-bottom: 5rpx; */
		/* 	width: 9vw;
		height: 8vw;
		margin: 4vw 9vw 1vw 9vw; */
	}

	.tab .name {
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		margin-bottom: 5rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #555864;
		text-align: center;
		font-family: PingFangSC-Regular, sans-serif;
	}

	.tab .price {
		width: 100%;
		height: 5vw;
		line-height: 5vw;
		color: #ED462F;
		text-align: center;
		font-size: 26rpx;
		font-weight: 400;
		text-align: center;
		font-family: PingFangSC-Regular, sans-serif;
	}

	.tab .ren {
		color: #F5CC57;
	}


	.bg {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.3);
		position: fixed;
		top: 0;
		left: 0;
	}

	/* 	.bg .gonggaobox{
		width: calc( 90vw - 30px );
		height: auto;
		padding: 15px;
		background: #fff;
		border-radius: 8px;
		margin: 30% 5vw;
	} */
	/* 	.gonggaobox .title{
		width: 100%;
		height: 50px;
		line-height: 50px;
		display: flex;
		border-bottom: 1px solid #eee;
	} */
	.title .name1 {
		width: 60%;
		height: 50px;
		text-align: center;
		color: #555864;
	}

	.title .close {
		width: 20%;
		height: 50px;
		text-align: center;
		color: #F5CC57;
	}

	/* 	.gonggaobox .txt{
		padding: 15px;
		text-indent: 20px;
		color: #555864;
		font-weight:300;
		font-size:26rpx;
		align-items: center;
		width: 100%;
		height: auto;
	} */
	.txt image {
		width: 100px;
		height: 100px;
		margin: 20px calc(45vw - 65px);
	}

	.yellow {
		color: #F5CC57;
	}

	.uni-icons {
		font-size: 32rpx !important;
	}

	.yellowBg {
		color: #fff !important;
		background: #f5cc57 !important;
		font-size: 16px;
		font-family: PingFangSC-Regular, sans-serif;
		width: 224rpx;
		margin-top: 10rpx;
	}

	.textbgw {
		color: #f5cc57 !important;
		font-size: 16px;
		font-family: PingFangSC-Regular, sans-serif;
	}

	/* 底部导航栏 */
	/* 		.foot{
		  position: fixed;
		  bottom: 0;
		  left: 0;
		  background: #fff;
		  width: 100%;
		  height: 50px;
		  display: flex;
		  justify-content: space-around;
		  border-top: 1px solid #eee;
		}
		.foot .box{
		  width: 60px;
		  height: 40px;
		  margin: 5px;
		}
		.box .icon{
		  width: 26px;
		  height: 26px;
		  margin: 0 17px;
		}
		.box .txt{
		  width: 60px;
		  height: 10px;
		  line-height: 10px;
		  text-align: center;
		  font-size: 12px;
		  color: #989898;
		}
		.box .native{
		  color: #000;
		} */
	.qrcodeImg {
		width: 200rpx;
		height: 200rpx;
	}

	.qrcodeBtn {
		margin-top: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 加盟申请样式 */
	.main-two {
		width: 100vw;
		height: auto;
		margin-bottom: 20px;
	}

	/* 新增 */
	.top-img {
		width: 100%;
		height: 42vw;
		position: relative;
	}

	.top-img image {
		width: 100vw;
		height: 42vw;
		padding: 10px;
	}

	.top-box {
		width: 80vw;
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.title-top {
		width: auto;
		height: 46rpx;
		margin-bottom: 30rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
		color: #fff;
		font-family: PingFangSC-Regular, sans-serif;
		position: relative;
	}

	.protocol-btns {
		position: absolute;
		top: 0;
		right: 0;
		color: #FAC45D;
		width: 150rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		background: #fff;
		border-radius: 50px;
	}

	.sponsor {
		width: 100%;
		padding: 0 50rpx
	}

	.sponsor-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		margin: 60rpx 0 80rpx 0;
		color: #FFFFFF;
		font-size: 28rpx;
		background: #FAC45D;
	}

	/*  */
	.top-two {
		width: 100%;
		height: auto;
	}

	.top-two image {
		width: 100vw;
		height: 42vw;
		padding: 10px;
	}

	.protocol {
		width: 90vw;
		height: 140px;
		background: #fff;
		border-radius: 5px;
		padding: 20px 10px;
		margin: 5vw;
		position: relative;
		box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);
	}

	.protocol .protocol-btn {
		/* 	width: auto;
		height: auto; */
		width: 160rpx;
		height: 48rpx;
		line-height: 48rpx;
		/* padding: 3px 20px; */
		color: #F5CC57;
		font-size: 24rpx;
		font-weight: 500;
		text-align: center;
		font-family: PingFangSC-Regular, sans-serif;
		background: rgba(236, 207, 125, 0.2);
		border-radius: 8px;
		float: right;
	}

	.protocol .protocol-content .protocol-content-img {
		width: 120rpx;
		height: 120rpx;
		margin-right: 10rpx;
		position: absolute;
		top: 60px;
	}

	.protocol .protocol-content .title {
		width: calc(90vw - 90px);
		height: 45rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 300;
		font-family: PingFangSC-Regular, sans-serif;
		color: #555864;
		position: absolute;
		top: 60px;
		left: 80px;
	}

	.protocol .protocol-content .txt {
		width: calc(90vw - 90px);
		height: 66rpx;
		line-height: 66rpx;
		font-size: 24rpx;
		font-weight: 300;
		font-family: PingFangSC-Regular, sans-serif;
		line-height: 20px;
		color: #777;
		position: absolute;
		top: 85px;
		left: 80px;
	}

	.tabs {
		width: 90vw;
		height: auto;
		margin: 0 5vw;
		display: flex;
		justify-content: space-between;

	}

	.tabs .tab {
		width: 42.5vw;
		height: auto;
		border-radius: 5px;
		background: #fff;
		padding: 20px 0;
		box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);
	}

	.tab .i1 {
		width: 36px;
		height: 36px;
		margin: 0 calc(21.25vw - 18px);
	}

	.tab .tab-txt {
		width: 81%;
		height: auto;
		line-height: 20px;
		text-align: center;
		margin: 10px 10%;
		font-size: 30rpx;
		font-weight: 300;
		font-family: PingFangSC-Regular, sans-serif;
		color: #555864;
	}

	.tab .i2 {
		width: 100px;
		height: 30px;
		margin: 0 calc(21.25vw - 50px);
	}

	.yellow {
		color: #F5CC57;
	}

	.yellowBg {
		background: #F5CC57 !important;
	}

	.greyBg {
		background: grey !important;
	}

	.top-title {
		margin-bottom: 15px;
	}

	.top-title .top-title1 {
		font-size: 19px;
		color: #000000;
		margin-top: 10px;
	}

	.top-title .top-title2 {
		font-size: 13px;
		color: #999;
	}

	.offset-top {
		bottom: 200px;
	}
</style>