8/3单选框取消问题

package-lock.json

@@ -10,6 +10,11 @@
       "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==",
       "dev": true
     },
+    "@vant/weapp": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@vant/weapp/-/weapp-1.7.2.tgz",
+      "integrity": "sha512-hI5tCJuzi1xDVpX8oP1GCBwpGHiu1+jA+9rMVggFwpF/6W6itk3Oggt3tT1nhN1WumcCwafnluBnqooOExFdDA=="
+    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",

package.json

@@ -23,6 +23,7 @@
     "build": "node build/build.js wx"
   },
   "dependencies": {
+    "@vant/weapp": "^1.7.2",
     "flyio": "^0.6.14",
     "mpvue": "^2.0.0",
     "mpvue-echarts": "^0.3.2",

project.private.config.json

@@ -23,6 +23,23 @@
           "pathName": "pages/coupons/main",
           "query": "",
           "scene": null
+        },
+        {
+          "name": "pages/user_center/recharge/main",
+          "pathName": "pages/user_center/recharge/main",
+          "query": "",
+          "scene": null
+        },
+        {
+          "name": "pages/user_center/confirmPay/main",
+          "pathName": "pages/user_center/confirmPay/main",
+          "query": "",
+          "scene": null
+        },
+        {
+          "name": "pages/user_center/discountCard/main",
+          "pathName": "pages/user_center/discountCard/main",
+          "scene": null
         }
       ]
     }

src/app.json

@@ -28,8 +28,9 @@
     "pages/agent/settlement_center/withdraw/list/main",
     "pages/test/main",
     "pages/competition/main",
