fix: 开发优惠券

src/App.vue

@@ -1,5 +1,8 @@
 <script>
 export default {
+	globalData: {
+		couponSelected: {}
+	},
 	data() {
 		return {
 		}

src/api/index.js

@@ -332,6 +332,25 @@ export function getCoupon(data) {
         data
     });
 }
+// 获取弹框优惠券
+export function getShareVolutionDetail(data) {
+	return request({
+		method: 'get',
+		url: '/couponReceive/getShareVolutionDetail',
+		data
+	})
+}
+// 领取优惠券
+export function receiveCoupon(data) {
+	return request({
+		method: 'post',
+		url: '/couponReceive/receiveCoupon',
+		data,
+		header: {
+		    'Authorization': `tf:${uni.getStorageSync('access-token')}`
+		}
+	})
+}
 
 // 获取二维码
 export function getwxQrCode(data) {

src/manifest.json

@@ -1,6 +1,6 @@
 {
     "name" : "yelaixiang-h5",
-    "appid" : "__UNI__F9027B9",
+    "appid" : "__UNI__9AE033F",
     "description" : "",
     "versionName" : "1.0.0",
     "versionCode" : "100",

src/pages.json

@@ -349,6 +349,19 @@
 				}
 			}
 		},
+		//优惠券使用记录
+		{
+			"path": "pages/my/record",
+			"style": {
+				"navigationBarTitleText": "使用记录",
+				"navigationBarBackgroundColor": "#2cb8d4",
+				"navigationBarTextStyle": "white",
+				"app-plus": {
+					"softinputNavBar": "none",
+					"titleNView": false
+				}
+			}
+		},
 		{
 			"path": "pages/staff/index",
 			"style": {

src/pages/identify/pay_order.vue

@@ -194,6 +194,7 @@ export default {
 			remainingTime: '',
 			// 支付方式
 			selectedPayment: null,
+			couponSelected: {}
 		}
 	},
 	onLoad(query) {
@@ -205,6 +206,9 @@ export default {
 				// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
 			}
 		});
