|
|
@@ -0,0 +1,431 @@
|
|
|
+<template>
|
|
|
+ <div class="finance">
|
|
|
+ <img src="../../assets/img/financeBanner.jpg" style="width: 100%" />
|
|
|
+ <div class="guize" @click="showGuize">投票规则</div>
|
|
|
+ <div class="guize" style="top: 4em" @click="paiming">查看排名</div>
|
|
|
+ <van-tabs color="#ff2c2c" background="#e0f2fa">
|
|
|
+ <van-tab title="网络短视频">
|
|
|
+ <van-row gutter="8">
|
|
|
+ <van-col span="12" v-for="item in list" :key="item.id">
|
|
|
+ <van-image
|
|
|
+ :width="width"
|
|
|
+ :height="height"
|
|
|
+ fit="cover"
|
|
|
+ @click="() => clickShowVideo(item)"
|
|
|
+ position="left"
|
|
|
+ :src="
|
|
|
+ item.workTitle +
|
|
|
+ '?x-oss-process=video/snapshot,t_4000,f_jpg,m_fast'
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <van-row>
|
|
|
+ <van-col
|
|
|
+ span="24"
|
|
|
+ style="text-align: center"
|
|
|
+ class="van-ellipsis"
|
|
|
+ >{{ item.name }}</van-col
|
|
|
+ >
|
|
|
+ <van-col span="24">
|
|
|
+ <div class="btn" @click="() => toupiao(item)">
|
|
|
+ <img src="../../assets/img/btn.png" />
|
|
|
+ </div>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ <br />
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </van-tab>
|
|
|
+ <van-tab title="优秀宣讲员">
|
|
|
+ <van-row gutter="8">
|
|
|
+ <van-col span="12" v-for="item in list_self" :key="item.id">
|
|
|
+ <van-image
|
|
|
+ :width="width"
|
|
|
+ :height="height"
|
|
|
+ fit="cover"
|
|
|
+ @click="() => clickShowVideo(item)"
|
|
|
+ position="left"
|
|
|
+ :src="
|
|
|
+ item.workTitle +
|
|
|
+ '?x-oss-process=video/snapshot,t_4000,f_jpg,m_fast'
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <van-row>
|
|
|
+ <van-col
|
|
|
+ span="24"
|
|
|
+ style="text-align: center"
|
|
|
+ class="van-ellipsis"
|
|
|
+ >{{ item.name }}</van-col
|
|
|
+ >
|
|
|
+ <van-col span="24">
|
|
|
+ <div class="btn" @click="() => toupiao(item)">
|
|
|
+ <img src="../../assets/img/btn.png" />
|
|
|
+ </div>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ <br />
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </van-tab>
|
|
|
+ </van-tabs>
|
|
|
+ <Shanshipin v-if="!config.isShanShiPin" color="#e0f2fa" />
|
|
|
+ <van-dialog v-model:show="showPaihang" confirm-button-text="关闭">
|
|
|
+ <div style="height: 50vh">
|
|
|
+ <van-tabs color="#ff2c2c">
|
|
|
+ <van-tab title="网络短视频">
|
|
|
+ <div class="SilkList">
|
|
|
+ <van-cell-group inset>
|
|
|
+ <van-cell title="名称" value="投票量"></van-cell>
|
|
|
+ <van-row v-for="item in rankList" :key="item.id + 'team'">
|
|
|
+ <van-col span="16"
|
|
|
+ ><p class="text van-ellipsis--l2" v-text="item.name"></p
|
|
|
+ ></van-col>
|
|
|
+ <van-col span="8"
|
|
|
+ ><p
|
|
|
+ class="text"
|
|
|
+ style="text-align: right"
|
|
|
+ v-text="formmate(item.votes)"
|
|
|
+ ></p
|
|
|
+ ></van-col>
|
|
|
+ </van-row>
|
|
|
+ </van-cell-group>
|
|
|
+ </div>
|
|
|
+ </van-tab>
|
|
|
+ <van-tab title="优秀宣讲员">
|
|
|
+ <div class="SilkList">
|
|
|
+ <van-cell-group inset>
|
|
|
+ <van-cell title="名称" value="投票量"></van-cell>
|
|
|
+ <van-row v-for="item in rankList_slef" :key="item.id + 'team'">
|
|
|
+ <van-col span="16"
|
|
|
+ ><p class="text van-ellipsis--l2" v-text="item.name"></p
|
|
|
+ ></van-col>
|
|
|
+ <van-col span="8"
|
|
|
+ ><p
|
|
|
+ class="text"
|
|
|
+ style="text-align: right"
|
|
|
+ v-text="formmate(item.votes)"
|
|
|
+ ></p
|
|
|
+ ></van-col>
|
|
|
+ </van-row>
|
|
|
+ </van-cell-group>
|
|
|
+ </div>
|
|
|
+ </van-tab>
|
|
|
+ </van-tabs>
|
|
|
+ </div>
|
|
|
+ </van-dialog>
|
|
|
+ <van-dialog
|
|
|
+ theme="round-button"
|
|
|
+ v-model:show="showLogin"
|
|
|
+ confirm-button-text="登录"
|
|
|
+ :before-close="beforeClose"
|
|
|
+ >
|
|
|
+ <van-cell-group inset>
|
|
|
+ <van-field
|
|
|
+ v-model="login.phone"
|
|
|
+ required
|
|
|
+ type="tel"
|
|
|
+ label="手机号"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ >
|
|
|
+ <template #button>
|
|
|
+ <van-button
|
|
|
+ v-if="codePhoen === 0"
|
|
|
+ @click="getCode"
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ >
|
|
|
+ 发送验证码
|
|
|
+ </van-button>
|
|
|
+ <van-count-down format="ss 秒" v-else :time="codePhoen" />
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <van-field required v-model="login.code" type="digit" label="验证码" />
|
|
|
+ </van-cell-group>
|
|
|
+ </van-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import { ref, reactive } from 'vue';
|
|
|
+import { showDialog, showConfirmDialog, showToast } from 'vant';
|
|
|
+import {
|
|
|
+ getEnrollList,
|
|
|
+ getEnrollRank,
|
|
|
+ getVote,
|
|
|
+ getTimes,
|
|
|
+ getSendVerifyCode,
|
|
|
+ verifyCode,
|
|
|
+} from '@/api/SilkRoadSpringGala.js';
|
|
|
+
|
|
|
+import Shanshipin from '@/components/shanshipin.vue';
|
|
|
+/**
|
|
|
+ * window.$originData.orginParames.title 页面标题
|
|
|
+ * window.$originData.orginParames.parameters 固定参数值
|
|
|
+ * window.$originData.urlParames url参数
|
|
|
+ */
|
|
|
+
|
|
|
+const w = window.$originData.orginParames.availWidth || 0;
|
|
|
+const operateId = window.$originData.orginParames.operateId;
|
|
|
+const width = (w - 16) / 2;
|
|
|
+const height = width * 0.57;
|
|
|
+const showPaihang = ref(false);
|
|
|
+const showLogin = ref(false);
|
|
|
+const list = ref([]);
|
|
|
+const rankList = ref([]);
|
|
|
+const list_self = ref([]);
|
|
|
+const rankList_self = ref([]);
|
|
|
+const codePhoen = ref(0);
|
|
|
+const config = reactive({
|
|
|
+ times: -1,
|
|
|
+ isShanShiPin: window.$shanshipin.UserId,
|
|
|
+});
|
|
|
+const t = config.isShanShiPin ? 5 : 1;
|
|
|
+const phone =
|
|
|
+ window.$shanshipin.Phone && window.$shanshipin.Phone != 0
|
|
|
+ ? window.$shanshipin.Phone
|
|
|
+ : localStorage.getItem('financePhone') || '';
|
|
|
+const login = reactive({
|
|
|
+ phone,
|
|
|
+ code: '',
|
|
|
+});
|
|
|
+const getList = call => {
|
|
|
+ Promise.all([
|
|
|
+ getEnrollList({
|
|
|
+ type: '网络短视频',
|
|
|
+ operateId,
|
|
|
+ }),
|
|
|
+ getEnrollList({
|
|
|
+ type: '优秀宣讲员',
|
|
|
+ operateId,
|
|
|
+ }),
|
|
|
+ ]).then(resList => {
|
|
|
+ list.value = resList[0] || [];
|
|
|
+ list_self.value = resList[1] || [];
|
|
|
+ call && call();
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const getRankList = Call => {
|
|
|
+ Promise.all([
|
|
|
+ getEnrollRank({
|
|
|
+ type: '网络短视频',
|
|
|
+ operateId,
|
|
|
+ }),
|
|
|
+ getEnrollRank({
|
|
|
+ type: '优秀宣讲员',
|
|
|
+ operateId,
|
|
|
+ }),
|
|
|
+ ]).then(resList => {
|
|
|
+ rankList.value = resList[0] || [];
|
|
|
+ rankList_self.value = resList[1] || [];
|
|
|
+ Call && Call();
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+getList();
|
|
|
+
|
|
|
+const getCode = () => {
|
|
|
+ // 获取验证码
|
|
|
+ if (!/1[0-9]{10}/.test(login.phone)) {
|
|
|
+ showToast('请输入正确的手机号');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ getSendVerifyCode({
|
|
|
+ phone: login.phone,
|
|
|
+ }).then(() => {
|
|
|
+ codePhoen.value = 60000;
|
|
|
+ });
|
|
|
+};
|
|
|
+const toupiao = function (item) {
|
|
|
+ if (!login.phone || login.phone.length < 11) return (showLogin.value = true); //如果没有手机号提示登录
|
|
|
+ showConfirmDialog({
|
|
|
+ message: '确定投票给' + item.name + '么？',
|
|
|
+ beforeClose: type => {
|
|
|
+ console.log(type);
|
|
|
+ if (type !== 'confirm') return true;
|
|
|
+ return new Promise(resolve => {
|
|
|
+ getVote({
|
|
|
+ target: item.phone,
|
|
|
+ source: login.phone,
|
|
|
+ client: config.isShanShiPin ? '闪视频' : '其他',
|
|
|
+ operateId,
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ showToast('投票成功！');
|
|
|
+ resolve(true);
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ resolve(true);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const beforeClose = () => {
|
|
|
+ if (!login.phone || !login.code) return false;
|
|
|
+ getTimes({
|
|
|
+ phone: login.phone,
|
|
|
+ }).then(r => {
|
|
|
+ config.times = r.times - t >= 0;
|
|
|
+ verifyCode({
|
|
|
+ phone: login.phone,
|
|
|
+ code: login.code,
|
|
|
+ })
|
|
|
+ .then(r => {
|
|
|
+ localStorage.setItem('financePhone', login.phone);
|
|
|
+ localStorage.setItem('financeToken', r.token);
|
|
|
+ return true;
|
|
|
+ })
|
|
|
+ .catch(() => false);
|
|
|
+ });
|
|
|
+ return true;
|
|
|
+};
|
|
|
+
|
|
|
+const showGuize = () => {
|
|
|
+ showDialog({
|
|
|
+ title: '投票规则',
|
|
|
+ messageAlign: 'left',
|
|
|
+ confirmButtonText: '关闭',
|
|
|
+ message: () => (
|
|
|
+ <div class='art'>
|
|
|
+ <p>
|
|
|
+ 1、投票主题：“大美中国·多彩丝路”《2023丝路嘉年华·丝路春晚》之我要上丝路春晚。
|
|
|
+ </p>
|
|
|
+ <p>2、投票时间：2022年12月23日12:00至12月26日12:00（共3天）。</p>
|
|
|
+ <p>
|
|
|
+ 3、投票范围：凡创作内容符合节目要求，且通过线上报名和导演组第一轮海选的团体、个人。
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 4、投票形式：通过微信H5或者闪视频APP进行线上投票，可分享拉票，助力你支持的团体、个人上《2023丝路嘉年华·丝路春晚》。
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 5、投票须知：每个用户每日的票数固定，即可分散投票，也可集中投票。微信H5打开每人每日可投2票，闪视频APP打开每人每日可投10票，欢迎大家下载闪视频APP参与投票，查看排行榜，为你支持的团体、个人助力打call。本次投票活动公开透明，排行榜实时更新，禁止刷票，如有违法一经查实将取消参赛资格，最终解释权归主办方所有。
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 6、 荣誉：
|
|
|
+ <p>
|
|
|
+ 1）网络投票人气第一的团体、个人直通丝路春晚晚会，在丝路春晚晚会中露出（陕西卫视、五大洲电视台播出）；网络投票第二、三名的团体、个人将直通丝路嘉年华，在丝路嘉年华露出（陕西卫视）具体呈现形式由导演组与入选作品的团体、个人分别充分沟通，优化包装作品。
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 2）直通丝路嘉年华和丝路春晚的团体、个人在录制结束后，将获得闪视频独家个人专访和宣传形象照。
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 3）网络投票人气前五的团体、个人将获得由丝路春晚导演组颁发的荣誉证书。
|
|
|
+ </p>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 7、奖励：
|
|
|
+ <p>
|
|
|
+ 网络投票人气第一、二、三名的团体分别获得奖金3000元、2000元、1000元。
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 网络投票人气第一、二、三的个人分别获得奖金1000元、600元、300元。
|
|
|
+ </p>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const paiming = () => {
|
|
|
+ if (!config.isShanShiPin) return showToast('下载闪视频查看投票结果。');
|
|
|
+ getRankList(() => {
|
|
|
+ showPaihang.value = true;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const formmate = num => {
|
|
|
+ if (num === 0) return num;
|
|
|
+ let N = num || 0;
|
|
|
+ switch (true) {
|
|
|
+ case N >= 10000:
|
|
|
+ N = (N / 10000).toFixed(2) - 0 + '万';
|
|
|
+ break;
|
|
|
+ case N >= 100000000:
|
|
|
+ N = (N / 100000000).toFixed(2) - 0 + '亿';
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ return N;
|
|
|
+};
|
|
|
+
|
|
|
+const clickShowVideo = item => {
|
|
|
+ console.log(item);
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.finance {
|
|
|
+ width: 100vw;
|
|
|
+ padding-bottom: 80px;
|
|
|
+ background-color: #e0f2fa;
|
|
|
+ min-height: 100vh;
|
|
|
+
|
|
|
+ .van-cell__value {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ padding: 10px 16px;
|
|
|
+ }
|
|
|
+ .guize {
|
|
|
+ background-color: #ff2c2c;
|
|
|
+ position: fixed;
|
|
|
+ right: 0;
|
|
|
+ top: 2em;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 3px 5px 3px 15px;
|
|
|
+ border-top-left-radius: 1em;
|
|
|
+ border-bottom-left-radius: 1em;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ .SilkList {
|
|
|
+ height: calc(50vh - 60px);
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ font-size: 0;
|
|
|
+ text-align: center;
|
|
|
+ color: #666;
|
|
|
+ position: relative;
|
|
|
+ padding: 3px 0;
|
|
|
+ border-radius: 5px;
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .videoEle {
|
|
|
+ width: 100vw;
|
|
|
+ position: fixed;
|
|
|
+ background-color: #000;
|
|
|
+ top: 50%;
|
|
|
+ z-index: 21;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ .van-overlay {
|
|
|
+ .video {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ top: 0;
|
|
|
+ position: fixed;
|
|
|
+ .videoText {
|
|
|
+ color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ padding: 0.5em;
|
|
|
+ text-indent: 2em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .close {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ right: 10px;
|
|
|
+ z-index: 22;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
liyongli
