php
/
zhjwxt
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

添加合同签订模块

master
王泽彦 9 months ago
parent
598ba0e24e
commit
b8be3c784d
4 changed files with 85 additions and 230 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      uniapp/pages.json
  2. 88
      uniapp/pages/common/contract/contract_detail.vue
  3. 130
      uniapp/pages/common/contract/contract_sign.vue
  4. 79
      uniapp/pages/common/contract/my_contract.vue

18
uniapp/pages.json
View File

@ -241,9 +241,9 @@
"path": "pages/common/contract/my_contract", "path": "pages/common/contract/my_contract",
"style": { "style": {
"navigationBarTitleText": "我的合同", "navigationBarTitleText": "我的合同",
"navigationStyle": "custom", "navigationStyle": "default",
"navigationBarBackgroundColor": "#fff", "navigationBarBackgroundColor": "#29d3b4",
"navigationBarTextStyle": "black", "navigationBarTextStyle": "white",
"enablePullDownRefresh": true "enablePullDownRefresh": true
} }
}, },
@ -251,18 +251,18 @@
"path": "pages/common/contract/contract_detail", "path": "pages/common/contract/contract_detail",
"style": { "style": {
"navigationBarTitleText": "合同详情", "navigationBarTitleText": "合同详情",
"navigationStyle": "custom", "navigationStyle": "default",
"navigationBarBackgroundColor": "#fff", "navigationBarBackgroundColor": "#29d3b4",
"navigationBarTextStyle": "black" "navigationBarTextStyle": "white"
} }
}, },
{ {
"path": "pages/common/contract/contract_sign", "path": "pages/common/contract/contract_sign",
"style": { "style": {
"navigationBarTitleText": "合同签订", "navigationBarTitleText": "合同签订",
"navigationStyle": "custom", "navigationStyle": "default",
"navigationBarBackgroundColor": "#fff", "navigationBarBackgroundColor": "#29d3b4",
"navigationBarTextStyle": "black" "navigationBarTextStyle": "white"
} }
}, },

88
uniapp/pages/common/contract/contract_detail.vue
View File

