<template>
    <view class="content">
		<view class="" style="display: flex;padding: 40rpx 20rpx 0 20rpx;">
			<u-section title="精彩瞬间" :right="false" color="#303133" ></u-section>
			<text style="font-size: 24rpx;color: #ccc;margin-left: 30rpx;">MOMENT</text>
		</view>
		<image src="../../../static/img/vlog/icon/fengexian.png" mode="" style="width: 100%;height: 15rpx;"></image>
		<view class="row">
			<view class="item" v-for="(item,index) in list" :key="index">
				<image :src="item.thumbImageUrl" mode="widthFix"></image>
				<view class="bottom">
					<text class="text1">¥123</text>
					<text class="text2">¥123</text>
					<u-button class="button" size="mini" @click="payment">
						点击付费下载
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
    data() {
        return {
			list:[],//相片列表
			checkImg:"",//选中的图片
		}
    },
	onLoad(){//代替 vue 里面的 created
		this.getPhotoData()
	},
	onReady() {//代替 vue 里面的 mounted
	},
    methods: {
		payment(){//付费下载
			
		},
		getPhotoData(){//获取用户vlog图片
			this.$request("wechatUser/myPage/getVlogRecord", {
				openid: uni.getStorageSync("openid"),
				productType:1
			}).then(res => {
				if (res.code === "00") {
					this.list=res.data
				}else{
					uni.showModal({
						title: '提示',
						content: res.message,
						showCancel: false,
					})
				}
			})
		}
	}
}
</script>
<style lang="scss" scoped>
	.content{box-sizing: border-box;margin: 0 auto;background-color: #fff;height: 100%;
		.row{display: flex;width: 100%;justify-content: space-between;flex-wrap: wrap;
			.item{width: 50%;position: relative;padding: 15rpx;
				image{width: 100%;border-radius: 10rpx;}
				.bottom{font-weight: bold;align-items: center;
					.text1{font-size: 24rpx; text-decoration: line-through;color: #ccc;}
					.text2{font-size: 32rpx;color: #EE520E;margin-left: 10rpx;}
					.button{float: right;}
				}
			}
		}
	}
</style>