浏览代码

Signed-off-by: 1004749546@qq.com <1004749546@qq.com>
增加优惠券领取页面 及下单页面样式调整

1004749546@qq.com 4 年之前
父节点
当前提交
857a875e63
共有 6 个文件被更改,包括 150 次插入9 次删除
  1. 25 0
      api/coupon.js
  2. 5 0
      pages.json
  3. 4 4
      pages/coupon/couponTpl.vue
  4. 110 0
      pages/coupon/getCoupon/getCoupon.vue
  5. 6 5
      pages/getOrder/getOrder.vue
  6. 二进制
      static/img/zyts.png

+ 25 - 0
api/coupon.js

@@ -0,0 +1,25 @@
+import axios from '@/libs/axios.js';
+// 确认领取优惠券
+export const receivesCoupon = (params) => {
+  return axios.request({
+    url: `couponReceives/receivesCoupon/${params.couponCode}`,
+    method: 'get'
+  })
+}
+
+// 优惠券领取明细查询
+export const couponList = (params) => {
+  return axios.request({
+    url: `couponReceives/findPage`,
+    method: 'post',
+	data: params
+  })
+}
+// 订单可用优惠券查询
+export const couponEnable = (params) => {
+  return axios.request({
+    url: `couponReceives/findUsableCoupon`,
+    method: 'post',
+	data: params
+  })
+}

+ 5 - 0
pages.json

@@ -77,6 +77,11 @@
 			"style": {
 			"style": {
 				"navigationBarTitleText": "注意事项"
 				"navigationBarTitleText": "注意事项"
 			}
 			}
+		}, {
+			"path": "pages/coupon/getCoupon/getCoupon",
+			"style": {
+				"navigationBarTitleText": "领取优惠券"
+			}
 		}
 		}
 	],
 	],
 	"globalStyle": {
 	"globalStyle": {

+ 4 - 4
pages/coupon/couponTpl.vue

@@ -5,15 +5,15 @@
 				<view class="coupon-sel coupon-checked" v-if="item.checked"></view>
 				<view class="coupon-sel coupon-checked" v-if="item.checked"></view>
 				<view class="coupon-sel" v-else></view>
 				<view class="coupon-sel" v-else></view>
 				<view class="coupon-title">
 				<view class="coupon-title">
-					<view class="coupon-title-1">满100减50</view>
+					<view class="coupon-title-1">{{item.couponTitle}}</view>
 				</view>
 				</view>
 				<view class="coupon-price">
 				<view class="coupon-price">
-					¥<text>100</text>
+					¥<text>{{item.couponAmount}}</text>
 				</view>
 				</view>
 			</view>
 			</view>
 			<view class="coupon-desc">
 			<view class="coupon-desc">
-				<view><u-icon class="icon" size="30" name="clock"></u-icon> 有效期至:2020-05-12</view>
-				<view><u-icon class="icon" size="30" name="info-circle"></u-icon> 优惠卷使用说明优惠卷使用说明优惠卷使用说明优惠卷使用说明</view>
+				<view><u-icon class="icon" size="30" name="clock"></u-icon> 有效期至:{{item.validDateStr}}</view>
+				<view><u-icon class="icon" size="30" name="info-circle"></u-icon>{{item.ruleDesc}}</view>
 			</view>
 			</view>
 		</view>
 		</view>
 	</view>
 	</view>

+ 110 - 0
pages/coupon/getCoupon/getCoupon.vue

@@ -0,0 +1,110 @@
+<template>
+	<view class="coupon-list">
+		<view class="coupon-box">
+			<view class="coupon-head">
+				<view class="coupon-sel"></view>
+				<view class="coupon-title">
+					<view class="coupon-title-1">满100减50</view>
+				</view>
+				<view class="coupon-price">
+					¥<text>100</text>
+				</view>
+			</view>
+			<view class="coupon-desc">
+				<view><u-icon class="icon" size="30" name="clock"></u-icon> 有效期至:2020-05-12</view>
+				<view><u-icon class="icon" size="30" name="info-circle"></u-icon> 优惠卷使用说明优惠卷使用说明优惠卷使用说明优惠卷使用说明</view>
+			</view>
+		</view>
+		<u-button class="handleSubmit" type="error">确认领取</u-button>
+	</view>
+</template>
+
+<script>
+	export default{
+		name: 'getCoupon',
+		data () {
+			return {
+				
+			}
+		},
+		methods: {
+			// 选中优惠卷
+			checked(item) {
+				if(this.showCheck){
+					let has = this.list.find(item=>item.checked)
+					if(has){
+						has.checked = false
+					}
+					item.checked = true
+					this.$emit('checkOk',item)
+				}
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.coupon-list{
+		width: 100%;
+		height: 100%;
+		padding: 25rpx;
+		.handleSubmit{
+			width: 80%;
+			margin-top: 40%;
+		}
+	}
+	.coupon-box.diabled{
+		background: #999;
+	}
+	.coupon-box{
+		margin-bottom: 30rpx;
+		border-radius: 15rpx;
+		box-shadow: 2rpx 2rpx 10rpx #ddd;
+		background: #ff0000;
+		color: #FFFFFF;
+		.coupon-head{
+			display: flex;
+			align-items: center;
+			padding: 20rpx 30rpx;
+			position: relative;
+			border-bottom: 15rpx dotted #FFFFFF;
+			margin-bottom: -8rpx;
+			.coupon-sel{
+				position: absolute;
+				width: 56rpx;
+				height: 46rpx;
+				right: 0;
+				top: 0;
+			}
+			.coupon-checked{
+				background: url(/static/img/select.png) no-repeat center;
+				background-size: 100% 100%;
+			}
+			.coupon-title{
+				flex-grow: 1;
+				font-size: 32rpx;
+			}
+			.coupon-price{
+				padding: 0 15rpx;
+				color: #FFFFFF;
+				text{
+					font-size: 60rpx;
+				}
+			}
+		}
+		.coupon-desc{
+			padding: 10rpx 30rpx;
+			color: #666;
+			background: #FFFFFF;
+			border-bottom-left-radius:10rpx;
+			border-bottom-right-radius: 10rpx;
+			>view{
+				padding: 5rpx 0;
+			}
+			.icon{
+				margin-right: 10rpx;
+			}
+		}
+		
+	}
+</style>

+ 6 - 5
pages/getOrder/getOrder.vue

@@ -26,7 +26,7 @@
 							<u-icon name="arrow-right" size="28"></u-icon>
 							<u-icon name="arrow-right" size="28"></u-icon>
 						</view>
 						</view>
 					</view>
 					</view>
-					<image src="/static/img/zyts.png" mode="aspectFit"></image>
+					<image src="/static/img/zyts.png" ></image>
 				</view>
 				</view>
 			</view>
 			</view>
 			<!-- 下单 -->
 			<!-- 下单 -->
@@ -488,12 +488,11 @@
 
 
 				.item {
 				.item {
 					background-color: #fff;
 					background-color: #fff;
-					width: 80%;
+					width: 92%;
 					height: 45%;
 					height: 45%;
 					display: flex;
 					display: flex;
 					flex-direction: column;
 					flex-direction: column;
 					align-items: center;
 					align-items: center;
-
 					image {
 					image {
 						width: 80%;
 						width: 80%;
 						flex: 1;
 						flex: 1;
@@ -526,14 +525,16 @@
 						font-size: 24rpx;
 						font-size: 24rpx;
 						color: #333;
 						color: #333;
 					}
 					}
-
 					.item-text {
 					.item-text {
 						width: 100%;
 						width: 100%;
-						padding: 0 20rpx;
+						padding: 0 40rpx;
 						display: flex;
 						display: flex;
 						justify-content: space-between;
 						justify-content: space-between;
 						padding-top: 20rpx;
 						padding-top: 20rpx;
 					}
 					}
+					image {
+						margin-top: 20rpx;
+					}
 				}
 				}
 			}
 			}
 
 

二进制
static/img/zyts.png