fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by lea guo
Commit ea9b6103b14b055b514ce7cd46c99e56997de75f 1 parent 24dfe900

订单列表 确认弹框

Inline Side-by-side
Showing 9 changed files with 262 additions and 134 deletions
  1 +<template>
  2 + <popup
  3 + type="dialog"
  4 + :z-index="zIndex"
  5 + :mask="true"
  6 + :center="true"
  7 + v-show="isVisible"
  8 + @mask-click="maskClick"
  9 + >
  10 + <div class="cube-dialog-main">
  11 + <span class="cube-dialog-close" v-show="showClose" @click="close"
  12 + ><i class="cubeic-close"></i
  13 + ></span>
  14 +
  15 + <div :class="containerClass">
  16 + <h2 v-if="title || $slots.title" class="cube-dialog-title">
  17 + <slot name="title">
  18 + <p class="cube-dialog-title-def">{{ title }}</p>
  19 + </slot>
  20 + </h2>
  21 +
  22 + <div class="cube-dialog-content">
  23 + <slot name="content">
  24 + <div class="cube-dialog-content-def">
  25 + <p v-html="content" v-if="content"></p>
  26 + </div>
  27 + </slot>
  28 + </div>
  29 +
  30 + <div
  31 + class="cube-dialog-btns confirm-dialog-btns-wrapper"
  32 + :class="{ 'border-right-1px': isConfirm }"
  33 + >
  34 + <slot name="btns">
  35 + <a
  36 + :href="_cancelBtn.href"
  37 + class="cube-dialog-btn border-top-1px"
  38 + :class="{
  39 + 'cube-dialog-btn_highlight': _cancelBtn.active,
  40 + 'cube-dialog-btn_disabled': _cancelBtn.disabled
  41 + }"
  42 + v-if="isConfirm"
  43 + @click="cancel"
  44 + >{{ _cancelBtn.text }}</a
  45 + >
  46 + <a
  47 + :href="_confirmBtn.href"
  48 + class="cube-dialog-btn border-top-1px"
  49 + :class="{
  50 + 'cube-dialog-btn_highlight': _confirmBtn.active,
  51 + 'cube-dialog-btn_disabled': _confirmBtn.disabled
  52 + }"
  53 + @click="confirm"
  54 + >{{ _confirmBtn.text }}</a
  55 + >
  56 + </slot>
  57 + </div>
  58 + </div>
  59 + </div>
  60 + </popup>
  61 +</template>
  62 +
  63 +<script>
  64 +import { Popup } from "cube-ui";
  65 +import popupMixin from "cube-ui/src/common/mixins/popup";
  66 +import visibilityMixin from "cube-ui/src/common/mixins/visibility";
  67 +import localMixin from "cube-ui/src/common/mixins/locale";
  68 +
  69 +const COMPONENT_NAME = "confirm-dialog";
  70 +const EVENT_CONFIRM = "confirm";
  71 +const EVENT_CANCEL = "cancel";
  72 +const EVENT_CLOSE = "close";
  73 +
  74 +const defHref = "javascript:;";
  75 +
  76 +const defConfirmBtn = {
  77 + textType: "ok",
  78 + active: true,
  79 + disabled: false,
  80 + href: defHref
  81 +};
  82 +
  83 +const defCancelBtn = {
  84 + textType: "cancel",
  85 + active: false,
  86 + disabled: false,
  87 + href: defHref
  88 +};
  89 +
  90 +const parseBtn = function(btn, defBtn) {
  91 + if (typeof btn === "string") {
  92 + btn = { text: btn };
  93 + }
  94 + const text = defBtn && this.$t(defBtn.textType);
  95 + return Object.assign({}, defBtn, { text }, { btn });
  96 +};
  97 +
  98 +export default {
  99 + name: COMPONENT_NAME,
  100 + mixins: [popupMixin, visibilityMixin, localMixin],
  101 + props: {
  102 + type: {
  103 + type: String,
  104 + default: "confirm"
  105 + },
  106 + title: {
  107 + type: String,
  108 + default: ""
  109 + },
  110 + content: {
  111 + type: String,
  112 + default: ""
  113 + },
  114 + showClose: {
  115 + type: Boolean,
  116 + default: false
  117 + },
  118 + confirmBtn: {
  119 + type: [Object, String],
  120 + default() {
  121 + return { ...defConfirmBtn };
  122 + }
  123 + },
  124 + cancleBtn: {
  125 + type: [Object, String],
  126 + default() {
  127 + return {
  128 + ...defCancelBtn
  129 + };
  130 + }
  131 + }
  132 + },
  133 + components: {
  134 + Popup
  135 + },
  136 + computed: {
  137 + _confirmBtn() {
  138 + return parseBtn.call(this, this.confirmBtn, defConfirmBtn);
  139 + },
  140 + _cancelBtn() {
  141 + return parseBtn.call(this, this.cancelBtn, defCancelBtn);
  142 + },
  143 + isConfirm() {
  144 + return this.type === "confirm";
  145 + },
  146 + containerClass() {
  147 + return `cube-dialog-${this.type}`;
  148 + }
  149 + },
  150 + methods: {
  151 + maskClick(e) {
  152 + this.maskClosable && this.cancel(e);
  153 + },
  154 + confirm() {
  155 + if (this._confirmBtn.disabled) {
  156 + return;
  157 + }
  158 + this.hide();
  159 + this.$emit(EVENT_CONFIRM, e);
  160 + },
  161 + cancel(e) {
  162 + if (this._cancelBtn.disabled) {
  163 + return;
  164 + }
  165 + this.hide();
  166 + this.$emit(EVENT_CANCEL, e);
  167 + },
  168 + close(e) {
  169 + this.hide();
  170 + this.$emit(EVENT_CLOSE, e);
  171 + }
  172 + }
  173 +};
  174 +</script>
  175 +
  176 +<style lang="scss" scoped>
  177 +.confirm-dialog-btns-wrapper {
  178 + display: flex;
  179 + flex-direction: row-reverse;
  180 +}
  181 +</style>
  1 +import ConfirmDialog from './confirm-dialog';
  2 +import createApi from 'utils/create-api';
  3 +
  4 +ConfirmDialog.install = function(Vue) {
  5 + Vue.component(ConfirmDialog.name, ConfirmDialog);
  6 + createApi(
  7 + Vue,
  8 + ConfirmDialog,
  9 + ['confirm', 'cancel', 'close', 'btn-click', 'link-click'],
  10 + true,
  11 + );
  12 +};
  13 +
  14 +export default ConfirmDialog;
