1.0yangche/pages/packageOne/freeEnter/discounts/discounts.vue

<template>
	<view class="wrap">
		<view class="title">可用优惠券 <view class="title_i">{{allData.total}}张</view></view>
		<view class="discounts_list">
		    <view class="discounts_item clear" @tap="select(item,index)" v-for="item,index in allData.arr" :key="index">
				<view class="item_lf">
					<view class="money">¥<view class="money_i">{{item.money}}</view></view>
					<view class="full">{{item.moneyTips}}</view>
				</view>
				<view class="middle">
					<view class="middle_title">{{item.name}}</view>
					<view class="open_shop">{{item.nameTips}}</view>
					<view class="open_shop">{{item.validity}}</view>
				</view>
				<view class="radio" v-if="item.active == 0">
					<image src="https://wx.fujinyangche.com/nvrnetwork/images/no_select.png"></image>
				</view>
				<view class="radio" v-if="item.active == 1">
					<image src="https://wx.fujinyangche.com/nvrnetwork/images/select.png"></image>
				</view>
		    </view>
		</view>
		<view class="footer">
			<button class="submit" @tap="confirm">确定</button>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	import api from "../../../../api.js";
	export default {
		data() {
			return {
				total:'',//优惠券个数
				allData:null,//页面所有数据
				money:0,//计算优惠钱数
				ids:[],//所选择优惠券id
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			//加载数据
			getData(){
				let data = {
					token:app.globalData.token,
					status:0
				}
				api.getUserAllDiscount(data).then((res)=>{
					console.log(res);
					this.allData = res.data.data;
				})
			},
			//优惠券选择
			select(item,index){
				let money = this.money;
				if(this.allData.arr[index].active == 0){
					money += item.money;
					if(money>300){
						uni.showToast({
							icon:'none',
							duration:2000,
							title:'所用优惠券金额不能大于300'
						})
						return false;
					}
					this.money = money;
					this.allData.arr[index].active = 1;
					this.ids.push(item.id);
				}else{
					this.allData.arr[index].active = 0;
					this.money -= item.money;
					this.ids.splice(index,1);
				}
			},
			//确定按钮
			confirm(){
				console.log(this.money,this.ids);
				let ids = this.ids;
				let disMoney = this.money;
				const pages = getCurrentPages();
				const prevPage = pages[pages.length - 2] // 上一页
				// 调用上一个页面的setData 方法，将数据存储
				prevPage.disMoney = disMoney;
				prevPage.ids = ids;
				uni.navigateBack({
				  delta:1,
				})
			}
		}
	}
</script>

<style>
	page{
	  width:100%;
	  height:100%;
	  padding:0 30rpx;
	  box-sizing: border-box;
	  background-color: #f9f9f9;
	}
	.title{
	  font-size: 30rpx;
	  color:#666666;
	  margin:30rpx 0 30rpx 0;
	}
	.title_i{
	  display: inline-block;
	  color:#222222;
	  font-weight: bold;
	}
	.discounts_list{
	  width:100%;
	  padding-bottom: 100rpx;
	  overflow: hidden;
	}
	.discounts_item{
	  height:186rpx;
	  margin-bottom: 20rpx;
	  background-color:#ffffff; 
	}
	.item_lf{
	  width:200rpx;
	  height:186rpx;
	  float:left;
	  position: relative;
	  background-image: url('http://web.jzdsh.com/images/card01.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	}
	.money{
	  color:#ffffff;
	  font-size: 32rpx;
	  font-weight: bold;
	  text-align: center;
	  margin-top:32rpx;
	}
	.money_i{
	  font-size: 64rpx;
	  display: inline-block;
	}
	.full{
	  text-align: center;
	  font-size: 22rpx;
	  color:#ffffff;
	}
	.middle{
	  width:50%;
	  height:186rpx;
	  float:left;
	  padding:28rpx 0 26rpx 20rpx;
	  box-sizing: border-box;
	}
	.middle_title{
	  font-size: 32rpx;
	  color:#333333;
	  font-weight: bold;
	}
	.open_shop{
	  font-size: 22rpx;
	  color:#A4A4A7;
	  margin-top:12rpx;
	}
	.radio{
	  width:40rpx;
	  height:40rpx;
	  float:right;
	  margin: 74rpx 30rpx 0 0;
	}
	.radio image{
	  display: block;
	  width:100%;
	  height:100%;
	}
	.footer{
	  width:100%;
	  height:100rpx;
	  background:rgba(255,255,255,1);
	  box-shadow:0px 4rpx 8rpx 0px rgba(0,0,0,0.5);
	  position: fixed;
	  bottom:0;
	  left:0;
	}
	.submit{
	  width:690rpx;
	  height:80rpx;
	  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
	  border-radius:40rpx;
	  text-align: center;
	  font-size: 32rpx;
	  color:#ffffff;
	  position: absolute;
	  top:10rpx;
	  left:50%;
	  transform: translateX(-50%)
	}
</style>