OfficeApp/subpkg/shareCapital/shareCapital.vue

<template>
  <view style="padding-bottom: 160rpx;">
    <view class="price_card">
      <view>账户入股金额</view>
      <view><text class="money">{{shareholder.shareholder_money}}</text>元</view>
    </view>
    <view v-if="!is_village" style="text-align: center;color: #aaa;">暂无村公司</view>
    <view class="card" v-else-if="shareholder.is_contract">
      <view class="contract">
        <view class="left">
          <image class="contract_img" src="../../static/img/contract/pdf.png"></image>
          <view class="text">
            <view class="name">《股金合同》</view>
            <view>
              <text>{{shareholder.contract_time}}</text>
            </view>
          </view>
        </view>
        <view class="right" @click="navToContract(shareholder.contract_url)">
          <uni-icons type="paperclip" color="#3274F9"></uni-icons>
          <view>查看</view>
        </view>
      </view>
    </view>
    <view class="need_contract" v-else>
    	<button v-if="shareholder.check_status==0" class="btns" style="width: 694rpx;height: 90rpx; margin: 0 auto;border-radius: 54rpx;overflow: hidden;background-color: #0122c7;color: #fff;" @click="clickContract(1)">
    		<u-icon name="../../static/img/company/HT.png" size="20" style="margin-right: 10rpx;"></u-icon>
    		发起合同
    	</button>
    	<view v-if="shareholder.check_status==1">
    		<button class="btn tips_center">合同已生成,请等待审核</button>
    	</view>
    	<view v-if="shareholder.check_status==2" class="card">
    		<view class="contract_box send">
    			<view class="left">
    				<image class="contract_img" src="../../static/img/contract/pdf.png"></image>
    				<view class="text">
    					<view class="name">《股金合同》</view>
    					<view>
    						<text>{{shareholder.contract_time}}</text>
    					</view>
    				</view>
    			</view>
    			<view class="right" @click="navToContract(shareholder.contract_url)">
    				<!-- <image class="icon"></image> -->
    				<uni-icons type="paperclip" color="#3274F9"></uni-icons>
    				<view>查看</view>
    			</view>
    		</view>
    		<u-line color="#999999FF" style="margin: 31rpx 0;"></u-line>
    		<view class="bottom">
    			<button class="send_btn" @click="clickContract(2)">发送合同</button>
    		</view>
    	</view>
    	<view v-if="shareholder.check_status==3" class="card">
    		<view class="contract_box send">
    			<view class="left">
    				<image class="contract_img" src="../../static/img/contract/pdf.png"></image>
    				<view class="text">
    					<view class="name">《股金合同》</view>
    					<view>
    						<text>{{shareholder.contract_time}}</text>
    					</view>
    				</view>
    			</view>
    			<view class="right" @click="navToContract(shareholder.contract_url)">
    				<!-- <image class="icon"></image> -->
    				<uni-icons type="paperclip" color="#3274F9"></uni-icons>
    				<view>查看</view>
    			</view>
    		</view>
    		<u-line color="#999999FF" style="margin: 31rpx 0;"></u-line>
    		<view class="bottom">
    			<button class="send_btn" @click="getPostsms" v-if="timerCount==0">再次发送短信</button>
    			<button class="send_btn tips_center" v-else>{{cTimerCount+'秒后可继续再次发送短信'}}</button>
    		</view>
    	</view>
    </view>
    <view class="card">
      <view class="c_title">账单记录</view>
      <u-line></u-line>
      <u-steps style="padding: 28rpx;" :current="-1" direction="column" activeColor="#0122c7" dot
        inactiveColor="#0122c7">
        <u-steps-item v-for="(item, index) in list" :key="index" :title="item.update_time" :desc="item.remark">
        </u-steps-item>
        <u-loadmore :status="loadConfig.status" :loading-text="loadConfig.loadingText"
        	:loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" />
      </u-steps>
    </view>
    <!-- <view class="card">
      <view class="c_title">账单记录</view>
      <u-line></u-line>
      <view class="c_body" v-for="i in 3" :key="i">
        <image class="icon" src="/static/icons/share.png"></image>
        <view class="body_text">
          <view class="b_title">入股金额充值</view>
          <view class="b_text">
            <view class="b_text_left">
              <view>充值账户：</view>
              <image class="b_avatar" src="../../static/img/public/man.png"></image>
              <view>张三三</view>
            </view>
            <view class="b_text_right">+1000.00</view>
          </view>
          <view class="b_time">完成时间：2023-06-15 18:00</view>
        </view>
      </view>
    </view> -->
    <view class="button">
      <view class="retreat" @click="retreat">退股</view>
      <view class="hand" :class="{'disable': !shareholder.is_amount_turned||!shareholder.is_village}" @click="hand">上交</view>
    </view>
    <u-modal :show="modelShow" title="提醒" :content="modelType==1?'确定要生成合同吗':'请确认合同无误后再发送'" closeOnClickOverlay showCancelButton cancel-text="取消" confirm-text="确认" close="modelShow=false" @cancel="modelShow=false" @confirm="modelType==1?createContract():addContract();modelShow=false"></u-modal>
  </view>
