chelvc-custom/src/pages/client/clientPackage/serviceDetail/GainCoupon.vue

<template>
  <view class="container">
    <view class="detail flex">
      <text>优惠详情</text>
      <view class="closeIcon" @click="close">
        <u-icon name="close" color="#999" size="20" />
      </view>
    </view>

    <view class="content">
      <view v-for="item in list" :key="item.id" class="itemList">
        <view class="title"> {{ item.title }}</view>
        <view class="text">{{ item.text }} </view>
      </view>
    </view>

    <view class="placeholder"></view>

    <view>
      <view style="padding: 20rpx">店铺优惠</view>
      <view class="coupon-box">
        <view class="coupon" v-for="(item, index) in coupons" :key="index">
          <view class="coupon-left">
            <text class="coupon-text">￥</text>
            <text class="coupon-price">5</text>
          </view>
          <view class="coupon-center">
            <view class="coupon-center-user">{{ item.name }}</view>
            <view class="coupon-center-type">{{ item.description }}</view>
          </view>
          <view class="coupon-right">
            <view class="claimable" v-show="true" @click="handlerGetCoupon(item, index)">可领取</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    acceptConpons
  } from "@/api/client/mine.js"
  export default {
    props: {
      coupons: {
        type: Array,
        default: [],
      },
    },
    data() {
      return {
        list: [{
            id: 0,
            title: '30天低价',
            text: '当前商品价格为30天低价，比平时低48%',
          },
          {
            id: 1,
            title: '店铺新客立减',
            text: '店铺新客购买该商品立减10元%',
          },
          {
            id: 2,
            title: '多件优惠',
            text: '该商品满2件享9.5折%',
          },
        ],
      };
    },
    methods: {
      close() {
        this.$emit('close', false);
      },

      // 点击领取优惠卷
      handlerGetCoupon(item, index) {
        console.log('@@@@item', item);
        acceptConpons(item.id).then(res => {
          console.log('@@@@res',res);
          if (res.code === 'OK') {
            uni.showToast({
              title:'领取成功',
              icon:'none'
            })
            this.close()
          }else{
            uni.showToast({
              title:res.message,
              icon:'none'
            })
            return
          }
        })
      },
    },
  };
</script>

<style lang="scss" scoped>
  .container {
    height: 900rpx;
    box-sizing: border-box;

    .flex {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .detail {
      height: 100rpx;
      position: relative;
      border-bottom: 1rpx solid #f4f4f4;

      .closeIcon {
        position: absolute;
        top: 40rpx;
        right: 30rpx;
      }
    }

    .content {
      padding: 10rpx 20rpx;

      .itemList {
        margin: 20rpx 0;

        .title {
          font-size: 30rpx;
          color: #333;
          margin-bottom: 8rpx;
        }

        .text {
          font-size: 24rpx;
          color: #999;
        }
      }
    }

    .placeholder {
      height: 30rpx;
      background-color: #f4f4f4;
      margin: 0 20rpx;
    }

    .coupon-box {
      height: 400rpx;
      overflow-y: auto;
    }

    .coupon {
      height: 150rpx;
      margin: 10rpx 20rpx;
      background-color: #faeaea;
      border: 2rpx solid #eb8f8f;
      display: flex;
      align-items: center;

      .coupon-text {
        color: #e53f3f;
        font-size: 30rpx;
      }

      .coupon-left {
        flex: 1;
        text-align: center;

        .coupon-price {
          font-size: 60rpx;
          color: #ee1310;
        }
      }

      .coupon-center {
        flex: 4;
        color: #ee1310;

        .coupon-center-user {
          font-size: 30rpx;
          font-weight: 600;
        }

        .coupon-center-type {
          font-size: 28rpx;
          margin-top: 10rpx;
        }
      }

      .coupon-right {
        flex: 1.5;

        .claimable {
          width: 110rpx;
          height: 55rpx;
          background: #f39818;
          border-radius: 10rpx;
          color: #fff;
          font-size: 26rpx;
          line-height: 55rpx;
          text-align: center;
        }

        .claimable-content {
          width: 160rpx;
          height: 80rpx;
          background-color: #de2d23;
          font-size: 24rpx;
          color: #fff;
          border-radius: 10rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-right: 10rpx;
        }
      }
    }
  }

  // .coupon {
  //   height: 300rpx;
  //   display: flex;
  //   font-size: 32rpx;
  //   color: #f2110d;
  //   border-radius: 10rpx;
  //   margin-bottom: 25rpx;
  //   padding: 20rpx 25rpx;
  //   box-sizing: border-box;
  //   background-color: #faeaea;
  //   border: 2rpx solid #eb8b8b;

  //   .coupon-left {
  //     width: 10%;
  //     height: 100%;

  //     .coupon-left-price {
  //       font-size: 65rpx;
  //     }
  //   }

  //   .coupon-middle {
  //     flex-direction: column;
  //     justify-content: space-between;
  //     align-items: flex-start;
  //     width: 60%;
  //     height: 100%;

  //     .coupon-middle-user {
  //       width: 100%;
  //       font-size: 30rpx;
  //       font-weight: 600;
  //     }

  //     .coupon-middle-type {
  //       width: 100%;
  //       font-size: 24rpx;
  //       font-weight: 600;
  //       opacity: 0.8;
  //     }
  //   }

  //   .coupon-right {
  //     flex-direction: column;
  //     justify-content: space-between;
  //     align-items: flex-start;
  //     width: 25%;
  //     height: 100%;

  //     .coupon-right-time {
  //       height: 100%;
  //       flex-direction: column;
  //       justify-content: space-between;
  //       align-items: center;

  //       .tip {
  //         font-size: 30rpx;
  //         font-weight: 600;
  //       }

  //       .time {
  //         font-size: 24rpx;
  //         font-weight: 600;
  //         opacity: 0.8;
  //       }
  //     }

  //     .coupon-right-get {
  //       width: 80%;
  //       background-color: #e8a87c;
  //       height: 55rpx;
  //       text-align: center;
  //       line-height: 55rpx;
  //       margin-top: 15rpx;
  //     }
  //   }
  // }
</style>