elink-star
/
esua-epdc-admin
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改样式

master
zhaoyongnian 6 years ago
parent
445e972438
commit
616ee05f9e
2 changed files with 301 additions and 248 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 547
      src/views/modules/heart/actuserclock-detail.vue
  2. 2
      src/views/modules/heart/actuserrelation.vue

547
src/views/modules/heart/actuserclock-detail.vue
View File

@ -1,351 +1,404 @@
<template> <template>
<div class="project-handle" <div class="project-handle" style="background: #ffffff;">
style="background: #ffffff;">
<div class="project-detail"> <div class="project-detail">
<div v-if="dataForm.status=='2'"> <div v-if="dataForm.oldStatus=='1' || dataForm.oldStatus=='2'">
<div class="project-detail-tip">处理操作 :</div> <div class="project-detail-tip">处理操作 :</div>
<el-form ref="dataForm" <el-form
:model="dataForm" ref="dataForm"
:rules="dataRule" :model="dataForm"
@keyup.enter.native="dataFormSubmitHandle()"> :rules="dataRule"
<el-form-item label="是否加积分 :" @keyup.enter.native="dataFormSubmitHandle()"
prop="status"> >
<el-radio v-model="dataForm.status" <el-form-item label="是否加积分 :" prop="status">
label="5">确认加积分</el-radio> <el-radio v-model="dataForm.status" label="5">确认加积分</el-radio>
<el-radio v-model="dataForm.status" <el-radio v-model="dataForm.status" label="6">拒绝加积分</el-radio>
label="6">拒绝加积分</el-radio>
</el-form-item> </el-form-item>
<el-form-item label="处理意见 :" <el-form-item label="处理意见 :" prop="failureReason">
prop="failureReason"> <el-input
<el-input :rows="4" :rows="4"
v-model="dataForm.failureReason" v-model="dataForm.failureReason"
type="textarea" type="textarea"
placeholder="请写明理由，100字以内"></el-input> placeholder="请写明理由，100字以内"
></el-input>
</el-form-item> </el-form-item>
<el-form-item style="float: right;"> <el-form-item style="float: right;">
<el-button size="small" <el-button
style="width: 95px" size="small"
type="primary" style="width: 95px"
@click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> type="primary"
<el-button size="small" @click="dataFormSubmitHandle()"
style="width: 95px" >{{ $t('confirm') }}</el-button>
@click="backToActClockList">{{ '返回' }}</el-button> <el-button size="small" style="width: 95px" @click="backToActClockList">{{ '返回' }}</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class="info" <div class="info" v-if="dataForm.oldStatus=='5'">
v-if="dataForm.status=='5'"> <div class="project-detail-tip">处理操作 :</div>
{{dataForm.status}} <div class="info-title">本次活动已确认加积分</div>
<div>本次活动已确认加积分</div> <div class="info-content">如有积分调整，请在“志愿者管理-积分调整”里对该用户进行增或减积分操作</div>
<div>如有积分调整，请在“志愿者管理-积分调整”里对该用户进行增或减积分操作</div> <el-button class="info-but" size="small" style="width: 95px" @click="backToActClockList">{{ '返回' }}</el-button>
<el-button size="small"
style="width: 95px"
@click="backToActClockList">{{ '返回' }}</el-button>
</div> </div>
<div class="info" <div class="info" v-if="dataForm.oldStatus=='6'">
v-if="dataForm.status=='6'"> <div class="project-detail-tip">处理操作 :</div>
{{dataForm.status}} <div class="info-title">本次活动已拒绝加积分</div>
<div>本次活动已拒绝加积分</div> <div class="info-content">如有积分调整，请在“志愿者管理-积分调整”里对该用户进行增或减积分操作</div>
<div>如有积分调整，请在“志愿者管理-积分调整”里对该用户进行增或减积分操作</div> <el-button class="info-but" size="small" style="width: 95px" @click="backToActClockList">{{ '返回' }}</el-button>
<el-button size="small"
style="width: 95px"
@click="backToActClockList">{{ '返回' }}</el-button>
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<div class="location"><span style="font-weight: bold;color: #606266">打卡位置 :</span> {{dataForm.address}}</div> <div class="location">
<div id="mapContainer" <span style="font-weight: bold;color: #606266">打卡位置 :</span>
style="width:450px;height:220px;"></div> {{dataForm.address}}
</div>
<div id="mapContainer" style="width:450px;height:220px;"></div>
</div> </div>
<div class="handle-operation"> <div class="handle-operation">
<div class="handle-operation-tip">打卡详情</div> <div class="handle-operation-tip">打卡详情</div>
<el-table v-loading="dataListLoading" <el-table
:data="dataList" v-loading="dataListLoading"
border :data="dataList"
@selection-change="dataListSelectionChangeHandle" border
style="width: 100%;"> @selection-change="dataListSelectionChangeHandle"
<el-table-column label="序号" style="width: 100%;"
type="index" >
show-overflow-tooltip <el-table-column label="序号" type="index" show-overflow-tooltip align="center" width="50"></el-table-column>
align="center" <el-table-column prop="realName" label="报名人" header-align="center" align="center"></el-table-column>
width="50"></el-table-column> <el-table-column
<el-table-column prop="realName" prop="sex"
label="报名人" label="性别"
header-align="center" :formatter="formatSex"
align="center"></el-table-column> header-align="center"
<el-table-column prop="sex" align="center"
label="性别" ></el-table-column>
:formatter="formatSex" <el-table-column prop="age" label="年龄" header-align="center" align="center"></el-table-column>
header-align="center" <el-table-column prop="mobile" label="联系电话" header-align="center" align="center"></el-table-column>
align="center"></el-table-column> <el-table-column prop="clockAddress" label="打卡地点" header-align="center" align="center"></el-table-column>
<el-table-column prop="age" <el-table-column prop="clockDesc" label="打卡描述" header-align="center" align="center"></el-table-column>
label="年龄" <el-table-column label="图片" fixed="right" header-align="center" align="center" width="400">
header-align="center"
align="center"></el-table-column>
<el-table-column prop="mobile"
label="联系电话"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="clockAddress"
label="打卡地点"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="clockDesc"
label="打卡描述"
header-align="center"
align="center"></el-table-column>
<el-table-column label="图片"
fixed="right"
header-align="center"
align="center"
width="400">
<template slot-scope="scope"> <template slot-scope="scope">
<el-image class="avatar1" <el-image
v-if="scope.row.clockPic[0]" class="avatar1"
:src="scope.row.clockPic[0]" v-if="scope.row.clockPic[0]"
:key="scope.row.clockPic[0]" :src="scope.row.clockPic[0]"
:preview-src-list="previewImgList" :key="scope.row.clockPic[0]"
@click="clickImg(scope.row.clockPic[0])"></el-image> :preview-src-list="previewImgList"
<el-image class="avatar1" @click="clickImg(scope.row.clockPic[0])"
v-if="scope.row.clockPic[1]" ></el-image>
:src="scope.row.clockPic[1]" <el-image
:key="scope.row.clockPic[1]" class="avatar1"
:preview-src-list="previewImgList" v-if="scope.row.clockPic[1]"
@click="clickImg(scope.row.clockPic[1])"></el-image> :src="scope.row.clockPic[1]"
<el-image class="avatar1" :key="scope.row.clockPic[1]"
v-if="scope.row.clockPic[2]" :preview-src-list="previewImgList"
:src="scope.row.clockPic[2]" @click="clickImg(scope.row.clockPic[1])"
:key="scope.row.clockPic[2]" ></el-image>
:preview-src-list="previewImgList" <el-image
@click="clickImg(scope.row.clockPic[2])"></el-image> class="avatar1"
v-if="scope.row.clockPic[2]"
:src="scope.row.clockPic[2]"
:key="scope.row.clockPic[2]"
:preview-src-list="previewImgList"
@click="clickImg(scope.row.clockPic[2])"
></el-image>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination :current-page="page" <el-pagination
:page-sizes="[10, 20, 50, 100]" :current-page="page"
:page-size="limit" :page-sizes="[10, 20, 50, 100]"
:total="total" :page-size="limit"
layout="total, sizes, prev, pager, next, jumper" :total="total"
@size-change="pageSizeChangeHandle" layout="total, sizes, prev, pager, next, jumper"
@current-change="pageCurrentChangeHandle"> @size-change="pageSizeChangeHandle"
</el-pagination> @current-change="pageCurrentChangeHandle"
></el-pagination>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import mixinViewModule from '@/mixins/view-module' import mixinViewModule from "@/mixins/view-module";
import debounce from 'lodash/debounce' import debounce from "lodash/debounce";
import 'element-ui/lib/theme-chalk/timeline.css' import "element-ui/lib/theme-chalk/timeline.css";
import 'element-ui/lib/theme-chalk/timeline-item.css' import "element-ui/lib/theme-chalk/timeline-item.css";
import 'element-ui/lib/theme-chalk/image.css' import "element-ui/lib/theme-chalk/image.css";
var map var map;
var markerList = [] var markerList = [];
var radiusList = [] var radiusList = [];
// var clockList = [] // var clockList = []
export default { export default {
mixins: [mixinViewModule], mixins: [mixinViewModule],
name: 'ActUserClockDetail', name: "ActUserClockDetail",
data () { data() {
return { return {
mixinViewModuleOptions: { mixinViewModuleOptions: {
getDataListURL: '/heart/actuserclocklog/page', getDataListURL: "/heart/actuserclocklog/page",
getDataListIsPage: true getDataListIsPage: true
}, },
dataForm: { dataForm: {
id: '', id: "",
actId: '', actId: "",
status: '', status: "",
failureReason: '', failureReason: "",
address: '', address: "",
latitude: '', latitude: "",
longitude: '', longitude: "",
radius: 200, radius: 200,
clockPic: [] clockPic: []
}, },
previewImgList: [], previewImgList: [],
isAble: false isAble: false
} };
}, },
mounted () { mounted() {
this.dataForm.id = this.$route.query.id this.dataForm.id = this.$route.query.id;
this.dataForm.actId = this.$route.query.actId this.dataForm.actId = this.$route.query.actId;
this.init() this.init();
}, },
computed: { computed: {
dataRule () { dataRule() {
return { return {
status: [ status: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } {
required: true,
message: this.$t("validate.required"),
trigger: "blur"
}
], ],
failureReason: [ failureReason: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } {
required: true,
message: this.$t("validate.required"),
trigger: "blur"
}
] ]
} };
} }
}, },
methods: { methods: {
backToActClockList() {
backToActClockList () { this.$emit("refreshDataList");
this.$emit('refreshDataList') this.$parent.selectComponent = "ActUserClockLog";
this.$parent.selectComponent = 'ActUserClockLog' this.$router.push({
this.$router.push({ path: '/heart-actinfo', query: { id: this.dataForm.actId } }) path: "/heart-actinfo",
query: { id: this.dataForm.actId }
});
}, },
setMap (data) { setMap(data) {
// 步骤：定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器 // 步骤：定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
// 设置地图中心点 // 设置地图中心点
var myLatlng = new qq.maps.LatLng(data.latitude, data.longitude) var myLatlng = new qq.maps.LatLng(data.latitude, data.longitude);
// 定义工厂模式函数 // 定义工厂模式函数
var zoom = this.capacity(data) var zoom = this.capacity(data);
var myOptions = { var myOptions = {
zoom: zoom, // 设置地图缩放级别 zoom: zoom, // 设置地图缩放级别
center: myLatlng, // 设置中心点样式 center: myLatlng, // 设置中心点样式
mapTypeId: qq.maps.MapTypeId.ROADMAP // 设置地图样式详情参见MapType mapTypeId: qq.maps.MapTypeId.ROADMAP // 设置地图样式详情参见MapType
} };
// //获取dom元素添加地图信息 // //获取dom元素添加地图信息
map = new qq.maps.Map(document.getElementById('mapContainer'), myOptions) map = new qq.maps.Map(document.getElementById("mapContainer"), myOptions);
// 设置圆形 // 设置圆形
var radius = new qq.maps.Circle({ var radius = new qq.maps.Circle({
center: new qq.maps.LatLng(data.latitude, data.longitude), center: new qq.maps.LatLng(data.latitude, data.longitude),
radius: this.dataForm.radius, radius: this.dataForm.radius,
map: map map: map
}) });
radiusList.push(radius) radiusList.push(radius);
var marker = new qq.maps.Marker({ var marker = new qq.maps.Marker({
position: myLatlng, position: myLatlng,
map: map map: map
}) });
markerList.push(marker) markerList.push(marker);
}, },
init () { init() {
this.$nextTick(() => { this.$nextTick(() => {
if (this.dataForm.id) { if (this.dataForm.id) {
this.getInfo() this.getInfo();
} }
}) });
}, },
// 点击查看大图 // 点击查看大图
clickImg (url) { clickImg(url) {
this.previewImgList = [] this.previewImgList = [];
this.previewImgList.push(url) this.previewImgList.push(url);
}, },
getDataList () { getDataList() {
this.dataListLoading = true this.dataListLoading = true;
this.$http.get( this.$http
this.mixinViewModuleOptions.getDataListURL, .get(this.mixinViewModuleOptions.getDataListURL, {
{
params: { params: {
order: this.order, order: this.order,
orderField: this.orderField, orderField: this.orderField,
page: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null, page: this.mixinViewModuleOptions.getDataListIsPage
limit: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null, ? this.page
: null,
limit: this.mixinViewModuleOptions.getDataListIsPage
? this.limit
: null,
...this.dataForm ...this.dataForm
} }
}
).then(({ data: res }) => {
this.dataListLoading = false
if (res.code !== 0) {
this.dataList = []
this.total = 0
return this.$message.error(res.msg)
}
this.dataList = this.mixinViewModuleOptions.getDataListIsPage ? res.data.list : res.data
this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
this.dataList.forEach((item) => {
var LogLatlng = new qq.maps.LatLng(item.clockLatitude, item.clockLongitude)
var LogMarker = new qq.maps.Marker({
position: LogLatlng,
map: map
})
markerList.push(LogMarker)
}) })
console.log(markerList) .then(({ data: res }) => {
}).catch(() => { this.dataListLoading = false;
this.dataListLoading = false if (res.code !== 0) {
}) this.dataList = [];
this.total = 0;
return this.$message.error(res.msg);
}
this.dataList = this.mixinViewModuleOptions.getDataListIsPage
? res.data.list
: res.data;
this.total = this.mixinViewModuleOptions.getDataListIsPage
? res.data.total
: 0;
this.dataList.forEach(item => {
var LogLatlng = new qq.maps.LatLng(
item.clockLatitude,
item.clockLongitude
);
var LogMarker = new qq.maps.Marker({
position: LogLatlng,
map: map
});
markerList.push(LogMarker);
});
console.log(markerList);
})
.catch(() => {
this.dataListLoading = false;
});
}, },
// 获取信息 // 获取信息
getInfo () { getInfo() {
this.$http.get(`/heart/actuserclocklog/clockDetail/${this.dataForm.id}`).then(({ data: res }) => { this.$http
if (res.code !== 0) { .get(`/heart/actuserclocklog/clockDetail/${this.dataForm.id}`)
return this.$message.error(res.msg) .then(({ data: res }) => {
} if (res.code !== 0) {
this.dataForm = { return this.$message.error(res.msg);
...this.dataForm, }
...res.data this.dataForm = {
} ...this.dataForm,
// if (res.data.status != '5' && res.data.status != '6') { ...res.data
// this.dataForm.status = '5'; };
// this.dataForm.failureReason = ''; // if (res.data.status != '5' && res.data.status != '6') {
// } else { // this.dataForm.status = '5';
// this.isAble = true; // this.dataForm.failureReason = '';
// } // } else {
this.setMap(res.data) // this.isAble = true;
// }
this.setMap(res.data);
this.getDataList() this.getDataList();
}).catch(() => { }) })
.catch(() => {});
}, },
capacity (data) { capacity(data) {
if (data.radius > 0 && data.radius <= 25) { if (data.radius > 0 && data.radius <= 25) {
return 18 return 18;
} else if (data.radius > 25 && data.radius <= 50) { } else if (data.radius > 25 && data.radius <= 50) {
return 17 return 17;
} else if (data.radius > 50 && data.radius <= 100) { } else if (data.radius > 50 && data.radius <= 100) {
return 16 return 16;
} else if (data.radius > 100 && data.radius <= 200) { } else if (data.radius > 100 && data.radius <= 200) {
return 15 return 15;
} else if (data.radius > 200 && data.radius <= 500) { } else if (data.radius > 200 && data.radius <= 500) {
return 14 return 14;
} else if (data.radius > 500 && data.radius <= 1000) { } else if (data.radius > 500 && data.radius <= 1000) {
return 13 return 13;
} else if (data.radius > 1000 && data.radius <= 2000) { } else if (data.radius > 1000 && data.radius <= 2000) {
return 12 return 12;
} else if (data.radius > 2000 && data.radius <= 5000) { } else if (data.radius > 2000 && data.radius <= 5000) {
return 11 return 11;
} }
}, },
formatSex: function (row, column) { formatSex: function(row, column) {
let state = row.sex let state = row.sex;
if (state === '0') { if (state === "0") {
return '女' return "女";
} else if (state === '1') { } else if (state === "1") {
return '男' return "男";
} }
}, },
// 表单提交 // 表单提交
dataFormSubmitHandle: debounce(function () { dataFormSubmitHandle: debounce(
this.$refs['dataForm'].validate((valid) => { function() {
if (!valid) { this.$refs["dataForm"].validate(valid => {
return false if (!valid) {
} return false;
if (this.dataForm.failureReason.length > 100) {
return this.$message.error('处理意见不超过100字')
}
// this.isAble = true
this.$http['post']('/heart/actuserclocklog/pointCheck', this.dataForm).then(({ data: res }) => {
// this.isAble = false
if (res.code !== 0) {
return this.$message.error(res.msg)
} }
this.$message({ if (this.dataForm.failureReason.length > 100) {
message: this.$t('prompt.success'), return this.$message.error("处理意见不超过100字");
type: 'success', }
duration: 500, // this.isAble = true
onClose: () => { this.$http["post"]("/heart/actuserclocklog/pointCheck", this.dataForm)
this.$emit('refreshDataList') .then(({ data: res }) => {
this.$parent.selectComponent = 'ActUserClockLog' // this.isAble = false
this.$router.push({ path: '/heart-actinfo', query: { id: this.dataForm.actId } }) if (res.code !== 0) {
} return this.$message.error(res.msg);
}) }
}).catch(() => { }) this.$message({
}) message: this.$t("prompt.success"),
}, 1000, { 'leading': true, 'trailing': false }) type: "success",
duration: 500,
onClose: () => {
this.$emit("refreshDataList");
this.$parent.selectComponent = "ActUserClockLog";
this.$router.push({
path: "/heart-actinfo",
query: { id: this.dataForm.actId }
});
}
});
})
.catch(() => {});
});
},
1000,
{ leading: true, trailing: false }
)
} }
} };
</script> </script>
<style lang="scss"> <style lang="scss">
.aui-wrapper .el-pagination {
margin-top: 10px;
margin-bottom: 10px !important;
}
.project-handle .el-input {
width: 100px !important;
}
.project-handle .handle-operation {
background: #fff;
}
.el-pagination__editor.el-input {
width: 50px !important;
}
.project-handle {
padding: 0 !important;
}
.project-handle .project-detail {
width: 59% !important;
padding-left: 50px;
padding-top: 40px !important;
min-height: 245px !important;
}
.info-title {
text-align: center;
font-weight: 500;
text-align: center;
font-size: 20px;
}
.info-content {
text-align: center;
margin-top: 18px;
font-size: 17px;
color: #6e6e6e;
}
.info-but{
margin: 60px 70px 20px 0;
float: right;
}
.avatar1 { .avatar1 {
width: 120px; width: 120px;
height: 120px; height: 120px;

2
src/views/modules/heart/actuserrelation.vue
View File

@ -78,7 +78,7 @@
<el-button <el-button
type="text" type="text"
size="small" size="small"
v-if="scope.row.status" v-if="scope.row.status == 0"
@click="addOrUpdateHandle(scope.row.id)" @click="addOrUpdateHandle(scope.row.id)"
>审核</el-button> >审核</el-button>
<!-- <el-button type="text" size="small" :disabled="scope.row.status ==='0'? false :true" @click="addOrUpdateHandle(scope.row.id)">审核</el-button> --> <!-- <el-button type="text" size="small" :disabled="scope.row.status ==='0'? false :true" @click="addOrUpdateHandle(scope.row.id)">审核</el-button> -->

Write Preview
Loading…
Cancel
Save