@ -1,17 +1,5 @@
<template> <template>
<view class="contract-detail-container"> <view class="contract-detail-container">
<!-- 自定义导航栏 -->
<view class="custom-nav">
<view class="nav-left" @click="goBack">
<text class="iconfont icon-arrow-left"></text>
</view>
<view class="nav-title">合同详情</view>
<view class="nav-right">
<view v-if="contractData.sign_file" class="share-btn" @click="shareContract">
<text class="iconfont icon-share"></text>
</view>
</view>
</view>
<!-- 加载状态 --> <!-- 加载状态 -->
<view v-if="loading" class="loading-container"> <view v-if="loading" class="loading-container">
@ -176,17 +164,13 @@ export default {
} }
}, },
methods: { methods: {
// 返回上一页
goBack() {
uni.navigateBack()
},
// 加载合同详情 // 加载合同详情
async loadContractDetail() { async loadContractDetail() {
this.loading = true this.loading = true
try { try {
const response = await apiRoute.get('contract/detail', { const response = await apiRoute.get('/contract/detail', {
id: this.contractId id: this.contractId
}) })
@ -388,46 +372,10 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.contract-detail-container { .contract-detail-container {
min-height: 100vh; min-height: 100vh;
background-color: #f5f5f5; background-color: #1a1a1a;
padding-bottom: 120rpx; padding-bottom: 120rpx;
} }
/* 自定义导航栏 */
.custom-nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 88rpx;
padding: 0 32rpx;
background-color: #fff;
border-bottom: 1rpx solid #e5e5e5;
position: sticky;
top: 0;
z-index: 100;
.nav-left, .nav-right {
width: 80rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
.iconfont {
font-size: 36rpx;
color: #333;
}
}
.nav-title {
font-size: 36rpx;
font-weight: 600;
color: #333;
}
.share-btn {
cursor: pointer;
}
}
/* 合同内容 */ /* 合同内容 */
.contract-content { .contract-content {
@ -493,17 +441,18 @@ export default {
/* 信息区块 */ /* 信息区块 */
.info-section, .template-section, .signature-section, .history-section { .info-section, .template-section, .signature-section, .history-section {
background-color: #fff; background-color: #2a2a2a;
border-radius: 16rpx; border-radius: 16rpx;
padding: 32rpx; padding: 32rpx;
margin-bottom: 24rpx; margin-bottom: 24rpx;
border: 1rpx solid #444;
.section-title { .section-title {
font-size: 32rpx; font-size: 32rpx;
font-weight: 600; font-weight: 600;
color: #333; color: #fff;
margin-bottom: 24rpx; margin-bottom: 24rpx;
border-left: 6rpx solid #007ACC; border-left: 6rpx solid #29d3b4;
padding-left: 16rpx; padding-left: 16rpx;
} }
} }
@ -520,14 +469,14 @@ export default {
.info-label { .info-label {
font-size: 28rpx; font-size: 28rpx;
color: #666; color: #999;
width: 140rpx; width: 140rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.info-value { .info-value {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #ccc;
flex: 1; flex: 1;
} }
} }
@ -538,9 +487,10 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 24rpx; padding: 24rpx;
background-color: #f8f9fa; background-color: #1a1a1a;
border-radius: 12rpx; border-radius: 12rpx;
cursor: pointer; cursor: pointer;
border: 1rpx solid #444;
.template-icon { .template-icon {
width: 60rpx; width: 60rpx;
@ -548,7 +498,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #007ACC; background-color: #29d3b4;
border-radius: 12rpx; border-radius: 12rpx;
margin-right: 20rpx; margin-right: 20rpx;
@ -563,7 +513,7 @@ export default {
.template-name { .template-name {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #fff;
font-weight: 500; font-weight: 500;
display: block; display: block;
margin-bottom: 8rpx; margin-bottom: 8rpx;
@ -584,7 +534,7 @@ export default {
.iconfont { .iconfont {
font-size: 24rpx; font-size: 24rpx;
color: #999; color: #666;
} }
} }
} }
@ -643,7 +593,7 @@ export default {
flex-shrink: 0; flex-shrink: 0;
&.active { &.active {
background-color: #007ACC; background-color: #29d3b4;
} }
} }
@ -652,7 +602,7 @@ export default {
.history-title { .history-title {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #fff;
font-weight: 500; font-weight: 500;
display: block; display: block;
margin-bottom: 8rpx; margin-bottom: 8rpx;
@ -672,9 +622,9 @@ export default {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: #fff; background-color: #2a2a2a;
padding: 24rpx 32rpx; padding: 24rpx 32rpx;
border-top: 1rpx solid #e5e5e5; border-top: 1rpx solid #444;
z-index: 100; z-index: 100;
.action-btn { .action-btn {
@ -689,11 +639,11 @@ export default {
justify-content: center; justify-content: center;
&.primary { &.primary {
background-color: #007ACC; background-color: #29d3b4;
color: #fff; color: #fff;
&:active { &:active {
background-color: #0056b3; background-color: #22b39a;
} }
} }

130
uniapp/pages/common/contract/contract_sign.vue
View File

@ -1,15 +1,9 @@
<template> <template>
<view class="contract-sign-container"> <view class="contract-sign-container">
<!-- 自定义导航栏 --> <!-- 顶部操作栏 -->
<view class="custom-nav"> <view class="top-actions">
<view class="nav-left" @click="goBack"> <view class="clear-btn" @click="clearSignature">
<text class="iconfont icon-arrow-left"></text> <text class="clear-text">清除签名</text>
</view>
<view class="nav-title">合同签订</view>
<view class="nav-right">
<view class="clear-btn" @click="clearSignature">
<text class="clear-text">清除</text>
</view>
</view> </view>
</view> </view>
@ -341,7 +335,7 @@ export default {
} }
// 提交签名信息 // 提交签名信息
const response = await apiRoute.post('contract/sign', { const response = await apiRoute.post('/contract/sign', {
contract_id: this.contractId, contract_id: this.contractId,
sign_file: uploadResult.url sign_file: uploadResult.url
}) })
@ -414,22 +408,6 @@ export default {
}) })
}, },
// 返回上一页
goBack() {
if (this.hasSigned) {
uni.showModal({
title: '提示',
content: '您的签名尚未保存，确定要离开吗？',
success: (res) => {
if (res.confirm) {
uni.navigateBack()
}
}
})
} else {
uni.navigateBack()
}
}
} }
} }
</script> </script>
@ -437,53 +415,24 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.contract-sign-container { .contract-sign-container {
min-height: 100vh; min-height: 100vh;
background-color: #f5f5f5; background-color: #1a1a1a;
padding-bottom: 120rpx; padding-bottom: 120rpx;
} }
/* 自定义导航栏 */ /* 顶部操作栏 */
.custom-nav { .top-actions {
display: flex; display: flex;
align-items: center; justify-content: flex-end;
justify-content: space-between; padding: 20rpx 32rpx;
height: 88rpx;
padding: 0 32rpx;
background-color: #fff;
border-bottom: 1rpx solid #e5e5e5;
position: sticky;
top: 0;
z-index: 100;
.nav-left {
width: 80rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
.iconfont {
font-size: 36rpx;
color: #333;
}
}
.nav-title { .clear-btn {
font-size: 36rpx; padding: 12rpx 24rpx;
font-weight: 600; background-color: #29d3b4;
color: #333; border-radius: 8rpx;
}
.nav-right { .clear-text {
width: 80rpx; font-size: 28rpx;
display: flex; color: #fff;
align-items: center;
justify-content: center;
.clear-btn {
.clear-text {
font-size: 28rpx;
color: #007ACC;
}
} }
} }
} }
@ -493,22 +442,23 @@ export default {
padding: 20rpx; padding: 20rpx;
.info-card { .info-card {
background-color: #fff; background-color: #2a2a2a;
border-radius: 16rpx; border-radius: 16rpx;
padding: 32rpx; padding: 32rpx;
text-align: center; text-align: center;
border: 1rpx solid #444;
.contract-name { .contract-name {
font-size: 32rpx; font-size: 32rpx;
font-weight: 600; font-weight: 600;
color: #333; color: #fff;
display: block; display: block;
margin-bottom: 16rpx; margin-bottom: 16rpx;
} }
.sign-tip { .sign-tip {
font-size: 26rpx; font-size: 26rpx;
color: #666; color: #999;
} }
} }
} }
@ -525,7 +475,7 @@ export default {
.title-text { .title-text {
font-size: 30rpx; font-size: 30rpx;
font-weight: 600; font-weight: 600;
color: #333; color: #fff;
display: block; display: block;
margin-bottom: 8rpx; margin-bottom: 8rpx;
} }
@ -543,7 +493,7 @@ export default {
border-radius: 16rpx; border-radius: 16rpx;
margin-bottom: 32rpx; margin-bottom: 32rpx;
overflow: hidden; overflow: hidden;
border: 2rpx dashed #e5e5e5; border: 2rpx dashed #29d3b4;
.signature-canvas { .signature-canvas {
width: 100%; width: 100%;
@ -574,9 +524,10 @@ export default {
/* 签名工具栏 */ /* 签名工具栏 */
.signature-tools { .signature-tools {
background-color: #fff; background-color: #2a2a2a;
border-radius: 16rpx; border-radius: 16rpx;
padding: 24rpx; padding: 24rpx;
border: 1rpx solid #444;
.tool-group { .tool-group {
display: flex; display: flex;
@ -589,7 +540,7 @@ export default {
.tool-label { .tool-label {
font-size: 26rpx; font-size: 26rpx;
color: #666; color: #ccc;
margin-right: 20rpx; margin-right: 20rpx;
min-width: 120rpx; min-width: 120rpx;
} }
@ -607,7 +558,7 @@ export default {
cursor: pointer; cursor: pointer;
&.active { &.active {
border-color: #007ACC; border-color: #29d3b4;
} }
} }
} }
@ -627,8 +578,8 @@ export default {
cursor: pointer; cursor: pointer;
&.active { &.active {
border-color: #007ACC; border-color: #29d3b4;
background-color: #f0f8ff; background-color: rgba(41, 211, 180, 0.1);
} }
.width-preview { .width-preview {
@ -647,15 +598,16 @@ export default {
.preview-title { .preview-title {
font-size: 30rpx; font-size: 30rpx;
font-weight: 600; font-weight: 600;
color: #333; color: #fff;
text-align: center; text-align: center;
margin-bottom: 24rpx; margin-bottom: 24rpx;
} }
.preview-image-container { .preview-image-container {
background-color: #fff; background-color: #2a2a2a;
border-radius: 16rpx; border-radius: 16rpx;
padding: 32rpx; padding: 32rpx;
border: 1rpx solid #444;
.preview-image { .preview-image {
width: 100%; width: 100%;
@ -670,9 +622,9 @@ export default {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: #fff; background-color: #2a2a2a;
padding: 24rpx 32rpx; padding: 24rpx 32rpx;
border-top: 1rpx solid #e5e5e5; border-top: 1rpx solid #444;
display: flex; display: flex;
gap: 24rpx; gap: 24rpx;
z-index: 100; z-index: 100;
@ -689,25 +641,25 @@ export default {
justify-content: center; justify-content: center;
&.primary { &.primary {
background-color: #007ACC; background-color: #29d3b4;
color: #fff; color: #fff;
&:active:not(:disabled) { &:active:not(:disabled) {
background-color: #0056b3; background-color: #22b39a;
} }
&:disabled { &:disabled {
background-color: #ccc; background-color: #666;
color: #999; color: #999;
} }
} }
&.secondary { &.secondary {
background-color: #f5f5f5; background-color: #444;
color: #666; color: #ccc;
&:active { &:active {
background-color: #e5e5e5; background-color: #555;
} }
} }
} }
@ -791,7 +743,7 @@ export default {
border: none; border: none;
&.primary { &.primary {
background-color: #007ACC; background-color: #29d3b4;
color: #fff; color: #fff;
} }

79
uniapp/pages/common/contract/my_contract.vue
View File

@ -1,13 +1,5 @@
<template> <template>
<view class="contract-container"> <view class="contract-container">
<!-- 自定义导航栏 -->
<view class="custom-nav">
<view class="nav-left" @click="goBack">
<text class="iconfont icon-arrow-left"></text>
</view>
<view class="nav-title">我的合同</view>
<view class="nav-right"></view>
</view>
<!-- 筛选栏 --> <!-- 筛选栏 -->
<view class="filter-bar"> <view class="filter-bar">
@ -133,10 +125,6 @@ export default {
} }
}, },
methods: { methods: {
// 返回上一页
goBack() {
uni.navigateBack()
},
// 加载合同列表 // 加载合同列表
async loadContracts(refresh = false) { async loadContracts(refresh = false) {
@ -150,7 +138,7 @@ export default {
this.loadMoreStatus = 'loading' this.loadMoreStatus = 'loading'
try { try {
const response = await apiRoute.get('contract/myContracts', { const response = await apiRoute.get('/contract/myContracts', {
page: this.currentPage, page: this.currentPage,
limit: this.pageSize limit: this.pageSize
}) })
@ -245,65 +233,29 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.contract-container { .contract-container {
min-height: 100vh; min-height: 100vh;
background-color: #f5f5f5; background-color: #1a1a1a;
} }
/* 自定义导航栏 */
.custom-nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 88rpx;
padding: 0 32rpx;
background-color: #fff;
border-bottom: 1rpx solid #e5e5e5;
position: sticky;
top: 0;
z-index: 100;
.nav-left {
width: 80rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
.iconfont {
font-size: 36rpx;
color: #333;
}
}
.nav-title {
font-size: 36rpx;
font-weight: 600;
color: #333;
}
.nav-right {
width: 80rpx;
}
}
/* 筛选栏 */ /* 筛选栏 */
.filter-bar { .filter-bar {
display: flex; display: flex;
background-color: #fff; background-color: #2a2a2a;
padding: 24rpx 32rpx; padding: 24rpx 32rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
border-bottom: 1rpx solid #e5e5e5; border-bottom: 1rpx solid #444;
.filter-item { .filter-item {
flex: 1; flex: 1;
text-align: center; text-align: center;
padding: 16rpx 24rpx; padding: 16rpx 24rpx;
font-size: 28rpx; font-size: 28rpx;
color: #666; color: #ccc;
border-radius: 8rpx; border-radius: 8rpx;
transition: all 0.3s; transition: all 0.3s;
&.active { &.active {
background-color: #007ACC; background-color: #29d3b4;
color: #fff; color: #fff;
} }
} }
@ -319,10 +271,11 @@ export default {
} }
.contract-card { .contract-card {
background-color: #fff; background-color: #2a2a2a;
border-radius: 16rpx; border-radius: 16rpx;
padding: 32rpx; padding: 32rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06); box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
border: 1rpx solid #444;
} }
.contract-header { .contract-header {
@ -337,7 +290,7 @@ export default {
.title-text { .title-text {
font-size: 32rpx; font-size: 32rpx;
font-weight: 600; font-weight: 600;
color: #333; color: #fff;
display: block; display: block;
margin-bottom: 12rpx; margin-bottom: 12rpx;
} }
@ -372,7 +325,7 @@ export default {
.iconfont { .iconfont {
font-size: 24rpx; font-size: 24rpx;
color: #999; color: #666;
} }
} }
} }
@ -384,14 +337,14 @@ export default {
.info-label { .info-label {
font-size: 26rpx; font-size: 26rpx;
color: #666; color: #999;
width: 140rpx; width: 140rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.info-value { .info-value {
font-size: 26rpx; font-size: 26rpx;
color: #333; color: #ccc;
flex: 1; flex: 1;
} }
} }
@ -405,7 +358,7 @@ export default {
.sign-btn { .sign-btn {
width: 100%; width: 100%;
height: 72rpx; height: 72rpx;
background-color: #007ACC; background-color: #29d3b4;
color: #fff; color: #fff;
border: none; border: none;
border-radius: 12rpx; border-radius: 12rpx;
@ -416,7 +369,7 @@ export default {
justify-content: center; justify-content: center;
&:active { &:active {
background-color: #0056b3; background-color: #22b39a;
} }
} }
} }
@ -438,7 +391,7 @@ export default {
.empty-text { .empty-text {
font-size: 28rpx; font-size: 28rpx;
color: #999; color: #666;
} }
} }

Write Preview
Loading…
Cancel
Save