warm_man/pages/Project/index.vue

<template>
  <u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="#fff"
  ></u-navbar>
  <view class="body-background"></view>
  <view class="wallpaper-container border-box">
    <view class="top-image">
      <u-image radius="20" :src="detail.banner" width="100%" height="240" mode="widthFix"></u-image>
    </view>
    <view class="time-container" v-if="detail.status === 0 || detail.status === 1">
      <view class="time-main">
        <view class="item" :class="getStatusColor(detail.status)" style="padding:4rpx;background-color: #fff;border-radius:20rpx;margin-bottom:16rpx;">
          <view :class="getStatusColor(detail.status)" style="padding:20rpx 20rpx 40rpx;border-radius:20rpx;">
            <view class="title row" style="margin-bottom:40rpx;">
              <view class="title-item blue">
                <view class="title-content">
                  <u-text :text="detail.type_name" color="#ffffff" size="28" line-height="40"></u-text>
                </view>
              </view>
              <view class="title-item">
                <view class="title-content">
                  <u-text :text="detail.community" color="#90A0AF" size="28" line-height="40"></u-text>
                </view>
              </view>
            </view>
            <view class="body row">

              <view class="content col">
                <view class="content-title" style="margin-bottom:32rpx;">
                  <u-text :text="detail.title" line-height="54" color="#020B18" size="32"></u-text>
                </view>
                <u-count-down
                    :time="timeNumber"
                    format="HH:mm:ss"
                    autoStart
                    millisecond
                    @change="timeChange"
                    custom-style="display:flex;width:100%;"
                >
                  <view class="content-body row">
                    <view class="title-time-item">
                      <u-text text="距报名截止" color="#90A0AF" size="28"></u-text>
                    </view>
                    <view class="title-time-item back">
                      <u-text :text="timeData.hours" color="#020B18"
                              size="36"></u-text>
                    </view>
                    <view class="title-time-item">
                      <u-text text="小时" color="#90A0AF" size="28"></u-text>
                    </view>
                    <view class="title-time-item back">
                      <u-text :text="timeData.minutes" color="#020B18"
                              size="36"></u-text>
                    </view>
                    <view class="title-time-item">
                      <u-text text="分" color="#90A0AF" size="28"></u-text>
                    </view>
                    <view class="title-time-item back">
                      <u-text :text="timeData.seconds" color="#020B18" size="36"></u-text>
                    </view>
                    <view class="title-time-item">
                      <u-text text="秒" color="#90A0AF" size="28"></u-text>
                    </view>
                  </view>
                </u-count-down>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="info-container">
      <view class="info-title">
        <u-text text="项目基本信息" color="#020B18" size="36" line-height="36"></u-text>
      </view>
      <view class="info-item row">
        <view class="label">
          <u-text text="项目名称：" color="#90A0AF" size="32" line-height="54"></u-text>
        </view>
        <view class="content row col">
          <view class="col-12">
            <u-text :text="detail.title" line-height="54" color="#020B18" size="32"></u-text>
          </view>
        </view>
      </view>
      <view class="info-item row">
        <view class="label">
          <u-text text="实施时间：" color="#90A0AF" size="32" line-height="54"></u-text>
        </view>
        <view class="content row col">
          <view class="col-12">
            <u-text :text="detail.start_time" line-height="54" color="#020B18" size="32"></u-text>
          </view>
        </view>
      </view>
      <view class="info-item row">
        <view class="label">
          <u-text text="项目地址：" color="#90A0AF" size="32" line-height="54"></u-text>
        </view>
        <view class="content row col">
          <view class="col">
            <u-text :text="detail.address" line-height="54" color="#020B18" size="32"></u-text>
          </view>
          <view class="col" style="text-align: right;flex:0 0 96rpx">
            <view style="padding:12rpx;background-color: #FF9545;border-radius: 50%;display: inline-block;" @click="callLocal(detail.lat,detail.lng,detail.address)">
              <u-icon name="map-fill" size="32" color="#fff"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="info-item row">
        <view class="label">
          <u-text text="项目类别：" color="#90A0AF" size="32" line-height="54"></u-text>
        </view>
        <view class="content row col">
          <view class="col-12">
            <u-text :text="detail.type_name" line-height="54" color="#020B18" size="32"></u-text>
          </view>
        </view>
      </view>
      <view class="info-item row">
        <view class="label">
          <u-text text="资金计划：" color="#90A0AF" size="32" line-height="54"></u-text>
        </view>
        <view class="content row col">
          <view class="col-12">
            <u-text :text="detail.planned_fund" line-height="54" color="#020B18" size="32"></u-text>
          </view>
        </view>
      </view>
      <view class="info-item row">
        <view class="label">
          <u-text text="报名方式：" color="#90A0AF" size="32" line-height="54"></u-text>
        </view>
        <view class="content row col">
          <view class="col-12">
            <u-text :text="detail.registration_method" line-height="54" color="#020B18" size="32"></u-text>
          </view>
        </view>
      </view>
      <view class="info-item row">
        <view class="label">
          <u-text text="主办方：" color="#90A0AF" size="32" line-height="54"></u-text>
        </view>
        <view class="content row col">
          <view class="col-12">
            <u-text :text="detail.sponsor" line-height="54" color="#020B18" size="32"></u-text>
          </view>
        </view>
      </view>
      <view class="info-item row">
        <view class="label">
          <u-text text="联系方式：" color="#90A0AF" size="32" line-height="54"></u-text>
        </view>
        <view class="content row col">
          <view class="col">
            <u-text :text="detail.phone" line-height="54" color="#020B18" size="32"></u-text>
          </view>
          <view class="col" style="text-align: right;">
            <view style="padding:12rpx;background-color: #FF9545;border-radius: 50%;display: inline-block;" @click="callPhone(detail.phone)">
              <u-icon name="phone-fill" size="32" color="#fff"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="info-item row">
        <view class="label">
          <u-text text="暖新币：" color="#90A0AF" size="32" line-height="54"></u-text>
        </view>
        <view class="content row col">
          <view class="col-12">
            <u-text :text="(detail.user_coin || 0)" line-height="54" color="#020B18" size="32"></u-text>
          </view>
        </view>
      </view>
      <view class="info-item row">
        <view class="label">
          <u-text text="备注：" color="#90A0AF" size="32" line-height="54"></u-text>
        </view>
        <view class="content row col">
          <view class="col-12">
            <u-text :text="detail.remark" line-height="54" color="#020B18" size="32"></u-text>
          </view>
        </view>
      </view>
    </view>

    <view class="remark-container">
      <view class="remark-title">
        <u-text text="项目介绍" color="#020B18" size="36" line-height="36"></u-text>
      </view>
      <view class="remark-content">
        <u-parse :content="detail.content"></u-parse>
      </view>
    </view>

    <view class="line-container">
      <view class="line-title">
        <u-text text="项目进度" color="#020B18" size="36" line-height="36"></u-text>
      </view>
      <view class="line-body">
        <view class="line-item row" v-for="item in projectList">
          <view class="line col">
            <view class="line-icon">
              <u-icon :name="staticImage.lineIcon" size="32"></u-icon>
            </view>
          </view>
          <view class="body col">
            <view class="time">
              <u-text :text="item.do_time" color="#FF9545" size="32"></u-text>
            </view>
            <view class="content border-box">
              <u-parse containerStyle="max-width:100%;" custom-style="max-width:100%;" :content="item.content"></u-parse>
            </view>
          </view>

        </view>
      </view>
    </view>
  </view>
  <view class="foot-button border-box row">
    <follow :is_collect="detail.is_collect" :id="id" type="project"></follow>
    <view class="button-group">
      <view class="button exchange" :class="{gray:!((detail.status === 0 || detail.status === 1)&&detail.is_regist !==1)}">
        <u-text
            size="32"
            color="#020B18"
            :text="getButton()"
            align="center"
            @click="((detail.status === 0 || detail.status === 1)&&detail.is_regist !==1) ? api.navTo('/pages/Join/index?user_type=2&relevancy_type=1&id='+id,true):openNoticePop()"></u-text>
      </view>
    </view>
  </view>
  <NxrPop ref="nxrPop" :content="popContent"></NxrPop>
