Skip to content

飞
飞鹤小程序
Commit c44f6126 authored by 王炽's avatar 王炽
Browse files
Options

任务修改动态布局

parent 7f2fbf2e
Hide whitespace changes
Inline Side-by-side
Showing with 209 additions and 7 deletions
components/renwu/TaskPop.less
View file @ c44f6126
......@@ -12,12 +12,14 @@
.task_pop_container {
width: 100%;
height: 1092rpx;
// height 通过动态样式设置
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;
display: flex;
flex-direction: column;
.task_pop_header {
display: flex;
......@@ -54,8 +56,7 @@
}
.task_list {
height: 964rpx;
overflow-y: auto;
// height 和 overflow-y 通过动态样式设置
.task_item {
display: flex;
......
components/renwu/TaskPop.vue
View file @ c44f6126
<template>
<view class="task_pop_overlay" v-if="visible" @click.stop>
<view class="task_pop_container" @click.stop>
<view class="task_pop_container" :style="{ height: containerHeight + 'rpx' }" @click.stop>
<!-- 弹窗头部 -->
<view class="task_pop_header">
<text class="task_pop_title">做任务赚积分</text>
......@@ -10,7 +10,7 @@
</view>
<!-- 任务列表 -->
<view class="task_list">
<view class="task_list" :style="{ height: taskListHeight + 'rpx', 'overflow-y': canScroll ? 'auto' : 'hidden' }">
<view
class="task_item"
v-for="(task, index) in props.taskTodo"
......@@ -42,7 +42,7 @@
</template>
<script setup>
import { defineProps, defineEmits, ref, onMounted, watch } from 'vue';
import { defineProps, defineEmits, ref, onMounted, watch, computed } from 'vue';
import { useIntegralStore } from '../../stores/integral';
import md from '../../md.js';
......@@ -58,6 +58,32 @@ const props = defineProps({
}
});
// 计算任务条数
const taskCount = computed(() => {
return props.taskTodo?.length || 0;
});
// 计算弹窗容器高度：100 + 条数 * 170，最多6条
const containerHeight = computed(() => {
const count = Math.min(taskCount.value, 6);
return 100 + count * 170;
});
// 计算任务列表高度：根据条数动态变化，最多6条时固定高度
const taskListHeight = computed(() => {
const count = taskCount.value;
if (count <= 6) {
return count * 170;
}
// 超过6条时，固定为6条的高度，内容可滚动
return 6 * 170;
});
// 判断是否可滚动：超过6条时可滚动
const canScroll = computed(() => {
return taskCount.value > 6;
});
onMounted(() => {
props.taskTodo.forEach(item => {
md.sensorComponentLogTake({
......
mock/getSigninAndTaskInMock.json
View file @ c44f6126
{"code":"000000","data":{"checkInTodo":{"checkInExtra":{"joinRecord":[{"coefficient":null,"credits":"5","index":"1","joined":false,"today":false},{"coefficient":null,"credits":"5","index":"2","joined":true,"today":true},{"coefficient":null,"credits":"6","index":"3","joined":false,"today":false},{"coefficient":null,"credits":"6","index":"4","joined":false,"today":false},{"coefficient":null,"credits":"6","index":"5","joined":false,"today":false},{"coefficient":null,"credits":"6","index":"6","joined":false,"today":false},{"coefficient":null,"credits":"6","index":"7","joined":false,"today":false}],"rule":null,"taskCode":null,"taskId":"1115","type":"CheckIn"},"id":1115,"name":"每日签到-修改"},"taskTodo":[{"id":1195,"name":"小哇演示","taskTodoExtra":{"credits":"20","desc":"小哇演示","extra":"{\"type\":\"GOODS\",\"value\":\"607028533731099656\",\"label\":\"飞鹤星飞帆1段婴儿配方奶粉一段700g（0-6月龄）JXH自营积分+现金1\",\"url\":\"#/goods/607028533731099656\",\"skuId\":\"607028533731099657\"}","icon":"https://firmus-member-test-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/manager/image/2025/10/28/xmh-mini-program_1761636548928_c8b83a5e3c4a40b5b8971f3acbd83362.png","limit":null,"sort":"1","status":"1","title":"小哇演示","type":"BROWSE_PAGE"}},{"id":1120,"name":"关注公众号","taskTodoExtra":{"credits":"10","desc":"关注公众号","extra":null,"icon":"https://firmus-member-test-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/manager/image/2025/10/19/xmh-mini-program_1760883654444_2791e90272af46f29fa07bf4ae90dd53.png","limit":null,"sort":"4","status":"1","title":"关注公众号","type":"FollowWx"}},{"id":1207,"name":"浏览test","taskTodoExtra":{"credits":"10","desc":"浏览test","extra":"{\"type\":\"SELF_GOODS\",\"value\":82,\"label\":\"飞鹤星飞帆1段婴儿配方奶粉xiaowa \",\"url\":\"#/goods/82\"}","icon":"https://firmus-member-test-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/manager/image/2025/10/28/xmh-mini-program_1761652747376_75e68bd480a34eea9ec5b693a8de65f5.png","limit":null,"sort":"10","status":"1","title":"浏览test","type":"BROWSE_PAGE"}},{"id":1127,"name":"消费任务消费任务消费任务","taskTodoExtra":{"credits":"100","desc":"消费任务副标题","extra":"[{\"itemFeaturesPayType\":\"7\",\"itemId\":\"825847777614046618\",\"pictUrl\":\"https://fh01-dev-bucket.oss-cn-beijing.aliyuncs.com/xxyx-fn_bp_bs/item-img/c9a1a676-48ce-7e9a-e7d7d0f70faa009b.jpg\",\"price\":\"100\",\"skuFeatures\":\"1\",\"skuId\":\"825847777614046619\",\"skuProperties\":\"435315499745502188:700462790409131774;435315875667965138:183166545774596244;\",\"skuStatus\":1,\"status\":1,\"storeName\":\"xgren联营店铺001分店\",\"title\":\"任相阁-黑人牙刷30支联营\"}]","icon":"https://firmus-member-test-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/manager/image/2025/10/21/xmh-mini-program_1761027269827_446aa82498834c3abb6b98126599308d.jpg","limit":null,"sort":"23","status":"3","title":"消费任务消费任务消费任务","type":"EXCHANGE_GOODS"}}]},"message":"success","ok":true,"success":true}
\ No newline at end of file
{
"code": "000000",
"data": {
"checkInTodo": {
"checkInExtra": {
"joinRecord": [
{
"coefficient": null,
"credits": "5",
"index": "1",
"joined": false,
"today": false
},
{
"coefficient": null,
"credits": "5",
"index": "2",
"joined": true,
"today": true
},
{
"coefficient": null,
"credits": "6",
"index": "3",
"joined": false,
"today": false
},
{
"coefficient": null,
"credits": "6",
"index": "4",
"joined": false,
"today": false
},
{
"coefficient": null,
"credits": "6",
"index": "5",
"joined": false,
"today": false
},
{
"coefficient": null,
"credits": "6",
"index": "6",
"joined": false,
"today": false
},
{
"coefficient": null,
"credits": "6",
"index": "7",
"joined": false,
"today": false
}
],
"rule": null,
"taskCode": null,
"taskId": "1115",
"type": "CheckIn"
},
"id": 1115,
"name": "每日签到-修改"
},
"taskTodo": [
{
"id": 1195,
"name": "小哇演示",
"taskTodoExtra": {
"credits": "20",
"desc": "小哇演示",
"extra": "{\"type\":\"GOODS\",\"value\":\"607028533731099656\",\"label\":\"飞鹤星飞帆1段婴儿配方奶粉一段700g（0-6月龄）JXH自营积分+现金1\",\"url\":\"#/goods/607028533731099656\",\"skuId\":\"607028533731099657\"}",
"icon": "https://firmus-member-test-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/manager/image/2025/10/28/xmh-mini-program_1761636548928_c8b83a5e3c4a40b5b8971f3acbd83362.png",
"limit": null,
"sort": "1",
"status": "1",
"title": "小哇演示",
"type": "BROWSE_PAGE"
}
},
{
"id": 1120,
"name": "关注公众号",
"taskTodoExtra": {
"credits": "10",
"desc": "关注公众号",
"extra": null,
"icon": "https://firmus-member-test-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/manager/image/2025/10/19/xmh-mini-program_1760883654444_2791e90272af46f29fa07bf4ae90dd53.png",
"limit": null,
"sort": "4",
"status": "1",
"title": "关注公众号",
"type": "FollowWx"
}
},
{
"id": 1207,
"name": "浏览test",
"taskTodoExtra": {
"credits": "10",
"desc": "浏览test",
"extra": "{\"type\":\"SELF_GOODS\",\"value\":82,\"label\":\"飞鹤星飞帆1段婴儿配方奶粉xiaowa \",\"url\":\"#/goods/82\"}",
"icon": "https://firmus-member-test-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/manager/image/2025/10/28/xmh-mini-program_1761652747376_75e68bd480a34eea9ec5b693a8de65f5.png",
"limit": null,
"sort": "10",
"status": "1",
"title": "浏览test",
"type": "BROWSE_PAGE"
}
},
{
"id": 1127,
"name": "消费任务消费任务消费任务",
"taskTodoExtra": {
"credits": "100",
"desc": "消费任务副标题",
"extra": "[{\"itemFeaturesPayType\":\"7\",\"itemId\":\"825847777614046618\",\"pictUrl\":\"https://fh01-dev-bucket.oss-cn-beijing.aliyuncs.com/xxyx-fn_bp_bs/item-img/c9a1a676-48ce-7e9a-e7d7d0f70faa009b.jpg\",\"price\":\"100\",\"skuFeatures\":\"1\",\"skuId\":\"825847777614046619\",\"skuProperties\":\"435315499745502188:700462790409131774;435315875667965138:183166545774596244;\",\"skuStatus\":1,\"status\":1,\"storeName\":\"xgren联营店铺001分店\",\"title\":\"任相阁-黑人牙刷30支联营\"}]",
"icon": "https://firmus-member-test-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/manager/image/2025/10/21/xmh-mini-program_1761027269827_446aa82498834c3abb6b98126599308d.jpg",
"limit": null,
"sort": "23",
"status": "3",
"title": "消费任务消费任务消费任务",
"type": "EXCHANGE_GOODS"
}
},
{
"id": 1127,
"name": "消费任务消费任务消费任务",
"taskTodoExtra": {
"credits": "100",
"desc": "消费任务副标题",
"extra": "[{\"itemFeaturesPayType\":\"7\",\"itemId\":\"825847777614046618\",\"pictUrl\":\"https://fh01-dev-bucket.oss-cn-beijing.aliyuncs.com/xxyx-fn_bp_bs/item-img/c9a1a676-48ce-7e9a-e7d7d0f70faa009b.jpg\",\"price\":\"100\",\"skuFeatures\":\"1\",\"skuId\":\"825847777614046619\",\"skuProperties\":\"435315499745502188:700462790409131774;435315875667965138:183166545774596244;\",\"skuStatus\":1,\"status\":1,\"storeName\":\"xgren联营店铺001分店\",\"title\":\"任相阁-黑人牙刷30支联营\"}]",
"icon": "https://firmus-member-test-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/manager/image/2025/10/21/xmh-mini-program_1761027269827_446aa82498834c3abb6b98126599308d.jpg",
"limit": null,
"sort": "23",
"status": "3",
"title": "消费任务消费任务消费任务",
"type": "EXCHANGE_GOODS"
}
},
{
"id": 1127,
"name": "消费任务消费任务消费任务",
"taskTodoExtra": {
"credits": "100",
"desc": "消费任务副标题",
"extra": "[{\"itemFeaturesPayType\":\"7\",\"itemId\":\"825847777614046618\",\"pictUrl\":\"https://fh01-dev-bucket.oss-cn-beijing.aliyuncs.com/xxyx-fn_bp_bs/item-img/c9a1a676-48ce-7e9a-e7d7d0f70faa009b.jpg\",\"price\":\"100\",\"skuFeatures\":\"1\",\"skuId\":\"825847777614046619\",\"skuProperties\":\"435315499745502188:700462790409131774;435315875667965138:183166545774596244;\",\"skuStatus\":1,\"status\":1,\"storeName\":\"xgren联营店铺001分店\",\"title\":\"任相阁-黑人牙刷30支联营\"}]",
"icon": "https://firmus-member-test-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/manager/image/2025/10/21/xmh-mini-program_1761027269827_446aa82498834c3abb6b98126599308d.jpg",
"limit": null,
"sort": "23",
"status": "3",
"title": "消费任务消费任务消费任务",
"type": "EXCHANGE_GOODS"
}
},
{
"id": 1127,
"name": "消费任务消费任务消费任务",
"taskTodoExtra": {
"credits": "100",
"desc": "消费任务副标题",
"extra": "[{\"itemFeaturesPayType\":\"7\",\"itemId\":\"825847777614046618\",\"pictUrl\":\"https://fh01-dev-bucket.oss-cn-beijing.aliyuncs.com/xxyx-fn_bp_bs/item-img/c9a1a676-48ce-7e9a-e7d7d0f70faa009b.jpg\",\"price\":\"100\",\"skuFeatures\":\"1\",\"skuId\":\"825847777614046619\",\"skuProperties\":\"435315499745502188:700462790409131774;435315875667965138:183166545774596244;\",\"skuStatus\":1,\"status\":1,\"storeName\":\"xgren联营店铺001分店\",\"title\":\"任相阁-黑人牙刷30支联营\"}]",
"icon": "https://firmus-member-test-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/manager/image/2025/10/21/xmh-mini-program_1761027269827_446aa82498834c3abb6b98126599308d.jpg",
"limit": null,
"sort": "23",
"status": "3",
"title": "消费任务消费任务消费任务",
"type": "EXCHANGE_GOODS"
}
}
]
},
"message": "success",
"ok": true,
"success": true
}
\ No newline at end of file
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