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
Hide 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 @@ ...@@ -4,18 +4,21 @@
<view class="content-title"> <view class="content-title">
精选好券领取成功 精选好券领取成功
</view> </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"> <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>
<view class="box-2"> <view class="box-2">
<image :src="`/static/jingxuan/${type}-2.png`" ></image> <image :src="$baseUrl + `integral/${tupianBanben}/jingxuan/${type}-2.png`" ></image>
</view> </view>
<view class="box-3" @click="goUse"> <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> </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> </view>
</view> </view>
...@@ -27,11 +30,14 @@ import { ...@@ -27,11 +30,14 @@ import {
onMounted, onMounted,
computed, computed,
defineEmits, defineEmits,
onUnmounted onUnmounted,
getCurrentInstance
} from 'vue' } from 'vue'
import { useUserStore } from "@/stores/user"; import { useUserStore } from "@/stores/user";
import { jump, JumpType } from '@/utils/index.js' import { jump, JumpType } from '@/utils/index.js'
import md from '../../md'; import md from '../../md';
const { proxy } = getCurrentInstance();
const $baseUrl = proxy.$baseUrl;
// 接受父组件参数 // 接受父组件参数
const props = defineProps({ const props = defineProps({
type: { type: {
...@@ -43,6 +49,13 @@ const props = defineProps({ ...@@ -43,6 +49,13 @@ const props = defineProps({
default: true, // 是否解锁 商品兑换券 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(); const userStore = useUserStore();
...@@ -168,32 +181,32 @@ onUnmounted(() => { ...@@ -168,32 +181,32 @@ onUnmounted(() => {
} }
} }
// 黄金 // // 黄金
.sty-1 { // .sty-1 {
background-image: url('@/static/jingxuan/bg-1.png'); // background-image: url('@/static/jingxuan/bg-1.png');
} // }
// 铂金 // // 铂金
.sty-2 { // .sty-2 {
background-image: url('@/static/jingxuan/bg-2.png'); // background-image: url('@/static/jingxuan/bg-2.png');
} // }
// 钻石 // // 钻石
.sty-3 { // .sty-3 {
background-image: url('@/static/jingxuan/bg-3.png'); // background-image: url('@/static/jingxuan/bg-3.png');
} // }
// 星光 // // 星光
.sty-4 { // .sty-4 {
background-image: url('@/static/jingxuan/bg-4.png'); // background-image: url('@/static/jingxuan/bg-4.png');
} // }
// 星耀 // // 星耀
.sty-5 { // .sty-5 {
background-image: url('@/static/jingxuan/bg-5.png'); // background-image: url('@/static/jingxuan/bg-5.png');
} // }
.content-2 { .content-2 {
margin-top: 65rpx; margin-top: 65rpx;
width: 50rpx; width: 50rpx;
height: 50rpx; height: 50rpx;
background-image: url('@/static/shengriPopup/close.png'); // background-image: url('@/static/shengriPopup/close.png');
background-size: 100%; background-size: 100%;
} }
......
components/popup-shengri/popup-shengri.vue
View file @ 3d976e2c
...@@ -4,16 +4,17 @@ ...@@ -4,16 +4,17 @@
<view class="content-title"> <view class="content-title">
基础生日礼领取成功 基础生日礼领取成功
</view> </view>
<view :class="`content-box sty-${type}`"> <view class="content-box" :style="{ backgroundImage: `url('${bgImageUrl}')` }">
<view class="box-2"> <view class="box-2">
<image :src="$baseUrl + `shengriPopup/${type}-1.png`" ></image> <image :src="$baseUrl + `integral/${tupianBanben}/shengriPopup/${type}-1.png`" ></image>
<image :src="$baseUrl + `shengriPopup/${type}-2.png`" ></image> <image :src="$baseUrl + `integral/${tupianBanben}/shengriPopup/${type}-2.png`" ></image>
</view> </view>
<view class="box-3" @click="goUse"> <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> </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> </view>
</view> </view>
...@@ -25,11 +26,14 @@ import { ...@@ -25,11 +26,14 @@ import {
onMounted, onMounted,
computed, computed,
defineEmits, defineEmits,
onUnmounted onUnmounted,
getCurrentInstance
} from 'vue' } from 'vue'
import { useUserStore } from "@/stores/user"; import { useUserStore } from "@/stores/user";
import { jump, JumpType } from '@/utils/index.js' import { jump, JumpType } from '@/utils/index.js'
import md from '../../md'; import md from '../../md';
const { proxy } = getCurrentInstance();
const $baseUrl = proxy.$baseUrl;
// 接受父组件参数 // 接受父组件参数
const props = defineProps({ const props = defineProps({
type: { type: {
...@@ -40,9 +44,15 @@ const props = defineProps({ ...@@ -40,9 +44,15 @@ const props = defineProps({
// 用户信息 // 用户信息
const userStore = useUserStore(); const userStore = useUserStore();
const tupianBanben = ref('1016')
// 回调函数 // 回调函数
const emit = defineEmits(['statusChange', 'close']) const emit = defineEmits(['statusChange', 'close'])
const bgImageUrl = computed(() => {
// 添加$baseUrl存在性检查
const base = $baseUrl || '';
return `${base}integral/${tupianBanben.value}/jingxuan/bg-${props.type}.png`
})
// 跳转小程序配置 // 跳转小程序配置
const configuration ={ const configuration ={
// subPackages/shopMainProcess/coupons/couponList // subPackages/shopMainProcess/coupons/couponList
...@@ -157,23 +167,23 @@ onUnmounted(() => { ...@@ -157,23 +167,23 @@ onUnmounted(() => {
} }
} }
// 钻石 // 钻石
.sty-3 { // .sty-3 {
background-image: url('@/static/jingxuan/bg-3.png'); // background-image: url('@/static/jingxuan/bg-3.png');
} // }
// 星光 // // 星光
.sty-4 { // .sty-4 {
background-image: url('@/static/jingxuan/bg-4.png'); // background-image: url('@/static/jingxuan/bg-4.png');
} // }
// 星耀 // // 星耀
.sty-5 { // .sty-5 {
background-image: url('@/static/jingxuan/bg-5.png'); // background-image: url('@/static/jingxuan/bg-5.png');
} // }
.content-2 { .content-2 {
margin-top: 65rpx; margin-top: 65rpx;
width: 50rpx; width: 50rpx;
height: 50rpx; height: 50rpx;
background-image: url('@/static/shengriPopup/close.png'); // background-image: url('@/static/shengriPopup/close.png');
background-size: 100%; background-size: 100%;
} }
......
components/popup-xinren/popup-xinren.vue
View file @ 3d976e2c
...@@ -4,15 +4,19 @@ ...@@ -4,15 +4,19 @@
<view class="content-title"> <view class="content-title">
新人礼券领取成功 新人礼券领取成功
</view> </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"> <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>
<view class="box-3" @click="goUse"> <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> </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> </view>
</view> </view>
...@@ -24,11 +28,16 @@ import { ...@@ -24,11 +28,16 @@ import {
onMounted, onMounted,
computed, computed,
defineEmits, defineEmits,
onUnmounted onUnmounted,
getCurrentInstance
} from 'vue' } from 'vue'
import { useUserStore } from "@/stores/user"; import { useUserStore } from "@/stores/user";
import { jump, JumpType } from '@/utils/index.js' import { jump, JumpType } from '@/utils/index.js'
import md from '../../md'; import md from '../../md';
const { proxy } = getCurrentInstance();
const $baseUrl = proxy.$baseUrl;
// 接受父组件参数 // 接受父组件参数
const props = defineProps({ const props = defineProps({
type: { type: {
...@@ -39,6 +48,15 @@ const props = defineProps({ ...@@ -39,6 +48,15 @@ const props = defineProps({
// 用户信息 // 用户信息
const userStore = useUserStore(); 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']) const emit = defineEmits(['statusChange', 'close'])
...@@ -153,31 +171,31 @@ onUnmounted(() => { ...@@ -153,31 +171,31 @@ onUnmounted(() => {
} }
} }
// 黄金 // 黄金
.sty-1 { // .sty-1 {
background-image: url('@/static/jingxuan/bg-1.png'); // background-image: url('@/static/jingxuan/bg-1.png');
} // }
// 铂金 // // 铂金
.sty-2 { // .sty-2 {
background-image: url('@/static/jingxuan/bg-2.png'); // background-image: url('@/static/jingxuan/bg-2.png');
} // }
// 钻石 // // 钻石
.sty-3 { // .sty-3 {
background-image: url('@/static/jingxuan/bg-3.png'); // background-image: url('@/static/jingxuan/bg-3.png');
} // }
// 星光 // // 星光
.sty-4 { // .sty-4 {
background-image: url('@/static/jingxuan/bg-4.png'); // background-image: url('@/static/jingxuan/bg-4.png');
} // }
// 星耀 // // 星耀
.sty-5 { // .sty-5 {
background-image: url('@/static/jingxuan/bg-5.png'); // background-image: url('@/static/jingxuan/bg-5.png');
} // }
.content-2 { .content-2 {
margin-top: 65rpx; margin-top: 65rpx;
width: 50rpx; width: 50rpx;
height: 50rpx; height: 50rpx;
background-image: url('@/static/shengriPopup/close.png'); // background-image: url('@/static/shengriPopup/close.png');
background-size: 100%; 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