parent
33311ae19c
commit
d89f64f80f
|
@ -0,0 +1,7 @@
|
|||
import request from "@/utils/request.js";
|
||||
|
||||
export function takeCoupon(templateId) {
|
||||
return request.post("app-api/promotion/coupon/take", {
|
||||
templateId
|
||||
});
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
import request from "@/utils/request.js";
|
||||
|
||||
export function getCouponTemplateList(spuId, useType) {
|
||||
return request.get("app-api/promotion/coupon-template/list", {
|
||||
spuId,
|
||||
useType
|
||||
});
|
||||
}
|
|
@ -6,18 +6,20 @@
|
|||
<view :class="['acea-row', 'row-middle', type === 2 ? 'on' : '']" @click="setType(2)">商品券</view>
|
||||
<view :class="['acea-row', 'row-middle', type === 3 ? 'on' : '']" @click="setType(3)">品类券</view>
|
||||
</view>
|
||||
<!-- <view class="occupy" v-if="!orderShow"></view> -->
|
||||
<!-- <view class='title'>优惠券<text class='iconfont icon-guanbi' @click='close'></text></view> -->
|
||||
<view class='coupon-list' :style="{'margin-top':!orderShow?'0':'50rpx'}">
|
||||
<block v-if="coupon.list.length">
|
||||
<!-- <view class='item acea-row row-center-wrapper' v-for="(item,index) in coupon.list" :key='index'> -->
|
||||
<view class='item acea-row row-center-wrapper' v-for="(item,index) in coupon.list"
|
||||
@click="getCouponUser(index,item.id)" :key='index'>
|
||||
<view class='money acea-row row-column row-center-wrapper' :class='item.isUse?"moneyGray":""'>
|
||||
<view>¥<text class='num'>{{item.money?Number(item.money):''}}</text></view>
|
||||
<view class="pic-num">满{{item.minPrice}}元可用</view>
|
||||
@click="getCouponUser(index, item.id)" :key='index'>
|
||||
<!-- 金额 -->
|
||||
<view class='money acea-row row-column row-center-wrapper' :class='item.takeStatus?"moneyGray":""'>
|
||||
<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?"gray":""' v-if='item.useType===1'>通用</span>
|
||||
<span class='line-title' :class='item.isUse?"gray":""'
|
||||
|
@ -25,12 +27,13 @@
|
|||
<span class='line-title' :class='item.isUse?"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>
|
||||
{{ item.useStartTimeStr&& item.useEndTimeStr ? item.useStartTimeStr + " - " + item.useEndTimeStr : ""}}
|
||||
{{ formatDate(item.validStartTime) + " - " + formatDate(item.validEndTime) }}
|
||||
</view>
|
||||
<view class='bnt gray' v-if="item.isUse">{{item.use_title || '已领取'}}</view>
|
||||
<view class='bnt gray' v-if="item.takeStatus">{{item.use_title || '已领取'}}</view>
|
||||
<view class='bnt bg-color' v-else>{{coupon.statusTile || '立即领取'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
@ -41,21 +44,19 @@
|
|||
<image src='../../static/images/noCoupon.png'></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class='mask' catchtouchmove="true" :hidden='coupon.coupon==false' @click='close'></view>
|
||||
<view class='mask' catchtouchmove="true" :hidden='!coupon.coupon' @click='close'></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
setCouponReceive
|
||||
} from '@/api/api.js';
|
||||
export default {
|
||||
import * as Util from '@/utils/util.js';
|
||||
import dayjs from "@/plugin/dayjs/dayjs.min.js";
|
||||
import * as CouponApi from '@/api/promotion/coupon.js';
|
||||
export default {
|
||||
props: {
|
||||
//打开状态 0=领取优惠券,1=使用优惠券
|
||||
openType: {
|
||||
type: Number,
|
||||
type: Number, // 打开状态 0=领取优惠券, 1=使用优惠券
|
||||
default: 0,
|
||||
},
|
||||
coupon: {
|
||||
|
@ -64,9 +65,8 @@
|
|||
return {};
|
||||
}
|
||||
},
|
||||
//下单页面使用优惠券组件不展示tab切换页
|
||||
orderShow: {
|
||||
type: String,
|
||||
type: String, // 下单页面使用优惠券组件不展示 tab 切换页
|
||||
default: function() {
|
||||
return '';
|
||||
}
|
||||
|
@ -74,41 +74,45 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
type: 1
|
||||
type: 1 // 使用类型
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
close: function() {
|
||||
this.type = 1
|
||||
this.$emit('ChangCouponsClone');
|
||||
},
|
||||
getCouponUser: function(index, id) {
|
||||
let that = this;
|
||||
let list = that.coupon.list;
|
||||
if (list[index].isUse == true && this.openType == 0) return true;
|
||||
// 领取优惠劵时,如果已经领取,则直接跳过
|
||||
let list = this.coupon.list;
|
||||
if (list[index].takeStatus && this.openType === 0) {
|
||||
return true;
|
||||
}
|
||||
switch (this.openType) {
|
||||
case 0:
|
||||
//领取优惠券
|
||||
let ids = [];
|
||||
ids.push(id);
|
||||
setCouponReceive(id).then(res => {
|
||||
that.$emit('ChangCouponsUseState', index);
|
||||
that.$util.Tips({
|
||||
case 0: // 领取优惠券
|
||||
CouponApi.takeCoupon(id).then(res => {
|
||||
this.$util.Tips({
|
||||
title: "领取成功"
|
||||
});
|
||||
that.$emit('ChangCoupons', list[index]);
|
||||
this.$emit('ChangCoupons', list[index]);
|
||||
})
|
||||
break;
|
||||
case 1:
|
||||
that.$emit('ChangCoupons', index);
|
||||
case 1: // 使用优惠劵
|
||||
this.$emit('ChangCoupons', index);
|
||||
break;
|
||||
}
|
||||
},
|
||||
setType: function(type) {
|
||||
this.type = type;
|
||||
this.$emit('tabCouponType', type);
|
||||
}
|
||||
},
|
||||
|
||||
fen2yuan(price) {
|
||||
return Util.fen2yuan(price)
|
||||
},
|
||||
formatDate: function(date) {
|
||||
return dayjs(date).format("YYYY-MM-DD");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -14,7 +14,11 @@
|
|||
</view>
|
||||
<view class="time">{{ formatDate(item.createTime) }}</view>
|
||||
</view>
|
||||
<view class="sku">规格:{{ item.sku?item.sku:'无' }}</view>
|
||||
<view class="sku">规格:
|
||||
<text v-for="(property, propertyIndex) in item.skuProperties" :key="propertyIndex" style="padding-right: 2px">
|
||||
{{ property.valueName }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="evaluate-infor">{{ item.content }}</view>
|
||||
<view class="imgList acea-row" v-if="item.picUrls && item.picUrls.length > 0">
|
||||
|
|
|
@ -43,13 +43,15 @@
|
|||
销量:{{ spu.salesCount}} {{ spu.unitName }}
|
||||
</view>
|
||||
</view>
|
||||
<!-- 优惠劵 TODO 芋艿:待接入 -->
|
||||
<!-- 优惠劵 -->
|
||||
<view v-if="coupon.list.length > 0 && type==='normal'"
|
||||
class='coupon acea-row row-between-wrapper' @click='couponTap'>
|
||||
<view class='hide line1 acea-row'>
|
||||
优惠券:
|
||||
<view class='activity'>
|
||||
满{{ coupon.list[0].minPrice }}减{{ coupon.list[0].money }}
|
||||
满{{ fen2yuan(coupon.list[0].usePrice) }}
|
||||
<text v-if="coupon.list[0].discountType === 1"> 减 {{ fen2yuan(coupon.list[0].discountPrice) }} 元</text>
|
||||
<text v-else>打 {{ (coupon.list[0].discountPercent / 10.0).toFixed(1) }} 折</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='iconfont icon-jiantou'></view>
|
||||
|
@ -228,9 +230,13 @@
|
|||
@close="closeAttr"
|
||||
/>
|
||||
<home></home>
|
||||
<!-- 优惠劵弹窗 TODO 芋艿:待实现 -->
|
||||
<couponListWindow :coupon='coupon' @ChangCouponsClone="ChangCouponsClone" @ChangCoupons="ChangCoupons"
|
||||
@ChangCouponsUseState="ChangCouponsUseState" @tabCouponType="tabCouponType"></couponListWindow>
|
||||
<!-- 优惠劵弹窗 -->
|
||||
<couponListWindow
|
||||
:coupon='coupon'
|
||||
@ChangCouponsClone="ChangCouponsClone"
|
||||
@ChangCoupons="ChangCoupons"
|
||||
@tabCouponType="tabCouponType"
|
||||
/>
|
||||
<!-- 分享按钮 -->
|
||||
<view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">
|
||||
<!-- #ifndef MP -->
|
||||
|
@ -281,9 +287,6 @@
|
|||
getProductGood
|
||||
} from '@/api/store.js';
|
||||
import { spread } from "@/api/user";
|
||||
import {
|
||||
getCoupons
|
||||
} from '@/api/api.js';
|
||||
import { toLogin } from '@/libs/login.js';
|
||||
import { mapGetters } from "vuex";
|
||||
import { imageBase64 } from "@/api/public";
|
||||
|
@ -297,13 +300,13 @@
|
|||
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 TradeCartApi from '@/api/trade/cart.js';
|
||||
import * as Util from '@/utils/util.js';
|
||||
import * as ProductUtil from '@/utils/product.js';
|
||||
// #ifdef MP
|
||||
import { base64src } from '@/utils/base64src.js'
|
||||
import { getQrcode } from '@/api/api.js';
|
||||
import {getCommentList} from "../../api/product/comment";
|
||||
// #endif
|
||||
const app = getApp();
|
||||
export default {
|
||||
|
@ -346,14 +349,11 @@
|
|||
// ========== 收藏相关的变量 ==========
|
||||
userCollect: false,
|
||||
|
||||
// ========== 优惠劵相关的变量 ② TODO ==========
|
||||
couponList: [], // 优惠券 TODO 芋艿:待实现
|
||||
// 属性是否打开 TODO 待实现
|
||||
// ========== 优惠劵相关的变量 ==========
|
||||
coupon: {
|
||||
coupon: false,
|
||||
type: 1,
|
||||
list: [],
|
||||
count: []
|
||||
coupon: false, // 弹窗是否打开
|
||||
type: 1, // 筛选的优惠劵类型
|
||||
list: [], // 优惠劵列表
|
||||
},
|
||||
|
||||
// ========== 营销活动相关的变量 ③ TODO ==========
|
||||
|
@ -809,6 +809,50 @@
|
|||
}
|
||||
},
|
||||
|
||||
// ========== 优惠劵相关方法 ==========
|
||||
/**
|
||||
* 获取优惠券
|
||||
*/
|
||||
getCouponList(useType) {
|
||||
CouponTemplateApi.getCouponTemplateList(this.id, useType).then(res => {
|
||||
this.$set(this.coupon, 'list', res.data);
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 打开优惠券弹窗
|
||||
*/
|
||||
couponTap: function() {
|
||||
if (!this.isLogin) {
|
||||
toLogin();
|
||||
return
|
||||
}
|
||||
this.getCouponList(1);
|
||||
this.$set(this.coupon, 'coupon', true);
|
||||
},
|
||||
/**
|
||||
* 关闭优惠劵弹窗
|
||||
*/
|
||||
ChangCouponsClone: function() {
|
||||
this.$set(this.coupon, 'coupon', false)
|
||||
},
|
||||
/**
|
||||
* 切换优惠劵弹窗的使用类型
|
||||
*
|
||||
* @param useType 使用类型
|
||||
*/
|
||||
tabCouponType(useType) {
|
||||
this.$set(this.coupon, 'type', useType);
|
||||
this.getCouponList(useType);
|
||||
},
|
||||
/**
|
||||
* 领取完毕后,刷新下优惠劵列表
|
||||
*/
|
||||
ChangCoupons: function(coupon) {
|
||||
// let couponList = this.$util.ArrayRemove(this.couponList, 'id', coupon.id);
|
||||
// this.$set(this, 'coupon.couponList', couponList);
|
||||
this.getCouponList(this.coupon.type);
|
||||
},
|
||||
|
||||
// === TODO 芋艿:未处理 ====
|
||||
|
||||
kefuClick() {
|
||||
|
@ -867,18 +911,6 @@
|
|||
})
|
||||
}
|
||||
},
|
||||
ChangCouponsClone: function() {
|
||||
this.$set(this.coupon, 'coupon', false)
|
||||
},
|
||||
/**
|
||||
* 领取完毕移除当前页面领取过的优惠券展示
|
||||
*/
|
||||
ChangCoupons: function(e) {
|
||||
let coupon = e;
|
||||
let couponList = this.$util.ArrayRemove(this.couponList, 'id', coupon.id);
|
||||
this.$set(this, 'couponList', couponList);
|
||||
this.getCouponList();
|
||||
},
|
||||
|
||||
/**
|
||||
* 优品推荐
|
||||
|
@ -909,49 +941,6 @@
|
|||
})
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取优惠券
|
||||
*/
|
||||
getCouponList(type) {
|
||||
let that = this,
|
||||
obj = {
|
||||
page: 1,
|
||||
limit: 20,
|
||||
productId: that.id,
|
||||
type: type
|
||||
};
|
||||
if (type != undefined || type != null) {
|
||||
obj.type = type;
|
||||
} else {
|
||||
obj.type = "";
|
||||
}
|
||||
getCoupons(obj).then(res => {
|
||||
that.$set(that.coupon, 'list', res.data);
|
||||
});
|
||||
},
|
||||
tabCouponType(type) {
|
||||
this.$set(this.coupon, 'type', type);
|
||||
this.getCouponList(type);
|
||||
},
|
||||
|
||||
ChangCouponsUseState(index) {
|
||||
let that = this;
|
||||
that.coupon.list[index].isUse = true;
|
||||
that.$set(that.coupon, 'list', that.coupon.list);
|
||||
that.$set(that.coupon, 'coupon', false);
|
||||
},
|
||||
/**
|
||||
* 打开优惠券插件
|
||||
*/
|
||||
couponTap: function() {
|
||||
let that = this;
|
||||
if (that.isLogin === false) {
|
||||
toLogin();
|
||||
} else {
|
||||
that.getCouponList(1);
|
||||
that.$set(that.coupon, 'coupon', true);
|
||||
}
|
||||
},
|
||||
|
||||
// ========== 分销相关的方法 ==========
|
||||
/**
|
||||
|
|
Loading…
Reference in New Issue