订单页面组件,逻辑

api/order.js

@@ -50,4 +50,33 @@ export function getStoreService(data = {
         method: 'post',
         data:data
     })
+}
+
+/**
+ * 获取价格
+ * @param data
+ * @returns {Promise<unknown>}
+ */
+export function getOrderPrice(data = {
+    "address_id":""
+}){
+    return request({
+        url:"order/get-petorderprice",
+        method: 'post',
+        data:data
+    })
+}
+/**
+ * 创建订单
+ * @param data
+ * @returns {Promise<unknown>}
+ */
+export function createOrderPrice(data = {
+    "address_id":""
+}){
+    return request({
+        url:"order/create-petorder",
+        method: 'post',
+        data:data
+    })
 }

pages/OrderPage/index.vue

@@ -183,11 +183,21 @@
     <view class="row col">
       <view class="foot-menu-main-title row">
         <view class="main-title">费用共计</view>
-        <view class="main-price">￥58.8</view>
+        <view class="main-price">￥{{price.all_price}}</view>
         <view class="main-title">元</view>
       </view>
       <view class="foot-menu-checkbox-group row col">
-        <view class="foot-menu-checkbox"></view>
+        <view class="foot-menu-checkbox">
+          <u-checkbox
+              shape="circle"
+              size="26"
+              custom-style="margin-top:0;margin-bottom:0;"
+              icon-size="24"
+              active-color="#4DC3B8"
+              :checked="readInfo"
+              @change="readInfo = !readInfo"
+          ></u-checkbox>
+        </view>
         <view class="foot-menu-title">
           <text>阅读并同意</text><text class="foot-menu-url" @click="showAgreement">《上门喂养协议》</text>
         </view>
@@ -199,6 +209,7 @@
          button-color="#4DC3B8"
          font-color="#FFFFFF"
          button-width="200rpx"
+         @click="readInfo ? orderPay() :$u.toast('请先同意协议')"
      >
      </MzButton>
    </view>
@@ -340,9 +351,14 @@
   import {cardDetail} from "@/api/card";
   import {getAddressList} from "@/api/address";
   import image from "@/config/image";
-  import {getStoreService} from "@/api/order";
+  import {createOrderPrice, getOrderPrice, getStoreService} from "@/api/order";
   import pet from "@/pages/Pet/index.vue";
 	export default {
+    computed: {
+      api() {
+        return api
+      }
+    },
 		components: {
 			HeaderNav,
 			FooterNav,
@@ -352,6 +368,12 @@
 		},
 		data() {
 			return {
+        readInfo:false,
+        price:{
+          all_price:0,
+          price:0,
+          quan_reduce:0,
+        },
         radioValue1:[],
         list: ['未付款', '待评价', '已付款'],
         curNow: 0,
@@ -415,13 +437,36 @@
       this.id = options.id;
 		},
     updated() {
-      this.checkOrderData();
+
     },
     onShow(){
       this.getDefaultAddress();
       this.getUserCoupons();
     },
 		methods: {
+      orderPay(){
+
+        if(
+            this.address
+            &&this.timeList.length>0
+            &&this.petChecked.length>0
+            &&this.basicServiceChecked!==''
+        ){
+          console.log(this.basicServiceChecked)
+          createOrderPrice({
+            address_id: this.address.id,
+            do_date: this.timeList.map(res => [res.date,res.time]),
+            services: this.addServiceList.map(res => res.id).join(','),
+            basic_service:this.basicServiceChecked,
+            pet_ids: this.petChecked.map(res => res.id).join(','),
+            store_id:this.addServiceList[0].store_id,
+            user_coupon_id:this.coupons.id || 0
+          }).then(res => {
+            console.log(res)
+            this.price = res.data;
+          });
+        }
+      },
       checkOrderData(){
         if(
             this.address
@@ -429,14 +474,28 @@
             &&this.petChecked.length>0
             &&this.basicServiceChecked!==''
         ){
-          console.log('formDone')
+          console.log(this.basicServiceChecked)
+          getOrderPrice({
+            address_id: this.address.id,
+            do_date: this.timeList.map(res => [res.date,res.time]),
+            services: this.addServiceList.map(res => res.id).join(','),
+            basic_service:this.basicServiceChecked,
+            pet_ids: this.petChecked.map(res => res.id).join(','),
+            store_id:this.addServiceList[0].store_id,
+            user_coupon_id:this.coupons.id || 0
+          }).then(res => {
+            console.log(res)
+            this.price = res.data;
+          });
         }
       },
       selectPet(petList){
         this.petChecked = petList;
+        this.checkOrderData();
       },
       delPet(index){
         this.petChecked.splice(index,1);
+        this.checkOrderData();
       },
       doDatePopupConfirm(){
         this.timeListTemp.forEach(item => {
@@ -451,6 +510,7 @@
       doTimeSelect(value){
         this.timeListTemp[this.vTabCurrent].time = value
         console.log(this.timeListTemp)
+        this.checkOrderData();
       },
       changeVTab(index){
         console.log(index)
@@ -539,6 +599,7 @@
       radioChange(n) {
         this.basicServiceChecked = n.id
         console.log('radioChange', n);
+        this.checkOrderData();
       },
       groupChange(n) {
         console.log('radioChange', n);

pages/UserCoupons/index.vue

@@ -31,6 +31,9 @@
 						<view class="coupons-gq " v-show="item.is_timeout">
 							<image class="img" :src="staticImage.couponsGQ" mode="aspectFill" />
 						</view>
+						<view class="coupons-gq " v-show="!item.is_timeout">
+							<image class="img" :src="staticImage.couponsUse" mode="aspectFill" />
+						</view>
 						<view class="coupons-bottom col-12 row">
 							<view class="coupons-rule row col">查看使用规则 <u-icon class="arrow-right" size="24rpx" color="#999999" name="arrow-right"></u-icon></view>
 							<view class="coupons-button">
@@ -89,6 +92,7 @@
 					couponsBackground: imghost + '/static/image/coupons-bg.png',
 					couponsGrayBackground: imghost + '/static/image/coupons-gray-bg.png',
 					couponsGQ: imghost + '/static/image/coupons-gq.png',
+					couponsUse: imghost + '/static/image/coupons-use.png',
 				},
 				indexBanner: [{
 					image: imghost + '/static/image/banner.png',