项目

packageA/project/modules/task/tabs/index.js

@@ -0,0 +1,101 @@
+const _Http = getApp().globalData.http;
+Component({
+    options: {
+        addGlobalClass: true
+    },
+    properties: {
+        sa_projectid: String,
+        sa_projstagetempid: String,
+        changeCallBack: Function
+    },
+    data: {
+        active: null, //现在阶段
+        viewIndex: 0, //查看阶段
+        range: [],
+        content: {
+            total: null
+        }
+    },
+    methods: {
+        getList(change = false) {
+            _Http.basic({
+                "id": 20221024102402,
+                "content": {
+                    "nacache": true,
+                    "sa_projectid": this.data.sa_projectid,
+                    "sa_projstagetempid": this.data.sa_projstagetempid
+                }
+            }).then(res => {
+                if (res.msg != '成功') return wx.showToast({
+                    title: res.data,
+                    icon: "none"
+                });
+                const active = res.data.findIndex(v => v.active == 1);
+                this.setData({
+                    list: res.data,
+                    active,
+                    viewIndex: active,
+                    range: res.data.map(v => v.stagename),
+                    "content.total": res.total
+                });
+                this.viewData(change);
+            })
+        },
+        /* 设置阶段 */
+        bindPickerChange(e) {
+            let {
+                value
+            } = e.detail, {
+                    stagename,
+                    sa_projectid,
+                    sa_projstagetempid,
+                    sa_project_stageid
+                } = this.data.list[value],
+                that = this;
+            if (value == this.data.active) return wx.showToast({
+                title: `当前已在${stagename}阶段`,
+                icon: "none"
+            })
+            wx.showModal({
+                title: '提示',
+                content: `是否进入${stagename} 阶段?`,
+                complete: ({
+                    confirm
+                }) => {
+                    if (confirm) _Http.basic({
+                        "id": 20221024160102,
+                        "content": {
+                            sa_projectid,
+                            sa_projstagetempid,
+                            sa_project_stageid
+                        }
+                    }).then(res => {
+                        if (res.msg == '成功') that.getList(true);
+                        wx.showToast({
+                            title: res.msg == '成功' ? `已进入${stagename} 阶段` : res.data,
+                            icon: "none"
+                        });
+                    })
+                }
+            })
+        },
+        /* 切换查看 */
+        changeViewItem(e) {
+            const {
+                index
+            } = e.currentTarget.dataset;
+            // if (this.data.viewIndex == index) return;
+            this.setData({
+                viewIndex: index
+            });
+            this.viewData(true);
+        },
+        viewData(change = false) {
+            this.triggerEvent("changeCallBack", {
+                list: this.data.list[this.data.viewIndex].work,
+                isFollow: this.data.viewIndex === this.data.active,
+                change
+            })
+        },
+    }
+})

packageA/project/modules/task/tabs/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

packageA/project/modules/task/tabs/index.scss

@@ -0,0 +1,81 @@
+.task-tabs-box {
+    position: relative;
+
+    .scroll {
+        width: 686rpx;
+        height: 84rpx;
+        background-color: #ffffff;
+        z-index: 9;
+
+        .box {
+            display: flex;
+
+            >.parallel:first-child {
+                margin-left: 15rpx;
+            }
+
+            .parallel {
+                flex-shrink: 0;
+                position: relative;
+                height: 64rpx;
+                background: #EEEEEE;
+                border-radius: 8rpx;
+                transform: skew(-8deg, 0);
+                margin-top: 20rpx;
+                box-sizing: border-box;
+                padding: 0 10rpx;
+                margin-right: 20rpx;
+
+                .mian {
+                    display: flex;
+                    align-items: center;
+                    height: 100%;
+                    padding: 0 30rpx;
+                    transform: skew(8deg, 0);
+
+                    .label {
+                        flex: 1;
+                        font-size: 24rpx;
+                        font-family: PingFang SC-Regular, PingFang SC;
+                        color: #666666;
+                        margin: 0 10rpx;
+                        text-align: center;
+                    }
+                }
+            }
+
+            .active {
+                background-color: #E7EEFF;
+
+                .mian {
+                    .label {
+                        color: #3874F6;
+                    }
+                }
+            }
+
+            .view-index {
+                background-color: #3874F6;
+
+                .mian {
+                    .label {
+                        color: #FFFFFF;
+                    }
+                }
+            }
+        }
+    }
+
+    .select {
+        position: absolute;
+        width: 64rpx;
+        height: 64rpx;
+        line-height: 64rpx;
+        text-align: center;
+        right: -20rpx;
+        top: 20rpx;
+        background-color: #ffffff;
+        transform: rotate(90deg);
+        color: #3874F6;
+    }
+}

packageA/project/modules/task/tabs/index.wxml

@@ -0,0 +1,14 @@
+<view class="task-tabs-box">
+    <scroll-view class="scroll" scroll-x>
+        <view class="box">
+            <navigator url="#" class="parallel {{active==index?'active':''}} {{viewIndex==index?'view-index':''}}" wx:for="{{list}}" wx:key="item.sa_projstagetemp_stageid" data-index="{{index}}" bindtap="changeViewItem">
+                <view class="mian">
+                    <view class="label">{{item.stagename}}</view>
+                </view>
+            </navigator>
+        </view>
+    </scroll-view>
+    <picker bindchange="bindPickerChange" value="{{active}}" range="{{range}}" class="select">
+        <navigator url="#" class="iconfont icon-gengduo" />
+    </picker>
+</view>