+		if(getApp().globalData.couponSelected) {
+			this.couponSelected = getApp().globalData.couponSelected
+		}
 	},
 	onShow() {
 		this.getInfo()
@@ -940,3 +944,4 @@ export default {
   margin-left: 10rpx !important;
 }
 </style>
+

src/pages/index/index.vue

@@ -134,6 +134,44 @@
       </view>
       <view class="mask show"></view>
     </view>
+	<view>
+		<!-- 优惠券弹窗 -->
+		<uni-popup class="popup-box" ref="popup" background-color="#fff" :mask-click="false">
+			<view class="popup-content">
+				<view class="coupon-centent">
+					<view class="coupon-title">
+						<image src="../../static/other/leftBg.png"></image>
+						<view class="words">
+							恭喜你获得<view class="special">1张</view>优惠券
+						</view>
+						<image src="../../static/other/rightBg.png"></image>
+					</view>
+					<view class="coupon-message">
+						<view class="left">
+							<view class="left-item">{{ myCouponObj.name }}</view>
+							<view class="left-item">有效期至{{ myCouponObj.validEndTime }}</view>
+							<view class="left-item">{{ myCouponObj.type==='1'?'兑换券':myCouponObj.type==='2'?'折扣券':myCouponObj.type==='3'?'满减券':'' }}*1</view>
+						</view>
+						<view class="right" v-if="myCouponObj.type==='1'">
+							<view>兑换</view>
+						</view>
+						<view class="right" v-if="myCouponObj.type==='2'">
+							<view class="special">{{ myCouponObj.ruleDiscountRate?myCouponObj.ruleDiscountRate*100:'' }}</view>折
+						</view>
+						<view class="right" v-if="myCouponObj.type==='3'">
+							<view class="special">￥</view>{{ myCouponObj.ruleReductionAmount?myCouponObj.ruleReductionAmount:'' }}
+						</view>
+					</view>
+					<view class="coupon-btn-box">
+						<view class="coupon-btns" @click="handleReceiveCoupon">立即领取</view>
+					</view>
+				</view>
+				<view class="coupon-close" @click="handleCloseCoupon">
+					<image src="../../static/other/closeBg.png"></image>
+				</view>
+			</view>
+		</uni-popup>
+	</view>
   </view>
 </template>
 
@@ -147,6 +185,8 @@ import {
   getRecommendList,
   netCouponReceive,
   getCityCode,
+  getShareVolutionDetail,
+  receiveCoupon
 } from '@/api/index'
 import { h5Url } from '@/common/config.js';
 export default {
@@ -174,9 +214,12 @@ export default {
           value: '资质证书',
         },
       ],
+	  myCouponObj: {},
+	  query: []
     }
   },
   onShow() {
+	// this.$refs.popup.open('center')
     // 获取坐标
     this.getLocaltion()
     // 获取城市
@@ -191,9 +234,14 @@ export default {
     this.getCoupon()
     // 获取推荐数据
     this.getRanking()
+	// 获取优惠券
+	if(this.query.shareType === 'COUPON') {
+		this.showCoupons()
+	}
   },
   onLoad(query) {
     // 静默登录
+	this.query = query
     // 1. 获取URL中的code和state参数
     const urlParams = new URLSearchParams(window.location.search)
     const code = urlParams.get('code')
@@ -213,6 +261,37 @@ export default {
     // uni.setStorageSync('access-token', 'eyJhbGciOiJIUzUxMiJ9.eyJ0ZjoiOiJlNGNiNjY0ZS05Y2Q5LTRlOWItODU1Yy0zN2RlNjRiOGI3ZDIifQ.xj0ZBULLc7wYOaUgDQd_zbeynbJ8M3M-UQM6JPUKcV9rIWVlax8dJnU247om39nialcKnklKFZ8m8oerc-NY0A')
   },
   methods: {
+	// 优惠券弹框
+	showCoupons() {
+		getShareVolutionDetail({
+			shareVolutionId: this.query.shareContentId
+		}).then(res => {
+			if(res.data.code == 200) {
+				this.myCouponObj = res.data.data
+			}
+		})
+		this.$nextTick(() => {
+			this.$refs.popup.open()
+		})
+	},
+	// 关闭优惠券弹窗
+	handleCloseCoupon() {
+		this.$nextTick(() => {
+			this.$refs.popup.close()
+		})
+	},
+	// 领取优惠券
+	handleReceiveCoupon() {
+		receiveCoupon({
+			...this.myCouponObj
+		}).then(res => {
+			if(res.data.code == 200) {
+				this.$nextTick(() => {
+					this.$refs.popup.close()
+				})
+			}
+		})
+	},
     // 获取城市
     getCity() {
       uni.request({
@@ -831,5 +910,106 @@ export default {
       opacity: 1;
     }
   }
+  .popup-box{
+	  border-radius: 32rpx;
+	  ::v-deep .uni-popup__wrapper{
+		  background: none !important;
+	  }
+  }
+  .popup-content{
+	  width: 540rpx;
+	  height: 510rpx;
+	  border-radius: 32rpx;
+	  .coupon-centent{
+		  width: 100%;
+		  height: 400rpx;
+		  border-radius: 32rpx;
+		  background: linear-gradient( 0deg, #CBFFFB 0%, #F3FFFE 100%);
+		  padding: 52rpx 24rpx 40rpx;
+		  position: relative;
+	  }
+	  .coupon-title{
+		  width: 100%;
+		  display: flex;
+		  align-items: center;
+		  justify-content: center;
+		  margin-bottom: 28rpx;
+		  image{
+			  width: 32rpx;
+			  height: 2rpx;
+		  }
+		  .words{
+			  display: flex;
+			  align-items: center;
+			  justify-content: center;
+			  .special{
+				  color: #03C8BE;
+			  }
+		  }
+	  }
+	  .coupon-message{
+		  display: flex;
+		  align-items: center;
+		  justify-content: space-between;
+		  background: #ffffff;
+		  border-radius: 24rpx;
+		  .left{
+			  padding: 20rpx;
+			  .left-item{
+				  color: #333333;
+				  margin-bottom: 8rpx;
+				  &:nth-child(1) {
+					  font-size: 24rpx;
+				  }
+				  &:nth-child(2) {
+					  color: #999999;
+					  font-size: 20rpx;
+				  }
+				  &:nth-child(3) {
+					  font-size: 20rpx;
+				  }
+			  }
+		  }
+		  .right{
+			  padding: 56rpx;
+			  background-color: #E8FBFA;
+			  display: flex;
+			  align-items: center;
+			  justify-content: center;
+			  border-radius: 0 24rpx 24rpx 0;
+			  color: #03C8BE;
+		  }
+	  }
+	  .coupon-btn-box{
+		  width: 540rpx;
+		  position: absolute;
+		  left: 0;
+		  bottom: 0rpx;
+		  height: 160rpx;
+		  background: url('../../static/other/bottomBg.png') no-repeat;
+		  background-size: 100% 100%;
+		  .coupon-btns{
+			margin: 70rpx auto 40rpx;
+			height: 60rpx;
+			width: 400rpx;
+			line-height: 60rpx;
+			text-align: center;
+			  border-radius: 98rpx;
+			  background: linear-gradient( 80deg, #00DAAB 0%, #07CDC4 100%);
+			  color: #ffffff;
+		  }
+	  }
+	  .coupon-close{
+		  margin: 60rpx auto 0;
+		  width: 48rpx;
+		  height: 48rpx;
+		  display: flex;
+		  image{
+			  width: 100%;
+			  height: 100%;
+		  }
+	  }
+  }
+
 }
 </style>

src/pages/login/wxLogin.vue

@@ -220,6 +220,7 @@
             if (res.data.code == 200) {
               uni.setStorageSync('wx_copenid', res.data.data.copenid || '')
               uni.setStorageSync('access-token', res.data.data.token)
+			  uni.setStorageSync('phone', res.data.data.cphone)
               uni.setStorageSync('wx_phone', res.data.data.cphone)
               uni.setStorageSync('userId', res.data.data.id)
               _this.isBinding = false;

src/pages/my/coupon.vue

@@ -2,33 +2,62 @@
 	<view class="coupon-page">
 		<view class="list-container">
 			<view v-for="(item, index) in couponList" :key="index"
-				:class="['coupon-card']">
-				<view class="left-content">
-					<view class="coupon-title">
-						<view v-if="item.discountType == 3">满{{ item.thresholdAmount }}减{{ item.discountValue }}</view>
-						<view v-else>满{{ item.thresholdAmount }}可用</view>
+				:class="['coupon-box']">
+				<view class="coupon-card">
+					<view v-if="query.title == 'select'" :class="{ 'radio-selected': item.selected, 'radio-select': !item.selected }" @click="handleSelect(item, index)">
+						<image v-show="item.selected" src="../../static/other/selected.png"></image>
 					</view>
-					<view class="coupon-time">
-						<view>有效期至{{ item.expirationTimeString }}</view>
+					<view class="left-content">
+						<view class="coupon-title">
+							<view>{{ item.couponName }}</view>
+							<!-- <view v-if="item.discountType == 3">满{{ item.thresholdAmount }}减{{ item.discountValue }}</view>
+							<view v-else>满{{ item.thresholdAmount }}可用</view> -->
+						</view>
+						<view class="coupon-time">
+							<view v-if="item.validityType == 2">领券{{item.validDays }}天后失效</view>
+							<view v-else-if="item.validityType == 3">长期有效</view>
+							<view v-else>有效期至{{ item.expirationTimeString }}</view>
+						</view>
+						<view class="coupon-msg">
+							<view v-if="item.couponType== '1'">满减券*1</view>
+							<view v-if="item.couponType== '2'">折扣券*1</view>
+							<view v-if="item.couponType== '3'">兑换券*1</view>
+							<view class="icon-circle" @click="item.showMsg = !item.showMsg">
+								详细信息
+								<view :class="{ 'circle': item.showMsg, 'default': !item.showMsg }"></view>
+							</view>
+						</view>
 					</view>
-				</view>
 
-				<view class="right-action">
-					<view class="amount-box" v-if="item.discountType == 3">
-						<text class="unit">¥</text>
-						<text class="val">{{ item.discountValue }}</text>
+					<view class="right-action">
+						<view class="amount-box" v-if="item.couponType == '1'">
+							<text class="unit">¥</text>
+							<text class="val">{{ item.discountValue }}</text>
+						</view>
+						<view class="amount-box" v-else-if="item.couponType == '2'">
+							<text class="val">{{ item.rebValue }}</text>
+							<text class="unit">折</text>
+						</view>
+						<view class="amount-box" v-else>
+							<text class="val">兑换</text>
+						</view>
+
+						<view class="action-btn active" @click.stop="goIdentify(item)">去使用</view>
 					</view>
-					<view class="amount-box" v-else>
-						<text class="val">{{ item.rebValue }}</text>
-						<text class="unit">折</text>
+				</view>
+				<view class="coupon-message" v-show="item.showMsg">
+					<view class="message-item">
+						<view>券类型：{{ item.couponType== '1'?'兑换券':item.couponType== '2'?'折扣券':item.couponType== '3'?'满减券':'' }}</view>
+						<view v-if="item.locality">限定地区：仅{{ item.locality }}地区使用</view>
+						<view v-if="item.relatedName">限定项目：{{ item.relatedName }}</view>
+						<view>限定手机：仅限登录手机号为{{ getPhone() }}使用</view>
 					</view>
-
-					<view class="action-btn active" @click.stop="goIdentify(item)">立即使用</view>
 				</view>
 			</view>
 
 			<u-empty v-if="couponList.length === 0" mode="coupon" marginTop="100"></u-empty>
 		</view>
+		<view v-if="couponList.length != 0" class="usedRecord" @click="toRecord">使用记录<u-icon name="arrow-right" size="28rpx" top="1" color="#333"></u-icon></view>
 	</view>
 </template>
 
@@ -45,18 +74,32 @@
 		},
 		onLoad(query) {
 			this.query = query;
+			getApp().globalData.couponSelected = {}
 		},
 		onShow() {
 			this.getData();
 		},
 		methods: {
+			getPhone() {
+				const phone = uni.getStorageSync('phone')
+				const phoneStr = `${phone.slice(0,3)}****${phone.slice(7,11)}`
+				return phoneStr
+			},
 			getData() {
 				let params = {
-					openid: uni.getStorageSync('wx_copenid')
+					receiveOpenId: uni.getStorageSync('wx_copenid')
 				}
 				getCoupon(params).then(res => {
 					if (res.data.code == 200) {
-						this.couponList = res.data.data;
+						if(res.data.data && res.data.data.length > 0) {
+							this.couponList = res.data.data.map(item => {
+								return {
+									...item,
+									selected: false,
+									showMsg: false
+								}
+							})
+						}
 					}
 				});
 			},
@@ -73,6 +116,24 @@
 						url: '/pages/identify/identify'
 					})
 				}
+			},
+			handleSelect(item, index) {
+				this.couponList[index].selected = !this.couponList[index].selected
+				this.couponList.map((sub, ind) => {
+					if(sub.id != item.id) {
+						sub.selected = false
+					}
+				})
+				const selectObj = this.couponList.filter(a => a.selected)
+				if(selectObj) {
+					uni.navigateBack(-1)
+					getApp().globalData.couponSelected = selectObj
+				}
+			},
+			toRecord() {
+				uni.navigateTo({
+					url: '/pages/my/record',
+				})
 			}
 		}
 	}
@@ -85,17 +146,38 @@
 
 	.list-container {
 		padding: 20rpx 24rpx;
-
-		.coupon-card {
+		height: calc(100vh - 4vh);
+		.coupon-box{
 			margin-bottom: 24rpx;
 			position: relative;
 			border-radius: 16rpx;
 			background-color: #fff;
+		}
+		.coupon-card {
 			display: flex;
+			align-items: center;
 			flex-wrap: wrap;
 			overflow: hidden;
 			transition: opacity 0.3s;
-
+			.radio-select{
+				width: 36rpx;
+				height: 36rpx;
+				border-radius: 50%;
+				margin-left: 20rpx;
+				border: 2rpx solid #869198;
+			}
+			.radio-selected{
+				width: 36rpx;
+				height: 36rpx;
+				border-radius: 50%;
+				margin-left: 20rpx;
+				image{
+					display: block;
+					width: 36rpx;
+					height: 36rpx;
+					border-radius: 50%;
+				}
+			}
 			.left-content {
 				flex: 1;
 				padding: 30rpx;
@@ -113,17 +195,45 @@
 					color: #999;
 					margin-bottom: 20rpx;
 				}
+				.coupon-msg{
+					color: #333;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					font-size: 24rpx;
+					.icon-circle{
+						color: #999;
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						.circle{
+							width: 0;
+							height: 0;
+							border-left: 10rpx solid transparent;
+							border-right: 10rpx solid transparent;
+							border-bottom: 16rpx solid #999;
+							transform: rotate(180deg);
+						}
+						.default{
+							width: 0;
+							height: 0;
+							border-left: 10rpx solid transparent;
+							border-right: 10rpx solid transparent;
+							border-bottom: 16rpx solid #999;
+						}
+					}
+				}
 			}
 
 			.right-action {
 				width: 220rpx;
-				padding: 20rpx;
+				padding: 28rpx;
 				display: flex;
 				align-items: center;
 				flex-direction: column;
 				justify-content: center;
-				background-color: #E8FBFA; 
-
+				background-color: #E8FBFA;
+				border-radius: 0 16rpx 16rpx 0;
 				.amount-box {
 					color: #03C8BE;
 					margin-bottom: 16rpx;
@@ -161,6 +271,21 @@
 				}
 			}
 		}
+		.coupon-message{
+			border-top: 1rpx solid #EEEEEE;
+			padding: 30rpx;
+			color: #999;
+			font-size: 24rpx;
+		}
+	}
+	.usedRecord{
+		height: 4vh;
+		text-align: center;
+		color: #333;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 28rpx;
 	}
 }
