|
|
@@ -0,0 +1,150 @@
|
|
|
+<template>
|
|
|
+ <up-popup :show="showPopup" @close="handleClose" mode="center" bgColor="transparent">
|
|
|
+ <view class="success-popup">
|
|
|
+ <view class="success-title">恭喜你，已守护成功！</view>
|
|
|
+ <view class="success-content">
|
|
|
+ <image class="right-star" :src="`${config.BASIC_IMG}img/treePage/star.png`" alt="" />
|
|
|
+ <image class="left-star" :src="`${config.BASIC_IMG}img/treePage/star.png`" alt="" />
|
|
|
+ <view class="card">
|
|
|
+ <image class="img"
|
|
|
+ src="https://birdseye-img-ali-cdn.sysuimars.com/562ba414-9517-4789-98f9-42fdae26cee4/bc27ee0c-8177-47fb-823c-c81d6f8b514c/DJI_202507281100_002_bc27ee0c-8177-47fb-823c-c81d6f8b514c/DJI_20250728110246_0016_Z_code-ws0y1mu3uwb2.jpeg">
|
|
|
+ </image>
|
|
|
+ <!-- <image class="img" v-lazyload="getImageUrl(treeObj.treeImages[0].filename)" alt="" /> -->
|
|
|
+ <!-- <view class="code">{{treeObj.buyList[0].code}}</view> -->
|
|
|
+ <view class="code">LCJGHN-GZCH-LBY1003</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="button" @click="handleClose">我知道了</view>
|
|
|
+ </view>
|
|
|
+ </up-popup>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import {
|
|
|
+ ref,
|
|
|
+ watch
|
|
|
+ } from "vue";
|
|
|
+ import config from "@/api/config.js"
|
|
|
+ const resize = "?x-oss-process=image/resize,w_1000";
|
|
|
+
|
|
|
+ const props = defineProps({
|
|
|
+ show: {
|
|
|
+ type: Boolean,
|
|
|
+ defalut: false,
|
|
|
+ },
|
|
|
+ treeObj: {
|
|
|
+ type: Object,
|
|
|
+ defalut: () => {},
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const getImageUrl = (filename) => {
|
|
|
+ if (filename.startsWith("https")) {
|
|
|
+ return filename; // 直接使用完整 URL
|
|
|
+ } else {
|
|
|
+ return base_img_url2 + filename + resize; // 拼接基础 URL
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const formatDate = (dateStr) => {
|
|
|
+ return dateStr.split(" ")[0].replace(/-/g, ".");
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ const showPopup = ref(false);
|
|
|
+
|
|
|
+ const handleClose = () => {
|
|
|
+ showPopup.value = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ watch(
|
|
|
+ () => props.show,
|
|
|
+ () => {
|
|
|
+ showPopup.value = true;
|
|
|
+ }
|
|
|
+ );
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ @import "@/static/style/mixin.scss";
|
|
|
+ .success-popup {
|
|
|
+ width: 90vw;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .success-title {
|
|
|
+ font-size: 56rpx;
|
|
|
+ text-align: center;
|
|
|
+ @include ossBg("treePage/ribbon.png");
|
|
|
+ margin-bottom: 42rpx;
|
|
|
+ font-family: "PangMenZhengDao";
|
|
|
+ padding: 14rpx 46rpx 0;
|
|
|
+ line-height: 130rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .success-content {
|
|
|
+ width: 88%;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ padding: 14rpx;
|
|
|
+ background: rgba(255, 255, 255, 0.15);
|
|
|
+ box-shadow: 0 0 12rpx 0 rgba(255, 255, 255, 0.63) inset;
|
|
|
+ box-sizing: border-box;
|
|
|
+ backdrop-filter: blur(8rpx);
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .right-star {
|
|
|
+ width: 56rpx;
|
|
|
+ height: 54rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 110rpx;
|
|
|
+ right: -38rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-star {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 62rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 280rpx;
|
|
|
+ left: -36rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card {
|
|
|
+ position: relative;
|
|
|
+ color: #000;
|
|
|
+ border-radius: 32rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ border-radius: 32rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 646rpx;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .code {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: calc(50% - 340rpx / 2);
|
|
|
+ background: rgba(26, 26, 26, 0.5);
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #fff;
|
|
|
+ padding: 12rpx 30rpx;
|
|
|
+ border-radius: 4rpx 4rpx 20rpx 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #fff;
|
|
|
+ padding: 20rpx 144rpx;
|
|
|
+ border: 2rpx solid #fff;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin: 50rpx 0 40rpx;
|
|
|
+ background-image: linear-gradient(120deg, #00d4ff, #008eff);
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
wangsisi