tourism/uni_merchants_enter/pages/enter/enter.vue

<template>
	<view>
		<view>
			<u-swiper :list="fileList"
			autoplay
			imgMode='aspectFit'
			height='200'
			radius='0'
			:circular="true"
			@change="e => current = e.current" @click="click">
				<view slot="indicator" class="indicator">
					<view
			            class="indicator__dot"
			            v-for="(item, index) in fileList"
			            :key="index"
			            :class="[index === current && 'indicator__dot--active']">
			        </view>
				</view>
			</u-swiper>
		</view>
		<view>
			 <luyj-grid-link :list="list" @gridExc="clickGrid"></luyj-grid-link>
			 <u-modal :show="showAuthorizePhone" :showConfirmButton="false">
			 	<view class="slot-content">
			 		<view class="auth-card">
			 			<view class="img">
			 				<img class="avatar-img" src="@/static/image/logo.png" mode="widthFix">
			 			</view>
			 			<view class="content">手机登录后才能查看名片哦~</view>
			 		</view>
			 		<view class="auth-btncard">
			 			<view class="btn-unok">
			 				<u-button :customStyle="customStyleUnOk" @click="showAuthorizePhone=false" :plain="true">
			 					拒绝</u-button>
			 			</view>
			 			<view class="btn-ok">
			 				<u-button :customStyle="customStyleOk" open-type="getPhoneNumber"
			 					@getphonenumber="getPhoneNumber"> 立即登录</u-button>
			 			</view>
			 		</view>
			 	</view>
			 </u-modal>
			<u-modal :show="showAuthorizeUser" :showConfirmButton="false">
				<view class="slot-content">
					<view class="auth-card">
						<view class="img">
							<img class="avatar-img" src="/static/image/logo.png" mode="widthFix">
						</view>
						<view class="content">邀请您补全个人信息<br></br>（昵称、头像）</view>
						<view style="margin-left: 100rpx;margin-right: 100rpx">
							<u-form :model="userInfo" ref="uForm">
								<u-form-item label="头像">
									<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
										slot="right">
										<image class="avatar"
											:src="userInfo.head?userInfo.head:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'">
										</image>
									</button>
								</u-form-item>
								<u-form-item label="昵称">
									<u-input inputAlign='right' v-model="userInfo.nickname" class="weui-input"
										@blur="userNameInput" placeholder="请输入昵称" border="false" />
									<!-- <input type="nickname" :value="userInfo.nickname" class="weui-input" @blur="userNameInput" placeholder="请输入昵称"/> -->
								</u-form-item>
							</u-form>
						</view>
					</view>
					<view class="auth-btncard">
						<view class="btn-unok"><u-button :customStyle="customStyleUnOk" @click="authUser(0)">
								拒绝</u-button>
						</view>
						<view class="btn-ok">
							<u-button :customStyle="customStyleOk" @click="authUser(1)"> 允许</u-button>
						</view>
					</view>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	var that
	import luyjGridLink from '@/uni_modules/lxm-fold-link/luyj-grid-link/components/luyj-grid-link/luyj-grid-link.vue'
	export default {
		components: {
			"luyjGridLink": luyjGridLink
		},
		data() {
			return {
				fileList:[],
				showAuthorizePhone:false,
				showAuthorizeUser:false,
				userInfo: {
					head: '',
					nickname: '',
					phone: '',
				},
				customStyleUnOk: {
					marginTop: '20rpx',
					color: '#5F7DE9',
					border: '2px solid #5F7DE9',
					"border-radius": "10px",
					fontSize: "32rpx"
				},
				customStyleOk: {
					marginTop: '20rpx',
					color: '#fff',
					border: '2px solid #5F7DE9',
					"border-radius": "10px",
					fontSize: "32rpx",
					background: "#5F7DE9"
				},
				list: [
					{
				        title: '全部分类',
				        // cur: 'basic',
				        bgColor: '', // 背景颜色
				        color: 'blue',
				        title_show: true,
				        showAll: false,
				        colNumber: 4, // 显示的列数
				        iconsList: [
							{
								cuIcon: '1_canyin-35',
								color: 'blue',
								name: '餐饮',
								url: '/pageA/enter/cateringindustry'
							},
							{
								cuIcon: 'zufang',
								color: 'blue',
								name: '民宿',
								url: '/pageA/enter/homestay'
							},
							{
				                cuIcon: 'jiudian-38',
				                color: 'blue',
				                name: '酒店',
				                 url: '/pageA/enter/hotel'
				            }
				        ]
				    },
					{
						title: '我的入驻',
						// cur: 'basic',
						bgColor: '', // 背景颜色
						color: 'blue',
						title_show: true,
						showAll: false,
						colNumber: 4, // 显示的列数
						iconsList: [
							{
								cuIcon: '1_canyin-35',
								color: 'blue',
								name: '餐饮',
								url: '/pageA/enter/myCateringdustry/index'
							},
							{
								cuIcon: 'zufang',
								color: 'blue',
								name: '民宿',
								url: '/pageA/enter/myHomestay/index'
							},
							{
						        cuIcon: 'jiudian-38',
						        color: 'blue',
						        name: '酒店',
						         url: '/pageA/enter/hotel'
						    }
						]
						},
				    ], 
			}
		},
		onLoad(){
			that = this
			this.getList()
		},
		onShow: function() {
			let _isLoad = uni.getStorageSync("scanAddCardToIndex")
			if (uni.getStorageSync("userInfo").phone) {
				// that.$request.baseRequest('admin.unimall.cardNewsInfo', 'list', {
				// 	receiveId: uni.getStorageSync("userInfo").id,
				// }, failres => {
				// 	console.log('res+++++', failres.errmsg)
				// 	that.$refs.uToast.show({
				// 		type: 'error',
				// 		message: failres.errmsg,
				// 	})
				// }).then(res => {
				// 	that.noticeList = res.data.items
				// 	if (that.noticeList.length > 0) {
				// 		var data = that.noticeList.filter((item) => {
				// 			return item.newsFlag == 0
				// 		})
				// 		that.unread = data ? data.length : 0
				// 	}
				// 	console.log(that.unread)
				// })
			} else {
				this.showAuthorizePhone = true
			}
		
		},
		methods: {
			getList(){
				 this.$request.baseRequest('admin.tourism.carouselManagement', 'list', {
					page: 1,
					limit: 9999,
					classify:'商家版首页'
				 }, failres => {
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});	
				 }).then(res => {
					this.fileList=res.data.items
				 })
			},
			toDetail(url){
				uni.navigateTo({
					url:url
				})
			},
			async getPhoneNumber(e) {
				that.userInfo = await this.$request.wxlogin()
				that.userInfo.phone = await this.$request.getPhone(e, that.userInfo)
				this.showAuthorizePhone = false
				this.showAuthorizeUser = true
			
			},
			async authUser(type) {
				//同步信息，没有头像和昵称自动生成
				this.userInfo = await this.$request.syncInfo(this.userInfo)
				if (this.userInfo.openId) {
					uni.setStorageSync("userInfo", that.userInfo)
					that.showAuthorizeUser = false
					// that.mescroll.resetUpScroll()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.slot-content {
		width: 100%;
	}



	/deep/.u-checkbox-group {

		position: absolute;
		right: 20px;
		z-index: 99;
		top: 30px;
	}

	/deep/.u-checkbox__icon-wrap.u-checkbox__icon-wrap--square {
		border-color: #D7DEEB !important;
	}



	/deep/.mescroll-body {
		min-height: 558px !important;
		height: 558px !important;
		background-color: green;
		overflow: scroll !important;
	}

	.auth-btncard {
		display: flex !important;
		justify-content: space-between !important;

		.btn-unok {
			width: 40%;
		}

		.btn-ok {
			width: 40%;
		}
	}

	.auth-card {
		text-align: center;

		.avatar-img {
			width: 250rpx;
		}

		.title {
			font-size: 20rpx;
		}

		.content {
			font-size: 32rpx;
			font-weight: bold;
			color: #1A1A1A;
			margin-bottom: 30rpx;
		}
	}

	.avatar-wrapper {
		color: #333 !important;
		border: none !important;
		border-radius: 0 !important;
		background-color: transparent !important;
		padding: 0;
	}

	.avatar-wrapper::after {
		border: none !important;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		overflow: hidden;
		border-radius: 100%;
	}

	/deep/.u-popup__content {
		border-radius: 20rpx !important;
	}
</style>