-</style>
+</style>

src/pages/my/indent.vue

@@ -199,8 +199,8 @@
 			}
 		},
 		onLoad(options) {
-			uni.setStorageSync('access-token', 'eyJhbGciOiJIUzUxMiJ9.eyJ0ZjoiOiJiNGQ2NzJiMi0xNzcxLTRmYTMtYjM1OS01NmRhMjk4ZDcwZjAifQ.acq9x8MrF3aXzY3mYJIuG8MLeRtMQ2hybesrN8t5txI4H5HDthn07nq5QYZmCJ1_ZPL8ZDbYczN6qmIa8ckrrA')
-			uni.setStorageSync('wx_copenid','o-HEJ6VP2YNi0HPeLaIHCQsQD69s')
+			// uni.setStorageSync('access-token', 'eyJhbGciOiJIUzUxMiJ9.eyJ0ZjoiOiJiNGQ2NzJiMi0xNzcxLTRmYTMtYjM1OS01NmRhMjk4ZDcwZjAifQ.acq9x8MrF3aXzY3mYJIuG8MLeRtMQ2hybesrN8t5txI4H5HDthn07nq5QYZmCJ1_ZPL8ZDbYczN6qmIa8ckrrA')
+			// uni.setStorageSync('wx_copenid','o-HEJ6VP2YNi0HPeLaIHCQsQD69s')
 			this.getCity()
 			this.title = options.title
 			if (options.title == '编辑资料') {

src/pages/my/record.vue

@@ -0,0 +1,355 @@
+<template>
+	<view class="record">
+		<view class="tips">
+			<view class="tips-item" :class="{ 'active': typeIndex === index }" v-for="(item, index) in type" @click="handleIndex(item, index)">{{ item }}</view>
+		</view>
+		<view class="list-container" v-if="typeIndex == 0">
+			<view v-for="(item, index) in couponList" :key="index"
+				:class="['coupon-box']">
+				<view class="coupon-card">
+					<view class="left-content">
+						<view class="coupon-title">
+							<view>仅项目费用满499可使用</view>
+							<!-- <view v-if="item.discountType == 3">满{{ item.thresholdAmount }}减{{ item.discountValue }}</view>
+							<view v-else>满{{ item.thresholdAmount }}可用</view> -->
+						</view>
+						<view class="coupon-time">
+							<view>有效期至2026-01-24 23:59:59</view>
+						</view>
+						<view class="coupon-msg">
+							<view v-if="item.discountType== 1">满减券*1</view>
+							<view v-if="item.discountType== 2">折扣券*1</view>
+							<view v-if="item.discountType== 3">兑换券*1</view>
+							<view class="icon-circle" @click="item.showMsg = !item.showMsg">
+								详细信息
+								<view :class="{ 'circle': item.showMsg, 'default': !item.showMsg }"></view>
+							</view>
+						</view>
+					</view>
+
+					<view class="right-action">
+						<view class="amount-box" v-if="item.discountType == 1">
+							<text class="unit">¥</text>
+							<text class="val">{{ item.discountValue }}</text>
+						</view>
+						<view class="amount-box" v-else-if="item.discountType == 2">
+							<text class="val">{{ item.rebValue }}</text>
+							<text class="unit">折</text>
+						</view>
+						<view class="amount-box" v-else>
+							<text class="val">兑换</text>
+						</view>
+
+						<view class="action-btn active">已使用</view>
+					</view>
+				</view>
+				<view class="coupon-message" v-show="item.showMsg">
+					<view class="message-item">
+						<view>券类型：{{ item.couponType== '1'?'兑换券':item.couponType== '2'?'折扣券':item.couponType== '3'?'满减券':'' }}</view>
+						<view v-if="item.locality">限定地区：仅{{ item.locality }}地区使用</view>
+						<view v-if="item.relatedName">限定项目：{{ item.relatedName }}</view>
+						<view>限定手机：仅限登录手机号为{{ getPhone() }}使用</view>
+					</view>
+				</view>
+			</view>
+
+			<u-empty v-if="couponList.length === 0" mode="coupon" marginTop="100"></u-empty>
+		</view>
+
+		<view class="list-container" v-if="typeIndex == 1">
+			<view v-for="(item, index) in couponList" :key="index"
+				:class="['coupon-box']">
+				<view class="coupon-card">
+					<view class="left-content">
+						<view class="coupon-title">
+							<view>仅项目费用满499可使用</view>
+							<!-- <view v-if="item.discountType == 3">满{{ item.thresholdAmount }}减{{ item.discountValue }}</view>
+							<view v-else>满{{ item.thresholdAmount }}可用</view> -->
+						</view>
+						<view class="coupon-time">
+							<view>有效期至2026-01-24 23:59:59</view>
+						</view>
+						<view class="coupon-msg">
+							<view v-if="item.discountType== 1">满减券*1</view>
+							<view v-if="item.discountType== 2">折扣券*1</view>
+							<view v-if="item.discountType== 3">兑换券*1</view>
+							<view class="icon-circle" @click="item.showMsg = !item.showMsg">
+								详细信息
+								<view :class="{ 'circle': item.showMsg, 'default': !item.showMsg }"></view>
+							</view>
+						</view>
+					</view>
+
+					<view class="right-action-lose">
+						<view class="amount-box" v-if="item.discountType == 1">
+							<text class="unit">¥</text>
+							<text class="val">{{ item.discountValue }}</text>
+						</view>
+						<view class="amount-box" v-else-if="item.discountType == 2">
+							<text class="val">{{ item.rebValue }}</text>
+							<text class="unit">折</text>
+						</view>
+						<view class="amount-box" v-else>
+							<text class="val">兑换</text>
+						</view>
+
+						<view class="action-btn active">已失效</view>
+					</view>
+				</view>
+				<view class="coupon-message" v-show="item.showMsg">
+					<view class="message-item">
+						<view>券类型：{{ item.couponType== '1'?'兑换券':item.couponType== '2'?'折扣券':item.couponType== '3'?'满减券':'' }}</view>
+						<view v-if="item.locality">限定地区：仅{{ item.locality }}地区使用</view>
+						<view v-if="item.relatedName">限定项目：{{ item.relatedName }}</view>
+						<view>限定手机：仅限登录手机号为{{ getPhone() }}使用</view>
+					</view>
+				</view>
+			</view>
+
+			<u-empty v-if="couponList.length === 0" mode="coupon" marginTop="100"></u-empty>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		getCoupon
+	} from '@/api/index';
+	export default{
+		data() {
+			return {
+				type: ['已使用','已失效'],
+				typeIndex: 0,
+				list: [],
+				couponList: [],
+			}
+		},
+		onShow() {
+			this.getData(0);
+		},
+		methods:{
+			getPhone() {
+				const phone = uni.getStorageSync('phone')
+				const phoneStr = `${phone.slice(0,3)}****${phone.slice(7,11)}`
+				return phoneStr
+			},
+			getData(type) {
+				let params = {
+					receiveOpenId: uni.getStorageSync('wx_copenid')
+				}
+				getCoupon(params).then(res => {
+					if (res.data.code == 200) {
+						if(res.data.data && res.data.data.length > 0) {
+							this.list = res.data.data.map(item => {
+								return {
+									...item,
+									showMsg: false
+								}
+							})
+							this.changeType(type)
+						}
+					}
+				});
+			},
+			changeType(type) {
+				if(!type) {
+					this.couponList = this.list.filter(item => item.couponStatus == 2)
+				}
+				if(type==1) {
+					this.couponList = this.list.filter(item => item.couponStatus == 3)
+				}
+			},
+			handleIndex(item, index) {
+				this.typeIndex = index
+				this.changeType(index)
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.record {
+		width: 100%;
+		height: 100vh;
+		overflow: hidden;
+		background-color: #F6F7F9;
+		.tips{
+			height: 90rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-around;
+			background-color: #ffffff;
+			border-radius: 0 0 24rpx 24rpx;
+			.tips-item{
+				line-height: 90rpx;
+				border-bottom: 4rpx solid #ffffff;
+			}
+			.active{
+				color: #03C8BE;
+				border-bottom: 4rpx solid #03C8BE;
+			}
+		}
+		.list-container {
+			padding: 20rpx 24rpx;
+			height: calc(100vh - 90rpx);
+			overflow-y: auto;
+			.coupon-box{
+				margin-bottom: 24rpx;
+				position: relative;
+				border-radius: 16rpx;
+				background-color: #fff;
+				opacity: .6;
+			}
+			.coupon-card {
+				display: flex;
+				flex-wrap: wrap;
+				overflow: hidden;
+
+				.left-content {
+					flex: 1;
+					padding: 30rpx;
+					border-right: 2rpx dashed #eee;
+
+					.coupon-title {
+						font-size: 30rpx;
+						font-weight: bold;
+						color: #333;
+						margin-bottom: 10rpx;
+					}
+
+					.coupon-time {
+						font-size: 22rpx;
+						color: #999;
+						margin-bottom: 20rpx;
+					}
+					.coupon-msg{
+						color: #333;
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						font-size: 24rpx;
+						.icon-circle{
+							color: #999;
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+							.circle{
+								width: 0;
+								height: 0;
+								border-left: 10rpx solid transparent;
+								border-right: 10rpx solid transparent;
+								border-bottom: 16rpx solid #999;
+								transform: rotate(180deg);
+							}
+							.default{
+								width: 0;
+								height: 0;
+								border-left: 10rpx solid transparent;
+								border-right: 10rpx solid transparent;
+								border-bottom: 16rpx solid #999;
+							}
+						}
+					}
+				}
+
+				.right-action {
+					width: 220rpx;
+					padding: 20rpx;
+					display: flex;
+					align-items: center;
+					flex-direction: column;
+					justify-content: center;
+					background-color: #E8FBFA;
+
+					.amount-box {
+						color: #03C8BE;
+						margin-bottom: 16rpx;
+
+						.unit {
+							font-size: 24rpx;
+							margin-right: 4rpx;
+						}
+
+						.val {
+							font-size: 50rpx;
+							font-weight: bold;
+						}
+					}
+
+					.action-btn {
+						width: 140rpx;
+						height: 54rpx;
+						border-radius: 40rpx;
+						font-size: 24rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+
+						&.active {
+							background-color: #03C8BE;
+							color: #fff;
+						}
+
+						&.disabled {
+							background-color: transparent;
+							border: 2rpx solid #03C8BE;
+							color: #03C8BE;
+						}
+					}
+				}
+				.right-action-lose {
+					width: 220rpx;
+					padding: 20rpx;
+					display: flex;
+					align-items: center;
+					flex-direction: column;
+					justify-content: center;
+					background-color: #F4F9F9;
+
+					.amount-box {
+						color: #BBBBBB;
+						margin-bottom: 16rpx;
+
+						.unit {
+							font-size: 24rpx;
+							margin-right: 4rpx;
+						}
+
+						.val {
+							font-size: 50rpx;
+							font-weight: bold;
+						}
+					}
+
+					.action-btn {
+						width: 140rpx;
+						height: 54rpx;
+						border-radius: 40rpx;
+						font-size: 24rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+
+						&.active {
+							border: 2rpx solid #BBBBBB;
+							background-color: #ffffff;
+							color: #BBBBBB;
+						}
+
+						&.disabled {
+							background-color: transparent;
+							border: 2rpx solid #BBBBBB;
+							color: #BBBBBB;
+						}
+					}
+				}
+			}
+			.coupon-message{
+				border-top: 1rpx solid #EEEEEE;
+				padding: 30rpx;
+				color: #999;
+				font-size: 24rpx;
+			}
+		}
+	}
+</style>