fangliaoxiaochengxv/subPages/paySuccess/paySuccess.vue

<template>
  <view class="common-page">
    <view class="header-box" :style="{
				paddingBottom: '30rpx',
    backgroundColor: '#F8F9FA'

		  }" 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:30rpx">
          <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 class="text-center mtr20 mt5">我们会在48小时内进行发货，请留意物流信息噢~</view>
      </view>
    </view>
    <view class="content-box mt10">
      <!-- 订单编号 -->
      <view class="common-card">
        <view style="margin: 0 auto;display: flex;align-items: center;justify-content: center;" >
          <text class="goods-price">￥<text style="font-family: D-DIN-Bold;font-weight: 700;   font-size: 40rpx;">{{detailData.payment_amount}}</text></text>
        </view>
        <u-divider  :dashed="true"></u-divider>
        <text style="color: #888888">订单编号: </text>
        <text style="color: #333333;margin-left: 12rpx"> {{ detailData.order_no}}</text>
        <!-- 已选商品 -->
        <view class="display-flex-center" style="margin-top: 30rpx" v-for="(item, index) in goodsList" :key="index">
          <image style="width: 155rpx; height: 155rpx; border-radius: 10rpx;margin-right: 10rpx;flex-shrink: 0;"
                 :src="item.goods_cover" mode="aspectFill">
          </image>
          <view class="ml10">
            <view class="display-flex-center mb10">
              <text class=" text-overflow-single goods-name" >{{item.goods_name}}</text>
            </view>
            <view class="display-flex-center mb10">
              <text class="color-71 flex-shrink">规格：</text>
              <text class=" text-overflow-single">{{item.goods_spec}}</text>
            </view>
            <view class="display-flex-center">
              <text class="color-71 flex-shrink">数量：</text>
              <text class=" text-overflow-single">{{item.stock_sales}}</text>
            </view>
          </view>
        </view>
        <u-divider  :dashed="true"></u-divider>
        <view class="display-flex-center" style="justify-content: space-between;">
          <text class="color-71 flex-shrink">支付时间：</text>
          <text class="fw600 text-overflow-single">{{detailData.payment_datetime}}</text>
        </view>
      </view>
    </view>

    <view style="margin-top: 40rpx;width: 100%;display: flex;justify-content: center;align-items: center;">
      <view class="btn-to-home" @click="toHome"><span>返回首页</span></view>
      <view class="btn-to-order" @click="toOrder"><span>查看订单</span></view>
    </view>

  </view>
</template>

<script>
export default {

  data() {
    return {
      orderNo: '',
      goodsList: [
        {}, {}
      ],
      detailData: {},
      topData: {
        top: 0,
        height: 0
      },

    }
  },
  onLoad(options) {
    this.orderNo = options.orderNo
    // const mData = uni.getStorageSync('selectTaskData') || undefined
  },
  onShow() {
    const topData = uni.getMenuButtonBoundingClientRect()
    this.topData.top = topData.top
    this.topData.height = topData.height
    this.getOrderDetail()
  },
  methods: {
    getOrderDetail() {
      this.$api.orderDetail({ order_no: this.orderNo }).then(res => {
        this.detailData = res.data
        this.goodsList = res.data.items || []
        this.truckData = res.data.truck
      })
    },
    toHome() {
      uni.switchTab({
        url: '/pages/home/index'
      })
    },
    toOrder() {
      uni.navigateTo({
        url: `/subPages/orderDetail/orderDetail?orderNo=${this.detailData.order_no}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.common-page {
  height: 100vh;
  overflow-y: auto;
  // padding: 20rpx;
  color: #2C2C2C;
  padding-bottom: 188rpx;
  box-sizing: border-box;
}

.coupon-list {
  padding: 30rpx 20rpx;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
}

.goods-name{
  font-family: PingFang SC-Bold;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
  // 加粗
  font-weight: bold;
}
.content-box {
  padding: 20rpx;
}
.goods-price{
  font-family: D-DIN-Regular;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  line-height: 48rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
.navbar-box {
  position: relative;
}
.btn-to-home{
  width: 300rpx;
  height: 88rpx;
  background: #FFFFFF;
  border-radius: 292rpx 292rpx 292rpx 292rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 400;
  font-size: 32rpx;
  color: #333333;
  line-height: 36rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
  display: flex;justify-content: center;align-items: center;
}
.btn-to-order{
  margin-left:30rpx;
  width: 300rpx;
  height: 88rpx;
  background: #F4EEE8;
  border-radius: 292rpx 292rpx 292rpx 292rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 400;
  font-size: 32rpx;
  color: #C29556;
  line-height: 36rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
  display: flex;justify-content: center;align-items: center;
}
.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;
}
.text-center{
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #666666;
  line-height: 40rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.good-card {
  padding: 38rpx 22rpx;
  color: #7A7A7A;

  ::v-deep {
    .u-textarea {
      background: #F6F6F6;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      border: none;
      padding: 18rpx;

      .u-textarea__count {
        background-color: transparent !important;
      }
    }
  }
}

.goods-list {
  margin: 0 30rpx;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #F5F5F5;
}

.goods-total {
  justify-content: flex-end;
  margin: 27rpx 20rpx;
}
</style>