.

src/main/h5/src/views/programme/programmeDetail.vue

@@ -0,0 +1,417 @@
+<template>
+  <div class="home">
+    <div class="base">
+      <div class="base-info">
+        <div class="base-info-item">
+          <div class="text1">节目名称</div>
+          <div class="text2">{{ info.name }}</div>
+        </div>
+        <div class="base-info-item">
+          <div class="text1">参赛专业</div>
+          <div class="text2">{{ info.specialty }}</div>
+        </div>
+        <div class="base-info-item">
+          <div class="text1">参演人员</div>
+          <div class="text2">
+            {{ info.participant ? info.participant.join(",") : "" }}
+          </div>
+        </div>
+        <div class="base-info-item">
+          <div class="text1">参赛人数</div>
+          <div class="text2">{{ info.quantity }}</div>
+        </div>
+
+        <div class="base-info-item" v-if="isAdmin">
+          <div class="text1">操作状态</div>
+          <div class="text2">
+            {{ info.signInAt ? (myScore ? "已评分" : "未评分") : "未签到" }}
+          </div>
+        </div>
+      </div>
+      <div class="base-info" style="padding:22px 22px">
+        <img
+          class="left-icon icon"
+          src="../../assets/icon_lianjie.png"
+          alt=""
+        />
+        <img
+          class="right-icon icon"
+          src="../../assets/icon_lianjie.png"
+          alt=""
+        />
+        <div class="score">
+          <div class="score-main" v-if="info.myScore">
+            <div class="name">总得分</div>
+            <div class="val">{{ info.myScore }}</div>
+          </div>
+
+          <div class="score-main" v-if="!info.second">
+            <div class="name">{{ info.score ? "修改" : "" }}评分(0-100)</div>
+            <van-field
+              type="digit"
+              input-align="center"
+              v-model="score"
+              :maxlength="3"
+              class="scoreInput"
+              @change="scoreChange"
+            />
+
+            <van-field
+              v-model="message"
+              rows="4"
+              autosize
+              type="textarea"
+              maxlength="200"
+              placeholder="请输入备注信息…"
+              class="textfield"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="bottom" v-if="!info.second">
+      <van-button
+        @click="submitScore"
+        :disabled="!score"
+        round
+        block
+        :color="$colors.prim"
+      >
+        提交评分
+      </van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+// import QrcodeVue from "qrcode.vue";
+export default {
+  name: "home",
+  metaInfo() {
+    return {
+      title: "文旅局艺考"
+    };
+  },
+  data() {
+    return {
+      tab: 0,
+      info: {},
+      persons: [],
+      isAdmin: false,
+      scores: [],
+      score: "",
+      myScore: null,
+      isScore: false,
+      relatedList: [],
+      nowActive: 0,
+      message: ""
+    };
+  },
+  computed: {
+    ...mapState(["userInfo"]),
+    personInfo() {
+      return this.persons.length > 0
+        ? [...this.persons]
+            .map(item => {
+              return item.name;
+            })
+            .join(" ")
+        : "暂无";
+    },
+    url() {
+      return (
+        "http://wljtest.izouma.com/home?performanceId=" +
+        this.info.performanceId +
+        "&performanceApplyId=" +
+        this.$route.query.performanceApplyId
+      );
+    },
+    showUserInfo() {
+      let loginPhone = window.localStorage.getItem("loginPhone");
+      if (loginPhone === this.info.phone) {
+        return {
+          name: this.info.contact,
+          type: "领队"
+        };
+      } else {
+        return {
+          name: [...this.persons].find(item => {
+            return item.phone === loginPhone;
+          })?.name,
+          type: "考生"
+        };
+      }
+    }
+  },
+  mounted() {
+    this.getInfo();
+  },
+  methods: {
+    getInfo() {
+      this.$http.post("/programme/getDTO/" + this.$route.query.id).then(res => {
+        this.info = res;
+        this.score = "";
+        this.message = "";
+      });
+    },
+    scoreChange() {
+      this.$nextTick(() => {
+        if (this.score > 100) {
+          this.score = 100;
+        }
+        if (this.score < 0) {
+          this.score = 0;
+        }
+      });
+    },
+    submitScore() {
+      if (!this.score) {
+        this.$toast("请输入评分");
+        return;
+      }
+      this.$http
+        .post("/programmeScore/saveScore?programmeId=" + this.$route.query.id, {
+          score: this.score,
+          remark: this.message
+        })
+        .then(res => {
+          this.$toast.success("评分成功");
+          this.getInfo();
+        })
+        .catch(e => {
+          if (e) {
+            this.$toast(e.error);
+          }
+        });
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.home {
+  padding-bottom: 100px;
+}
+.info {
+  background-color: #fff;
+  display: flex;
+  padding: 16px;
+  align-items: center;
+  .text {
+    flex-grow: 1;
+    margin-left: 12px;
+    .name {
+      font-size: 22px;
+      font-weight: bold;
+      color: #000000;
+      line-height: 30px;
+    }
+
+    .sub {
+      font-size: 14px;
+      color: #939599;
+      line-height: 20px;
+      margin-top: 2px;
+    }
+  }
+
+  .btn {
+    font-size: 14px;
+    color: #c4c7cc;
+    line-height: 20px;
+    align-self: flex-end;
+  }
+}
+
+.base {
+  padding: 20px 16px;
+  .code {
+    padding: 30px 60px;
+    background-color: #fff;
+    border-radius: 12px;
+  }
+
+  .base-info {
+    position: relative;
+    padding: 22px 44px;
+    background: #ffffff;
+    border-radius: 12px;
+    margin-top: 8px;
+    .base-info-item {
+      display: flex;
+      // align-items: center;
+      font-size: 14px;
+      color: #000000;
+      line-height: 26px;
+
+      .text1 {
+        font-weight: bold;
+        min-width: 60px;
+      }
+
+      .text2 {
+        font-size: 16px;
+        margin-left: 20px;
+      }
+
+      &:not(:first-child) {
+        margin-top: 12px;
+      }
+    }
+  }
+
+  .icon {
+    width: 10px;
+    height: 54px;
+    position: absolute;
+    top: 0;
+    transform: translateY(-50%);
+
+    &.left-icon {
+      left: 16px;
+    }
+
+    &.right-icon {
+      right: 16px;
+    }
+  }
+}
+
+.score {
+  margin: 20px 16px;
+  background: #ffffff;
+  border-radius: 12px;
+  // padding: 0 20px;
+
+  .score-main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 47px 0 20px;
+
+    .name {
+      font-size: 16px;
+      color: #939599;
+      line-height: 22px;
+    }
+
+    .val {
+      font-size: 85px;
+      font-weight: bold;
+      color: #000000;
+      line-height: 119px;
+    }
+    .text {
+      font-size: 18px;
+      color: #000;
+      line-height: 32px;
+    }
+  }
+
+  .score-list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 38px 0 48px;
+    .score-item {
+      display: flex;
+      .name {
+        font-size: 14px;
+        color: #939599;
+        line-height: 26px;
+      }
+
+      .val {
+        font-size: 18px;
+        font-weight: bold;
+        color: #000000;
+        line-height: 26px;
+        margin-left: 20px;
+      }
+
+      &:not(:first-child) {
+        margin-top: 16px;
+      }
+    }
+
+    border-top: 1px solid #f5f7fa;
+  }
+}
+
+.certificate {
+  padding: 20px 16px;
+
+  .certificate-img {
+    padding: 16px;
+    background: #ffffff;
+    border-radius: 12px;
+    img {
+      width: 331px;
+      height: 197px;
+      display: block;
+    }
+
+    &:not(:first-child) {
+      margin-top: 12px;
+    }
+  }
+}
+.scoreInput {
+  /deep/ .van-field__control {
+    font-size: 32px;
+    color: #000;
+  }
+}
+.textfield {
+  background-color: #f2f4f5;
+  margin-top: 20px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+</style>
+
+<style lang="less">
+.home {
+  .van-tabs__line {
+    bottom: 20px;
+  }
+  .van-tabs__wrap {
+    height: 50px;
+  }
+  .van-tabs__nav {
+    padding: 0 6px 15px;
+  }
+  .van-tab {
+    flex: 0;
+    white-space: nowrap;
+    font-size: 16px;
+    line-height: 22px;
+    padding: 0 10px;
+
+    &.van-tab--active {
+      font-size: 20px;
+      font-weight: bold;
+    }
+  }
+}
+
+.bottom {
+  position: fixed;
+  padding: 6px 48px calc(env(safe-area-inset-bottom) + 6px);
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 20;
+  background-color: #fff;
+}
+.btnList {
+  display: flex;
+  .van-button {
+    flex-grow: 1;
+  }
+  .van-button + .van-button {
+    margin-left: 20px;
+  }
+}
+</style>