<template>
	<view class="plr30" v-if="istrue">
		<view class="t1 flex_between flex_items mt30 pos">
			<view class="flex_start flex_items">
				<image :src="imgUrl+'tx.png'" style="width:128rpx;height: 128rpx;"></image>
				<view class="flex_column ml30 mt10">
					<text class="f32 bold" style="color: #333">{{phone}}</text>
					<view class="mt20 f18 f-center plr20"
						style="color: #F5373A;height: 42rpx;line-height: 42rpx; background: #FFFFFF;border-radius: 21rpx;border: 1rpx solid #F5373A;">
						<text>积分:{{integral}}</text>
					</view>
				</view>
			</view>
			<view @click="goprize" class="flex_column flex_items pos" style="z-index: 1;">
				<image :src="imgUrl+'qd.png'" style="width: 42rpx;height: 58rpx;" mode=""></image>
				<view class="f-center f16"
					style="color: #fff; width: 94rpx;height: 30rpx;background: linear-gradient(180deg, #FCAA64 0%, #FD7A39 100%);border-radius: 15rpx;">
					我的奖品
				</view>
			</view>
			<image class="abs" :src="imgUrl+'gb.png'"
				style="width: 587rpx;height: 587rpx;z-index: 0;right: -166rpx;top:-122rpx;" mode=""></image>
		</view>
		<!-- t22 -->
		<view class="t22 mt50 pos plr30 ptb20 flex_column" style="z-index: 1;">
			<text class="f32 bold" style="color: #fff;">我的活动</text>
			<view class="mt20 flex_start flex_items" style="overflow-x: auto;width: 100%;">
				<view v-for="(item,index) in hotlist" :key="index" class="p20 mr20 f-center"
					style="background: #FFFFFF;border-radius: 16rpx;" @click="getp(item.id,item.active_type)">
					<image :src="item.banner" style="width: 116rpx;height: 112rpx;" mode="aspectFit"></image>
					<view class="f24 one" style="color: #F53A3A;">{{item.active_name}}</view>
				</view>
			</view>
		</view>
		<!-- t -->
		<view class="flex_column plr20 mt40"
			style="background: #FFFFFF;box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.06);border-radius: 20rpx;">
			<view class="mt40 f32 bold" style="color: #003A6E;">购买记录</view>
			<view v-if="list.length!=0" class="pos" style="z-index: 1;">
				<view v-for="(item,index) in list" :key="index" class="flex_between flex_items mt30 pb30 bbe9s mt30">
					<view class="flex_start">
						<image :src="imgUrl+'tu.png'" style="width: 108rpx;height: 108rpx;border: 12rpx;" mode="">
						</image>
						<view class="flex_column ml30" style="height:108rpx;">
							<view class="f28 three" style="color: #1a1a1a;width:360rpx;">{{item.product_name}}</view>
							<view class="flex_start flex_items">
								<view class="mt20 flex_start f22 ml10" style="width:320rpx;">
									<text>{{item.create_time}}</text>
									<text style="color: #FE714D;">-{{item.integral}}积分</text>
								</view>
								<view class="flex_center flex_items mt10"
									style="width: 134rpx;height:54rpx;background:linear-gradient(270deg, #F43139 0%, #FF9843 100%);;border-radius: 316rpx;margin-left:40rpx;"
									@click="goorder(item.product_id)">
									<text class="f24" style="color: #FFF;">查看详情</text>
								</view>
							</view>

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

			<view v-else class="flex_center flex_items f24" style="color: #888;height:600rpx;width: 100%;">
				<text>--暂无数据--</text>
			</view>
		</view>
		<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				istrue: false,
				integral: "",
				form: {
					page: 1,
					pageSize: 10
				},
				phone: "",
				list: [],
				hotlist: [],
				imgUrl: ""
			}
		},
		onLoad() {
			this.imgUrl = this.api.imgUrl
			this.getData()
		},
		methods: {
			getData() {
				uni.showLoading({
					title: "加载中..."
				})
				this.api.myself(this.form).then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						//数据请求完成之后停止下拉刷新
						uni.stopPullDownRefresh();
						// if (res.data.data.integral > 9999) {
						// 	this.integral = (Number(res.data.data.integral) / 10000) + "万"
						// } else {
						// 	this.integral = res.data.data.integral
						// }
						this.integral = res.data.data.integral
						this.phone = res.data.data.phone
						if (this.phone != null) {
							this.phone = this.phone.substr(0, 3) + '****' + this.phone.substr(7)
						}
						if (res.data.data.list.data.length == 0) {
							uni.showToast({
								title: "暂无数据",
								icon: "none"
							})
							this.istrue = true
							return false
						}
						for (let i = 0; i < res.data.data.list.data.length; i++) {
							this.list.push(res.data.data.list.data[i])
						}
						this.getactive()
					} else {
						uni.hideLoading()
						uni.showToast({
							icon: "none",
							title: res.data.message
						})
					}
				})
			},
			getactive() {
				this.api.getactivit({
					page: 1,
					pageSize: 1000
				}).then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						//数据请求完成之后停止下拉刷新
						uni.stopPullDownRefresh();
						uni.hideLoading()
						this.hotlist = res.data.data.data
					} else {
						uni.hideLoading()
						uni.showToast({
							icon: "none",
							title: res.data.message
						})
					}
					this.istrue = true
				})
			},
			getp(id, types) {
				if (types == 2) {
					uni.navigateTo({
						url: "/pages/turntable/index?id=" + id
					})
				} else if (types == 3) {
					uni.navigateTo({
						url: "/pages/scap/scratch?id=" + id
					})
				} else if (types == 5) {
					uni.navigateTo({
						url: "/pages/around/index?id=" + id
					})
				} else if (types == 6) {
					uni.navigateTo({
						url: "/pages/answer/index?id=" + id
					})
				} else {}

			},
			goorder(id) {
				uni.switchTab({
					url: "/pages/order/index"
					// url: "/pages/product/detail?id="+id
				})
			},
			goprize() {
				uni.navigateTo({
					url: "/pages/my/prizes"
				})
			}
		},
		onReachBottom() {
			uni.showLoading({
				title: "加载中..."
			})
			this.form.page += 1
			this.getData()
		},
		onPullDownRefresh() {
			this.form.page = 1
			this.list = []
			this.getData()
		}
	}
</script>

<style>
	.three {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	page {
		background: linear-gradient(180deg, #FFE4E4 0%, rgba(216, 216, 216, 0) 100%) !important;
	}

	.t22 {
		background-image: url('https://mtweb.86698.cn/static/images/t2bb.png');
		background-size: 100% 100%;
		width: calc(100% - 60rpx);
		height: 276rpx;
	}

	.one {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		width: 115rpx;
	}

	/*隐藏滚动条*/
	::-webkit-scrollbar {
		width: 0 !important;
		height: 0 !important;
	}
</style>