683 lines
22 KiB
HTML
683 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
|
|
<title></title>
|
|
<!-- 引入样式文件 -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.6/lib/index.css">
|
|
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.2.0/weui.min.css">
|
|
<link rel="stylesheet" href="${base!}/assets/mobile/css/theme.css">
|
|
|
|
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
|
|
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/vant@2.6/lib/vant.min.js"></script>
|
|
<script src="/assets/platform/plugins/moment/moment.min.js"></script>
|
|
</head>
|
|
<style>
|
|
html, body {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
max-width: 600px;
|
|
background-color: white;
|
|
}
|
|
|
|
html::-webkit-scrollbar {
|
|
display: none
|
|
}
|
|
|
|
[v-cloak] {
|
|
display: none
|
|
}
|
|
|
|
html, body {
|
|
font-family: PingFang SC, 'Helvetica Neue', Arial, sans-serif;
|
|
}
|
|
|
|
.page-v {
|
|
width: 100%;
|
|
position: relative;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.detail-v {
|
|
margin-top: 15px;
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
.p15 {
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.njuColor {
|
|
color: rgb(106, 0, 95);
|
|
}
|
|
|
|
.title-v {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.form-v {
|
|
/*margin-top: 20px;*/
|
|
}
|
|
|
|
.van-doc-demo-block__title {
|
|
margin: 0;
|
|
padding: 0 16px;
|
|
color: rgba(69, 90, 100, 0.6);
|
|
font-weight: normal;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.goods-card {
|
|
margin: 0;
|
|
background-color: white;
|
|
}
|
|
|
|
.delete-button {
|
|
height: 100%;
|
|
}
|
|
|
|
.van-swipe-cell__wrapper {
|
|
border: none;
|
|
}
|
|
|
|
.weui-msg {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.van-button--small {
|
|
min-width: 100px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.header {
|
|
background: url('/assets/platform/img/checkin/bcc.jpg') no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 230px;
|
|
display: flex;
|
|
color: #7ca4d8;
|
|
}
|
|
.van-tabbar-item__icon {
|
|
font-size: 28px;
|
|
margin-bottom: 2px;
|
|
}
|
|
.van-tabbar-item__text {
|
|
transform: scale(0.9);
|
|
}
|
|
.header .container {
|
|
font-size: 13px;
|
|
letter-spacing: 1px;
|
|
z-index: 100;
|
|
width: 100%;
|
|
padding-right: 20px;
|
|
padding-top: 16px;
|
|
text-align: right;
|
|
}
|
|
.header .day {
|
|
font-size: 60px;
|
|
letter-spacing: 2px;
|
|
color: white;
|
|
}
|
|
.van-tag {
|
|
font-size: 25px;
|
|
background-color: transparent;
|
|
padding: 6px 16px;
|
|
}
|
|
.van-tag--primary.van-tag--plain {
|
|
color: white;
|
|
}
|
|
.my_body {
|
|
width: 94%;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
top: -48px;
|
|
}
|
|
.van-calendar {
|
|
border-radius: 16px;
|
|
box-shadow: 0 2px 10px rgb(125 126 128 / 16%);
|
|
}
|
|
.van-calendar__day {
|
|
font-size: 18px;
|
|
}
|
|
.van-calendar__selected-day {
|
|
width: 40px;
|
|
height: 36px;
|
|
border-radius: 7px;
|
|
}
|
|
.sign_in_day {
|
|
position: relative;
|
|
width: 40px;
|
|
height: 37px !important;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
color: #4ABE84;
|
|
background-color: #fff;
|
|
box-shadow: 0px 2px 7px 0px rgba(85, 110, 97, 0.35);
|
|
border-radius: 7px;
|
|
border: 1px solid rgba(74, 190, 132, 1);
|
|
}
|
|
.sign_in_day:before {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
border: 13px solid #4ABE84;
|
|
border-top-color: transparent;
|
|
border-left-color: transparent;
|
|
border-bottom-right-radius: 6px;
|
|
/*border-radius: 0 0 0 7px;*/
|
|
}
|
|
.sign_in_day:after {
|
|
content: '';
|
|
width: 3px;
|
|
height: 8px;
|
|
position: absolute;
|
|
right: 3px;
|
|
bottom: 4px;
|
|
border: 2px solid #fff;
|
|
border-top-color: transparent;
|
|
border-left-color: transparent;
|
|
transform: rotate(45deg);
|
|
}
|
|
.info {
|
|
width: 88%;
|
|
margin: 20px auto 10px;
|
|
font-size: 14px;
|
|
box-shadow: 0 2px 10px rgb(125 126 128 / 16%);
|
|
padding: 12px;
|
|
border-radius: 10px;
|
|
}
|
|
.sign_pop {
|
|
overflow-y: visible;
|
|
width: 75%;
|
|
height: 226px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
.sign_button {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
width: 100%;
|
|
left: 0;
|
|
}
|
|
.sign_button button {
|
|
width: 90%;
|
|
height: 36px;
|
|
}
|
|
.van-calendar__body {
|
|
display: none;
|
|
}
|
|
.white_pop {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 14px;
|
|
}
|
|
.white_pop .van-cell {
|
|
padding: 10px 34px;
|
|
}
|
|
.is_show_cell {
|
|
padding: 0;
|
|
}
|
|
.van-calendar__selected-day {
|
|
border: 1px solid #236eb4;
|
|
box-shadow: 0px 2px 7px 0px #236eb4;
|
|
}
|
|
.zan_order {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: end;
|
|
-webkit-justify-content: flex-end;
|
|
padding-right: 10px;
|
|
color: grey;
|
|
}
|
|
.van-uploader__preview-image {
|
|
width: 98px;
|
|
height: 94px;
|
|
}
|
|
.van-uploader__upload {
|
|
width: 98px;
|
|
height: 94px;
|
|
}
|
|
.van-empty{
|
|
transform: none;
|
|
position: relative;
|
|
left: 0;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div v-cloak id="app">
|
|
|
|
<van-nav-bar
|
|
title="一路美景"
|
|
left-arrow
|
|
placeholder
|
|
fixed
|
|
@click-left="history.go(-1)"
|
|
|
|
safe-area-inset-top
|
|
>
|
|
<template #right>
|
|
<van-icon @click="signIn" color="#fff" size="20" name="photograph"></van-icon>
|
|
</template>
|
|
</van-nav-bar>
|
|
|
|
<div v-if="active === 0" class="page-v">
|
|
<!--#include("/mobile/hd/checkin/friends.html"){}#-->
|
|
</div>
|
|
<div v-if="active === 1" class="page-v">
|
|
<!--#include("/mobile/hd/checkin/my.html"){}#-->
|
|
</div>
|
|
|
|
<van-tabbar
|
|
style="max-width: 600px;position: fixed;left: 0;bottom: 0;right: 0;margin: auto"
|
|
v-model="active" @change="tabbarChange"
|
|
:active-color="boxData.hdcolor"
|
|
inactive-color="#000"
|
|
>
|
|
<van-tabbar-item icon="thumb-circle-o">新鲜事</van-tabbar-item>
|
|
<van-tabbar-item icon="user-o">我的</van-tabbar-item>
|
|
</van-tabbar>
|
|
|
|
|
|
<!--发表内容弹框-->
|
|
<van-popup v-model:show="writePopShow" class="white_pop" :style="{ height: '100%' }" @close="signClose">
|
|
<div style="display: flex; justify-content: space-between; padding: 10px 20px; letter-spacing: 1px; align-items: center">
|
|
<div @click="writePopClose" style="font-size: 16px">取消</div>
|
|
<div>
|
|
<van-button @click="signDo" color="#236eb4" size="mini" :disabled="message.trim() === '' && fileList.length === 0"
|
|
style="border-radius: 6px; height: 28px; letter-spacing: 1px; font-size: 14px">发表</van-button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<van-field
|
|
v-model="message"
|
|
rows="3" style="font-size: 15px"
|
|
autosize
|
|
type="textarea"
|
|
placeholder="分享新鲜事..."
|
|
></van-field>
|
|
</div>
|
|
<div style="padding: 10px 34px">
|
|
<van-uploader v-model="fileList" multiple :after-read="afterRead" @delete="doDelete" :before-read="beforeRead"
|
|
accept="image/*" :max-count="9" :multiple="true"></van-uploader>
|
|
</div>
|
|
<div style="margin-top: 40px">
|
|
<van-cell-group border style="width: 82%; margin: 0 auto">
|
|
<van-cell @click="actionShow = true" title="是否公开" class="is_show_cell" icon="user-o"
|
|
is-link border :value="isOpenText" style="padding: 10px 0px; font-size: 15px"></van-cell>
|
|
</van-cell-group>
|
|
</div>
|
|
</van-popup>
|
|
|
|
<van-action-sheet v-model="actionShow" :actions="actions" cancel-text="取消" @select="(action) => { isOpenText = action.name }"
|
|
close-on-click-action></van-action-sheet>
|
|
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
|
|
<script>
|
|
|
|
const FILE_DOMAIN = "${AppFileDomain!}"
|
|
|
|
function getQueryVariable(variable) {
|
|
var query = window.location.search.substring(1);
|
|
var vars = query.split("&");
|
|
for (var i = 0; i < vars.length; i++) {
|
|
var pair = vars[i].split("=");
|
|
if (pair[0] == variable) {
|
|
return pair[1];
|
|
}
|
|
}
|
|
return '';
|
|
}
|
|
|
|
var xhrOnProgress = function (fun) {
|
|
xhrOnProgress.onprogress = fun; //绑定监听
|
|
//使用闭包实现监听绑
|
|
return function () {
|
|
//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
|
|
var xhr = $.ajaxSettings.xhr();
|
|
//判断监听函数是否为函数
|
|
if (typeof xhrOnProgress.onprogress !== 'function')
|
|
return xhr;
|
|
//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
|
|
if (xhrOnProgress.onprogress && xhr.upload) {
|
|
xhr.upload.onprogress = xhrOnProgress.onprogress;
|
|
}
|
|
return xhr;
|
|
}
|
|
}
|
|
|
|
function getSuffix(filename) {
|
|
return /\.[^\.]+$/.exec(filename)
|
|
}
|
|
Vue.use(vant.Lazyload, {
|
|
lazyComponent: true,
|
|
});
|
|
var vue = new Vue({
|
|
el: "#app",
|
|
data: function () {
|
|
return {
|
|
signCount: 0,
|
|
tableData: [],
|
|
finished: false,
|
|
pageForm: {
|
|
pageNumber: 1,
|
|
pageSize: 5,
|
|
totalCount: 0
|
|
},
|
|
loading: false,
|
|
isSignCurentDay: false,
|
|
isLoading: false,
|
|
isOrder: false,
|
|
isOpenText: '公开',
|
|
actions: [{ name: '公开' }, { name: '仅自己可见' }],
|
|
actionShow: false,
|
|
fileList: [],
|
|
message: '',
|
|
writePopShow: false,
|
|
signShow: false,
|
|
boxData: {},
|
|
showPage: false,
|
|
showPicker: false,
|
|
showMsg: false,
|
|
percent: 0,
|
|
flag: true,
|
|
showPlan: true,
|
|
msg: '',
|
|
fd: [],
|
|
active: 1,
|
|
isNull: function (val) {
|
|
if (val === null || val === undefined || val === '') {
|
|
return true
|
|
}
|
|
return false
|
|
},
|
|
imgtype: ['gif', 'jpg', 'png', 'jpeg', 'heif'],
|
|
audiotype: ['mp3', 'wma', 'flac', 'wav', 'm4a', 'amr', 'au'],
|
|
doctype: ['doc', 'docx', 'txt'],
|
|
videotype: ['flv', 'swf', 'mkv', 'avi', 'rm', 'rmvb', 'wmv', 'mp4', 'mov', 'mpg', 'mpeg', 'quicktime'],
|
|
}
|
|
},
|
|
methods: {
|
|
beforeRead(file) {
|
|
if(!Array.isArray(file)) {
|
|
file = [file]
|
|
}
|
|
for (const f of file) {
|
|
const type = this.imgtype.includes(f.name.split('.')[1].toLowerCase());
|
|
if (!type) {
|
|
const str = this.imgtype.map(v => v.toLowerCase()).join("/")
|
|
vant.Toast('上传文件只能是' + str + '格式!');
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
},
|
|
writePopClose() {
|
|
if (this.fileList.length > 0) {
|
|
const u = this.fileList.map(o => o.data.filepath)
|
|
$.post('/mobile/checkin/delFile', {url: JSON.stringify(u)})
|
|
}
|
|
this.writePopShow = false
|
|
},
|
|
doDelete(file) {
|
|
$.post('/mobile/checkin/delFile', {url: JSON.stringify([file.data.filepath])})
|
|
},
|
|
afterRead(file) {
|
|
let formData = new FormData();
|
|
if (Array.isArray(file)) {
|
|
file.forEach(item => {
|
|
item.status = 'uploading';
|
|
item.message = '上传中...';
|
|
formData.append("file", item.file, item.file.name);
|
|
})
|
|
} else {
|
|
file.status = 'uploading';
|
|
file.message = '上传中...';
|
|
formData.append("file", file.file, file.file.name);
|
|
}
|
|
$.ajax({
|
|
url: "/mobile/checkin/uploadFile",
|
|
type: "post",
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: (res) => {
|
|
const {code, data} = res
|
|
if (code === 0) {
|
|
if(Array.isArray(file)) {
|
|
file.forEach(item => {
|
|
const f = data.find(o => o.filename === item.file.name)
|
|
item.status = 'success';
|
|
item.data = f
|
|
})
|
|
} else {
|
|
file.status = 'success';
|
|
file.data = data[0]
|
|
}
|
|
}
|
|
},
|
|
error: (err) => {
|
|
if(Array.isArray(file)) {
|
|
file.forEach(item => {
|
|
item.status = 'failed';
|
|
item.message = '上传失败';
|
|
})
|
|
} else {
|
|
file.status = 'failed';
|
|
file.data = '上传失败'
|
|
}
|
|
|
|
}
|
|
});
|
|
},
|
|
onRefresh () {
|
|
setTimeout(() => {
|
|
vant.Toast('刷新成功');
|
|
this.isLoading = false;
|
|
}, 1000);
|
|
},
|
|
async zanOrder () {
|
|
this.isOrder = !this.isOrder
|
|
const toast = vant.Toast.loading({message: '获取排行中...', forbidClick: true, loadingType: 'spinner',});
|
|
this.pageForm.order = this.isOrder
|
|
setTimeout(() => {
|
|
this.doSearch();
|
|
toast.clear()
|
|
}, 200)
|
|
},
|
|
async signDo () {
|
|
const that = this
|
|
|
|
let array = []
|
|
this.fileList.forEach(item => {
|
|
array.push(item.data)
|
|
})
|
|
const formdata = {
|
|
'hdid': getQueryVariable("id"),
|
|
'content': this.message,
|
|
'isOpen': this.isOpenText === '公开',
|
|
'files': JSON.stringify(array),
|
|
}
|
|
console.log(array)
|
|
const resp = await $.post('/mobile/checkin/doAdd', formdata)
|
|
if (resp.code === 0) {
|
|
this.signCount = resp.data
|
|
that.doSearch()
|
|
that.findOne()
|
|
that.writePopShow = false
|
|
vant.Toast('发表成功')
|
|
} else {
|
|
vant.Toast('系统错误，请联系管理员')
|
|
}
|
|
},
|
|
async delContent(item) {
|
|
vant.Dialog.confirm({
|
|
title: '提示',
|
|
message: '您确定要删除吗？',
|
|
confirmButtonColor: '#236eb4',
|
|
}).then(async () => {
|
|
const resp = await $.post('/mobile/checkin/del', {
|
|
id: item.id
|
|
})
|
|
if (resp.code === 0) {
|
|
this.doSearch()
|
|
this.findOne()
|
|
vant.Toast('删除成功')
|
|
} else {
|
|
vant.Toast('删除失败')
|
|
}
|
|
}).catch(() => {});
|
|
},
|
|
doSearch() {
|
|
this.pageForm.pageNumber = 1
|
|
this.tableData = []
|
|
this.finished = false
|
|
this.getContent()
|
|
},
|
|
tabbarChange (o) {
|
|
this.doSearch();
|
|
/*if (o !== 0) {
|
|
this.pageForm.day = ''
|
|
this.doSearch();
|
|
}
|
|
if(o === 2) {
|
|
this.$nextTick(() => {
|
|
$('.van-calendar__body').css('display', 'none')
|
|
setTimeout(() => {
|
|
$('.van-calendar__body').css('display', 'block')
|
|
}, 80)
|
|
})
|
|
}*/
|
|
},
|
|
signIn () {
|
|
this.writePopShow = true
|
|
$('.van-calendar__body').css('display', 'none')
|
|
},
|
|
signClose () {
|
|
this.$nextTick(() => {
|
|
setTimeout(() => {
|
|
$('.van-calendar__body').css('display', 'block')
|
|
}, 80)
|
|
})
|
|
this.message = ''
|
|
this.fileList = []
|
|
this.isOpenText = '公开'
|
|
},
|
|
openImage (o, index) {
|
|
vant.ImagePreview({
|
|
images: o.map(m => FILE_DOMAIN + m.url),
|
|
startPosition: index,
|
|
})
|
|
},
|
|
calendarSelect (date) {
|
|
this.pageForm.day = moment(date).format("YYYY-MM-DD")
|
|
this.getMyContent()
|
|
},
|
|
formatter (day) {
|
|
const d = moment(day.date).format("YYYY-MM-DD")
|
|
const map = this.boxData.content.map(o => moment(o.time).format("YYYY-MM-DD"))
|
|
if(d === moment().format('YYYY-MM-DD')) {
|
|
day.className = 'cur_day'
|
|
}
|
|
if (map.includes(d)) {
|
|
day.className = 'sign_in_day'
|
|
if (d === moment().format('YYYY-MM-DD')) {
|
|
/*this.$nextTick(() => {
|
|
$('.van-calendar__selected-day').removeAttr("style")
|
|
$('.van-calendar__selected-day').css('background-color', 'revert').css('color', 'revert')
|
|
.css('border', 'none').css('box-shadow', 'none')
|
|
})*/
|
|
}
|
|
}
|
|
return day
|
|
},
|
|
async getMyContent() {
|
|
const resp = await $.post('/platform/hd/checkinManage/getContent', this.pageForm)
|
|
if(resp.code === 0) {
|
|
this.tableData = resp.data.list
|
|
}
|
|
},
|
|
async getContent() {
|
|
this.loading = true
|
|
this.pageForm.hdid = getQueryVariable("id")
|
|
this.pageForm.active = this.active
|
|
const resp = await $.post('/platform/hd/checkinManage/getContent', this.pageForm)
|
|
if(resp.code === 0) {
|
|
this.tableData = this.tableData.concat(resp.data.list)
|
|
if (this.tableData.length === resp.data.totalCount) {
|
|
this.finished = true
|
|
} else {
|
|
this.pageForm.pageNumber++
|
|
}
|
|
}
|
|
this.loading = false
|
|
},
|
|
async zan(o) {
|
|
o.me_zan = ! o.me_zan
|
|
if (o.me_zan) {
|
|
o.zan_count = o.zan_count + 1
|
|
} else {
|
|
if (o.zan_count > 0) {
|
|
o.zan_count = o.zan_count - 1
|
|
}
|
|
}
|
|
o.zan_id = await $.post('/platform/hd/checkinManage/clickZan', {
|
|
id: o.zan_id,
|
|
zan: o.me_zan,
|
|
hdid: o.hdid,
|
|
contentId: o.id,
|
|
})
|
|
},
|
|
async findOne() {
|
|
var self = this
|
|
if (!this.isNull(getQueryVariable("id"))) {
|
|
await $.get("/platform/hd/checkinManage/findOne", {hdid: getQueryVariable("id")}, function (data) {
|
|
if (data.code === 0) {
|
|
document.getElementsByTagName("title")[0].innerText = data.data.hdname;
|
|
self.boxData = data.data
|
|
self.isSignCurentDay = self.boxData.content.some(o => moment(o.time).format('YYYY-MM-DD') === (moment().format('YYYY-MM-DD')))
|
|
self.showPage = true
|
|
|
|
if (!data.data.hdflag) {
|
|
self.$toast.fail("当前活动未开启！");
|
|
} else {
|
|
if (!(new Date(data.data.hdkssj.replace(/-/g, '/')).getTime() < new Date().getTime() && new Date().getTime() < new Date(data.data.hdjssj.replace(/-/g, '/')).getTime())) {
|
|
self.$toast.fail("不在活动时间范围内！");
|
|
}
|
|
}
|
|
|
|
}
|
|
})
|
|
}
|
|
},
|
|
},
|
|
async created () {
|
|
var self = this
|
|
|
|
setTimeout(() => {
|
|
$('.van-calendar__body').css('display', 'block')
|
|
}, 500)
|
|
|
|
if (window.innerWidth > 800) {
|
|
self.$notify({type: 'warning', message: '当前窗口宽度过大！部分区域显示会出现大小偏差'});
|
|
}
|
|
|
|
//await self.findOne()
|
|
await self.getContent()
|
|
},
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |