<template>
  <view
    class="container commonPageBox commonDetailPage"
    style="background-color: #f6f7fb"
  >
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <z-nav-bar title="订单详情" bgColor="#258feb" fontColor="#fff"> </z-nav-bar>

    <view>
      <view style="padding: 20rpx">
        <view
          v-if="
            orderContet.orderType != 'point' &&
            orderContet.addressId != 0 &&
            orderContet.addressId != null
          "
          class="order_top common_radius_box color_shandow goods_box address_box"
        >
          <u-icon
            name="map-fill"
            color="#258feb"
            size="23"
            style="display: inline-block; margin-right: 10rpx"
          ></u-icon>
          <!-- <view class="curriulum_title_box goods_item"> -->

          <view class="normal_box">
            <view class="normal_box_top">
              <view class="curriulum_title"
                >{{ orderContet.province }}
                {{ orderContet.city }}
                {{ orderContet.county }}
                {{ orderContet.address }}</view
              >
              <view class="user_info">
                <text class="name">
                  {{ orderContet.shippingUser }}
                </text>
                <text class="tel">
                  {{ orderContet.userPhone }}
                </text>
              </view>
            </view>
          </view>

          <!-- </view> -->
        </view>
      </view>

      <view class="orderList" v-if="consigneeShow">
        <view
          class=""
          v-if="sheetList.length > 1 && orderContet.orderStatus == 2"
          style="
            background-color: rgb(113, 213, 161);
            margin-bottom: 20rpx;
            border-radius: 20rpx;
            color: #fff;
            font-size: 28rpx;
            padding: 10rpx;
          "
        >
          订单已被拆分成 {{ sheetList.length }} 个包裹
        </view>
        <view class="orderItem">
          <view class="" style="position: relative; height: 60rpx">
            <text
              class="orderState orderState0"
              v-if="orderContet.orderStatus == 0"
              >待支付</text
            >
            <text
              class="orderState orderState1"
              v-if="orderContet.orderStatus == 1"
              >待发货</text
            >
            <text
              class="orderState orderState2"
              v-if="orderContet.orderStatus == 2"
              >待收货</text
            >
            <text
              class="orderState orderState3"
              v-if="orderContet.orderStatus == 3"
              >已完成</text
            >
            <text
              class="orderState orderState5"
              v-if="orderContet.orderStatus == 5"
              >已超时</text
            >
          </view>
          <view
            class="orderContent"
            v-for="(item, index) in goodsList"
            :key="index"
            @click="goDetail(item.productId, item)"
            v-if="goodsList.length > 0"
          >
            <!-- <image :src="item.productImage" mode="" ></image> -->
            <view class="feng" style="position: relative">
              <view v-if="item.delFlag == -1" class="delisted" style=""
                >已下架</view
              >

              <!-- <image
            :src="selectGoodsData.productImages"
            mode="aspectFit"
            class="goods_image"
          ></image> -->
              <image
                style="width: 100%; height: 100%"
                v-if="item.productImages"
                :src="item.productImages"
                mode="aspectFit"
              ></image>
              <view
                v-else
                style="
                  color: #c0c4cc;
                  font-size: 22rpx;
                  line-height: 140rpx;
                  text-align: center;
                "
                >暂无封面图</view
              >
            </view>

            <view class="goods_info">
              <view class="flexbox itemJian">
                <view class="booknameleft">
                  <text
                    :style="`${item.delFlag == -1 ? 'color:#c0c4cc;' : ''}`"
                    >{{ item.productName }}</text
                  >
                </view>
                <view
                  style="color: #e97512; font-size: 26rpx; font-weight: 700"
                >
                  <view
                    style="
                      text-align: right;
                      font-size: 30rpx;
                      margin-bottom: 10rpx;
                    "
                  >
                    ￥{{ item.price }}
                  </view>

                  <view style="text-align: right; color: #333">
                    ×{{ item.quantity ? item.quantity : "" }}
                  </view>
                </view>
              </view>
              <!-- <view class="btns flexbox" style="margin-top: 10rpx">
                <view class="left" style="color: #c0c4cc"></view>
                <view class="right flexbox opbtns" style="color: #c0c4cc">
                  ×{{ item.quantity ? item.quantity : "" }}
                </view>
              </view> -->
            </view>

            <!-- <view class="orderOper" v-if="orderContet.orderStatus=='3'"> -->
            <!-- <view class="orderOper" v-if="item.orderStatus == 3">
              <view style="width: 100%; text-align: right">
                <view
                  v-if="userRecordid == null"
                  @click.stop="pingji(item.productId)"
                  class="opCan"
                  >评价</view
                >
                <view
                  v-else
                  @click.stop="showZhuiping(item.productId)"
                  class="opCan"
                  >追评</view
                >
              </view>
            </view> -->

            <br clear="both" />
          </view>
          <view class="orderContent" v-if="orderContet.orderType == 'relearn'">
            <image
              src="/static/icon/fugou.png"
              mode="aspectFill"
              style="width: 100rpx; height: 100rpx"
            ></image>
            <view class="itemJian">
              <view class="orderTitle" style="line-height: 44rpx">
                <text>{{ orderContet.remark }}</text>
              </view>
              <view class="orderPrice">
                <text style="font-weight: bold"></text>
              </view>
              <br clear="both" />
            </view>
            <br clear="both" />
          </view>
		  
          <view class="orderContent" v-if="orderContet.orderType == 'vip'">
            <image
              src="/static/icon/vip.png"
              mode="aspectFill"
              style="width: 100rpx; height: 100rpx"
            ></image>
            <view class="itemJian">
              <view class="orderTitle" style="line-height: 100rpx">
                <text>{{ orderContet.vipBuyConfigEntity.title }}</text>
              </view>
              <view class="orderPrice">
                <text style="font-weight: bold"></text>
              </view>
              <br clear="both" />
            </view>
            <br clear="both" />
          </view>
		  
		  <view class="orderContent" v-if="orderContet.orderType == 'aiVip'||orderContet.orderType == 'upgradeAiVip'" style=" display: flex; align-items: center; justify-content: center;">
		  		<image src="/static/icon/order_vip.png" mode="aspectFill" style="width: 100rpx; height: 100rpx; flex-shrink: 0;"></image>
		  		<view class="itemJian">
		  		  <view class="orderTitle" style="line-height: 46rpx; margin-bottom: 0;">
		  			{{ orderContet.aiBuyConfig.title }}<span style=" color: red;">（{{ orderContet.aiBuyConfig.count }}次）<span v-if="orderContet.orderType=='upgradeAiVip'">（VIP升级）</span></span>
		  		  </view>
		  		</view>
		  </view>
		  
          <view
            class="orderContent"
            v-else-if="orderContet.orderType == 'point'"
          >
            <image
              src="/static/icon/pay_3.png"
              mode="aspectFill"
              style="width: 100rpx; height: 100rpx"
            ></image>
            <view class="itemJian">
              <view class="orderTitle" style="line-height: 100rpx">
                <text
                  >充值 {{ orderContet.bookBuyConfigEntity.money }}天医币</text
                >
              </view>

              <br clear="both" />
            </view>
            <br clear="both" />
          </view>
		  <view
		    class="orderContent"
		    v-else-if="orderContet.orderType == 'trainingClass'"
		  >
		    <image
		      src="/static/icon/icon_pxb.png"
		      mode="aspectFill"
		      style="width: 100rpx; height: 100rpx"
		    ></image>
		    <view class="itemJian">
		      <view class="orderTitle" style="line-height: 100rpx">
		        <text>{{orderContet.remark}}</text>
		      </view>
		  
		      <br clear="both" />
		    </view>
		    <br clear="both" />
		  </view>

          <view class="order_item" style="">
            <view class="orderallpri">
              <span style="color: #666; margin-right: 10rpx; float: left"
                >商品总价 :
              </span>

              <span v-if="orderContet.orderType == 'point'"
                >￥ {{ orderContet.bookBuyConfigEntity.realMoney }}</span
              >
              <span v-else>￥ {{ orderContet.orderMoney }}</span>
            </view>
            <view class="orderReal" v-if="orderContet.orderType == 'order'">
              <span style="color: #666; margin-right: 10rpx; float: left"
                >运费 :
              </span>
              <span>￥</span>{{ orderContet.shippingMoney }}
            </view>
            <view
              class="orderReal"
              v-if="orderContet.districtMoney && orderContet.districtMoney > 0"
            >
              <span style="color: #666; margin-right: 10rpx; float: left">
                活动立减:
              </span>
              <span style="color: #fa2d12"
                >- ￥{{ orderContet.districtMoney }}</span
              >
            </view>
            <view
              class="orderReal"
              v-if="
                orderContet.vipDiscountAmount &&
                orderContet.vipDiscountAmount > 0
              "
            >
              <span style="color: #666; margin-right: 10rpx; float: left">
                <span
                  style="color: #f94f04; font-weight: bold; margin-right: 2px"
                  >VIP</span
                >
                专享立减:
              </span>
              <span style="color: #fa2d12"
                >- ￥{{ orderContet.vipDiscountAmount }}</span
              >
            </view>
            <view
              class="orderReal"
              v-if="orderContet.couponId && orderContet.couponId != null"
            >
              <span style="color: #666; margin-right: 10rpx; float: left"
                >优惠券 :
              </span>
              <span>- ￥</span>{{ orderContet.couponAmount }}
            </view>
            <view class="orderReal" v-if="orderContet.jfDeduction > 0">
              <span style="color: #666; margin-right: 10rpx; float: left"
                >积分抵扣:
              </span>
              <span style="color: #fa2d12" v-if="orderContet.jfDeduction > 0"
                >-&nbsp;&nbsp;</span
              >
              <span style="color: #fa2d12"> {{ orderContet.jfDeduction }}</span>
            </view>
            <view
              class="orderReal"
              v-if="orderContet.paymentMethod == 4 && orderContet.realMoney > 0"
            >
              <span style="color: #666; margin-right: 10rpx; float: left"
                >天医币抵扣:
              </span>
              <span style="color: #fa2d12">-&nbsp;&nbsp;</span>
              <span style="color: #fa2d12">￥{{ orderContet.realMoney }}</span>
            </view>
            <view
              class="orderReal"
              v-if="orderContet.orderStatus != 0"
              style="margin-bottom: 20rpx"
            >
              <span style="color: #666; margin-right: 10rpx; float: left"
                >实付款 :
              </span>
              <b v-if="orderContet.orderType == 'point'" style="color: #dd3c0c"
                >￥ {{ orderContet.bookBuyConfigEntity.realMoney }}</b
              >
              <b style="color: #dd3c0c" v-else>
                <template v-if="orderContet.realMoney > 0">
                  ￥{{ orderContet.realMoney }}

                  <text style="font-size: 24rpx;margin-left: 10rpx;">
                    <span
                      style=""
                      v-if="orderContet.paymentMethod == 1"
                      >微信支付</span
                    >
                    <span
                      style=""
                      v-if="orderContet.paymentMethod == 2"
                      >支付宝支付</span
                    >
                    <span
                      style=""
                      v-if="orderContet.paymentMethod == 3"
                      >苹果支付</span
                    >
                    <span
                      style=""
                      v-if="orderContet.paymentMethod == 4"
                    >
                      天医币支付
                    </span></text
                  >
                </template>
				<template v-if="orderContet.realMoney == 0&&orderContet.jfDeduction==0">￥0</template>
                <text
                  style="margin: 0 4rpx"
                  v-if="
                    orderContet.realMoney > 0 && orderContet.jfDeduction > 0
                  "
                >
                  +
                </text>

                <text v-if="orderContet.jfDeduction > 0"
                  >{{ orderContet.jfDeduction }} 积分</text
                ></b
              >
            </view>
          </view>
          <view class="order_item">
            <view class="orderYunf">
              <span style="color: #666; float: left">订单编号 : </span>
              <text style="font-size: 24rpx; color: #666"
                >{{ orderContet.orderSn }}
              </text>
              <u-tag
                @click="handleCopy(orderContet.orderSn, '订单编号')"
                borderColor="#258feb"
                color="#258feb"
                text="复制"
                plain
                style="float: right; margin-left: 5rpx"
                size="mini"
                type="success"
              ></u-tag>
            </view>
            <view class="orderReal">
              <span style="color: #666; margin-right: 10rpx; float: left"
                >创建时间 :
              </span>
              <text style="font-size: 24rpx; color: #666">{{
                orderContet.createTime
              }}</text>
            </view>
            <view
              class="orderReal"
              v-if="
                orderContet.orderStatus >= 1 &&
                orderContet.orderStatus != 5 &&
                orderContet.paymentDate
              "
            >
              <span style="color: #666; margin-right: 10rpx; float: left"
                >付款时间 :
              </span>
              <text style="font-size: 24rpx; color: #666">{{
                orderContet.paymentDate
              }}</text>
            </view>
          </view>

          <!-- <view class="orderReal" v-if="orderContet.orderStatus >= 2 && orderContet.orderStatus != 5">
					<span style="color: #666;margin-right: 10rpx;float: left;">发货时间 : </span>
					<text style="font-size: 24rpx;color: #666;">{{orderContet.shippingTime}}</text>
				</view> -->
        </view>
        <view class="" style="text-align: center; width: 100%">
          <text
            @click="gotoWorkOrder"
            style="color: cadetblue; font-size: 26rpx"
            >订单有问题？去申诉</text
          >
        </view>
      </view>
    </view>
    <view class="goods_nav_box">
      <common-goods-nav
        :iconList="iconList"
        :customButton="customButton"
        @submit="goBuyJie"
        @clickIcon="clickIcon"
      >
        <!-- leftSlot -->
        <template slot="leftSlot" slot-scope="slotProps">
          <view
            class="price_box order_bottom_box"
            v-if="orderContet.orderStatus == 0"
          >
            <text class="price"
              >合计:
              <text class="total" v-if="orderContet.orderType == 'point'">
                ￥ {{ orderContet.bookBuyConfigEntity.realMoney }}
              </text>
              <text class="total" v-else>￥{{ orderContet.realMoney }}</text>
            </text>
          </view>
        </template>
      </common-goods-nav>

      <!-- <uni-goods-nav :fill="true" :options="buyOptions" :button-group="customButtonGroup1" @click="onClick"
                @buttonClick="buttonClick" /> -->
    </view>
    <!-- 对话框 -->
    <u-popup :show="pingjiaShow" :round="10" @close="closePingjia">
      <view class="tanchu">
        <view class="dp_title" v-if="pjType != 'zhuiping'">添加评价</view>
        <view class="dp_title" v-else>添加追评</view>

        <view style="max-height: 1000rpx; overflow-y: scroll">
          <uni-forms :modelValue="Pform">
            <!-- 评价图片 -->
            <!-- end -->
            <!-- <uni-forms-item name="comment" label-width="0">
									<uni-easyinput type="textarea" v-model="Pform.comment" placeholder="请输入您的商品评价"  />
								</uni-forms-item>		 -->
          </uni-forms>
          <!-- <u-button type="success" @click="submitPJ">提交评价</u-button> -->
          <!-- 提交 -->
          <view
            class="padding-bottom-sm flex padding-lr-sm"
            style="border-bottom: 1px solid #eeeeee"
          >
            <view class="mb30" v-if="pjType != 'zhuiping'">
              <span
                :class="['star', Pform.star >= 1 ? 'starLight' : 'starGray']"
                @click="getStar(1)"
              ></span>
              <span
                :class="['star', Pform.star >= 2 ? 'starLight' : 'starGray']"
                @click="getStar(2)"
              ></span>
              <span
                :class="['star', Pform.star >= 3 ? 'starLight' : 'starGray']"
                @click="getStar(3)"
              ></span>
              <span
                :class="['star', Pform.star >= 4 ? 'starLight' : 'starGray']"
                @click="getStar(4)"
              ></span>
              <span
                :class="['star', Pform.star >= 5 ? 'starLight' : 'starGray']"
                @click="getStar(5)"
              ></span>
            </view>
            <view class="mb30" v-if="pjType != 'zhuiping'">
              <!-- <uni-file-picker :auto-upload="false" ref="files" @delete="deleteImg" limit="5" @success="upSuccess" @select="select" v-model="Pform.img" fileMediatype="image" :image-styles="imageStyles"/> -->
              <u-upload
                :fileList="Pform.img"
                @afterRead="afterRead"
                @delete="deletePic"
                multiple
                :maxCount="4"
                width="80"
                height="80"
                :previewFullImage="true"
              >
              </u-upload>
            </view>
            <view class="flex-sub flexbox">
              <i @click="showEmj()" :class="emojiIcon"></i>
              <!-- <input type="text" @focus="InputFocus" @blur="InputBlur" v-model="message"  @input="textareaBInput"  placeholder-style="font-size:24rpx;color:#aaaaaa;"  placeholder="请输入您要发送的内容"></input> -->
              <textarea
                class="textarea"
                v-model="Pform.comment"
                @focus="InputFocus"
                @blur="InputBlur"
                @input="textareaBInput"
                placeholder-style="font-size:24rpx;color:#aaaaaa;"
                placeholder="请输入您要发送的内容"
              ></textarea>
            </view>
            <view class="">
              <!-- <button class="cu-btn bg-gradual-blue shadow-blur">发送</button> -->
              <u-button
                type="success"
                @click="submitPJ"
                v-if="pjType != 'zhuiping'"
                >提交评价</u-button
              >
              <u-button type="success" @click="zhuiping" v-else
                >提交追评</u-button
              >
            </view>
          </view>

          <view style="position: relative">
            <emotion
              @emotion="handleEmj"
              :height="220"
              v-if="isShowEmj"
              :windowWidth="windowWidth"
            ></emotion>
          </view>
        </view>
      </view>
    </u-popup>
    <u-popup
      mode="bottom"
      :show="sheetListShow"
      :round="10"
      @close="sheetListShow = false"
    >
      <view
        class="tanchu expresslist"
        style="height: 500rpx; overflow-y: scroll"
      >
        <view class="title"> 请选择要查看包裹 </view>
        <view class="list">
          <view
            class="item"
            v-for="(item, index) in sheetList"
            @click="seeExpressDetails(item)"
          >
            <h4 style="margin-bottom: 10rpx">包裹 {{ index + 1 }}</h4>
            <view class=""
              >运单号：{{ item.expressOrderSn }}
              <u-tag
                @click="copyData(item.expressOrderSn)"
                size="mini"
                class="copyCode"
                text="复制单号"
                plain
                type="success"
            /></view>
            <view class="">发货时间：{{ item.createTime }}</view>
          </view>
        </view>
      </view>
    </u-popup>
    <music-play :playData="playData"></music-play>
  </view>
