recruitment-wechat-uniapp-241012/pages_order/contract/contract.vue

<template>
    <!-- 电子合同 -->
    <view>
        <navbar title="电子合同" leftClick @leftClick="$utils.navigateBack" />

        <view class="">
            <uv-tabs :list="tabs" lineColor="#3796F8" lineHeight="8rpx" lineWidth="50rpx" :scrollable="false"
                @click="clickTabs"></uv-tabs>

        </view>

        <view class="content">
            <view class="projectContent" v-for="(item, index) in list" :key="index">
                <view class="item">
                    <image src="/static/image/contract/contract.png" mode="aspectFill" />
                    <view class="itemList">
                        <view class="projectName">
                            {{ item.title }}
                            <text class="status" :class="{
                                'status-pending': role ? item.bossStatus === 0 : item.employeeStatus === 0,
                                'status-signed': role ? item.bossStatus === 1 : item.employeeStatus === 1,
                                'status-completed': role ? item.bossStatus === 2 : item.employeeStatus === 2
                            }">
                                {{ role ?
                                    (item.bossStatus === 0 ? '待签署' : item.bossStatus === 1 ? '已签署' : '已完成') :
                                    (item.employeeStatus === 0 ? '待签署' : item.employeeStatus === 1 ? '已签署' : '已完成')
                                }}
                            </text>
                        </view>
                        <view class="buyer">甲方：{{ item.companyName }}</view>
                        <view class="seller">乙方：{{ item.employeeName }}</view>
                    </view>
                    <view class="actions">
                        <view class="view-btn" @click="showPDF(item)">
                            <uv-icon name="eye" color="#2979ff" size="30rpx"></uv-icon>
                            <text>查看</text>
                        </view>
                        <view class="sign-btn"
                            v-if="(role && item.bossStatus === 0) || (!role && item.employeeStatus === 0)"
                            @click.stop="$utils.navigateTo('/pages_order/contract/electronicSignature?id=' + item.id)">
                            <uv-icon name="edit-pen" color="#fff" size="30rpx"></uv-icon>
                            <text>签署</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import mixinList from '@/mixins/list.js'
import { mapState } from 'vuex'
export default {
    mixins: [mixinList],
    data() {
        return {
            tabs: [
                {
                    name: '全部合同'
                },
                {
                    name: '待我签署'
                },
                {
                    name: '他人签署'
                },
                {
                    name: '签约完成'
                },
            ],
            type: 0,
            mixinsListApi: 'queryContractList',
            contractUrl : '',
        }
    },
    computed: {
    },
    onLoad() {
        this.queryParams.role = this.role ? 1 : 0
    },
    methods: {
        clickTabs({ index }) {
            this.type = index
            if (index == 0) {
                delete this.queryParams.status
            }
            this.queryParams.status = index
            this.getData()
        },
        openPDF() {
			console.log(uni.getSystemInfoSync().platform);
            switch (uni.getSystemInfoSync().platform) {
                // case "android":
                //     console.log("安卓");
                //     this.androidOpenPdf(this.contractUrl);
                //     break;
                // case "ios":
                //     console.log("IOS");
                //     uni.navigateTo({
                //         url: "/pages_order/contract/webview?contractUrl=" + this.contractUrl,
                //     });
                //     break;
                default:
                    this.androidOpenPdf(this.contractUrl);
                    break;
            }
        },
        androidOpenPdf(filePath){
			uni.downloadFile({
			    url: filePath,
			    success: res => {
					console.log('下载PDF成功');
			        uni.openDocument({
			            filePath : res.filePath || res.tempFilePath,
			            showMenu: true,
			        })
			    },
				fail(err) {
					console.log(err);
				}
			})
        },
        showPDF(item) {

            // this.$utils.
            // navigateTo('/pages_order/contract/contractDetail?id=' 
            // + item.id)
			this.contractUrl = item.contract

            // 只能查看内容的时候
            if (this.role && item.bossStatus != 0 ||
                item.employeeStatus != 0 && !this.role
            ) {
				this.openPDF()
                return
            }

            uni.showModal({
                title: '您希望的操作是？！',
                cancelText: '签署合同',
                confirmText: '查看内容',
                success: e => {
                    if (e.confirm) {
						this.openPDF()
                    } else {
                        this.$utils.
                            navigateTo('/pages_order/contract/electronicSignature?id='
                                + item.id)
                    }
                }
            })
        },
    }
}
</script>

<style scoped lang="scss">
.content {
    width: 100%;
    height: 100%;

    .projectContent {
        background-color: #fff;
        display: flex;
        margin: 30rpx;
        border-radius: 20rpx;

        .item {
            display: flex;
            width: 100%;
            padding: 20rpx;

            image {
                width: 140rpx;
                height: 120rpx;
                margin-right: 20rpx;
            }

            .itemList {
                flex: 1;

                .projectName {
                    font-size: 32rpx;
                    font-weight: bold;
                    margin-bottom: 16rpx;
                    display: flex;
                    align-items: center;

                    .status {
                        font-size: 24rpx;
                        padding: 4rpx 16rpx;
                        border-radius: 20rpx;
                        margin-left: 16rpx;

                        &.status-pending {
                            background-color: #E6F7FF;
                            color: #1890FF;
                        }

                        &.status-signed {
                            background-color: #F6FFED;
                            color: #52C41A;
                        }

                        &.status-completed {
                            background-color: #F5F5F5;
                            color: #666666;
                        }
                    }
                }

                .buyer,
                .seller {
                    font-size: 24rpx;
                    color: #666;
                    margin-top: 8rpx;
                }
            }

            .actions {
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 16rpx;

                .view-btn,
                .sign-btn {
                    display: flex;
                    align-items: center;
                    padding: 12rpx 24rpx;
                    border-radius: 30rpx;
                    background-color: #F0F7FF;

                    text {
                        color: #2979ff;
                        font-size: 24rpx;
                        margin-left: 8rpx;
                    }
                }

                .sign-btn {
                    background-color: #2979ff;

                    text,
                    uv-icon {
                        color: #fff;
                    }
                }
            }
        }
    }
}
</style>