h5mall_uniapp/pages/index/finance.vue

<template>
	<s-layout title="Cash back" :bgStyle="{ color: '#fff' }">
		<fill-form :id="id" :days="days" :platform="platform" :task_step="task_step" @submit="onSubmit()" v-if="state===1"></fill-form>
		<view class="main" v-if="state===0">
			<!-- <h3>Cash back</h3> -->
			<view class="top">
				<image mode="widthFix" src="/static/fin_top.png"></image>
			</view>
			<view class="middle">
				<!-- <view class="notice">
					<view class="notice-content">
						<image src="/static/8.png"></image>
						<text>The user successfully obtained <text>888</text> cashback</text>
					</view>
				</view> -->
				<view class="product">
					<view class="product-item" v-for="(item,idx) in products" @tap="goDays(item)">
						<view class="product-item-bg">

						</view>
						<view class="item-one">
							<view class="left">
								<p>
									<strong>{{item.day}}</strong>
									<text>Days</text>
								</p>
								<p>
									<span>{{item.requirement}}</span>
								</p>
							</view>
							<view class="right">
								<image :src="'http://8.217.120.52:882'+item.platform_image"></image>
							</view>
						</view>
						<view class="item-two">
							<text>{{item.platform}}</text>
						</view>

					</view>
				</view>
				<!-- <view class="tips">
					<view class="tips-content">
						<image src="/static/8.png"></image>
						<text>Special statement: Here is the content</text>
					</view>
				</view> -->
			</view>
			<!-- <view class="mask" v-if="maskVisible"></view>
			<view class="popDialog" v-if="popDialogVisible">
				<image @tap="popDialogVisible=false;maskVisible=false" class="close" src="/static/10.png"></image>
				<view class="title">
					<text>Successfully</text>
				</view>
				<view class="img">
					<image src="/static/6.png"></image>
				</view>
				<view class="progress">
					<image src="/static/9.png"></image>
				</view>
				<view class="tips">
					<view class="tips-content">
						<image src="/static/8.png"></image>
						<text>Special statement: Here is the content</text>
					</view>
				</view>
			</view> -->
			
			<view class="index-icon-list">
				<view class="index-icon-btn">
					<view class="icon" @click="goCashBackList()">
						<image src="/static/6.png" class="index-icon"></image>
					</view>
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script>
	export default {
		data() {
			return {
				popDialogVisible: false,
				maskVisible: false,
				showForm: false,
				state: 0,
				id: 0,
				days: 0,
				platform: '',
				products: [30, 15, 7, 5]
			}
		},
		onShow() {
			this.state = 0;
			this.getTaskList();
		},
		methods: {
			goDays(item) {
				this.id = item.id;
				this.days = item.day;
				this.task_step = item.task_step;
				this.platform = item.platform;
				this.state = 1;
			},
			onSubmit() {
				this.state = 0;
				sheep.$router.go('/pages/index/cash-back-list');
			},
			async getTaskList(){
				const res = await sheep.$api.task.list({});
				console.log(res)
				if(res.code == 1){
					this.products = res.data;
				}else{
					this.products = [];
				}
				
			},
			getImgUrl(n) {
				return `../../static/${n+2}.png`
			}
		}
	}
</script>
<script setup>
	import sheep from '@/sheep';
	import fillForm from './components/fill-form.vue'
	import {
		computed,
		reactive,
		unref
	} from 'vue';
	
	const goCashBackList = () => {
		sheep.$router.go('/pages/index/cash-back-list');
	};
</script>

