Skip to content

飞
飞鹤小程序
Commit 3d976e2c authored by weishengfei's avatar weishengfei
Browse files
Options

refactor(components): 更新弹窗组件样式和图片路径 

- 修改了 popup-jingxuan、popup-shengri 和 popup-xinren 组件的背景图片路径
- 更新了组件内部图片的加载方式，使用动态生成的 URL
- 调整了部分样式，如移除静态背景图片等
- 优化了代码结构，提高了组件的可维护性和灵活性
parent a1daba30
Show whitespace changes
Inline Side-by-side
Showing with 111 additions and 70 deletions
components/popup-jingxuan/popup-jingxuan.vue
View file @ 3d976e2c
......@@ -4,18 +4,21 @@
<view class="content-title">
精选好券领取成功
</view>
<view :class="`content-box sty-${type}`">
<!-- <view :class="`content-box sty-${type}`"> -->
<view class="content-box" :style="{ backgroundImage: `url('${bgImageUrl}')` }">
<view v-if="isUnlock" class="box-1">
<image :src="`/static/jingxuan/${type}-1.png`" ></image>
<!-- :src="$baseUrl + `integral/${tupianBanben}/shengriPopup/${type}-1.png`" -->
<!-- :src="`/static/jingxuan/${type}-1.png`" -->
<image :src="$baseUrl + `integral/${tupianBanben}/jingxuan/${type}-1.png`" ></image>
</view>
<view class="box-2">
<image :src="`/static/jingxuan/${type}-2.png`" ></image>
<image :src="$baseUrl + `integral/${tupianBanben}/jingxuan/${type}-2.png`" ></image>
</view>
<view class="box-3" @click="goUse">
<image :src="`/static/jingxuan/${type}-3.png`" ></image>
<image :src="$baseUrl + `integral/${tupianBanben}/jingxuan/${type}-3.png`" ></image>
</view>
</view>
<view class="content-2" @click="closeBtn">
<view class="content-2" @click="closeBtn" :style="{backgroundImage: `url(${$baseUrl + `integral/${tupianBanben}/shengriPopup/close.png`})`}">
</view>
</view>
</view>
......@@ -27,11 +30,14 @@ import {
onMounted,
computed,
defineEmits,
onUnmounted
onUnmounted,
getCurrentInstance
} from 'vue'
import { useUserStore } from "@/stores/user";
import { jump, JumpType } from '@/utils/index.js'
import md from '../../md';
const { proxy } = getCurrentInstance();
const $baseUrl = proxy.$baseUrl;
// 接受父组件参数
const props = defineProps({
type: {
......@@ -43,6 +49,13 @@ const props = defineProps({
default: true, // 是否解锁 商品兑换券
}
})
const tupianBanben = ref('1016')
const bgImageUrl = computed(() => {
// 添加$baseUrl存在性检查
const base = $baseUrl || '';
return `${base}integral/${tupianBanben.value}/jingxuan/bg-${props.type}.png`
})
// 用户信息
const userStore = useUserStore();
......@@ -168,32 +181,32 @@ onUnmounted(() => {
}
}
// 黄金
.sty-1 {
background-image: url('@/static/jingxuan/bg-1.png');
}
// 铂金
.sty-2 {
background-image: url('@/static/jingxuan/bg-2.png');
}
// 钻石
.sty-3 {
background-image: url('@/static/jingxuan/bg-3.png');
}
// 星光
.sty-4 {
background-image: url('@/static/jingxuan/bg-4.png');
}
// 星耀
.sty-5 {
background-image: url('@/static/jingxuan/bg-5.png');
}
// // 黄金
// .sty-1 {
// background-image: url('@/static/jingxuan/bg-1.png');
// }
// // 铂金
// .sty-2 {
// background-image: url('@/static/jingxuan/bg-2.png');
// }
// // 钻石
// .sty-3 {
// background-image: url('@/static/jingxuan/bg-3.png');
// }
// // 星光
// .sty-4 {
// background-image: url('@/static/jingxuan/bg-4.png');
// }
// // 星耀
// .sty-5 {
// background-image: url('@/static/jingxuan/bg-5.png');
// }
.content-2 {
margin-top: 65rpx;
width: 50rpx;
height: 50rpx;
background-image: url('@/static/shengriPopup/close.png');
// background-image: url('@/static/shengriPopup/close.png');
background-size: 100%;
}
......
components/popup-shengri/popup-shengri.vue
View file @ 3d976e2c
......@@ -4,16 +4,17 @@
<view class="content-title">
基础生日礼领取成功
</view>
<view :class="`content-box sty-${type}`">
<view class="content-box" :style="{ backgroundImage: `url('${bgImageUrl}')` }">
<view class="box-2">
<image :src="$baseUrl + `shengriPopup/${type}-1.png`" ></image>
<image :src="$baseUrl + `shengriPopup/${type}-2.png`" ></image>
<image :src="$baseUrl + `integral/${tupianBanben}/shengriPopup/${type}-1.png`" ></image>
<image :src="$baseUrl + `integral/${tupianBanben}/shengriPopup/${type}-2.png`" ></image>
</view>
<view class="box-3" @click="goUse">
<image :src="$baseUrl + `jingxuan/${type}-3.png`" ></image>
<image :src="$baseUrl + `integral/${tupianBanben}/shengriPopup/${type}-3.png`" ></image>
</view>
</view>
<view class="content-2" @click="closeBtn">
<view class="content-2" @click="closeBtn" :style="{backgroundImage: `url(${$baseUrl + `integral/${tupianBanben}/shengriPopup/close.png`})`}">
</view>
</view>
</view>
......@@ -25,11 +26,14 @@ import {
onMounted,
computed,
defineEmits,
onUnmounted
onUnmounted,
getCurrentInstance
} from 'vue'
import { useUserStore } from "@/stores/user";
import { jump, JumpType } from '@/utils/index.js'
import md from '../../md';
const { proxy } = getCurrentInstance();
const $baseUrl = proxy.$baseUrl;
// 接受父组件参数
const props = defineProps({
type: {
......@@ -40,9 +44,15 @@ const props = defineProps({
// 用户信息
const userStore = useUserStore();
const tupianBanben = ref('1016')
// 回调函数
const emit = defineEmits(['statusChange', 'close'])
const bgImageUrl = computed(() => {
// 添加$baseUrl存在性检查
const base = $baseUrl || '';
return `${base}integral/${tupianBanben.value}/jingxuan/bg-${props.type}.png`
})
// 跳转小程序配置
const configuration ={
// subPackages/shopMainProcess/coupons/couponList
......@@ -157,23 +167,23 @@ onUnmounted(() => {
}
}
// 钻石
.sty-3 {
background-image: url('@/static/jingxuan/bg-3.png');
}
// 星光
.sty-4 {
background-image: url('@/static/jingxuan/bg-4.png');
}
// 星耀
.sty-5 {
background-image: url('@/static/jingxuan/bg-5.png');
}
// .sty-3 {
// background-image: url('@/static/jingxuan/bg-3.png');
// }
// // 星光
// .sty-4 {
// background-image: url('@/static/jingxuan/bg-4.png');
// }
// // 星耀
// .sty-5 {
// background-image: url('@/static/jingxuan/bg-5.png');
// }
.content-2 {
margin-top: 65rpx;
width: 50rpx;
height: 50rpx;
background-image: url('@/static/shengriPopup/close.png');
// background-image: url('@/static/shengriPopup/close.png');
background-size: 100%;
}
......
components/popup-xinren/popup-xinren.vue
View file @ 3d976e2c
......@@ -4,15 +4,19 @@
<view class="content-title">
新人礼券领取成功
</view>
<view :class="`content-box sty-${type}`">
<!-- <view :class="`content-box sty-${type}`"> -->
<view class="content-box" :style="{ backgroundImage: `url('${bgImageUrl}')` }">
<view class="box-2">
<image :src="`/static/xinren/${type}-2.png`" ></image>
<!-- <image :src="`/static/xinren/${type}-2.png`" ></image> -->
<image :src="$baseUrl + `integral/${tupianBanben}/xinren/${type}-2.png`" ></image>
</view>
<view class="box-3" @click="goUse">
<image :src="`/static/jingxuan/${type}-3.png`" ></image>
<!-- <image :src="`/static/jingxuan/${type}-3.png`" ></image> -->
<image :src="$baseUrl + `integral/${tupianBanben}/jingxuan/${type}-3.png`" ></image>
</view>
</view>
<view class="content-2" @click="closeBtn">
<view class="content-2" @click="closeBtn" :style="{backgroundImage: `url(${$baseUrl + `integral/${tupianBanben}/shengriPopup/close.png`})`}">
</view>
</view>
</view>
......@@ -24,11 +28,16 @@ import {
onMounted,
computed,
defineEmits,
onUnmounted
onUnmounted,
getCurrentInstance
} from 'vue'
import { useUserStore } from "@/stores/user";
import { jump, JumpType } from '@/utils/index.js'
import md from '../../md';
const { proxy } = getCurrentInstance();
const $baseUrl = proxy.$baseUrl;
// 接受父组件参数
const props = defineProps({
type: {
......@@ -39,6 +48,15 @@ const props = defineProps({
// 用户信息
const userStore = useUserStore();
const tupianBanben = ref('1016')
const bgImageUrl = computed(() => {
// 添加$baseUrl存在性检查
const base = $baseUrl || '';
return `${base}integral/${tupianBanben.value}/jingxuan/bg-${props.type}.png`
})
// 回调函数
const emit = defineEmits(['statusChange', 'close'])
......@@ -153,31 +171,31 @@ onUnmounted(() => {
}
}
// 黄金
.sty-1 {
background-image: url('@/static/jingxuan/bg-1.png');
}
// 铂金
.sty-2 {
background-image: url('@/static/jingxuan/bg-2.png');
}
// 钻石
.sty-3 {
background-image: url('@/static/jingxuan/bg-3.png');
}
// 星光
.sty-4 {
background-image: url('@/static/jingxuan/bg-4.png');
}
// 星耀
.sty-5 {
background-image: url('@/static/jingxuan/bg-5.png');
}
// .sty-1 {
// background-image: url('@/static/jingxuan/bg-1.png');
// }
// // 铂金
// .sty-2 {
// background-image: url('@/static/jingxuan/bg-2.png');
// }
// // 钻石
// .sty-3 {
// background-image: url('@/static/jingxuan/bg-3.png');
// }
// // 星光
// .sty-4 {
// background-image: url('@/static/jingxuan/bg-4.png');
// }
// // 星耀
// .sty-5 {
// background-image: url('@/static/jingxuan/bg-5.png');
// }
.content-2 {
margin-top: 65rpx;
width: 50rpx;
height: 50rpx;
background-image: url('@/static/shengriPopup/close.png');
// background-image: url('@/static/shengriPopup/close.png');
background-size: 100%;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment