123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310 |
- <!-- 支付成功 -->
- <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">{{ orderInfo.email }}</text>
- </view>
- <!-- <view class="success_btn" @click="copyText()">复制</view>-->
- </view>
- <view class="success_item flex aic">
- <view class="label">收件人</view>
- <text>{{ orderInfo.recipientName }}({{orderInfo.contactPhone}})</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>{{orderInfo.totalAmount}}元</text>
- </view>
- </view>
- <view class="detail_item flex aic jcsb">
- <text>套餐名称</text>
- <view class="datas flex">
- <text>{{ orderInfo.packageName }}</text>
- <!-- <view class="copy">详情</view> -->
- </view>
- </view>
- <view class="detail_item flex aic jcsb">
- <text>套餐内容</text>
- <view class="datas flex">
- <text>{{orderInfo.quantity}}条</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>{{ orderInfo.orderNumber }}</text>
- <view class="copy" @click="copyText()">复制</view>
- </view>
- </view>
- <view class="detail_item flex aic jcsb">
- <text>订单时间</text>
- <view class="datas flex">
- <text>{{orderInfo.createDate}}</text>
- </view>
- </view>
- </view>
- </view>
- <view class="btns">
- <view class="bind" :style="{ background: 'url(' + buybtnBg + ')' }" @click="goOrderDetail">查看详情</view>
- <view class="back" @click="goHome">返回首页</view>
- </view>
- </view>
- </template>
- <script>
- import {copy} from "@/utils/utils";
- import {getOrderDetail} from "../../apis/order";
- import {goHome} from "../../utils/utils";
- export default {
- components: {},
- data() {
- return {
- orderId: '',
- orderInfo: {
- packageName:"",
- createDate:"",
- orderNumber:'',
- shootingRequirements:'',
- email:'',
- },
- buybtnBg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_buy.png',
- 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'
- };
- },
- onLoad(options) {
- if (options.orderId) this.orderId = options.orderId
- this.getData()
- },
- computed: {
- },
- watch: {},
- methods: {
- getData() {
- getOrderDetail({orderId: this.orderId}).then(res => {
- this.orderInfo = res
- })
- },
- goOrderDetail(item){
- uni.navigateTo({
- url: '/pages/order/orderDetail?orderId='+this.orderId
- })
- },
- goHome(){
- goHome()
- },
- // 复制
- 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 {
- width: 100%;
- height: 84rpx;
- background-size: 100% 100% !important;
- color: #061714;
- margin-bottom: 32rpx;
- font-weight: 500rpx;
- font-weight: bold;
- // 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>
|