liveShop/pages/freeShop/businessAnchor.vue

<template>
	<view class="content">
		<view class="main">
			<!-- <view class="tilte">
				开通智播会员网店
			</view> -->
			<scroll-view scroll-y="true" class="img-box">
				<image class="img" v-for="item in imgList" :src="item" mode="widthFix"></image>
				<image class="qm" :src="name" mode="aspectFit"></image>
			</scroll-view>
		<!-- @click="navTo('/pages/freeShop/success')" -->
		<!-- <view class="btn1" v-if="shop_lv >= 2">
			已有创业网店
		</view> -->
		<view class="btn-box">
			<view class="btn1" v-if="istrue" >
				已签约
			</view>
			<view class="btn" v-else @click="submit" >
				确认申请
			</view>
		</view>
	</view>
	<uni-popup ref="tiaozhuan" type="center" @click="close">
			<view class="ts">
				<image src="../../static/img/shopBg.png"></image>
				<view class="title">选择开通</view>
				<view class="con">请选择开通身份</view>
				<view class="vipBox flex">
					<!-- <view class="left"> -->
					<view class="zftype flex">
						<view class="left">
							<image class="image1" src="../../static/img/ffVip.png" mode="aspectFill"></image>
							<view class="zf">个人认证</view>
						</view>
	
						<switch :checked="check == 1" @change="changeType('/pages/anchor/dredge', 1)" color="#FE4141" style="transform:scale(0.7)" />
					</view>
					<view class="zftype flex">
						<view class="left">
							<image class="image2" src="../../static/img/cyzb.png" mode="aspectFill"></image>
							<view class="zf">企业认证</view>
						</view>
						<switch :checked="check == 2" @change="changeType('/pages/freeShop/enterprise', 2)" color="#FE4141" style="transform:scale(0.7)" />
					</view>
					<!-- </view> -->
					<view class="right"></view>
				</view>
				<view class="btn" @click="nav()">立即开通</view>
			</view>
		</uni-popup>
	
	</view>
</template>

<script>
	import { getSign, setSign, uploadSign } from '@/api/contract.js';
	import { mapState, mapMutations } from 'vuex';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import { apply } from '@/api/apply.js';
	export default{
		compontents: {
			uniPopup
		},
		computed: {
			...mapState(['userInfo']),
			shop_lv(){
				if(this.userInfo.store_info){
					return this.userInfo.store_info.type;
				}
				else{
					return 0;
				}
			}
		},
		data(){
			return{
				istrue: false,
				name: '',
				allChecked: false, //全选状态  true|false
				imgList: [],
				payName: 'weixin',
				to_phone: '',
				check: 1,
				url:'/pages/anchor/dredge'
			}
		},
		onLoad() {
			this.loadData()
		},
		methods:{
			async loadData(){
				const obj = this;
				getSign({},3).then(({data})=>{
					console.log('获取合同内容',data)
					this.imgList = data.pictures
					this.id = data.id
					});
				getSign({},3,this.userInfo.uid)
					.then(src => {
						console.log("1111111",src);
						if(src.data.user_info){
							if(src.data.user_info.sign){
								obj.istrue = true;
								obj.name = src.data.user_info.sign;
							}
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			submit(){
				let obj = this
				if(obj.userInfo.level < 2 && obj.userInfo.company == -1){
					console.log(obj.userInfo.level);
					uni.showModal({
						title: '友情提示',
						content: '您当前不是创业主播是否前往申请',
						success: res => {
							if (res.confirm) {
								// uni.navigateTo({
								// 	url: '/pages/anchor/dredge'
								// })
								this.$refs.tiaozhuan.open();
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
				}else if (obj.userInfo.company == 0){
					uni.showModal({
						title: '友情提示',
						content: '您的企业认证正在审核中，请耐心等待',
						success: res => {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						},
						});
				}else if (obj.userInfo.company == 1 && obj.userInfo.level < 2){
					uni.showModal({
						title: '友情提示',
						content: '您的企业认证成功，是否前往开通创业播主',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/anchor/dredge'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						},
						});
				}else if (obj.userInfo.company == 2){
					uni.showModal({
						title: '友情提示',
						content: '您的企业认证失败，是否继续使用企业认证',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/freeShop/enterprise'
								})
								console.log('用户点击确定');
							} else if (res.cancel) {
								this.$refs.tiaozhuan.open();
								console.log('用户点击取消');
							}
						},
						});
				}
				else{
					uni.navigateTo({
						url: "/pages/contract/contract?type=3"
					})
				}
				// this.$refs.popup.open();
			},
			changeType(url,type){
				console.log(url)
				if(this.url == url){
					this.url = '';
				}else {
					this.url = url;
				}
				this.check = type;
			},
			nav(){
				if (this.url == ''){
					this.$api.msg( '请选择要开通的身份' );
				}
				uni.navigateTo({
					url: this.url
				})
			},
		}
	}
</script>

<style lang="scss">
	.content{
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}
	.img-box{
		// padding: 0 24rpx;
		// margin-top: 30rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
		.img{
			width: 100%;
			height: 1035rpx;
		}
	}
	.tilte{
		font-size: 34rpx;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		text-align: center;
		padding: 16rpx 0 0;
	}
	.qm {
		width: 310rpx;
		height: 128rpx;
		position: absolute;
		bottom: 200rpx;
		left: 239rpx;
		// z-index: 999;
	}
	
	.btn-box{
		padding-bottom: 30rpx;
		.btn{
			width: 674rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #FD4646, #FF3535);
			border-radius: 44rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
			margin: 0rpx auto;
			margin-top: 180rpx;
			font-size: 36rpx;
		}
		.btn1{
				width: 674rpx;
				height: 88rpx;
				background: #b1b1b1;
				border-radius: 44rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #FFFFFF;
				margin: 0rpx auto;
				margin-top: 180rpx;
				font-size: 36rpx;
		}
	}
	.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;
	}
	.ts {
		// margin-top: 108rpx;
		height: 575rpx;
		width: 542rpx;
		border-radius: 25rpx;
		background-color: #ffffff;
		z-index: 999;
		image {
			position: relative;
			width: 100%;
			height: 144rpx;
		}
		.title {
			margin-top: -100rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
			position: relative;
			z-index: 10;
		}
		.con {
			position: relative;
			text-align: center;
			z-index: 10;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #808080;
		}
		.vipBox {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 0rpx 42rpx 32rpx 51rpx;
			.left {
				width: 100%;
			}
			.type {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.zftype {
				width: 100%;
				display: flex;
				justify-content: space-between;
				.left {
					display: flex;
					align-items: center;
				}
				margin-top: 54rpx;
				.image1 {
					width: 44rpx;
					height: 38rpx;
				}
				.image2 {
					width: 46rpx;
					height: 44rpx;
				}
				.zf {
					padding-left: 18rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
				}
			}
			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				.radio {
					margin-top: 61rpx;
				}
			}
		}
		.btn {
			width: 80%;
			text-align: center;
			margin: 0 auto;
			margin-top: 60rpx;
			height: 66rpx;
			line-height: 66rpx;
			background: #ff3737;
			box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(249, 98, 105, 0.5);
			border-radius: 5rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}
	.icon-checked-box {
		border-radius: 50rpx;
		background-color: #ffffff;
		width: 52rpx;
		height: 100%;
		position: relative;
		z-index: 5;
		font-size: 53rpx;
		line-height: 1;
		color: $font-color-light;
	}
	.icon-checked {
		color: $base-color;
	}
	
	</style>