初始化产品库
This commit is contained in:
aixianling
268
src/pages/casuallyask/casuallyask.vue
Normal file
268
src/pages/casuallyask/casuallyask.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<div class="casuallyask">
|
||||
<div class="banner">
|
||||
<picker :range="dictList" @change="bindPickerChange" range-key="dictName">
|
||||
<div class="picker">
|
||||
{{ askType }}
|
||||
<u-icon
|
||||
name="arrow-down"
|
||||
:custom-style="{ margin: '0 5px' }"
|
||||
></u-icon>
|
||||
</div>
|
||||
</picker>
|
||||
<u-search
|
||||
placeholder="请输入标题"
|
||||
:show-action="false"
|
||||
v-model="keyword"
|
||||
@search="onSearch"
|
||||
/>
|
||||
</div>
|
||||
<u-tabs
|
||||
class="nav"
|
||||
:list="tabs"
|
||||
:is-scroll="false"
|
||||
:current="currentType"
|
||||
font-size="32"
|
||||
bar-width="192"
|
||||
height="96"
|
||||
@change="handleTabClick"
|
||||
></u-tabs>
|
||||
<div class="body" v-if="eventList.length !== 0">
|
||||
<div
|
||||
class="content"
|
||||
v-for="(item, index) in eventList"
|
||||
:key="index"
|
||||
@click="detail(item)"
|
||||
>
|
||||
<u-row>
|
||||
<div>
|
||||
<div class="top">
|
||||
|
||||
<text :class="item.type == '0' ? 'active' : 'noactive'">
|
||||
{{ $dict.getLabel('leaveMessageType', item.type) }}
|
||||
</text>
|
||||
<!-- 村 -->
|
||||
<text class="areaName" v-if="item.areaName">{{ item.areaName }}：</text>
|
||||
<!-- 问题 -->
|
||||
<text class="title">{{ item.title }}</text>
|
||||
</div>
|
||||
|
||||
<div class="cont">
|
||||
<span class="name_time">留言人:</span>
|
||||
<text class="text_c"> {{ item.leaveName }}</text>
|
||||
</div>
|
||||
<div class="cont">
|
||||
<text class="name_time">留言时间:</text>
|
||||
<text class="text_c"> {{ item.createTime }}</text>
|
||||
</div>
|
||||
</div>
|
||||
</u-row>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-else/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiEmpty from '../../components/AiEmpty/AiEmpty'
|
||||
import URow from '../../uview/components/u-row/u-row.vue'
|
||||
|
||||
export default {
|
||||
name: 'casuallyAsk',
|
||||
// 组件
|
||||
components: {URow, AiEmpty},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
page: {current: 1, size: 10, total: 0},
|
||||
dictList: [], // 字典
|
||||
index: 0, // 留言类型 0投诉 1咨询 2建议
|
||||
keyword: '',
|
||||
askType: '提问类型',
|
||||
askIndex: '',
|
||||
currentType: 0, // 默认value的值(0待我回复)(1已回复)(2处理完成)
|
||||
eventList: [] // 数据列表
|
||||
// temp: { '0': '投诉', '1': '建议', '2': '咨询' }
|
||||
}
|
||||
},
|
||||
// 计算
|
||||
computed: {
|
||||
tabs() {
|
||||
return [
|
||||
{name: '待我回复', value: 0},
|
||||
{name: '我已回复', value: 1},
|
||||
{name: '处理完成', value: 2}
|
||||
]
|
||||
}
|
||||
},
|
||||
// 实例创建后
|
||||
onShow() {
|
||||
this.$dict.load('leaveMessageType').then(() => {
|
||||
this.dictList = this.$dict.getDict('leaveMessageType')
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
// 方法
|
||||
methods: {
|
||||
// 点击 value的值(0待我回复)(1已回复)(2处理完成)
|
||||
handleTabClick(i) {
|
||||
this.currentType = i
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
this.$http.post(`/app/appleavemessage/list`, null, {
|
||||
params: {
|
||||
...this.page,
|
||||
title: this.keyword,
|
||||
status: this.currentType,
|
||||
type: this.askIndex
|
||||
}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.page.total = res.data.total
|
||||
if (this.page.current > 1)
|
||||
this.eventList = [...this.eventList, res.data.records]
|
||||
else this.eventList = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
detail(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/casuallyask/casuallyaskDetail?id=${item.id}&type=${item.type}`
|
||||
// url: `/pages/casuallyask/casuallyaskDetail?id=${item.id}`
|
||||
})
|
||||
},
|
||||
// 提问类型
|
||||
bindPickerChange(e) {
|
||||
let index = e.detail.value
|
||||
this.askType = this.dictList[index].dictName
|
||||
this.askIndex = index
|
||||
this.getList()
|
||||
},
|
||||
onSearch(e) {
|
||||
this.keyword = e
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.eventList.length < this.page.total) {
|
||||
this.page.current++
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.casuallyask {
|
||||
min-height: 100%;
|
||||
background: #f5f5f5;
|
||||
padding-top: 64px;
|
||||
|
||||
.banner {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 0 30px 0 30px;
|
||||
|
||||
.picker {
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-right: 8px;
|
||||
|
||||
.u-icon-wrap {
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
background-color: #ffffff;
|
||||
height: 96px;
|
||||
padding-top: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 114px 0 0 0;
|
||||
|
||||
.content {
|
||||
background-color: #ffffff;
|
||||
box-sizing: border-box;
|
||||
padding: 34px 32px;
|
||||
margin: 32px 20px;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.typeBox {
|
||||
|
||||
}
|
||||
|
||||
.noactive {
|
||||
text-align: center;
|
||||
color: #2266ff;
|
||||
width: 70px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
border-radius: 8px;
|
||||
background-color: #e8efff;
|
||||
}
|
||||
|
||||
.active {
|
||||
text-align: center;
|
||||
color: #ff4466;
|
||||
line-height: 44px;
|
||||
width: 70px;
|
||||
height: 44px;
|
||||
border-radius: 8px;
|
||||
background-color: #ffebef;
|
||||
}
|
||||
|
||||
.areaName {
|
||||
display: inline-block;
|
||||
color: #333;
|
||||
font-size: 32px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #333;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.cont {
|
||||
margin: 10px 0;
|
||||
|
||||
.name_time {
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
height: 24px;
|
||||
color: #999;
|
||||
font-size: 30px;
|
||||
// font-weight: 800;
|
||||
}
|
||||
|
||||
.text_c {
|
||||
color: #343d65;
|
||||
font-size: 30px;
|
||||
// font-weight: 800;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user