liveShop/pages/freeShop/business.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="changePayType('/pages/freeShop/enterprise',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="changePayType('/pages/anchor/dredge',2)" color="#FE4141" style="transform:scale(0.7)" />
					</view>
				<!-- </view> -->
				<view class="right">
					<!-- <label class="radio" @click="changePayType('/pages/anchor/commonVip',1)"> -->
						<!-- <switch :checked="check == 1" @change="changePayType('/pages/anchor/commonVip',1)" color="#FE4141" style="transform:scale(0.7)" /> -->
						<!-- <radio style="transform:scale(0.7)" value="" :checked="check == 1" color="#FE4141"></radio> -->
					<!-- </label> -->
					<!-- <label class="radio" @click="changePayType('/pages/anchor/dredge',2)"> -->
						<!-- <switch :checked="check == 2" @change="changePayType('/pages/anchor/dredge',2)" color="#FE4141" style="transform:scale(0.7)" /> -->
						<!-- <radio style="transform:scale(0.7)" class="rad" value="" :checked="check == 2" color="#FE4141"></radio> -->
					<!-- </label> -->
				</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/commonVip'
			}
		},
		onLoad() {
			this.loadData()
		},
		methods:{
			async loadData(){
				const obj = this;
				getSign({},1).then(({data})=>{
					console.log('获取合同内容',data)
					this.imgList = data.pictures
					this.id = data.id
					});
				getSign({},1,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 < 1){
					console.log(obj.userInfo.level);
					uni.showModal({
						title: '友情提示',
						// content: '您当前不是付费会员或创业主播是否前往申请',
						content: '您当前不是付费会员是否前往申请',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/anchor/commonVip'
								})
								// this.$refs.tiaozhuan.open();
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					// uni.navigateTo({
					// 	url: "/pages/anchor/dredge"
					// })
				}
				else{
					uni.navigateTo({
						url: "/pages/contract/contract?type=1"
					})
				}
				// this.$refs.popup.open();
			},
			changePayType(url,type){
				console.log(url)
				this.url = url;
				this.check = type;
			},
			nav(){
				uni.navigateTo({
					url: this.url
				})
			},
			// qx(){
			// 	this.$refs.tiaozhuan.close();
			// },
			// nav(){
			// 	uni.navigateTo({
			// 		url: "/pages/anchor/dredge"
			// 	})
			// },
			// comfirm1:function () {
			// let obj = this
			// if(obj.userInfo.level < 2){
			// 	console.log(obj.userInfo.level);
			// 	uni.navigateTo({
			// 		url: "/pages/anchor/dredge"
			// 	})
			// }
			// 	if ( obj.to_phone.toString().trim() == '' ){
			// 		obj.$api.msg('请填写正确的手机号码');
					
			// 	} 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;
			// 			}
			// 		if(this.shop_lv >= 2){
			// 			getSign({},1,this.userInfo.uid)
			// 				.then(src => {
			// 					console.log("1111111",src);
			// 				})
			// 				.catch(err => {
			// 					console.log("222222",err);
			// 				})
			// 		}else {
			// 			apply({
			// 				name: obj.userInfo.nickname + "的网店",
			// 				introduction: obj.userInfo.nickname + "的网店",
			// 				image: obj.userInfo.avatar,
			// 				phone: obj.to_phone || '',
			// 				type: 2})
			// 				.then(({ data }) =>{
			// 					this.$refs.popup.close();
			// 					console.log(data)
			// 					uni.navigateTo({
			// 						url:'/pages/contract/contract?type=2'
			// 					});
			// 				})
			// 				.catch((err) => {
			// 					this.$refs.popup.close();
			// 					if(this.userInfo.level < 2){
			// 						this.$refs.tiaozhuan.open();
			// 					}
			// 				})
			// 		}
			// 	}
			// },	
			// submit(url){
			// 	apply({name: this.userInfo.nickname + "的网店",
			// 		introduction: this.userInfo.nickname + "的网店",
			// 		image: this.userInfo.avatar,
			// 		phone: this.userInfo.phone,
			// 		type: 2})
			// 		.then(({ data }) =>{
			// 			console.log(data)
			// 			uni.navigateTo({
			// 				url
			// 			});
			// 		})
			// 		.catch((err) => {
			// 			console.log(err);
			// 		})
			// },
		}
	}
</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;
	}
	// .details{
	// 	padding: 12rpx 24rpx 24rpx;
	// 	text-indent: 44rpx;
	// 	font-size: 26rpx;
	// 	line-height: 40rpx;
	// }
	.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>