|
|
@@ -0,0 +1,230 @@
|
|
|
+<template>
|
|
|
+ <view >
|
|
|
+ <u-navbar title="优惠券详情"></u-navbar>
|
|
|
+ <view class="" style="background-color: rgba(188, 225, 208, 100);padding: 12px 0 ;">
|
|
|
+ <view class="list-item" style="margin-top: 0 ;">
|
|
|
+ <view class="voucher">充值券抵扣</view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="content-left">
|
|
|
+ <view class="text">新客首充专享</view>
|
|
|
+ <view class="useful-life">
|
|
|
+ 有效期至2022.05.22
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="content-right">
|
|
|
+ <view class="price">
|
|
|
+ ￥15
|
|
|
+ </view>
|
|
|
+ <view class="price-condition">
|
|
|
+ 满100可用
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="limit">
|
|
|
+ <view class="limit-text">
|
|
|
+
|
|
|
+ <view class="limit-text1">
|
|
|
+ <view class="">
|
|
|
+ 限用户充电电费+服务费满100元使用。
|
|
|
+ </view>
|
|
|
+ <view class="arrows iconfont">
|
|
|
+ 
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="have-used">
|
|
|
+ <img src="../../../static/img/overdue.png" alt="">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="main">
|
|
|
+ <view class="explain-item">
|
|
|
+ <view class="name">
|
|
|
+ 卡券编号
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ 345678956234567895
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="explain-item">
|
|
|
+ <view class="name">
|
|
|
+ 获取渠道
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ 新用户注册
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="explain-item">
|
|
|
+ <view class="name">
|
|
|
+ 适用时段
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ 08:00:00-22:00:00
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="explain-item">
|
|
|
+ <view class="name">
|
|
|
+ 适用范围
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ 仅限部分充电桩扫码充电，即插即充充电使用。
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="explain-item">
|
|
|
+ <view class="name">
|
|
|
+ 使用规则
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <p>1.抵扣充电服务费</p>
|
|
|
+ <p>2.订单满10元可用</p>
|
|
|
+ <p>3.充电电费满5元可用</p>
|
|
|
+ <p>4.充电服务费满10元可用</p>
|
|
|
+ <p>5.充电量满5度可使用</p>
|
|
|
+ <p>6.仅限注册用户使用</p>
|
|
|
+ <p>7.仅限个人用户使用</p>
|
|
|
+ <p>8.仅限实名用户使用</p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="explain-item">
|
|
|
+ <view class="name">
|
|
|
+ 使用说明
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <p>限51充电联盟使用</p>
|
|
|
+ <p>1.只抵扣正常结算的订单部分的服务费部分</p>
|
|
|
+ <p>2.不可提现</p>
|
|
|
+ <p>3.每次充电只限使用一张</p>
|
|
|
+ <p>4.不返现，不退款</p>
|
|
|
+ <p>5.最终解释权归湖北荆鹏集团有限公司所有</p>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ page{
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .list-item{
|
|
|
+ width: 91.4%;
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 12px auto 0;
|
|
|
+ position: relative;
|
|
|
+ border-radius:8px;
|
|
|
+ .voucher{
|
|
|
+ width: 60px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ border-radius: 8px 0px 8px 0px;
|
|
|
+ background-color: rgba(0, 185, 98, 100);
|
|
|
+ color: rgba(255, 255, 255, 100);
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 24px 16px;
|
|
|
+ }
|
|
|
+ .content-left{
|
|
|
+ .text{
|
|
|
+
|
|
|
+ height: 22px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: rgba(16, 16, 16, 100);
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .useful-life{
|
|
|
+ height: 17px;
|
|
|
+ line-height: 17px;
|
|
|
+ color: rgba(153, 153, 153, 100);
|
|
|
+ font-size: 12px;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ .content-right{
|
|
|
+ margin-top: -8px;
|
|
|
+ .price{
|
|
|
+ height: 38px;
|
|
|
+ color: rgba(0, 185, 98, 100);
|
|
|
+ font-size: 32px;
|
|
|
+ }
|
|
|
+ .price-condition{
|
|
|
+ height: 17px;
|
|
|
+ color: rgba(102, 102, 102, 100);
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .limit{
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 14px 16px;
|
|
|
+ border-top: 1px dotted rgba(227, 227, 227, 100);
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .limit-text{
|
|
|
+ color: rgba(153, 153, 153, 100);
|
|
|
+ font-size: 11px;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ .have-used{
|
|
|
+
|
|
|
+ width: 64px;
|
|
|
+ height: 64px;
|
|
|
+ position: absolute;
|
|
|
+ top: -12px;
|
|
|
+ right: 0;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+.main{
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px 16px 90px 16px;
|
|
|
+ .explain-item{
|
|
|
+ display: flex;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-top: 16px;
|
|
|
+ .name{
|
|
|
+ width: 20%;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
