(十五)、从插件市场引入问题反馈页面【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】

news/2024/7/5 7:33:52

1,插件市场问题反馈页面

插件市场链接
dloud插件插件市场中找到问题反馈插件:
在这里插入图片描述首先确保登录了dcloud账号。
在这里插入图片描述

使用hbuilderX导入插件到自己项目中。
在这里插入图片描述
选择合并导入。
在这里插入图片描述
从插件市场导入意见反馈页面的路径地址如下:
在这里插入图片描述

2,点击跳转到意见反馈list页面方法:

/uni_modules/uni-feedback/pages/opendb-feedback/目录下opendb-feedback页面修改:

          <view class="item" @click="goFeedback">
            <view class="left"><text class="iconfont icon-a-5-xinxi"></text><text class="text">意见反馈</text></view>
            <view class="right"><text class="iconfont icon-a-10-you"></text></view>
          </view>

添加点击跳转goFeedback方法:

			//跳转到意见反馈
			goFeedback(){
				if(this.goLoginPage()) return;	
				uni.navigateTo({
					url:"/uni_modules/uni-feedback/pages/opendb-feedback/opendb-feedback"
				})
			},

意见反馈页面:
在这里插入图片描述

3,测试效果

新建一条反馈信息:
在这里插入图片描述
查看数据库:
在这里插入图片描述

4,在意见反馈页面添加uni-fab悬浮按钮

		<view v-if="uniIDHasRole('webmaster') || uniIDHasRole('admin')">
			<uni-fab  ref="fab"  horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
		</view>

添加点击事件:(跳转到反馈联表页面/uni_modules/uni-feedback/pages/opendb-feedback/list)

      //点击跳转到反馈列表页面
      fabClick(){
        uni.navigateTo({
          url:"/uni_modules/uni-feedback/pages/opendb-feedback/list"
        })
      },

问题反馈list页面:
在这里插入图片描述

5,改造list页面(联表查询用户表)

list页面完整代码:

<template>
  <view class="container">
    <unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" :collection="collectionList"
      field="content,imgs,contact,mobile,user_id">
      <view v-if="error">{{error.message}}</view>
      <view v-else-if="data">

        <uni-list v-for="(item, index) in data" :key="index" showArrow :clickable="true"
          @click="handleItemClick(item._id)">
          <uni-list-item showArrow :title="item.content" :rightText="giveName(item)" />
        </uni-list>

      </view>
      <uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
    </unicloud-db>
    <uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
  </view>
</template>

<script>
  const db = uniCloud.database()
  import {
    giveName
  } from '../../../../utils/tools.js'
  export default {
    data() {
      return {
        collectionList: [
          db.collection("opendb-feedback").getTemp(),
          db.collection("uni-id-users").field("_id,username,nickname").getTemp()
        ],
        loadMore: {
          contentdown: '',
          contentrefresh: '',
          contentnomore: ''
        }
      }
    },
    onPullDownRefresh() {
      this.$refs.udb.loadData({
        clear: true
      }, () => {
        uni.stopPullDownRefresh()
      })
    },
    onReachBottom() {
      this.$refs.udb.loadMore()
    },
    methods: {
      giveName,

      handleItemClick(id) {
        uni.navigateTo({
          url: './detail?id=' + id
        })
      },
      fabClick() {
        // 打开新增页面
        uni.navigateTo({
          url: './opendb-feedback',
          events: {
            // 监听新增数据成功后, 刷新当前页面数据
            refreshData: () => {
              this.$refs.udb.loadData({
                clear: true
              })
            }
          }
        })
      }
    }
  }
</script>

<style>
</style>


http://lihuaxi.xjx100.cn/news/903456.html

相关文章

千锋教育嵌入式物联网教程之系统编程篇学习-04

目录 alarm函数 raise函数 abort函数 pause函数 转折点 signal函数 可重入函数 信号集 sigemptyset() sigfillset sigismember()​ sigaddset()​ sigdelset()​ 代码讲解 信号阻塞集 sigprocmask()​ alarm函数 相当于一个闹钟&#xff0c;默认动作是终止调用alarm函数的进…

时序预测 | Python实现TCN时间卷积神经网络时间序列预测

时序预测 | Python实现TCN时间卷积神经网络时间序列预测 目录 时序预测 | Python实现TCN时间卷积神经网络时间序列预测预测效果基本介绍环境准备模型描述程序设计学习小结参考资料预测效果 基本介绍 递归神经网络 (RNN),尤其是 LSTM,非常适合时间序列处理。 作为研究相关技术…

New和Malloc的使用及其差异

1&#xff0c;new的使用关于new的定义&#xff1a;new其实就是告诉计算机开辟一段新的空间&#xff0c;但是和一般的声明不同的是&#xff0c;new开辟的空间在堆上&#xff0c;而一般声明的变量存放在栈上。通常来说&#xff0c;当在局部函数中new出一段新的空间&#xff0c;该…

华为OD机试 - 最短耗时(JS)

最短耗时 题目 给定一个正整型数组表示待系统执行的任务列表, 数组的每一个元素代表一个任务,元素的值表示该任务的类型。 请计算执行完所有任务所需的最短时间。 任务执行规则如下: 任务可以按任意顺序执行,且每个任务执行耗时间均为1个时间单位。两个同类型的任务之间必…

Java面向对象的特性:封装,继承与多态

Java面向对象的特性 在学习Java的过程是必须要知道的Java三大特性&#xff1a;封装、继承、多态。如果要分为四类的话&#xff0c;加上抽象特性。 封装 1.封装概述 是面向对像三大特征之一&#xff08;封装&#xff0c;继承&#xff0c;多态&#xff09; 是面向对象编程语言对客…

使用迭代器遍历List抛出ConcurrentModificationException异常分析。

目录异常复现原因分析例子源码分析解决方案异常复现 使用迭代器对java中List遍历时&#xff0c;程序抛出了ConcurrentModificationException异常。这是由于Java的 fast-fail 机制&#xff08;快速失败&#xff09;导致的&#xff0c;可以提前预料遍历失败情况。看下面的例子。 …

LeetCode-1792. 最大平均通过率【堆,优先队列,贪心】

LeetCode-1792. 最大平均通过率【堆&#xff0c;优先队列&#xff0c;贪心】题目描述&#xff1a;解题思路一&#xff1a;优先队列。首先任何一个班级(x,y)加入一个聪明的学生之后增加的通过率为diff(x1)/(y1)-x/y。那么对p进行堆排序&#xff0c;每次取最大的即可。解题思路二…

19 pandas 分层索引与计算

文章目录分层设置与查询数据index 为有序index 为无序(中文&#xff09;查看数据示例多层索引的创建方式&#xff08;行&#xff09;1、from_arrays 方法2、from_tuples 方法3、from_product 方法多层索引的创建方式&#xff08;列&#xff09;分层索引计算MultiIndex 参数表分…