From a69f8924694c708d030df9011b35efb31ff1d6ef Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Thu, 19 May 2022 18:01:06 +0800
Subject: [PATCH] add organize detail

---
 src/components/organize_order/organize_order.vue   |  28 +-
 src/pages.json                                     |   6 +
 src/pages/order_list/order_list.vue                |   6 +-
 src/subpackage/order/js/api.js                     |   3 +
 .../order/pages/organize/detail/detail.vue         | 460 +++++++++++++++++++++
 5 files changed, 498 insertions(+), 5 deletions(-)
 create mode 100644 src/subpackage/order/pages/organize/detail/detail.vue

diff --git a/src/components/organize_order/organize_order.vue b/src/components/organize_order/organize_order.vue
index 74dda8a..dea1bb6 100644
--- a/src/components/organize_order/organize_order.vue
+++ b/src/components/organize_order/organize_order.vue
@@ -15,7 +15,10 @@
 			<view class="rs-line">
 			    <view class="rl-view">约玩主题：</view>
 			    <view class="rl-view">
-			        <view class="rv-view">{{orderInfo.theme || '-'}}</view>
+			        <view class="rv-view">
+						<view class="rv-tag rv-green">个人</view>
+						<text>{{orderInfo.theme || '-'}}</text>
+					</view>
 			    </view>
 			</view>
 			<view class="rs-line">
