bnyer-cloud-hub/pages/index/index.vue

<template>
	<view class="container">
		<view class="top">
			<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
						 field="content">
						<swiper class="swiper-box" @change="change" :current="swiperDotIndex" :autoplay="autoplay" 
						:interval="interval" :duration="duration">
							<swiper-item v-for="(item, index) in 3" :key="index">
								<view class="swiper-item" :class="'swiper-item' + index">
									<text style="color: #fff; font-size: 32px;">{{index+1}}</text>
								</view>
							</swiper-item>
						</swiper>
			</uni-swiper-dot>
		</view>
		<view class="middle">
			素材管理、上传图片
		</view>
		<view class="foot">
			表格展示艺术家上传的图片数据
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [{
					content: '内容 A'
				}, {
					content: '内容 B'
				}, {
					content: '内容 C'
				}],
				current: 0,
				mode: 'nav',
				swiperDotIndex: 0,
				autoplay: true,
                interval: 5000,
				duration: 500
			};
		},
		methods:{
			change(e) {
				this.current = e.detail.current;
				//console.log('this.current',this.current)
			},
			clickItem(e) {
				this.swiperDotIndex = e
				console.log('this.swiperDotIndex',this.swiperDotIndex)
			},
			// 获取用户信息
			getUserInfo() {
				wx.login({
					force: true,
					success: res => {
						wx.getUserInfo({
							withCredentials: true,
							success: userInfo => {
								const params = {
									code: res.code,
									encryptedData: userInfo.encryptedData,
									iv: userInfo.iv
								}
								// 用户授权登录
								console.log('params',params);
								loginWx(params).then(res => {
									if (res.data.code === 200) {
										uni.setStorage({
											key: 'userInfo',
											data: res.data.data.userInfo, 
										})
									} else {
										uni.showToast({
											title: res.data.msg,
											icon: 'none'
										})
									}
								}).catch(res => {})
								console.log(`getUserInfo 调用成功`, userInfo);
							},
							fail(userInfo) {
								console.log(`getUserInfo 调用失败`);
							},
						});
					},
					fail(res) {
						console.log(`login 调用失败`);
					},
				});
			
			},
		}
	}
</script>

<style lang="scss">
// .container {
// 		.top {
// 			width: 100vw;

// 			image {
// 				width: 100vw;
// 				height: 400rpx;
// 			}

// 			.uni-searchbar {
// 				border: 1px solid #11A8FD;
// 				margin: 0 40rpx;
// 				border-radius: 16rpx;
// 				padding: 0;

// 				.uni-searchbar__box {
// 					padding: 0;
// 					border-radius: 16rpx !important;
// 				}
// 			}

// 			>text {
// 				font-weight: bold;
// 				font-size: 14px;
// 				display: block;
// 				text-align: center;
// 				padding-top: 40rpx;
// 				padding-bottom: 20rpx;
// 			}

// 			.user-list {
// 				display: flex;
// 				justify-content: flex-start;
// 				align-items: center;
// 				overflow-x: auto;

// 				.user-list-box {
// 					width: 140rpx;
// 					padding: 20rpx;
// 					text-align: center;

// 					image {
// 						width: 100rpx;
// 						height: 100rpx;
// 						border-radius: 100rpx;
// 					}

// 					text {
// 						font-size: 24rpx;
// 						color: #1E1E1E;
// 						text-align: center;
// 					}
// 				}
// 			}
// 		}

// 		.middle {
// 			text-align: center;
// 			height: calc(100vh - 248rpx);
// 			padding-top: 40rpx;

// 			text {
// 				font-weight: bold;
// 				font-size: 14px;
// 				display: block;
// 			}

// 			image {
// 				width: 40rpx;
// 				height: 40rpx;
// 			}
// 		}
// 	}
.middle{
	margin-top: 100px;
}

.foot{
	margin-top: 100px;
}

.swiper-box {
		height: 180px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #fff;
	}

	.swiper-item0 {
		background-color: #cee1fd;
	}

	.swiper-item1 {
		background-color: #b2cef7;
	}

	.swiper-item2 {
		background-color: #cee1fd;
	}

	.image {
		width: 750rpx;
	}

	/* #ifndef APP-NVUE */
	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	/* #endif */

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.uni-bg-blue {
		background-color: #007aff;
	}

	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}
</style>