Skip to content

S
safe-campus-bbs
Commit 757a284f authored by yuwenwen's avatar yuwenwen
Browse files
Options

轻享前端代码优化

parent 22a6c2f1
Hide whitespace changes
Inline Side-by-side
Showing with 714 additions and 144 deletions
safe-campus-bbs-ui/src/api/pointsExchange/index.js
View file @ 757a284f
...@@ -17,6 +17,14 @@ export function exchangeUser(params) { ...@@ -17,6 +17,14 @@ export function exchangeUser(params) {
params params
}) })
} }
// 兑换商品选择
export function exchangeGoods(params){
return request({
url: '/bbs/points/exchange/select/goods',
method: 'get',
params
})
}
// 兑换列表 // 兑换列表
export function listData(params) { export function listData(params) {
......
safe-campus-bbs-ui/src/api/pointsManage/index.js
View file @ 757a284f
...@@ -17,6 +17,13 @@ export function detailData(params) { ...@@ -17,6 +17,13 @@ export function detailData(params) {
params params
}) })
} }
// 积分详情
export function pointsDetail(userName){
return request({
url:`/bbs/points/user/points/${userName}`,
method: 'get',
})
}
// 导出用户 // 导出用户
export function exportUser(data){ export function exportUser(data){
......
safe-campus-bbs-ui/src/components/GoodsSelect/index.vue 0 → 100644
View file @ 757a284f
<template>
<el-dialog :visible.sync="visible" :title="title" width="60%" append-to-body>
<el-form :model="queryParams" ref="formRef" :inline="true" @submit.prevent.stop>
<el-form-item label="商品名称">
<el-input placeholder="请输入" v-model="queryParams.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">搜索</el-button>
<el-button>重置</el-button>
</el-form-item>
</el-form>
<div v-if="selectDataList.length > 0" class="mb20">
<el-tag v-for="tag in selectDataList" :key="tag.code" closable>
{{ tag.name }}
</el-tag>
</div>
<el-table ref="tableRef" row-key="code" :data="list" @selection-change="handleCheckboxChange" v-loading="loading">
<el-table-column type="selection" width="60"></el-table-column>
<el-table-column label="商品名称" prop="name" align="center"></el-table-column>
<el-table-column label="商品图片" align="center">
<template #default="{ row }">
<el-image :src="row.imgsUrl" style="width: 30px;height: 30px;"></el-image>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" @pagination="getList" />
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</div>
</el-dialog>
</template>
<script>
import { listData, detailData } from '@/api/pointsMall';
export default {
data() {
return {
visible: false,
title: '选择',
list: [],
queryParams: {
pageNum: 1,
pageSize: 10,
nickName: ''
},
total: 0,
selectDataList: [],
loading:false
}
},
props: {
multiple: {
type: Boolean,
default: false
},
modelValue: {
type: [Object, Array],
default: undefined
},
data: {
type: [String, Number, Array],
default: undefined
},
},
methods: {
openModal(data) {
this.visible = true;
this.getList(data)
},
getList(data) {
this.loading = true
listData(this.queryParams).then(res => {
this.list = res.rows;
this.total = res.total
if (data) {
this.getDetail(data)
}
}).finally(()=>{
this.loading = false
})
},
getDetail(data) {
let _this = this;
detailData(data).then(res => {
_this.selectDataList = [res.data]
})
const users = this.list.filter((item) => {
return data == item.code;
});
if (users.length > 0) {
users.forEach(async (item) => {
await _this.$nextTick(() => {
this.$refs.tableRef.toggleRowSelection(item, true);
});
})
}
},
handleCheckboxChange(selection) {
if (!this.multiple) {
if (selection.length > 1) {
this.$refs.tableRef.clearSelection();
this.$refs.tableRef.toggleRowSelection(selection[selection.length - 1]);
this.selectDataList = [selection[selection.length - 1]]
} else {
this.selectDataList = selection
}
} else {
this.selectDataList = selection
}
},
handleClose() {
this.visible = false
},
handleConfirm() {
this.$emit('update:modelValue', this.selectDataList);
this.$emit('confirmCallBack', this.selectDataList);
this.handleClose()
}
}
}
</script>
\ No newline at end of file
safe-campus-bbs-ui/src/components/GoodsSelect/input.vue 0 → 100644
View file @ 757a284f
<template>
<div style="width: 100%;">
<el-input v-model="selectName" :readonly="readonly" :placeholder="placeholder">
<el-button slot="append" icon="el-icon-search" @click="openUserSelect"></el-button>
</el-input>
<GoodsSelect ref="userSelectRef" :multiple="multiple" :data="selectData" @confirmCallBack="userSelectCallBack">
</GoodsSelect>
</div>
</template>
<script>
import GoodsSelect from './index.vue'
import { detailData } from '@/api/pointsMall';
export default {
data() {
return {
selectName: '',
selectData: ''
}
},
components: {
GoodsSelect
},
props: {
multiple: {
type: Boolean,
default: false
},
placeholder: {
value: String,
default: '请选择'
},
value: {
value: [String, Number],
default: ''
},
readonly: {
type: Boolean,
default: true
},
},
watch: {
value: {
handler: function (val, oVal) {
if (val) {
this.selectData = val;
this.handleGoodsChange(val)
}
}
},
deep: true,
immediate: true
},
methods: {
openUserSelect() {
this.$refs.userSelectRef.openModal(this.selectData)
},
userSelectCallBack(data) {
if (data.length === 0) {
this.selectName = undefined
this.selectData = ''
} else {
this.selectName = data.map((item) => item.name).join(',');
this.selectData = data.map((item) => item.code).join(',');
}
this.$emit('update:value', this.selectData);
this.$emit('getValue', this.selectData, this.selectName);
},
handleGoodsChange(val) {
detailData(val).then(res => {
if (val) {
this.selectName = res.data.name;
}
})
},
}
}
</script>
\ No newline at end of file
safe-campus-bbs-ui/src/components/UserSelect/index.vue 0 → 100644
View file @ 757a284f
<template>
<el-dialog :visible.sync="visible" :title="title" width="60%" append-to-body>
<el-form :model="queryParams" ref="formRef" :inline="true" @submit.prevent.stop>
<el-form-item label="姓名">
<el-input placeholder="请输入" v-model="queryParams.nickName"></el-input>
</el-form-item>
<el-form-item label="用户名">
<el-input placeholder="请输入" v-model="queryParams.userName"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">搜索</el-button>
<el-button>重置</el-button>
</el-form-item>
</el-form>
<div v-if="selectDataList.length > 0" class="mb20">
<el-tag v-for="tag in selectDataList" :key="tag.userName" closable>
{{ tag.nickName }}
</el-tag>
</div>
<el-table ref="tableRef" row-key="userName" :data="list" @selection-change="handleCheckboxChange" v-loading="loading">
<el-table-column type="selection" width="60"></el-table-column>
<el-table-column label="姓名" prop="nickName" align="center"></el-table-column>
<el-table-column label="用户名" prop="userName" align="center"></el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" @pagination="getList" />
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</div>
</el-dialog>
</template>
<script>
import { listData, pointsDetail } from '@/api/pointsManage';
export default {
data() {
return {
visible: false,
title: '选择',
list: [],
queryParams: {
pageNum: 1,
pageSize: 10,
nickName: ''
},
total: 0,
selectDataList: [],
loading:false
}
},
props: {
multiple: {
type: Boolean,
default: false
},
modelValue: {
type: [Object, Array],
default: undefined
},
data: {
type: [String, Number, Array],
default: undefined
},
},
methods: {
openModal(data) {
this.visible = true;
this.getList(data)
},
getList(data) {
this.loading = true;
listData(this.queryParams).then(res => {
this.list = res.rows;
this.total = res.total
if (data) {
this.getDetail(data)
}
}).finally(()=>{
this.loading = false
})
},
getDetail(data) {
let _this = this;
pointsDetail(data).then(res => {
_this.selectDataList = [res.data]
})
const users = this.list.filter((item) => {
return data == item.userName;
});
if (users.length > 0) {
users.forEach(async (item) => {
await _this.$nextTick(() => {
this.$refs.tableRef.toggleRowSelection(item, true);
});
})
}
},
handleCheckboxChange(selection) {
if (!this.multiple) {
if (selection.length > 1) {
this.$refs.tableRef.clearSelection();
this.$refs.tableRef.toggleRowSelection(selection[selection.length - 1]);
this.selectDataList = [selection[selection.length - 1]]
} else {
this.selectDataList = selection
}
} else {
this.selectDataList = selection
}
},
handleClose() {
// this.selectDataList = [];
// this.list = [];
// this.total = 0;
this.visible = false
},
handleConfirm() {
this.$emit('update:modelValue', this.selectDataList);
this.$emit('confirmCallBack', this.selectDataList);
this.handleClose()
}
}
}
</script>
\ No newline at end of file
safe-campus-bbs-ui/src/components/UserSelect/input.vue 0 → 100644
View file @ 757a284f
<template>
<div style="width: 100%;">
<el-input v-model="selectName" :readonly="readonly" :placeholder="placeholder">
<el-button slot="append" icon="el-icon-search" @click="openUserSelect"></el-button>
</el-input>
<UserSelect ref="userSelectRef" :multiple="multiple" :data="selectData" @confirmCallBack="userSelectCallBack">
</UserSelect>
</div>
</template>
<script>
import { pointsDetail } from '@/api/pointsManage';
import UserSelect from './index.vue'
export default {
data() {
return {
selectName: '',
selectData: ''
}
},
components: {
UserSelect
},
props: {
multiple: {
type: Boolean,
default: false
},
placeholder: {
value: String,
default: '请选择'
},
value: {
value: [String, Number],
default: ''
},
readonly: {
type: Boolean,
default: true
},
},
watch: {
value: {
handler: function (val, oVal) {
if (val) {
this.selectData = val;
this.handleUserChange(val)
}
}
},
deep: true,
immediate: true
},
methods: {
openUserSelect() {
this.$refs.userSelectRef.openModal(this.selectData)
},
userSelectCallBack(data) {
debugger
if (data.length === 0) {
this.selectName = undefined
this.selectData = ''
} else {
this.selectName = data.map((item) => item.nickName).join(',');
this.selectData = data.map((item) => item.userName).join(',');
}
this.$emit('update:value', this.selectData);
this.$emit('getValue', this.selectData, this.selectName);
},
handleUserChange(val) {
pointsDetail(val).then(res => {
if (val) {
this.selectName = res.data.nickName;
}
})
},
}
}
</script>
\ No newline at end of file
safe-campus-bbs-ui/src/views/pointsManage/ExchangeDialog.vue
View file @ 757a284f
...@@ -2,22 +2,16 @@ ...@@ -2,22 +2,16 @@
<el-dialog :visible.sync="visible" v-if="visible" title="积分兑换" width="36%" class="dialog" @close="handleClose"> <el-dialog :visible.sync="visible" v-if="visible" title="积分兑换" width="36%" class="dialog" @close="handleClose">
<el-form :model="form" ref="formRef" label-position="top" :rules="rules"> <el-form :model="form" ref="formRef" label-position="top" :rules="rules">
<el-form-item label="兑换人"> <el-form-item label="兑换人">
<el-select placeholder="请选择" style="width: 100%;" v-model="form.userName" @change="handleUserChange"> <UserSelectInput :value.sync="form.userName" placeholder="请选择兑换人"></UserSelectInput>
<el-option v-for="(item, index) in userList" :key="index" :value="item.userName"
:label="item.nickName"></el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="会员等级"> <el-form-item label="会员等级">
<el-input v-model="form.gradeName" :disabled="true" placeholder="请输入"></el-input> <el-input v-model="form.gradeName" :readonly="true" placeholder="请输入"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="当前积分"> <el-form-item label="当前积分">
<el-input v-model="form.currentPoints" :disabled="true" placeholder="请输入"></el-input> <el-input v-model="form.currentPoints" :readonly="true" placeholder="请输入"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="兑换商品" prop="goodsCode"> <el-form-item label="兑换商品" prop="goodsCode">
<el-select placeholder="请选择" style="width: 100%;" v-model="form.goodsCode"> <GoodsSelectInput :value.sync="form.goodsCode" placeholder="请选择兑换商品"></GoodsSelectInput>
<el-option v-for="(item, index) in optionList" :label="item.name" :value="item.code"
:key="index"></el-option>
</el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
...@@ -27,7 +21,10 @@ ...@@ -27,7 +21,10 @@
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import { pointsExchange, exchangeUser, exchange } from '@/api/pointsExchange' import { pointsExchange, exchange } from '@/api/pointsExchange'
import { pointsDetail } from '@/api/pointsManage';
import UserSelectInput from '@/components/UserSelect/input'
import GoodsSelectInput from '@/components/GoodsSelect/input'
export default { export default {
data() { data() {
return { return {
...@@ -36,57 +33,61 @@ export default { ...@@ -36,57 +33,61 @@ export default {
userList: [], userList: [],
optionList: [], optionList: [],
rules: { rules: {
goodsCode: [{ required: true, message: '请选择兑换商品', trigger: 'change' }] goodsCode: [{ required: true, message: '请选择兑换商品', trigger: ['blur', 'change'] }]
}, },
disabled: false disabled: false
} }
}, },
components: {
UserSelectInput,
GoodsSelectInput
},
watch: {
"form.userName": {
handler: function (val, oVal) {
console.log(val, oVal)
if (val) {
this.handleUserChange(val)
}
}
},
deep: true,
immediate: true
},
methods: { methods: {
// 打开兑换窗口 // 打开兑换窗口
openModal(row) { openModal(row) {
this.visible = true; this.visible = true;
this.getUsers(row)
this.getOptions()
this.disabled = row ? true : false this.disabled = row ? true : false
this.$nextTick(() => { this.$nextTick(() => {
this.form = { ...this.form, ...row } this.form = { ...this.form, ...row }
}) })
}, },
// 兑换人
getUsers(row) {
exchangeUser().then(res => {
console.log(res)
this.userList = res.data;
if (row && row.userName) {
res.data.forEach((item) => {
if (item.userName == row.userName) {
this.form.nickName = item.nickName;
this.form.gradeName = item.gradeName
}
})
}
})
},
handleUserChange(val) { handleUserChange(val) {
this.userList.forEach((item) => { pointsDetail(val).then(res => {
if (item.userName == val) { if (val) {
this.form.nickName = item.nickName; console.log(res.data)
this.form.gradeName = item.gradeName this.form = { ...this.form, ...res.data }
this.form.currentPoints = item.currentPoints
} }
}) })
}, },
// 兑换商品列表
getOptions() {
pointsExchange().then(res => {
console.log(res)
this.optionList = res.data
})
},
handleConfirm() { handleConfirm() {
let { nickName, userName, userGradeName, goodsCode } = this.form let { nickName, userName, userGradeName, goodsCode, currentPoints } = this.form;
let data = { nickName, userName, userGradeName, goodsCode } let data = {
nickName,
userName,
userGradeName,
goodsCode,
currentPoints
}
if (!userName) {
this.$modal.msgError("请选择兑换人");
return;
}
// if (!code) {
// this.$modal.msgError("请选择兑换商品");
// return;
// }
this.$refs.formRef.validate((valid) => { this.$refs.formRef.validate((valid) => {
if (valid) { if (valid) {
exchange(data).then(res => { exchange(data).then(res => {
...@@ -95,7 +96,7 @@ export default { ...@@ -95,7 +96,7 @@ export default {
this.handleClose() this.handleClose()
this.$emit('handleOk'); this.$emit('handleOk');
} else { } else {
this.$modal.msgSuccess(res.msg || "兑换失败"); this.$modal.msgError(res.msg || "兑换失败");
} }
}) })
} }
......
safe-campus-bbs-uniapp/components/ListEmpty.vue 0 → 100644
View file @ 757a284f
<template>
<view class="list-empty-components">
<image src="/static/images/empty.png" class="img"></image>
<view class="text">{{text}}</view>
</view>
</template>
<script>
export default {
name:"ListEmpty",
data() {
return {
};
},
props:{
text:{
type:String,
default:'暂无数据~'
}
},
}
</script>
<style lang="scss">
.list-empty-components{
min-height: 600rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.img{
width:160rpx;
height: 160rpx;
}
.text{
color: rgba(195, 200, 206, 1);
font-size: 28rpx;
}
}
</style>
\ No newline at end of file
safe-campus-bbs-uniapp/pages.json
View file @ 757a284f
...@@ -10,7 +10,8 @@ ...@@ -10,7 +10,8 @@
{ {
"path": "pages/index/index", "path": "pages/index/index",
"style": { "style": {
"navigationBarTitleText": "轻享" "navigationBarTitleText": "轻享",
"enablePullDownRefresh": true
} }
}, },
{ {
......
safe-campus-bbs-uniapp/pages/index/index.vue
View file @ 757a284f
...@@ -5,11 +5,14 @@ ...@@ -5,11 +5,14 @@
<input placeholder="搜索" placeholder-class="placeholder-class" /> <input placeholder="搜索" placeholder-class="placeholder-class" />
</view> </view>
<scroll-view class="scroll-view-index" scroll-y :show-scrollbar="false" @scrolltolower="loadMore"> <scroll-view class="scroll-view-index" scroll-y :show-scrollbar="false" v-if="list.length>0" @scrolltolower="loadMore">
<template v-for="(item,index) in list"> <template v-for="(item,index) in list">
<dynamic-item :form="item" @refresh="getList"></dynamic-item> <dynamic-item :form="item" @refresh="getList"></dynamic-item>
</template> </template>
</scroll-view> </scroll-view>
<scroll-view class="scroll-view-index" scroll-y :show-scrollbar="false" v-else>
<list-empty></list-empty>
</scroll-view>
<!-- 发布按钮 --> <!-- 发布按钮 -->
<movable-area class="movable-area"> <movable-area class="movable-area">
<movable-view class="add-dynamic-box move-button" :x="area.x" :y="area.y" direction="all" @change="onChange" <movable-view class="add-dynamic-box move-button" :x="area.x" :y="area.y" direction="all" @change="onChange"
...@@ -22,6 +25,7 @@ ...@@ -22,6 +25,7 @@
<script> <script>
import DynamicItem from '@/components/Dynamic-Item.vue' import DynamicItem from '@/components/Dynamic-Item.vue'
import ListEmpty from '@/components/ListEmpty.vue';
import { import {
dynamicList dynamicList
} from '@/api/api.js' } from '@/api/api.js'
...@@ -41,33 +45,56 @@ ...@@ -41,33 +45,56 @@
} }
}, },
components: { components: {
DynamicItem DynamicItem,
ListEmpty
}, },
onLoad() { onLoad() {
this.getList() this.getList()
let _this = this; let _this = this;
uni.$on('hanldeDynamicRefresh', function() { uni.$on('hanldeDynamicRefresh', function() {
_this.list = [];
_this.queryParams.pageNum = 1;
_this.getList() _this.getList()
}) })
}, },
beforeDestroy() { beforeDestroy() {
uni.$off('hanldeDynamicRefresh') uni.$off('hanldeDynamicRefresh')
}, },
onPullDownRefresh() {
this.refreshContentList()
setTimeout(()=>{
uni.stopPullDownRefresh();
}, 1000)
},
methods: { methods: {
getList() { getList() {
uni.showLoading({
title:'加载中...'
})
dynamicList(this.queryParams).then(res => { dynamicList(this.queryParams).then(res => {
console.log(res) this.list = [...this.list,...res.rows];
this.list = res.rows this.total = res.total
}).finally(()=>{
uni.hideLoading()
}) })
}, },
loadMore() { loadMore() {
if(this.list.length < this.total){
this.queryParams.pageNum += 1;
this.getList()
}
}, },
toPublishPage() { toPublishPage() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/publish/publish' url: '/pages/publish/publish'
}) })
}, },
// 下拉刷新
refreshContentList() {
this.list = [];
this.queryParams.pageNum = 1;
this.getList();
},
toPKDetailPage() { toPKDetailPage() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/pk-detail/pk-detail' url: '/pages/pk-detail/pk-detail'
......
safe-campus-bbs-uniapp/pages/login/login.vue
View file @ 757a284f
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
// window.location = res.data // window.location = res.data
// } // }
// }) // })
window.location = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww63ca87d5f8647514&redirect_uri=http%3A%2F%2Fqywx.tangguo.ren/h5/pages/login/login/&response_type=code&scope=snsapi_base#wechat_redirect' window.location = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww63ca87d5f8647514&redirect_uri=https%3A%2F%2Ftest.tangguo.ren/h5/pages/login/login/&response_type=code&scope=snsapi_base#wechat_redirect'
}, },
// 页面跳转 // 页面跳转
......
safe-campus-bbs-uniapp/pages/mine/mine.vue
View file @ 757a284f
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<image v-else :src="userInfo.avatarUrl" class="avatar"></image> <image v-else :src="userInfo.avatarUrl" class="avatar"></image>
<view class="name-class"> <view class="name-class">
<view class="name">{{userInfo.nickName}}</view> <view class="name">{{userInfo.nickName}}</view>
<view class="class-name">{{userInfo.deptName}}</view> <view class="class-name">{{userInfo.dept.deptName}}</view>
</view> </view>
<image src="/static/images/mine/detail-icon-white.png" class="more"></image> <image src="/static/images/mine/detail-icon-white.png" class="more"></image>
</view> </view>
...@@ -29,16 +29,20 @@ ...@@ -29,16 +29,20 @@
</view> </view>
<!-- 我发的动态 --> <!-- 我发的动态 -->
<scroll-view class="my-dynamics" scroll-y :show-scrollbar="false" v-if="list.length >0"> <scroll-view class="my-dynamics" scroll-y :show-scrollbar="false" v-if="list.length >0" @scrolltolower="loadMore">
<template v-for="(item,index) in list"> <template v-for="(item,index) in list">
<dynamic-item :form="item" @refresh="getList"></dynamic-item> <dynamic-item :form="item" @refresh="getList"></dynamic-item>
</template> </template>
</scroll-view> </scroll-view>
<scroll-view class="my-dynamics" scroll-y :show-scrollbar="false" v-if="list.length==0">
<list-empty></list-empty>
</scroll-view>
</view> </view>
</template> </template>
<script> <script>
import DynamicItem from '@/components/Dynamic-Item.vue'; import DynamicItem from '@/components/Dynamic-Item.vue';
import ListEmpty from '@/components/ListEmpty.vue';
import { import {
getInfo getInfo
} from '@/api/login.js'; } from '@/api/login.js';
...@@ -55,15 +59,16 @@ ...@@ -55,15 +59,16 @@
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10 pageSize: 10
} },
total:0
} }
}, },
components: { components: {
DynamicItem DynamicItem,
ListEmpty
}, },
onLoad() { onLoad() {
this.getUserInfo(); this.getUserInfo();
}, },
onShow() { onShow() {
this.getStatistics(); this.getStatistics();
...@@ -85,10 +90,22 @@ ...@@ -85,10 +90,22 @@
}, },
// 获取当前用户动态列表 // 获取当前用户动态列表
getList() { getList() {
uni.showLoading({
title:'加载中...'
})
userDynamics(this.queryParams).then(res => { userDynamics(this.queryParams).then(res => {
this.list = res.rows this.list = [...this.list,...res.rows];
this.total = res.total;
}).finally(()=>{
uni.hideLoading()
}) })
} },
loadMore() {
if(this.list.length < this.total){
this.queryParams.pageNum += 1;
this.getList()
}
},
} }
} }
</script> </script>
......
safe-campus-bbs-uniapp/pages/pk-detail/pk-detail.vue
View file @ 757a284f
...@@ -6,13 +6,16 @@ ...@@ -6,13 +6,16 @@
</view> </view>
</view> </view>
<scroll-view class="scroll-view-pk" v-if="list.length>0"> <scroll-view class="scroll-view-pk" scroll-y :show-scrollbar="false" v-if="list.length>0" @scrolltolower="loadMore">
<view class="list-item" v-for="(item,index) in list"> <view class="list-item" v-for="(item,index) in list">
<image src="/static/images/default-avatar.png" class="avatar"></image> <image src="/static/images/default-avatar.png" class="avatar"></image>
<view class="name">{{item.nickName}}</view> <view class="name">{{item.nickName}}</view>
<view class="datetime">{{item.createTime}}</view> <view class="datetime">{{item.createTime}}</view>
</view> </view>
</scroll-view> </scroll-view>
<scroll-view class="scroll-view-pk" scroll-y :show-scrollbar="false" v-if="list.length==0">
<list-empty></list-empty>
</scroll-view>
</view> </view>
</template> </template>
...@@ -21,6 +24,7 @@ ...@@ -21,6 +24,7 @@
import { import {
voteList voteList
} from '@/api/api.js' } from '@/api/api.js'
import ListEmpty from '@/components/ListEmpty.vue';
export default { export default {
data() { data() {
return { return {
...@@ -30,11 +34,15 @@ ...@@ -30,11 +34,15 @@
momentId: '', momentId: '',
optionCode:undefined optionCode:undefined
}, },
total:0,
activeIndex: 0, activeIndex: 0,
voteOptions: [], voteOptions: [],
list:[] list:[]
} }
}, },
components:{
ListEmpty
},
onLoad(options) { onLoad(options) {
let { let {
momentId, momentId,
...@@ -49,16 +57,29 @@ ...@@ -49,16 +57,29 @@
}, },
methods: { methods: {
getList() { getList() {
uni.showLoading({
title:'加载中...'
})
voteList(this.queryParams).then(res => { voteList(this.queryParams).then(res => {
console.log(res) this.list = [...this.list,...res.rows];
this.list = res.data this.total = res.total;
}).finally(()=>{
uni.hideLoading()
}) })
}, },
handleChange(item,index){ handleChange(item,index){
this.activeIndex = index this.activeIndex = index
this.queryParams.optionCode = item.code; this.queryParams.optionCode = item.code;
this.queryParams.pageNum = 1;
this.list = []
this.getList() this.getList()
} },
loadMore() {
if(this.list.length < this.total){
this.queryParams.pageNum += 1;
this.getList()
}
},
} }
} }
</script> </script>
...@@ -67,6 +88,7 @@ ...@@ -67,6 +88,7 @@
@import '@/static/styles/common.scss'; @import '@/static/styles/common.scss';
.pk-detail-page { .pk-detail-page {
background-color: white;
.pk-tab-box { .pk-tab-box {
height: 92rpx; height: 92rpx;
display: flex; display: flex;
......
safe-campus-bbs-uniapp/pages/topic-detail/topic-detail.vue
View file @ 757a284f
...@@ -9,13 +9,14 @@ ...@@ -9,13 +9,14 @@
<image src="/static/images/topic.png" class="topic-img"></image> <image src="/static/images/topic.png" class="topic-img"></image>
</view> </view>
</view> </view>
<scroll-view class="scroll-view-topic" scroll-y :show-scrollbar="false" v-if="list.length>0"> <scroll-view class="scroll-view-topic" scroll-y :show-scrollbar="false" v-if="list.length>0"
@scrolltolower="loadMore">
<template v-for="(item,index) in list"> <template v-for="(item,index) in list">
<dynamic-item :form="item"></dynamic-item> <dynamic-item :form="item"></dynamic-item>
</template> </template>
</scroll-view> </scroll-view>
<scroll-view class="scroll-view-topic" scroll-y :show-scrollbar="false" v-else> <scroll-view class="scroll-view-topic" scroll-y :show-scrollbar="false" v-else>
<list-empty></list-empty>
</scroll-view> </scroll-view>
<view class="publisb-box"> <view class="publisb-box">
<view class="publish-btn" @click="handleToPublish"> <view class="publish-btn" @click="handleToPublish">
...@@ -28,113 +29,143 @@ ...@@ -28,113 +29,143 @@
<script> <script>
import DynamicItem from '@/components/Dynamic-Item.vue'; import DynamicItem from '@/components/Dynamic-Item.vue';
import {topicDynamics} from '@/api/api.js'; import ListEmpty from '@/components/ListEmpty.vue';
import {
topicDynamics
} from '@/api/api.js';
export default { export default {
data() { data() {
return { return {
list:[], list: [],
topicName:'', topicName: '',
queryParams:{ queryParams: {
pageNum:1, pageNum: 1,
pageSize:10, pageSize: 10,
topicId:'' topicId: ''
} },
total: 0
} }
}, },
components:{ components: {
DynamicItem DynamicItem,
ListEmpty
}, },
onLoad(options) { onLoad(options) {
let {topicId,topicName} = options; let {
topicId,
topicName
} = options;
this.topicName = topicName this.topicName = topicName
if(topicId){ if (topicId) {
this.queryParams.topicId = topicId this.queryParams.topicId = topicId
this.getDetail() this.getDetail()
} }
}, },
methods: { methods: {
getDetail(){ getDetail() {
topicDynamics(this.queryParams).then(res=>{ uni.showLoading({
console.log(res) title: '加载中...'
this.list = res.rows })
topicDynamics(this.queryParams).then(res => {
this.list = [...this.list, ...res.rows];
this.total = res.total;
}).finally(() => {
uni.hideLoading()
}) })
}, },
handleToPublish(){ handleToPublish() {
uni.navigateTo({ uni.navigateTo({
url:`/pages/publish/publish?topicId=${this.queryParams.topicId}&topicName=${this.topicName}` url: `/pages/publish/publish?topicId=${this.queryParams.topicId}&topicName=${this.topicName}`
}) })
} },
loadMore() {
if (this.list.length < this.total) {
this.queryParams.pageNum += 1;
this.getList()
}
},
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
@import '@/static/styles/common.scss'; @import '@/static/styles/common.scss';
.topic-detail-page{
background-color: white; .topic-detail-page {
.topic-box{ background-color: white;
padding: 32rpx 34rpx 0 32rpx;
.topic-container{ .topic-box {
width: 92vw; padding: 32rpx 34rpx 0 32rpx;
height: 180rpx;
border-radius: 12rpx; .topic-container {
background: linear-gradient(89.31deg, rgba(230,246,254,1) 1.2%,rgba(186,239,255,1) 99.53%); width: 92vw;
text-align: center; height: 180rpx;
padding: 0 30rpx; border-radius: 12rpx;
box-sizing: border-box; background: linear-gradient(89.31deg, rgba(230, 246, 254, 1) 1.2%, rgba(186, 239, 255, 1) 99.53%);
display: flex; text-align: center;
align-items: center; padding: 0 30rpx;
justify-content: space-between; box-sizing: border-box;
.topic-title-num{ display: flex;
width: calc(100% - 180rpx); align-items: center;
text-align: left; justify-content: space-between;
.title{
color: rgba(16, 16, 16, 1); .topic-title-num {
font-size: 36rpx; width: calc(100% - 180rpx);
text-align: left;
.title {
color: rgba(16, 16, 16, 1);
font-size: 36rpx;
}
.num {
color: rgba(162, 170, 184, 1);
font-size: 24rpx;
margin-top: 12rpx;
}
} }
.num{
color: rgba(162, 170, 184, 1); .topic-img {
font-size: 24rpx; width: 160rpx;
margin-top: 12rpx; height: 160rpx;
} }
} }
.topic-img{
width: 160rpx;
height: 160rpx;
}
} }
}
.scroll-view-topic {
.scroll-view-topic{ @include scroll-view-container(calc(100vh - 340rpx))
@include scroll-view-container(calc(100vh - 340rpx)) }
}
.publisb-box {
.publisb-box{ height: 122rpx;
height:124rpx ; background-color: white;
background-color: rgba(244, 244, 244, 1); border-top: 1px solid #eee;
display: flex;
justify-content: center;
align-items: center;
.publish-btn{
width: 240rpx;
height: 80rpx;
border-radius: 12rpx;
background-color: rgba(255, 255, 255, 1);
text-align: center;
border: 1px solid rgba(230, 230, 230, 1);
display: flex; display: flex;
align-items: center;
justify-content: center; justify-content: center;
.icon{ align-items: center;
width: 36rpx;
height: 36rpx; .publish-btn {
margin-right: 16rpx; width: 240rpx;
} height: 80rpx;
.text{ border-radius: 12rpx;
color: rgba(187, 187, 187, 1); background-color: rgba(255, 255, 255, 1);
font-size: 32rpx; text-align: center;
border: 1px solid rgba(230, 230, 230, 1);
display: flex;
align-items: center;
justify-content: center;
.icon {
width: 36rpx;
height: 36rpx;
margin-right: 16rpx;
}
.text {
color: rgba(187, 187, 187, 1);
font-size: 32rpx;
}
} }
} }
} }
} </style>
</style> \ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment