【优惠劵领取】

1. 实现功能

api/promotion/coupon.js

@@ -5,3 +5,14 @@ export function takeCoupon(templateId) {
     templateId
   });
 }
+
+export function getCouponTemplateList(spuId, useType) {
+  return request.get("app-api/promotion/coupon-template/list", {
+    spuId,
+    useType
+  });
+}
+
+export function getCouponTemplatePage(data) {
+  return request.get("app-api/promotion/coupon-template/page", data);
+}

api/promotion/couponTemplate.js

@@ -1,8 +0,0 @@
-import request from "@/utils/request.js";
-
-export function getCouponTemplateList(spuId, useType) {
-  return request.get("app-api/promotion/coupon-template/list", {
-    spuId,
-    useType
-  });
-}

components/couponListWindow/index.vue

@@ -21,9 +21,9 @@
 						<view class='text'>
               <!-- 类型 -->
 							<view class='condition line2'>
-								<span class='line-title' :class='item.isUse?"gray":""' v-if='item.useType===1'>通用</span>
+								<span class='line-title' :class='item.isUse?"gray":""' v-if='type === 1'>通用</span>
 								<span class='line-title' :class='item.isUse?"gray":""'
-									v-else-if='item.useType===3'>品类</span>
+									v-else-if='type === 3'>品类</span>
 								<span class='line-title' :class='item.isUse?"gray":""' v-else>商品</span>
 								<span>{{item.name}}</span>
 							</view>

pages/goods_details/index.vue

@@ -290,7 +290,7 @@
   import * as ProductSpuApi from '@/api/product/spu.js';
   import * as ProductFavoriteApi from '@/api/product/favorite.js';
   import * as ProductCommentApi from '@/api/product/comment.js';
-  import * as CouponTemplateApi from '@/api/promotion/couponTemplate.js';
+  import * as CouponApi from '@/api/promotion/coupon.js';
   import * as PromotionActivityApi from '@/api/promotion/activity.js';
   import * as TradeCartApi from '@/api/trade/cart.js';
   import * as Util from '@/utils/util.js';