<style lang="scss" scoped>
	uni-page-body {
		background: #fff;
	}

	h3 {
		color: rgb(51, 51, 51);
		font-size: 1.125rem;
		font-weight: normal;
		line-height: 22px;
		margin: 20px 0;
		text-align: center;
	}

	.top {}

	.top image {
		width: 100%;
	}

	.middle {
		width: 90%;
		margin: 15px auto;
	}

	.notice {
		background: #FDEAC9;
		border-radius: 5px;
		padding: 7px 15px;
	}

	.notice .notice-content {
		width: 100%;
	}

	.notice image {
		width: 14px;
		height: 14px;
		vertical-align: middle;
		padding-right: 6px;
	}

	.notice text {
		color: #8C7E75;
		font-size: 12px;
	}

	.product {
		width: 100%;
		margin-top: 20px;
	}

	.product-item-bg {
		background: url('../../static/activity-left.png');
		background-repeat: no-repeat;
		background-position-y: bottom;
		background-size: 50% 50%;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		border-radius: 8px;
	}

	.product .product-item {
		position: relative;
		background-color: #feeaca;
		;
		width: 45%;
		margin-bottom: 15px;
		border-radius: 8px;
		padding: 20px 2% 12px;
		display: inline-block;
		z-index: 4;

	}

	.product .product-item:nth-child(2n+1) {
		margin-right: 2%;
	}

	.product .product-item .item-one {
		width: 100%;
		overflow: hidden;

	}

	.product .product-item .item-one .left {
		float: left;
		text-align: right;
		width: 52%;

	}

	.product .product-item .item-one .left p {
		width: 100%;

	}

	.product .product-item .item-one .left strong {
		color: #FAA435;
		font-size: 24px;
		padding-right: 5px;

	}

	.product .product-item .item-one .left text {
		color: #333333;
		font-size: 14px;
		font-weight: bold;

	}

	.product .product-item .item-one .left span {
		font-size: 12px;
		color: #333;

	}

	.product .product-item .item-one .right {
		float: right;

	}

	.product .product-item .item-one .right image {
		width: 66px;
		height: 66px;
	}

	.product .product-item .item-two {
		margin-left: 5%;
		text-align: left;
	}

	.product .product-item .item-two text {
		color: #8C7E75;
		font-size: 12px;

	}
	.index-icon-list {
		position: fixed;
		bottom: 10vh;
		right: 10px;
		z-index: 9;
	}
	
	.index-icon-list .index-icon-btn {
		width: 45px;
		height: 45px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 3px 7px 0 rgba(157, 96, 130, .5);
		margin-bottom: 19px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.index-icon-list image {
		width: 36px;
		height: 36px;
	}

	.tips {
		background: #FDEAC9;
		border-radius: 40px;
		padding: 7px 15px;
		margin-top: 10px;
	}

	.tips .tips-content {
		width: 100%;
	}

	.tips image {
		width: 14px;
		height: 14px;
		vertical-align: middle;
		padding-right: 6px;
	}

	.tips text {
		color: #8C7E75;
		font-size: 12px;
	}

	.mask {
		width: 100%;
		height: 100%;
		position: fixed;
		background: rgba(0, 0, 0, 0.7);
		left: 0;
		top: 0;
		z-index: 99;
	}

	.popDialog {
		width: 90%;
		z-index: 100;
		margin: 0 auto;
		top: 25%;
		position: absolute;
		left: 5%;
		background: #fff;
		border-radius: 15px;
		padding-bottom: 20px;
	}

	.popDialog .close {
		width: 30px;
		position: fixed;
		right: 8%;
		height: 30px;
		margin-top: 4%;
	}

	.popDialog .title {
		width: 100%;
		text-align: center;
		margin: 6% 0 10px;
	}

	.popDialog .title text {
		font-size: 14px;
		color: #333;
	}

	.popDialog .img {
		width: 100%;
		text-align: center;
	}

	.popDialog .img image {
		width: 58px;
		height: 58px;
	}

	.popDialog .progress {
		width: 100%;
	}

	.popDialog .progress image {
		width: 88%;
		height: 60px;
		margin-left: 6%;
	}

	.popDialog .tips {
		background: #FDEAC9;
		border-radius: 40px;
		padding: 7px 5%;
		margin-top: 18px;
		width: 78%;
		margin-left: 6%;
	}
</style>