couponTpl.vue 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <view class="coupon-list">
  3. <view class="coupon-box">
  4. <view class="coupon-head" @click="checked">
  5. <view class="coupon-sel"></view>
  6. <view class="coupon-title">
  7. <view class="coupon-title-1">满100减50</view>
  8. <view class="coupon-title-time">有效期至:2020-05-12</view>
  9. </view>
  10. <view class="coupon-price">
  11. ¥<text>100</text>
  12. </view>
  13. </view>
  14. <view class="coupon-desc">
  15. 优惠卷使用说明
  16. </view>
  17. </view>
  18. </view>
  19. </template>
  20. <script>
  21. export default{
  22. name: 'couponTpl',
  23. props: {
  24. showCheck: {
  25. type: Boolean,
  26. default: false
  27. },
  28. list:{
  29. type: Array,
  30. default: function(){
  31. return []
  32. }
  33. }
  34. },
  35. methods: {
  36. // 选中优惠卷
  37. checked() {
  38. if(this.showCheck){
  39. }
  40. },
  41. },
  42. }
  43. </script>
  44. <style lang="scss">
  45. .coupon-list{
  46. padding: 25rpx;
  47. }
  48. .coupon-box{
  49. background: #fff7f5;
  50. border-radius: 10rpx;
  51. box-shadow: 1rpx 1rpx 5rpx #eee;
  52. .coupon-head{
  53. display: flex;
  54. align-items: center;
  55. padding: 20rpx 30rpx;
  56. position: relative;
  57. .coupon-sel{
  58. position: absolute;
  59. width: 60rpx;
  60. height: 60rpx;
  61. right: 0;
  62. top: 0;
  63. }
  64. .coupon-checked{
  65. background: url(../../static/img/select.png) no-repeat center;
  66. background-size: 100% 100%;
  67. }
  68. .coupon-title{
  69. flex-grow: 1;
  70. font-size: 32rpx;
  71. .coupon-title-time{
  72. color: #999;
  73. padding-top: 15rpx;
  74. font-size: 28rpx;
  75. }
  76. }
  77. .coupon-price{
  78. padding: 0 15rpx;
  79. color: red;
  80. text{
  81. font-size: 60rpx;
  82. }
  83. }
  84. }
  85. .coupon-desc{
  86. border-top: 1rpx dashed #ffcfcd;
  87. padding: 18rpx 30rpx;
  88. color: #666;
  89. }
  90. }
  91. </style>