yizhizan-h5/my/jilu/bossMianshiDetail.vue

<template>
  <view class="ms-detail">
    <view class="detail-bg"></view>
    <nav-bar title="面试详情"></nav-bar>
    <view class="detail-index">
      <view class="detail-title"><block v-if="info.status==2">
		  <block v-if="currentStep === 1&&info.restHour>3">
	  {{info.statusText}} {{info.interviewDate}}
	  </block>
	  <block v-else-if="currentStep === 1&&info.restHour<=3&&info.restHour>0">
		  {{info.restHour*60}}分钟后面试
	  </block>
	  <block v-else-if="currentStep === 1&&info.restHour==0">
	  		  面试已开始，待签到
	  </block>
	  <block v-else-if="currentStep === 2">
	  		  面试已签到
	  </block>
	  <block v-else-if="currentStep === 3">
	  		  面试中
	  </block>
	  <block v-else-if="currentStep === 4">
	  		  面试已完成
	  </block>
	  </block>
	  <block v-else-if="info.status==3">
		  面试已取消
		</block></view>
      <view class="detail-item">
        <view class="user-title">
          <view class="user-img-name">
            <view class="user-img">
              <image :src="info.userEntity&&info.userEntity.avatar||'@/static/images/geren.png'" mode="aspectFill" />
            </view>
            <view @click="goTo('/pages/talentSearch/resumeDetail?resumesId='+info.resumesId+'&postPushId='+info.postPush.postPushId)" class="user-name"
              >{{info.userEntity&&info.userEntity.userName||'匿名'}}
              <u-icon
                name="arrow-right"
                color="#c6c5ca"
                size="20"
                style="margin-left: 16rpx"
              ></u-icon
            ></view>
          </view>
          <view class="img-phone">
            <view v-if="info.resumesAttachment" @click="seekDoc(info.resumesAttachment)" class="img-item-icon">
              <image src="@/static/images/my/fujianjianli.svg" mode="scaleToFill" />
              <text>附件简历</text>
            </view>
            <view @click="callPhone(info.userEntity.phone)" class="img-item-icon">
              <image src="@/static/images/my/dianhua.svg" mode="scaleToFill" />
              <text>电话</text>
            </view>
          </view>
        </view>
      </view>
      <view class="detail-item">
        <view class="user-title"> 面试信息 </view>
        <view class="msg-box">
          <view class="msg-item">
            <view class="msg-label">时间</view>
            <view class="msg-value">{{info.interviewDateTime}}</view>
          </view>
          <view class="msg-item">
            <view class="msg-label">职位</view>
            <view class="msg-value">{{info.postPush&&info.postPush.ruleClassifyName}} {{info.postPush&&info.postPush.salaryRange}} · {{info.postPush&&info.postPush.salaryTimes||12}}薪</view>
          </view>
          <view class="msg-item">
            <view class="msg-label">联系人</view>
            <view class="msg-value">{{info.hrName}}  {{info.hrPhone}}</view>
          </view>
          <view class="msg-item">
            <view class="msg-label">备注</view>
            <view class="msg-value">{{info.remarks}}</view>
          </view>
          <view class="msg-item">
            <view class="msg-label">地址</view>
            <view class="msg-value">{{info.address}} {{info.detailedAddress}}</view>
          </view>
        </view>
      </view>
      <view class="detail-item">
        <view class="txt-content">
          <view class="txt-desc">求职者不错？向他发起录用吧~</view>
          <view @click="showResult = true;resultType=0" class="txt-btn">录用邀约</view>
        </view>
      </view>
      <view class="detail-item">
        <view class="user-title-second" style="padding-bottom: 28rpx">
          将面试结果发送给对方
        </view>
        <view class="txt-content">
          <view class="txt-content-item" @click="showResult = true;resultType=0">
            <image src="@/static/images/my/mianshitongguo.svg" mode="scaleToFill" />
            <view class="txt-mianshi">通过</view>
          </view>
          <view class="txt-content-item" @click="showResult = true;resultType=1">
            <image src="@/static/images/my/kaolvyixia.svg" mode="scaleToFill" />
            <view class="txt-mianshi">考虑一下</view>
          </view>
          <view class="txt-content-item" @click="showResult = true;resultType=2">
            <image src="@/static/images/my/butongguo.svg" mode="scaleToFill" />
            <view class="txt-mianshi">不通过</view>
          </view>
        </view>
      </view>
      <view v-if="info.interviewRecordType!=null" class="detail-item">
        <view class="user-title-second"> 面试记录 </view>
        <view class="tag-box">
          <view v-for="item in info.interviewRecordType&&info.interviewRecordType.split(',')||[]" class="mianshi-tag">{{item}}</view>
        </view>
        <view class="mianshi-result-txt">
          {{info.interviewRecordMsg}}
        </view>
      </view>
      <view v-if="info.interviewResultType!=null" class="detail-item">
        <view class="user-title-second">
          <text>面试结果</text>
          <view class="user-img-result">
            <image
              :src="`/static/images/my/${info.interviewResultType == 0 
                ? 'mianshitongguo' 
                : info.interviewResultType == 1 
                  ? 'butongguo' 
                  : 'kaolvyixia'}.svg`"
              mode="scaleToFill"
            />
			{{info.interviewResultType==0?'面试通过':(info.interviewResultType==1?'不通过':'考虑一下')}}
          </view></view
        >
        <view class="mianshi-result-txt">
          {{info.interviewResultMsg}}
        </view>
      </view>
    </view>
    <view class="btn-bottom">
		<block v-if="info.restHour>3">
      <view class="btn-item" @click="cancelInterview = true">取消面试</view>
      <view class="btn-item" @click="onEdit">修改面试</view>
	  </block>
	  <block v-else>
		 <view class="btn-item" @click="onEdit">重新邀约</view> 
		 <view v-if="currentStep==4" class="btn-item" @click="showRecord=true">编辑面试记录</view> 
	  </block>
    </view>
    <u-popup v-model="showRecord" mode="bottom" border-radius="40">
      <view class="mianshi-record">
        <view class="mianshi-title"> 面试记录 <text>(求职者不可用)</text> </view>
        <view class="mianshi-record-content">
          <view class="record-tag-box">
            <view
              class="record-tag"
              :class="{ 'record-tag-check': isCheck == index }"
              @click="CheckTag(index)"
              v-for="(item, index) in recordList"
              :key="index"
              >{{ item }}</view
            >
          </view>
          <view class="check-box">
            <textarea
              v-model="text"
              placeholder="请补充其他说明，不超过500个字"
              maxlength="500"
              class="textarea"
              style="width:100%;height:100%;"
            ></textarea>
            <view class="word-count">
              <text>{{ text ? text.length : 0 }}</text> /500</view
            >
          </view>
        </view>
        <view @click="updateRecord" class="btn-mianshi">保存</view>
      </view>
    </u-popup>
    <u-popup v-model="showResult" mode="bottom" border-radius="40">
      <view class="mianshi-record">
        <view class="mianshi-title"> 面试结果</view>
        <view class="mianshi-record-content">
          <view class="txt-content" style="padding: 54rpx;box-sizing:border-box;justify-content: space-around;">
            <view v-if="resultType==0" class="txt-content-item">
              <image src="@/static/images/my/mianshitongguo.svg" mode="scaleToFill" />
              <view class="txt-mianshi">通过</view>
            </view>
            <view v-if="resultType==1" class="txt-content-item">
              <image src="@/static/images/my/kaolvyixia.svg" mode="scaleToFill" />
              <view class="txt-mianshi">考虑一下</view>
            </view>
            <view v-if="resultType==2" class="txt-content-item">
              <image src="@/static/images/my/butongguo.svg" mode="scaleToFill" />
              <view class="txt-mianshi">不通过</view>
            </view>
          </view>
          <view class="check-box">
            <textarea
              v-model="text"
              placeholder="请补充其他说明，不超过500个字"
              maxlength="500"
              class="textarea"
              style="width:100%;height:100%;"
            ></textarea>
            <view class="word-count">
              <text>{{ text ? text.length : 0 }}</text> /500</view
            >
          </view>
        </view>
        <view @click="submitResult()" class="btn-mianshi">保存</view>
      </view>
    </u-popup>
    <u-popup v-model="cancelInterview" mode="bottom" border-radius="40">
			<view class="mianshi-record">
        <view class="mianshi-title">
          <view>申请面试取消</view>
          <view class="cancel-text">请选择取消面试的原因，提交后将发送给对方</view>
        </view>
        <view class="mianshi-record-content">
          <view class="record-tag-box" style="gap: 16rpx 24rpx;">
            <view
              class="record-item"
              :class="{ 'record-tag-check': isCheck == index }"
              @click="CheckTag(index)"
              v-for="(item, index) in cancelList"
              :key="index"
              >{{ item }}</view
            >
          </view>
          <view class="check-box">
            <textarea
              v-model="text"
              placeholder="请输入具体原因，不超过40个字"
              maxlength="40"
              @input="onInput"
              class="textarea"
              style="width:100%;height:100%;"
            ></textarea>
            <view class="word-count">
              <text>{{ text ? text.length : 0 }}</text> /40</view
            >
          </view>
        </view>
        <view class="btn-mianshi" hover-class="btn-pressed" @click="quitInterview">提交</view>
      </view>
		</u-popup>
    <u-popup v-model="cancel" mode="center" border-radius="40">
			<view class="pop-rules">
				<view class="pop-text">
					<view class="pop-rules-title">面试取消</view>
					<view>这是面试取消的原因，全部展示出来</view>
				</view>
				<view>
					<button class="confirm" @click="cancel = false">确认</button>
				</view>
			</view>
		</u-popup>
  </view>
</template>
<script>
import navBar from "@/components/nav-bar/index.vue";

export default {
  data() {
    return {
      currentStep: 3,
      showActions: true,
      showRecord: false,
      isCheck: 0,
      showResult: false,
      recordList: [
        "需要二面",
        "待定",
        "淘汰",
        "面试通过",
        "逻辑清晰",
        "经验丰富",
        "自我驱动",
      ],
      text: "",
      cancelInterview:false,
      cancelList:['已招到人员','求职者已招到工作','面试官有事','时间不合适','其他'],
      cancel:false,
	  info:{},
	  recordId:'',
	  resultType:0,
	  isWork:false
    };
  },
  components: {
    navBar,
  },
  onLoad(options){
  		this.recordId=options&&options.recordId?options.recordId:''
  		this.getData()
  },
  methods: {
	  getData(){
	  	var that=this
	  	this.$Request.getT("/app/interviewRecord/getInterviewInfo", {recordId:this.recordId}).then((res) => {
	  	  if (res.code == 0) {
	  			  let statusArr=['','待接受','已同意','已拒绝','已过期']
	  			  res.data.statusText=statusArr[res.data.status]
	  			  var detailTime=res.data.detailTime?that.$queue.convert12to24(res.data.detailTime):''
	  			  res.data.interviewDateTime=res.data.interviewDateTime.substring(0,10)+' '+detailTime
	  			   var expired=that.$queue.isDateExpired(res.data.interviewDateTime)
	  			   res.data.expired=expired[0]
	  				res.data.restHour=expired[1]
	  			  res.data.interviewDate=res.data.interviewDateTime.slice(0, 10)
	  		  that.info=res.data
	  			  console.log(that.info)
	  			  that.currentStep=!res.data.interviewProcesses||res.data.interviewProcesses==0?res.data.interviewProcesses+1:res.data.interviewProcesses
	  			  /* that.covers.push({
	  				  id:1,
	  				latitude: res.data.lat,
	  				longitude: res.data.lng,
	  				iconPath:'../../static/images/mapMarker.png',
	  				alpha:0.5,
	  				width:20,
	  				height:20,
	  					callout: {
	  						content: res.data.detailedAddress,
	  						color: '#000', //文字颜色
	  						fontSize: 10, //文本大小
	  						padding: 5, //附近留白
	  						borderRadius: 24, //边框圆角
	  						bgColor: '#FFFFFF', //背景颜色
	  						display: 'ALWAYS', //常显
	  					}
	  			  }) */
	  	  } else {
	  	    uni.showToast({
	  	      title: res.msg,
	  	      icon: "none",
	  	    });
	  	  }
	  	});
	  }, 
    CheckTag(index) {
      this.isCheck = index;
    },
    handleSignIn() {
      this.$emit("sign-in");
      uni.showToast({
        title: "签到成功",
        icon: "success",
      });
    },

    handleStartInterview() {
      this.$emit("start-interview");
    },

    handleGetResult() {
      this.$emit("get-result");
    },
    handleComplaint() {
      this.$emit("complaint");
      uni.showModal({
        title: "客服投诉",
        content: "请描述您遇到的问题",
        editable: true,
        placeholderText: "请输入问题描述...",
        success: (res) => {
          if (res.confirm && res.content) {
            uni.showToast({
              title: "投诉已提交",
              icon: "success",
            });
          }
        },
      });
    },
    onEdit(){
      uni.navigateTo({
      						url:`/pages/msg/interviewInvitation?recordId=${this.info.recordId}&postPushId=${this.info.postPush.postPushId}&resumesId=${this.info.resumesId}&interviewerId=${this.info.userEntity.userId}`
      					})
    },
	goTo(url){
		uni.navigateTo({
		  url
		})
	},
	callPhone(phone){
		if (phone == ""||!phone) return;
		uni.makePhoneCall({
			phoneNumber: phone, //仅为示例
		});
	},
	submitResult(){
		var that=this
		if(this.isWork)
			return
		this.isWork=true
		that.$Request.postJson("/app/interviewRecord/saveInterview", {
			recordId:that.recordId,
			interviewResultType:that.resultType,
			interviewResultMsg:that.text,
			interviewProcesses:4
		}).then(res => {
			that.isWork=false
			that.showResult=false
			if (res.code === 0) {
				that.info.interviewResultMsg=that.text
				that.info.interviewResultType=that.resultType
				that.info.interviewProcesses=4
				that.currentStep=4
				this.$Request.getT("/app/chat/selectByTwoIds", {userId:this.info.userEntity.userId,'focusedUserId':this.$queue.getData('userId')}).then((res) => {
				  if (res.code == 0) 
					this.$queue.sendImMessage(this.info.userEntity.userId,'面试结果：'+(that.resultType==0?'恭喜您通过面试啦':(that.resultType==1?'我们需要再考虑一下':'非常抱歉，您与我们招聘的岗位不太匹配！')),98,res.data)
				})
			} else {
				uni.showToast({
					title: res.msg,
					icon: "none"
				})
			}
		})
	},
	updateRecord(){
		var that=this
		if(this.isWork)
			return
		this.isWork=true
		that.$Request.postJson("/app/interviewRecord/saveInterview", {
			recordId:that.recordId,
			interviewRecordType:that.recordList[that.isCheck],
			interviewRecordMsg:that.text,
		}).then(res => {
			that.isWork=false
			that.showRecord=false
			if (res.code === 0) {
				that.info.interviewRecordMsg=that.text
				that.info.interviewRecordType=that.recordList[that.isCheck]
			} else {
				uni.showToast({
					title: res.msg,
					icon: "none"
				})
			}
		})
	},
	quitInterview(){
		var that=this
		if(this.isWork)
			return
		this.isWork=true
		that.$Request.postJson("/app/interviewRecord/saveInterview", {
			recordId:that.recordId,
			status:3,
			interviewQuitType:that.cancelList[that.isCheck],
			interviewQuitMsg:that.text
		}).then(res => {
			that.isWork=false
			that.cancelInterview=false
			if (res.code === 0) {
				that.info.status=3
				that.info.interviewQuitType=that.cancelList[that.isCheck]
				that.info.interviewQuitMsg=that.text
			} else {
				uni.showToast({
					title: res.msg,
					icon: "none"
				})
			}
		})
	},
	seekDoc(it) {
		if(!it||!it.attachmentAddress)
			return
		//#ifdef APP-PLUS
		uni.downloadFile({
			url: it.attachmentAddress,
			success: function (res) {
				var filePath = res.tempFilePath;
				uni.openDocument({
					filePath: filePath,
					showMenu: true,
					success: function (res) {
						console.log('打开文档成功');
					}
				});
			}
		});
		return;
		//#endif
		uni.navigateTo({
			url: '/pages/index/webView?url=' + it.attachmentAddress + '&title=' + it.attachmentName
		});
	}
  },
};
</script>
<style scoped lang="scss">
.ms-detail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  .detail-bg {
    height: 744rpx;
    width: 100%;
    background: linear-gradient(180deg, rgba(255, 102, 0, 1), rgba(255, 102, 0, 0) 100%);
    position: absolute;
    left: 0;
    top: 0;
  }
  .detail-index {
    flex: 1;
    position: relative;
    z-index: 2;
    overflow: hidden;
    overflow-y: auto;
    padding: 40rpx;
    box-sizing: border-box;
    .detail-item {
      padding: 36rpx;
      box-sizing: border-box;
      border: 1rpx solid rgba(227, 231, 236, 1);
      border-radius: 6px;
      background: rgba(255, 255, 255, 1);
      margin-top: 20rpx;
      .process-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .process-title {
          color: rgba(29, 33, 41, 1);
          font-family: DM Sans;
          font-size: 24rpx;
          font-weight: 500;
          line-height: 32rpx;
        }
        .process-status {
          color: #016bf6;
          font-family: DM Sans;
          font-size: 20rpx;
          font-weight: 700;
          line-height: 26rpx;
        }
      }
      .user-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .user-img-name {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .img-phone {
          display: flex;
          align-items: center;
          gap: 28rpx;
          .img-item-icon {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            image {
              width: 48rpx;
              height: 48rpx;
            }
            text {
              color: #999999;
              font-family: DM Sans;
              font-size: 20rpx;
              font-weight: 400;
              margin-top: 5rpx;
              line-height: 26rpx;
            }
          }
        }
        .user-img {
          overflow: hidden;
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          margin-right: 24rpx;
          border: 8rpx solid #f6f6f6;
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
      .user-title-second {
        color: #1d2129;
        font-family: DM Sans;
        font-size: 24rpx;
        font-weight: 500;
        line-height: 32rpx;
        padding-bottom: 12rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .user-img-result {
        display: flex;
        justify-content: center;
        align-items: center;
        image {
          width: 30rpx;
          height: 30rpx;
          margin-right: 4rpx;
        }
        color: rgba(102, 102, 102, 1);
        font-family: DM Sans;
        font-size: 20rpx;
        font-weight: 400;
        line-height: 26rpx;
      }
      .tag-box {
        display: flex;
        .mianshi-tag {
          border-radius: 8rpx;
          background: rgba(252, 233, 220, 1);
          padding: 8rpx;
          box-sizing: border-box;
          color: #016bf6;
          font-family: DM Sans;
          font-size: 16rpx;
          font-weight: 400;
          line-height: 20rpx;
        }
      }
      .mianshi-result-txt {
        color: #999999;
        font-family: DM Sans;
        font-size: 20rpx;
        font-weight: 400;
        line-height: 26rpx;
        margin-top: 4rpx;
      }
      .txt-desc {
        color: #1d2129;
        font-family: DM Sans;
        font-size: 24rpx;
        font-weight: 500;
        line-height: 32rpx;
        letter-spacing: 0%;
      }
      .txt-btn {
        color: #016bf6;
        font-family: DM Sans;
        font-size: 20rpx;
        font-weight: 700;
        line-height: 26rpx;
        letter-spacing: 0%;
      }
    }
  }
  .txt-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .txt-content-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      image {
        width: 60rpx;
        height: 60rpx;
      }
      .txt-mianshi {
        color: rgba(153, 153, 153, 1);
        font-family: DM Sans;
        font-size: 20rpx;
        font-weight: 400;
        line-height: 26rpx;
        margin-top: 10rpx;
      }
    }
  }
  .btn-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16rpx;
    padding-bottom: 48rpx;
    padding-right: 40rpx;
    box-sizing: border-box;
    .btn-item {
      box-sizing: border-box;
      border: 2rpx solid;
      border-radius: 999px;
      background: rgba(255, 255, 255, 1);
      color: #016bf6;
      font-family: DM Sans;
      font-size: 24rpx;
      font-weight: 400;
      padding: 16rpx 68rpx;
      box-sizing: border-box;
    }
  }
  .msg-box {
    .msg-item {
      display: flex;
      align-items: center;
      color: rgba(153, 153, 153, 1);
      font-family: DM Sans;
      font-size: 24rpx;
      font-weight: 400;
      line-height: 32rpx;
      margin-top: 12rpx;
      .msg-label {
        min-width: 120rpx;
        margin-right: 24rpx;
      }
    }
  }
  .detail-title {
    color: #fff;
    font-size: 50rpx;
    font-weight: 500;
    font-family: DM Sans;
  }
}
.mianshi-record {
  height: 700rpx;
  border: 1rpx solid rgba(227, 231, 236, 1);
  border-radius: 40rpx 40rpx 0px 0px;
  background: rgba(253, 253, 253, 1);
  display: flex;
  flex-direction: column;
  padding: 40rpx;
  box-sizing: border-box;
  .mianshi-title {
    flex-shrink: 0;
    color: rgba(34, 37, 42, 1);
    font-family: DM Sans;
    font-size: 36rpx;
    font-weight: 500;
    line-height: 26rpx;
    text-align: center;
    border-bottom: 2rpx solid rgba(153, 153, 153, 0.25);
    padding-bottom: 16rpx;
    box-sizing: border-box;
    text {
      font-size: 20rpx;
      margin-left: 12rpx;
    }
    .cancel-text{
      color: rgba(34, 37, 42, 1);
      font-family: DM Sans;
      font-size: 24rpx;
      font-weight: 400;
      line-height: 32rpx;
      letter-spacing: 0px;
      margin-top: 16rpx;
    }
  }
  
  .mianshi-record-content {
    width: 100%;
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
    .record-tag-box {
      display: flex;
      align-items: center;
      gap: 16rpx 44rpx;
      flex-wrap: wrap;
      padding-top: 28rpx;
      box-sizing: border-box;
      .record-tag {
        flex-shrink: 0;
        border-radius: 16rpx;
        background: rgba(245, 248, 254, 1);
        padding: 12rpx 20rpx;
        box-sizing: border-box;
        color: rgba(153, 153, 153, 1);
        font-family: DM Sans;
        font-size: 28rpx;
        font-weight: 400;
        border: 1rpx solid rgba(245, 248, 254, 1);
      }
      .record-item{
        width: calc((100% - 24rpx) / 2);
        flex-shrink: 0;
        border-radius: 16rpx;
        background: rgba(245, 248, 254, 1);
        padding: 12rpx 0;
        box-sizing: border-box;
        color: rgba(153, 153, 153, 1);
        font-family: DM Sans;
        font-size: 28rpx;
        font-weight: 400;
        text-align: center;
        box-sizing: border-box;
        border: 1rpx solid rgba(245, 248, 254, 1);
      }
      .record-tag-check {
        border: 1rpx solid #016bf6;
        background: rgba(252, 233, 220, 1);
        color: #016bf6;
      }
    }
    .check-box {
      width: 100%;
      height: 170rpx;
      border-radius: 12rpx;
      background: rgba(240, 240, 240, 1);
      padding: 34rpx;
    //   padding-top: 40rpx;
      box-sizing: border-box;
      margin: 20rpx 0;
      .word-count {
        font-family: DM Sans;
        font-size: 20rpx;
        font-weight: 400;
        line-height: 26rpx;
        text-align: right;
        text {
          color: #016bf6;
        }
      }
    }
  }
  .btn-mianshi {
    background: rgba(0, 106, 244, 1);
    border-radius: 100rpx;
    color: rgba(255, 255, 255, 1);
    font-family: DM Sans;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 48rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    padding: 6rpx;
    box-sizing: border-box;
  }
  .btn-pressed{
	background: rgba(0, 106, 244, 0.8);
	transition: background-color 0.1s ease;
  }
}
.process-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.process-steps {
  position: relative;
}
/* 操作按钮 */
.process-actions {
  margin-top: 50rpx;
  display: flex;
  gap: 20rpx;
  flex-wrap: wrap;
}

.action-btn {
  flex: 1;
  background: #016bf6;
  color: #fff;
  border: none;
  border-radius: 100rpx;
  padding: 6rpx 24rpx;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 1);
  font-family: DM Sans;
  font-size: 24rpx;
  font-weight: 400;
  text-align: center;
  &::after {
    border: none;
  }

  &:active {
    background: #009974;
  }
}

.complaint-btn {
  background: #ff4444;

  &:active {
    background: #dd3333;
  }
}
.pop-rules{
  width: 270px;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 1);
  color: rgba(158, 158, 158, 1);
  font-family: DM Sans;
  font-size: 20rpx;
  font-weight: 400;
  .pop-text{
    padding: 40rpx;
    .pop-rules-title {
      color: rgba(88, 88, 88, 1);
      font-size: 28rpx;
      font-weight: 700;
      line-height: 36rpx;
      letter-spacing: 0%;
      margin-bottom: 30rpx;   
    }
  }
  .confirm {
    height: 80rpx;
    border-radius: 999px;
    background: linear-gradient(90.00deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
    color: rgba(255, 255, 255, 1);
    font-family: DM Sans;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 80rpx;
    letter-spacing: 0%;
    text-align: center;
    margin: 0 40rpx 40rpx;
	&:active{
		background: linear-gradient(90.00deg, rgba(13, 39, 247, 0.8), rgba(19, 193, 234, 0.8) 100%);
	}
  }
}
::v-deep .u-btn {
  padding: 0 !important;
}
::v-deep .textarea-placeholder {
  color: rgba(153, 153, 153, 1);
  font-family: DM Sans;
  font-size: 20rpx !important;
  font-weight: 400;
  line-height: 26rpx;
}
::v-deep .uni-textarea-textarea {
  font-size: 20rpx;
  color: #585858;
}
::v-deep .uni-textarea{
    height: 170rpx !important;
}
::v-deep uni-button:after {
    border: none !important;
}
</style>