liveShop/pages/anchor/anchorSelection.vue

<template>
	<view class="content">
		<!-- 主播头部 -->
		<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="anchor-top"><image src="https://zhibo.liuniu946.com/img/anchor3.png" mode=""></image></view>
		<!-- 立刻申请 -->
		<view class="anchor-box">
			<view class="anchor-buttom">
				<view class="dredge-box">
					<view class="dredge">
						<view class="icon"><image src="https://zhibo.liuniu946.com/img/anchor1.png" mode=""></image></view>
						<view class="text"><input v-model="liveData.account" type="text" placeholder="请填写直播账号" /></view>
					</view>
					
					<view class="dredge">
						<view class="icon"><image src="https://zhibo.liuniu946.com/img/anchor1.png" mode=""></image></view>
						<view class="text"><input v-model="liveData.amountOfFans" type="number" placeholder="请填写账号粉丝量" /></view>
					</view>
					<view class="dredge">
						<view class="icon"><image src="https://zhibo.liuniu946.com/img/anchor2.png" mode=""></image></view>
						<view class="text"><input v-model="liveData.platform" type="text" placeholder="请填写直播平台" /></view>
					</view>
				</view>
				<view class="judge">
					<view class="left">
						<view class="icon"><image src="https://zhibo.liuniu946.com/img/anchor2.png" mode=""></image></view>
						<view class="text">是否开通直播带货</view>

						<!-- 			<label class="checkbox">
							<text>是</text>
							<checkbox value="true" checked="checked" />

							<text>否</text>
							<checkbox value="false" />
						</label> -->
						<!-- 	<label class="radio"   style="transform:scale(0.7);"  >
							<text>是</text>
							<radio value="1" :checked='sex == 1' color="#fd4646"  style="margin: 0 20rpx;" />
							<text>否</text>
							<radio value="2" :checked='sex == 2' color="#fd4646" style="margin: 0 20rpx;"  />
						</label> -->
						<label class="radio" @click="changePayType(true)" style="transform:scale(0.7);margin: 0 30rpx;">
							<text style="font-size: 44rpx;">是</text>
							<radio value="1" :checked="liveData.payType == true" color="#fd4646" style="margin: 0 10rpx;"></radio>
						</label>
						<label class="radio" @click="changePayType(false)" style="transform:scale(0.7);margin: 0 30rpx;">
							<text style="font-size: 44rpx;">否</text>
							<radio class="rad" value="2" :checked="liveData.payType == false" color="#fd4646" style="margin: 0 10rpx;"></radio>
						</label>
					</view>
				</view>
				<view class="buttom">
					<!-- <view class="apply" @click="confirm">立刻申请</view> -->
					<view class="apply" v-if="userInfo.level != 3" @click="confirm">立刻申请</view>
					<view class="apply1" v-else>已开通</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { openTheHost } from '@/api/anchor.js';
export default {
	computed: {
		...mapState(['userInfo']),
	},
	data() {
		return {
			liveData: {
				account: '', //直播账号
				amountOfFans: '', //粉丝量
				platform: '', //直播平台
				payType: true //判断是否openTheHost
			}
		};
	},
	methods: {
		goback() {
			uni.switchTab({
				url: '../user/user'
			});
		},
		onLoad(option) {},
		//数据校验
	

		confirm() {
			let data = this.liveData;

			if (data.account == '') {
				uni.showToast({
					icon:'none',
				 title: '请输入直播账号'})
				return;
			}
			if (data.amountOfFans == '') {
				uni.showToast({
					icon:'none',
				 title: '请填写账号粉丝量'})
			
				return;
			}
			if (data.platform == '') {
				uni.showToast({
					icon:'none',
				 title: '请填写直播平台'})
			
				return;
			}
			console.log(123);
			openTheHost({
				payType: 'offline',
				// make: JSON.stringify(data),
				make: data,
				apply_level: 3
			}).then(({ data }) => {
				console.log('------', data);
				uni.navigateTo({
					url:'../wallet/tjSuccess'
				})
			});
		},
		changePayType(type) {
			this.liveData.payType = type;
		},
		radioChange(e) {
			console.log('type:' + e.detail.value);
			this.sex = e.detail.value;
		}
	}
};
</script>

<style lang="scss">
.content {
	width: 750rpx;
	height: 100%;
	position: relative;
	.header {
		margin-top: var(--status-bar-height);
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 80rpx;
		font-size: 32rpx;
		font-weight: 700;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}
	.goback-box {
		margin-top: var(--status-bar-height);
		position: absolute;
		left: 18rpx;
		top: 0;
		height: 80rpx;
		display: flex;
		align-items: center;
	}
	.goback {
		z-index: 100;
		width: 34rpx;
		height: 34rpx;
	}
	.anchor-top {
		width: 750rpx;
		height: 400rpx;
		background-color: pink;
		image {
			width: 750rpx;
			height: 400rpx;
		}
	}
	.anchor-box {
		width: 100%;
		position: absolute;
		left: 0;
		top: 340rpx;
		display: flex;
		justify-content: center;
	}
	.anchor-buttom {
		// margin: 0 auto;
		width: 702rpx;
		height: 695rpx;
		background: #ffffff;
		border-radius: 20px;
		z-index: 9;
		.dredge-box {
			padding: 99rpx 0 0 89rpx;

			.dredge {
				padding-bottom: 55rpx;
				display: flex;
				// flex-direction: row;
				align-items: center;

				.icon {
					width: 29rpx;
					height: 35rpx;
					image {
						width: 29rpx;
						height: 35rpx;
					}
				}
				.text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					margin-bottom: 2rpx;
					padding-left: 20rpx;
				}
			}
		}
		.judge {
			.left {
				display: flex;
				align-items: center;
				padding: 100rpx 0 0 89rpx;
				margin-top: -130rpx;
				.icon {
					width: 29rpx;
					height: 35rpx;
					image {
						width: 29rpx;
						height: 35rpx;
					}
				}
				.text {
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					line-height: 114rpx;
					margin-bottom: 2rpx;
					padding-left: 20rpx;
				}
			}

			.radio {
				display: flex;
				align-items: center;
				margin-left: 32rpx;
				width: 26rpx;
				height: 25rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
		.buttom {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 60rpx;
			.apply {
				display: flex;
				justify-content: center;
				align-items: center;

				font-size: 30rpx;
				font-weight: 500;
				color: #ffffff;
				width: 560rpx;
				height: 80rpx;
				background: linear-gradient(180deg, #fd4646, #ff3535);
				border-radius: 40rpx;
			}
			.apply1 {
				display: flex;
				justify-content: center;
				align-items: center;
			
				font-size: 30rpx;
				font-weight: 500;
				color: #ffffff;
				width: 560rpx;
				height: 80rpx;
				background: #b5b5b5;
				border-radius: 40rpx;
			}
		}
	}
}
</style>