football/pages/app_admin/order-detail/order-detail.vue

<template>
    <app-layout>
        <image class="head-img" :src='adminImg.detail_bg'></image>
        <view v-if="status == 2" class="head-txt main-between">
            <view class="status-txt">{{order.refund}}</view>
        </view>
        <view v-else class="head-txt main-between">
            <view class="status-txt" v-if="order.is_sale == 1">已完成</view>
            <view class="status-txt" v-else-if="order.cancel_status == 2">取消订单 待处理</view>
            <view class="status-txt" v-else-if="order.is_pay == 0 && order.pay_type != 2">等待买家付款</view>
            <view class="status-txt" v-else-if="order.is_send == 0">等待卖家发货</view>
            <view class="status-txt" v-else-if="order.is_confirm == 0">卖家已发货</view>
            <view class="status-txt" v-else-if="order.is_confirm == 1">买家已收货</view>
            <view v-if="order.auto_confirm > 0 && order.is_send == 1 && order.is_confirm == 0">剩余
                <text v-if="dd>0">{{dd}}天</text>
                <text v-if="hh>0 && dd==0">{{hh}}小时</text> {{mm}}分自动确认收货
            </view>
            <view v-else-if="order.auto_cancel > 0 && order.is_pay == 0 && order.pay_type != 2">剩余
                <text v-if="dd>0">{{dd}}天</text>
                <text v-if="hh>0 && dd==0">{{hh}}小时</text> {{mm}}分自动删除
            </view>
            <view v-else-if="order.auto_sales > 0 && order.is_sale == 0 && order.is_confirm == 1">剩余
                <text v-if="dd>0">{{dd}}天</text>
                <text v-if="hh>0 && dd==0">{{hh}}小时</text> {{mm}}分自动完成订单
            </view>
        </view>
        <view class="user-info" v-if="order.address || order.send_type == 1">
            <image class="localhost-img" src='./../image/localhost.png'></image>
            <view class="user-text">
                <text class="name">{{order.name}}</text>
                <text v-if="order.send_type != 1">{{order.mobile}}</text>
            </view>
            <view class='user-text address-info'>{{order.send_type == 1 ? order.mobile : order.address}}</view>
            <view class='main-center area'>
                <view @click='toCall(order.mobile)' class="detail-btn box-grow-1">联系收货人</view>
                <view :class="[`${order.send_type == 2 ? 'line left-line':'line'}`]"></view>
                <view class="detail-btn box-grow-1" @click='copy'>{{order.send_type == 1 ? '复制联系方式' : '复制地址'}}</view>
                <view class="line" v-if="order.send_type == 2" :class="[`${order.send_type == 2 ? 'line right-line':'line'}`]"></view>
                <view class="detail-btn box-grow-1" v-if="order.send_type == 2" @click='openMap'>地图导航</view>
            </view>
        </view>
        <view v-if="(detail.detailExpress.length == 1 && detail.detail.length == 1) || (order.detailExpress.length == 1 && order.detail.length == 1)">
            <view @click="toExpressInfo(detail)" class="express" v-if="detail.detailExpress[0].express_no">
                <image class="logo" src='./../image/express.png'></image>
                <view class="express-company">{{detail.detailExpress[0].express}}</view>
                <view class="express-number">运单编号：{{detail.detailExpress[0].express_no}}</view>
                <image v-if="detail.detailExpress[0].express" class="to-more" src='/static/image/icon/arrow-right.png'></image>
            </view>
            <view @click="toExpressInfo(order)" class="express" v-else-if="order.detailExpress[0].express_no">
                <image class="logo" src='./../image/express.png'></image>
                <view class="express-company">{{order.detailExpress[0].express}}</view>
                <view v-if="order.detailExpress[0].express" class="express-number">运单编号：{{order.detailExpress[0].express_no}}</view>
                <image v-if="order.detailExpress[0].express" class="to-more" src='/static/image/icon/arrow-right.png'></image>
            </view>
        </view>
        <view class="express" v-if="order.detailExpress.length > 0 && order.detail.length > 1" @click="toExpressMore(order)">
            <view class="showMore">该订单已拆成多个包裹发货，点击查看详情</view>
            <image class="to-more" src='/static/image/icon/arrow-right.png'></image>
        </view>
        <view class="express" v-else-if="detail.detailExpress.length > 0 && detail.detail.length > 1" @click="toExpressMore(detail)">
            <view class="showMore">该订单已拆成多个包裹发货，点击查看详情</view>
            <image class="to-more" src='/static/image/icon/arrow-right.png'></image>
        </view>
        <view class="sc" v-if="order.city_info != null">
            <view class="sc-info dir-left-nowrap cross-center">
                <image class="sc-icon" src="./../image/distributor.png"></image>
                <view class="sc-about">
                    <view>配送员</view>
                    <view class="sc-person">
                        <view class="sc-name" :style="{'display': `${order.city_name.length > 6 ? 'block' : 'inline-block'}`}">{{order.city_name}}</view>
                        <text>{{order.city_mobile}}</text>
                     </view>
                </view>
            </view>
            <view class="sc-to-call main-center cross-center" @click='toCall(order.city_mobile)'>
                <image src="/static/image/icon/store-tel.png"></image>
            </view>
        </view>
        <view class="composition" v-if="order.sign == 'composition'">
            <view v-for="(list,idx) in order.composition_list" class="composition-item" :key="goods.id">
                <view class="main-between composition-title">
                    <view class="composition-type" v-if="list.type == 1">固定套餐</view>
                    <view class="composition-type" v-else>搭配套餐</view>
                    <view>套餐总价 ￥{{list.total_price}}</view>
                </view>
                <view v-if="list.show || index == 0" v-for="(goods,index) in list.goods_list" class="goods" :key="goods.id">
                    <image class="goods-img" :src='goods.pic_url'></image>
                    <view class='t-omit-two goods-name'>{{goods.name}}</view>
                    <view class="goods-attr t-omit">
                        <text v-for="attr in goods.attr_list" :key="item.attr_id">{{attr.attr_group_name}}:{{attr.attr_name}}</text>
                    </view>
                    <view class="goods-num">x{{goods.num}}</view>
                    <view class="goods-price">￥{{goods.total_price}}</view>
                </view>
                <view class="composition-open main-center">
                    <view @click="toggle(idx)" class="composition-btn">
                        <text>{{list.show ? '点击收起套餐详情' : '点击展开套餐详情'}}</text>
                        <image v-if="!list.show" src="/static/image/icon/icon-down.png"></image>
                        <image v-else src="/static/image/icon/icon-up.png"></image>
                    </view>
                </view>
            </view>
        </view>
        <view :class="[`${!order.address && order.send_type != 1 ? 'goods-info card-info':'goods-info'}`]">
            <view  v-if="order.sign != 'composition'">
                <view class="goods-title">自营商品</view>
                <view v-for="goods in order.detail" class="goods" :key="goods.id">
                    <image class="goods-img" :src='goods.goods_info.goods_attr.pic_url ? goods.goods_info.goods_attr.pic_url : goods.goods_info.goods_attr.cover_pic'></image>
                    <view class='t-omit-two goods-name'>{{goods.goods_info.goods_attr.name}}</view>
                    <view class="goods-attr t-omit">
                        <text v-for="attr in goods.attr_list" :key="item.attr_id">{{attr.attr_group_name}}:{{attr.attr_name}}</text>
                    </view>
                    <view class="goods-num">x{{goods.num}}</view>
                    <view class="goods-price">￥{{goods.total_original_price}}</view>
                </view>
            </view>
            <view class="main-between price-item">
                <view class="price-label">商品总价</view>
                <view>￥{{ order.total_goods_original_price }}</view>
            </view>
            <view class="main-between price-item">
                <view class="price-label">运费</view>
                <view>￥{{ order.express_price }}</view>
            </view>
            <view class="main-between price-item" v-if="order.member_discount_price > 0">
                <view class="price-label">会员折扣</view>
                <view>-￥{{ order.member_discount_price }}</view>
            </view>
            <view class="main-between price-item" v-if="order.integral_deduction_price > 0">
                <view class="price-label">积分抵扣</view>
                <view>-￥{{ order.integral_deduction_price }}</view>
            </view>
            <view class="main-between price-item" v-if="order.coupon_discount_price > 0">
                <view class="price-label">优惠券抵扣</view>
                <view>-￥{{ order.coupon_discount_price }}</view>
            </view>
            <view v-if="order.plugin_data" class="main-between price-item" v-for="(pluginData,index) in order.plugin_data" :key="index">
                <view class="price-label">{{pluginData.label}}</view>
                <view>-￥{{ pluginData.value }}</view>
            </view>
            <view class="main-between price-item" style='margin-bottom: 0'>
                <view class="price-label total-label">订单总价</view>
                <view class="total-price">￥{{ order.total_pay_price }}</view>
            </view>
            <view v-if="order.refund_info.type == 1" class="refund-info">申请退款 ￥{{order.refund_info.refund_price}} <text v-if="order.refund_info.is_refund == 1"> 实际退款 ￥{{order.refund_info.reality_refund_price}}</text></view>
        </view>
        <view class='goods-info' v-if="showForm && status == 2">
            <view class='goods-title'>表单内容</view>
            <view v-for="(goods,idx) in order.detail" :class="['goods-form', `${idx == 0? 'more':''}`]" :key="goods.id">
                <view v-for="(item,index) in goods.form_data" v-if="item.value != null" :key="index" :class="[ `${item.key != 'img_upload' ? 'dir-left-nowrap' : ''}`,`price-item`]" >
                    <view class="price-label">{{item.label}}:</view>
                    <view v-if="item.key == 'img_upload'"><image v-show="!item.loadOver" @load="imageFormLoad(idx,index)" @click='look(item.value)' class="form-img" :src='item.value'></image></view>
                    <view v-else>{{item.value}}</view>
                </view>
            </view>
        </view>
        <view class='goods-info mch-goods'>
            <view class='goods-title'>订单信息</view>
            <view class="dir-left-nowrap price-item">
                <view class="price-label">下单时间:</view>
                <view>{{order.created_at}}</view>
            </view>
            <view class="dir-left-nowrap price-item">
                <view class="price-label">订单号:</view>
                <view>{{order.order_no}}</view>
            </view>
            <view class="dir-left-nowrap price-item" v-if="order.words || order.seller_remark">
                <view class="price-label">商家备注:</view>
                <view>{{order.words || order.seller_remark}}</view>
            </view>
            <view class="dir-left-nowrap price-item" v-if="order.remark">
                <view class="price-label">买家订单留言:</view>
                <view>{{order.remark}}</view>
            </view>
            <view v-if="order.detailExpress.length == 1 && (order.detailExpress[0].merchant_remark || order.detailExpress[0].express_contentd)" class="dir-left-nowrap price-item">
                <view class="price-label">卖家物流留言:</view>
                <view>{{order.detailExpress[0].merchant_remark || order.detailExpress[0].express_content}}</view>
            </view>
            <view class="dir-left-nowrap price-item">
                <view class="price-label">支付方式:</view>
                <view v-if="order.pay_type == 1">线上支付</view>
                <view v-else-if="order.pay_type == 3">余额支付</view>
                <view v-else-if="order.pay_type == 2">货到付款</view>
                <view v-else>未支付</view>
            </view>
            <view class="dir-left-nowrap price-item" v-if="order.sign != 'vip_card'">
                <view class="price-label">收货方式:</view>
                <view v-if="order.send_type == 1">到店自提</view>
                <view v-if="order.send_type == 0">快递配送</view>
                <view v-if="order.send_type == 2">同城配送</view>
            </view>
            <view v-for="(item,index) in order.order_form" v-if="item.value != null" :key="index" class="dir-left-nowrap price-item">
                <view class="price-label">{{item.label}}:</view>
                <view v-if="item.key == 'img_upload'"><image v-show="!item.loadOver" @load="imageLoad(index)" @click='look(item.value)' class="form-img" :src='item.value'></image></view>
                <view v-else>{{item.value}}</view>
            </view>
        </view>
        <view class='goods-info' v-if="showForm && status == 1">
            <view class='goods-title'>表单内容</view>
            <view v-for="(goods,idx) in order.detail" :class="['goods-form', `${idx == 0? 'more':''}`]" :key="goods.id">
                <view class="goods">
                    <image class="goods-img" :src='goods.goods_info.goods_attr.pic_url ? goods.goods_info.goods_attr.pic_url : goods.goods_info.goods_attr.cover_pic'></image>
                    <view class='t-omit-two goods-name'>{{goods.goods_info.goods_attr.name}}</view>
                    <view class="goods-attr t-omit">
                        <text v-for="attr in goods.attr_list" :key="item.attr_id">{{attr.attr_group_name}}:{{attr.attr_name}}</text>
                    </view>
                    <view class="goods-num">x{{goods.num}}</view>
                    <view class="goods-price">￥{{goods.total_original_price}}</view>
                </view>
                <view v-for="(item,index) in goods.form_data" v-if="item.value != null" :key="index" :class="[ `${item.key != 'img_upload' ? 'dir-left-nowrap' : ''}`,`price-item`]" >
                    <view class="price-label">{{item.label}}:</view>
                    <view v-if="item.key == 'img_upload'"><image v-show="!item.loadOver" @load="imageFormLoad(idx,index)" @click='look(item.value)' class="form-img" :src='item.value'></image></view>
                    <view v-else>{{item.value}}</view>
                </view>
            </view>
        </view>
        <view :class="['bottom-place', `${iphone_x? 'iphone_x':''}`]"></view>
        <view :class="['dir-right-nowrap','btn', `${iphone_x ? 'iphone_x':''}`]" v-if="order.is_sale != 1 || status == 2">
            <view @click="toAgreeCancel(order)" v-if="order.cancel_status == 2" class="handle-btn other">同意</view>
            <view @click="beNotRefund(order)" v-if="order.cancel_status == 2" class="handle-btn">拒绝</view>
            <view @click="toChange(order)" v-if="order.cancel_status == 0 && order.is_pay == 0 && order.is_send == 0" class="handle-btn other">修改价格</view>
            <view @click.stop="toConfirm(order)" v-if="order.cancel_status == 0 && order.is_confirm == 0 && order.is_send == 1 && order.is_confirm_show == 1" class="handle-btn other">确认收货</view>
            <view @click="toSend(order)" v-if="order.address && order.cancel_status == 0 && order.is_send == 0 && order.is_pay == 1" class="handle-btn other">发货</view>
            <view @click="toSend(order)" v-else-if="order.address && order.cancel_status == 0 && order.is_send == 0 && order.pay_type == 2" class="handle-btn other">发货</view>

            <view open-type="navigate" @click="toExpress(order,2)" v-if="order.cancel_status == 0 && order.is_send == 1 && order.is_confirm == 0 && order.express && status != 2" class="handle-btn other">修改物流信息</view>
            <view open-type="navigate"  @click="toChangeAddress(order)" v-if="order.address && order.cancel_status == 0 && order.is_send == 0 && order.is_pay == 1" class="handle-btn">修改地址</view>
            <view @click="toCancelorder(order)" v-if="order.sign != 'gift' && order.is_send == 0 && order.cancel_status == 0" class="handle-btn">取消订单</view>
            <view @click.stop="toConfirm(detail)" v-if="order.refund == '退货退款 买家已发货' || order.refund == '已发货,待商家处理'" class="handle-btn other">确认收货</view>
            <view @click.stop="toRefund(detail)" v-if="order.refund == '退货退款 待卖家退款'" class="handle-btn other">退款</view>
            <view @click="toSend(detail)" v-if="order.refund == '换货 买家已发货'" class="handle-btn other">发货</view>
            <view @click.stop="refundHandle(2,detail,1)" v-if="status == 2 && detail.status == 2 && order.refund != '换货 卖家已发货' && order.refund != '退货退款 卖家已退款'" :class="['handle-btn',`${order.refund == '换货 买家已发货' || order.refund == '退货退款 买家已发货'?'':'other'}`]">取消售后</view>
            <view @click="refundHandle(1,detail)" v-if="status == 2 && detail.status == 1" class="handle-btn other">同意</view>
            <view @click="refundHandle(2,detail)" v-if="status == 2 && detail.status == 1" class="handle-btn">拒绝</view>
            <view @click="lookAbout(detail)" v-if="status == 2" class="handle-btn">售后理由</view>
        </view>

        <view class="bg cross-center" v-if="chooseTime || isRefund || noRefund || changePrice || cancelOrder || callPhone || isSend || notRefund || isReason || openAddress || noAddress || confirmOrder">
            <!-- 退款 -->
            <view class="dialog" v-if="isRefund">
                <view class="dialog-title">退款</view>
                <view class="main-center refund-pay" v-if="status == 1">￥{{detail.total_pay_price}}</view>
                <view class="main-center cross-center refund-pay" v-if="status == 2">￥
                    <input class="refund-price" type='digit' v-model="refund_price"></input>
                </view>
                <view class="main-center refund-tip">是否确认退款给买家</view>
                <view class="main-center btn-area">
                    <view class="submit-btn" @click='cancel'>取消</view>
                    <view class="line"></view>
                    <view class="submit-btn be-submit" v-if="status == 1" @click='cancelSubmit'>确认</view>
                    <view class="submit-btn be-submit" v-if="status == 2" @click='agree'>确认</view>
                </view>
            </view>
            <view class="dialog-bg" :style="{'display': `${noRefund || notRefund ? 'block' : 'none'}`}"></view>
            <!-- 拒绝退款 -->
            <view class="dialog" v-if="noRefund || notRefund">
                <view v-if="noRefund" class="dialog-title">拒绝取消</view>
                <view v-if="notRefund" class="dialog-title">拒绝售后</view>
                <textarea fixed class="textarea" bindinput="toAbout" placeholder="请输入拒绝理由" placeholder-style="color:#999999;font-size:14px" auto-focus />
                <view class="main-center btn-area">
                    <view class="submit-btn" @click='cancel'>取消</view>
                    <view class="line"></view>
                    <view v-if="noRefund" class="submit-btn be-submit" @click='noCancel'>确认</view>
                    <view v-if="notRefund" class="submit-btn be-submit" @click='decline(0)'>确认</view>
                </view>
            </view>
            <!-- 改价 -->
            <view class="dialog" v-if="changePrice">
                <view class="dialog-title">修改价格</view>
                <view class="dir-left-nowrap change-price-item">
                    <view class="label">商品总价</view>
                    <view class="money">￥</view>
                    <input type="digit" class="price-input" @input="priceInput" focus v-model='price'></input>
                </view>
                <view class="dir-left-nowrap change-price-item">
                    <view class="label">运费</view>
                    <view class="money">￥</view>
                    <input type="digit" class="price-input" @input="expressInput" v-model='express'></input>
                </view>
                <view class="dir-left-nowrap change-price-item">
                    <view class="label">合计</view>
                    <view class="change-total-price">{{total}}</view>
                </view>
                <view class="main-center btn-area">
                    <view class="submit-btn" @click='cancel'>取消</view>
                    <view class="line"></view>
                    <view class="submit-btn be-submit" @click='submitChange'>确认</view>
                </view>
            </view>
            <!-- 售后确认收货 -->
            <view class="dialog" v-if="confirmOrder">
                <view class="main-center cancel-tip">是否确认收货?</view>
                <view class="main-center btn-area">
                    <view class="submit-btn" @click='cancel'>取消</view>
                    <view class="line"></view>
                    <view class="submit-btn be-submit" v-if="status == 1" @click='beOrderConfirm'>确认</view>
                    <view class="submit-btn be-submit" v-else @click='beConfirm'>确认</view>
                </view>
            </view>
            <!-- 取消订单 -->
            <view class="dialog" v-if="cancelOrder">
                <view class="main-center cancel-tip">确定取消该订单?</view>
                <view class="main-center btn-area">
                    <view class="submit-btn" @click='cancel'>取消</view>
                    <view class="line"></view>
                    <view class="submit-btn be-submit" @click='cancelSubmit'>确认</view>
                </view>
            </view>
            <!-- 打电话  -->
            <view class="dialog" v-if="callPhone">
                <view class="main-center cancel-tip">{{mobile}}</view>
                <view class="main-center btn-area">
                    <view class="submit-btn" @click='cancel'>取消</view>
                    <view class="line"></view>
                    <view class="submit-btn be-submit" @click='call'>确认</view>
                </view>
            </view>
            <!-- 理由 -->
            <view class="dialog" v-if="isReason">
                <view class="dialog-title">售后理由</view>
                <view class="reason">
                    <view class="reason-title">申请原因</view>
                    <view class="reason-content">{{detail.remark}}</view>
                    <view v-if="detail.pic_list.length > 0" class="reason-title">图片</view>
                    <view class="dir-left-wrap reason-img" v-if="detail.pic_list.length > 0">
                        <image @click='look(item)' v-for="item in detail.pic_list" :key="item" :src="item"></image>
                    </view>
                </view>
                <view class="main-center btn-area other-btn-area">
                    <view class="submit-btn be-submit" @click='cancel'>确认</view>
                </view>
            </view>
            <!-- 提示 -->
            <view class="dialog" v-if="noAddress">
                <view class="main-center dir-top-nowrap cancel-tip" style="text-align: center">
                    <view>您还没有退货地址</view>
                    <view>请先设置</view>
                </view>
                <view class="main-center btn-area">
                    <view class="submit-btn" @click='noAddress=false'>取消</view>
                    <view class="line"></view>
                    <view class="submit-btn be-submit" @click='toRefundAdd'>去设置</view>
                </view>
            </view>
            <!-- 选地址 -->
            <view class="dialog" v-if="openAddress">
                <view class="dialog-title">选择退货地址</view>
                <view class="add-list">
                    <view class="add-item" v-for="item in address" :key="item.id">
                        <image class="add-active" v-if="item.id == addressId" @click='chooseAddress(item.id)' src="./../image/active.png"></image>
                        <image class="add-active" v-else @click='chooseAddress(item.id)' src="/static/image/icon/form-er.png"></image>
                        <view @click='chooseAddress(item.id)' class="add-info">
                            <view class="main-between">
                                <view class="add-name">{{item.name}}</view>
                                <view>{{item.mobile}}</view>
                            </view>
                            <view>{{item.address_detail}}</view>
                        </view>
                    </view>
                </view>
                <view class="main-center btn-area other-btn-area">
                    <view class="submit-btn" @click='cancel'>取消</view>
                    <view class="line"></view>
                    <view class="submit-btn be-submit" @click='decline(1)'>确认</view>
                </view>
            </view>
            <!-- 选择配送员 -->
            <view class="dialog" v-if="isSend && order.send_type == 2">
                <view class="dialog-title">选择配送员</view>
                <view class="add-list">
                    <view class="add-item delivery-item" v-for="item in cityList" :key="item">
                        <view @click='chooseDelivery(item)' class="add-info">
                            <view class="main-between">
                                <view class="add-name">{{item.name}}</view>
                                <image v-if="item.id == deliveryId" @click='chooseDelivery(item)' src="./../image/active.png"></image>
                                <image v-else @click='chooseDelivery(item)' src="/static/image/icon/form-er.png"></image>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="main-center btn-area other-btn-area">
                    <view class="submit-btn" @click='cancel'>取消</view>
                    <view class="line"></view>
                    <view class="submit-btn be-submit" @click='toSendType'>确认</view>
                </view>
            </view>
        </view>
    </app-layout>
