|
@@ -0,0 +1,111 @@
|
|
|
+<template>
|
|
|
+ <view class="main">
|
|
|
+ <view class="pre_one">优惠劵({{couponList.length}})</view>
|
|
|
+ <view class="pre_two" v-for="(item,index) in couponList" :key="index">
|
|
|
+ <view class="left">
|
|
|
+ <view class="money">¥{{item.money||'0'}}</view>
|
|
|
+ <view class="man">满{{item.discount_money||'0'}}可以</view>
|
|
|
+ </view>
|
|
|
+ <view class="center">
|
|
|
+ <view class="type"><text>{{item.type||'暂无'}}</text> {{item.name||'暂无'}}</view>
|
|
|
+ <view class="date">有效期{{item.start_time||'暂无'}}-{{item.end_time||'暂无'}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <button type="default" size="mini" @click="toDiscount(item)">确认</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ couponList: {
|
|
|
+ type: Array,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {}
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .main {
|
|
|
+ .pre_one {
|
|
|
+ text-align: center;
|
|
|
+ padding: 2vw 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pre_two {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: 94vw;
|
|
|
+ margin: 0 2vw 1vw 2vw;
|
|
|
+ border-radius: 3vw;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 3vw;
|
|
|
+ padding: 5vw 3vw;
|
|
|
+ background-color: #FFFACD;
|
|
|
+ color: #8B4513;
|
|
|
+
|
|
|
+ .money {
|
|
|
+ font-size: var(--font18Szie);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .man {
|
|
|
+ font-size: var(--font14Size);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .center {
|
|
|
+ flex-grow: 1;
|
|
|
+ border-radius: 3vw;
|
|
|
+ border-top-right-radius: 0;
|
|
|
+ border-bottom-right-radius: 0;
|
|
|
+ padding: 5vw 2vw;
|
|
|
+ background-color: var(--mainColor);
|
|
|
+
|
|
|
+ .type {
|
|
|
+ margin: 0 0 1vw 0;
|
|
|
+
|
|
|
+ text {
|
|
|
+ border: 0.5vw solid red;
|
|
|
+ color: red;
|
|
|
+ padding: 0 1vw;
|
|
|
+ border-radius: 1vw;
|
|
|
+ font-size: var(--font12Size);
|
|
|
+ margin: 0 1vw 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ font-size: var(--font16Size);
|
|
|
+ }
|
|
|
+
|
|
|
+ .date {
|
|
|
+ font-size: var(--font12Size);
|
|
|
+ color: var(--f99Color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ padding: 7vw 3vw;
|
|
|
+ border-radius: 3vw;
|
|
|
+ border-top-left-radius: 0;
|
|
|
+ border-bottom-left-radius: 0;
|
|
|
+ background-color: var(--mainColor);
|
|
|
+
|
|
|
+ button {
|
|
|
+ background-color: #FFD700;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|