|
|
@@ -0,0 +1,430 @@
|
|
|
+<template name="coupon">
|
|
|
+ <view class="coupon-template">
|
|
|
+ <view class="coupon-title" @tap.stop="showPopup">
|
|
|
+ <text class="text">优惠券:</text>
|
|
|
+ <text class="text-coupon">-￥20.00</text>
|
|
|
+ <text class="iconfont icon-xiayibu"></text>
|
|
|
+ </view>
|
|
|
+ <!-- 优惠券 -->
|
|
|
+ <tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup">
|
|
|
+ <view class="tui-popup-box clearfix">
|
|
|
+ <view class="title">
|
|
|
+ <view class="title-l">优惠券</view>
|
|
|
+ <view class="title-r" @click="showExchangePopup">兑换优惠券</view>
|
|
|
+ </view>
|
|
|
+ <div class="tui-popup-main coupon">
|
|
|
+ <scroll-view class="tui-popup-scroll" scroll-y="true">
|
|
|
+ <view v-for="(coupon,index) in dataList" :key="index" :id="coupon.id" class="coupon-list" @click.stop="checkedCoupon(coupon,index)">
|
|
|
+ <view class="list-cell-le">
|
|
|
+ <view class="coupon-maxMoney">
|
|
|
+ <text class="small">￥</text>
|
|
|
+ {{ coupon.maxMoney }}
|
|
|
+ </view>
|
|
|
+ <view class="coupon-minMoney">
|
|
|
+ 满{{ coupon.minMoney }}可用
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-cell-ri">
|
|
|
+ <view class="list-cell-top">
|
|
|
+ <view class="list-cell-type">
|
|
|
+ <view class="list-cell-tags">
|
|
|
+ <text class="tags">{{ coupon.couponType | TypeFormat }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="list-cell-texts">
|
|
|
+ <text v-if="coupon.useType == 1">{{ coupon.useType | TypeFormatText }}</text>
|
|
|
+ <text v-if="coupon.useType == 2">{{ coupon.useType | TypeFormatText }}</text>
|
|
|
+ <text v-if="coupon.useType == 3">{{ coupon.useType | TypeFormatText }}{{ coupon.couponText }}的商品</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-cell-btn">
|
|
|
+ <view class="list-cell-checkbox">
|
|
|
+ <view class="checkbox iconfont"
|
|
|
+ :class="[coupon.ischecked ?'icon-yixuanze':'icon-weixuanze']"
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-cell-time">{{ coupon.couponTime }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </div>
|
|
|
+ <view class="tui-right-flex tui-popup-btn">
|
|
|
+ <view class="tui-flex-1">
|
|
|
+ <view class="tui-button" @click="hidePopup">确定</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </tui-bottom-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default{
|
|
|
+ name:"coupon",
|
|
|
+ props:{
|
|
|
+
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return{
|
|
|
+ popupShow:false,
|
|
|
+ isIphoneX:this.$store.state.isIphoneX,
|
|
|
+ checkedIndex:null,
|
|
|
+ dataList:[
|
|
|
+ {
|
|
|
+ maxMoney:5000,
|
|
|
+ minMoney:1000,
|
|
|
+ couponType:1,
|
|
|
+ couponTime:'2021.06.28~2021.07.28',
|
|
|
+ couponText:'华熙生物技术有限公司',
|
|
|
+ useType:1,
|
|
|
+ couponBtnType:0,
|
|
|
+ ischecked:false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ maxMoney:2000,
|
|
|
+ minMoney:200,
|
|
|
+ couponType:2,
|
|
|
+ couponTime:'2021.06.28~2021.07.28',
|
|
|
+ couponText:'华熙生物技术有限公司',
|
|
|
+ useType:2,
|
|
|
+ couponBtnType:0,
|
|
|
+ ischecked:false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ maxMoney:4000,
|
|
|
+ minMoney:800,
|
|
|
+ couponType:3,
|
|
|
+ couponTime:'2021.06.28~2021.07.28',
|
|
|
+ couponText:'华熙生物技术有限公司',
|
|
|
+ useType:3,
|
|
|
+ couponBtnType:0,
|
|
|
+ ischecked:false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ maxMoney:6000,
|
|
|
+ minMoney:1000,
|
|
|
+ couponType:4,
|
|
|
+ couponTime:'2021.06.28~2021.07.28',
|
|
|
+ couponText:'华熙生物技术有限公司',
|
|
|
+ useType:1,
|
|
|
+ couponBtnType:0,
|
|
|
+ ischecked:false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ maxMoney:6000,
|
|
|
+ minMoney:1000,
|
|
|
+ couponType:5,
|
|
|
+ couponTime:'2021.06.28~2021.07.28',
|
|
|
+ couponText:'华熙生物技术有限公司',
|
|
|
+ useType:2,
|
|
|
+ couponBtnType:0,
|
|
|
+ ischecked:false
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters:{
|
|
|
+ NumFormat(value) {//处理金额
|
|
|
+ return Number(value).toFixed(2);
|
|
|
+ },
|
|
|
+ totalprice(val,count){//单件商品的价格 × 数量
|
|
|
+ return (val * count).toFixed(2)
|
|
|
+ },
|
|
|
+ TypeFormat:function(value) {
|
|
|
+ switch (value) {
|
|
|
+ case 1:
|
|
|
+ return '活动券';
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ return '品类券';
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ return '店铺券';
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
+ return '专享券';
|
|
|
+ break;
|
|
|
+ case 5:
|
|
|
+ return '新用户券';
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ TypeFormatText:function(value) {
|
|
|
+ switch (value) {
|
|
|
+ case 1:
|
|
|
+ return '全商城商品通用';
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ return '仅限购买仪器类商品';
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ return '仅可购买店铺';
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ checkedCoupon(coupon,idx){// 选择优惠券
|
|
|
+ this.checkedIndex = idx;
|
|
|
+ this.dataList.forEach((el,index) => {
|
|
|
+ if(this.checkedIndex == index){
|
|
|
+ el.ischecked = !el.ischecked;
|
|
|
+ }else{
|
|
|
+ el.ischecked = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log('this.dataList===>',this.dataList)
|
|
|
+ },
|
|
|
+ showExchangePopup(){
|
|
|
+ this.popupShow = false
|
|
|
+ this.$parent.isExchangePopup = true
|
|
|
+ },
|
|
|
+ showPopup(){
|
|
|
+ this.popupShow = true
|
|
|
+ },
|
|
|
+ hidePopup(){
|
|
|
+ this.popupShow = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .coupon-template{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ background: #FFFFFF;
|
|
|
+ float: left;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ .coupon-title{
|
|
|
+ width: 702rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ line-height: 88rpx;
|
|
|
+ position: relative;
|
|
|
+ .text{
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ }
|
|
|
+ .text-coupon{
|
|
|
+ display: inline-block;
|
|
|
+ float: right;
|
|
|
+ padding-right: 30rpx;
|
|
|
+ line-height: 88rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #f94b4b;
|
|
|
+ }
|
|
|
+ .iconfont{
|
|
|
+ width: 50rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ line-height: 88rpx;
|
|
|
+ color: #999999;
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tui-popup-box {
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ min-height: 220rpx;
|
|
|
+ padding:24rpx 24rpx 0 24rpx;
|
|
|
+ .title{
|
|
|
+ font-size: $font-size-34;
|
|
|
+ color: $text-color;
|
|
|
+ line-height: 88rpx;
|
|
|
+ text-align: center;
|
|
|
+ float: left;
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ display: flex;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ .title-l{
|
|
|
+ flex: 1;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .title-r{
|
|
|
+ flex: 1;
|
|
|
+ text-align: right;
|
|
|
+ color: #f94b4b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tui-popup-main{
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ .tui-popup-scroll{
|
|
|
+ width: 100%;
|
|
|
+ height: 600rpx;
|
|
|
+ .coupon-list{
|
|
|
+ width: 100%;
|
|
|
+ height: 200rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: url(https://static.caimei365.com/app/img/icon/icon-coupon-uesb@2x.png);
|
|
|
+ background-size: cover;
|
|
|
+ .list-cell-le{
|
|
|
+ width: 224rpx;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 37rpx 0;
|
|
|
+ float: left;
|
|
|
+ .coupon-maxMoney{
|
|
|
+ width: 100%;
|
|
|
+ height: 78rpx;
|
|
|
+ line-height: 78rpx;
|
|
|
+ font-size: 56rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ .small{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .coupon-minMoney{
|
|
|
+ width: 100%;
|
|
|
+ height: 33rpx;
|
|
|
+ line-height: 33rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-cell-ri{
|
|
|
+ width: 478rpx;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20rpx 24rpx 0 24rpx;
|
|
|
+ float: right;
|
|
|
+ .list-cell-top{
|
|
|
+ width: 100%;
|
|
|
+ height: 121rpx;
|
|
|
+ float: left;
|
|
|
+ border-bottom: 1px solid #e1e1e1;
|
|
|
+ .list-cell-type{
|
|
|
+ width: 286rpx;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ .list-cell-tags{
|
|
|
+ width: 100%;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-bottom: 7rpx;
|
|
|
+ .tags{
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
+ background-color: #ffdcce;
|
|
|
+ color: #f94b4b;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ text-align: center;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-cell-texts{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ line-height:35rpx;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-cell-btn{
|
|
|
+ width: 128rpx;
|
|
|
+ height: 100%;
|
|
|
+ float: right;
|
|
|
+ .list-cell-checkbox{
|
|
|
+ width: 100%;
|
|
|
+ height: 50%;
|
|
|
+ .checkbox{
|
|
|
+ width: 40rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ float: right;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ text-decoration: none;
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #f94b4b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-cell-time{
|
|
|
+ width: 100%;
|
|
|
+ height: 58rpx;
|
|
|
+ line-height: 58rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tui-popup-coupon{
|
|
|
+ width: 100%;
|
|
|
+ height: 500rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding:30rpx 20rpx;
|
|
|
+ .tui-popup-h1{
|
|
|
+ width: 100%;
|
|
|
+ height: 66rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .tui-popup-text{
|
|
|
+ flex: 1;
|
|
|
+ height: 66rpx;
|
|
|
+ line-height: 66rpx;
|
|
|
+ font-size: $font-size-30;
|
|
|
+ color: #333333;
|
|
|
+ &.red{
|
|
|
+ color: #f94b4b;
|
|
|
+ }
|
|
|
+ &.bold{
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ &.left{
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ &.right{
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tui-popup-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ .tui-button{
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ background: $btn-confirm;
|
|
|
+ line-height: 88rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
