fangliaoxiaochengxv/subPages/service/settlement.vue

<template>
  <view style="width: 100%;height: 100%" >
    <view class="common-page">
      <view class="header-box" :style="{
				paddingBottom: '30rpx',
		  }" id="headerBox" ref="headerBox">
        <view class="navbar-box display-flex-content-center" :style="{
					height: `${topData.height}px`,
					paddingTop: `${topData.top}px`,
					paddingBottom: '40rpx',
					color: '#666666',
					fontSize: '34rpx',
					fontWeight: 'bold'
				}">
          <view @click="toHome" style="position: absolute;left:-3rpx">
            <u-icon size="20" name="arrow-left" color="#666666"></u-icon>
          </view>
          <text></text>
        </view>
        <view class="success-con  fs16">
          <view class="display-flex-content-center">
            <u-icon size="50rpx" name="checkmark-circle-fill" color="#E2B98E" ></u-icon>
            <text class="fw700 ml5 success-title-text">支付成功</text>
          </view>
        </view>
      </view>
      <view class="list-item display-flex-content-center mt10" style="position: relative">
        <image
            :src="orderInfo.goods_cover"
            class="course-image"
        ></image>
        <view class="list-item-content ml15">
          <view class="list-item-content-title mb6">
            {{ orderInfo.goods_name }}
          </view>
          <view class="list-item-content-read display-flex">
            <text class="fw700 color-333  fs11 ">￥
              <text class="fw700 color-333  fs16 mb8">{{ orderInfo.amount_total }}</text>
            </text>
          </view>
        </view>
        <view class="fs12 lh18" style="position: absolute;right: 30rpx;bottom: 30rpx;color: #C29556 ">已支付</view>
      </view>
      <view class="display-flex mt15 mb10">
        <view class="tubiao mr10">
        </view>
        <view class="title">
          预约信息
        </view>
      </view>
      <view class="list-item">
        <view class="display-flex-between" >
          <text class="left-title">预约人</text>
          <view class="h-view">
            {{orderInfo.user_name}}
          </view>
        </view>
        <u-divider  ></u-divider>
        <view class="display-flex-between" >
          <text class="left-title">技师</text>
          <view class="h-view" :style="[{color:'#333333',fontSize: '15px'}]">
            {{orderInfo.tech_name || ""}}
          </view>
        </view>
        <u-divider  ></u-divider>
        <view class="display-flex-between" >
          <text class="left-title">联系方式</text>
          <view class="h-view" >
            {{orderInfo.user_phone}}
          </view>
        </view>
        <u-divider  ></u-divider>
        <view class="display-flex-between" >
          <text class="left-title">人数</text>
          <view class="h-view">
            {{orderInfo.order_num}}人
          </view>
        </view>
        <u-divider  ></u-divider>
        <view class="display-flex-between" >
          <text class="left-title">预约时间</text>
          <view class="h-view">
            {{orderInfo.order_date}} &nbsp;{{orderInfo.order_time}}
          </view>
        </view>
        <u-divider  ></u-divider>
        <view class="display-flex-between" >
          <text class="left-title">备注</text>
          <view class="h-view">
            {{orderInfo.order_remark}}
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-navigation">
      <view  class="activity-button"   :style="{background:'#F9F2E6',color:'#C29556',border: '1rpx solid #F9F2E6'}" @click="yvyueOrderCancel()">取消预约订单</view>
      <view  class="activity-button"  @click="setyvyueOrder()">修改预约信息</view>
    </view>
  </view>

</template>
<script>
import {getGoodsDetail} from "@/common/api";
import {getYvyueOrderInfo,yvyueOrderCancel} from "@/common/api/yvyeService";


export default {

  data() {
    return {
      courseInfo: {},
      orderInfo: {},
      orderId: 0,
      order_no:"",
      goods_code:"",
      topData: {
        top: 0,
        height: 0
      },

    }
  },
  onLoad(options) {
    this.goods_code = options.code
    this.orderId = options.orderId
  },
  onShow() {
    // this.getCourseDetail()
    this.getYvyueOrderInfo()
    const topData = uni.getMenuButtonBoundingClientRect()
    this.topData.top = topData.top
    this.topData.height = topData.height
  },
  methods: {
    getCourseDetail() {
      getGoodsDetail({goods_code: this.goods_code}).then(({data}) => {
        this.courseInfo = data.goods
      });
    },
    getYvyueOrderInfo() {
      getYvyueOrderInfo({id: this.orderId}).then(({data}) => {
        this.orderInfo = data
        this.order_no=data.order_no
      });
    },
    yvyueOrderCancel() {
      yvyueOrderCancel({order_no: this.order_no}).then(({data}) => {
        uni.showToast({
          title:"取消成功",
          icon: 'none'
        })
        uni.navigateBack({
          delta: 1
        })
      });
    },
    setyvyueOrder() {
      uni.navigateTo({
        url: `/subPages/service/serviceSave?code=${this.goods_code}&setid=${this.orderId}`
      })
    },
    toHome() {
      uni.navigateBack({
        delta: 1
      })
    },

  }
}
</script>

<style lang="scss" scoped>
.common-page {
  height: 100vh;
  overflow-y: auto;
  padding: 30rpx;
  color: #2C2C2C;
  padding-bottom: 188rpx;
  box-sizing: border-box;
  background-color: #F8F9FA;
  .list-item {
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    width: calc(100% - 54rpx);
    padding: 30rpx 27rpx;

    &-content {
      width: calc(100% - 210rpx);

      &-title {
        width: 100%;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏溢出的文本 */
        text-overflow: ellipsis;
      }
    }

    .course-image {
      width: 176rpx;
      height: 176rpx;
      border-radius: 10rpx;
    }

    .h-view {
      flex: 1;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
    }

    .left-title {
      font-size: 28rpx;
    }
  }
}
.tubiao {
  width: 6rpx;
  height: 28rpx;
  background: #C29556;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
}

.title {
  font-weight: 500;
  font-size: 28rpx;
  color: #333333;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}




.navbar-box {
  position: relative;
}
.success-title-text{
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 40rpx;
  color: #333333;
  line-height: 50rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
  // 加粗
  font-weight: bold;
}

.bottom-navigation{
  position: fixed;
  // 文字垂直居中
  display: flex;
  align-items: center;
  bottom: 0;
  height: 100rpx;
  width: calc(100% - 40rpx);
  background: #FFFFFF;
  box-shadow: 0rpx -2rpx 0rpx 0rpx #F1F3F6;
  border-radius: 24rpx 24rpx 0rpx 0rpx;
  border: 0rpx solid #979797;
  padding: 20rpx 20rpx 68rpx 20rpx ;
  z-index: 2;
  .activity-button {
    width: 336rpx;
    height: 84rpx;
    background: linear-gradient(315deg, #CA9359 0%, #E2B98E 100%);
    border-radius: 292rpx 292rpx 292rpx 292rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #FFFFFF;
    line-height: 36rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
    // 文字垂直居中
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rpx 9rpx;
  }
}



</style>