<style lang="scss" scoped>
.allorderdetails {
  width: 100%;
  height: 100vh;
  background: #ffffff;
  .box-top {
    width: 100%;
    height: 65px;
    background: #ffffff;
    box-shadow: 0px 1px 8px 0px rgba(76, 76, 76, 0.13);
    border-radius: 0px 0px 30px 30px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 800;
    color: #111111;
    image {
      width: 27px;
      height: 27px;
      margin-right: 10px;
    }
  }
  .box-top2 {
    width: 100%;
    padding: 0 20px;
    margin-top: 20px;
    .box-top2-text {
      font-size: 16px;
      font-weight: 800;
      color: #111111;
      line-height: 22px;
    }
  }
  .order_xu {
    width: 100%;
    height: 14px;
    border-bottom: 1px dashed #e6e6e6;
  }
  .box-center {
    width: 100%;
    padding: 0 20px;
    .hotelbox {
      display: flex;
      margin-top: 15px;
      .hotelbox-r {
        width: calc(100vw - 50px - 80px);
        font-size: 12px;
        .text-t {
          width: 100%;
        }
      }
    }
    .box-top-car {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 0 10px;
      justify-content: space-between;
      font-size: 16px;
      font-weight: 800;
      color: #111111;
      margin-top: 15px;
      .onetext {
        // overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
        width: calc((100vw - 40px - 40px) / 2);
        text-align: center;
      }
      .box-top-c {
        width: 113px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .box-top-ct {
          width: 30px;
          height: 21px;
          border-radius: 2px;
          background: rgba(223, 190, 110, 0.1);
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #dfbe6e;
          text-align: center;
          line-height: 21px;
          margin-bottom: 4px;
        }
      }
    }
  }
  .box-c-car {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0px 1px 8px 0px rgba(76, 76, 76, 0.13);
    padding: 0 15px;
    margin-top: 15px;
    .box-c-caritem {
      width: 100%;
      min-height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .box-c-caritem-l {
        font-size: 12px;
        color: rgba(8, 9, 14, 0.6);
        width: 130rpx;
      }
      .box-c-caritem-r {
        font-size: 14px;
        color: #08090e;
        font-weight: bold;
        width: 1;
        flex: 1;
        text-align: right;
      }
      .box-c-caritem-r2 {
        font-size: 14px;
        color: #08090e;
        font-weight: bold;
      }
    }
  }
  .xian {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
  }
  .btn-box {
    display: flex;
    flex-direction: row-reverse;
    height: 45px;
    padding: 5px 20px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    border-top: 1px solid #f5f5f5;
    background: #fff;
  }
  .kefu {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 5px;
  }
  .contButton {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
  }
}
</style>
<template>
  <view class="allorderdetails">
    <view class="box-top">
      <image
        v-if="OrderInfo.OrderStatus == 1 || OrderInfo.OrderStatus == 2"
        src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/orderdfk.png"
      ></image>
      <image
        v-if="OrderInfo.OrderStatus == 4 || OrderInfo.OrderStatus == 5"
        src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/orderquxiao.png"
      ></image>
      <image
        v-if="OrderInfo.OrderStatus == 3"
        src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/orderwancheng.png"
      ></image>
      <span>{{ OrderInfo.OrderStatusName }}</span>
    </view>
    <view class="box-top2">
      <view
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <span class="box-top2-text">{{ OrderInfo.OrderTypeName }}</span>
        <view style="display: flex; align-items: center">
          <span
            class="box-top2-text"
            style="font-size: 12px; font-weight: normal"
            >{{ OrderInfo.OrderNo }}</span
          >
          <view style="margin-left: 5px">
            <u-button
              size="mini"
              shape="circle"
              @click="paste(OrderInfo.OrderNo)"
              >复制</u-button
            >
          </view>
        </view>
      </view>

      <view class="order_xu"></view>
    </view>
    <!-- 酒店 -->
    <view class="box-center" v-if="OrderInfo.OrderType == 1">
      <view v-for="(x, y) in OrderInfo.HotelList" :key="y">
        <view class="hotelbox">
          <image
            :src="getIconLink(x.HotelImage)"
            style="
              width: 80px;
              height: 80px;
              border-radius: 8px;
              margin-right: 10px;
            "
          ></image>
          <view class="hotelbox-r">
            <view class="text-t">{{ x.HotelName }}</view>
            <view>数量:{{ x.RoomNumber }}</view>
            <view>单价:￥{{ x.Unit_Price }}元</view>
          </view>
        </view>
        <view class="box-c-car">
          <view class="box-c-caritem">
            <view class="box-c-caritem-l">入店时间</view>
            <view class="box-c-caritem-r">{{ x.StartDate }}</view>
          </view>
          <view class="box-c-caritem">
            <view class="box-c-caritem-l">离店时间</view>
            <view class="box-c-caritem-r">{{ x.EndDate }}</view>
          </view>
          <view class="box-c-caritem">
            <view class="box-c-caritem-l">到店时间</view>
            <view class="box-c-caritem-r">{{ x.ArrivalTime }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 餐厅 -->
    <view class="box-center" v-if="OrderInfo.OrderType == 2">
      <view v-for="(x, y) in OrderInfo.DiningList" :key="y">
        <view class="hotelbox">
          <image
            :src="getIconLink(x.DiningImg)"
            style="
              width: 80px;
              height: 80px;
              border-radius: 8px;
              margin-right: 10px;
            "
          ></image>
          <view class="hotelbox-r">
            <view class="text-t">{{ x.MealName }}</view>
            <view>数量:{{ x.PeopleNumber }}</view>
            <view>单价:￥{{ x.Unit_Price }}元</view>
            <view>就餐时间:{{ x.Date }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 门票 -->
    <view class="box-center" v-if="OrderInfo.OrderType == 3">
      <view v-for="(x, y) in OrderInfo.TicketList" :key="y">
        <view class="hotelbox">
          <image
            :src="getIconLink(x.TicketImg)"
            style="
              width: 80px;
              height: 80px;
              border-radius: 8px;
              margin-right: 10px;
            "
          ></image>
          <view class="hotelbox-r">
            <view class="text-t">{{ x.TicketName }}</view>
            <view>数量:{{ x.PeopleNumber }}</view>
            <view>单价:￥{{ x.Unit_Price }}元</view>
            <view>入园时间:{{ x.Date }}</view>
          </view>
        </view>
        <view
          v-if="x.GuestList.length > 0"
          class="box-c-caritem-r"
          style="text-align: left; font-weight: bold"
          >携带以下全部证件 直接进园</view
        >
        <view class="box-c-car" v-if="x.GuestList.length > 0">
          <view
            class="box-c-caritem"
            v-for="(n, m) in x.GuestList"
            :key="m"
            :style="{
              'justify-content': 'space-between',
              'border-bottom':
                x.GuestList.length - 1 != m ? '1px solid #E2E2E2' : '',
            }"
          >
            <view class="box-c-caritem-r2">{{ n.Name }}</view>
            <view class="box-c-caritem-r2"
              >{{ n.IdCard.substring(0, 5) }}***{{
                n.IdCard.substring(n.IdCard.length - 4, n.IdCard.length)
              }}</view
            >
            <view class="box-c-caritem-r2">{{ n.Mobile }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 专车 -->
    <view class="box-center" v-if="OrderInfo.OrderType == 4">
      <view v-for="(x, y) in OrderInfo.CarList" :key="y">
        <view class="box-top-car">
          <div class="onetext">{{ x.StartCityName }}</div>
          <view class="box-top-c">
            <!-- <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622098352000_930.png" mode="widthFix" style="width: 30px;height: auto;"></image> -->
            <image
              v-if="OrderInfo.IsGoBack == 2"
              src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/zhuanghuan.png"
              mode="aspectFill"
              style="width: 18px; height: 18px"
            ></image>
            <image
              v-if="OrderInfo.IsGoBack == 1 && y == 0"
              src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/gocar.png"
              mode="aspectFill"
              style="width: 18px; height: 18px"
            ></image>
            <image
              v-if="OrderInfo.IsGoBack == 1 && y == 1"
              src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/returncar.png"
              mode="aspectFill"
              style="width: 18px; height: 18px"
            ></image>
          </view>
          <div class="onetext">{{ x.ArriveCityName }}</div>
        </view>
        <view class="box-c-car">
          <view class="box-c-caritem">
            <view class="box-c-caritem-l">上车地点</view>
            <view
              class="box-c-caritem-r"
              @click="goopenlocation(x.DepartLonlat, x.DepartAddress)"
              style="
                display: flex;
                align-items: flex-start;
                justify-content: flex-end;
              "
            >
              <u-icon name="location-o" size="34"></u-icon>
              {{ x.DepartAddress }}
            </view>
          </view>
          <view class="box-c-caritem">
            <view class="box-c-caritem-l">下车地点</view>
            <view
              class="box-c-caritem-r"
              @click="goopenlocation(x.ArriveLonlat, x.ArriveAddress)"
              style="
                display: flex;
                align-items: flex-start;
                justify-content: flex-end;
              "
            >
              <u-icon name="location-o" size="34"></u-icon>
              {{ x.ArriveAddress }}
            </view>
          </view>
          <view class="xian"></view>
          <view class="box-c-caritem">
            <view class="box-c-caritem-l">出行时间</view>
            <view class="box-c-caritem-r"
              >{{ x.Date }} {{ x.DepartureTime }}</view
            >
          </view>
          <view class="box-c-caritem">
            <view class="box-c-caritem-l">单价</view>
            <view class="box-c-caritem-r">￥{{ x.Unit_Price }}元</view>
          </view>
        </view>
      </view>
    </view>
    <view class="box-center" v-if="OrderInfo.OrderType == 4">
      <view class="box-c-car">
        <view
          class="box-c-caritem"
          v-if="OrderInfo.CarList[0].PeopleNumber > 0"
        >
          <view class="box-c-caritem-l">成人</view>
          <view class="box-c-caritem-r"
            >{{ OrderInfo.CarList[0].PeopleNumber }}人</view
          >
        </view>
        <view class="box-c-caritem" v-if="OrderInfo.CarList[0].ChildNumber > 0">
          <view class="box-c-caritem-l">儿童</view>
          <view class="box-c-caritem-r"
            >{{ OrderInfo.CarList[0].ChildNumber }}人</view
          >
        </view>
      </view>
    </view>

    <view class="box-center">
      <view class="box-c-car">
        <view class="box-c-caritem">
          <view class="box-c-caritem-l">联系人</view>
          <view class="box-c-caritem-r">{{ OrderInfo.Consignee }}</view>
        </view>
        <view class="box-c-caritem">
          <view class="box-c-caritem-l">联系电话</view>
          <view class="box-c-caritem-r">{{ OrderInfo.Mobile }}</view>
        </view>
        <view
          class="box-c-caritem"
          v-if="OrderInfo.BuyerMessage && OrderInfo.BuyerMessage != ''"
        >
          <view class="box-c-caritem-l">留言</view>
          <view class="box-c-caritem-r">{{ OrderInfo.BuyerMessage }}</view>
        </view>
        <view class="box-c-caritem">
          <view class="box-c-caritem-l">创建时间</view>
          <view class="box-c-caritem-r">{{ OrderInfo.CreateDate }}</view>
        </view>
        <view class="box-c-caritem">
          <view class="box-c-caritem-l">付款方式</view>
          <view class="box-c-caritem-r">{{ OrderInfo.PaymentWayName }}</view>
        </view>
        <!-- <view class="box-c-caritem" >
					<view class="box-c-caritem-l">应收</view>
					<view class="box-c-caritem-r">￥{{OrderInfo.PreferPrice}}元</view>
				</view> -->
        <view class="box-c-caritem">
          <view class="box-c-caritem-l">金额</view>
          <view class="box-c-caritem-r"
            ><span style="color: #f20707"
              >￥{{ OrderInfo.Income }}元</span
            ></view
          >
        </view>
      </view>
    </view>
    <view style="width: 100%; height: 80px"></view>
    <view class="btn-box">
      <view class="kefu" style="position: relative">
        <u-icon name="service-o" color="#111" size="24rpx"></u-icon>
        <span style="margin-left: 3px">客服</span>

        <button open-type="contact" class="contButton"></button>
      </view>
      <view class="item" v-if="OrderInfo.OrderStatus == 1">
        <u-button
          shape="circle"
          size="medium"
          @click.stop="queren(OrderInfo)"
          :custom-style="customStyle2"
          >待付款</u-button
        >
      </view>
      <view
        class="item"
        v-if="
          OrderInfo.OrderStatus == 3 ||
          OrderInfo.OrderStatus == 4 ||
          OrderInfo.OrderStatus == 5
        "
      >
        <u-button
          shape="circle"
          size="medium"
          @click.stop="onemoreorder(OrderInfo)"
          :custom-style="customStyle2"
          >再来一单</u-button
        >
      </view>
      <view
        @click.stop="getCancel(OrderInfo)"
        class="item"
        v-if="
          OrderInfo.IsApplyForCancel != 1 &&
          (OrderInfo.OrderStatus == 1 ||
            OrderInfo.OrderStatus == 2 ||
            OrderInfo.OrderStatus == 3) &&
          getquxiao(OrderInfo)
        "
      >
        <u-button shape="circle" size="medium" :custom-style="customStyle"
          >取消订单</u-button
        >
      </view>

      <view
        class="item"
        style="
          line-height: 34px;
          font-size: 16px;
          color: gray;
          font-weight: 600;
        "
        v-if="OrderInfo.OrderStatus == 4"
      >
        已取消
      </view>
      <view
        class="item"
        style="
          line-height: 34px;
          font-size: 16px;
          color: gray;
          font-weight: 600;
        "
        v-if="OrderInfo.OrderStatus == 5"
      >
        待处理
      </view>
    </view>
    <u-popup v-model="showModal" mode="center" length="80%">
      <view
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          background: #fff;
        "
      >
        <view
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            height: 70px;
          "
        >
          <Text>是否取消订单？</Text>
        </view>
        <view
          style="
            display: flex;
            flex-direction: column;
            height: 80px;
            margin-left: 15px;
            width: 100%;
          "
          v-if="OrderInfo.OrderStatus != 1"
        >
          <Text style="margin-left: 10px; margin-top: 5px">备注</Text>
          <input
            class="uni-input inputM"
            style="margin-left: 10px; margin-top: 5px"
            v-model="Cancelmsg.Remark"
            placeholder="输入备注"
          />
        </view>
        <view
          style="
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 50px;
            border-top: 1px solid #f5f5f5;
            width: 100%;
          "
        >
          <view
            style="
              width: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
            "
            @click="showModal = false"
          >
            <Text>取消</Text>
          </view>
          <view
            style="
              width: 50%;
              color: #2979ff;
              display: flex;
              align-items: center;
              justify-content: center;
            "
            @click="confirm"
          >
            <Text>确定</Text>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pageTitle: "我的订单",
      mainColor: "",
      OrderId: 0,
      OrderInfo: {}, //详情数据
      customStyle: {
        marginLeft: "20px",
        padding: "0 30rpx",
      },
      customStyle2: {
        marginLeft: "20px",
        padding: "0 30rpx",
        background: "#111111",
        color: "#FFF",
      },
      Cancelmsg: {
        OrderId: 0,
        Type: 0,
        Remark: "",
      },
      showModal: false,
    };
  },
  onLoad(options) {
    if (options && options.OrderId) {
      this.OrderId = options.OrderId;
      this.getMyOrderInfo();
    }
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
    this.mainColor = this.$uiConfig.mainColor;
  },
  methods: {
    getMyOrderInfo() {
      this.request2(
        {
          url: "/api/AppletOrder/GetMyDmcOrderInfo",
          data: { OrderId: this.OrderId },
        },
        (res) => {
          if (res.resultCode == 1) {
            this.OrderInfo = res.data;
          }
        },
        (err) => {}
      );
    },
    goopenlocation(x, addr) {
      console.log(y);
      uni.openLocation({
        latitude: Number(x.split(",")[1]),
        longitude: Number(x.split(",")[0]),
        name: addr,
        address: addr,
        success: function () {
          console.log("success");
        },
        fail: function (err) {
          console.log(err);
        },
      });
    },
    getIconLink(url) {
      //https的处理
      let str = "";
      if (url && url != "") {
        if (url.indexOf("https") != -1) {
          str = url;
        } else {
          str = url.replace(/^http:\/\//i, "https://");
        }
        return str;
      }
    },
    getquxiao(item) {
      //判断是否显示取消
      let show = true;
      if (item.OrderType == 1) {
        //酒店
        show = this.getquxiaoshow(item.HotelList);
      } else if (item.OrderType == 2) {
        //餐食
        show = this.getquxiaoshow(item.DiningList);
      } else if (item.OrderType == 3) {
        //景点
        show = this.getquxiaoshow(item.TicketList);
      } else if (item.OrderType == 4) {
        //专车
        show = this.getquxiaoshow(item.CarList);
      }
      return show;
    },
    getquxiaoshow(list) {
      let show = true;
      list.map((x) => {
        if (new Date() >= new Date(x.Date)) {
          show = false;
          return;
        }
      });
      return show;
    },
    getCancel(e) {
      //取消订单
      this.showModal = true;
      (this.Cancelmsg.Remark = ""), (this.Cancelmsg.OrderId = e.OrderId);
      this.Cancelmsg.Type = e.OrderStatus;
    },
    getCancel(e, index) {
      //取消订单
      this.showModal = true;
      (this.Cancelmsg.Remark = ""), (this.index = index);
      this.item = e;
      this.Cancelmsg.OrderId = e.OrderId;
      this.Cancelmsg.Type = e.OrderStatus;
    },

    queren(data) {
      let url = "/api/WeChatPay/GetDmcPayInfo";
      let GoodsName = "";
      if (data.OrderType == 1) {
        GoodsName = data.HotelList[0].HotelName;
      } else if (data.OrderType == 2) {
        GoodsName = data.DiningList[0].MealName;
      } else if (data.OrderType == 3) {
        GoodsName = data.TicketList[0].TicketName;
      } else if (data.OrderType == 4) {
        GoodsName =
          data.CarList[0].DepartAddress + "-" + data.CarList[0].ArriveCityName;
      }
      GoodsName = GoodsName.slice(0, 10);
      this.request2(
        {
          url: url,
          data: {
            OrderId: data.OrderId,
            GoodsName: GoodsName,
            OrderPayType: 1,
            OpenId: uni.getStorageSync("mall_UserInfo").OpenId,
          },
        },
        (res) => {
          let orderInfo = JSON.parse(res.data);
          console.log(orderInfo);
          this.Pay(orderInfo);
        }
      );
    },
    Pay(orderInfo) {
      let that = this;
      uni.requestPayment({
        provider: "wxpay",
        timeStamp: orderInfo.timeStamp,
        nonceStr: orderInfo.nonceStr,
        package: orderInfo.package,
        signType: orderInfo.signType,
        paySign: orderInfo.sign,
        success: function (res) {
          console.log("success", res);
          uni.showToast({
            title: "支付成功",
          });
          // that.getMyOrderInfo()
          uni.redirectTo({
            url:
              "/pages/jiuzhai/paysuccess?PreferPrice=" +
              that.OrderInfo.PreferPrice,
          });
        },
        fail: function (err) {
          console.log("fail:", err);
          uni.showToast({
            title: "支付失败",
            icon: "none",
          });
        },
      });
    },
    confirm() {
      //确认取消
      let that = this;
      if (that.Cancelmsg.Type != 1 && that.Cancelmsg.Remark == "") {
        uni.showToast({
          title: "备注不能为空",
          icon: "none",
        });
        return;
      }
      uni.requestSubscribeMessage({
        tmplIds: [],
        complete(res) {
          that.request2(
            {
              url: "/api/AppletOrder/CancelAppletMyOrder",
              data: that.Cancelmsg,
            },
            (res) => {
              that.showModal = false;
              that.getMyOrderInfo();
            }
          );
        },
      });
    },
    onemoreorder(data) {
      //再来一单的处理

      if (data.OrderType == 1) {
        //酒店
        uni.navigateTo({
          url: "/pages/hotel/list?Name=" + data.HotelList[0].HotelName,
        });
      } else if (data.OrderType == 2) {
        //餐厅
        uni.navigateTo({
          url: "/pages/restaurant/list?Name=" + data.DiningList[0].DiningName,
        });
      } else if (data.OrderType == 3) {
        //门票
        uni.navigateTo({
          url:
            "/pages/ticketCoupons/list?Name=" +
            data.TicketList[0].TitekCounponName,
        });
      } else if (data.OrderType == 4) {
        //车
        let obj = {
          StartCityId: data.CarList[0].StartCityId,
          StartCityType: data.CarList[0].StartCityType,
          ArriveCityId: data.CarList[0].ArriveCityId,
          ArriveCityType: data.CarList[0].ArriveCityType,
          StartCityName: data.CarList[0].StartCityName,
          ArriveCityName: data.CarList[0].ArriveCityName,
        };
        console.log(obj);
        uni.navigateTo({
          url:
            "/pages/guidecar/index?obj=" +
            encodeURIComponent(JSON.stringify(obj)),
        });
      }
    },
    paste(value) {
      uni.setClipboardData({
        data: value,
      });
    },
  },
};
</script>