</template>

<script>
  import { Toast } from '../../libs/uniApi';
  import {
    download_file
  } from "@/api/junziqian.js"
  import {
    companyAccountLog,
    companyShareholderInfo,
    initiateShareholderContract
  } from "@/api/shareholder.js"
  import {
  	companyView,
  	initiateContract,
  	Draftingcontracts,
  	postsms
  } from "@/api/company.js"
  import {
  	dictDataLists
  } from "@/api/oaPbulic.js"
  export default {
    data() {
      return {
        shareholder: {
          contract_url: "",
          is_contract: 0,
          shareholder_money: "0.00",
          contract_time: "",
          is_amount_turned: ""
        },
        list: [],
        loadConfig: {
        	page: 1,
        	limit: 25,
        	lastpage: '',
        	loadingText: '努力加载中',
        	loadmoreText: '轻轻上拉',
        	nomoreText: '没有更多记录了~~',
        	status: 'loadmore'
        },
        timer: null, // 计时器
        timerCount: 0, //倒计时
        modelShow: false,
        modelType: 1,
        nowContractType: 40, //当前合同类型, 40为股金合同
      };
    },
    onLoad(options) {
      this.initInfo();
      this.initLoad();
      let time = uni.getStorageSync('share_time' + this.id);
      if (time > 0 && (time - Date.now()) / 1000 > 0) {
      	this.startTimer((time - Date.now()) / 1000);
      }
    },
    onUnload() {
    	if (this.timerCount > 0) uni.setStorageSync('share_time' + this.id, this.timerCount * 1000 + Date.now());
    },
    computed: {
    	cTimerCount() {
    		return this.timerCount;
    	}
    },
    async onPullDownRefresh() {
      await this.initLoad();
      uni.stopPullDownRefresh();
    },
    onReachBottom() {
      this.loadList();
    },
    methods: {
      async initInfo() {
        let res = await companyShareholderInfo();
        this.shareholder = res.data;
      },
      async initLoad() {
      	this.loadConfig.page = 1;
      	this.loadConfig.status = "loadmore";
      	this.list = [];
      	await this.loadList();
      },
      async loadList(){
        if (this.loadConfig.status == "nomore") return;
        this.loadConfig.status = "loading";
        let res = await companyAccountLog({
        	page: this.loadConfig.page,
        	limit: this.loadConfig.limit
        })
        this.loadConfig.status = "loadmore"
        if (res.data.list.length < this.loadConfig.limit) {
        	this.loadConfig.status = "nomore"
        } else {
        	this.loadConfig.page++;
        }
        this.list = [...this.list, ...res.data.list];
      },
      navToContract(contract_no) {
        if (!contract_no) return Toast('暂无合同');
        return uni.navigateTo({
            url: `/subpkg/pdfView/pdfView?url=${contract_no}`
          })
        // download_file({
        //   applyNo: contract_no
        // }).then(res => {
        //   if (res.code != 1) {
        //     uni.hideLoading();
        //     Toast(res.msg)
        //   }
        //   uni.showLoading({
        //     title: '加载中',
        //     mask: true
        //   });
        //   uni.navigateTo({
        //     url: `/subpkg/pdfView/pdfView?url=${res.data.url}`,
        //     fail() {
        //       uni.hideLoading();
        //     }
        //   })
        // })
      },
      retreat() {
        Toast('暂无内容')
      },
      hand() {
        if(!this.shareholder.is_amount_turned) return Toast('暂时无法上交');
        Toast('暂无内容')
      },
      clickContract(e){
        this.modelType = e;
        this.modelShow = true;
      },
      // 生成合同
      async createContract(data) {
        uni.showLoading({
        	title: '合同生成中',
        	mask: true
        })
        let res = await initiateShareholderContract({
        	contract_type: this.nowContractType, //股金合同
        })
        this.initInfo();
        uni.hideLoading();
        Toast(res.msg || '合同已生成');
        this.navTo('/subpkg/submit/submit?type=' + 1);
      },
      // 发送合同
      async addContract(data) {
        try {
        	uni.showLoading({
        		title: '合同发送中',
        		mask: true
        	})
        	let res = await Draftingcontracts({
        		id: this.$store.state.app.userInfo.company_id,
            contract_type: this.nowContractType,
        	});
        	this.initInfo();
        	this.startTimer();
        	uni.hideLoading();
        	Toast('合同已发送');
        } catch (e) {
        	uni.hideLoading();
        	Toast(e.msg || '合同发送失败');
        }
      },
      // 发送短信
      async getPostsms() {
      	try {
      		uni.showLoading({
      			title: '发送中',
      			mask: true
      		})
      		if (this.timerCount == 0) {
      			this.startTimer();
      			let res = await postsms({
      				id: this.id
      			})
      			Toast('短信已发送');
      			// this.navTo('/subpkg/submit/submit');
      		}
      	} catch (e) {
      		uni.hideLoading();
      		Toast(e.msg || '短信发送失败');
      	}
      },
      // 定时器
      startTimer(time = 60) {
      	this.timerCount = time.toFixed(0);
      	this.timer = setInterval(() => {
      		this.timerCount--;
      		if (this.timerCount <= 0) {
      			clearInterval(this.timer);
      			this.loadUserDetail();
      		}
      	}, 1000);
      },
      navTo(url) {
      	if(url){
          uni.showLoading({
            title: '加载中',
            mask: true
          });
          uni.navigateTo({
          	url: url,
            success() {
              uni.hideLoading()
            }
          })
        }else Toast('暂未开放')
      },
    }
  }
