wgh/coreshoppro
1
0
Fork 0
mirror of http://git.coreshop.cn/jianweie/coreshoppro.git synced 2025-12-06 20:43: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) {
uni.showLoading({
title: '加载中',
mask: true
});
let _this = this;
let coreshopdata = {
id: couponId
}
this.$u.api.getCoupon(coreshopdata).then(res => {
if (res.status) {
uni.hideLoading();
_this.$refs.uToast.show({ message: res.msg, type: 'success', back: false })
} else {
uni.hideLoading();
_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>
</view>-->
<u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left" @tap="$u.route('/pages/coupon/coupon')"></u-icon>
</view>
<scroll-view class="groupon-scroll" enable-flex scroll-anchoring scroll-x scroll-with-animation>
<view class="groupon-card-wrap coreshop-flex coreshop-align-center">
@@ -32,7 +31,7 @@
<view class="coreshop-padding-right-5">
<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-left coreshop-flex coreshop-flex-direction ">
<view class="coupon-left coreshop-flex coreshop-flex-direction">
<view class="sum-box">
<text class="unit" style="color: #6b3f12">￥</text>
<!--<text class="sum " style="color: #6b3f12">{{ item.name }}</text>-->
@@ -106,8 +105,8 @@
<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; }
.groupon-scroll { height: 85px; width: 375px;
.groupon-card-wrap { height: 85px; width: 375px; }
.groupon-scroll { height: 100px;
.groupon-card-wrap { height: 100px; }
}
.coupon-box { background-color: #fff;
.head-box {
@@ -117,7 +116,7 @@
.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;
.price { color: #4f3a1e; font-size: 15px; font-weight: bold;
&::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-item { width: 100%; height: 168rpx; border-radius: 5px;
.coupon-left { height: 100%; justify-content: center; padding-left: 20px;
.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: 100%; border-radius: 5px;
.coupon-left { justify-content: center; padding-left: 10px; padding-right: 5px;
.unit { font-size: 12px; color: #fff; }
.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; }
.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; }
.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 v-if="list.length">
<view 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="card-price-view">
<view class="coreshop-text-red price-left-view">
<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 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="img-lower-box" v-if="item.maxRecevieNums > 0 && item.getNumber >= item.maxRecevieNums ">已领完</view>
<view class="card-price-view">
<view class="coreshop-text-red price-left-view">
<image class="icon" src="/static/images/coupon/coupon-element.png" mode=""></image>
</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-1">
<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 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 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>
@@ -60,9 +58,9 @@
</template>
<script>
export default {
computed: {
},
data() {