yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

【商品详情】 

1. 接入优惠劵逻辑
pull/1/MERGE
YunaiV 2023-06-10 09:57:20 +08:00
parent 33311ae19c
commit d89f64f80f
5 changed files with 120 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
api/promotion/coupon.js Normal file
View File

@ -0,0 +1,7 @@
import request from "@/utils/request.js";
export function takeCoupon(templateId) {
return request.post("app-api/promotion/coupon/take", {
templateId
});
}

8
api/promotion/couponTemplate.js Normal file
View File

@ -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
});
}

76
components/couponListWindow/index.vue
View File

@ -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>

6
components/userEvaluation/index.vue
View File

@ -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">

131
pages/goods_details/index.vue
View File

@ -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);
}
},
// ========== 分销相关的方法 ==========
/**