@@ -158,8 +161,27 @@ export default {
 	        .rl-view,.rv-view{
 	            line-height: 40upx;
 	            font-size: 24upx;
-	            color: #9c9c9f;
+	            color: #9C9C9F;
 	        }
+			.rv-view{
+				color: #1A1A1A;
+				.rv-tag{
+					margin-right: 10upx;
+					display: inline-block;
+					width: 64upx;
+					height: 40upx;
+					line-height: 40upx;
+					text-align: center;
+					border-radius: 6upx;
+					font-size: 20upx;
+					color: #417DCD;
+					background-color: rgba($color: #417DCD, $alpha: .15);
+					&.rv-green{
+						color: #68E339;
+						background-color: rgba($color: #68E339, $alpha: .15);
+					}
+				}
+			}
 	        .rl-view{
 	            &:first-child{
 	                flex-shrink: 0;
@@ -167,7 +189,7 @@ export default {
 	            &+.rl-view{
 	                flex-grow: 1;
 	                .rv-view{
-	                    @include textHide(1);
+	                    @include textHide(2);
 	                }
 	            }
 	        }
diff --git a/src/pages.json b/src/pages.json
index a20f254..b9f0b0e 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -450,6 +450,12 @@
 			"root": "subpackage/order",
 			"pages": [
 				{
+					"path": "pages/organize/detail/detail",
+					"style" : {
+						"navigationBarTitleText": "约玩订单详情" 
+					}
+				},
+				{
 					"path": "pages/retail/detail/detail",
 					"style" : {
 						"navigationBarTitleText": "零售订单详情" 
diff --git a/src/pages/order_list/order_list.vue b/src/pages/order_list/order_list.vue
index a39bdaa..dcce1e3 100644
--- a/src/pages/order_list/order_list.vue
+++ b/src/pages/order_list/order_list.vue
@@ -237,7 +237,7 @@
                 page: ++page,
             })
         },
-        onLoad(options){
+        async onLoad(options){
             let _type = options.order_type || '';
             let _classifyArr = getClassifyList(+_type);
             this.orderType = _type;
@@ -248,7 +248,9 @@
 
 
             this.periodInfo = this.getDefaultTimeLimit(_type);
-
+            
+            await this.$store.dispatch('getBrandInfo');
+            
             this.$nextTick(()=>{
                 this.refreshList()
                 .then(this.getStoreList)
diff --git a/src/subpackage/order/js/api.js b/src/subpackage/order/js/api.js
index b177948..1a3503c 100644
--- a/src/subpackage/order/js/api.js
+++ b/src/subpackage/order/js/api.js
@@ -29,6 +29,9 @@ export const ORDER_API = {
 	ymCardInfoFaceSave:`${ORIGIN}/admin/userMonthlyCard/updateFace`,  // 年月卡用户头像保存
 	ymCardUsage:`${ORIGIN}/admin/userMonthlyCard/usages`,  // 用户年月卡使用记录-后台
 
+	// 20220519
+	organizeOrderDetail:`${ORIGIN}/assistant/gaPlayTogetherOrder/get`, //助手约玩订单详情
+
 }
 
 export default ORDER_API;
\ No newline at end of file
diff --git a/src/subpackage/order/pages/organize/detail/detail.vue b/src/subpackage/order/pages/organize/detail/detail.vue
new file mode 100644
index 0000000..65119b8
--- /dev/null
+++ b/src/subpackage/order/pages/organize/detail/detail.vue
@@ -0,0 +1,460 @@
+<template>
+    <view class="organize-detail">
+        <!-- 地址&订单信息 -->
+        <view class="od-box od-order">
+            <view class="oo-stadium">
+                <image></image>
+                <view>欧轩智能场馆(羽毛球永泰店)</view>
+            </view>
+            <view class="ob-line">
+                <view class="ol-left">
+                    <view class="ol-name">订单编号：</view>
+                    <view class="ol-txt">
+                        <view class="ot-txt">2352534645764747</view>
+                    </view>
+                </view>
+                <view class="ol-status">已完成</view>
+            </view>
+            <view class="ob-line">
+                <view class="ol-left">
+                    <view class="ol-name">创建时间：</view>
+                    <view class="ol-txt">
+                        <view class="ot-txt">2019-06-06  12:00:06</view>
+                    </view>
+                </view>
+            </view>
+            <view class="ob-line">
+                <view class="ol-left">
+                    <view class="ol-name">用户昵称：</view>
+                    <view class="ol-txt">
+                        <view class="ot-txt">你的小甜心</view>
+                    </view>
+                </view>
+            </view>
+            <view class="ob-line">
+                <view class="ol-left">
+                    <view class="ol-name">约玩类型：</view>
+                    <view class="ol-txt">
+                        <view class="ot-txt ot-green">参与约玩</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+
+        <!-- 用户信息 -->
+        <view class="od-box">
+            <view class="ob-tit">用户信息</view>
+            <view class="ob-line">
+                <view class="ol-left">
+                    <view class="ol-name">姓名：</view>
+                    <view class="ol-txt">
+                        <view class="ot-txt">小李广中</view>
+                    </view>
+                </view>
+            </view>
+            <view class="ob-line">
+                <view class="ol-left">
+                    <view class="ol-name">身份证号码：</view>
+                    <view class="ol-txt">
+                        <view class="ot-txt">522424200004071234</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+
+        <!-- 约玩报名信息 -->
+        <view class="od-box od-sign-info">
+            <view class="ob-tit">约玩报名信息</view>
+            <view class="ob-list">
+                <view class="ob-item" v-for="i in 8" :key="i">
+                    <image></image>
+                    <view>永爱倒特永爱倒特…</view>
+                </view>
+            </view>
+            <view class="osi-expand" @click="isExpand = !isExpand">
+                <image :class="[isExpand?'active':'']" mode="aspectFit" src="/subpackage/order/static/images/down_arrow.png"></image>
+            </view>
+        </view>
+
+        <!-- 约玩信息 -->
+        <view class="od-box od-mes">
+            <view class="ob-tit">约玩信息</view>
+            <view class="om-theme">
+                <view>个人</view>
+                <text>欧轩网络科技有限公司神秘大雁山环岛骑行游玩户外露营活动</text>
+            </view>
+            <view class="ob-line">
+                <view class="ol-left">
+                    <view class="ol-name">约玩项目：</view>
+                    <view class="ol-txt">
+                        <view class="ot-txt">篮球</view>
+                    </view>
+                </view>
+            </view>
+            <view class="ob-line">
+                <view class="ol-left">
+                    <view class="ol-name">报名费用：</view>
+                    <view class="ol-txt">
+                        <view class="ot-txt">¥50.00</view>
+                    </view>
+                </view>
+            </view>
+            <view class="ob-line">
+                <view class="ol-left">
+                    <view class="ol-name">约玩时间：</view>
+                    <view class="ol-txt">
+                        <view class="ot-txt">2022年5月17日(周五)</view>
+                    </view>
+                </view>
+            </view>
+            <view class="ob-line">
+                <view class="ol-left">
+                    <view class="ol-name">预定场次：</view>
+                    <view class="ol-txt">
+                        <view class="ot-list">
+                            <view class="ol-item">1号场 10:00-13:00</view>
+                            <view class="ol-item">1号场 10:00-13:00</view>
+                            <view class="ol-item">1号场 10:00-13:00</view>
+                            <view class="ol-item">1号场 10:00-13:00</view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+
+        <!-- 差价 -->
+        <view class="od-box od-spread">
+            <view class="os-line">
+                <view class="ol-txt">场地费：50元</view>
+            </view>
+            <view class="os-line">
+                <view class="ol-txt">报名人数：4人</view>
+            </view>
+            <view class="os-line">
+                <view class="ol-txt">每人AA费用：12.5元</view>
+                <view class="ol-tip">* 每人AA费用=场地费/报名人数</view>
+            </view>
+            <view class="os-line">
+                <view class="ol-txt">
+                    差价退费：12.5元 <text>自动退费失败，请手动差价退费</text>
+                </view>
+                <view class="ol-tip">* 差价退费=每人支付的费用-每人的aa费用</view>
+            </view>
+            <view class="os-btn">差价退费</view>
+        </view>
+
+        <!-- 折扣信息 -->
+        <view class="od-box od-pay-info">
+            <view class="opi-line">
+                <view>金额小计</view>
+                <view>¥6</view>
+            </view>
+            <view class="opi-line">
+                <view>积分抵扣</view>
+                <view>¥6</view>
+            </view>
+            <view class="opi-line">
+                <view>折扣金额</view>
+                <view>¥6</view>
+            </view>
+            <view class="opi-line">
+                <view>优惠券优惠</view>
+                <view>¥6</view>
+            </view>
+            <view class="opi-total">合计支付：<text>￥5</text></view>
+        </view>
+        <!-- 支付信息 -->
+        <view class="od-box">
+            <view class="ob-tit">支付信息</view>
+            
+            <view class="ob-line">
+                <view class="ol-left">
+                    <view class="ol-name">支付方式：</view>
+                    <view class="ol-txt">
+                        <view class="ot-txt">微信支付</view>
+                    </view>
+                </view>
+            </view>
+            <view class="ob-line">
+                <view class="ol-left">
+                    <view class="ol-name">支付时间：</view>
+                    <view class="ol-txt">
+                        <view class="ot-txt">2019年6月18日   10:30:40</view>
+                    </view>
+                </view>
+            </view>
+            <view class="ob-line">
+                <view class="ol-left">
+                    <view class="ol-name">微信交易号：</view>
+                    <view class="ol-txt">
+                        <view class="ot-txt">424736746998493847989434</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import { ORDER_API } from '../../../js/api';
+import server from '../../../js/server';
+import util from '../../../../../utils/util';
+export default {
+    data(){
+        return {
+            isExpand: false,
+            orderInfo: {}
+        }
+    },
+    onLoad(options){
+        this.getOrderInfo({
+            order_no: options.order_no,
+            stadium_id: options.stadium_id,
+        })
+    },
+    methods: {
+        getOrderInfo({
+            order_no = '',
+            stadium_id = '',
+        }){ 
+            util.showLoad();
+            server.get({
+                url: ORDER_API.organizeOrderDetail,
+                data: {
+                    order_no,
+                    stadium_id,
+                },
+                failMsg: '加载订单失败！'
+            })
+            .then(res=>{
+                util.hideLoad();
+                this.orderInfo = res || {};
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    .organize-detail{
+        padding: 24upx;
+        padding-bottom: calc( 24upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+        padding-bottom: calc( 24upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+    }
+    .od-box{
+        margin-bottom: 24upx;
+        padding: 30upx;
+        background-color: #fff;
+        border-radius: 10upx;
+        .ob-tit{
+            margin-bottom: 20upx;
+            line-height: 44upx;
+            font-weight: 500;
+            font-size: 32upx;
+            color: #333;
+        }
+        .ob-line{
+            @include centerFlex(space-between);
+            .ol-left{   
+                flex-grow: 1;
+                display: flex;
+                .ol-name{
+                    flex-shrink: 0;
+                    flex-grow: 0;
+                    font-size: 28upx;
+                    line-height: 52upx;
+                    color: #9a9a9d;
+                }
+                .ol-txt{
+                    .ot-txt{
+                        font-size: 28upx;
+                        line-height: 52upx;
+                        color: #333333;
+                        @include textHide(1);
+                        &.ot-green{
+                            color: $themeColor;
+                        }
+                    }
+                    .ot-list{
+                        display: flex;
+                        flex-wrap: wrap;
+                        .ol-item{
+                            min-width: 200upx;
+                            margin-right: 10upx;
+                            line-height: 52upx;
+                            font-size: 28upx;
+                            color: #333;
+                            @include textHide(1);
+                        }
+                    }   
+                }
+                
+
+            }
+            .ol-status{
+                flex-shrink: 0;
+                flex-grow: 0;
+                margin-left: 12upx;
+                font-size: 28upx;
+                color: #9A9A9D;
+            }
+        }
+    }
+    .od-order{
+        .oo-stadium{
+            margin-bottom: 26upx;
+            padding-bottom: 24upx;
+            border-bottom: 2upx solid #D8D8D8;
+            @include centerFlex(flex-start);
+            >image{
+                flex-shrink: 0;
+                flex-grow: 0;
+                margin-right: 14upx;
+                width: 40upx;
+                height: 40upx;
+                background-color: skyblue;
+            }
+            >view{
+                line-height: 40upx;
+                font-weight: 500;
+                font-weight: 28upx;
+                color: #1a1a1a;
+                @include textHide(1);
+            }
+        }
+    }
+    .od-mes{
+        .om-theme{
+            margin-bottom: 26upx;
+            line-height: 44upx;
+            font-size: 32upx;
+            font-weight: 500;
+            color: #333;
+            >view{
+                display: inline-block;
+                margin-right: 12upx;
+                width: 64upx;
+                height: 40upx;
+                line-height: 40upx;
+                text-align: center;
+                border-radius: 6upx;
+                font-size: 20upx;
+                color: #68E339;
+                background-color: rgba($color: #68E339, $alpha: .15);
+            }
+        }
+    }
+    .od-pay-info{
+        .opi-line{
+            @include centerFlex(space-between);
+            margin-bottom: 20upx;
+            >view{
+                flex-shrink: 0;
+                flex-grow: 0;
+                font-size: 28upx;
+                line-height: 40upx;
+                color: #333;
+                &+view{
+                    font-size: 24upx;
+                    @include textHide(1);
+                }
+            }
+        }
+        .opi-total{
+            text-align: right;
+            font-size: 28upx;
+            color: #333;
+            >text{
+                font-weight: 500;
+                color: #FF873D;
+            }
+        }
+    }
+    .od-spread{
+        .os-line{
+            margin-bottom: 20upx;
+            .ol-txt{
+                margin-bottom: 6upx;
+                font-size: 32upx;
+                line-height: 44upx;
+                color: #333;
+                >text{
+                    margin-left: 20upx;
+                    font-size: 24upx;
+                    color: #EA5061;
+                }
+            }
+            .ol-tip{
+                font-size: 28upx;
+                line-height: 40upx;
+                color: #9A9A9D;
+            }
+        }
+        .os-btn{
+            margin: 0 auto;
+            width: 176upx;
+            height: 64upx;
+            line-height: 64upx;
+            line-height: 64upx;
+            text-align: center;
+            border-radius: 10upx;
+            font-size: 28upx;
+            font-weight: 500;
+            color: #fff;
+            background-color: #FF873D;
+        }
+    }
+    .od-sign-info{
+        padding: 30upx 10upx !important;
+        .ob-tit{
+            padding-left: 20upx;
+        }
+        .ob-list{
+            display: flex;
+            align-content: flex-start;
+            flex-wrap: wrap;
+            .ob-item{
+                margin-bottom: 26upx;
+                flex-grow: 0;
+                flex-shrink: 0;
+                width: 20%;
+                display: flex;
+                flex-wrap: wrap;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                >image{
+                    margin-bottom: 16upx;
+                    flex-grow: 0;
+                    flex-shrink: 0;
+                    width: 100upx;
+                    height: 100upx;
+                    border-radius: 50%;
+                    background-color: purple;
+                }
+                >view{
+                    @include textHide(1);
+                    max-width: 120upx;
+                    font-size: 24upx;
+                    line-height: 34upx;
+                    text-align: center;
+                    color: #9A9A9D;
+                }
+            }
+            
+        }
+        .osi-expand{
+            @include centerFlex(center);
+            padding: 20upx 0;
+            >image{
+                width: 24upx;
+                height: 24upx;
+                
+            }
+            .active{
+                transform: rotate(180deg);
+            }
+        }
+    }
+</style>
\ No newline at end of file