jiazhizhong/crmeb_java
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

全新UI视觉体验，移动端API优化降低重复调用，提高并发6倍，修复N多Bug

Browse Source
This commit is contained in:
stivepeim
2021-06-11 17:41:16 +08:00
parent 0b9f28fa52
commit b76840e10f
582 changed files with 35633 additions and 28276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

291
app/components/couponListWindow/index.vue
View File

@@ -1,110 +1,235 @@
<template>
<view>
<view class='coupon-list-window' :class='coupon.coupon==true?"on":""'>
<view class='title'>优惠券<text class='iconfont icon-guanbi' @click='close'></text></view>
<view class='coupon-list' v-if="coupon.list.length">
<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>
</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":""' v-else-if='item.useType===3'>品类</span>
<span class='line-title' :class='item.isUse?"gray":""' v-else>商品</span>
<span>{{item.name}}</span>
<view v-if="!orderShow" class="nav acea-row row-around">
<view :class="['acea-row', 'row-middle', type === 1 ? 'on' : '']" @click="setType(1)">通用券</view>
<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>
</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":""'
v-else-if='item.useType===3'>品类</span>
<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-else>
{{ item.useStartTimeStr&& item.useEndTimeStr ? item.useStartTimeStr + " - " + item.useEndTimeStr : ""}}
</view>
<view class='bnt gray' v-if="item.isUse">{{item.use_title || '已领取'}}</view>
<view class='bnt bg-color' v-else>{{coupon.statusTile || '立即领取'}}</view>
</view>
</view>
</view>
<view class='data acea-row row-between-wrapper'>
<view v-if="item.day>0">领取后{{item.day}}天内可用</view>
<view v-else>{{ item.useStartTimeStr&& item.useEndTimeStr ? item.useStartTimeStr + " - " + item.useEndTimeStr : ""}}</view>
<view class='bnt gray' v-if="item.isUse">{{item.use_title || '已领取'}}</view>
<view class='bnt bg-color' v-else>{{coupon.statusTile || '立即领取'}}</view>
</view>
</view>
</view>
</view>
<!-- 无优惠券 -->
<view class='pictrue' v-else><image src='../../static/images/noCoupon.png'></image></view>
</block>
<!-- 无优惠券 -->
<view class='pictrue' v-else>
<image src='../../static/images/noCoupon.png'></image>
</view>
</view>
</view>
<view class='mask' catchtouchmove="true" :hidden='coupon.coupon==false' @click='close'></view>
</view>
</template>
<script>
import { setCouponReceive } from '@/api/api.js';
import {
setCouponReceive
} from '@/api/api.js';
export default {
props: {
//打开状态 0=领取优惠券,1=使用优惠券
openType: {
type: Number,
default: 0,
},
coupon: {
type: Object,
default: function(){
return {};
}
}
openType: {
type: Number,
default: 0,
},
coupon: {
type: Object,
default: function() {
return {};
}
},
//下单页面使用优惠券组件不展示tab切换页
orderShow: {
type: String,
default: function() {
return '';
}
}
},
data() {
return {
type: 1
};
},
methods: {
close: function () {
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;
switch (this.openType){
case 0:
//领取优惠券
let ids = [];
ids.push(id);
setCouponReceive(id).then(res=>{
that.$emit('ChangCouponsUseState', index);
that.$util.Tips({title: "领取成功"});
that.$emit('ChangCoupons', list[index]);
})
break;
case 1:
that.$emit('ChangCoupons',index);
break;
}
}
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;
switch (this.openType) {
case 0:
//领取优惠券
let ids = [];
ids.push(id);
setCouponReceive(id).then(res => {
that.$emit('ChangCouponsUseState', index);
that.$util.Tips({
title: "领取成功"
});
that.$emit('ChangCoupons', list[index]);
})
break;
case 1:
that.$emit('ChangCoupons', index);
break;
}
},
setType: function(type) {
this.type = type;
this.$emit('tabCouponType', type);
}
}
}
</script>
<style scoped lang="scss">
.coupon-list-window{position:fixed;bottom:0;left:0;width:100%;background-color:#f5f5f5;border-radius:16rpx 16rpx 0 0;z-index:555;transform:translate3d(0,100%,0);transition:all .3s cubic-bezier(.25,.5,.5,.9);}
.coupon-list-window.on{transform:translate3d(0,0,0);}
.coupon-list-window .title{height:124rpx;width:100%;text-align:center;line-height:124rpx;font-size:32rpx;font-weight:bold;position:relative;}
.coupon-list-window .title .iconfont{position:absolute;right:30rpx;top:50%;transform:translateY(-50%);font-size:35rpx;color:#8a8a8a;font-weight:normal;}
.coupon-list-window .coupon-list{margin:0 0 50rpx 0;height:550rpx;overflow:auto;}
.coupon-list-window .pictrue{width:414rpx;height:336rpx;margin:0 auto 50rpx auto;}
.coupon-list-window .pictrue image{width:100%;height:100%;}
.pic-num{color: #fff;font-size: 24rpx;}
.line-title{
width:90rpx;
padding: 0 10rpx;
box-sizing: border-box;
background:rgba(255,247,247,1);
border:1px solid rgba(232,51,35,1);
opacity:1;
border-radius:20rpx;
font-size:20rpx;
color: #E83323;
margin-right: 12rpx;
.coupon-list-window {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #f5f5f5;
border-radius: 16rpx 16rpx 0 0;
z-index: 555;
transform: translate3d(0, 100%, 0);
transition: all .3s cubic-bezier(.25, .5, .5, .9);
}
.line-title.gray{
border-color:#BBB;
color:#bbb;
background-color:#F5F5F5;
.coupon-list-window.on {
transform: translate3d(0, 0, 0);
}
.coupon-list-window .title {
height: 124rpx;
width: 100%;
text-align: center;
line-height: 124rpx;
font-size: 32rpx;
font-weight: bold;
position: relative;
}
.coupon-list-window .title .iconfont {
position: absolute;
right: 30rpx;
top: 50%;
transform: translateY(-50%);
font-size: 35rpx;
color: #8a8a8a;
font-weight: normal;
}
.coupon-list-window .coupon-list {
margin: 0 0 30rpx 0;
height: 823rpx;
overflow: auto;
padding-top: 30rpx;
}
.coupon-list-window .pictrue {
width: 414rpx;
height: 336rpx;
margin: 208rpx auto;
}
.coupon-list-window .pictrue image {
width: 100%;
height: 100%;
}
.pic-num {
color: #fff;
font-size: 24rpx;
}
.line-title {
width: 90rpx;
padding: 0 10rpx;
box-sizing: border-box;
background: rgba(255, 247, 247, 1);
border: 1px solid rgba(232, 51, 35, 1);
opacity: 1;
border-radius: 20rpx;
font-size: 20rpx;
color: #E83323;
margin-right: 12rpx;
}
.line-title.gray {
border-color: #BBB;
color: #bbb;
background-color: #F5F5F5;
}
.nav {
// position: absolute;
// top: 0;
// left: 0;
width: 100%;
height: 96rpx;
border-bottom: 2rpx solid #F5F5F5;
border-top-left-radius: 16rpx;
border-top-right-radius: 16rpx;
background-color: #FFFFFF;
font-size: 30rpx;
color: #999999;
}
.nav .acea-row {
border-top: 5rpx solid transparent;
border-bottom: 5rpx solid transparent;
}
.nav .acea-row.on {
border-bottom-color: #E93323;
color: #282828;
}
.nav .acea-row:only-child {
border-bottom-color: transparent;
}
.occupy {
height: 106rpx;
}
.coupon-list .item {
margin-bottom: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
}
.coupon-list .item .money {
font-weight: normal;
}
</style>