fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by 邱骏
Commit 32677bd2a268eefd5d88235d27177a8500580139 2 parents 1f27c471 71419cb7

Merge branch 'develop' of http://git.yoho.cn/fe/xianyu-ufo-app-web into develop

Inline Side-by-side
Showing 2 changed files with 93 additions and 70 deletions
1 <template> 1 <template>
2 - <layout-app :title="'\u200E'"> 2 + <layout-app :title="'\u200E'" class="buyer-order-detail-wrapper">
  3 + <scroll>
3 <div class="order-detail-wrapper"> 4 <div class="order-detail-wrapper">
4 <div class="content"> 5 <div class="content">
5 <!-- 状态信息 --> 6 <!-- 状态信息 -->
@@ -25,7 +26,11 @@ @@ -25,7 +26,11 @@
25 <!-- 商品信息 --> 26 <!-- 商品信息 -->
26 <order-item-info class="item-wrapper" /> 27 <order-item-info class="item-wrapper" />
27 <!-- 鉴定视频 --> 28 <!-- 鉴定视频 -->
28 - <div class="video-img" v-if="orderDetail.appraiseVideoUrl" @click="() => onVideoHandler()"></div> 29 + <div
  30 + class="video-img"
  31 + v-if="orderDetail.appraiseVideoUrl"
  32 + @click="() => onVideoHandler()"
  33 + ></div>
29 <div class="video-wrapper"> 34 <div class="video-wrapper">
30 <VideoPlayer 35 <VideoPlayer
31 ref="videoPlayer" 36 ref="videoPlayer"
@@ -46,7 +51,10 @@ @@ -46,7 +51,10 @@
46 <span class="label">活动优惠:</span> 51 <span class="label">活动优惠:</span>
47 <span>-¥{{ priceInfo.activityCutPrice }}</span> 52 <span>-¥{{ priceInfo.activityCutPrice }}</span>
48 </p> 53 </p>
49 - <p v-if="parseFloat(priceInfo.feePrice || '') > 0" class="delivery-fee"> 54 + <p
  55 + v-if="parseFloat(priceInfo.feePrice || '') > 0"
  56 + class="delivery-fee"
  57 + >
50 <span class="label">运费:</span> 58 <span class="label">运费:</span>
51 <span>¥{{ priceInfo.feePrice }}</span> 59 <span>¥{{ priceInfo.feePrice }}</span>
52 </p> 60 </p>
@@ -93,7 +101,8 @@ @@ -93,7 +101,8 @@
93 </p> 101 </p>
94 </div> 102 </div>
95 </div> 103 </div>
96 - 104 + </div>
  105 + </scroll>
97 <div v-if="actionList.length > 0" class="footer-wrapper"> 106 <div v-if="actionList.length > 0" class="footer-wrapper">
98 <div v-if="statusDetail.status === 0"> 107 <div v-if="statusDetail.status === 0">
99 <p class="real-pay-price">¥{{ priceInfo.realPayPrice }}</p> 108 <p class="real-pay-price">¥{{ priceInfo.realPayPrice }}</p>
@@ -107,7 +116,6 @@ @@ -107,7 +116,6 @@
107 " 116 "
108 /> 117 />
109 </div> 118 </div>
110 - </div>  
111 </layout-app> 119 </layout-app>
112 </template> 120 </template>
113 121
@@ -125,6 +133,7 @@ import OrderActions from "../components/order-actions"; @@ -125,6 +133,7 @@ import OrderActions from "../components/order-actions";
125 import VideoPlayer from "../order-list/components/video-player"; 133 import VideoPlayer from "../order-list/components/video-player";
126 134
127 import orderActionMixin from "../mixin/order-action"; 135 import orderActionMixin from "../mixin/order-action";
  136 +import { Scroll } from "cube-ui";