</template>

<script>
import api from "@/utils/functions.js";
import {imghost} from "@/config/host";
import {activityDetail} from "@/api/activity";
import {projectDetail, projectStep} from "@/api/project";
import follow from "@/components/Follow/index.vue";
import NxrPop from "@/components/NxrPop/index.vue";

export default {
  components: {NxrPop, follow},
  computed: {
    api() {
      return api
    }
  },
  data() {
    return {
      id:'',
      title: '暖新服务',
      staticImage:{
        position:imghost+'/map-position.png',
        mapClose:imghost+'/map-close.png',
        listPosition:imghost+'/service-position.png',
        listPhone:imghost+'/service-phone.png',
        activityBanner:imghost+'/activity-banner.png',
        rightRed:imghost+'/activity-red.png',
        rightBlue:imghost+'/activity-blue.png',
        rightGreen:imghost+'/activity-green.png',
        rightOrange:imghost+'/activity-orange.png',
        consultantIcon:imghost+'/consultant-icon.png',
        peopleIcon:imghost+'/people-icon.png',
        buttonPeople:imghost+'/button-people.png',
        lineIcon:imghost+'/line-icon.png',
      },
      data:{
        status:1,
        type_name:'社区活动',
        community:'三元社区',
        title:'家庭教育培训课堂开课啦！',
        address:'asdasd',
        start_time:'2023-11-11',
        cover:imghost+'/activity-banner.png',
      },
      timeNumber: 0,
      timeData:{},
      detail:{
        banner:'',
        surplus_time:'',
        user_advisor:'',
        advisor_number:'',
        user_count:'',
        registrations_number:'',
        registration_method:'',
        sponsor:'',
        phone:'',
        advisor_coin:'',
        user_coin:'',
        content:'',
        remark:'',
      },
      projectList:{

      },
      popContent:'',
    }
  },
  onLoad(option) {
    this.id = option.id || 0;
    this.getDetail(option.id);
    this.getProjectStep();
  },
  onReady() {

  },
  onReachBottom() {

  },
  methods: {
    getButton(){
      if(this.detail.is_regist === 1){
        return '已报名';
      }else if(this.detail.status !== 0 && this.detail.status !== 1){
        return '已截止'
      }else{
        return '立即报名'
      }

    },
    openNoticePop(){
      if(this.detail.is_regist === 1){
        this.popContent = '已经报名过啦~';
      }else if(this.detail.status !== 0 && this.detail.status !== 1){
        this.popContent = '已过报名时间';
      }
      this.$refs.nxrPop.openPop()
    },
    getStatusColor(status){
      switch (status){
        case 1:
          return 'blue';
        case 2:
          return 'red';
        case 4:
          return 'green';
        case 5:
          return 'orange';
        default:
          return 'blue';
      }
    },
    getDetail(){
      projectDetail({project_id:this.id}).then(res => {
        this.detail = res.data;
        this.timeNumber = res.data.surplus_time * 1000 || 0;
      })
    },
    getProjectStep(){
      projectStep({project_id:this.id}).then(res => {
        this.projectList = res.data.map(item => {
          item.do_time = uni.$u.timeFormat(item.do_time,'yyyy-mm-dd hh:MM:ss');
          return item;
        });
      })
    },
    timeChange(e){
      this.timeData = e;
    },
    callLocal(lat,lng,address){
      const latitude=parseFloat(lat);
      const longitude=parseFloat(lng);
      uni.openLocation({
        latitude:latitude,
        longitude:longitude,
        name:address,
      })
    },
    callPhone(phone){
      uni.makePhoneCall({
        phoneNumber: phone?.toString()
      });
    },
  },
  onPageScroll(res) {

  },
  created() {

  },
  mounted() {

  },
}
</script>

<style lang="scss">
  @import "./components/index.scss";
</style>