|
| xqd
@@ -0,0 +1,282 @@
|
|
|
+<template>
|
|
|
+ <view class="main">
|
|
|
+ <load-refresh ref="loadRefresh" :isPaging="false" :isRefresh="true" refreshType="loader" refreshTime="2000"
|
|
|
+ heightReduce="10" backgroundCover="#fff" @refresh="refresh">
|
|
|
+ <view slot="content-list">
|
|
|
+ <view class="list">
|
|
|
+ <!-- 头像 -->
|
|
|
+ <view class="portrait" v-if="orderInfo.product_type == 3">
|
|
|
+ <view style="padding-top: 20rpx;">
|
|
|
+ <!-- <image class="img" :src=""></image> -->
|
|
|
+ <u-avatar :src="orderInfo.docter.avatar" mode="circle"></u-avatar>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 文字 -->
|
|
|
+ <view class="text" :style="orderInfo.product_type == 4||orderInfo.product_type == 5?'width:100%;padding:15rpx':''">
|
|
|
+ <!-- 名字+标签 -->
|
|
|
+ <view class="name" v-if="orderInfo.product_type == 3">
|
|
|
+ <view style="margin-right: 15rpx;">{{orderInfo.docter.name}}</view>
|
|
|
+ <view class="label" v-for="(itm,idx) in orderInfo.docter.label_texts" :key="index">{{itm.label_name}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="name" v-if="orderInfo.product_type == 4||orderInfo.product_type == 5">
|
|
|
+ <view style="margin-right: 15rpx;">预约地址：{{orderInfo.organization.address}}</view>
|
|
|
+ </view>
|
|
|
+ <!-- 科室 -->
|
|
|
+ <view class="department" v-if="orderInfo.product_type == 3">
|
|
|
+ <text>科室:</text>
|
|
|
+ <text style="color: #333333;">{{orderInfo.docter.office.name}}</text>
|
|
|
+ <text style="color: #333333;">{{orderInfo.docter.qualification.name}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="department" v-if="orderInfo.product_type == 4">
|
|
|
+ <text>预约疫苗:</text>
|
|
|
+ <text style="color: #333333;">{{orderInfo.order_vaccine.vaccine_name}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="department flex align-center" v-if="orderInfo.product_type == 5">
|
|
|
+ <text>预约儿保项目:</text>
|
|
|
+ <view class="">
|
|
|
+ <view class="" v-for="(ite,idxn) in orderInfo.order_nurse" :key="idxn">
|
|
|
+ {{ite.nurse_name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="padding-sm bg-white margin-top-sm">
|
|
|
+ <view class="text-lg text-black text-bold">
|
|
|
+ 订单信息
|
|
|
+ </view>
|
|
|
+ <view class="text-gray margin-top-xs padding-tb-xs">
|
|
|
+ <text class="text-leftstyle">订单号：</text>
|
|
|
+ <text class="font_style">{{orderInfo.order_sn}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="text-gray margin-top-xs padding-tb-xs">
|
|
|
+ <text class="text-leftstyle">状态：</text><text v-if="orderInfo.order_status==1" class="font_style" style="color: rgb(238, 170, 63);">未支付</text>
|
|
|
+ <text v-else-if="orderInfo.order_status==2" class="font_style" style="color: rgb(238, 170, 63);">待接单</text>
|
|
|
+ <text v-else-if="orderInfo.order_status==3" class="font_style" style="color: rgb(238, 170, 63);">进行中</text>
|
|
|
+ <text v-else-if="orderInfo.order_status==4" class="font_style" style="color: rgb(238, 170, 63);">已完成</text>
|
|
|
+ <text v-else-if="orderInfo.order_status==5" class="font_style" style="color: rgb(238, 170, 63);">已取消</text>
|
|
|
+ </view>
|
|
|
+ <view class="text-gray margin-top-xs padding-tb-xs">
|
|
|
+ <text class="text-leftstyle">下单时间：</text><text class="font_style">{{orderInfo.created_at}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="text-gray margin-top-xs padding-tb-xs" v-if="orderInfo.end_time!=0">
|
|
|
+ <text class="text-leftstyle">结束时间：</text><text class="font_style">{{formatDate(orderInfo.end_time * 1000)}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="text-gray margin-top-xs padding-tb-xs" v-if="orderInfo.product_type==1">
|
|
|
+ <text class="text-leftstyle">咨询时长：</text><text class="font_style">{{orderInfo.consult_duration}}秒</text>
|
|
|
+ </view>
|
|
|
+ <view class="text-gray margin-top-xs padding-tb-xs">
|
|
|
+ <text class="text-leftstyle">咨询患者：</text><text class="font_style">{{orderInfo.order_patient.name}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="text-gray margin-top-xs padding-tb-xs">
|
|
|
+ <text class="text-leftstyle">已付款：</text><text class="font_style">￥{{orderInfo.total_amount/100}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="cu-tabbar-height"></view>
|
|
|
+ <view class="cu-tabbar-height"></view>
|
|
|
+ </view>
|
|
|
+ </load-refresh>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ onLoad(options) {
|
|
|
+ this.order_id = options.id
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getordersInfo()
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ order_id: "",
|
|
|
+ orderInfo: {},
|
|
|
+ outtime: ""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ refresh() {
|
|
|
+ this.getordersInfo()
|
|
|
+ },
|
|
|
+ getordersInfo: async function() {
|
|
|
+ let res = await this.$request.post("/api/v1/order/orderDetail", {
|
|
|
+ order_id: this.order_id
|
|
|
+ }, false)
|
|
|
+ console.log(res)
|
|
|
+ if (res.status == 0) {
|
|
|
+ this.orderInfo = res.data
|
|
|
+ this.$refs.loadRefresh.loadOver()
|
|
|
+ console.log(this.orderInfo)
|
|
|
+ // this.outtime = this.formatDate(this.orderInfo.end_time * 1000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .main {
|
|
|
+ min-height: 100vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-leftstyle {
|
|
|
+ text-align: right;
|
|
|
+ width: 140rpx;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .font_style {
|
|
|
+ color: rgb(51, 51, 51);
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .round {
|
|
|
+ height: 45rpx;
|
|
|
+ width: 50rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #ececec;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card {
|
|
|
+ padding: 30rpx 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .card_view {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 15rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ height: 20vh;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-end;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 90%;
|
|
|
+ height: 90%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .describe {
|
|
|
+ width: 100%;
|
|
|
+ height: 1;
|
|
|
+ padding: 100rpx 40rpx 20rpx 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ margin: 20rpx 0 10rpx 0;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ align-items: center;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 15rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
|
|
|
+
|
|
|
+ .portrait {
|
|
|
+ width: 20%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bun_true {
|
|
|
+ text-align: center;
|
|
|
+ width: 80rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background-color: #D92975;
|
|
|
+ margin: 0 10rpx;
|
|
|
+ border-radius: 60rpx;
|
|
|
+ position: relative;
|
|
|
+ top: -20rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ padding: 3rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bun_false {
|
|
|
+ border: 1rpx solid #D92975;
|
|
|
+ text-align: center;
|
|
|
+ width: 80rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ margin: 0 10rpx;
|
|
|
+ border-radius: 60rpx;
|
|
|
+ position: relative;
|
|
|
+ top: -20rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #D92975;
|
|
|
+ padding: 3rpx 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //文字
|
|
|
+ .text {
|
|
|
+ width: 70%;
|
|
|
+
|
|
|
+ //名字+标签
|
|
|
+ .name {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-weight: 400;
|
|
|
+ margin-right: 15rpx;
|
|
|
+ background-color: #E5F5FF;
|
|
|
+ color: #0B73B9;
|
|
|
+ width: 100rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //科室
|
|
|
+ .department {
|
|
|
+ margin-top: 15rpx;
|
|
|
+ color: #666666;
|
|
|
+
|
|
|
+ text {
|
|
|
+ margin-right: 15rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 选项
|
|
|
+ .option {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ view {
|
|
|
+ background-color: #E4E4E4;
|
|
|
+ width: 100rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ border-radius: 12px;
|
|
|
+ margin-right: 15rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