128 137
129 const STORE_PATH = "order/orderDetail"; 138 const STORE_PATH = "order/orderDetail";
130 139
@@ -141,7 +150,8 @@ export default { @@ -141,7 +150,8 @@ export default {
141 OrderActions, 150 OrderActions,
142 DetailHeader, 151 DetailHeader,
143 DetailFooter, 152 DetailFooter,
144 - VideoPlayer 153 + VideoPlayer,
  154 + Scroll
145 }, 155 },
146 activated() { 156 activated() {
147 this.copyBtn = new Clipboard(this.$refs.copy, { 157 this.copyBtn = new Clipboard(this.$refs.copy, {
@@ -181,16 +191,12 @@ export default { @@ -181,16 +191,12 @@ export default {
181 </script> 191 </script>
182 192
183 <style lang="scss" scoped> 193 <style lang="scss" scoped>
184 -.order-detail-wrapper {  
185 - // footer高度120px  
186 - padding: 0 40px;  
187 - -webkit-box-orient: vertical;  
188 - height: calc(100vh - 120px);  
189 - overflow-x: hidden;  
190 - overflow-y: auto;  
191 - font-size: 24px; 194 +.buyer-order-detail-wrapper /deep/ .layout-context {
  195 + display: flex;
  196 + flex-direction: column;
  197 +}
192 198
193 - .footer-wrapper { 199 +.footer-wrapper {
194 display: flex; 200 display: flex;
195 justify-content: space-between; 201 justify-content: space-between;
196 align-items: center; 202 align-items: center;
@@ -208,7 +214,19 @@ export default { @@ -208,7 +214,19 @@ export default {
208 margin-top: 0; 214 margin-top: 0;
209 flex: 1; 215 flex: 1;
210 } 216 }
  217 +
  218 + .real-pay-price {
  219 + font-size: 28px;
  220 + color: #d0021b;
211 } 221 }
  222 +}
  223 +
  224 +.order-detail-wrapper {
  225 + // footer高度120px
  226 + padding: 0 40px 120px 40px;
  227 + flex: 1 0 0;
  228 + overflow: hidden;
  229 + font-size: 24px;
212 230
213 .video-img { 231 .video-img {
214 display: block; 232 display: block;
@@ -312,10 +330,5 @@ export default { @@ -312,10 +330,5 @@ export default {
312 font-size: 28px; 330 font-size: 28px;
313 margin-right: 12px; 331 margin-right: 12px;
314 } 332 }
315 -  
316 - .real-pay-price {  
317 - font-size: 28px;  
318 - color: #d0021b;  
319 - }  
320 } 333 }
321 </style> 334 </style>
1 <template> 1 <template>
2 - <layout-app :title="'\u200E'"> 2 + <layout-app :title="'\u200E'" class="seller-order-detail-wrapper">
  3 + <scroll>
3 <div class="order-detail-wrapper"> 4 <div class="order-detail-wrapper">
4 <div class="content"> 5 <div class="content">
5 <!-- 状态信息 --> 6 <!-- 状态信息 -->
6 - <detail-header/> 7 + <detail-header />
7 <!-- 物流信息 --> 8 <!-- 物流信息 -->
8 <router-link 9 <router-link
9 v-if="lastExpressInfo" 10 v-if="lastExpressInfo"
@@ -21,9 +22,9 @@ @@ -21,9 +22,9 @@
21 </div> 22 </div>
22 </router-link> 23 </router-link>
23 <!-- 地址信息 --> 24 <!-- 地址信息 -->
24 - <address-info class="item-wrapper"/> 25 + <address-info class="item-wrapper" />
25 <!-- 商品信息 --> 26 <!-- 商品信息 -->
26 - <order-item-info class="item-wrapper"/> 27 + <order-item-info class="item-wrapper" />
27 <!-- 价格信息 --> 28 <!-- 价格信息 -->
28 <div class="price-info item-wrapper"> 29 <div class="price-info item-wrapper">
29 <p> 30 <p>
@@ -62,13 +63,18 @@ @@ -62,13 +63,18 @@
62 </p> --> 63 </p> -->
63 <p v-if="orderDetail.earnestMoneyStr"> 64 <p v-if="orderDetail.earnestMoneyStr">
64 <span class="label">保证金:</span> 65 <span class="label">保证金:</span>
65 - <span class="earnest-price">{{ orderDetail.earnestMoneyStr }}</span> 66 + <span class="earnest-price">{{
  67 + orderDetail.earnestMoneyStr
  68 + }}</span>
66 </p> 69 </p>
67 <p v-if="statusDetail.paymentTips"> 70 <p v-if="statusDetail.paymentTips">
68 <span class="payment-tip">{{ statusDetail.paymentTips }}</span> 71 <span class="payment-tip">{{ statusDetail.paymentTips }}</span>
69 </p> 72 </p>
70 </div> 73 </div>
71 </div> 74 </div>
  75 + </div>
  76 + </scroll>
  77 +
72 <div v-if="actionList.length > 0" class="footer-wrapper"> 78 <div v-if="actionList.length > 0" class="footer-wrapper">
73 <div v-if="statusDetail.status === 0"> 79 <div v-if="statusDetail.status === 0">
74 <p class="earnest-price">{{ orderDetail.earnestMoneyStr }}</p> 80 <p class="earnest-price">{{ orderDetail.earnestMoneyStr }}</p>
@@ -89,28 +95,28 @@ @@ -89,28 +95,28 @@
89 " 95 "
90 /> 96 />
91 </div> 97 </div>
92 - </div>  
93 </layout-app> 98 </layout-app>
94 </template> 99 </template>
95 100
96 <script> 101 <script>
97 -import { createNamespacedHelpers } from 'vuex';  
98 -import { Button } from 'cube-ui';  
99 -import Clipboard from 'clipboard'; 102 +import { createNamespacedHelpers } from "vuex";
  103 +import { Button } from "cube-ui";
  104 +import Clipboard from "clipboard";
100 105
101 -import AddressInfo from './components/sell-order-address-info';  
102 -import OrderItemInfo from './components/order-detail-item';  
103 -import DetailHeader from './components/header';  
104 -import DetailFooter from './components//detail-footer'; 106 +import AddressInfo from "./components/sell-order-address-info";
  107 +import OrderItemInfo from "./components/order-detail-item";
  108 +import DetailHeader from "./components/header";
  109 +import DetailFooter from "./components//detail-footer";
105 110
106 -import OrderActions from '../components/order-actions'; 111 +import OrderActions from "../components/order-actions";
107 112
108 -import orderActionMixin from '../mixin/order-action';  
109 -import orderInSaleActionMixin from '../mixin/order-in-sale-action'; 113 +import orderActionMixin from "../mixin/order-action";
  114 +import orderInSaleActionMixin from "../mixin/order-in-sale-action";
110 115
111 -import PlatformFeeInfo from '../components/platform-fee-info'; 116 +import PlatformFeeInfo from "../components/platform-fee-info";
  117 +import { Scroll } from "cube-ui";
112 118
113 -const STORE_PATH = 'order/orderDetail'; 119 +const STORE_PATH = "order/orderDetail";
114 120
115 const { mapActions, mapState, mapGetters } = createNamespacedHelpers( 121 const { mapActions, mapState, mapGetters } = createNamespacedHelpers(
116 STORE_PATH 122 STORE_PATH
@@ -124,7 +130,8 @@ export default { @@ -124,7 +130,8 @@ export default {
124 Button, 130 Button,
125 DetailHeader, 131 DetailHeader,
126 DetailFooter, 132 DetailFooter,
127 - OrderActions 133 + OrderActions,
  134 + Scroll
128 }, 135 },
129 asyncData({ store, router }) { 136 asyncData({ store, router }) {
130 return store.dispatch(`${STORE_PATH}/fetchOrderDetail`, router.params); 137 return store.dispatch(`${STORE_PATH}/fetchOrderDetail`, router.params);
@@ -136,33 +143,33 @@ export default { @@ -136,33 +143,33 @@ export default {
136 return this.orderDetail.orderCode; 143 return this.orderDetail.orderCode;
137 } 144 }
138 }); 145 });
139 - this.copyBtn.on('success', () => { 146 + this.copyBtn.on("success", () => {
140 this.$createToast({ 147 this.$createToast({
141 - txt: '复制成功',  
142 - type: 'txt' 148 + txt: "复制成功",
  149 + type: "txt"
143 }).show(); 150 }).show();
144 }); 151 });
145 }); 152 });
146 }, 153 },
147 computed: { 154 computed: {
148 - ...mapState(['orderDetail']), 155 + ...mapState(["orderDetail"]),
149 ...mapGetters([ 156 ...mapGetters([
150 - 'lastExpressInfo',  
151 - 'priceInfo',  
152 - 'statusDetail',  
153 - 'platformFee',  
154 - 'actionList' 157 + "lastExpressInfo",
  158 + "priceInfo",
  159 + "statusDetail",
  160 + "platformFee",
  161 + "actionList"
155 ]) 162 ])
156 }, 163 },
157 methods: { 164 methods: {
158 - ...mapActions(['fetchOrderDetail']), 165 + ...mapActions(["fetchOrderDetail"]),
159 onPlatformFee() { 166 onPlatformFee() {
160 const { platformFee = {} } = this.orderDetail; 167 const { platformFee = {} } = this.orderDetail;
161 this.$createDialog( 168 this.$createDialog(
162 { 169 {
163 - type: 'alert',  
164 - title: '平台费用',  
165 - confirmBtn: { text: '我知道了' } 170 + type: "alert",
  171 + title: "平台费用",
  172 + confirmBtn: { text: "我知道了" }
166 }, 173 },
167 createElement => { 174 createElement => {
168 return [ 175 return [
@@ -170,15 +177,15 @@ export default { @@ -170,15 +177,15 @@ export default {
170 props: { 177 props: {
171 platformFeeInfo: { 178 platformFeeInfo: {
172 packageFee: platformFee.packageFee, 179 packageFee: platformFee.packageFee,
173 - packageFeeDesc: '商品包装费', 180 + packageFeeDesc: "商品包装费",
174 payChannelPercentage: platformFee.goodsPaymentRatePercent, 181 payChannelPercentage: platformFee.goodsPaymentRatePercent,
175 serviceFee: platformFee.serviceFee, 182 serviceFee: platformFee.serviceFee,
176 - serviceFeeDesc: '平台服务费', 183 + serviceFeeDesc: "平台服务费",
177 appraiseFee: platformFee.appraiseFee, 184 appraiseFee: platformFee.appraiseFee,
178 - appraiseFeeDesc: '商品鉴定费' 185 + appraiseFeeDesc: "商品鉴定费"
179 } 186 }
180 }, 187 },
181 - slot: 'content' 188 + slot: "content"
182 }) 189 })
183 ]; 190 ];
184 } 191 }
@@ -189,16 +196,12 @@ export default { @@ -189,16 +196,12 @@ export default {
189 </script> 196 </script>
190 197
191 <style lang="scss" scoped> 198 <style lang="scss" scoped>
192 -.order-detail-wrapper {  
193 - // footer高度120px  
194 - padding: 0 40px;  
195 - -webkit-box-orient: vertical;  
196 - height: calc(100vh - 210px);  
197 - overflow-x: hidden;  
198 - overflow-y: auto;  
199 - font-size: 24px; 199 +.seller-order-detail-wrapper /deep/ .layout-context {
  200 + display: flex;
  201 + flex-direction: column;
  202 +}
200 203
201 - .footer-wrapper { 204 +.footer-wrapper {
202 display: flex; 205 display: flex;
203 justify-content: space-between; 206 justify-content: space-between;
204 align-items: center; 207 align-items: center;
@@ -216,18 +219,25 @@ export default { @@ -216,18 +219,25 @@ export default {
216 margin-top: 0; 219 margin-top: 0;
217 flex: 1; 220 flex: 1;
218 } 221 }
  222 +
  223 + .earnest-price {
  224 + font-size: 28px;
  225 + color: #d0021b;
219 } 226 }
  227 +}
  228 +
  229 +.order-detail-wrapper {
  230 + // footer高度120px
  231 + padding: 0 40px 120px 40px;
  232 + flex: 1 0 0;
  233 + overflow: hidden;
  234 + font-size: 24px;
220 235
221 .item-wrapper { 236 .item-wrapper {
222 border-top: 1px solid #eee; 237 border-top: 1px solid #eee;
223 padding: 40px 0; 238 padding: 40px 0;
224 } 239 }
225 240
226 - .earnest-price {  
227 - font-size: 28px;  
228 - color: #d0021b;  
229 - }  
230 -  
231 .logistics-info { 241 .logistics-info {
232 display: flex; 242 display: flex;
233 align-items: center; 243 align-items: center;