couponTpl.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <template>
  2. <view class="coupon-list">
  3. <view class="coupon-box" v-for="item in list" :key="item.id" @click="checked(item)">
  4. <view class="coupon-head">
  5. <view class="coupon-sel coupon-checked" v-if="item.checked"></view>
  6. <view class="coupon-sel" v-else></view>
  7. <view class="coupon-title">
  8. <view class="coupon-title-1">{{item.couponTitle}}</view>
  9. </view>
  10. <view class="coupon-price">
  11. ¥<text>{{item.couponAmount}}</text>
  12. </view>
  13. </view>
  14. <view class="coupon-desc">
  15. <view><u-icon class="icon" size="30" name="clock"></u-icon>{{item.validEndTimeStr}}</view>
  16. <view>
  17. <u-icon class="icon" size="30" name="info-circle"></u-icon>
  18. <text class="couponRuleDesc">{{item.couponRuleDesc}}</text>
  19. </view>
  20. </view>
  21. </view>
  22. </view>
  23. </template>
  24. <script>
  25. export default{
  26. name: 'couponTpl',
  27. props: {
  28. showCheck: {
  29. type: Boolean,
  30. default: false
  31. },
  32. list:{
  33. type: Array,
  34. default: function(){
  35. return []
  36. }
  37. }
  38. },
  39. methods: {
  40. // 选中优惠卷
  41. checked(item) {
  42. if(this.showCheck){
  43. this.$emit('checkOk',item)
  44. }
  45. },
  46. },
  47. }
  48. </script>
  49. <style lang="scss">
  50. .coupon-list{
  51. padding: 25rpx;
  52. }
  53. .coupon-box.diabled{
  54. background: #999;
  55. }
  56. .coupon-box{
  57. margin-bottom: 30rpx;
  58. border-radius: 15rpx;
  59. box-shadow: 2rpx 2rpx 10rpx #ddd;
  60. background: #ff0000;
  61. color: #FFFFFF;
  62. .coupon-head{
  63. display: flex;
  64. align-items: center;
  65. padding: 20rpx 30rpx;
  66. position: relative;
  67. border-bottom: 15rpx dotted #FFFFFF;
  68. margin-bottom: -8rpx;
  69. .coupon-sel{
  70. position: absolute;
  71. width: 56rpx;
  72. height: 46rpx;
  73. right: 0;
  74. top: 0;
  75. }
  76. .coupon-checked{
  77. background: url(/static/img/select.png) no-repeat center;
  78. background-size: 100% 100%;
  79. }
  80. .coupon-title{
  81. flex-grow: 1;
  82. font-size: 32rpx;
  83. }
  84. .coupon-price{
  85. padding: 0 15rpx;
  86. color: #FFFFFF;
  87. text{
  88. font-size: 60rpx;
  89. }
  90. }
  91. }
  92. .coupon-desc{
  93. padding: 10rpx 30rpx;
  94. color: #666;
  95. background: #FFFFFF;
  96. border-bottom-left-radius:10rpx;
  97. border-bottom-right-radius: 10rpx;
  98. >view{
  99. padding: 5rpx 0;
  100. display: flex;
  101. align-items: flex-start;
  102. }
  103. .couponRuleDesc{
  104. width: 100%;
  105. padding-right: 30rpx;
  106. word-wrap: break-word;
  107. }
  108. .icon{
  109. margin-right: 10rpx;
  110. }
  111. }
  112. }
  113. </style>