1.优惠券详情

pages.json

@@ -141,6 +141,15 @@
 		    }
 		}
 
+        ,{
+            "path" : "pages/index/discountCardDetail",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "优惠券详情",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"tabBar": {
 		"color": "#8a8a8a",

pages/index/discountCard.vue

@@ -13,23 +13,23 @@
 				<view class="tabLine2" :class="{tabActive2:tabIndex2==2}" @click="tabClick2(2)">已使用</view>
 				<view class="tabLine2" :class="{tabActive2:tabIndex2==1}" @click="tabClick2(1)">已过期</view>
 			</view>
-			<view class="itemBg" v-for="(item,index) in currentList" @click="goDetail(item.ID)">
+			<view class="itemBg" v-for="(item,index) in currentList">
 				<view class="itemTop">
 					<view class="leftB">
-						<view class="use">￥<span class="use2">{{item.actMoney}}</span></view>
-						<!-- <view class="used">￥<span class="used2">{{item.actMoney}}</span></view> -->
+						<view class="use" v-if="item.state==0">￥<span class="use2">{{item.actMoney}}</span></view>
+						<view class="used" v-else>￥<span class="used2">{{item.actMoney}}</span></view>
 						<view class="tiaojian">{{item.whereMoney!==0?'满'+item.whereMoney+'元可用':'满任意金额可用'}}</view>
 					</view>
 					<view class="centerB">
 						<view class="name">{{item.actName}}</view>
 						<view class="time" v-if="item.startTime">有效期：{{item.startTime.slice(0,10)}}-{{item.endTime.slice(0,10)}}</view>
-						<view class="time" v-else></view>
+						<view class="time" v-else>有效期：</view>
 					</view>
 					<view class="rightB">
 						<image src="../../static/img/icon_yishiyong.png" mode="" v-if="item.state==2&&tabIndex==1"  class="couponlineTopImg"></image>
 						<image src="../../static/img/icon_guoqi.png" mode="" v-if="item.state==1&&tabIndex==1"  class="couponlineTopImg"></image>
 						
-						<view class="shareB"  v-if="item.shareQty>0&&tabIndex==2" @click.stop="shareCoupon(item)">
+						<view class="shareB"  v-if="item.shareQty>0&&tabIndex==2" @click.stop="">
 						  <image  src="../../static/img/icon_share.png" alt="" class="couponlineshareImg"></image>
 						  <view class="keshare">赠送给好友</view>
 						</view>
@@ -39,7 +39,7 @@
 				<view class="itemBottom">
 					<view v-if="tabIndex==1">可用次数:{{item.avaQty}}</view>
 					<view v-else>可分享次数:{{item.shareQty}}</view>
-					<view>查看详情 ></view>
+					<view @click="goDetail(item.id)">查看详情 ></view>
 					
 				</view>
 			</view>
@@ -88,7 +88,11 @@
 		},
 		methods: {
 
-
+			goDetail(id) {
+				uni.navigateTo({
+					url: 'discountCardDetail?id=' + id
+				})
+			},
 
 			tabClick(num) {
 				this.tabIndex = num;
@@ -99,11 +103,7 @@
 				this.tabIndex2 = num;
 
 			},
-			goDetail(id) {
-				uni.navigateTo({
-					url: 'orderDetail?id=' + id
-				})
-			},
+			
 			myOrderCoupon() {
 				uni.showLoading({
 					title: '加载中'

pages/index/discountCardDetail.vue

@@ -0,0 +1,200 @@
+<template>
+	<view class="box">
+		<view style="width: 750rpx;height: 172rpx;background: #F03B3B;"></view>
+
+		<view class="detailBg">
+			<view class="detailTop">
+				<view class="leftB">
+					<view class="use">￥<span class="use2">{{detail.actMoney}}</span></view>
+					<!-- <view class="used" v-else>￥<span class="used2">{{detail.actMoney}}</span></view> -->
+					<view class="tiaojian">{{detail.whereMoney!==0?'满'+detail.whereMoney+'元可用':'满任意金额可用'}}</view>
+				</view>
+				<view class="centerB">
+					<view class="name">{{detail.actName}}</view>
+					<view class="time" v-if="detail.startTime">
+						有效期：{{detail.startTime.slice(0,10)}}-{{detail.endTime.slice(0,10)}}</view>
+					<view class="time" v-else>有效期：</view>
+				</view>
+
+			</view>
+		</view>
+
+
+		<view class="comtentBox">
+			<view style="margin-bottom: 30rpx;">
+				<view class="titleBox">
+					<view class="redPoint"></view>
+					<view class="title">可用次数</view>
+				</view>
+				<view class="content">{{detail.avaQty}}次</view>
+
+			</view>
+			<view style="margin-bottom: 30rpx;">
+				<view class="titleBox">
+					<view class="redPoint"></view>
+					<view class="title">适用门店</view>
+					</view>
+
+					<view v-for="(v,index) in detail.shopNames.split(',')">
+						<view class="content">{{v}}</view>
+					</view>
+
+				
+			</view>
+
+			<view>
+				<view class="titleBox">
+					<view class="redPoint"></view>
+					<view class="title">使用说明</view>
+					</view>
+					<view v-if="detail.couContent" v-html="detail.couContent"></view>
+				</view>
+
+
+			</view>
+
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				id: '',
+				detail: {},
+			}
+		},
+		onLoad(opt) {
+			this.id = opt.id;
+			this.getData();
+		},
+		methods: {
+			getData() {
+				uni.showLoading({
+					title: '加载中'
+				});
+
+				this.$http('opencoupon/detailsCoupon', {
+					// lat: this.location.lat,
+					// lng: this.location.lng,
+					id: this.id,
+				}, 'GET').then(res => {
+					uni.hideLoading();
+					this.detail = res.data;
+
+
+				})
+			},
+		}
+	}
+</script>
+
+<style>
+	.box {
+		min-height: 100vh;
+		background: #F4F5F7;
+	}
+
+	.detailBg {
+		margin: -100rpx 24rpx 0rpx;
+		background-color: #FFFFFF;
+		border-radius: 10rpx;
+		padding: 40rpx 20rpx 20rpx;
+	}
+
+	.detailTop {
+		display: flex;
+		justify-content: flex-start;
+		margin-bottom: 40rpx;
+	}
+
+	.use {
+
+		font-size: 26rpx;
+		color: #F03B3B;
+	}
+
+	.use2 {
+
+		font-size: 40rpx;
+		font-weight: 500;
+		color: #F03B3B;
+		line-height: 56rpx;
+	}
+
+	.used {
+
+		font-size: 26rpx;
+		color: #666666;
+	}
+
+	.used2 {
+
+		font-size: 40rpx;
+		font-weight: 500;
+		color: #666666;
+		line-height: 56rpx;
+	}
+
+	.tiaojian {
+
+		font-size: 24rpx;
+
+		color: #666666;
+
+	}
+
+	.name {
+
+		font-size: 30rpx;
+
+		font-weight: 500;
+		color: #333333;
+		line-height: 42rpx;
+	}
+
+	.time {
+		font-size: 24rpx;
+
+		color: #666666;
+		margin-top: 15rpx;
+	}
+
+	.leftB {
+		margin-right: 15rpx;
+	}
+
+	.comtentBox {
+		margin: 20rpx 24rpx;
+		background-color: #FFFFFF;
+		border-radius: 10rpx;
+		padding: 20rpx;
+	}
+
+	.titleBox {
+		display: flex;
+		align-items: center;
+	}
+
+	.redPoint {
+		width: 18rpx;
+		height: 18rpx;
+		background: #F03B3B;
+		border-radius: 9rpx;
+		margin-right: 10rpx;
+	}
+
+	.title {
+		font-size: 30rpx;
+		color: #333333;
+		font-weight: bold;
+	}
+
+	.content {
+		font-size: 26rpx;
+		color: #666666;
+		margin-top: 16rpx;
+		margin-left: 28rpx;
+	}
+</style>