@@ -12,6 +12,7 @@ import OrderPayType from 'components/order-pay-type'; @@ -12,6 +12,7 @@ import OrderPayType from 'components/order-pay-type';
12 import OrderCouponList from 'components/order-coupon-list'; 12 import OrderCouponList from 'components/order-coupon-list';
13 import OrderPromotionList from 'components/order-promotion-list'; 13 import OrderPromotionList from 'components/order-promotion-list';
14 import Bind from 'components/bind'; 14 import Bind from 'components/bind';
  15 +import ConfirmDialog from 'components/confirm-dialog';
15 16
16 import sdk from 'yoho-activity-sdk'; 17 import sdk from 'yoho-activity-sdk';
17 18
@@ -46,6 +47,7 @@ Vue.use(OrderPayType); @@ -46,6 +47,7 @@ Vue.use(OrderPayType);
46 Vue.use(OrderCouponList); 47 Vue.use(OrderCouponList);
47 Vue.use(OrderPromotionList); 48 Vue.use(OrderPromotionList);
48 Vue.use(Bind); 49 Vue.use(Bind);
  50 +Vue.use(ConfirmDialog);
49 51
50 initClient(store); 52 initClient(store);
51 53
@@ -16,15 +16,8 @@ import { @@ -16,15 +16,8 @@ import {
16 ownType 16 ownType
17 } from "../../../../constants/order-constants"; 17 } from "../../../../constants/order-constants";
18 import { createNamespacedHelpers } from "vuex"; 18 import { createNamespacedHelpers } from "vuex";
19 -import CancelConfirmInfo from "./order-list/cancel-confirm-info";  
20 19
21 -const { mapActions, mapState } = createNamespacedHelpers("order/orderList");  
22 -  
23 -const { mapMutations: orderMapMutations } = createNamespacedHelpers("order");  
24 -  
25 -const { mapMutations: inSaleOrderMapMutations } = createNamespacedHelpers(  
26 - "order/inSaleOrderList"  
27 -); 20 +const { mapActions } = createNamespacedHelpers("order/orderList");
28 21
29 export default { 22 export default {
30 props: { 23 props: {
@@ -34,7 +27,6 @@ export default { @@ -34,7 +27,6 @@ export default {
34 } 27 }
35 }, 28 },
36 computed: { 29 computed: {
37 - ...mapState(["cancelConfirmInfo"]),  
38 actionList: function() { 30 actionList: function() {
39 return this.order.buttons; 31 return this.order.buttons;
40 } 32 }
1 -<template>  
2 - <div class="cnacel-confirm-info">  
3 - <p v-if="confirmInfo.confirmDesc">{{ confirmInfo.confirmDesc }}</p>  
4 - </div>  
5 -</template>  
6 -  
7 -<script>  
8 -export default {  
9 - props: {  
10 - confirmInfo: { type: Object, default: null }  
11 - }  
12 -};  
13 -</script>  
14 -  
15 -<style lang="scss" scoped>  
16 -.cnacel-confirm-info {  
17 - display: flex;  
18 - justify-content: center;  
19 -}  
20 -</style>  
@@ -92,7 +92,6 @@ import DetailHeader from "./components/header"; @@ -92,7 +92,6 @@ import DetailHeader from "./components/header";
92 import DetailFooter from "./components//detail-footer"; 92 import DetailFooter from "./components//detail-footer";
93 93
94 import OrderActions from "../components/order-actions"; 94 import OrderActions from "../components/order-actions";
95 -import CancelConfirmInfo from "../components/order-list/cancel-confirm-info";  
96 95
97 import { 96 import {
98 orderActionsMap, 97 orderActionsMap,
@@ -174,32 +173,22 @@ export default { @@ -174,32 +173,22 @@ export default {
174 orderCode, 173 orderCode,
175 owner 174 owner
176 }); 175 });
177 - this.$createDialog(  
178 - {  
179 - type: "confirm",  
180 - confirmBtn: { text: "取消订单" },  
181 - cancelBtn: { text: "保留订单" },  
182 - onConfirm: async () => {  
183 - const isOk = await this.cancelTrade({  
184 - orderCode,  
185 - owner  
186 - });  
187 - if (isOk) {  
188 - this.fetchOrderDetail(this.$route.params);  
189 - }  
190 - const txt = isOk ? "取消成功" : "取消失败";  
191 - this.$createToast({ txt, type: "txt" }).show(); 176 + this.$createDialog({
  177 + type: "confirm",
  178 + confirmBtn: { text: "取消订单" },
  179 + cancelBtn: { text: "保留订单" },
  180 + onConfirm: async () => {
  181 + const isOk = await this.cancelTrade({
  182 + orderCode,
  183 + owner
  184 + });
  185 + if (isOk) {
  186 + this.fetchOrderDetail(this.$route.params);
192 } 187 }
193 - },  
194 - createElement => {  
195 - return [  
196 - createElement(CancelConfirmInfo, {  
197 - slot: "content",  
198 - props: { confirmInfo }  
199 - })  
200 - ]; 188 + const txt = isOk ? "取消成功" : "取消失败";
  189 + this.$createToast({ txt, type: "txt" }).show();
201 } 190 }
202 - ).show(); 191 + }).show();
203 break; 192 break;
204 default: 193 default:
205 return; 194 return;
@@ -101,7 +101,6 @@ import DetailHeader from "./components/header"; @@ -101,7 +101,6 @@ import DetailHeader from "./components/header";
101 import DetailFooter from "./components//detail-footer"; 101 import DetailFooter from "./components//detail-footer";
102 102
103 import OrderActions from "../components/order-actions"; 103 import OrderActions from "../components/order-actions";
104 -import CancelConfirmInfo from "../components/order-list/cancel-confirm-info";  
105 104
106 import { 105 import {
107 orderActionsMap, 106 orderActionsMap,
@@ -184,32 +183,22 @@ export default { @@ -184,32 +183,22 @@ export default {
184 orderCode, 183 orderCode,
185 owner 184 owner
186 }); 185 });
187 - this.$createDialog(  
188 - {  
189 - type: "confirm",  
190 - confirmBtn: { text: "不卖了" },  
191 - cancelBtn: { text: "继续出售" },  
192 - onConfirm: async () => {  
193 - const isOk = await this.cancelTrade({  
194 - orderCode,  
195 - owner  
196 - });  
197 - if (isOk) {  
198 - this.fetchOrderDetail(this.$route.params);  
199 - }  
200 - // const txt = isOk ? "取消成功" : "取消失败";  
201 - // this.$createToast({ txt, type: "txt" }).show(); 186 + this.$createDialog({
  187 + type: "confirm",
  188 + confirmBtn: { text: "不卖了" },
  189 + cancelBtn: { text: "继续出售" },
  190 + onConfirm: async () => {
  191 + const isOk = await this.cancelTrade({
  192 + orderCode,
  193 + owner
  194 + });
  195 + if (isOk) {
  196 + this.fetchOrderDetail(this.$route.params);
202 } 197 }
203 - },  
204 - createElement => {  
205 - return [  
206 - createElement(CancelConfirmInfo, {  
207 - slot: "content",  
208 - props: { confirmInfo }  
209 - })  
210 - ]; 198 + // const txt = isOk ? "取消成功" : "取消失败";
  199 + // this.$createToast({ txt, type: "txt" }).show();
211 } 200 }
212 - ).show(); 201 + }).show();
213 break; 202 break;
214 default: 203 default:
215 return; 204 return;
@@ -47,7 +47,6 @@ import EmptyList from "../../../components//ufo-no-item"; @@ -47,7 +47,6 @@ import EmptyList from "../../../components//ufo-no-item";
47 47
48 import OrderActions from "../components/order-actions"; 48 import OrderActions from "../components/order-actions";
49 import CountDown from "../components/count-down"; 49 import CountDown from "../components/count-down";
50 -import CancelConfirmInfo from "../components/order-list/cancel-confirm-info";  
51 50
52 import { 51 import {
53 orderActionsMap, 52 orderActionsMap,
@@ -126,32 +125,22 @@ export default { @@ -126,32 +125,22 @@ export default {
126 orderCode, 125 orderCode,
127 owner 126 owner
128 }); 127 });
129 - this.$createDialog(  
130 - {  
131 - type: "confirm",  
132 - confirmBtn: { text: "不卖了" },  
133 - cancelBtn: { text: "继续出售" },  
134 - onConfirm: async () => {  
135 - const isOk = await this.cancelTrade({  
136 - orderCode,  
137 - owner  
138 - });  
139 - if (isOk) {  
140 - this.filterOrderList(orderCode);  
141 - }  
142 - // const txt = isOk ? "取消成功" : "取消失败";  
143 - // this.$createToast({ txt, type: "txt" }).show(); 128 + this.$createDialog({
  129 + type: "confirm",
  130 + confirmBtn: { text: "不卖了" },
  131 + cancelBtn: { text: "继续出售" },
  132 + onConfirm: async () => {
  133 + const isOk = await this.cancelTrade({
  134 + orderCode,
  135 + owner
  136 + });
  137 + if (isOk) {
  138 + this.filterOrderList(orderCode);
144 } 139 }
145 - },  
146 - createElement => {  
147 - return [  
148 - createElement(CancelConfirmInfo, {  
149 - slot: "content",  
150 - props: { confirmInfo }  
151 - })  
152 - ]; 140 + // const txt = isOk ? "取消成功" : "取消失败";
  141 + // this.$createToast({ txt, type: "txt" }).show();
153 } 142 }
154 - ).show(); 143 + }).show();
155 break; 144 break;
156 default: 145 default:
157 return; 146 return;
@@ -55,7 +55,6 @@ import EmptyList from "../../../components//ufo-no-item"; @@ -55,7 +55,6 @@ import EmptyList from "../../../components//ufo-no-item";
55 55
56 import OrderActions from "../components/order-actions"; 56 import OrderActions from "../components/order-actions";
57 import CountDown from "../components/count-down"; 57 import CountDown from "../components/count-down";
58 -import CancelConfirmInfo from "../components/order-list/cancel-confirm-info";  
59 58
60 const { mapActions, mapState, mapMutations } = createNamespacedHelpers( 59 const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
61 "order/orderList" 60 "order/orderList"
@@ -82,7 +81,7 @@ export default { @@ -82,7 +81,7 @@ export default {
82 }, 81 },
83 82
84 // 获取订单数据 83 // 获取订单数据
85 - asyncData({ store, router }) { 84 + asyncData() {
86 // const { owner, status } = router.params; 85 // const { owner, status } = router.params;
87 // store.dispatch("order/orderList/fetchOrderList", { owner, status }); 86 // store.dispatch("order/orderList/fetchOrderList", { owner, status });
88 }, 87 },
@@ -124,9 +123,10 @@ export default { @@ -124,9 +123,10 @@ export default {
124 switch (action.name) { 123 switch (action.name) {
125 // 删除订单 124 // 删除订单
126 case orderActionsMap.DEL_ORDER.name: 125 case orderActionsMap.DEL_ORDER.name:
127 - this.$createDialog({  
128 - type: "confirm", 126 + this.$createConfirmDialog({
129 content: "确认删除订单？", 127 content: "确认删除订单？",
  128 + confirmBtn: { disabled: true },
  129 + cancelBtn: { active: true },
130 onConfirm: async () => { 130 onConfirm: async () => {
131 const isOk = await this.deleteOrder({ 131 const isOk = await this.deleteOrder({
132 orderCode, 132 orderCode,
@@ -146,39 +146,31 @@ export default { @@ -146,39 +146,31 @@ export default {
146 orderCode, 146 orderCode,
147 owner 147 owner
148 }); 148 });
149 - this.$createDialog(  
150 - {  
151 - type: "confirm",  
152 - confirmBtn: { text: "取消订单" },  
153 - cancelBtn: { text: "保留订单" },  
154 - onConfirm: async () => {  
155 - const isOk = await this.cancelTrade({  
156 - orderCode,  
157 - owner  
158 - });  
159 - if (isOk) {  
160 - this.resetData();  
161 - this.fetchData(this.$route.params);  
162 - }  
163 - const txt = isOk ? "取消成功" : "取消失败";  
164 - this.$createToast({ txt, type: "txt" }).show(); 149 + this.$createDialog({
  150 + type: "confirm",
  151 + confirmBtn: { text: "取消订单" },
  152 + cancelBtn: { text: "保留订单" },
  153 + onConfirm: async () => {
  154 + const isOk = await this.cancelTrade({
  155 + orderCode,
  156 + owner
  157 + });
  158 + if (isOk) {
  159 + this.resetData();
  160 + this.fetchData(this.$route.params);
165 } 161 }
166 - },  
167 - createElement => {  
168 - return [  
169 - createElement(CancelConfirmInfo, {  
170 - slot: "content",  
171 - props: { confirmInfo }  
172 - })  
173 - ]; 162 + const txt = isOk ? "取消成功" : "取消失败";
  163 + this.$createToast({ txt, type: "txt" }).show();
174 } 164 }
175 - ).show(); 165 + }).show();
176 break; 166 break;
177 } 167 }
178 } 168 }
179 }, 169 },
180 watch: { 170 watch: {
181 - $route() {} 171 + // routerHistory(v) {
  172 + // console.log("---------routerHistory---------", v);
  173 + // }
182 } 174 }
183 }; 175 };
184 </script> 176 </script>