charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat：性能优化

Browse Source
This commit is contained in:
charles
2026-07-25 09:12:36 +08:00
parent 3eba959b48
commit 9ab39d2aec
138 changed files with 232 additions and 1511 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/LuckyWheel.vue
-176
View File
@@ -1,176 +0,0 @@
<template>
<view class="turntable-container" :style="{ backgroundColor: bgColor }">
<view class="turntable" :style="turntableStyle" @click="startRotate">
<!-- 奖项区域 -->
<view
v-for="(item, index) in prizes"
:key="index"
class="prize-sector"
:style="getPrizeStyle(index)"
>
<view class="prize-text">{{ item.name }}</view>
</view>
<!-- 装饰点 -->
<view
v-for="(item, index) in prizes"
:key="'dot'+index"
class="decorative-dot"
:style="getDotStyle(index)"
/>
<!-- 中心指针 -->
<view class="center-pointer" />
</view>
<button @click="startRotate">开始抽奖</button>
</view>
</template>
<script>
export default {
props: {
prizes: {
type: Array,
default: () => [
{ name: "一等奖", color: "#FF4444" },
{ name: "二等奖", color: "#66CC33" },
{ name: "三等奖", color: "#44AAFF" },
{ name: "谢谢参与", color: "#CCCCCC" }
]
},
bgColor: {
type: String,
default: "#F0F0F0"
},
turntableColor: {
type: String,
default: "#FFFFFF"
}
},
data() {
return {
isRotating: false,
currentRotation: 0
}
},
computed: {
turntableStyle() {
return {
transform: `rotate(${this.currentRotation}deg)`,
backgroundColor: this.turntableColor
}
}
},
methods: {
getPrizeStyle(index) {
const total = this.prizes.length
const angle = 360 / total
return {
clipPath: `polygon(50% 0%, 100% 0, 100% ${100 * (index + 1) / total}%, 50% 100%, 0 ${100 * index / total}%, 0 0)`,
backgroundColor: this.prizes[index].color
}
},
getDotStyle(index) {
const total = this.prizes.length
const angle = (360 / total) * index
return {
transform: `rotate(${angle}deg) translateX(70%)`,
backgroundColor: this.prizes[index].color
}
},
async startRotate() {
if (this.isRotating) return
this.isRotating = true
const targetIndex = Math.floor(Math.random() * this.prizes.length)
const targetRotation = this.currentRotation + 360 * 5 + (360 / this.prizes.length) * targetIndex
await this.$nextTick()
this.currentRotation = targetRotation
setTimeout(() => {
this.isRotating = false
this.$emit('result', this.prizes[targetIndex])
}, 3000)
}
}
}
</script>
<style scoped lang="scss">
.turntable-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
border-radius: 20px;
}
.turntable {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
transition: transform 3s ease-out;
overflow: hidden;
cursor: pointer;
}
.prize-sector {
position: absolute;
width: 50%;
height: 50%;
left: 50%;
top: 0;
transform-origin: left bottom;
display: flex;
align-items: center;
justify-content: center;
}
.prize-text {
transform: rotate(45deg);
color: white;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.decorative-dot {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
top: 10%;
left: 50%;
}
.center-pointer {
position: absolute;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 40px solid #333;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #44AAFF;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
}
button:hover {
background-color: #3399FF;
}
</style>
components/address.vue
+1 -1
View File
@@ -15,7 +15,7 @@
</view>
</view>
<view v-else class="not_order_warp">
<view class="not_order_warp_img"><up-image src="/static/common/not_search.png" width="100" height="100"
<view class="not_order_warp_img"><up-image src="/pages/other_package/static/not_search.png" width="100" height="100"
bgColor="#f1f6ff00"></up-image></view>
<view class="not_order_msg_warp">暂时地址，快去地址管理添加吧~</view>
</view>
components/choiceness/choiceness.vue
+1 -1
View File
@@ -8,7 +8,7 @@
<view class="choiceness_product" :class="platformType ? '' : 'iosplatformType'">
<view v-for="item in productList" :key="item.id" class="choiceness_product_item" @click="jumpInfo(item)">
<view>
<up-image :src="item.url" width="100%" height="140" bgColor="#f1f6ff00"></up-image>
<up-image :lazy-load="true" :src="item.url" width="100%" height="140" bgColor="#f1f6ff00"></up-image>
<view class="product_item_name">{{ item.title }}</view>
</view>
<view class="product_item_price">
components/code-comm/code-comm.vue
-92
View File
@@ -1,92 +0,0 @@
<template>
<view class="comm-input-warp">
<!-- #ifdef APP-PLUS -->
<input :placeholder="$t('login.comm.code')" border="false" :v-model="modelValue" color="#EEEEEE" type="number"
@input="$emit('update:modelValue', $event.detail.value)" style="height: 64rpx;width: 70%;"></input>
<!-- #endif -->
<!-- #ifdef MP -->
<input :placeholder="$t('login.comm.code')" border="false" :v-model="modelValue" color="#EEEEEE" type="number"
@input="$emit('update:modelValue', $event.target.value)" style="height: 64rpx;width: 70%;"></input>
<!-- #endif -->
<view class="code-warp" v-if="countdown">
<up-count-down :time="60 * 1000" format="ss" @finish="getCode(false)"></up-count-down>
<text style="margin-left: 10rpx;">s</text>
<!-- <text style="margin-left: 10rpx;">{{$t('login.comm.reacquire.code')}}</text> -->
</view>
<view v-else class="code-warp" @click="getCode(true)">
<view>{{ $t('login.comm.get.code') }}</view>
</view>
<up-toast ref="uToastRef"></up-toast>
</view>
</template>
<script>
// import { ref } from 'vue';
// const uCodeRef = ref(null);
export default {
name: 'inputComm',
props: ['modelValue', 'codeNumberRef', 'emptyCountdownRef'],
watch: {
emptyCountdownRef(value, oldValue) {
if (value) {
this.countdown = true;
}
},
},
data() {
return {
countdown: false,
emptyCountdown: this.emptyCountdownRef,
inputCss: {
"height": '80rpx',
"background": "#F3F3F3FF",
"border-radius": "30rpx",
"border": "0rpx",
"padding-left": "16px",
},
}
},
emits: ['update:modelValue'],
mounted() {
},
methods: {
getCode(val) {
const emptyCountdown = this.emptyCountdown;
if (val) {
const codeNumber = this.codeNumberRef;
if (codeNumber) {
this.$emit('getCode');
} else {
this.$refs.uToastRef.show({
type: 'error',
message: this.$t('login.comm.email'),
});
return;
}
} else {
// uni.dialog.showMessage('请输入邮箱');
this.$refs.uToastRef.show({
type: 'error',
message: this.$t('login.comm.email'),
});
}
},
},
};
</script>
<style lang="less" scoped>
.code-warp {
width: 30%;
text-align: right;
display: flex;
justify-content: flex-end;
}
.wrap {
padding: 24rpx;
}
</style>
components/common/product-seckill-card.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<view class="seckill_card_container" @click="onSelectProct(item)">
<!-- Left side image with optional countdown overlay -->
<view class="seckill_card_left">
<up-image :src="item.url || item.image || item.accessUrl" width="220rpx" height="220rpx" bgColor="#f1f6ff00"
<up-image :lazy-load="true" :src="item.url || item.image || item.accessUrl" width="220rpx" height="220rpx" bgColor="#f1f6ff00"
shape="square" radius="16rpx"></up-image>
<view class="countdown_bar" v-if="showCountdown && countdownText">
<text class="countdown_text">{{ countdownText }}</text>
components/qrcode-preview.vue
+55
View File
@@ -0,0 +1,55 @@
<template>
<up-popup :show="show" @close="close" @open="open" mode="center" :round="10">
<view class="qrcode-preview" @click.stop="close" v-if="qrcodeUrl">
<up-qrcode :val="qrcodeUrl" :key="key"></up-qrcode>
</view>
</up-popup>
</template>
<script>
export default {
props: {
qrcodeVal: {
type: String,
default: "",
},
},
data() {
return {
show: false,
qrcodeUrl: "",
key: 0,
};
},
methods: {
open() {
this.show = true;
this.$nextTick(() => {
this.qrcodeUrl = this.qrcodeVal;
this.key++;
console.log('qrcodeUrl',this.qrcodeUrl);
});
},
close() {
this.show = false;
this.qrcodeUrl = "";
},
},
};
</script>
<style lang="scss" scoped>
.qrcode-preview {
width: 440rpx;
height: 440rpx;
background: #ffffff;
border-radius: 8rpx;
// padding: 40rpx;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
</style>
components/shop/ping-item.vue → components/shop/parity-product-item.vue
+3 -3
View File
@@ -1,5 +1,5 @@
<template>
<view class="ping-item" @click.stop="onClick">
<view class="parity-product-item" @click.stop="onClick">
<image class="top-img" :src="obj.url" mode="widthFix" lazy-load />
<view class="shop-bottom-panel">
<text class="title text-30 text-zu text-overflow">
@@ -24,7 +24,7 @@
<script>
export default {
name: 'PingItem',
name: 'ParityProductItem',
props: {
obj: {
type: Object,
@@ -47,7 +47,7 @@ export default {
</script>
<style lang="scss" scoped>
.ping-item {
.parity-product-item {
width: 332rpx;
background: #fff;
border-radius: 12rpx;
components/shop/fen-item.vue → components/shop/points-product-item.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<view class="shop-view" @click="onClick">
<view class="shop-left-view">
<image :src="obj.url"></image>
<image :src="obj.url" lazy-load></image>
</view>
<view class="shop-right-view">
<view class="right-top-view text-overflow1">
components/shop/you-item.vue → components/shop/preferred-product-item.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<view class="shop-view" @click="onClick">
<view class="shop-left-view">
<image :src="obj.url"></image>
<image :src="obj.url" lazy-load></image>
</view>
<view class="shop-right-view">
<view class="shop-top-img">
components/winning_record.vue
-183
View File
@@ -1,183 +0,0 @@
<template>
<!-- <up-loading-page :loading="listLoading"></up-loading-page> -->
<scroll-view scroll-y="true" @scrolltolower="loadMore" :style="{ 'height': heightRef }">
<view class="prize_draw_item" v-for="item in prizeDrawList" :key="item.id"
v-if="prizeDrawList && prizeDrawList.length !== 0">
<view class="prize_draw_left_warp">
<up-image :src="item.iconUrl ? item.iconUrl : 'https://static.tbmall.xin/static/zj_f.jpg'"
width="60" height="60" bgColor="#f1f6ff00"></up-image>
<view style="margin-left: 20rpx;">
<view class="title_">{{ item.prizeName }}</view>
<view class="time_">{{ formatDate(item.ctdate) }}</view>
<view class="delivery_"
v-if="[DELIVER_STATUS.AWAIT_DELIVERY_REQUIRED, DELIVER_STATUS.YES_DELIVERY_REQUIRED, DELIVER_STATUS.RECEIVED].includes(item.deliveryStatus)">
<view class="delivery_status">{{ getValue(DELIVER_STATUS_, item.deliveryStatus) }}</view>
<view class="delivery_num" v-if="item.deliveryNum">
<text style="margin-right: 10rpx;">运单号：{{ item.deliveryNum }}</text>
<up-image src="/static/common/copy.png" width="10" height="10" bgColor="#f1f6ff00"
@click="copyData(item.deliveryNum)"></up-image>
</view>
<view class="delivery_num" v-else>运单号：暂无</view>
</view>
</view>
</view>
<view class="prize_draw_right_warp" v-if="item.type === 'goods'" v-show="item.status === 1" @click="jumpGetFun(item)">
去领取</view>
<view class="prize_draw_right_warp yes_" v-if="item.type === 'goods'" v-show="item.status === 2">已领取</view>
</view>
<view v-else class="not_order_warp">
<up-image src="https://static.tbmall.xin/static/not_order.png" width="80" height="80"
bgColor="#f1f6ff00"></up-image>
<view class="not_order_msg_warp">还未中奖哦～</view>
</view>
<view v-if="loading" style="text-align: center;">加载中...</view>
</scroll-view>
</template>
<script>
import { getWinningList } from '@/api/raffle.js';
import { formatDate, copyData } from '@/utils/index.js';
import { DELIVER_STATUS, DELIVER_STATUS_, getValue } from '@/utils/enumUtils.js'
export default {
name: "winning_record",
props: {
heightRef: { //当前选中的tab项
type: Number,
default: 'calc(100vh - 100rpx)'
}
},
computed: {
DELIVER_STATUS() {
return DELIVER_STATUS;
},
DELIVER_STATUS_() {
return DELIVER_STATUS_;
}
},
data() {
return {
prizeDrawList: [],// 抽奖列表
form: {
status: '',
page: 1,
pageSize: 20,
},
loading: false, // 加载状态标志
};
},
mounted() {
// this.jumpMine();
this.loadData(); // 页面加载时加载数据
},
methods: {
formatDate,
copyData,
getValue,
jumpGetFun(item) {
uni.navigateTo({
url: '/pages/other_package/get_prize/get_prize?id=' + item.id,
})
},
// 加载数据的方法
async loadData() {
if (this.loading) return; // 如果正在加载，则不重复加载
this.loading = true; // 设置加载状态为true
try {
// 模拟异步获取数据，实际应用中应该替换为你的数据获取逻辑，例如API调用
const newData = await this.fetchData(this.form.page, this.form.pageSize);
if (newData.entitys && newData.entitys.length !== 0) {
this.prizeDrawList = [...this.prizeDrawList, ...newData.entitys]; // 将新数据添加到列表中
this.form.page++; // 页码加1
}
} catch (error) {
console.error('加载数据失败:', error);
} finally {
this.loading = false; // 设置加载状态为false
}
},
// 模拟获取数据的方法，实际应用中应该替换为你的数据获取逻辑，例如从服务器获取数据
async fetchData(page, pageSize) {
const params = {
page,
pageSize,
}
const data = await getWinningList(params);
if (data && data.bizcode === 100) {
return data.data
} else {
return [];
}
},
// 当滚动到底部时触发的方法
loadMore() {
this.loadData(); // 加载更多数据
}
}
}
</script>
<style lang="scss" scoped>
.prize_draw_warp {}
.prize_draw_item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 0;
border-bottom: 1rpx solid #EEEEEE;
}
.prize_draw_left_warp {
display: flex;
align-items: center;
}
.title_ {
font-weight: bold;
font-size: 28rpx;
color: #333333;
}
.time_ {
font-size: 24rpx;
color: #666666;
margin-top: 10rpx;
}
.delivery_ {
display: flex;
align-items: center;
font-size: 20rpx;
margin-top: 10rpx;
.delivery_status {
padding: 6rpx 10rpx;
border-radius: 10rpx;
color: $app-bt-bj;
border: 1rpx solid $app-bt-bj;
}
.delivery_num {
margin-left: 10rpx;
display: flex;
align-items: center;
}
}
.prize_draw_right_warp {
background: $app-bt-bj;
border-radius: 10rpx;
text-align: center;
color: #FFFFFF;
padding: 10rpx 28rpx;
height: 48rpx;
}
.yes_ {
background: #F5F5F5;
color: #666666;
}
</style>