fangliaoxiaochengxv/subPages/paySuccess/payCourseSuccess.vue

<template>
  <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: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 fs14 mtr20 mb20">我们会在24小时内与您联系，您也可以加客服微信~</view>
        <view style="display: flex;	align-items: center;  justify-content: center;">
          <van-image
              id="qrCodeImage"
              height="240rpx"
              :src="cs_wechat_img"
              width="240rpx"
              @click="recognizeQRCode"
          />
        </view>
        <view class="text-center fs14 mtr20">长按图片添加客服</view>
      </view>
    </view>
    <view class="content-box">
      <!-- 订单编号 -->
      <view class="common-card">
        <text style="color: #888888">订单编号: </text>
        <text style="color: #333333;margin-left: 12rpx"> {{ detailData.order_no}}</text>
        <u-divider  :dashed="true"></u-divider>
        <!-- 已选商品 -->
        <view class="display-flex-center" v-for="(item, index) in goodsList" :key="index">
          <image style="width: 155rpx; height: 155rpx; border-radius: 10rpx;margin-right: 30rpx;flex-shrink: 0;"
                 :src="item.goods_cover" mode="aspectFill">
          </image>
          <view style="width: 100%;">
            <view class="display-flex-between ">
              <text class="goods-name">{{item.goods_name}}</text>
            </view>
            <view class="display-flex-between " style="margin-top: 30rpx">
              <text class="goods-price">￥<text style="font-family: D-DIN-Bold;font-weight: 700;   font-size: 36rpx;">{{item.price_selling}}</text></text>
            </view>
          </view>
        </view>

        <u-divider  :dashed="true"></u-divider>
        <!-- 运费信息 -->
        <view class="display-flex-center mb15"  style="justify-content: space-between;">
          <text class="color-71 flex-shrink" style="color: #888888">用户信息：</text>
          <text class=" text-overflow-single" style="color: #333333;">
            {{truckData.address_name}}&nbsp;&nbsp;{{truckData.address_phone}}
          </text>
        </view>
        <view class="display-flex-center mb15"  style="justify-content: space-between;">
          <text class="color-71 flex-shrink" style="color: #888888">支付金额：</text>
          <text class=" text-overflow-single" style="color: #333333;">￥{{detailData.payment_amount}}</text>
        </view>
        <view class="display-flex-center" style="justify-content: space-between;">
          <text class="color-71 flex-shrink" style="color: #888888">支付时间：</text>
          <text class="text-overflow-single" style="color: #333333;">{{detailData.payment_datetime}}</text>
        </view>
      </view>
    </view>


    <view style="margin-top: 40rpx;width: 100%;">
      <view class="btn-gray-border" @click="toHome"><span>返回首页</span></view>
    </view>


  </view>
</template>
<script>
export default {

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

    }
  },
  onLoad(options) {
    this.orderNo = options.orderNo
    const configs = uni.getStorageSync("configs");
    this.cs_wechat_img =configs.cs_wechat_img;
    // 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
      })
    },
    recognizeQRCode() {
      if (!this.cs_wechat_img) {
        uni.showToast({
          title: '二维码图片地址为空',
          icon: 'none',
          duration: 3000
        });
        return;
      }
      // 预览图片
      uni.previewImage({
        urls: [this.cs_wechat_img],
        success: () => {
        },
        fail: (err) => {
          console.error('预览图片失败:', err);
          uni.showToast({
            title: '预览图片失败',
            icon: 'none',
            duration: 3000
          });
        }
      });
    },
    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;
  background-color: #F8F9FA;

}

.coupon-list {
  padding: 30rpx 20rpx;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
}
.btn-gray-border{
  width: 560rpx;
  height: 88rpx;
  margin: 0 auto;
  background: linear-gradient( 315deg, #CA9359 0%, #E2B98E 100%);
  border-radius: 292rpx 292rpx 292rpx 292rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 400;
  font-size: 32rpx;
  color: #FFFFFF;
  line-height: 36rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.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;
}
.goods-price{
  font-family: D-DIN-Regular;
  font-weight: 400;
  font-size: 24rpx;
  color: #333333;
  line-height: 30rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.content-box {
  padding: 20rpx;
}

.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;
}
.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>