wgh/coreshoppro
1
0
Fork 0
mirror of http://git.coreshop.cn/jianweie/coreshoppro.git synced 2025-12-06 19:23:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

【优化】优化首页优惠券组件样式效果，优化优惠券领取列表样式效果。领取优惠券增加loading遮罩层效果。领取优惠券增加redis锁。

Browse Source
This commit is contained in:
大灰灰
2022-10-21 06:18:29 +08:00
parent adfbbc783e
commit c88951e1f3
4 changed files with 95 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
CoreCms.Net.Uni-App/CoreShop/common/mixins/mixinsHelper.js
View File

@@ -304,14 +304,20 @@ module.exports = {
}, },
// 用户领取优惠券 // 用户领取优惠券
receiveCoupon(couponId) { receiveCoupon(couponId) {
uni.showLoading({
title: '加载中',
mask: true
});
let _this = this; let _this = this;
let coreshopdata = { let coreshopdata = {
id: couponId id: couponId
} }
this.$u.api.getCoupon(coreshopdata).then(res => { this.$u.api.getCoupon(coreshopdata).then(res => {
if (res.status) { if (res.status) {
uni.hideLoading();
_this.$refs.uToast.show({ message: res.msg, type: 'success', back: false }) _this.$refs.uToast.show({ message: res.msg, type: 'success', back: false })
} else { } else {
uni.hideLoading();
_this.$u.toast(res.msg) _this.$u.toast(res.msg)
} }
}) })

19
CoreCms.Net.Uni-App/CoreShop/components/coreshop-page/coreshop-coupon.vue
View File

@@ -10,7 +10,6 @@
<text class="iconfont icon-youjiantou-tianchong more-icon"></text> <text class="iconfont icon-youjiantou-tianchong more-icon"></text>
</view>--> </view>-->
<u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left" @tap="$u.route('/pages/coupon/coupon')"></u-icon> <u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left" @tap="$u.route('/pages/coupon/coupon')"></u-icon>
</view> </view>
<scroll-view class="groupon-scroll" enable-flex scroll-anchoring scroll-x scroll-with-animation> <scroll-view class="groupon-scroll" enable-flex scroll-anchoring scroll-x scroll-with-animation>
<view class="groupon-card-wrap coreshop-flex coreshop-align-center"> <view class="groupon-card-wrap coreshop-flex coreshop-align-center">
@@ -32,7 +31,7 @@
<view class="coreshop-padding-right-5"> <view class="coreshop-padding-right-5">
<view class="coupon-wrap " :style="{ background: `linear-gradient(to right, ${bgColor1}, ${bgColor2})` }"> <view class="coupon-wrap " :style="{ background: `linear-gradient(to right, ${bgColor1}, ${bgColor2})` }">
<view class="coupon-item coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between"> <view class="coupon-item coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between">
<view class="coupon-left coreshop-flex coreshop-flex-direction "> <view class="coupon-left coreshop-flex coreshop-flex-direction">
<view class="sum-box"> <view class="sum-box">
<text class="unit" style="color: #6b3f12">￥</text> <text class="unit" style="color: #6b3f12">￥</text>
<!--<text class="sum " style="color: #6b3f12">{{ item.name }}</text>--> <!--<text class="sum " style="color: #6b3f12">{{ item.name }}</text>-->
@@ -106,8 +105,8 @@
<style lang="scss" scoped> <style lang="scss" scoped>
// 失效 // 失效
.gray-wrap { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1) !important; -webkit-filter: grayscale(100%) !important; -moz-filter: grayscale(100%) !important; -ms-filter: grayscale(100%) !important; -o-filter: grayscale(100%) !important; filter: grayscale(100%) !important; filter: gray !important; } .gray-wrap { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1) !important; -webkit-filter: grayscale(100%) !important; -moz-filter: grayscale(100%) !important; -ms-filter: grayscale(100%) !important; -o-filter: grayscale(100%) !important; filter: grayscale(100%) !important; filter: gray !important; }
.groupon-scroll { height: 85px; width: 375px; .groupon-scroll { height: 100px;
.groupon-card-wrap { height: 85px; width: 375px; } .groupon-card-wrap { height: 100px; }
} }
.coupon-box { background-color: #fff; .coupon-box { background-color: #fff;
.head-box { .head-box {
@@ -117,7 +116,7 @@
.more-icon { color: #333333; font-size: 12px; } .more-icon { color: #333333; font-size: 12px; }
} }
} }
.coupon-card { width: 171.5px; height: 85px; background: linear-gradient(90deg, #f8dca5, #efc480); border-radius: 5px; mask: url($apiFilesUrl+'/static/images/coupon/coupon_mini_bg.png'); -webkit-mask-box-image: url($apiFilesUrl+'/static/images/coupon/coupon_mini_bg.png'); mask-size: 100% 100%; .coupon-card { width: 171.5px; height: 100px; background: linear-gradient(90deg, #f8dca5, #efc480); border-radius: 5px; mask: url($apiFilesUrl+'/static/images/coupon/coupon_mini_bg.png'); -webkit-mask-box-image: url($apiFilesUrl+'/static/images/coupon/coupon_mini_bg.png'); mask-size: 100% 100%;
.card-left { height: 100%; width: 130px; .card-left { height: 100%; width: 130px;
.price { color: #4f3a1e; font-size: 15px; font-weight: bold; .price { color: #4f3a1e; font-size: 15px; font-weight: bold;
&::before { content: '￥'; font-size: 10px; } &::before { content: '￥'; font-size: 10px; }
@@ -130,18 +129,18 @@
} }
} }
// 未领取，已领取 // 未领取，已领取
.coupon-wrap { mask: url($apiFilesUrl+'/static/images/coupon/coupon_bg1.png'); -webkit-mask-box-image: url($apiFilesUrl+'/static/images/coupon/coupon_bg1.png'); mask-size: 100% 100%; position: relative; border-radius: 5px; width: 355px; height: 85px; background: linear-gradient(to right, $u-type-warning-disabled, $u-type-warning); .coupon-wrap { mask: url($apiFilesUrl+'/static/images/coupon/coupon_bg1.png'); -webkit-mask-box-image: url($apiFilesUrl+'/static/images/coupon/coupon_bg1.png'); mask-size: 100% 100%; position: relative; border-radius: 5px; width: 355px; height: 100px; background: linear-gradient(to right, $u-type-warning-disabled, $u-type-warning);
.coupon-item { width: 100%; height: 168rpx; border-radius: 5px; .coupon-item { width: 100%; height: 100%; border-radius: 5px;
.coupon-left { height: 100%; justify-content: center; padding-left: 20px; .coupon-left { justify-content: center; padding-left: 10px; padding-right: 5px;
.unit { font-size: 12px; color: #fff; } .unit { font-size: 12px; color: #fff; }
.sum { font-size: 22.5px; font-weight: bold; color: #fff; line-height: 22.5px; padding-right: 5px; } .sum { font-size: 22.5px; font-weight: bold; color: #fff; line-height: 22.5px; padding-right: 5px; }
.sub { font-size: 18px; font-weight: bold; color: #fff; line-height: 18px; padding-right: 5px; } .sub { font-size: 18px; font-weight: bold; color: #fff; line-height: 18px; padding-right: 5px; }
.notice { font-size: 11px; color: rgba(#fff, 0.7); margin-top: 3px; } .notice { font-size: 11px; color: rgba(#fff, 0.7); margin-top: 3px; }
} }
.coupon-right { height: 100%; width: 110px; justify-content: center; align-items: center; .coupon-right { min-width: 110px; justify-content: center; align-items: center; padding-right: 5px;
.get-btn { width: 72px; height: 27px; background: #ffffff; border-radius: 13px; padding: 0; font-size: 12px; font-weight: 500; color: $u-type-warning; } .get-btn { width: 72px; height: 27px; background: #ffffff; border-radius: 13px; padding: 0; font-size: 12px; font-weight: 500; color: $u-type-warning; }
.surplus-num { font-size: 11px; font-weight: 500; color: #fff; margin-top: 7px; } .surplus-num { font-size: 11px; font-weight: 500; color: #fff; margin-top: 7px; }
} }
} }
} }
</style> </style>

48
CoreCms.Net.Uni-App/CoreShop/pages/coupon/coupon.vue
View File

@@ -13,31 +13,29 @@
<view class="coreshop-coupon coreshop-margin-left-10 coreshop-margin-right-10 coreshop-margin-bottom-10 coreshop-margin-top-10"> <view class="coreshop-coupon coreshop-margin-left-10 coreshop-margin-right-10 coreshop-margin-bottom-10 coreshop-margin-top-10">
<view v-if="list.length"> <view v-if="list.length">
<view v-for="(item, key) in list" :key="key"> <view class="coreshop-coupon-card-view coreshop-margin-bottom-10" :class="item.maxRecevieNums > 0 && item.getNumber >= item.maxRecevieNums ?'coreshop-lower-shelf':''" v-for="(item, key) in list" :key="key">
<view class="coreshop-coupon-card-view" :class="item.maxRecevieNums > 0 && item.getNumber >= item.maxRecevieNums ?'coreshop-lower-shelf':''"> <view class="img-lower-box" v-if="item.maxRecevieNums > 0 && item.getNumber >= item.maxRecevieNums ">已领完</view>
<view class="img-lower-box" v-if="item.maxRecevieNums > 0 && item.getNumber >= item.maxRecevieNums ">已领完</view> <view class="card-price-view">
<view class="card-price-view"> <view class="coreshop-text-red price-left-view">
<view class="coreshop-text-red price-left-view"> <image class="icon" src="/static/images/coupon/coupon-element.png" mode=""></image>
<image class="icon" src="/static/images/coupon/coupon-element.png" mode=""></image>
</view>
<view class="name-content-view">
<view class="u-line-1 coreshop-text-red"> {{item.name}}</view>
<view class="coreshop-font-xs">
优惠方式：<text v-for="(itemResult, index) in item.results" :key="index">{{itemResult}}</text>
</view>
<view class="coreshop-font-xs">领取时间：{{$u.timeFormat(item.startTime, 'yyyy-mm-dd')}} - {{$u.timeFormat(item.endTime, 'yyyy-mm-dd')}}</view>
</view>
<view class="btn-right-view">
<u-button type="success" shape="circle" size="mini" @click="receiveCoupon(item.id)">立即领取</u-button>
</view>
</view> </view>
<view class="card-num-view coreshop-flex coreshop-flex-direction-row coreshop-justify-between"> <view class="name-content-view">
<view class="coreshop-font-xs coreshop-flex-direction-row coreshop-basis-9 u-line-1"> <view class="u-line-1 coreshop-text-red"> {{item.name}}</view>
<text v-for="(itemCondition, index) in item.conditions" :key="index">【{{itemCondition}}】</text> <view class="coreshop-font-xs">
</view> 优惠方式：<text v-for="(itemResult, index) in item.results" :key="index">{{itemResult}}</text>
<view class="coreshop-width-fit-content">
<u-icon name="arrow-down-fill" class="coreshop-float-right" size="14"></u-icon>
</view> </view>
<view class="coreshop-font-xs">领取时间：{{$u.timeFormat(item.startTime, 'yyyy-mm-dd')}} - {{$u.timeFormat(item.endTime, 'yyyy-mm-dd')}}</view>
</view>
<view class="btn-right-view">
<u-button type="success" shape="circle" size="mini" @click="receiveCoupon(item.id)">立即领取</u-button>
</view>
</view>
<view class="card-num-view coreshop-flex coreshop-flex-direction-row coreshop-justify-between">
<view class="coreshop-font-xs coreshop-flex-direction-row coreshop-basis-9 u-line-2">
<text v-for="(itemCondition, index) in item.conditions" :key="index">【{{itemCondition}}】</text>
</view>
<view class="coreshop-width-fit-content">
<u-icon name="arrow-down-fill" class="coreshop-float-right" size="14"></u-icon>
</view> </view>
</view> </view>
</view> </view>
@@ -60,9 +58,9 @@
</template> </template>
<script> <script>
export default { export default {
computed: { computed: {
}, },
data() { data() {

87
CoreCms.Net.Web.WebApi/Controllers/CouponController.cs
View File

@@ -12,6 +12,7 @@ using System;
using System.Linq; using System.Linq;
using System.Threading.Tasks; using System.Threading.Tasks;
using CoreCms.Net.Auth.HttpContextUser; using CoreCms.Net.Auth.HttpContextUser;
using CoreCms.Net.Caching.AutoMate.RedisCache;
using CoreCms.Net.Configuration; using CoreCms.Net.Configuration;
using CoreCms.Net.IServices; using CoreCms.Net.IServices;
using CoreCms.Net.Model.Entities; using CoreCms.Net.Model.Entities;
@@ -33,18 +34,19 @@ namespace CoreCms.Net.Web.WebApi.Controllers
private readonly IHttpContextUser _user; private readonly IHttpContextUser _user;
private readonly ICoreCmsCouponServices _couponServices; private readonly ICoreCmsCouponServices _couponServices;
private readonly ICoreCmsPromotionServices _promotionServices; private readonly ICoreCmsPromotionServices _promotionServices;
private readonly IRedisOperationRepository _redisOperationRepository;
/// <summary> /// <summary>
/// 构造函数 /// 构造函数
/// </summary> /// </summary>
/// <param name="user"></param>
/// <param name="couponServices"></param>
/// <param name="promotionServices"></param>
public CouponController(IHttpContextUser user public CouponController(IHttpContextUser user
, ICoreCmsCouponServices couponServices, ICoreCmsPromotionServices promotionServices) , ICoreCmsCouponServices couponServices, ICoreCmsPromotionServices promotionServices, IRedisOperationRepository redisOperationRepository)
{ {
_user = user; _user = user;
_couponServices = couponServices; _couponServices = couponServices;
_promotionServices = promotionServices; _promotionServices = promotionServices;
_redisOperationRepository = redisOperationRepository;
} }
//公共接口==================================================================================================== //公共接口====================================================================================================
@@ -139,37 +141,62 @@ namespace CoreCms.Net.Web.WebApi.Controllers
{ {
var jm = new WebApiCallBack(); var jm = new WebApiCallBack();
if (entity.id == 0) var lockKey = "LOCK_GetCoupon:user_" + entity.id;
var lockHolder = Guid.NewGuid().ToString("N"); //锁持有者
var redisUserLock = await _redisOperationRepository.LockTakeAsync(lockKey, lockHolder, TimeSpan.FromSeconds(5));
if (redisUserLock)
{ {
jm.msg = GlobalErrorCodeVars.Code15006; try
return jm;
}
//判断优惠券是否可以领取?
var promotionModel = await _promotionServices.ReceiveCoupon(entity.id);
if (promotionModel.status == false)
{
return promotionModel;
}
var promotion = (CoreCmsPromotion)promotionModel.data;
if (promotion == null)
{
jm.msg = GlobalErrorCodeVars.Code15019;
return jm;
}
if (promotion.maxNums > 0)
{
//判断用户是否已领取?领取次数
var couponResult = await _couponServices.GetMyCoupon(_user.ID, entity.id, "all", 1, 9999);
if (couponResult.status && couponResult.code >= promotion.maxNums)
{ {
jm.msg = GlobalErrorCodeVars.Code15018; if (entity.id == 0)
{
jm.msg = GlobalErrorCodeVars.Code15006;
return jm;
}
//判断优惠券是否可以领取?
var promotionModel = await _promotionServices.ReceiveCoupon(entity.id);
if (promotionModel.status == false)
{
return promotionModel;
}
var promotion = (CoreCmsPromotion)promotionModel.data;
if (promotion == null)
{
jm.msg = GlobalErrorCodeVars.Code15019;
return jm;
}
if (promotion.maxNums > 0)
{
//判断用户是否已领取?领取次数
var couponResult = await _couponServices.GetMyCoupon(_user.ID, entity.id, "all", 1, 9999);
if (couponResult.status && couponResult.code >= promotion.maxNums)
{
jm.msg = GlobalErrorCodeVars.Code15018;
return jm;
}
}
jm = await _couponServices.AddData(_user.ID, entity.id, promotion);
jm.otherData = promotionModel;
return jm; return jm;
}
catch (Exception e)
{
jm.msg = "数据处理异常";
jm.otherData = e;
}
finally
{
await _redisOperationRepository.LockReleaseAsync(lockKey, lockHolder);
} }
} }
jm = await _couponServices.AddData(_user.ID, entity.id, promotion); else
jm.otherData = promotionModel; {
jm.msg = "当前请求太频繁_请稍后再试";
}
return jm; return jm;
} }
#endregion #endregion