-    "pages/payment/main"
-
+    "pages/payment/main",
+    "pages/user_center/confirmPay/main",
+    "pages/user_center/discountCard/main"
   ],
   "window": {
     "backgroundTextStyle": "light",

src/main.js

@@ -9,7 +9,8 @@ var fly = new Fly()
 // fly.config.baseURL = "https://testapi.shuimuai.com/"
 fly.config.baseURL = process.env.REQUEST_URI
 fly.config.headers = {
-  access_token:11,
+  access_token: 11,
+  token: wx.getStorageSync('token'),
   // 'Content-Type':'multipart/form-data; boundary=AaB03x'
   'content-type':'application/x-www-form-urlencoded'
 }

src/pages/user_center/confirmPay/index.vue

@@ -0,0 +1,139 @@
+<template>
+    <div class=" padding-tb-xl flex padding-left-xl boxVer">
+      <view class="upBox">
+        <view class="title">
+          <text class="text-sm font">已选商品&emsp;水母星球-{{ data.goods_name }}</text>
+          <br>
+        </view>
+        <view class="title">
+          <text class="text-sm font">商品价格&emsp;{{ data.price }}元</text>
+          <br>
+
+        </view>
+        <view class="title">
+          <text class="text-sm font">支付方式&emsp;微信支付</text> 
+          <br>
+
+        </view>
+
+        <view v-if="data.coupon.length !== 0" class="flex padding-tb align-center justify-between">
+            <div class="flex align-center discountLeft">
+              <div class="discountPic"></div>
+              <text class="text-lg text-red ">{{ data.coupon.name }}</text>
+            </div>
+            <!-- <div class="betweenBox"></div> -->
+            <div class="flex align-center"  @click="to_discountCard">
+              <text class="text-lg text-red">-￥{{data.reduce}}&nbsp;</text>
+              <text class="text-gray rightArrow" :class="'cuIcon-right'"></text>
+             </div>
+            <br>
+        </view>
+       
+        <view v-if="data.coupon.length == 0" class="padding-tb">
+          <text class="text-lg text-red" style="font-weight: bold;">折扣&emsp;{{ data.discount * 10 }}折</text>
+          <br>
+        </view>
+        <view v-if="data.goods_id < 4" class="padding-tb">
+           <label class="radio" @click='radiocon'>
+               <!-- <checkbox id="checkBox" class='round orange' :class="checked?'checked':''" :checked="checked?true:false" @click="setPrice"
+			 	value='1'></checkbox> -->
+                <radio  :checked="check" id="radios" ref="radio" ></radio>
+               <text class="text-lg text-orange">&emsp;加购{{ data.add_price }}元，获得有效期增加{{ data.add_month }}个月</text>
+           </label>
+
+            <br>
+            
+        </view>
+      </view>
+        
+      <view>  
+        <view class="flex padding-tb-xl justify-center align-center ">
+          <view class="order_price_container">
+            <text class="text-sm font">实付(元)&emsp;</text>
+            <text class="mine_min">{{ data.total_price }}</text>
+          </view>
+        </view>  
+        <view class="flex padding-tb justify-center align-center">
+          <button
+            class="cu-btn bg-primary lg text-white recharge_button"
+            @click="success_pay"
+            :disabled="btn_disabled"
+          >立即充值</button>
+        </view>
+      </view>  
+    </div>
+</template>
+
+<script>
+let $this;
+export default {
+  data() {
+    return {
+      data: {
+        check: false,
+      },
+    };
+  },
+  onLoad(options) {
+    this.data = JSON.parse(options.data);
+    console.log("数据", this.data);
+    $this = this;
+  },
+  methods: {
+    to_discountCard() {
+      var deliver = JSON.stringify(this.data);
+      mpvue.navigateTo({
+        url: "/pages/user_center/discountCard/main?deliver=" + deliver,
+      });
+    },
+    radiocon() {
+      //   $this.check = !$this.check;
+      $this.check = false;
+      console.log("用户打勾的是 ", $this.check);
+      console.log($this.$refs);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.boxVer {
+  flex-direction: column;
+  box-sizing: border-box;
+}
+.upBox {
+  height: 190px;
+  margin-bottom: 190px;
+}
+.title {
+  margin-bottom: 13rpx;
+}
+.discountLeft {
+  width: 250px;
+}
+.mine_min {
+  font-size: 36px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+}
+.font {
+  color: #4b4b4b;
+  font-family: PingFang;
+}
+.rightArrow {
+  margin-top: 3px;
+}
+/*充值按钮*/
+.recharge_button {
+  width: 208px;
+  height: 44px;
+}
+
+.discountPic {
+  height: 27px;
+  width: 37px;
+  background-image: url("https://img.shuimuai.com/icon_discount.png");
+  background-size: 100% 100%;
+  margin-right: 11px;
+}
+</style>

src/pages/user_center/confirmPay/main.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import App from './index'
+
+// add this to handle exception
+Vue.config.errorHandler = function (err) {
+  if (console && console.error) {
+    console.error(err)
+  }
+}
+
+const app = new Vue(App)
+app.$mount()

src/pages/user_center/confirmPay/main.json

@@ -0,0 +1,6 @@
+{
+    "usingComponents": {
+       
+    }
+  }
+  

src/pages/user_center/discountCard/index.vue

@@ -0,0 +1,106 @@
+<template>
+    <div>
+        <div class="quan_list">
+
+          <div class="quan_container shadow bg-white" v-for="(item,index) in couponData" :key="index">
+            
+              <van-row gutter="9">
+              <van-col span="12" offset="1">
+                <div class="padding-top-sm">
+                  <text class="title text-lg text-bold">{{ item.name }}</text>
+                </div>
+                
+                <view class="padding-top-xs" v-if="item.type==2">
+                  <text class="text-sm">满{{ item.full }}可用</text>
+                </view>
+
+                <view :class="item.type==2?'padding-top-xs':'padding-top-xl'">
+                  <text class="text-xs">有效期：{{item.start_time}}~{{item.end_time}}</text>
+                </view>
+              </van-col>
+
+              <van-col span="9" offset="1" >
+                  <div class="padding-top-sm text-lg padding-bottom-xl margin-bottom-xs">
+                      <view class="subtitle text-bold">可抵扣&nbsp;
+                        <text class="text-red">￥{{ item.reduce }}</text>
+                      </view>
+                 </div>
+                  
+              </van-col>
+             
+             
+                <div class="cartLeft"></div>
+                <van-row gutter="9">
+                    <van-col span="12" offset="1">
+                        
+                    </van-col>      
+                    <van-col span="9" offset="1" >
+                      <text class="text-sm text-grey rule">使用规则</text>
+                    </van-col>  
+                </van-row>
+             
+            </van-row>
+          
+        </div>
+
+
+        </div>
+    </div>
+</template>
+
+<script>
+import { formatTimeAnother } from "../../../utils/index.js";
+export default {
+    data() {
+      return {
+        couponData: {},
+        deliver:{}
+      };
+    },
+    onLoad(options) {
+       let $params = JSON.parse(options.deliver);
+       console.log("参数",$params)
+       this.$fly.get("https://testapi.shuimuai.com/coupon/choose-coupon?price=" +$params.price+"&goods_id=" +$params.goods_id)
+           .then((res)=>{
+               console.log('优惠券',res.data.data)
+               let $data = res.data.data
+               this.couponData = $data
+               this.couponData.forEach(($val, $index) => {
+                    $val['start_time'] = formatTimeAnother($val['start_time'])
+                    $val['end_time'] = formatTimeAnother($val['end_time'])
+                    if($val['type']==3){
+                        $val["reduce"] = Math.round(($params.price-$params.price*$val["discount"])*100)/100
+                    }else if($val['type']==2){
+                        $val["reduce"] = $val["reduce"]
+                    }else if($val['type']==4){
+                        $val["reduce"] = $val["random"]
+                    }
+               })
+           })
+           .catch((err)=>{
+               console.log(err)
+           })
+  },
+}
+</script>
+
+<style scoped>
+.quan_container {
+  background-image: url("https://img.shuimuai.com/pic_payCoupon.png");
+  background-position: center;
+  background-size: 100% 100%;
+  width: 340px;
+  height: 115px;
+  margin: 10px auto;
+}
+.cartLeft{
+width: 85%;
+margin: 10px auto;
+height: 82px;
+border-bottom: 1rpx dashed #a7a8a8;
+
+}
+.rule{
+    text-decoration: underline;
+}
+</style>

src/pages/user_center/discountCard/main.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import App from './index'
+
+// add this to handle exception
+Vue.config.errorHandler = function (err) {
+  if (console && console.error) {
+    console.error(err)
+  }
+}
+
+const app = new Vue(App)
+app.$mount()

src/pages/user_center/discountCard/main.json

@@ -0,0 +1,7 @@
+{
+    "usingComponents": {
+      "van-row": "../../../static/vant/row/index",
+      "van-col": "../../../static/vant/col/index",
+      "van-popup": "../../../static/vant/popup/index"
+    }
+  }

src/pages/user_center/recharge/index.vue

@@ -104,7 +104,7 @@
         <div class="buy_button">
           <button
             class="cu-btn lg bg-orange text-center margin yellowButt"
-            @click="open_order_confirm(item)"
+            @click="to_confirm(item)"
           >购买{{item.goods_name}}</button>
         </div>
       </view>
@@ -195,7 +195,7 @@
         <div class="buy_button">
           <button
             class="cu-btn lg bg-orange text-center margin yellowButt"
-            @click="open_order_confirm(item)"
+            @click="to_confirm(item)"
           >购买{{
             item.goods_name
             }}
@@ -347,10 +347,47 @@ export default {
   watch: {},
   methods: {
     //弹出确认订单
-    open_order_confirm($item) {
-      $this.order_confirm = true;
-      $item["total_price"] = ($item.price * $item.discount).toFixed(2);
-      $this.selection_card = $item;
+    // to_confirm($item) {
+    //   $this.order_confirm = true;
+    //   $item["total_price"] = ($item.price * $item.discount).toFixed(2);
+    //   $this.selection_card = $item;
+    // },
+    to_confirm($item) {
+      // console.log("data",$item)
+      //实付
+      if($item.coupon.type==3){
+        $item["total_price"] = $item.price*$item.coupon.discount
+      }else if($item.coupon.type==2){
+         $item["total_price"] = $item.price-$item.coupon.reduce
+      }else if($item.coupon.type==4){
+          $item["total_price"] = $item.price-$item.coupon.random
+      }else{
+          $item["total_price"] = Math.round($item.price*$item.discount*100)/10
+      }
+      //减多少
+      if($item.coupon.type==3){
+        $item["reduce"] = $item.price-$item.price*$item.coupon.discount
+      }else if($item.coupon.type==2){
+         $item["reduce"] = $item.coupon.reduce
+      }else if($item.coupon.type==4){
+          $item["reduce"] = $item.coupon.random
+      }
+      // $item["total_price"] = ($item.price * $item.discount).toFixed(2);
+      if($item.goods_id==1){
+         $item["add_price"] = 20
+         $item["add_month"] = "一"
+      }else if($item.goods_id==2){
+         $item["add_price"] = 30
+         $item["add_month"] = "三"
+      }else if($item.goods_id==3){
+         $item["add_price"] = 30
+         $item["add_month"] = "三"
+      }
+      $this.selection_card = $item;
+      var data = JSON.stringify($item);
+      mpvue.navigateTo({
+        url: "/pages/user_center/confirmPay/main?data=" + data,
+      });
     },
     //关闭确认订单
     close_order_confirm() {

src/requests/coupons.js

@@ -34,3 +34,4 @@ export function couponReceiveFirst() {
   }
   return fly.post('coupon/coupon-receive', $params)
 }
+

src/utils/index.js

@@ -17,6 +17,18 @@ export function formatTime(date) {
   return year + "/" + month + "/" + day;
 }
 
+export function formatTimeAnother(date) {
+  
+  var date = new Date(date* 1000);
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+
+  const hour = date.getHours();
+
+  return year + "-" + month + "-" + day;
+}
+
 export function formatAllTime(date) {
   if (date.length <= 11) {
     date = date * 1000;