</template>

<script>
    import { mapState } from "vuex";

    export default {
        data() {
            return {
                order: {
                    total_pay_price: '',
                    express_price: '',
                    total_goods_price: '',
                },
                noAddress: false,
                cancelRefund: false,
                addressId: '0',
                notRefund: false,
                isRefund: false,
                openAddress: false,
                isReason: false,
                confirmOrder: false,
                cityList: [],
                deliveryId: '0',
                delivery: '',
                active: null,
                show: false,
                start: [],
                end: [],
                search: false,
                keyword: '',
                list: [],
                candidate: [],
                date_start: '',
                date_end: '',
                time: 0,
                inSearch: false,
                address: [],
                today: '',
                yesterday: '',
                weekday: '',
                chooseTime: false,
                noRefund: false,
                cancelOrder: false,
                detail: {},
                changePrice: false,
                callPhone: false,
                custom: false,
                mobile: '',
                isSend: false,
                sendType: 0,
                price: 0,
                express: 0,
                total: 0,
                about: '',
                reset_time: 0,
                dd: 0,
                hh: 0,
                mm: 0,
                status: 1,
                refund_price: 0,
                showForm: false,
                first: true,
                iphone_x: false
            }
        },
        computed: {
            ...mapState({
                theme: state => state.mallConfig.theme,
                userInfo: state => state.user.info,
                adminImg: state => state.mallConfig.__wxapp_img.app_admin,
            })
        },
        methods: {
            toggle(index) {
                this.order.composition_list[index].show = !this.order.composition_list[index].show;
            },

            openMap() {
                let location = this.order.location.split(',');
                console.log(location)
                uni.openLocation({
                    latitude: +location[1],
                    longitude: +location[0],
                    success: function () {
                        console.log('success');
                    }
                });
            },
            beConfirm(item) {
                let that = this;
                that.$request({
                    url: that.$api.app_admin.shou_huo,
                    data: {
                        refund_order_id: that.detail.id
                    },
                    method: 'post'
                }).then(response=>{
                    that.$hideLoading();
                    if(response.code == 0) {
                        that.list = [];
                        that.cancel();
                        that.getList();
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    that.$hideLoading();
                });
            },
            beOrderConfirm() {
                let that = this;
                that.$request({
                    url: that.$api.app_admin.confirm,
                    data: {
                        order_id: that.detail.id
                    },
                    method: 'post'
                }).then(response=>{
                    that.$hideLoading();
                    if(response.code == 0) {
                        uni.showToast({
                            title: response.msg,
                            duration: 1000,
                            type: 'success',
                            mask: false
                        });
                        that.cancel();
                        setTimeout(v=>{
                            that.list = [];
                            uni.showLoading({
                                title: '加载中...'
                            });
                            that.getList();
                        },1000)
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    that.$hideLoading();
                });
            },
            toConfirm(e) {
                this.detail = e;
                this.confirmOrder = !this.confirmOrder;
            },
            imageLoad(index) {
                this.order.order_form[index].loadOver = false;
            },

            imageFormLoad(idx,index) {
                this.order.detail[idx].form_data[index].loadOver = false;
            },

            toExpressMore(item) {
                uni.navigateTo({
                    url: '/pages/order/express-list/express-list?order_id='+item.id
                })
            },

            toExpressInfo(item) {
                uni.navigateTo({
                    url: '/pages/app_admin/express/express?id='+item.id+'&express='+item.detailExpress[0].express+'&express_no='+item.detailExpress[0].express_no+'&customer_name='+item.detailExpress[0].customer_name
                })
            },
            toRefundAdd() {
                this.noAddress = false;
                uni.navigateTo({
                    url: `/pages/address/address?manual_btn_bg=#446dfd&is_hide_default_btn=1&is_refund_address=1`
                })
            },
            copy() {
                let address = `${this.order.name} ${this.order.mobile} ${this.order.address}`;
                uni.setClipboardData({
                    data: address,
                    success() {
                        uni.hideToast();
                        uni.getClipboardData({
                            success() {
                                uni.showToast({
                                    title: '复制成功',
                                    duration: 1000,
                                    icon: 'none'
                                });
                            }
                        })
                    }
                })
            },
            getAddress() {
                let that = this;
                that.$request({
                    url: that.$api.app_admin.refund_address
                }).then(response => {
                    that.$hideLoading();
                    if (response.code == 0) {
                        that.address = response.data.list;
                    } else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    that.$hideLoading();
                    uni.showToast({
                        title: response,
                        icon: 'none',
                        duration: 1000
                    });
                });
            },
            look(e) {
                uni.previewImage({
                    current: e, // 当前显示图片的http链接
                    urls: [e] // 需要预览的图片http链接列表
                })
            },
            toChangeAddress(item) {
                uni.navigateTo({
                    url: '/pages/app_admin/change-add/change-add?order_no='+item.order_no
                })
            },
            agree() {
                let that = this;
                uni.showLoading({
                    title: '处理中...'
                });
                if (that.detail.refund_price > 0) {
                    that.$request({
                        url: that.$api.app_admin.refund_handle,
                        data: {
                            order_refund_id: that.detail.id,
                            type: that.detail.type,
                            is_agree: 1,
                            refund_price: that.refund_price,
                            merchant_remark: that.about
                        },
                        method: 'post'
                    }).then(response => {
                        that.$hideLoading();
                        if (response.code == 0) {
                            uni.showModal({
                                title: '提示',
                                content: response.msg,
                                showCancel: false,
                                success: function (res) {
                                    if (res.confirm) {
                                        that.list = [];
                                        that.notRefund = false;
                                        that.openAddress = false;
                                        that.isRefund = false;
                                        that.addressId = 0;
                                        that.getList();
                                    }
                                }
                            });
                        } else {
                            uni.showToast({
                                title: response.msg,
                                icon: 'none',
                                duration: 1000
                            });
                        }
                    }).catch(response => {
                        uni.hideLoading();
                        uni.showToast({
                            title: response,
                            icon: 'none',
                            duration: 1000
                        });
                    });
                } else {
                    uni.showToast({
                        title: '退款金额需大于零',
                        icon: 'none',
                        duration: 1000
                    });
                }
            },
            getTime() {
                let reset_time = this.reset_time - 1;
                let dd = 0;
                let hh = parseInt(reset_time / 3600);
                if (reset_time > 86400) {
                    dd = parseInt(reset_time / 86400);
                    hh = parseInt((reset_time - 86400 * dd) / 3600);
                }
                let h = reset_time % 3600;
                let mm = parseInt(h / 60);
                if (hh < 10) {
                    hh = '0' + hh.toString();
                }
                if (mm < 10) {
                    mm = '0' + mm.toString();
                }
                this.reset_time = reset_time;
                this.dd = dd;
                this.hh = hh;
                this.mm = mm;
            },
            toSendType() {
                let that = this;
                let para;
                if (that.sendType == 1 || that.order.send_type == 2) {
                    uni.showLoading({
                        title: '加载中...'
                    });
                    para = {
                        is_express: 0,
                        words: '',
                        order_id: that.detail.id
                    };
                    if(that.order.send_type == 2) {
                        para.man = that.delivery;
                    }
                    that.$request({
                        url: that.$api.app_admin.send,
                        data: para,
                        method: 'post'
                    }).then(response => {
                        console.log(response)
                        uni.hideLoading();
                        if (response.code == 0) {
                            uni.showToast({
                                title: response.msg,
                                type: 'success',
                                mask: false,
                                duration: 2000
                            });
                            that.list = [];
                            that.page = 1;
                            that.isSend = false;
                            that.sendType = 0;
                            that.getList();
                        } else {
                            uni.showToast({
                                title: response.msg,
                                icon: 'none',
                                duration: 1000
                            });
                        }
                    }).catch(response => {
                        uni.hideLoading();
                        uni.showToast({
                            title: response,
                            icon: 'none',
                            duration: 1000
                        });
                    });
                }
            },
            toExpress(e,is_send) {
                let id = e.id;
                let order_refund_id = e.refund;
                if (id > 0) {
                    uni.navigateTo({
                        url: '/pages/app_admin/send/send?id=' + id + '&is_send=' + is_send
                    })
                } else if (order_refund_id) {
                    uni.navigateTo({
                        url: '/pages/app_admin/send/send?order_refund_id=' + order_refund_id + '&is_send=' + is_send
                    })
                }
            },
            getList() {
                let that = this;
                that.about = '';
                uni.showLoading({
                    title: '加载中...'
                });
                that.$request({
                    url: that.$api.app_admin.detail,
                    data: {
                        order_id: that.id
                    },
                    method: 'post'
                }).then(response=>{
                    uni.hideLoading();
                    if(response.code == 0) {
                        let order = response.data.order;
                        if(order.send_type == 2) {
                            that.getDelivery();
                        }
                        order.address = order.address.replace(/\s*/g, "");
                        let reset_time = 0;
                        if (order.auto_cancel > 0) {
                            reset_time = order.auto_cancel;
                        } else if (order.auto_confirm > 0) {
                            reset_time = order.auto_confirm;
                        } else if (order.auto_sales > 0) {
                            reset_time = order.auto_sales;
                        }
                        if (order.refund_info.id > 0) {
                            order.refund_info.pic_list = JSON.parse(order.refund_info.pic_list)
                            that.detail = order.refund_info
                        }
                        if(that.first) {
                            if(order.order_form !=null && order.order_form.length > 0) {
                                for(let i = 0;i < order.order_form.length;i++) {
                                    if(order.order_form[i].key == 'img_upload') {
                                        order.order_form[i].loadOver = true;
                                    }
                                }
                            }
                            that.first = false;
                        }
                        for(let i in order.detail) {
                            if(order.detail[i].form_data != null && order.detail[i].form_data.length > 0) {
                                that.showForm = true;
                            }
                        }
                        that.order = order;
                        that.reset_time = reset_time;
                        setInterval(function() {
                            that.getTime();
                        }, 1000)
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    uni.hideLoading();
                });
            },
            getDelivery() {
                let that = this;
                that.$request({
                    url: that.$api.app_admin.delivery
                }).then(response=>{
                    if(response.code == 0) {
                        this.cityList = response.data.list;
                        this.deliveryId = response.data.list[0].id;
                        this.delivery = "(" + response.data.list[0].id + ")" + response.data.list[0].name
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    uni.hideLoading();
                });
            },
            toCall(e) {
                this.mobile = e;
                this.callPhone = !this.callPhone;
            },
            decline(type) {
                let that = this;
                if (type == 1) {
                    if (that.addressId < 1) {
                        uni.showToast({
                            title: '请选择地址',
                            icon: 'none',
                            duration: 1000
                        });
                        return false;
                    }
                }
                if (that.cancelRefund) {
                    type = 2;
                }
                uni.showLoading({
                    title: '处理中...'
                });
                that.$request({
                    url: that.$api.app_admin.refund_handle,
                    data: {
                        order_refund_id: that.detail.id,
                        type: that.detail.type,
                        is_agree: type,
                        address_id: that.addressId,
                        refund_price: that.detail.refund_price,
                        merchant_remark: that.about
                    },
                    method: 'post'
                }).then(response => {
                    uni.hideLoading();
                    if (response.code == 0) {
                        uni.showModal({
                            title: '提示',
                            content: response.msg,
                            showCancel: false,
                            success: function (res) {
                                if (res.confirm) {
                                    that.list = [];
                                    that.notRefund = false;
                                    that.cancelOrder = false;
                                    that.openAddress = false;
                                    that.addressId = 0;
                                    that.getList();
                                }
                            }
                        });
                    } else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    uni.hideLoading();
                    uni.showToast({
                        title: response,
                        icon: 'none',
                        duration: 1000
                    });
                });
            },
            call() {
                uni.makePhoneCall({
                    phoneNumber: this.mobile
                })
                this.callPhone = !this.callPhone;
            },
            toRefund(e) {
                this.detail = e;
                this.refund_price = e.refund_price;
                this.isRefund = !this.isRefund;
            },
            // 取消
            cancel() {
                this.about = '';
                this.date_start = '';
                this.date_end = '';
                this.isRefund = false;
                this.chooseTime = false;
                this.noRefund = false;
                this.changePrice = false;
                this.cancelOrder = false;
                this.callPhone = false;
                this.isSend = false;
                this.notRefund = false;
                this.openAddress = false;
                this.isReason = false;
                this.confirmOrder = false;
                this.addressId = 0;
            },
            noCancel() {
                let that = this;
                uni.showLoading({
                    title: '处理中...'
                });
                that.$request({
                    url: that.$api.apiUrl.app_admin.cancel,
                    data: {
                        status: 2,
                        remark: that.about,
                        order_id: that.detail.id
                    },
                    method: 'post'
                }).then(response => {
                    uni.hideLoading();
                    if (response.code == 0) {
                        uni.showToast({
                            title: response.msg,
                            type: 'success',
                            mask: false,
                            duration: 2000
                        });
                        that.noRefund = false;
                        that.getList();
                    } else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    uni.hideLoading();
                    uni.showToast({
                        title: response,
                        icon: 'none',
                        duration: 1000
                    });
                });
            },
            cancelSubmit() {
                let that = this;
                uni.showLoading({
                    title: '加载中...'
                });
                that.$request({
                    url: that.$api.app_admin.cancel,
                    data: {
                        status: 1,
                        remark: '',
                        order_id: that.detail.id
                    },
                    method: 'post'
                }).then(response => {
                    uni.hideLoading();
                    if (response.code == 0) {
                        uni.showToast({
                            title: '取消成功',
                            duration: 2000,
                            type: 'success',
                            mask: false
                        });
                        that.list = [];
                        that.isRefund = false;
                        that.cancelOrder = false;
                        that.page = 1;
                        that.getList();
                    } else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    uni.hideLoading();
                    uni.showToast({
                        title: response,
                        icon: 'none',
                        duration: 1000
                    });
                });
            },
            lookAbout(e) {
                this.detail = e;
                this.isReason = true;
            },
            chooseAddress(e) {
                if (this.addressId == e) {
                    this.addressId = ''
                }else {
                    this.addressId = e
                }
            },
            chooseDelivery(e) {
                if (this.getDeliveryId == e.id) {
                    this.deliveryId = ''
                }else {
                    this.deliveryId = e.id
                    this.delivery = "(" + e.id + ")" + e.name;
                }
            },
            refundHandle(type,detail,cancel) {
                if (cancel == 1) {
                    this.cancelRefund = true;
                }
                if (type == 1) {
                    if (this.address.length == 0) {
                        this.noAddress = true;
                    } else {
                        this.detail = detail;
                        this.openAddress = true;
                    }
                } else if (type == 2) {
                    this.detail = detail;
                    this.notRefund = true;
                }
            },
            beNotRefund(e) {
                this.detail = e;
                this.noRefund = !this.noRefund;
            },
            toCancelorder(e) {
                this.detail = e;
                this.cancelOrder = !this.cancelOrder;
            },
            // 确认修改价格
            submitChange() {
                let that = this;
                uni.showLoading({
                    title: '提交中...'
                });
                if (that.price > -0.01 && that.express > -0.01) {
                    that.$request({
                        url: that.$api.app_admin.update_price,
                        data: {
                            order_id: that.detail.id,
                            total_price: that.price,
                            express_price: that.express
                        },
                        method: 'post'
                    }).then(response => {
                        uni.hideLoading();
                        if (response.code == 0) {
                            uni.showToast({
                                title: response.msg,
                                duration: 2000,
                                type: 'success',
                                mask: false
                            });
                            that.changePrice = false;
                            that.getList();
                        } else {
                            uni.showToast({
                                title: response.msg,
                                icon: 'none',
                                duration: 1000
                            });
                        }
                    }).catch(response => {
                        uni.hideLoading();
                        uni.showToast({
                            title: response,
                            icon: 'none',
                            duration: 1000
                        });
                    });
                } else {
                    if (!that.price || typeof(that.price) != 'number') {
                        uni.showToast({
                            title: '商品总价必须大于等于0',
                            icon: 'none',
                            duration: 1000
                        });
                    } else if (!that.express || typeof(that.express) != 'number') {
                        uni.showToast({
                            title: '运费必须大于等于0',
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }
            },
            toSend(e) {
                this.detail = e;
                if(this.detail.send_type != 2) {
                    if (this.detail.status_cn) {
                        uni.navigateTo({
                            url: '/pages/app_admin/send/send?order_refund_id=' + this.detail.id
                        })
                    } else {
                        uni.navigateTo({
                            url: '/pages/app_admin/send/send?id=' + this.detail.id
                        })
                    }
                }else {
                    this.isSend = true;
                }
            },
            toChange(e) {
                this.detail = e;
                this.changePrice = !this.changePrice;
                this.price = e.total_goods_price;
                this.express = e.express_price;
                this.total = '￥' + e.total_pay_price;
            },
            priceInput: function(e) {
                if (e.detail.value > -0.01) {
                    this.total = '￥' + (+e.detail.value + +this.express).toFixed(2)
                } else {
                    this.total = '数据有误'
                }
            },
            expressInput: function(e) {
                if (e.detail.value > -0.01) {
                    this.total = '￥' + (+e.detail.value + +this.price).toFixed(2)
                } else {
                    this.total = '数据有误'
                }
            },
            toAgreeCancel(e) {
                this.detail = e;
                this.isRefund = !this.isRefund;
            },
        },
        onShow: function() {
            this.getList();
        },
        onLoad(options) {
            let that = this;
            uni.getSystemInfo({
                success: function (res) {
                    if(res.model.indexOf('iPhone X') > -1 || res.model.indexOf('iPhone 11') > -1 || res.model.indexOf('iPhone11') > -1 || res.model.indexOf('iPhone12') > -1 || res.model.indexOf('Unknown Device') > -1) {
                        that.iphone_x = true;
                    }
                }
            })
            that.id = options.id;
            that.status = options.status;
            that.getAddress();
        }
    }
</script>

<style scoped lang="scss">
    .goods-form {
        border-top: 2rpx solid #e2e2e2;
        margin-top: #{20rpx};
        .price-label {
            margin-right: #{10rpx};
        }
    }

    .goods-form.more {
        border-top: 0;
        margin-top: #{10rpx};
    }

    .sc {
        position: relative;
        margin: #{24rpx};
        background-color: #fff;
        padding: #{24rpx};
        border-radius: #{16rpx};
        .sc-info {
            padding-right: #{120rpx};
            width: 100%;
            .sc-icon {
                height: #{72rpx};
                width: #{72rpx};
                margin-right: #{24rpx};
            }
            .sc-about {
                font-size: #{24rpx};
                color: #999999;
                .sc-person {
                    margin-top: #{10rpx};
                    color: #666666;
                    font-size: #{28rpx};
                    .sc-name {
                        margin-right: #{16rpx};
                    }
                }
            }
        }
        .sc-to-call {
            position: absolute;
            top: 50%;
            right: 0;
            margin-top: #{-28rpx};
            height: #{56rpx};
            width: #{120rpx};
            border-left: #{2rpx} solid #e2e2e2;
            image {
                height: #{40rpx};
                width: #{40rpx};
            }
        }
    }

    .dialog-bg {
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: rgba(0, 0, 0, 0.5);
        left: 0;
        top: 0;
    }

    .composition {
        padding: 0;
        margin-bottom: #{4rpx};
        .composition-item {
            background-color: #fff;
            margin: #{24rpx};
            padding: #{24rpx};
            padding-top: 0;
            border-radius: #{16rpx};
            margin-bottom: #{20rpx};
            .composition-open {
                text-align: center;
                background-color: #fff;
                height: #{84rpx};
                .composition-btn {
                    display: inline-block;
                    border: #{2rpx} solid #bbbbbb;
                    font-size: #{24rpx};
                    color: #999999;
                    padding: 0 #{24rpx};
                    margin: #{12rpx} 0 #{16rpx};
                    height: #{56rpx};
                    line-height: #{54rpx};
                    border-radius: #{28rpx};
                    image {
                        width: #{22rpx};
                        height: #{12rpx};
                        margin-left: #{16rpx};
                    }
                }
            }
            .goods-list {
                padding: 0 #{24rpx};
            }
            .composition-title {
                height: #{80rpx};
                line-height: #{80rpx};
                font-size: #{24rpx};
                color: #353535;
                margin-bottom: #{24rpx};
            }
        }
    }

    .goods {
        height: #{160rpx};
        margin-top: #{24rpx};
        position: relative;
        font-size: #{24rpx};
        color: #353535;
        margin-bottom: #{24rpx};
        .goods-img {
            height: #{160rpx};
            width: #{160rpx};
            float: left;
            margin-right: #{20rpx};
            border-radius: #{4rpx};
        }
        .goods-attr {
            font-size: #{24rpx};
            color: #999;
            width: 70%;
            position: absolute;
            width: 70%;
            top: #{78rpx};
            left: #{180rpx};
            text {
                margin-right: #{20rpx};
            }
        }
        .goods-num {
            font-size: #{24rpx};
            color: #999;
            position: absolute;
            top: #{126rpx};
            left: #{180rpx};
        }
        .goods-price {
            font-size: #{24rpx};
            color: #353535;
            position: absolute;
            bottom: 0;
            right: 0;
        }
    }

    .head-img {
        height: #{220rpx};
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .head-txt {
        font-size: #{28rpx};
        color: #fff;
        position: absolute;
        top: #{45rpx};
        left: #{48rpx};
        right: #{48rpx};
        line-height: #{40rpx};
        height: #{40rpx};
        z-index: 2;
    }

    .status-txt {
        font-size: #{32rpx};
    }

    .user-info {
        position: relative;
        background-color: #fff;
        margin: #{140rpx} #{24rpx} 0;
        border-radius: #{16rpx};
        padding: #{28rpx} #{24rpx} 0;
        z-index: 2;
        font-size: #{26rpx};
        color: #353535;
    }

    .localhost-img {
        height: #{44rpx};
        width: #{44rpx};
        position: absolute;
        top: #{40rpx};
        left: #{24rpx};
    }

    .user-text {
        padding-left: #{68rpx};
    }

    .user-text:last-of-type {
        margin: #{10rpx} 0 #{28rpx};
    }

    .area {
        height: #{72rpx};
        border-top: #{1rpx} solid #e2e2e2;
        position: relative;
    }

    .detail-btn {
        // width: 50%;
        height: #{72rpx};
        text-align: center;
        line-height: #{72rpx};
        color: #446dfd;
        font-size: #{24rpx};
    }

    .line {
        position: absolute;
        top: #{16rpx};
        left: 50%;
        width: #{1rpx};
        margin-left: #{-1rpx};
        background-color: #e2e2e2;
        height: #{40rpx};
    }

    .line.left-line {
        left: 36%;
        width: #{2rpx};
    }

    .line.right-line {
        left: 68%;
        width: #{2rpx};
    }

    .logo {
        height: #{100rpx};
        width: #{100rpx};
        float: left;
        margin-right: #{34rpx};
    }

    .express {
        margin: #{24rpx};
        display: block;
        margin-bottom: 0;
        padding: #{32rpx};
        padding-left: #{24rpx};
        position: relative;
        font-size: #{32rpx};
        background-color: #fff;
        color: #353535;
        border-radius: #{16rpx};
        .showMore {
            font-size: #{28rpx};
        }
        .showMore+.to-more {
            margin-top: #{-12rpx};
        }
    }

    .to-more {
        height: #{24rpx};
        width: #{12rpx};
        position: absolute;
        right: #{24rpx};
        top: 50%;
        margin-top: #{-6rpx};
    }

    .goods-info {
        padding: #{24rpx};
        background-color: #fff;
        margin: #{24rpx};
        margin-bottom: 0;
    }

    .goods-info.card-info {
        position: relative;
        margin-top: #{140rpx};
        z-index: 10;
        border-top-left-radius: #{16rpx};
        border-top-right-radius: #{16rpx};
    }

    .goods-title {
        color: #353535;
        font-size: #{24rpx};
    }

    .price-item {
        margin-bottom: #{10rpx};
        font-size: #{24rpx};
        color: #353535;
    }

    .refund-info {
        margin-top: #{15rpx};
        background-color: #f7f7f7;
        padding: #{15rpx} #{25rpx};
        font-size: #{24rpx};
    }

    .price-label {
        color: #999;
        font-size: #{24rpx};
    }

    .total-price {
        font-size: #{28rpx};
        color: #446dfd;
        font-weight: bold;
    }

    .btn.iphone_x {
        height: #{146rpx};
        padding-bottom: #{50rpx};
    }

    .btn {
        height: #{96rpx};
        position: fixed;
        bottom: 0;
        width: 100%;
        right: 0;
        border-top: #{1rpx} solid #e2e2e2;
        z-index: 10;
        padding: #{24rpx};
        background-color: #fff;
    }

    .handle-btn {
        height: #{48rpx};
        line-height: #{46rpx};
        padding: 0 #{24rpx};
        border-radius: #{24rpx};
        border: #{2rpx} solid #bbb;
        color: #353535;
        font-size: #{24rpx};
        margin-left: #{16rpx};
    }

    .handle-btn.other {
        border: #{2rpx} solid #446dfd;
        color: #446dfd;
    }

    .dialog {
        width: #{620rpx};
        border-radius: #{16rpx};
        margin: 0 auto;
        background-color: #fff;
        z-index: 20;
    }

    .dialog-title {
        font-size: #{32rpx};
        color: #353535;
        width: #{620rpx};
        margin: #{32rpx} auto #{40rpx};
        text-align: center;
    }

    .dialog-choose-item {
        width: #{170rpx};
        height: #{68rpx};
        line-height: #{68rpx};
        text-align: center;
        border-radius: #{34rpx};
        border: #{2rpx} solid #ddd;
        color: #666;
        font-size: #{28rpx};
        margin-bottom: #{16rpx};
    }

    .send-item {
        width: #{180rpx};
        height: #{68rpx};
        line-height: #{66rpx};
        text-align: center;
        border-radius: #{34rpx};
        border: #{2rpx} solid #ddd;
        color: #666;
        background-color: #fff;
        font-size: #{28rpx};
        margin: 0 #{30rpx} #{36rpx};
    }

    .send-item.active {
        color: #fff;
        border: #{2rpx} solid #446dfd;
        background-color: #446dfd;
    }

    .dialog-choose-item.active {
        color: #446dfd;
        border: #{2rpx} solid #446dfd;
    }

    .btn-area {
        height: #{88rpx};
        position: relative;
        border-top: #{1rpx} solid #e2e2e2;
    }

    .btn-area .line {
        height: #{32rpx};
        width: #{1rpx};
        background-color: #e2e2e2;
        position: absolute;
        top: #{28rpx};
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .submit-btn {
        height: #{88rpx};
        line-height: #{88rpx};
        font-size: #{32rpx};
        color: #666;
        width: #{310rpx};
        text-align: center;
    }

    .submit-btn.be-submit {
        color: #446dfd;
    }

    .textarea {
        height: #{252rpx};
        width: #{492rpx};
        padding: #{24rpx} #{32rpx};
        font-size: #{28rpx};
        border-radius: #{16rpx};
        border: #{2rpx} solid #e2e2e2;
        text-align: left;
        margin: #{32rpx} auto;
    }

    .change-price-item {
        position: relative;
        height: #{64rpx};
        line-height: #{64rpx};
        color: #353535;
        font-size: #{28rpx};
        margin-bottom: #{26rpx};
    }

    .label {
        height: #{64rpx};
        line-height: #{64rpx};
        text-align: right;
        width: #{178rpx};
    }

    .price-input {
        height: #{64rpx};
        margin-left: #{24rpx};
        border-radius: #{32rpx};
        padding-left: #{62rpx};
        background-color: #f7f7f7;
    }

    .money {
        position: absolute;
        left: #{234rpx};
    }

    .bg {
        background-color: rgba(0, 0, 0, .3);
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 100;
    }

    .time-title {
        margin-left: #{32rpx};
        color: #666;
        font-size: #{28rpx};
        margin-bottom: #{20rpx};
    }

    .choose-time {
        position: relative;
    }

    .reason-title {
        font-size: #{28rpx};
        color: #999;
        margin-bottom: #{20rpx};
    }

    .reason-content {
        font-size: #{28rpx};
        color: #353535;
        width: #{556rpx};
        margin-bottom: #{26rpx};
    }

    .reason-img {
        margin-bottom: #{14rpx};
    }

    .reason-img image {
        height: #{180rpx};
        width: #{180rpx};
        margin: 0 #{8rpx} #{8rpx} 0;
    }

    .add-list {
        margin-top: #{50rpx};
        max-height: #{388rpx};
        overflow: auto;
        padding: 0 #{36rpx};
    }

    .add-item {
        padding: #{32rpx} 0;
        margin-left: #{64rpx};
        position: relative;
        font-size: #{28rpx};
        color: #353535;
        border-bottom: #{1rpx} solid #e2e2e2;
    }

    .add-item.delivery-item {
        padding-left: #{64rpx};
        margin-left: 0;
    }

    .add-item:last-of-type {
        border-bottom: 0;
    }

    .add-item image {
        height: #{36rpx};
        width: #{36rpx};
    }

    .add-item .add-active {
        position: absolute;
        left: #{-64rpx};
        top: 50%;
        margin-top: #{-18rpx};
    }

    .add-item .add-name {
        width: #{220rpx};
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .add-item.delivery-item .add-name {
        width: #{400rpx};
    }

    .bottom-place {
        height: #{120rpx};
    }

    .bottom-place.iphone_x {
        height: #{170rpx};
    }

    .refund-price {
        width: #{160rpx};
        border: #{2rpx} solid #e2e2e2;
        border-radius: #{5rpx};
        font-size: #{32rpx};
        padding: 0 #{5rpx};
    }

    .name {
        margin-right: #{20rpx};
    }

    .express-company {
        margin-top: #{10rpx};
    }

    .express-number {
        color: #666666;
        font-size: #{28rpx};
        margin-top: #{10rpx}
    }

    .total-label {
        font-size: #{24rpx};
        color: #353535;
    }

    .mch-goods .goods-title {
        margin-bottom: #{24rpx};
    }

    .mch-goods .price-label {
        margin-right: #{20rpx};
    }

    .form-img {
        height: #{120rpx};
        width: #{120rpx};
    }

    .refund-tip {
        font-size: #{32rpx};
        color: #353535;
        margin: #{4rpx} 0 #{45rpx};
    }

    .change-total-price {
        margin-left: #{56rpx};
    }

    .change-price-item:first-of-type {
        margin-bottom: #{32rpx};
    }

    .change-price-item:last-of-type {
        margin: #{24rpx} 0 #{34rpx};
    }

    .cancel-tip {
        font-size: #{32rpx};
        color: #353535;
        margin: #{74rpx} 0 #{60rpx};
    }

    .send-type {
        margin-bottom: #{24rpx};
        padding: 0 #{32rpx};
    }

    .reason {
        padding-left: #{32rpx};
    }

    .btn-area.other-btn-area {
        margin-top: #{10rpx};
    }

    .refund-pay {
        font-size: #{36rpx};
        color: #353535;
        font-weight: blod;
    }

    .goods-name {
        padding-top: #{5rpx};
    }

    .address-info {
        margin-bottom: #{28rpx};
    }
</style>