|
@@ -0,0 +1,205 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view class="workbench-card">
|
|
|
|
|
+ <view class="workbench-card-header">
|
|
|
|
|
+ <view class="workbench-card-title">
|
|
|
|
|
+ <view class="workbench-card-title-main">众包广场</view>
|
|
|
|
|
+ <view class="workbench-card-title-desc">在众包广场领取任务包</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="workbench-card-action">
|
|
|
|
|
+ <view class="workbench-card-action-button" @click="handleGoTask"> 去领包 </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="workbench-card-summary">
|
|
|
|
|
+ <view class="workbench-card-summary-group" @click="handleOpenHistory">
|
|
|
|
|
+ <view class="workbench-card-summary-value">我的任务包</view>
|
|
|
|
|
+ <view class="workbench-card-summary-link">领包记录</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="workbench-card-summary-stat" @click="handleOpenOnTheWay">
|
|
|
|
|
+ <view
|
|
|
|
|
+ class="workbench-card-summary-value"
|
|
|
|
|
+ :class="{ 'workbench-card-summary-value-active': isLogin }"
|
|
|
|
|
+ >
|
|
|
|
|
+ {{ isLogin ? onTheWay : '-' }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="workbench-card-summary-label">进行中</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="workbench-card-summary-stat" @click="handleOpenWaitApprove">
|
|
|
|
|
+ <view
|
|
|
|
|
+ class="workbench-card-summary-value"
|
|
|
|
|
+ :class="{ 'workbench-card-summary-value-active': isLogin }"
|
|
|
|
|
+ >
|
|
|
|
|
+ {{ isLogin ? waitApprove : '-' }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="workbench-card-summary-label">待审批</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script setup lang="ts">
|
|
|
|
|
+/**
|
|
|
|
|
+ * WorkbenchCard
|
|
|
|
|
+ * - 只负责 UI 展示与抛出语义事件
|
|
|
|
|
+ * - 不负责路由、不负责业务判断
|
|
|
|
|
+ */
|
|
|
|
|
+
|
|
|
|
|
+type StatusType = 'on-the-way' | 'wait-approve'
|
|
|
|
|
+
|
|
|
|
|
+const props = defineProps<{
|
|
|
|
|
+ /** 是否登录(必填) */
|
|
|
|
|
+ isLogin: boolean
|
|
|
|
|
+ /** 进行中数量(展示值) */
|
|
|
|
|
+ onTheWay: number | string
|
|
|
|
|
+ /** 待审批数量(展示值) */
|
|
|
|
|
+ waitApprove: number | string
|
|
|
|
|
+}>()
|
|
|
|
|
+
|
|
|
|
|
+const emit = defineEmits<{
|
|
|
|
|
+ /** 去领包 */
|
|
|
|
|
+ (e: 'go-task'): void
|
|
|
|
|
+ /** 领包记录 */
|
|
|
|
|
+ (e: 'open-history'): void
|
|
|
|
|
+ /** 同一页面不同参数:状态入口 */
|
|
|
|
|
+ (e: 'open-status', type: StatusType): void
|
|
|
|
|
+}>()
|
|
|
|
|
+
|
|
|
|
|
+function handleGoTask(): void {
|
|
|
|
|
+ emit('go-task')
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function handleOpenHistory(): void {
|
|
|
|
|
+ emit('open-history')
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function handleOpenOnTheWay(): void {
|
|
|
|
|
+ emit('open-status', 'on-the-way')
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function handleOpenWaitApprove(): void {
|
|
|
|
|
+ emit('open-status', 'wait-approve')
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const { isLogin, onTheWay, waitApprove } = props
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
|
+.workbench-card {
|
|
|
|
|
+ width: 700rpx;
|
|
|
|
|
+ margin: 36rpx auto 0;
|
|
|
|
|
+ min-height: 280rpx;
|
|
|
|
|
+ background-image: url(https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/home_header_bg.png);
|
|
|
|
|
+ border-radius: 16rpx;
|
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
+ box-shadow: 0 8rpx 16rpx rgba(95, 163, 230, 0.19);
|
|
|
|
|
+ padding: 30rpx;
|
|
|
|
|
+ .workbench-card-header {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+
|
|
|
|
|
+ .workbench-card-title {
|
|
|
|
|
+ .workbench-card-title-main {
|
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ line-height: 50rpx;
|
|
|
|
|
+ color: #000;
|
|
|
|
|
+ }
|
|
|
|
|
+ .workbench-card-title-desc {
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ line-height: 34rpx;
|
|
|
|
|
+ color: var(--font-color-999);
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .workbench-card-action {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ .workbench-card-action-button {
|
|
|
|
|
+ height: 60rpx;
|
|
|
|
|
+ line-height: 60rpx;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ background-color: var(--main-color);
|
|
|
|
|
+ box-shadow: 0px 4rpx 4rpx rgba(0, 0, 0, 0.05);
|
|
|
|
|
+ width: 160rpx;
|
|
|
|
|
+ border-radius: 200rpx;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ .workbench-card-action-button::after {
|
|
|
|
|
+ content: '>';
|
|
|
|
|
+ margin-left: 8rpx;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .workbench-card-summary {
|
|
|
|
|
+ margin: 20rpx 0;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 128rpx;
|
|
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
|
|
+
|
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
|
+ border-radius: 24rpx;
|
|
|
|
|
+ border: 2rpx solid #e7f2ff;
|
|
|
|
|
+
|
|
|
|
|
+ /* 左侧:任务包入口 */
|
|
|
|
|
+ .workbench-card-summary-group {
|
|
|
|
|
+ min-width: 160rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+
|
|
|
|
|
+ .workbench-card-summary-value {
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ line-height: 45rpx;
|
|
|
|
|
+ color: var(--font-color-333);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .workbench-card-summary-link {
|
|
|
|
|
+ margin-top: 6rpx;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ line-height: 34rpx;
|
|
|
|
|
+ color: var(--font-color-999);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 中 / 右:状态项 */
|
|
|
|
|
+ .workbench-card-summary-stat {
|
|
|
|
|
+ width: 100rpx;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+
|
|
|
|
|
+ .workbench-card-summary-value {
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ line-height: 45rpx;
|
|
|
|
|
+ color: var(--font-color-999);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .workbench-card-summary-value-active {
|
|
|
|
|
+ font-size: 40rpx;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: var(--main-color);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .workbench-card-summary-label {
|
|
|
|
|
+ margin-top: 6rpx;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ line-height: 34rpx;
|
|
|
|
|
+ color: var(--font-color-666);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|