jje_uniapp/orderPages/orderDetail/index.vue

<template>
        <view class="page">
            <view class="state ">
                <view class="flex-row justify-center">
                    <u-icon name="cut" color="#93D21A" size="18"></u-icon>
                    <text>{{order.orderStatusDesc}}</text>
                </view>
                <view class="box_4 flex-row justify-center">
                    <text>{{order.orderDesc}}</text>
                </view>
            </view>

            <view class="detail">
                <view class="serviceAttrDesc">
                    <text>{{order.serviceAttrDesc}}</text>
                </view>
                <view class="flex-row justify-start">
                    <u-icon name="/static/index/u217.png" color="#93D21A" size="18"></u-icon>
                    <text class="key">订单编号：</text>
                    <text class="value">{{order.orderNo}}</text>
                </view>
                <view>
                    <text  class="serviceType">{{order.serviceType}}</text>
                </view>

                <view class="flex-row justify-between">
                    <view class="flex-col">
                        <view class=" flex-row">
                            <u-icon name="/static/order/ud1.png" color="#93D21A" size="18"></u-icon>
                            <text  class="key">服务对象：</text>
                            <text  class="value">{{order.serviceObjectName}}</text>
                        </view>
                        <view class="flex-row">
                            <u-icon name="/static/order/ud2.png" color="#93D21A" size="18"></u-icon>
                            <text class="key">服务门店：</text>
                            <text class="value">{{order.storeName}}</text>
                        </view>
                        <view class="flex-row">
                            <u-icon name="clock" size="16"></u-icon>
                            <text class="key">下单时间：</text>
                            <text class="value">{{order.createTime}}</text>
                        </view>
                    </view>

                    <view class="flex-col">
                        <view class="planNumber flex-row justify-center">
                            <text>{{order.planNumber}}</text>
                        </view>
                        <view class="plan flex-row justify-center">
                            <text class="plan">排号</text>
                        </view>
                    </view>
                </view>


                <view class="flex-row justify-center">
                    <view class="scan flex-row justify-center">
                        <u-icon name="scan" size="18"></u-icon>
                        <text>扫码</text>
                    </view>
                </view>
                <view class="line"></view>

                <view class="flex-row justify-between borderBottom" v-for="(item,index) in order.child" :key="index">
                    <view class="flex-col justify-center">
                        <u-icon v-if="item.tick" name="checkmark-circle-fill" color="#38db38" size="20" @click="tick(item,index)"></u-icon>
                        <u-icon v-else name="/static/order/ud9.png" color="green" size="20" @click="tick(item,index)"></u-icon>
                    </view>

                    <view class="flex-col right">
                        <view class="flex-row justify-between">
                            <text class="serviceType">{{item.serviceName}}</text>
                            <text class="projectState">{{item.statusDesc}}</text>
                        </view>

                        <view class="box_11">
                            <view class="group_2"></view>
                            <view class="group_3">
                                <view class="flex-row">
                                    <u-icon name="server-man" size="16"></u-icon>
                                    <text class="key">服务人员：</text>
                                    <text class="value">{{item.servicePerson || ''}}</text>
                                </view>
                                <view class="flex-row">
                                    <u-icon name="clock" size="16"></u-icon>
                                    <text class="key">服务时间：</text>
                                    <text class="value">{{item.serviceTime || ''}}</text>
                                </view>
                            </view>
                        </view>
                        <view class="flex-row justify-between">
                            <view>
                                <text  class="key">金额：</text>
                                <text  class="projectMoney">¥{{item.servicePrice}}</text>
                            </view>

                            <view class="flex-row" v-if="item.status === 1" @click="appeal(item.orderServiceId)">
                                <u-icon name="/static/order/ud17.png" color="#93D21A" size="18"></u-icon>
                                <text  class="key">申诉</text>
                            </view>
                        </view>
                    </view>
                </view>




            </view>

            <view class="bottomHeight"></view>

            <view class="bottom flex-col">
                <text class="allMoney">合计价格：¥{{allPrice}}</text>
                <view class="bottomBtn　flex-row justify-between">
                    <view class=" flex-row">
                        <text  class="unpaid">待支付</text>
                        <text  class="preferentialPrice">¥{{allPrice}}</text>
                        <text  class="originalPrice">¥{{allPrice}}</text>
                        <text  class="priceDetail">价格明细</text>
                    </view>

                    <view class="btn" @click="">
                        <text lines="1" class="text_33">提交</text>
                    </view>
                </view>
            </view>

            <uni-popup ref="appealPopup" :animation="false" :catchtouchmove="true">

                <view class="appealView flex-col justify-around">
                    <view class="popupTitle">
                        <text>请输入申诉理由</text>
                    </view>

                    <view class="lex-row justify-center">
                        <textarea class="textarea" v-model="appealReason"  placeholder="请输入申诉理由"></textarea>
                    </view>


                    <view class="flex-row justify-around">
                        <view class="leftBtn" @click="appealPopupClose">
                            <text>取消</text>
                        </view>
                        <view class="rightBtn" @click="commitAppeal">
                            <text>确定</text>
                        </view>
                    </view>
                </view>

            </uni-popup>


        </view>
</template>

<script>
import UniPopup from "../../uni_modules/uni-popup/components/uni-popup/uni-popup";
export default {
    components: {
        UniPopup
    },
    data() {
        return {
            title: 'Hello',
            tabIndex: 3,
            order:{},
            allPrice:0,
            appealId:'',
            appealReason:'',
            orderId:''
        }
    },
    onLoad(e) {
        this.orderId = e.id
        this.getOrderDetailByOrderId(e.id)
    },
    methods: {

        commitAppeal(){
            this.$api.appeal({
                childOrderId:this.appealId,
                appealReason:this.appealReason
            }).then(res=>{
                this.appealReason=''
                uni.$u.toast('申诉已提交')
                this.$refs.appealPopup.close()
                this.getOrderDetailByOrderId(this.orderId)
            })
        },
        appealPopupClose(){
            this.appealReason=''
            this.$refs.appealPopup.close()
        },

        appeal(id){
            this.appealId = id
            this.$refs.appealPopup.open()
        },

        tick(item,index){

          if (item.status === 1 || item.status === 4){
              this.allPrice = 0
              item.tick = !item.tick
              this.$set(this.order.child,index,item)
              this.order.child.forEach(i=>{
                  if (i.tick){
                      this.allPrice += i.servicePrice *1
                  }
              })
              this.allPrice = this.allPrice.toFixed(2)
          }
        },

        getOrderDetailByOrderId(id){
            this.$api.getOrderDetailByOrderId({
                id:id
            }).then(res=>{
                this.order= res.data.data
            })
        }
    }
}
</script>

<style>
@import '/common/css/common.css';
@import './index.rpx.scss';</style>