</script>

<style lang="scss">
  .price_card {
    width: 694rpx;
    height: 180rpx;
    padding: 10rpx 0;
    background: #0022C7;
    margin: 28rpx;
    border-radius: 21rpx;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;

    .money {
      font-size: 70rpx;
    }
  }

  .card {
    margin: 28rpx;
    width: 694rpx;
    background-color: #fff;
    border-radius: 14rpx;

    .c_title {
      color: #0022C7;
      font-size: 32rpx;
      font-weight: 500;
      padding: 28rpx;
    }

    .c_body {
      margin: 28rpx;
      padding-bottom: 28rpx;
      display: flex;
      border-bottom: 1px solid #F3F4F8;

      &:last-child {
        border-bottom: none;
      }

      .icon {
        width: 77rpx;
        height: 77rpx;
        flex-shrink: 0;
        margin-right: 12rpx;
      }

      .body_text {
        flex: 1;
        font-size: 25rpx;

        .b_title {
          font-size: 32rpx;
          color: #333;
          font-weight: 500;
        }

        .b_text {
          display: flex;
          justify-content: space-between;
          padding: 16rpx 0;
          font-size: 28rpx;

          .b_avatar {
            width: 52rpx;
            height: 52rpx;
            margin-right: 8rpx;
          }

          &_left {
            display: flex;
            align-items: center;
          }

          &_right {
            color: #F02828;
            display: flex;
            align-items: center;
            font-size: 35rpx;
          }
        }

        .b_time {
          color: #666666;
        }
      }
    }

  }

  .button {
    position: fixed;
    bottom: 0;
    left: 0;
    // z-index: 9999999;
    z-index: 1;
    width: 100%;
    border-radius: 0;
    color: #fff;
    height: 90rpx;
    line-height: 90rpx;
    background-color: $theme-oa-color;
    display: flex;

    .retreat {
      color: $theme-oa-color;
      background-color: #fff;
    }

    .hand,
    .retreat {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
    }
    
    .disable {
      background-color: #666;
      color: #eee;
    }
  }

  .contract {
    display: flex;
    justify-content: space-between;
    padding: 28rpx;

    .left {
      display: flex;

      .contract_img {
        width: 102rpx;
        height: 102rpx;
        background: #f5f5f5;
        border-radius: 14rpx 14rpx 14rpx 14rpx;
        margin-right: 21rpx;
      }

      .text {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .name {
          font-size: 32rpx;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.8);
          line-height: 35rpx;
        }

        .nickname {
          margin-right: 35rpx;
        }

        text {
          height: 39rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #666666;
          line-height: 35rpx;
        }
      }
    }

    .right {
      font-size: 28rpx;
      font-weight: 500;
      color: $theme-oa-color;
      line-height: 35rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .icon {
        width: 35rpx;
        height: 39rpx;
        background-color: $theme-oa-color;
        opacity: 1;
        margin-right: 10rpx;
      }
    }
  }
  
  .need_contract {
  	// padding-bottom: 30rpx;
  
  	.title {
  		font-size: 35rpx;
  		font-weight: 500;
  		color: #333333;
  		margin-bottom: 21rpx;
  		margin-left: 28rpx;
  	}
  
  	.card {
  		padding-top: 0;
  		margin: 28rpx;
  		padding: 28rpx;
  		background-color: #fff;
  		border-radius: 14rpx;
  
  		.contract_box {
  			display: flex;
  			justify-content: space-between;
  
  			.left {
  				display: flex;
  
  				.contract_img {
  					width: 102rpx;
  					height: 102rpx;
  					background: #F5F5F5;
  					border-radius: 14rpx 14rpx 14rpx 14rpx;
  					margin-right: 21rpx;
  				}
  
  				.text {
  					display: flex;
  					flex-direction: column;
  					justify-content: space-between;
  
  					.name {
  						font-size: 32rpx;
  						;
  						font-weight: 500;
  						color: rgba(0, 0, 0, 0.8);
  						line-height: 35rpx;
  					}
  
  					.nickname {
  						margin-right: 35rpx;
  					}
  
  					text {
  						height: 39rpx;
  						font-size: 28rpx;
  						font-weight: 400;
  						color: #666666;
  						line-height: 35rpx;
  					}
  				}
  			}
  
  			.right {
  				font-size: 28rpx;
  				font-weight: 500;
  				color: #3274F9;
  				line-height: 35rpx;
  				display: flex;
  				justify-content: center;
  				align-items: center;
  
  				.icon {
  					width: 35rpx;
  					height: 39rpx;
  					background-color: #3274F9;
  					opacity: 1;
  					margin-right: 10rpx
  				}
  			}
  
  		}
  
  
  		.send_btn {
  			width: 100%;
  			height: 84rpx;
  			background: $theme-oa-color;
  			border-radius: 42rpx 42rpx 42rpx 42rpx;
  			color: #fff;
  			line-height: 80rpx;
  			text-align: center;
  		}
  
  		.tips_center {
  			background-color: #666;
  			color: #eee;
  		}
  	}
  
  	.btn {
  		margin: 0 auto;
  		margin-top: 32rpx;
  		// margin-bottom: 40rpx;
  		width: 694rpx;
  		height: 84rpx;
  		background: $theme-oa-color;
  		border-radius: 42rpx 42rpx 42rpx 42rpx;
  		color: #fff;
  		line-height: 80rpx;
  		text-align: center;
  	}
  
  	.tips_center {
  		background-color: #666;
  		color: #eee;
  	}
  }
  .btns {
  	color: white;
  	background-color: $theme-oa-color;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>