开发中断2
This commit is contained in:
田岩
@@ -13,9 +13,39 @@
|
||||
<image class="img" src="@/static/images/pointsAndRank/badge-wheat-right.png"></image>
|
||||
</view>
|
||||
<view class="points-div">
|
||||
<view class="points-img-div">
|
||||
<image-preview :src="nowImgSrc"></image-preview>
|
||||
<view class="doct_icon left" @click="doct_click(-1)">
|
||||
<view class="doct_icon_div">
|
||||
<image src="/src/static/images/mascot/btn_left.png" class="img" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<swiper class="swiper">
|
||||
<swiper-item class="">
|
||||
<view class="swiper-item-div">
|
||||
<image src="@/static/images/test/xz.png" class="img" mode="widthFix"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item class="">
|
||||
<view class="swiper-item-div">
|
||||
<!-- <image-preview
|
||||
class="img"
|
||||
src="/traoss/tras3/show/S3F0250181220722025110713501700000661177"
|
||||
></image-preview> -->
|
||||
<image src="@/static/images/test/xz.png" class="img" mode="widthFix"></image>
|
||||
<!-- // <image-preview :src="item.imgAddr" class="img" mode="widthFix"></image-preview> -->
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="doct_icon right" @click="doct_click(1)">
|
||||
<view class="doct_icon_div">
|
||||
<image src="/src/static/images/mascot/btn_right.png" class="img" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="points-img-div">
|
||||
|
||||
<image-preview :src="nowImgSrc"></image-preview>
|
||||
|
||||
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="button-div">
|
||||
<uv-button
|
||||
@@ -41,182 +71,73 @@
|
||||
import common from '@/common/common';
|
||||
const popup = ref(null);
|
||||
const nowImgSrc = ref('');
|
||||
const badgesList = ref([]);
|
||||
const pointsList = ref([]);
|
||||
|
||||
const buttonColor = 'linear-gradient( 270deg, #E0914A 0%, #EDBE7F 100%)';
|
||||
const customStyle = {
|
||||
borderRadius: '40rpx' //圆角
|
||||
};
|
||||
|
||||
|
||||
const emits = defineEmits(['checkInFun'])
|
||||
const emits = defineEmits(['checkInFun']);
|
||||
|
||||
// 退出签到
|
||||
const close = () => {
|
||||
popup.value.close();
|
||||
};
|
||||
|
||||
|
||||
const open = (points = [], badges = []) => {
|
||||
if (!Array.isArray(badges) || badges.length === 0) {
|
||||
console.error('badges 不是有效的数组或为空');
|
||||
return;
|
||||
}
|
||||
badgesList.value = badges;
|
||||
pointsList.value = points;
|
||||
|
||||
|
||||
|
||||
const open = (points) => {
|
||||
// pointsBadgeImg
|
||||
// pointsBadgeName
|
||||
console.log(points);
|
||||
popup.value.open();
|
||||
};
|
||||
defineExpose({ open, close });
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 日期
|
||||
.calendar-day {
|
||||
margin-top: 10rpx;
|
||||
text-align: center;
|
||||
// 隐藏展开时超过30天的样式
|
||||
&.hide.expand {
|
||||
.calendar-day-title {
|
||||
width: 70rpx;
|
||||
color: #fff;
|
||||
}
|
||||
.calendar-day-bg {
|
||||
display: none;
|
||||
.points-div {
|
||||
background-color: red;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.swiper {
|
||||
flex: 1;
|
||||
.swiper-item-div {
|
||||
// background-color: firebrick;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.img {
|
||||
width: 262rpx;
|
||||
height: 262rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.doct_icon {
|
||||
padding: 0%;
|
||||
display: flex;
|
||||
.doct_icon_div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.calendar-day-bg {
|
||||
width: 70rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 8rpx;
|
||||
// 前面日期，代表已签到
|
||||
width: 6vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
font-family: Arial, Arial;
|
||||
font-size: 32rpx;
|
||||
letter-spacing: -4rpx;
|
||||
.img {
|
||||
width: 32rpx;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
&.past {
|
||||
background-color: #ffd07c;
|
||||
}
|
||||
|
||||
// 未来日期，代表未签到
|
||||
&.future {
|
||||
color: #d88f50;
|
||||
font-weight: bold;
|
||||
background: #ffe6b8;
|
||||
border: 4rpx solid #ffd58a;
|
||||
}
|
||||
// 当前已签到和未签到
|
||||
&.signed.today {
|
||||
background-color: #ffd07c;
|
||||
}
|
||||
&.no-signed.today {
|
||||
color: #d88f50;
|
||||
font-weight: bold;
|
||||
background: #ffe6b8;
|
||||
border: 4rpx solid #ffd58a;
|
||||
}
|
||||
// 当天的签到小图标
|
||||
.check-in-tip {
|
||||
display: none;
|
||||
}
|
||||
&.today.no-signed > .check-in-tip {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
font-size: 20rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #fff;
|
||||
box-shadow: 0 0 4rpx #fef5e6;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
background-color: #f8831c;
|
||||
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
/* 2. 解决文字被边框挤压：清除默认内边距，重置行高 */
|
||||
padding: 0; /* 清除默认内边距（部分元素默认有padding） */
|
||||
line-height: 1; /* 行高与字体大小一致，避免垂直方向多余空间 */
|
||||
/* 3. 旋转30度（transform 旋转属性） */
|
||||
transform: translate(30%, -40%) rotate(-30deg);
|
||||
}
|
||||
}
|
||||
.calendar-day-title {
|
||||
margin: 4rpx 0;
|
||||
font-family: ArialMT;
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
line-height: 28rpx;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-Y {
|
||||
/**
|
||||
* 26rpx 主盒子内间距
|
||||
* 68rpx 标题高度
|
||||
* 128rpx 日历高度
|
||||
* 16rpx 日历下外间距
|
||||
* 92rpx 下方按钮盒子高度
|
||||
* 80rpx 切换盒子高度
|
||||
*/
|
||||
height: calc(100% - 26rpx - 68rpx - 128rpx - 16rpx - 92rpx - 80rpx - 8rpx);
|
||||
}
|
||||
.switch-div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 60rpx;
|
||||
margin: 10rpx 30%;
|
||||
.back_div {
|
||||
.back-icon {
|
||||
position: relative;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
cursor: pointer;
|
||||
}
|
||||
.back-icon::before,
|
||||
.back-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.back-icon::after {
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
border-top: 2rpx solid #bfbfbf;
|
||||
border-left: 2rpx solid #bfbfbf;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.calendar-div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 130rpx;
|
||||
transition: height 0.3s ease;
|
||||
&.expand {
|
||||
height: 650rpx;
|
||||
}
|
||||
.calendar-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 130rpx;
|
||||
}
|
||||
}
|
||||
.button-div {
|
||||
height: 92rpx;
|
||||
width: 442rpx;
|
||||
|
||||
@@ -41,10 +41,12 @@
|
||||
import { optionErrorIcon, optionSuccessIcon } from '@/common/imgSvg';
|
||||
import { addPointsByCheckIn, queryCheckIn } from '@/api/pointsAndRank.js';
|
||||
import common from '@/common/common';
|
||||
|
||||
const showData = ref({
|
||||
num: 1,
|
||||
tip:''
|
||||
});
|
||||
const badgesList =ref([]);
|
||||
const pointsList = ref([]);
|
||||
const popup = ref(null);
|
||||
const buttonColor = 'linear-gradient( 270deg, #F81758 0%, #FFA062 100%)';
|
||||
@@ -53,11 +55,19 @@
|
||||
};
|
||||
|
||||
const emits = defineEmits(['confirm']);
|
||||
const open = (points) => {
|
||||
const open = (points, badges=[]) => {
|
||||
if (!Array.isArray(points) || points.length === 0) {
|
||||
console.error('points 不是有效的数组或为空');
|
||||
// 积分为空直接调用完成
|
||||
emits(
|
||||
'confirm',
|
||||
status,
|
||||
points,
|
||||
badges
|
||||
);
|
||||
return;
|
||||
}
|
||||
badgesList.value = badges
|
||||
// 解构出第一项和剩余元素（原数组不变）
|
||||
const [firstItem, ...remainingPoints] = points;
|
||||
console.log('firstItem', firstItem);
|
||||
@@ -68,12 +78,14 @@
|
||||
const close = () => {
|
||||
popup.value.close();
|
||||
};
|
||||
|
||||
// 点击
|
||||
const clickFun = (status = true) => {
|
||||
emits(
|
||||
'confirm',
|
||||
status,
|
||||
pointsList.value
|
||||
pointsList.value,
|
||||
badgesList.value
|
||||
);
|
||||
};
|
||||
defineExpose({ open, close });
|
||||
|
||||
+2
-1
@@ -47,4 +47,5 @@ export const styleButton = {
|
||||
backgroundColor: '#E2EDFF',
|
||||
borderRadius: '8rpx'
|
||||
}
|
||||
}
|
||||
}
|
||||
export const pop_up_time = 500;
|
||||
@@ -28,21 +28,6 @@
|
||||
<image-preview :src="item.imgAddr" class="img" mode="widthFix"></image-preview>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<!-- <swiper-item class="">
|
||||
<view class="swiper-item-div">
|
||||
<image src="@/static/images/mascot/ma_2.png" class="img" mode="widthFix"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item class="">
|
||||
<view class="swiper-item-div">
|
||||
<image src="@/static/images/mascot/ma_3.png" class="img" mode="widthFix"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item class="">
|
||||
<view class="swiper-item-div">
|
||||
<image src="@/static/images/mascot/ma_4.png" class="img" mode="widthFix"></image>
|
||||
</view>
|
||||
</swiper-item> -->
|
||||
</swiper>
|
||||
<view class="doct_icon right" @click="doct_click(1)">
|
||||
<view class="doct_icon_div">
|
||||
|
||||
+16
-8
@@ -160,7 +160,7 @@
|
||||
></avatar-cropper>
|
||||
<checkIn ref="checkInRef" @checkInFun="checkInFun"></checkIn>
|
||||
<badge ref="badgeRef"></badge>
|
||||
<points ref="pointsRef" @confirm="pointsConfirm"></points>
|
||||
<points ref="pointsRef" @confirm="pointsConfirm"></points>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -183,6 +183,7 @@
|
||||
import checkIn from '@/components/points-and-badge/check-in';
|
||||
import badge from '@/components/points-and-badge/badge';
|
||||
import points from '@/components/points-and-badge/points';
|
||||
import {pop_up_time} from '@/enum';
|
||||
const { avatarCropperUrl, click_update_avatar, avatarCropperStatus, avatarOnCancel, avatarOnConfirm } = useUpdateAvatar({
|
||||
success: (userData) => {
|
||||
user_info.imageAddr = userData.imageAddr;
|
||||
@@ -247,18 +248,25 @@
|
||||
checkInRef.value.open(user_info.checkInToday, user_info.checkInDays);
|
||||
};
|
||||
// 签到成功回调
|
||||
const checkInFun = (status, points = [], pointsBadges = []) => {
|
||||
const checkInFun = (status, pointsList = [], badgesList = []) => {
|
||||
if (status) {
|
||||
getCheckInInfo();
|
||||
}
|
||||
pointsRef.value.open(points);
|
||||
// badgeRef.value.open(points);
|
||||
pointsRef.value.open(pointsList, badgesList);
|
||||
};
|
||||
|
||||
|
||||
// 积分确认
|
||||
const pointsConfirm = () => {
|
||||
|
||||
}
|
||||
const pointsConfirm = (status, pointsList = [], badgesList = []) => {
|
||||
console.log('xxx', status, pointsList, badgesList);
|
||||
pointsRef.value.close();
|
||||
if (badgesList.length > 0) {
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
badgeRef.value.open(pointsList, badgesList);
|
||||
}, pop_up_time);
|
||||
});
|
||||
}
|
||||
};
|
||||
const click_loginout = () => {
|
||||
common.show('确定退出登录？').then(async (res) => {
|
||||
if (!res) return;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Reference in New Issue
Block a user