优惠券

src/component/selectCoupon/selectCoupon.js

@@ -14,18 +14,27 @@ Component({
    * 组件的初始数据
    */
   data: {
-
+    isSelect:false
   },
 
   /**
    * 组件的方法列表
    */
   methods: {
+    selectCoupon() {
+      console.log('2222')
+      this.setData({
+        isSelect: !this.data.isSelect
+      })
+    },
+    hidePopup: function () { // 隐藏弹出框
+      this.setData({
+        show: false
+      })
+    },
 
   },
-  hidePopup: function () { // 隐藏弹出框
-    this.setData({
-      show: false
-    })
-  },
+ 
+
+  
 })

src/component/selectCoupon/selectCoupon.wxml

@@ -5,12 +5,13 @@
   <view class="modal-header">
     <image src="/assets/imgs/7_1_0/arrow-right.png" class="modal-to-back" mode="widthFix"></image>
     <text class="modal-title">选择优惠券</text>
-    <image class="modal-close" mode="widthFix" src="/assets/imgs/7_1_0/arrow-right.png" bindtap="hidePopup"></image>
+    <image class="modal-close" mode="widthFix" src="/assets/imgs/7_1_0/close.png" bindtap="hidePopup"></image>
   </view>
 
   <view class="modal-info">
-    <view class="coupon-list">
-      <image class="coupon-bg" src="/assets/imgs/7_1_0/coupon-bg.png" mode="widthFix"></image>
+    <view class="coupon-list" bindtap="selectCoupon">
+      <image wx:if="{{false}}" class="coupon-bg" src="/assets/imgs/7_1_0/coupon-bg.png" mode="widthFix"></image>
+      <image class="coupon-bg" src="/assets/imgs/7_1_0/disabled-coupon.png" mode="widthFix"></image>
       <view class="coupon-info">
         <view class="left-price">
           <view class="top-price">
@@ -28,57 +29,14 @@
           <view class="coupon-desc">拼团及特殊商品不可用</view>
         </view>
 
-        <view></view>
-      
-      </view>
-    </view>
-    <!-- <view class="coupon-list">
-      <image class="coupon-bg" src="/assets/imgs/7_1_0/coupon-bg.png" mode="widthFix"></image>
-      <view class="coupon-info">
-        <view class="left-price">
-          <view class="top-price">
-            <text>￥</text>
-            <text class="amount">50</text>
-          </view>
-          <view class="bottom-desc">
-            满99可用
+        <view class="select-radio">
+          <view class="{{isSelect ? 'theme-color' : ''}} coupon-radio"  >
+            <image wx:if="{{isSelect}}" class="tick-success" src="/assets/imgs/7_1_0/tick-success.png" mode="widthFix"></image>
           </view>
         </view>
-
-        <view class="right-info">
-          <view class="coupon-title">新人礼包劵</view>
-          <view class="coupon-time">有效期</view>
-          <view class="coupon-desc">拼团及特殊商品不可用</view>
-        </view>
-
-        <view></view>
       
       </view>
     </view>
-    <view class="coupon-list">
-      <image class="coupon-bg" src="/assets/imgs/7_1_0/coupon-bg.png" mode="widthFix"></image>
-      <view class="coupon-info">
-        <view class="left-price">
-          <view class="top-price">
-            <text>￥</text>
-            <text class="amount">50</text>
-          </view>
-          <view class="bottom-desc">
-            满99可用
-          </view>
-        </view>
-
-        <view class="right-info">
-          <view class="coupon-title">新人礼包劵</view>
-          <view class="coupon-time">有效期</view>
-          <view class="coupon-desc">拼团及特殊商品不可用</view>
-        </view>
-
-        <view></view>
-      
-      </view>
-    </view> -->
-    
     <view class="empty-coupon">
       暂无可用优惠券
     </view>

src/component/selectCoupon/selectCoupon.wxss

 /* component/selectCoupon/selectCoupon.wxss */
+@import "/app.wxss";
 .modal-container {
   position: fixed;
   width: 100%;
@@ -19,9 +20,6 @@
 .modal-content.active {
   transform: translateY(0); }
 
-.out-stock {
-  background: #FFB400!important;
-  }
 .modal-content {
   position: fixed;
   z-index: 99;
@@ -38,7 +36,7 @@
   position: absolute;
   right: 24rpx;
   top: 35rpx;
-  width: 18rpx;
+  width: 25rpx;
    }
 
 .modal-to-back{
@@ -46,6 +44,7 @@
   position: absolute;
   left: 24rpx;
   top: 35rpx;
+  transform: rotate(180deg);
 }
 .modal-title{
   color: #333333;
@@ -111,4 +110,23 @@
   color: #aaaaaa;
   margin-top:211rpx ;
   text-align: center;
+}
+.coupon-radio{
+  width: 32rpx;
+  height: 32rpx;
+  border-radius: 50%;
+  border: 1rpx solid rgba(0, 0, 0, 0.2);
+  line-height: 26rpx;
+  text-align: center;
+}
+.tick-success{
+  width: 18rpx;
+}
+.select-radio{
+  position: absolute;
+  top: 71rpx;
+  right: 30rpx;
+}
+.theme-color{
+  border: none;
 }
\ No newline at end of file

src/pages/confirmOrder/confirmOrder.wxml

@@ -88,7 +88,7 @@
         <text>vip可尊享N大权益</text>
         <image src="/assets/imgs/7_1_0/explain.png"></image>
       </view>
-       <view class="select-desc">
+       <view class="select-desc {{isSelect ? 'select-tip' : 'unselect-tip'}}">
         <!-- <image src="{{isSelect ? '/assets/imgs/7_1_0/selected.png' : '/assets/imgs/7_1_0/unselect.png'}}" class="{{isSelect ? 'select-tip' : 'unselect-tip'}}"></image> -->
         <text>{{isSelect ? '已勾选，即享优惠' : '勾选开通'}}</text>
        </view>

src/pages/confirmOrder/confirmOrder.wxss

@@ -158,7 +158,6 @@
   top: 6rpx;
 }
 .select-desc image{
-  /* position: absolute; */
   position: absolute;
   top: 0;
   left: 0;