12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- <template>
- <view class="coupon-list">
- <view class="coupon-box">
- <view class="coupon-head" @click="checked">
- <view class="coupon-sel"></view>
- <view class="coupon-title">
- <view class="coupon-title-1">满100减50</view>
- <view class="coupon-title-time">有效期至:2020-05-12</view>
- </view>
- <view class="coupon-price">
- ¥<text>100</text>
- </view>
- </view>
- <view class="coupon-desc">
- 优惠卷使用说明
- </view>
- </view>
- </view>
- </template>
- <script>
- export default{
- name: 'couponTpl',
- props: {
- showCheck: {
- type: Boolean,
- default: false
- },
- list:{
- type: Array,
- default: function(){
- return []
- }
- }
- },
- methods: {
- // 选中优惠卷
- checked() {
- if(this.showCheck){
-
- }
- },
- },
- }
- </script>
- <style lang="scss">
- .coupon-list{
- padding: 25rpx;
- }
- .coupon-box{
- background: #fff7f5;
- border-radius: 10rpx;
- box-shadow: 1rpx 1rpx 5rpx #eee;
- .coupon-head{
- display: flex;
- align-items: center;
- padding: 20rpx 30rpx;
- position: relative;
- .coupon-sel{
- position: absolute;
- width: 60rpx;
- height: 60rpx;
- right: 0;
- top: 0;
- }
- .coupon-checked{
- background: url(../../static/img/select.png) no-repeat center;
- background-size: 100% 100%;
- }
- .coupon-title{
- flex-grow: 1;
- font-size: 32rpx;
- .coupon-title-time{
- color: #999;
- padding-top: 15rpx;
- font-size: 28rpx;
- }
- }
- .coupon-price{
- padding: 0 15rpx;
- color: red;
- text{
- font-size: 60rpx;
- }
- }
- }
- .coupon-desc{
- border-top: 1rpx dashed #ffcfcd;
- padding: 18rpx 30rpx;
- color: #666;
- }
- }
- </style>
|