|
|
<template>
|
|
|
<YohoActionSheet ref="actionSheet" @cancel="close">
|
|
|
<div class="pay-type-wrapper">
|
|
|
<div class="header">
|
|
|
<div class="title">选择优惠活动</div>
|
|
|
<span><i class="iconfont iconweibiao45133 close" @click="close"></i></span>
|
|
|
</div>
|
|
|
<slot name="content">
|
|
|
<div class="pay-list-wrapper">
|
|
|
<div class="pay-list-item" v-for="item in data" :key="item.promotionId" @click="onItemClick(item)">
|
|
|
<div class="coupon-info">
|
|
|
<div class="coupon-name">{{item.promotionName}}</div>
|
|
|
|
|
|
<div class="coupon-time">{{item.startTime}}-{{item.endTime}}</div>
|
|
|
</div>
|
|
|
<Check class="check" :value="item.selected === 'Y'"></Check>
|
|
|
</div>
|
|
|
</div>
|
|
|
</slot>
|
|
|
<div name="footer">
|
|
|
<YohoButton txt="确定" class="footer" @click="pay"></YohoButton>
|
|
|
</div>
|
|
|
</div>
|
|
|
</YohoActionSheet>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import YohoActionSheet from '../action-sheet';
|
|
|
import Check from '../order-pay-type/check2';
|
|
|
import YohoButton from '../button';
|
|
|
|
|
|
export default {
|
|
|
name: 'OrderPromotionList',
|
|
|
props: {
|
|
|
data: {
|
|
|
type: Array,
|
|
|
default() {
|
|
|
return [];
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
components: {
|
|
|
YohoButton,
|
|
|
YohoActionSheet,
|
|
|
Check
|
|
|
},
|
|
|
data() {
|
|
|
return {};
|
|
|
},
|
|
|
methods: {
|
|
|
show() {
|
|
|
this.$refs.actionSheet.show();
|
|
|
},
|
|
|
hide() {
|
|
|
this.$refs.actionSheet.hide();
|
|
|
},
|
|
|
close() {
|
|
|
this.hide();
|
|
|
this.$emit('closeAction');
|
|
|
},
|
|
|
pay() {
|
|
|
this.$emit('confirmAction');
|
|
|
},
|
|
|
onItemClick(item) {
|
|
|
this.$emit('itemClickAction', item);
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.pay-type-wrapper {
|
|
|
height: 960px;
|
|
|
background: white;
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
padding: 40px;
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
font-weight: bold;
|
|
|
font-size: 32px;
|
|
|
color: #222;
|
|
|
}
|
|
|
|
|
|
.close {
|
|
|
font-size: 32px;
|
|
|
}
|
|
|
|
|
|
.pay-list-wrapper {
|
|
|
flex: 1;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
.pay-list-item {
|
|
|
height: 180px;
|
|
|
font-size: 28px;
|
|
|
margin: 20px 20px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
background-color: white;
|
|
|
border-bottom: 1px solid #eee;
|
|
|
}
|
|
|
|
|
|
.check {
|
|
|
font-size: 48px;
|
|
|
margin-left: 40px;
|
|
|
margin-right: 40px;
|
|
|
}
|
|
|
|
|
|
.pay-info {
|
|
|
width: 210px;
|
|
|
}
|
|
|
|
|
|
.footer {
|
|
|
font-size: 32px;
|
|
|
}
|
|
|
|
|
|
.price-info {
|
|
|
margin-top: 40px;
|
|
|
margin-bottom: 60px;
|
|
|
}
|
|
|
|
|
|
.price {
|
|
|
font-size: 72px;
|
|
|
color: #002b47;
|
|
|
text-align: center;
|
|
|
font-weight: bolder;
|
|
|
}
|
|
|
|
|
|
.price-desc {
|
|
|
font-size: 24px;
|
|
|
color: #002b47;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.coupon-info {
|
|
|
flex: 1;
|
|
|
height: 60px;
|
|
|
padding-left: 20px;
|
|
|
}
|
|
|
|
|
|
.coupon-name {
|
|
|
font-size: 24px;
|
|
|
color: #002b47;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.coupon-time {
|
|
|
font-size: 22px;
|
|
|
color: #999;
|
|
|
}
|
|
|
</style> |
...
|
...
|
|