Commit 84efce3c authored by 王炽's avatar 王炽

666666

parent c57e08d0
No preview for this file type
.task_pop_overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 9999;
.task_pop_container {
width: 100%;
height: 1092rpx;
background: #F7F7F7;
border-radius: 24rpx 24rpx 0 0;
padding: 0rpx 30rpx 0rpx 30rpx;
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
animation: slideUp 0.3s ease-out;
.task_pop_header {
display: flex;
justify-content: center;
align-items: center;
margin-top: 26rpx;
margin-bottom: 26rpx;
position: relative;
.task_pop_title {
font-size: 40rpx;
font-weight: bold;
color: #D3A458;
text-align: center;
}
.close_button {
position: absolute;
right: 0;
bottom: 5rpx;
width: 54rpx;
height: 54rpx;
display: flex;
align-items: center;
justify-content: center;
.close_icon {
font-size: 50rpx;
color: #333333;
font-weight: bold;
line-height: 1;
}
}
}
.task_list {
height: 964rpx;
overflow-y: auto;
.task_item {
display: flex;
align-items: center;
background:#ffffff;// #f5f5f5;
border-radius: 24rpx;
margin-bottom: 20rpx;
padding-left: 20rpx;
padding-right: 20rpx;
height: 144rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
.task_icon {
width: 80rpx;
height: 80rpx;
background: #f5f0e8;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
.icon_img {
width: 50rpx;
height: 50rpx;
}
}
.task_content {
flex: 1;
display: flex;
flex-direction: column;
.task_title {
font-size: 28rpx;
color: #333333;
font-weight: 500;
margin-bottom: 8rpx;
}
.task_points {
font-size: 24rpx;
color: #999999;
}
}
.task_button {
background: #D3A458;
border-radius: 44rpx;
width: 160rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
.task_button_text {
font-size: 24rpx;
color: #ffffff;
font-weight: 500;
}
&:active {
transform: scale(0.95);
}
&.completed {
background: #F6DEB7;
// border: 1rpx solid #d4a468;
.task_button_text {
color: #ffffff;
font-size: 24rpx;
font-weight: 500;
}
}
}
}
}
}
}
@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
<template>
<view class="task_pop_overlay" v-if="visible" @click="handleClose">
<view class="task_pop_container" @click.stop>
<!-- 弹窗头部 -->
<view class="task_pop_header">
<text class="task_pop_title">做任务赚积分</text>
<view class="close_button" @click="handleClose">
<text class="close_icon">×</text>
</view>
</view>
<!-- 任务列表 -->
<view class="task_list">
<view
class="task_item"
v-for="(task, index) in taskList"
:key="index"
>
<view class="task_icon">
<image
class="icon_img"
:src="task.icon"
mode="aspectFit"
/>
</view>
<view class="task_content">
<text class="task_title">{{ task.title }}</text>
<text class="task_points">积分+{{ task.points }}</text>
</view>
<view
class="task_button"
:class="{ completed: task.completed }"
@click="handleTaskClick(task, index)"
>
<text class="task_button_text">{{ task.completed ? '已完成' : '去完成' }}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
// Props 定义
const props = defineProps({
visible: {
type: Boolean,
default: false
}
});
// Emits 定义
const emit = defineEmits(['close', 'taskClick']);
// 任务列表数据
const taskList = [
{
id: 1,
title: '完善信息',
points: 20,
icon: '/static/images/task_info.png',
completed: false
},
{
id: 2,
title: '邀请好友',
points: 20,
icon: '/static/images/task_invite.png',
completed: false
},
{
id: 3,
title: '浏览星妈优选商城',
points: 20,
icon: '/static/images/task_browse.png',
completed: false
},
{
id: 4,
title: '浏览星妈优选商城',
points: 20,
icon: '/static/images/task_browse.png',
completed: false
},
{
id: 5,
title: '关注公众号',
points: 20,
icon: '/static/images/task_follow.png',
completed: true
},
{
id: 6,
title: '添加企业微信',
points: 20,
icon: '/static/images/task_wechat.png',
completed: false
},
{
id: 6,
title: '添加企业微信',
points: 20,
icon: '/static/images/task_wechat.png',
completed: false
},
{
id: 6,
title: '添加企业微信',
points: 20,
icon: '/static/images/task_wechat.png',
completed: false
},
{
id: 6,
title: '添加企业微信',
points: 20,
icon: '/static/images/task_wechat.png',
completed: false
},
{
id: 6,
title: '添加企业微信',
points: 20,
icon: '/static/images/task_wechat.png',
completed: false
}
];
// 关闭弹窗
const handleClose = () => {
emit('close');
};
// 任务点击事件
const handleTaskClick = (task, index) => {
if (task.completed) {
// 已完成的任务不触发跳转
console.log('任务已完成:', task.title);
return;
}
emit('taskClick', { task, index });
};
</script>
<style lang="less" scoped>
@import '@/components/renwu/TaskPop.less';
</style>
...@@ -131,6 +131,15 @@ ...@@ -131,6 +131,15 @@
}, },
"channelTabListMianTitle": "有声频道", "channelTabListMianTitle": "有声频道",
"swiperList": [ "swiperList": [
{
"videoUrl": "",
"link": {
"type": 3,
"url": "https://fh0926-activity.dexfu.cn/customShare/share?id=Did1NjI2MjM"
},
"title": "1010星妈会talk",
"url": "homepage/homeSwiper/V1/feiheBannerH51010.jpg"
},
{ {
"videoUrl": "homepage/video3.mp4", "videoUrl": "homepage/video3.mp4",
"link": {}, "link": {},
...@@ -148,29 +157,6 @@ ...@@ -148,29 +157,6 @@
"link": {}, "link": {},
"title": "东北真行寻人", "title": "东北真行寻人",
"url": "homepage/homeSwiper/V1/dbzx.jpeg" "url": "homepage/homeSwiper/V1/dbzx.jpeg"
},
{
"videoUrl": "",
"link": {
"extra": {},
"type": 3,
"url": "https://fh0926-activity.dexfu.cn/customShare/share?id=Did1NjI1MzU"
},
"title": "晒出飞鹤宝宝",
"url": "homepage/homeSwiper/V1/scfhbb1.jpg"
},
{
"videoUrl": "",
"link": {
"extra": {
"envVersion": "release",
"appId": "wx4205ec55b793245e"
},
"type": 2,
"url": "/subPackages/shopMainList/topicNew/index?id=1001146"
},
"title": "双节28会员日",
"url": "homepage/homeSwiper/V1/13.jpg"
} }
], ],
"childrenInfoList": [ "childrenInfoList": [
......
...@@ -582,14 +582,14 @@ ...@@ -582,14 +582,14 @@
}, },
"vipActive": [ "vipActive": [
{ {
"img": "vipAct250910001.png", "img": "vipAct251009001.jpg",
"extra": { "extra": {
"envVersion": "release", "envVersion": "release",
"appId": "wx4205ec55b793245e" "appId": "wx4205ec55b793245e"
}, },
"type": 2, "type": 2,
"title": "黄糯玉米", "title": "兑换礼品",
"url": "/subPackages/shopMainProcess/product/index?productId=543558664688883066&skuId=543560605494007100" "url": "/subPackages/shopMainList/topicNew/index?id=1001165"
}, },
{ {
"img": "vipAct2.png", "img": "vipAct2.png",
......
...@@ -2,7 +2,8 @@ ...@@ -2,7 +2,8 @@
"success":true, "success":true,
"msg": "irure", "msg": "irure",
"code": "ut elit", "code": "ut elit",
"data": [ "data":
[
{ {
"resourcePositionType": "vip活动", "resourcePositionType": "vip活动",
"resourcePositionName": "星品榜单", "resourcePositionName": "星品榜单",
......
{
"banner1":{
"success":true,
"msg": "irure",
"code": "ut elit",
"data": [
{
"link": {
"type": "2",//1:内部小程序链接,2:外部小程序链接,3:h5链接
"label": "黄糯玉米",//跳转链接描述
"url": "/subPackages/shopMainProcess/product/index?productId=543558664688883066&skuId=543560605494007100",
"wxAppId": "wx4205ec55b793245e",//跳转链接的小程序id
"envVersion": "release"//跳转链接的版本
},
"imageUrl": "https://course.feihe.com/momclub-picture/integral/1022/vipAct250910001.png"//展示的banner图片
}
,
{
"link": {
"type": "2",//1:内部小程序链接,2:外部小程序链接,3:h5链接
"label": "黄糯玉米",//跳转链接描述
"url": "/subPackages/shopMainProcess/product/index?productId=543558664688883066&skuId=543560605494007100",
"wxAppId": "wx4205ec55b793245e",//跳转链接的小程序id
"envVersion": "release"//跳转链接的版本
},
"imageUrl": "https://course.feihe.com/momclub-picture/integral/1022/vipAct250910001.png"//展示的banner图片
}
]
},
"goodsList":[
{
"resourcePositionName": "星品榜单",
"resourcePositionGoods": [
{
"goodsName": "22222星飞帆4段儿童成长配...",//展示的商品名称
"goodsIcon": "https://course.feihe.com/momclub-picture/integral/1022/listItemImgJx0.png",//展示的商品图片
"credits": "750",//展示的积分价格
"priceMarket": "250",
"priceSale": "115",//展示的人民币价格
"price": "80",
"urlType": "2",//1:内部小程序链接,2:外部小程序链接,3:h5链接
"url": "subPackages/shopMainProcess/product/index?productId=632366292935447153&skuId=632366292935447154&entrySource=xmh_wechatmp_points_star",//跳转链接
"wxAppId": "wx4205ec55b793245e",//跳转链接的小程序id
"envVersion": "release"//跳转链接的版本
}
]
},
{
"resourcePositionName": "0元爆款",
"resourcePositionGoods": [
{
"goodsName": "22222星飞帆4段儿童成长配...",//展示的商品名称
"goodsIcon": "https://course.feihe.com/momclub-picture/integral/1022/listItemImgJx0.png",//展示的商品图片
"credits": "750",//展示的积分价格
"priceMarket": "250",
"priceSale": "115",//展示的人民币价格
"price": "80",
"urlType": "2",//1:内部小程序链接,2:外部小程序链接,3:h5链接
"url": "subPackages/shopMainProcess/product/index?productId=632366292935447153&skuId=632366292935447154&entrySource=xmh_wechatmp_points_star",
"wxAppId": "wx4205ec55b793245e",
"envVersion": "release"
}
]
},
{
"resourcePositionName": "北纬专场",
"resourcePositionGoods": [
{
"goodsName": "22222星飞帆4段儿童成长配...",//展示的商品名称
"goodsIcon": "https://course.feihe.com/momclub-picture/integral/1022/listItemImgJx0.png",//展示的商品图片
"credits": "750",//展示的积分价格
"priceMarket": "250",
"priceSale": "115",//展示的人民币价格
"price": "80",
"urlType": "2",//1:内部小程序链接,2:外部小程序链接,3:h5链接
"url": "subPackages/shopMainProcess/product/index?productId=632366292935447153&skuId=632366292935447154&entrySource=xmh_wechatmp_points_star",
"wxAppId": "wx4205ec55b793245e",
"envVersion": "release"
}
]
}
]
}
This diff is collapsed.
This diff is collapsed.
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