@@ -820,7 +820,7 @@
        * 获取优惠券
        */
       getCouponList(useType) {
-        CouponTemplateApi.getCouponTemplateList(this.id, useType).then(res => {
+        CouponApi.getCouponTemplateList(this.id, useType).then(res => {
           this.$set(this.coupon, 'list', res.data);
         })
       },

pages/users/user_get_coupon/index.vue

@@ -9,65 +9,50 @@
 		<view style="height: 106rpx;"></view>
 		<view class='coupon-list' v-if="couponsList.length">
 			<view class='item acea-row row-center-wrapper' v-for="(item,index) in couponsList" :key="index">
-				<view class='money' :class='item.isUse ? "moneyGray" : "" '>
+				<view class='money' :class='item.takeStatus ? "moneyGray" : "" '>
-					<view>￥<text class='num'>{{item.money?Number(item.money):''}}</text></view>
+          <view>￥
-					<view class="pic-num">满{{item.minPrice?Number(item.minPrice):''}}元可用</view>
+            <text v-if="item.discountType === 1" class='num'>{{ fen2yuan(item.discountPrice) }}</text>
+            <text v-else class='num'>{{ (item.discountPercent / 10.0).toFixed(1) }} 折</text>
+          </view>
+          <view class="pic-num">满 {{ fen2yuan(item.usePrice) }} 元可用</view>
 				</view>
 				<view class='text'>
 					<view class='condition line2'>
-						<span class='line-title' :class='(item.isUse==true || item.isUse==2)?"gray":""'
+						<span class='line-title' :class='(item.takeStatus)?"gray":""'
-							v-if='item.useType===1'>通用</span>
+							v-if='type === 1'>通用</span>
-						<span class='line-title' :class='(item.isUse==true || item.isUse==2)?"gray":""'
+						<span class='line-title' :class='(item.takeStatus)?"gray":""'
-							v-else-if='item.useType===3'>品类</span>
+							v-else-if='type === 3'>品类</span>
-						<span class='line-title' :class='(item.isUse==true || item.isUse==2)?"gray":""' v-else>商品</span>
+						<span class='line-title' :class='(item.takeStatus)?"gray":""' v-else>商品</span>
 						<span>{{item.name}}</span>
 					</view>
 					<view class='data acea-row row-between-wrapper'>
-						<view v-if="item.day>0">领取后{{item.day}}天内可用</view>
+            <view v-if="item.validityType > 1">领取后 {{ item.fixedEndTerm }} 天内可用</view>
-						<view v-else>
+            <view v-else>
-							{{ item.useStartTimeStr&& item.useEndTimeStr ? item.useStartTimeStr + " - " + item.useEndTimeStr : ""}}
+              {{ formatDate(item.validStartTime) + " - " + formatDate(item.validEndTime) }}
-						</view>
+            </view>
-						<view class='bnt gray' v-if="item.isUse==true">已领取</view>
+            <view class='bnt gray' v-if="item.takeStatus">已领取</view>
-						<view class='bnt bg-color' v-else @click='getCoupon(item.id,index)'>立即领取</view>
+						<view class='bnt bg-color' v-else @click='getCoupon(item.id, index)'>立即领取</view>
 					</view>
 				</view>
 			</view>
 		</view>
 		<view class='loadingicon acea-row row-center-wrapper'>
-			<text class='loading iconfont icon-jiazai'
+			<text class='loading iconfont icon-jiazai' :hidden='!loading' />{{couponsList.length?loadTitle:''}}
-				:hidden='loading==false'></text>{{couponsList.length?loadTitle:''}}
 		</view>
 		<view class='noCommodity' v-if="!couponsList.length && isShow && !loading">
 			<view class='pictrue'>
-				<image src='../../../static/images/noCoupon.png'></image>
+				<image src='../../../static/images/noCoupon.png' />
 			</view>
 		</view>
-		<!-- #ifdef MP -->
-		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
-		<!-- #endif -->
 	</view>
 </template>
-
 <script>
-	import {
+	import { toLogin } from '@/libs/login.js';
-		getCoupons,
+	import { mapGetters } from "vuex";
-		setCouponReceive
+  import * as CouponApi from '@/api/promotion/coupon.js';
-	} from '@/api/api.js';
+  import * as Util from '@/utils/util.js';
-	import {
+  import dayjs from "@/plugin/dayjs/dayjs.min.js";
-		toLogin
+  export default {
-	} from '@/libs/login.js';
-	import {
-		mapGetters
-	} from "vuex";
-	// #ifdef MP
-	import authorize from '@/components/Authorize';
-	// #endif
-	export default {
-		components: {
-			// #ifdef MP
-			authorize
-			// #endif
-		},
 		data() {
 			return {
 				couponsList: [],
@@ -76,24 +61,20 @@
 				loadTitle: '加载更多', //提示语
 				page: 1,
 				limit: 20,
-				isAuto: false, //没有授权的不会自动授权
-				isShowAuth: false, //是否隐藏授权
 				type: 1,
 				isShow: false,
 				navList: [{
-						type: 1,
+          type: 1,
-						name: '通用券',
+          name: '通用券',
-						count: 0
+          count: 0
-					},
+        }, {
-					{
+          type: 2,
-						type: 2,
+          name: '商品券',
-						name: '商品券',
+          count: 0
-						count: 0
+        }, {
-					},
+          type: 3,
-					{
+          name: '品类券',
-						type: 3,
+          count: 0
-						name: '品类券',
-						count: 0
 					},
 				],
 				count: 0
@@ -111,13 +92,11 @@
 			}
 		},
 		onLoad() {
-
+			if (!this.isLogin) {
-			if (this.isLogin) {
+        toLogin();
-				this.getUseCoupons();
+        return
-
+      }
-			} else {
+      this.getUseCoupons();
-				toLogin();
-			}
 		},
 		/**
 		 * 页面上拉触底事件的处理函数
@@ -126,28 +105,20 @@
 			this.getUseCoupons();
 		},
 		methods: {
-			onLoadFun() {
+      /**
-				this.getUseCoupons();
+       * 领取优惠劵
-			},
+       */
-			// 授权关闭
-			authColse: function(e) {
-				this.isShowAuth = e
-			},
 			getCoupon: function(id, index) {
-				let that = this;
+				// 领取优惠券
-				let list = that.couponsList;
+        CouponApi.takeCoupon(id).then(res => {
-				let ids = [];
+          this.couponsList[index].takeStatus = true;
-				ids.push(id);
+					this.$set(this, 'couponsList', this.couponsList);
-				//领取优惠券
+          this.$util.Tips({
-				setCouponReceive(id).then(function(res) {
-					list[index].isUse = true;
-					that.$set(that, 'couponsList', list);
-					that.$util.Tips({
 						title: '领取成功'
 					});
-				}, function(res) {
+				}).catch(err => {
-					return that.$util.Tips({
+          return this.$util.Tips({
-						title: res
+						title: err
 					});
 				})
 			},
@@ -155,27 +126,27 @@
 			 * 获取领取优惠券列表
 			 */
 			getUseCoupons: function() {
-				let that = this
+				if (this.loadend || this.loading) {
-				if (that.loadend) return false;
+          return false;
-				if (that.loading) return false;
+        }
-				that.loading = true;
+				this.loading = true;
-				getCoupons({
+        CouponApi.getCouponTemplatePage({
-					page: that.page,
+					pageNo: this.page,
-					limit: that.limit,
+          pageSize: this.limit,
-					type: that.type
+					useType: this.type
 				}).then(res => {
-					let list = res.data,
+					const list = res.data.list;
-						loadend = list.length < that.limit;
+          const loadend = list.length < this.limit;
-					let couponsList = that.$util.SplitArray(list, that.couponsList);
+					const couponsList = this.$util.SplitArray(list, this.couponsList);
-					that.$set(that, 'couponsList', couponsList);
+					this.$set(this, 'couponsList', couponsList);
-					that.loadend = loadend;
+					this.loadend = loadend;
-					that.loadTitle = loadend ? '我也是有底线的' : '加载更多';
+					this.loadTitle = loadend ? '我也是有底线的' : '加载更多';
-					that.page = that.page + 1;
+					this.page = this.page + 1;
-					that.loading = false;
+					this.loading = false;
-					that.isShow = true;
+					this.isShow = true;
 				}).catch(err => {
-					that.loading = false;
+					this.loading = false;
-					that.loadTitle = '加载更多';
+					this.loadTitle = '加载更多';
 				});
 			},
 			setType: function(type) {
@@ -186,11 +157,17 @@
 					this.loadend = false;
 					this.getUseCoupons();
 				}
-			}
+			},
+
+      fen2yuan(price) {
+        return Util.fen2yuan(price)
+      },
+      formatDate: function(date) {
+        return dayjs(date).format("YYYY-MM-DD");
+      }
 		}
 	}
 </script>
-
 <style scoped>
 	.nav {
 		position: fixed;