取消订单操作

zhiyangdu
1 parent 8e5b6ee2
Showing 3 changed files with 92 additions and 28 deletions
src/components/giftGivingItem/giftGivingItem.vue
src/main.js
src/pages/myGiftBox/myGiftBox.vue
@@ -44,7 +44,7 @@
             <!-- 按钮 -->
             <div class="btn_list">
                 <div class="box">
-                    <div class="btn">取消支付</div>
+                    <div @click="cancelPayment(item)" class="btn">取消支付</div>
                     <div @click="jumpToPay(item)" class="active">立即支付</div>
                 </div>
             </div>
@@ -69,6 +69,10 @@ export default {
         jumpToPay(item){
              this.$emit('jumpToPay',item)
         },
+        // 取消支付
+        cancelPayment(item){
+             this.$emit('cancelPayment',item)
+        },
     }
 };
 </script>
@@ -6,7 +6,7 @@ import VueHead from &quot;vue-head&quot;;
 import sha1 from "sha1";
 import 'mint-ui/lib/style.css';
 import { Toast, Indicator,InfiniteScroll } from "mint-ui";
-import { Rate, Popup, Lazyload, Search, PullRefresh, Picker, Image, ImagePreview, Tab, Tabs} from "vant";
+import { Rate, Popup, Lazyload, Search, PullRefresh, Picker, Image, ImagePreview, Tab, Tabs, ActionSheet} from "vant";
 import App from "./App";
 import IdCard from './common/IdCard';
 import VueBus from 'vue-bus';
@@ -24,6 +24,7 @@ Vue.use(ImagePreview);
 Vue.use(VueClipboard)
 Vue.use(Tab);
 Vue.use(Tabs);
