wx-yunyubang-miniprogram/packages/packageBuy/pages/buyMemberSuccess/buyMemberSuccess.vue

<template>
	<view class="content">
		<view class="successBox">
			<view class="iconfont icon-success"></view>
			<view class="h3">已收到您的订单</view>
			<view class="p">我们将根据您的预产期联系您并安排与商家对接</view>
			<view class="p" v-if="phone!=''" >若您有需要也可以联系我们:<text style="color:blue">{{phone}}</text></view>
			<view class="p" v-if="wechat!=''">或添加客服微信号:<text style="color:blue">{{wechat}}</text></view>
		</view>
		<view class="pinkBtn" @tap="goMyOrder">我的订单</view>
	</view>
</template>

<script>
	import {
		weixin
	} from '../../../../utils/weixin.js'
	export default {
		data() {
			return {
				phone: "",
				wechat: "",
				id: ""
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getPackages();
		},
		methods: {
			goMyOrder() {
				uni.navigateTo({
					url: "../../../packageOrder/pages/myOrder/myOrder?status=ongoing"
				})
			},
			getPackages() {
				weixin.request({
					api: '/api/member/get-packages-info/' + this.id,
					method: 'GET',
					utilSuccess: r => {
						this.phone = r.data.phone;
						this.wechat = r.data.wechat;
					},
					utilFail: r => {
						console.log(r);
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.successBox {
		width: 100%;
		text-align: center;
		padding: 80rpx 40rpx 0 40rpx;

		.iconfont {
			color: #39C852;
			font-size: 120rpx;
		}

		.h3 {
			font-size: 40rpx;
			font-weight: 500;
			color: #333333;
			margin-top: 40rpx;
		}

		.p {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			margin-top: 24rpx;
		}

	}

	.pinkBtn {
		width: 670rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #FF7E95 0%, #FF447B 100%);
		border-radius: 44rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		margin: 80rpx auto;
	}
</style>