<template>
	<view class="content plr30 home" v-if="istrue">
		<view class="flex_center flex_items mt30">
			<view class="search flex_start flex_items plr10 ptb15">
				<image :src="imgUrl+'search.png'" style="width: 32rpx;height: 32rpx;" mode=""></image>
				<input class="uni-input pl10 f26" confirm-type="search" placeholder="搜索" v-model="form.keywords"
					@confirm="doSearch" style="width:100%;" />
			</view>
			<!-- <view class="flex_column flex_items ml35" style="color: #414141;" @click="gomyfen">
				<image :src="imgUrl+'jf.png'" style="width: 40rpx;height: 40rpx" mode=""></image>
				<text class="f18" style="margin-top: -5rpx;">我的积分</text>
			</view>
			<view class="flex_column flex_items ml20" style="color: #414141;" @click="gomyorder">
				<image :src="imgUrl+'dd.png'" style="width: 40rpx;height: 40rpx" mode=""></image>
				<text class="f18" style="margin-top: -5rpx;">我的订单</text>
			</view> -->
		</view>
		<!-- t2 -->
		<view class="mt30">
			<swiper indicator-dots autoplay interval="5000" duration="500">
				<swiper-item v-for="(item,index) in banners" :key="index">
					<image :src="item.url" style="width: 100%;height:454rpx;" mode="aspectFit"
						@click="goout(item.target_url)"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- t3 -->
		<view class="t3 mt30 p30">
			<view class="flex_between flex_items">
				<text class="f32" style="color: #003A6E;">花积分</text>
				<text class="f24" style="color: #999" @click="goexchange('0')">更多</text>
			</view>
			<view v-if="hotproducts.length!=0" class="flex_start flex_items mt30">
				<view class="pl30 pt35 flex_column vhy mt30" style="border-radius: 20rpx 0rpx 0rpx 0rpx;">
					<view class="f30 bold" style="color: #fff;">{{hotproducts[0].name}}</view>
					<!-- <view class="mt10 f24" style="color: #FFE2E2;">省时省力/放松身心</view> -->
					<view @click="goexchange('0')" class="mt80 flex_items flex_center ml10"
						style="width: calc(100% - 40rpx);height:64rpx;background: linear-gradient(180deg, #FFFFFF 0%, #FFBFAC 100%);border-radius: 32rpx;">
						<text class="f28" style="color: #FD6F30;">立即查看</text>
					</view>
				</view>
				<view class="ml20 vqt">
					<view class="flex_start flex_items pb10 plr10 pt20"
						style="background: #FFEDEA;border-radius: 20rpx 20rpx 0 0;border-bottom: 1px solid #FAD5D5;">
						<image class="" :src="imgUrl+'yphy.png'" style="height:124rpx;width:144rpx;" mode=""></image>
						<view class="flex_column" @click="goexchange('1')">
							<view class="f30 bold flex_start flex_items" style="color: #003A6E;">
								<text>{{hotproducts[1].name}}</text>
								<image :src="imgUrl+'xjt.png'" class="ml10" style="width: 10rpx;" mode="widthFix">
								</image>
							</view>
							<!-- <view class="mt10 f24" style="color: #A6A6A6;">随时随地听音乐</view> -->
						</view>
					</view>
					<view v-if="hotproducts.length!=0" class="flex_start flex_items pt10 plr10"
						style="background: #FFEDEA;border-radius: 0 0 20rpx 20rpx;">
						<image class="" :src="imgUrl+'mssh.png'" style="height:124rpx;width:144rpx;" mode=""></image>
						<view class="flex_column" @click="goexchange('2')">
							<view class="f30 bold flex_start flex_items" style="color: #003A6E;">
								<text>{{hotproducts[2].name}}</text>
								<image :src="imgUrl+'xjt.png'" class="ml10" style="width: 10rpx;" mode="widthFix">
								</image>
							</view>
							<!-- <view class="mt10 f24" style="color: #A6A6A6;">随时分享美食</view> -->
						</view>
					</view>
				</view>
			</view>
			<view v-else class="flex_center flex_items f24" style="color: #888;height:240rpx;width: 100%;">
				<text>--暂无数据--</text>
			</view>
			<!-- 商品列表 -->
			<view class="p30 mt30"
				style="width:calc(100% - 60rpx);background: linear-gradient(180deg, #FDE8E5 0%, rgba(255,255,255,0) 100%);border-radius: 28rpx;">
				<!-- 		<view class="flex_around flex_items">
					<view v-for="(item,index) in mlist" :key="index">
						<view :class="[index==whoindex?'chosethis':'nochossethis']" @click="chosewho(index)">
							<text v-if="item.max_price_desc!='以上'" class="f30"
								style="">{{item.min_price_desc}}-{{item.max_price_desc}}分</text>
							<text v-else class="f30">{{item.min_price_desc}}分以上</text>
						</view>
					</view>
				</view> -->
				<view class="mt20">
					<view v-if="goodlist.length!=0" class="flex_start flex_items"
						style="width:100%;overflow-x: auto;height:260rpx;overflow-y: hidden;">
						<view v-for="(item,index) in goodlist" :key="index" class="flex_column flex_items mr30">
							<view class="sk flex_items flex_center" @click="godetail(item.id)">
								<image :src="item.main_image" style="width: 128rpx;height: 114rpx;" mode="aspectFit">
								</image>
							</view>
							<view class="f26 mt10 one f-center" style="color: #333">{{item.name}}</view>
							<view class="mt10 f24 f-center" style="color: #FA5D5E;">{{item.price}}积分</view>
						</view>
					</view>
					<view v-else class="flex_center flex_items f24" style="color: #888;height:240rpx;width: 100%;">
						<text>--暂无数据--</text>
					</view>
				</view>
			</view>
		</view>
		<!-- t4 -->
		<view class="mt30 p30 t3">
			<view class="flex_between flex_items">
				<text class="f32" style="color: #003A6E;">热门活动</text>
				<text class="f24" style="color: #999" @click="moreac">更多</text>
			</view>
			<view v-if="hotActivity.length!=0" class="flex_column flex_items">
				<view v-for="(item,index) in hotActivity" :key="index" class="mt30 pb30 bbe9s" style="width: 100%;">
					<view class="flex_between flex_items" style="width: 100%;">
						<view class="flex_start flex_items">
							<image :src="item.banner" style="width: 72rpx;height: 72rpx;border-radius: 50%;" mode="">
							</image>
							<view class="flex_column ml20">
								<text class="f30" style="color: #333;">{{item.active_name}}</text>
								<text v-if="item.rule" class="f24 mt10"
									style="color: #898989;">{{item.rule.rate}}</text>
							</view>
						</view>
						<view @click="getp(item.id,item.active_type,item.product_id)" class="flex_items flex_center"
							style="width: 144rpx;height: 48rpx;background: linear-gradient(90deg, #FF898E 0%, #F43139 100%);;box-shadow: 0rpx 4rpx 12rpx 0rpx #FFC79F;border-radius: 24rpx">
							<text class="f24" style="color: #fff;">立即参与</text>
						</view>
					</view>
					<u-line-progress class="mt20" :percentage="item.process_rate" inactiveColor="#F8DDC5"
						activeColor="#F9535A"></u-line-progress>
				</view>
			</view>
			<view v-else class="flex_center flex_items f24" style="color: #888;height:600rpx;width: 100%;">
				<text>--暂无数据--</text>
			</view>
		</view>
		<view style="width: 100%;height: 30rpx;"></view>
		<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				istrue: false,
				imgUrl: "",
				form: {
					keywords: ""
				},
				activits2: [{
						m1: '18.8',
						tt: '优酷年卡+酷狗豪华年卡',
						jf: '1500',
						z: 5
					},
					{
						m1: '18.8',
						tt: '优酷年卡+酷狗豪华年卡',
						jf: '1500',
						z: 5
					},
				],
				// daos: [{
				// 	tt: "机场贵宾",
				// 	img: require('@/static/fj.png'),
				// 	jf: 30
				// }, {
				// 	tt: "代驾",
				// 	img: require('@/static/dj.png'),
				// 	jf: 30
				// }, {
				// 	tt: "QQ会员",
				// 	img: require('@/static/qq.png'),
				// 	jf: 30
				// }, {
				// 	tt: "盒马",
				// 	img: require('@/static/hm.png'),
				// 	jf: 30
				// }, {
				// 	tt: "立减金",
				// 	img: require('@/static/ljj.png'),
				// 	jf: 30
				// }, ],
				mlist: [],
				whop: {
					min_price: "",
					max_price: "",
					page: 1,
					pageSize: 1100
				},
				whoindex: 0,
				goodlist: [],
				banners: [],
				hotActivity: [],
				hotProduct: [],
				hotproducts: []
			}
		},
		onLoad() {
			this.imgUrl = this.api.imgUrl
			this.gettoken()
		},
		methods: {
			gettoken() {
				uni.showLoading({
					title: "加载中..."
				})
				this.api.login({
					account: "testq12",
					password: '123456'
				}).then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						uni.setStorageSync("token", res.data.data.authtoken)
						uni.setStorageSync("phone", res.data.data.phone)
						uni.setStorageSync('uu', res.data.data.id)
						this.getdata()
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			getdata() {
				this.api.homedata().then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						if (res.data.data.hotActivity.length != 0) {
							res.data.data.hotActivity.forEach((item, index) => {
								item.rule = JSON.parse(item.rule)
							});
						}
						this.banners = res.data.data.banner
						this.hotActivity = res.data.data.hotActivity
						this.hotproducts = res.data.data.product1
						this.goodlist = res.data.data.hotProduct
						this.istrue = true
						uni.hideLoading()
					} else {
						uni.showToast({
							icon: "error",
							title: res.data.message
						})
					}
				})
			},
			getremtag() {
				this.api.getremmedtag().then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						this.mlist = res.data.data
						this.whop.min_price = res.data.data[0].min_price
						this.whop.max_price = res.data.data[0].max_price
						// this.gethotpro()
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			gethotpro() {
				this.api.gethotproduct(this.whop).then((res) => {
					if (res.data.code == 200) {
						this.goodlist = res.data.data.data
						this.istrue = true
						uni.hideLoading()
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			doSearch() {
				if (this.form.keywords == "") {
					uni.showToast({
						title: "请输入搜索内容",
						icon: "none"
					})
					return false
				}
				uni.navigateTo({
					url: "/pages/exchange/index?keywords=" + this.form.keywords
				})
			},
			watchgo() {
				uni.showToast({
					title: "配置中,敬请期待",
					icon: "none"
				})
			},
			goexchange(types) {
				uni.navigateTo({
					url: "/pages/exchange/index?keyindex=" + types
				})
			},
			gomyfen() {
				uni.navigateTo({
					url: "/pages/my/index"
				})
			},
			gomyorder() {
				uni.navigateTo({
					url: "/pages/order/index"
				})
			},
			moreac() {
				uni.navigateTo({
					url: "/pages/activity/index"
				})
			},
			godetail(id) {
				uni.navigateTo({
					url: "/pages/product/detail?id=" + id
				})
			},
			goout(url) {
				uni.navigateTo({
					url: "/pages/outline/index?src=" + url
				})
				// var href = url
				// window.open(href, '_self')
			},
			getp(id, types, pid) {
				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 if (types == 1) {
					uni.navigateTo({
						url: "/pages/product/detail?id=" + pid
					})
				} else {}

			},
			chosewho(index) {
				this.whoindex = index
				this.whop.min_price = this.mlist[index].min_price
				if (this.mlist[index].max_price_desc != '以上') {
					this.whop.max_price = this.mlist[index].max_price
				} else {
					this.whop.max_price = ""
				}
				uni.showLoading({
					title: "加载中...",
				})
				this.gethotpro()
			}
		},
		onShareAppMessage() {
			return {
				title: '浦发积分商城',
				path: "/pages/index/index"
			}
		},
		onShareTimeline() {
			return {
				title: '浦发积分商城',
				path: "/pages/index/index"
			}
		}
	}
</script>

<style>
	page {
		background: #f5f5f5 !important;
	}

	.search {
		width: 100%;
		border-radius: 46rpx;
		opacity: 1;
		border: 1rpx solid #D3D3D3;
	}

	.t3 {
		/* background: linear-gradient(180deg, #FFF8EF 0%, #FFFFFF 100%); */
		background: #fff;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 28rpx;
		font-family: PingFang SC-粗体, PingFang SC;
		font-weight: normal;
	}

	.dui {
		/* width: 198rpx; */
		height: 226rpx;
		background: #FFEFDA;
		border-radius: 12rpx;
	}

	.z5 {
		height: 260rpx;
		width: 100%;
		position: relative;
	}

	.z4 {
		height: 192rpx;
		width: 48%;
		position: relative;
	}

	.sk {
		background-image: url('https://pfapi.86698.cn/static/images/sk.png');
		background-size: 100% 100%;
		width: 174rpx;
		height: 174rpx;
	}

	.vhy {
		background-image: url('https://pfapi.86698.cn/static/images/video.png');
		background-size: 100% 100%;
		width: 48%;
		height: 248rpx;
	}

	.vqt {
		width: 56%;
		height: 248rpx;
	}

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

	.chosethis {
		font-weight: bold;
		color: #003A6E;
	}

	.nochossethis {
		color: #9d9d9d;
		font-weight: lighter;
	}

	.home swiper {
		height: 454rpx !important;
	}
</style>