+Vue.use(ActionSheet);
 Vue.use(Lazyload, {
     preload: 90,
     loading: "static/img/x.jpg",
@@ -35,14 +35,21 @@
                 <giftGivingItem
                     @onGiftGiving="onGiftGiving"
                     @jumpToPay="jumpToPay"
+                    @cancelPayment="cancelPayment"
                     v-show="active != 0 && active == 1"
                     :giftGivingItem="giftGivingItem"
                 >
                 </giftGivingItem>
                 <!-- 没有更多了 -->
-                <div class="tip_text">{{this.tipText}}</div>
+                <div class="tip_text">{{ this.tipText }}</div>
             </div>
         </div>
+        <!-- 弹出框 -->
+        <van-action-sheet
+            v-model="actionSheetShow"
+            :actions="actions"
+            @select="onSelect"
+        />
     </div>
 </template>
  
@@ -58,17 +65,25 @@ export default {
             active: 0,
             receivingGiftsInfo: null, // 收礼列表页数据
             loading: false, // 判断是否加载
-            receivingGifts: { // 收礼
+            receivingGifts: {
+                // 收礼
                 loading: false, // 加载
                 pages: 0 // 分页
             },
             giftGivingItem: null, // 送礼列表页数据
             giftsRuleUrl: null, // 礼物规则URL
-            giftGiving: { // 送礼
+            giftGiving: {
+                // 送礼
                 loading: false, // 加载
                 pages: 0 // 分页
             },
-            tipText:null // 是否已加载完
+            tipText: null, // 是否已加载完
+            actionSheetShow: false,
+            actions: [
+                // { name: "选项" },
+                // { name: "选项" },
+                // { name: "选项", subname: "描述信息" }
+            ]
         };
     },
     components: {
@@ -94,7 +109,7 @@ export default {
             if (active === 1) {
                 // 调用im是否显示隐藏1显示im聊天弹窗0不显示
                 this.setGiftBottomVisibleBySwitchTab(1);
-                 // 送礼订单列表
+                // 送礼订单列表
                 this.getorderGiveGiftList();
             } else {
                 // 收礼订单列表
@@ -103,21 +118,28 @@ export default {
                 this.setGiftBottomVisibleBySwitchTab(0);
             }
         },
+        // 取消订单选择框
+        onSelect(item) {
+            // 默认情况下点击选项时不会自动收起
+            // 可以通过 close-on-click-action 属性开启自动收起
+            this.actionSheetShow = false;
+            // Toast(item.name);
+        },
         /**
          * 下啦滑动加载更多
          */
         onInfiniteScroll() {
             if (this.active === 0) {
                 // 收礼订单列表
-                this.loading = this.receivingGifts.loading
+                this.loading = this.receivingGifts.loading;
                 this.getorderGiftList();
             } else {
                 // 送礼订单列表
-                this.loading = this.giftGiving.loading
+                this.loading = this.giftGiving.loading;
                 this.getorderGiveGiftList();
             }
-            if(!this.loading){
-                this.tipText = "已经全部加载完毕"
+            if (!this.loading) {
+                this.tipText = "已经全部加载完毕";
             }
         },
         /**
@@ -310,7 +332,10 @@ export default {
                     // 隐藏加载圈
                     this.giftGiving.loading = false;
                     if (this.giftGiving.pages > 1) {
-                        this.$set(this, "giftGivingItem",[...this.giftGivingItem,...datas.list]);
+                        this.$set(this, "giftGivingItem", [
+                            ...this.giftGivingItem,
+                            ...datas.list
+                        ]);
                     } else {
                         this.$set(this, "giftGivingItem", datas.list);
                     }
@@ -362,40 +387,73 @@ export default {
             // 判断并调用通用跳转
             if (typeof this.$parent.gotoDetail === "function") {
                 // 临时，设置跳转商品详情参数
-                let item={
+                let item = {
                     type: "44",
                     to: this.giftsRuleUrl,
                     shop_type: ""
-                }
-                console.log(item)
+                };
+                console.log(item);
                 this.$parent.gotoDetail(item);
             }
         },
+        // 取消支付
+        cancelPayment(item) {
+            // 加载中提示
+            Indicator.open("加载中...");
+
+            // 获取送礼礼物列表接口
+            this.http(
+                "/Api/" + this.getApiVersion().index + "/cancel_order_group",
+                {},
+                this.cancelPaymentCallback,
+                {
+                    method: "get"
+                }
+            );
+        },
+        /**
+         * 取消订单回调获取取消原因数据
+         * @param {object} res [服务器返回数据]
+         * @param {object} ext [扩展参数]
+         */
+        cancelPaymentCallback(res, ext) {
+            // 加载完成
+            Indicator.close();
+
+            // 返回处理
+            if (res.code == 200) {
+                this.actionSheetShow = true;
+                // 解构数据
+                let { data: datas } = res;
+                this.actions = datas.group;
+                // 获取到的数组存到this.actions中去
+                if (datas.group && datas.group.length > 0) {
+                    for (let item in datas.group) {
+                        // push到新数组中
+                        this.actions.push({ name: item });
+                    }
+                }
+            }
+        },
         // 跳转原声支付
-        jumpToPay(item){
-             // App内
+        jumpToPay(item) {
+            // App内
             if (this.isCNLive.value) {
                 // 调用App，返回按键
                 if (
                     window.webkit &&
                     window.webkit.messageHandlers &&
-                    window.webkit.messageHandlers
-                        .jumpToPay
+                    window.webkit.messageHandlers.jumpToPay
                 ) {
                     // App内，iOS销毁WebView
-                    window.webkit.messageHandlers.jumpToPay.postMessage(
-                        { body: { orderNumber: item.id } }
-                    );
-                } else if (
-                    window.obj &&
-                    window.obj.jumpToPay
-                ) {
+                    window.webkit.messageHandlers.jumpToPay.postMessage({
+                        body: { orderNumber: item.id }
+                    });
+                } else if (window.obj && window.obj.jumpToPay) {
                     // App内，Android销毁WebView
                     window.obj.jumpToPay(item.id);
                 }
             }
-            
-
         }
     }
 };
@@ -404,4 +462,4 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style rel="stylesheet/less" lang="less">
 @import "myGiftBox";
 -</style>
+</style>
 \ No newline at end of file