</template>

<script>
import musicPlay from "@/components/music.vue";
import emotion from "@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue";
import $http from "@/config/requestConfig.js";
import { setPay, setPayAssign, setWXPay } from "@/config/utils";
import { mapState } from "vuex";
export default {
  data() {
    return {
      A: {
        orderId: 15316,
        orderSn: "20241209141541253186600376645070",
        userId: 13487,
        userName: null,
        statusNum: null,
        shippingUser: null,
        userPhone: "18834844847",
        province: null,
        city: null,
        district: null,
        address: null,
        come: 2,
        paymentMethod: "3",
        orderMoney: 39,
        districtMoney: 0,
        realMoney: 39,
        shippingMoney: null,
        shippingCompName: null,
        shippingSn: null,
        jfDeduction: 0,
        createTime: "2024-12-09 14:15:41",
        shippingTime: null,
        orderStatus: "0",
        successTime: null,
        couponId: null,
        couponName: null,
        delFlag: 0,
        products: null,
        productList: null,
        buyType: null,
        orderType: "point",
        expNo: null,
        isSend: null,
        vipBuyConfigId: 0,
        addressId: null,
        remark: null,
        orderCode: null,
        paymentDate: null,
        productId: "21",
        recordId: null,
        timestamp: null,
        user: null,
        expressList: null,
        addressModified: 0,
        consigneeVo: null,
        appName: null,
        bookBuyConfigEntity: {
          priceTypeId: 21,
          type: "point",
          qudao: "IOS",
          realMoney: "45",
          money: "39",
          givejf: "0",
          month: null,
          description: "",
          effective: 0,
          startTime: null,
          endTime: null,
        },
        vipBuyConfigEntity: null,
      },
      iconList: [
        {
          text: "联系客服",
          iconType: 1,
          icon: "server-fill",
          infoColor: "#666",
        },
      ],
      userRecordid: null, // 用户的评价状态
      playData: {},
      title: "Hello",
      isShowEmj: false,
      emojiIcon: "cuIcon-emoji",
      message: "",

      windowWidth: 0,
      windowHeight: 500,
      Pform: {
        // 评价表单
        star: 0,
        comment: "",
        img: [],
        html: "",
      },
      pingID: null,
      productID: null, // 订单商品id
      imageStyles: {
        width: 64,
        height: 64,
        border: {
          color: "#89aa7d",
          width: 2,
          style: "dashed",
          radius: "2px",
        },
      },
      pingjiaShow: false,
      logisticsData: [], // 快递信息列表
      titleStat: "",
      orderID: 0,
      orderSn: "",
      orderType: "",
      orderContet: {},
      goodsList: [],
      deliverDetails: [
        {
          Traces: [],
        },
      ], // 物流详情信息全部
      deliverDetailsLength: null,
      emoji: [],
      Files: [],
      pjType: "",
      sheetList: [], // 面单数据
      consigneeShow: false,
      sheetListShow: false,
      customButton: [],
    };
  },
  onLoad(e) {
    this.windowWidth = uni.getSystemInfoSync().windowWidth;
    this.orderID = e.orderId;
    this.orderType = e.orderType;
    this.orderSn = e.orderSn;
    console.log(this.orderID, "this.orderID");
  },
  onHide() {
    this.sheetList = [];
  },
  onShow() {
    this.getOrderList();
  },
  components: {
    emotion,
    musicPlay,
  },
  computed: {
    ...mapState(["userInfo"]),
  },

  methods: {
    gotoWorkOrder() {
      uni.navigateTo({
        url: `/pages/user/workOrder?name=order`,
      });
    },
    async goBuyJie(data) {
      console.log("index at line 532:", data);
      if (data.text == "继续付款") {
        this.goPay(this.orderContet);
      } else if (data.text == "取消订单") {
        this.canceOrder();
      } else if (data.text == "确认收货") {
        this.OverOrder();
      } else if (data.text == "查看物流") {
        this.seeExpressDetail(this.orderContet);
      }
    },
    async clickIcon(data) {
      console.log("index at line 532:", data);
      if (data.text == "联系客服") {
        this.kefu();
      }
    },
    // 复制到剪切板
    copyData(data) {
      uni.setClipboardData({
        data,
        success: function () {
          console.log("success");
        },
      });
    },
    seeExpressDetails(item) {
      console.log(item, "item");
      uni.navigateTo({
        url:
          "./deliverDetail?orderSn=" +
          this.orderContet.orderSn +
          "&expressOrderSn=" +
          item.expressOrderSn +
          "&expressCompanyCode=" +
          item.expressCompanyCode +
          "&expressCompanyName=" +
          item.expressCompanyName,
      });
    },
    // 倒计时回调
    countDown() {
      console.log("重新刷新订单");
      this.getOrderList();
    },
    // 获得输入的表情数组
    handleEmj(i) {
      console.log(i, "i---------");
      this.inputValue = i;
      // console.log(this.inputValue);
      if (i.emotioni == "[em_98]") {
        //匹配最后一个表情符号并删除11。
        this.Pform.comment = this.Pform.comment.replace(
          /(\[[^\]]+\]|[\s\S])$/,
          ""
        );
        if (this.emoji.length > 0) {
          this.emoji = this.emoji.slice(0, -1);
        }
      } else {
        this.emoji.push({ tag: i.emotion, name: i.emotioni });
        // console.log(this.emoji,'this.emoji')
        this.Pform.comment += i.emotioni;
        /// this.Pform.html += i.emotion
      }
    },
    showZhuiping(val) {
      this.pjType = "zhuiping";
      this.pingjiaShow = true;
      this.productID = val;
      this.pingID = pingid;
    },
    // 追加评论
    zhuiping() {
      let data = {
        oid: this.userRecordid,
        userId: this.userInfo.id,
        bookid: this.productID,
        conTent: this.Pform.comment,
      };
      console.log(data, "data");
      $http
        .request({
          url: "user/followUp/userFollowUp",
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data,
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          if (res.code == 0) {
            uni.showToast({
              title: "追评成功！",
              icon: "success",
            });
            this.pingjiaShow = false;
            this.pjType = "";
            (this.productID = null), (this.userRecordid = null);
            this.Pform.comment = "";
            this.Pform.html = "";
            this.emoji = [];
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 2000);
          }
        });
    },
    textareaBInput(e) {
      console.log(e, "e");
      this.Pform.comment = e.detail.value;
      /// this.Pform.html = e.detail.value
    },
    showEmj() {
      let bool = !this.isShowEmj;
      if (bool) {
        this.emojiIcon = "cuIcon-keyboard";
      } else {
        this.emojiIcon = "cuIcon-emoji";
      }

      this.isShowEmj = bool;
      this.$emit("show");
    },
    InputBlur(e) {},
    InputFocus(e) {
      this.isShowEmj = false;
      this.emojiIcon = "cuIcon-emoji";
      this.$emit("foc");
    },

    // end
    deleteImg(e) {
      // var arr = this.Pform.img.slice(0,-1)
      this.Pform.img.pop();
      //  console.log('删除文件',arr)
      console.log(this.Pform);
    },
    getStar(i) {
      this.Pform.star = i;
    },
    select(e) {
      console.log("选择文件：", e);
      let arr = e.tempFiles.map((item) => {
        return { url: item.url, name: item.name };
      });
      this.Pform.img = this.Pform.img.concat(...arr);
      //this.Pform.img = arr
      console.log(this.Pform, "img");
    },
    upSuccess(e) {
      console.log(e);
    },
    // 获取html格式的评论1
    getHtmlComment() {
      // 格式化html
      var ss = this.Pform.comment;
      if (this.emoji.length > 0) {
        for (var i = 0; i < this.emoji.length; i++) {
          if (this.Pform.comment.indexOf(this.emoji[i].name) !== -1) {
            //var re = new RegExp(this.emoji[0].name,"g"); //定义正则表达式
            //第一个参数是要替换掉的内容，第二个参数"g"表示替换全部（global）。
            // ss = ss.replace(re, ); //第一个参数是正则表达式。
            ss = ss.replace(this.emoji[i].name, this.emoji[i].tag);
            // console.log(ss)
          }
        }
        this.Pform.html = ss;
      } else {
        this.Pform.html = this.Pform.comment;
      }
      //console.log(this.Pform.html,'this.Pform.html')
    },
    deletePic() {
      let that = this;
      that.Pform.img.splice(0, 1);
      //console.log(that.Pform.img)
    },
    afterRead(e) {
      //console.log(e)
      let that = this;
      for (var i = 0; i < e.file.length; i++) {
        //console.log(i,e.file[i].url)
        uni.uploadFile({
          url: this.$baseUrl + "oss/fileoss",
          filePath: e.file[i].url,
          //files:e.file,
          name: "file",
          formData: {},
          success: (res) => {
            that.Pform.img.push({
              url: JSON.parse(res.data).url,
            });
          },
        });
      }
    },
    closePingjia() {
      this.pingjiaShow = false;
      this.Pform.comment = "";
      this.Pform.html = "";
      this.emoji = [];
    },
    // 提交评价
    submitPJ() {
      if (this.Pform.comment != "") {
        let data = {
          userid: this.userInfo.id,
          orderSn: this.orderSn,
          bookid: this.productID,
          // 'content': this.Pform.html,
          content: this.Pform.comment,
          starLevel: this.Pform.star,
          images: this.Pform.img,
          // 'emoji':this.emoji  // 表情数组
        };
        // console.log(data,'data')
        $http
          .request({
            url: "buy/record/UserRecordcomment",
            method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
            data,
            header: {
              //默认 无 说明：请求头
              "Content-Type": "application/json",
            },
          })
          .then((res) => {
            if (res.code == 0) {
              uni.showToast({
                title: "评价成功！",
                icon: "success",
              });

              this.pingjiaShow = false;
              this.Pform.comment = "";
              this.Pform.html = "";
              this.emoji = [];
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1,
                });
              }, 2000);
            }
          });
      } else {
        uni.showToast({
          title: "请先输入您的评价内容 ！",
          icon: "none",
        });
      }
    },
    // 添加评价
    pingji(id) {
      console.log(id);
      this.pjType = "";
      this.productID = id;
      this.pingjiaShow = true;
    },
    // 联系客服
    kefu() {
      uni.showModal({
        title: "提示",
        content: "微信号：yilujiankangkefu",
        // success: function (res) {
        // 	if (res.confirm) {
        // 		uni.makePhoneCall({
        // 			phoneNumber: '022-24142321' //仅为示例
        // 		});
        // 	} else if (res.cancel) {

        // 	}
        // }
      });
    },
    // 查看物流
    seeExpressDetail(item) {
      if (this.sheetList.length > 1) {
        this.sheetListShow = true;
      } else if (this.sheetList.length == 1) {
        // 直接展示详情
        uni.navigateTo({
          url:
            "./deliverDetail?orderSn=" +
            item.orderSn +
            "&expressOrderSn=" +
            this.sheetList[0].expressOrderSn,
        });
      }
    },
    handleCopy(value, title) {
      this.$commonJS.handleCopy(value, title);
    },
    onPageJump(item) {
      uni.navigateTo({
        url: "./deliverDetail?objId=" + item,
      });
    },
    OverOrder() {
      // 确认收货
      uni.showModal({
        title: "提示",
        content: "确认收货？",
        success: (res) => {
          let data = {
            orderId: this.orderID,
            orderStatus: "3",
          };
          if (res.confirm) {
            uni.showLoading();
            $http
              .request({
                url: "book/buyOrder/update",
                method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
                data,
                header: {
                  //默认 无 说明：请求头
                  "Content-Type": "application/json",
                },
              })
              .then((res) => {
                if (res.code == 0) {
                  uni.hideLoading();
                  uni.showToast({
                    title: "收货成功",
                    icon: "success",
                    duration: 1000,
                  });
                  this.getOrderList();
                }
              });
          } else if (res.cancel) {
          }
        },
      });
    },
    // 切换订单状态
    orderTabCLi(e) {
      this.orderListTab = e;
    },
    async getCouponDetail(id) {
      await this.$http
        .request({
          url: "common/coupon/getCouponHistoryInfo",
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data: {
            id,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          if (res.code != 0) return this.$commonJS.showToast(res.errMsg);
          this.orderContet.couponAmount =
            res.couponHistory.couponEntity.couponAmount;
        })
        .catch((e) => {
          console.log(e);
          this.$commonJS.showToast(e.errMsg);
        });
    },
    // 获取订单详情
    async getOrderList() {
      console.log("this.orderType", this.orderType);

      await this.$http
        .request({
          url: "common/buyOrder/commonOrderDetail",
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data: {
            orderId: this.orderID,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          this.customButton = [];
          console.log("订单详情", res);
          this.orderContet = res.data.buyOrder;
          this.goodsList = res.data.productInfo;
          this.consigneeShow = true;
          // 存在优惠券信息，就查询优惠券集体金额
          if (this.orderContet.couponId && this.orderContet.couponId != null) {
            await this.getCouponDetail(this.orderContet.couponId);
          }
          if (
            this.orderContet.orderStatus == 2 &&
            this.sheetList.length > 0 &&
            this.orderContet.orderStatus != 5
          ) {
            this.customButton.push({
              width: "160rpx",
              text: "查看物流",
              color: "#333",
              backgroundColor: "#f0f0f0",
              color: "#fff",
            });
          }
          if (this.orderContet.orderStatus == 2) {
            this.customButton.push({
              width: "160rpx",
              text: "确认收货",

              color: "#fff",
            });
          }
          if (
            this.orderContet.orderStatus == 0 &&
            this.orderContet.paymentMethod != 3
          ) {
            this.customButton.push({
              width: "160rpx",
              text: "继续付款",
            });
          }
          if (this.orderContet.orderStatus == 0) {
            this.customButton.push({
              width: "160rpx",
              text: "取消订单",
              color: "#333",
              backgroundColor: "#f0f0f0",
            });
          }

          // var seconds = res.result.timestamp + 30 * 60 + 2    // 过期时间
          // var nowSeconds = Math.floor(new Date().getTime() / 1000);
          // res.result.overTime = seconds - nowSeconds

          //this.userRecordid = res.userRecordid
          // this.productIDs = res.data.goodsList.map((item) => {
          //   return item.buyOrderProductId;
          // });
          // console.log(this.orderContet,'this.orderContet')
          if (this.orderContet.orderStatus == 0) {
            this.titleStat = "待支付";
          } else if (this.orderContet.orderStatus == 1) {
            this.titleStat = "待发货";
          } else if (this.orderContet.orderStatus == 2) {
            this.titleStat = "待收货";
          } else if (this.orderContet.orderStatus == 3) {
            this.titleStat = "已完成";
          }
          if (
            this.orderContet.orderStatus >= 2 &&
            this.orderContet.orderType == "order" &&
            this.orderContet.expressOrders
          ) {
            this.sheetList = this.orderContet.expressOrders;
          } else {
            this.sheetList = [];
          }
          console.log(this.orderContet, "订单详情");
        });
    },

    // 取消订单
    canceOrder() {
      uni.showModal({
        title: "提示",
        content: "确定要取消订单吗？",
        confirmText: "取消订单",
        cancelText: "考虑一下",
        confirmColor: "#c96713",
        cancelColor: "#555",
        success: (res) => {
          if (res.confirm) {
            this.$http
              .post(
                "book/buyOrder/appDelete?orderId=" + this.orderContet.orderId
              )
              .then((res) => {
                uni.showToast({
                  icon: "none",
                  title: "取消订单成功",
                });
                uni.switchTab({
                  url: "./orderList",
                });
              });
          }
        },
      });
    },

    // 支付
    goPay(payItem) {
      console.log(payItem, "订单数据");
      if (payItem.paymentMethod == 2) {
        console.log("阿里支付");
        setPay(
          {
            typePay: "alipay",
            subject: "order",
            totalAmount: payItem.realMoney,
            type: 2,
            relevanceoid: payItem.orderSn,
            customerId: this.userInfo.id,
          },
          (res) => {
            if (res.success) {
              uni.showToast({
                title: "支付成功",
              });
            } else {
              uni.showToast({
                title: "支付失败",
                icon: "none",
                image: "../../static/icon/ic_close.png",
              });
            }
            this.getOrderList();
          }
        );
      } else if (payItem.paymentMethod == 1) {
        console.log("微信支付");
        // console.log(this.isAndorid)
        if (this.isAndorid == false) {
          uni.showModal({
            title: "提示",
            content: "很抱歉，苹果系统暂不支持微信支付",
            showCancel: false,
          });
          return false;
        } else {
          let data1 = {
            orderSn: payItem.orderSn,
            buyOrderId: null,
            totalAmount: payItem.realMoney,
          };
          console.log(data1, "data1");
          setWXPay(data1, (res) => {
            if (res.success) {
              uni.showToast({
                title: "支付成功",
              });
            } else {
              console.log(res);
              if (res.data.errMsg.indexOf("User canceled") != -1) {
                uni.showToast({
                  title: "用户取消支付",
                  icon: "none",
                  image: "../../static/icon/ic_close.png",
                });
              } else {
                uni.showToast({
                  title: "支付失败",
                  icon: "none",
                  image: "../../static/icon/ic_close.png",
                });
              }
            }
          });
        }
      } else if (payItem.paymentMethod == 3) {
        // 苹果充值
        console.log("苹果二次支付");
        uni.showModal({
          content: "apple内购订单不支持继续支付，请重新发起支付申请并完成支付",
          confirmText: "好的",
          showCancel: false,
        });
      }
    },

    // 商品内容跳转
    goDetail(id, data) {
      console.log("data at line 1277:订单详情参数", data);
      if (data.delFlag == -1) {
        this.$commonJS.showToast("商品已下架");
      } else if (data.goodsType == "05") {
        if (data.courseIds && data.courseIds.length > 0) {
          uni.navigateTo({
            url: `/pages/course/courseDetail?id=${data.courseIds[0].courseId}`,
          });
        } else {
          uni.showToast({
            title: "课程数据出错",
            icon: "none",
          });
        }
      } else {
        uni.navigateTo({
          // url: '../bookShop/commodityDetail?id=' + item.id
          url: `/pages/goods/index/index?navTitle=''&title=''&id=${id}`,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.expresslist {
  font-size: 28rpx;
  color: #666;
  .title {
    text-align: center;
  }
  .item {
    padding: 30rpx;
    border-bottom: 1px solid #eee;
  }
}
.orderState {
  color: #fff;

  position: absolute;
  left: 0;
  top: 0rpx;
  padding: 6rpx 10rpx;
  border-radius: 0 24rpx 24rpx 0;
  font-size: 26rpx;
  // font-weight: bold;
  color: #fff;
}
.orderState0 {
  background-color: #e6a23c;
}
.orderState1 {
  background-color: #409eff;
}
.orderState2 {
  background-color: #f56c6c;
}
.orderState3 {
  background-color: #67c23a;
}
.orderState5 {
  background-color: #787878;
}
.guoqi {
  font-size: 28rpx;
  align-items: center;
  color: red;
  float: right;
  line-height: 40rpx;
}
.star {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10rpx;
}
.starGray {
  background: url(../../static/icon/star_greey.png) no-repeat;
  background-size: contain;
}
.starLight {
  background: url(../../static/icon/star_light.png) no-repeat;
  background-size: contain;
}
.cuIcon-emoji {
  background: url(../../static/biaoqing.png) no-repeat;
  background-size: contain;
  display: block;
  margin-right: 20rpx;
  width: 30px;
}
.cuIcon-keyboard {
  background: url(../../static/biaoqing.png) no-repeat;
  background-size: contain;
  display: block;
  width: 30px;
}
.mb30 {
  margin-bottom: 30rpx;
  overflow: hidden;
}
.tanchu {
  padding: 40rpx 30rpx 40rpx 30rpx;
  position: relative;

  .dp_title {
    font-size: 32rpx;
    margin-bottom: 50rpx;
    color: #555;
    text-align: center;
    font-weight: bold;
  }

  .dp_add {
    position: absolute;
    top: 40rpx;
    right: 30rpx;
    font-size: 22rpx;
    background-color: #fd6004;
    color: #fff;
    border-radius: 10rpx;
    padding: 5rpx 10rpx;

    .u-icon {
      display: inline-block;
      margin-right: 5rpx;
    }
  }

  .addressItem {
    border: 2px dashed #d9d9d9;
    border-radius: 10rpx;
    width: 100%;
    display: flex;
    padding: 20rpx 10rpx;
    margin: 25rpx 0 0 0;
    align-items: center;
    background-color: #fff;

    .addrContent {
      margin-left: 40rpx;
      flex: 1;

      .addrContentTop {
        display: flex;
        align-items: flex-end;
        margin: 0 0 15rpx 0;
        position: relative;

        .userName {
          font-size: 35rpx;
          font-weight: bold;
          margin-right: 30rpx;
        }

        .userTel {
          font-size: 25rpx;
          color: #888;
        }

        .userMoren {
          border: 1px solid #fd6004;
          color: #fd6004;
          padding: 3rpx 10rpx;
          font-size: 22rpx;
          border-radius: 10rpx;
          margin: 0 0 0 20rpx;
        }

        .chooseCheck {
          position: absolute;
          top: 3rpx;
          right: 6rpx;
        }
      }

      .addrContentBottom {
        font-size: 32rpx;
      }
    }
  }

  .addressItem.addItem_style {
    border-color: #fd6004;
  }

  .youhuiItem {
    border: 1px solid #d9d9d9;
    border-radius: 10rpx;
    width: 100%;
    display: flex;
    padding: 20rpx 10rpx;
    margin: 25rpx 0 0 0;
    align-items: center;
    background-color: #fff;
    font-size: 30rpx;
  }

  .youhuiItem > view {
    float: left;
  }

  .youhuiItem.youItem_style {
    border-color: #fd6004;
  }
}
.opShou {
  border-color: $uni-color-success !important;
}

.adDefault {
  padding: 30rpx 50rpx 30rpx 100rpx;
  background-color: #fff;
  border-top: 1px solid #eee;
  border-bottom: 2px dashed #b2e9d7;
  margin: 0 0 5rpx 0;
  position: relative;

  .defalTop {
    .userName {
      font-size: 35rpx;
      font-weight: bold;
      margin-right: 30rpx;
    }

    .userTel {
      font-size: 25rpx;
      color: #888;
    }
  }

  .defalBottom {
    .userAddress {
      font-size: 32rpx;
      line-height: 40rpx;
    }
  }

  .defalLeft {
    position: absolute;
    left: 30rpx;
    top: 55rpx;
  }
}

.orderList {
  padding: 20rpx;
  padding-top: 0;

  .orderItem {
    padding: 30rpx 0rpx;
    background-color: #fff;
    border-radius: 30rpx;
    margin-bottom: 30rpx;

    .orderContent {
      padding: 20rpx;
      margin-bottom: 20rpx;

      image {
        width: 150rpx;
        height: 180rpx;
        margin-right: 20rpx;
        float: left;
      }
      .goods_info {
        float: left;
        width: calc(100% - 180rpx) !important;
        justify-content: space-between;
      }
      .itemJian {
        width: 100%;
        justify-content: space-between;
        .orderTitle {
          font-weight: bold;
          font-size: 30rpx;
          margin: 0 0 20rpx 0;
          float: left;
          width: 410rpx;
        }

        .orderPrice {
          font-size: 28rpx;
          float: right;
          width: 60rpx;
          text-align: right;
          line-height: 40rpx;
        }
      }
    }

    .orderallpri {
      text-align: right;

      margin: 10rpx 0;
      // padding: 30rpx 0 0 0;
      font-size: 28rpx;
    }

    .orderReal {
      text-align: right;
      font-size: 28rpx;
      margin: 10rpx 0;
      // padding: 28rpx 0 0 0;
    }

    .orderYunf {
      text-align: right;

      font-size: 28rpx;
    }

    .orderOper {
      text-align: right;
      margin: 40rpx 20rpx 0 0;

      view {
        margin-left: 20rpx;
        padding: 10rpx 0;
        display: inline-block;
        width: 160rpx;
        font-size: 25rpx;
        text-align: center;
      }

      .opFix {
        color: #555;
        border: 1px solid #ddd;
        border-radius: 30rpx;
      }

      .opCan {
        color: #c96713;
        border: 1px solid #eba00b;
        border-radius: 30rpx;
      }
      .kefu {
        float: left;
      }
    }
  }
}
.copyCode {
  display: inline-block;
  margin-left: 20rpx;
}
.deliverCntent {
  padding: 32rpx;
  position: relative;
  background-color: #fff;
  margin-bottom: 20rpx;
  border-top: 1px solid #eee;
  font-size: 28rpx;
}

.flexbox {
  display: flex;
}

.img_icon {
  padding-right: 5px;
}

.moreBtnF {
  align-items: center;
  padding: 30rpx;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.9);
  // background: -webkit-linear-gradient(left, rgba(255,255,255,1)0%,rgba(255,255,255,0.5)66%, rgba(255,255,255,255)99%);/* Safari、Chrome */

  // background:linear-gradient(rgba(255,255,255,255),rgba(255,255,255,1));/* 默认渐变位置从上往下 */
}

.wuliu {
  .time {
    color: #888;
  }

  .moreBtn {
    display: inline-block;
    width: 50px;
  }
}
.address_box {
  background-color: #fff;
  // padding: 20rpx;
  display: flex;
  align-items: center;
  .order_top {
    background-color: #fff;
    // margin-bottom: 20rpx;
  }

  .user_info {
    width: 100%;
    float: left;
    display: flex;
    margin-top: 10rpx;
    align-items: center;

    .name {
      color: #838282;
      margin-right: 10rpx;
    }

    .tel {
      color: #838282;
    }
  }

  .curriulum_title {
    width: auto;
    font-size: 34rpx;
    font-weight: 700;
    float: left;
    margin-right: 10rpx;
    color: #333;
    line-height: 50rpx;
    letter-spacing: 2rpx;
  }

  .normal_box {
    margin-left: 5rpx;
    width: calc(100% - 120rpx);
  }

  .goods_box {
    padding: 20rpx 20rpx;
    display: flex;
    align-items: center;
  }

  .rightArrow {
    margin-left: 40rpx;
    width: 40rpx;
    height: 40rpx;
    // position: absolute;
    // right: 30rpx;
  }
}
.feng {
  background-color: #fafafa;
  margin: 0rpx 22rpx 0 0;
  height: 140rpx !important;
  width: 140rpx !important;
  float: left;
  border-radius: 14rpx;
  // border: 1rpx solid #e9e9e9;
}
.booknameleft {
  font-size: 32rpx;
  width: calc(100% - 100rpx);
  color: #070707;
  letter-spacing: 0.5rpx;
  font-weight: 600;
}
.order_item {
  padding: 20rpx 20rpx;
  border-top: 1px solid #eee;
}
/deep/.goods_nav_box {
  .left {
    margin-top: -10rpx;
    width: auto;
    height: auto;
    position: relative;
    // overflow: hidden;
  }
}
.delisted {
  background-color: red;
  color: #fff;
  // padding: 2rpx 4rpx;
  position: absolute;
  border-radius: 4rpx;
  font-size: 22rpx;
  width: 100rpx;
  text-align: center;
  height: 40rpx;
  line-height: 40rpx;
  left: calc((100% - 100rpx) / 2);
  top: calc((100% - 40rpx) / 2);
}
.order_bottom_box {
  margin-left: 20rpx;

  .number {
    font-size: 28rpx;
    margin-right: 15rpx;
    margin-top: 5rpx;
  }

  .price {
    .total {
      font-size: 38rpx;
      color: red;
    }
  }
}
</style>
