video_mini/components/fanxiao-sign/sigin-in.vue

<template>
	<view style="position: relative;">
		<view class="sign_conent_box">
			<view class="sign_conent">
				<view class="sign_conent_title">
					<text class="zitiyangshi">你已连续签到</text>
					<span class="sign_conent_title_span zitiyangshi">{{qdjl}}</span>
					<text class="zitiyangshi">天</text>
				</view>
				<view class="ft12 mt10" style="color: #999;">签到领金豆，新剧抢先看。连续签到7天领惊喜礼包</view>
				<view class="sign_list_aligns"
					style="background-color: #fff;padding: 30rpx;margin-top: 48rpx;border-radius: 10rpx;">
					<scroll-view class="scroll-view_H" scroll-x="true" show-scrollbar='false'>
						<view class="scroll_view_items" v-for="(item, index) in sign_list" :key="index">
							<!--  -->
							<view class="scroll_view_itemsv">
								<view class="scroll_view_item">
									<view class="scroll_view_item_img_box">
										<view v-if="item.xz==2"
											style="width: 80rpx;height: 104rpx;background: linear-gradient(360deg, #64C700 0%, #85ED1C 100%);text-align: center;border-radius: 8rpx;">
											<image src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/jindou.png"
												style="width: 54rpx;height: 56rpx;margin-top: 10rpx;"></image>
											<view
												style="color: #fff;font-size: 30rpx;position: absolute;top: 56rpx;left: 10rpx;">
												+{{item.beans}}</view>
										</view>
										<!-- <image v-if="item.xz==2" :src="statics.xuanzhong" class="scroll_view_item_img" mode=""></image> -->
										<!-- <image v-if="item.xz==1" :src="statics.yuanq" class="scroll_view_item_img" mode=""></image> -->
										<!-- <view v-if="item.xz==1" class="scroll_view_item_top">{{ item.discount }}</view> -->
										<view v-if="item.xz==1"
											style="width: 80rpx;height: 104rpx;background-color: #F4F4F4;text-align: center;border-radius: 8rpx;">
                      <image src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/jindou.png"
												style="width: 54rpx;height: 56rpx;margin-top: 10rpx;"></image>
											<view
												style="color: #999999;font-size: 30rpx;position: absolute;top: 56rpx;left: 10rpx;">
												+{{item.beans}}</view>
										</view>
									</view>
									<view class="scroll_view_item_tips" style="margin-top: 60rpx;">{{ item.day }}</view>

								</view>

							</view>
						</view>
					</scroll-view>

					<view class="sign_conent_btn" style="margin-top: 20rpx;" @click="cksigin()">今日签到</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			sign_list: {},
			qdjl: 0,
			tdsy: 0,
		},
		data() {
			return {

			};
		},
		methods: {
			cksigin() {
				if (uni.getStorageSync("userinfo")) {
					let this_ = this
          this_.$httpRequest({
            url:"/api/user/qingdao",
            method:"GET",
            data:{
              tdsy: this_.tdsy
            }
          }).then(res=>{
            uni.showModal({
              title: '温馨提示',
              content: res.msg,
              showCancel: false,
              success: modelRes => {
                if (res.code == 1) {
                  this_.$emit('cksigin')
                }
              }
            });
          }).catch(err=>{
            console.log(err)
          })
				} else {
					uni.showModal({
						title: '温馨提示',
						content: '请先登录',
						showCancel: true,
						confirmText: "登录",
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							} else if (res.cancel) {
								//uni.navigateBack();						
							}
						}
					});
				}
			},
		}
	};
</script>

<style lang="scss">
	// @font-face {
	// 	font-family: "MyFont";
	
	// }

	.zitiyangshi {
		font-family: 'MyFont';
		font-size: 36rpx;
	}

	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}

	uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}

	.sign_conent_box {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 30upx;

		.sign_conent {
			width: 686upx;
			// background: white;
			// border-radius: 20upx;
			padding: 0upx 0upx;
			box-sizing: border-box;

			.sign_conent_title {
				width: 100%;
				font-size: 36upx;
				font-weight: bold;
				color: #333333;

				.sign_conent_title_span {
					color: #64C700 !important;
					font-size: 48rpx;
					margin-left: 12rpx;
					margin-right: 12rpx;
				}
			}

			.sign_list_aligns {
				width: 100%;
				padding: 30upx 0 30upx 0;
				box-sizing: border-box;

				.scroll-view_H {
					width: 100%;
					display: flex;
					white-space: nowrap;

					.scroll_view_items {
						display: inline-block;
					}

					.scroll_view_itemsv {
						display: flex;
					}

					.scroll_view_item {
						.scroll_view_item_img_box {
							width: 100upx;
							height: 30upx;
							position: relative;

							.scroll_view_item_top {
								font-size: 24upx;
								color: #bfbfbf;
								// font-weight: bold;
								position: absolute;
								top: 14upx;
								width: 100%;
								text-align: center;
								z-index: 1;
							}

							.scroll_view_item_bottom {
								font-size: 12upx;
								color: #ffe29d;
								position: absolute;
								bottom: 18upx;
								left: 42upx;
								z-index: 2;
							}
						}

						.scroll_view_item_tips {
							width: 60upx;
							text-align: center;
							font-size: 24upx;
							padding-top: 40upx;
							color: #333333;
						}

						.scroll_view_item_img {
							width: 60upx;
							height: 60upx;
							position: absolute;
							top: 0;
							left: 0;
							z-index: 0;
						}
					}

					.scroll_xian {
						width: 40upx;
						height: 4upx;
						background: #bfbfbf;
						margin-top: 30upx;
					}
				}
			}

			.sign_conent_btn {
				width: 100%;
				border-radius: 45upx;
				background: linear-gradient(#ACFD28 0%, #0AD89D 100%);
				color: #ffffff;
				text-align: center;
				padding: 22upx 0;
				font-size: 32upx;
			}
		}
	}
</style>