fanxing-shop/pages/order/success.vue

<!-- 支付成功 -->
<template>
  <view class="success" :style="{ background: 'url(' + bgImg + ') #F4F5F9' }">
    <view class="success_status">
      <view class="status flex aic">
        <image class="pay_img" :src="payImg"></image>
        <view class="status_text">支付成功</view>
      </view>
      <view class="status_tip">套餐购买成功 请查看账单明细</view>
    </view>
    <view class="success_content">
        <view class="success_info">
            <view class="">
                <view class="success_item flex jcsb aic">
                    <view class="flex aic">
                        <view class="label">收件地址</view>
                        <text class="bold">123</text>
                    </view>
                    <view class="success_btn" @click="copyText()">复制</view>
                  </view>

                    <view class="success_item flex aic">
                        <view class="label">收件人</view>
                        <text>234</text>
                    </view>
            </view>
        </view>
        <view class="line" :style="{ background: `url(${successImg}) no-repeat` }">
            <view class="line-circle"></view>
        </view>
        <view class="detail">
            <view class="detail_item flex aic jcsb">
                <text>订单金额</text>
                <view class="datas flex">
                    <text>2500元</text>
                </view>
            </view>
            <view class="detail_item flex aic jcsb">
                <text>套餐名称</text>
                <view class="datas flex">
                    <text>A类套餐</text>
                    <view class="copy">详情</view>
                </view>
            </view>
            <view class="detail_item flex aic jcsb">
                <text>套餐内容</text>
                <view class="datas flex">
                    <text>50条 (每条15-20s)</text>
                </view>
            </view>
            <view class="detail_item flex aic jcsb">
                <text>支付方式</text>
                <view class="datas flex">
                    <text>微信支付</text>
                </view>
            </view>
            <view class="detail_item flex aic jcsb">
                <text>订单编号</text>
                <view class="datas flex">
                    <text>12346789</text><view class="copy" @click="copyText()">复制</view>
                </view>
            </view>
            <view class="detail_item flex aic jcsb">
                <text>订单时间</text>
                <view class="datas flex">
                    <text>123</text>
                </view>
            </view>
        </view>
    </view>
    <view class="btns">
      <view class="bind" @click="bindCard">查看详情</view>
      <view class="back" @click="toHome">返回首页</view>
    </view>
  </view>
</template>

<script>
import { copy } from "@/utils/utils";
export default {
  components: {},
    data() {
      return {
        bgImg: "https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/bg_top%403x.png",
        payImg: "https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_paysuccess.png",
        successImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/img_quekou.png'
      };
    },
  computed: {},
  watch: {},
  methods: {
    // 复制
    copyText(num){
      copy(num)
    }
  },
  created() {

  },
  mounted() {

  },
}
</script>
<style lang='scss' scoped>
.success{
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top;
    padding: 0 24rpx;
  .success_status{
    margin-top: 64rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .pay_img{
      width: 48rpx;
      height: 48rpx;
      margin-left: 16rpx;
    }
    .status_text{
      font-weight: 500;
      font-size: 40rpx;
      color: #0D121A;
    }
    .status_tip{
      font-weight: 400;
      font-size: 28rpx;
      color: #9EA3B1;
      margin-top: 20rpx;
    }
  }
  .success_content{
        border-radius: 32rpx;
        overflow: hidden;
        margin-top: 64rpx;
        .success_info{
            background-color: #fff;
            padding: 36rpx 32rpx 8rpx;
            .success_item{
                margin-bottom: 20rpx;
                .label{
                    min-width: 120rpx;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #9EA3B1;
                    margin-right: 16rpx;
                }
                text{
                    font-size: 32rpx;
                    color: #0D121A;
                }

            }
            
        }
        .success_btn{
          width: 80rpx;
          height: 40rpx;
          font-weight: 500;
          background: #F4F5F9;
          border-radius: 48rpx;
          font-size: 24rpx;
          color: #0D121A;
          text-align: center;
          line-height: 40rpx;
        }
        .line{
            width: 100%;
            height: 40rpx;
            background-size: cover !important;
            padding: 0 32rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            .line-circle{
                width: 100%;
                border: 2rpx dashed #EDEDED;
                height: 2rpx;
            }
        }
        .detail{
            background-color: #fff;
            padding: 32rpx 32rpx 40rpx;
            .detail_item {
                margin-bottom: 36rpx;
                text{
                    white-space: nowrap;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #0D121A;
                }
                .datas{
                    .copy{
                        width: 80rpx;
                        height: 40rpx;
                        background: #F4F5F9;
                        border-radius: 48rpx;
                        font-weight: 500;
                        font-size: 24rpx;
                        color: #061714;
                        text-align: center;
                        line-height: 40rpx;
                        margin-left: 16rpx;
                    }
                }
            }
            .detail_item:nth-last-child(1){
                margin-bottom: 0;
            }
        }
        .success_title{
            color: #9DA3A2;
        }
    }
    .btns{
        padding: 96rpx 32rpx;
        view{
            width: 100%;
            height: 84rpx;
            // border-radius: 48rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 32rpx;
        }
        .bind{
            color: #061714;
            margin-bottom: 32rpx;
            font-weight: 500rpx;
            background: linear-gradient( 140deg, #246AF1 0%, #2F98EF 100%);
        }
        .back{
            font-weight: bold;
            background: #FFFFFF;
            // border: 4rpx solid #E7EAEA;
            color: #061714;
        }
    }
    .ml16{
      margin-left: 16rpx;
    }
}
</style>