mpvue实现类似通讯录锚点

2023-12-29 08:08

本文主要是介绍mpvue实现类似通讯录锚点,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

<template> <!-- <div :class="questionLess['questionPage-box']"><div :class="questionLess['questionPage-bg']"><div v-if="typeName==='门店收入'"><div :class="questionLess['questionPage-bg-title']">门店收入</div><div :style="{margin:'20rpx 0'}">以下数据均为固化数据:</div><div :style="{marginBottom:'20rpx'}">门店收入:过夜审时门店发生的消费总和,包括房费,会员卡,餐饮,小商品等科目。</div><div :style="{marginBottom:'20rpx'}">间夜数:过夜审时产生的间夜数,包括时租房和正常入住。</div><div :style="{marginBottom:'20rpx'}">出租率=间夜数/客房数*100%,客房数包含维修房和自用房。</div><div :style="{marginBottom:'20rpx'}">平均房价=总房费/间夜数。</div><div>注:以上数据,来源自“JY01 酒店综合统计日报表(固化)”。</div></div><div v-if="typeName==='门店收入明细'"><div :class="questionLess['questionPage-bg-title']">门店收入明细</div><div :style="{margin:'20rpx 0'}">以下数据均为固化数据:</div><div :style="{marginBottom:'20rpx'}">饼图:当天发生消费的一级科目和对应的金额,按金额从大到小顺时针排序。</div><div>注:以上数据,来源自“JY01 酒店综合统计日报表(固化)”。</div></div><div v-if="typeName==='数据维度day'"><div :class="questionLess['questionPage-bg-title']">数据维度</div><div :style="{margin:'20rpx 0'}">以下数据均为固化数据</div><div> <span :style="{width:'5px',height:'10px',verticalAlign:'middle',display:'inline-block',marginRight:'3px',background:'black'}"></span><span :style="{verticalAlign:'middle',display:'inline-block'}">总房费</span></div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">房型:各房型产生的房费及排名,如果房型数量大于5,取前5个产生房费最多的房型;如果房型数量小于等于5,则显示产生房费的全部房型。查询1家门店时,有房型排行;查询超过1家门店时,无房型数据。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">客源:各客源产生的房费以及排名,不产生房费的客源不显示。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">渠道:各渠道产生的房费以及排名,不产生房费的渠道不显示。</div><div :style="{marginBottom:'3px'}"> <span :style="{width:'5px',height:'10px',verticalAlign:'middle',display:'inline-block',marginRight:'3px',background:'black'}"></span><span :style="{verticalAlign:'middle',display:'inline-block'}">“间夜数”,“出租率”,“平均房价”同“总房费”</span></div><div>注:以上数据,来源自“JY01 酒店综合统计日报表(固化)”。</div></div><div v-if="typeName==='数据维度month'"><div :class="questionLess['questionPage-bg-title']">数据维度</div><div :style="{margin:'20rpx 0'}">以下数据均为固化数据</div><div> <span :style="{width:'5px',height:'10px',verticalAlign:'middle',display:'inline-block',marginRight:'3px',background:'black'}"></span><span :style="{verticalAlign:'middle',display:'inline-block'}">总房费</span></div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">当月趋势:当月每天总房费的趋势图,如果当月营业日已全部发生,则显示当月房费趋势;如果当月营业日未全部发生,则显示近30天的房费趋势。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">房型:各房型产生的房费及排名,如果房型数量大于5,取前5个产生房费最多的房型;如果房型数量小于等于5,则显示产生房费的全部房型。查询1家门店时,有房型排行;查询超过1家门店时,无房型数据。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">客源:各客源产生的房费以及排名,不产生房费的客源不显示。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">渠道:各渠道产生的房费以及排名,不产生房费的渠道不显示。</div><div :style="{marginBottom:'3px'}"> <span :style="{width:'5px',height:'10px',verticalAlign:'middle',display:'inline-block',marginRight:'3px',background:'black'}"></span><span :style="{verticalAlign:'middle',display:'inline-block'}">“间夜数”,“出租率”,“平均房价”同“总房费”</span></div><div>注:以上数据,来源自“JY03 酒店综合统计月报表(固化)”。</div></div><div v-if="typeName==='数据维度year'"><div :class="questionLess['questionPage-bg-title']">数据维度</div><div :style="{margin:'20rpx 0'}">以下数据均为固化数据</div><div> <span :style="{width:'5px',height:'10px',verticalAlign:'middle',display:'inline-block',marginRight:'3px',background:'black'}"></span><span :style="{verticalAlign:'middle',display:'inline-block'}">总房费</span></div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">当年趋势:当年每月总房费的趋势图,如果当年已全部发生,则显示12个月房费趋势;如果当年未全部发生,则显示已发生月份的房费趋势。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">房型:各房型产生的房费及排名,如果房型数量大于5,取前5个产生房费最多的房型;如果房型数量小于等于5,则显示产生房费的全部房型。查询1家门店时,有房型排行;查询超过1家门店时,无房型数据。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">客源:各客源产生的房费以及排名,不产生房费的客源不显示。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">渠道:各渠道产生的房费以及排名,不产生房费的渠道不显示。</div><div :style="{marginBottom:'3px'}"> <span :style="{width:'5px',height:'10px',verticalAlign:'middle',display:'inline-block',marginRight:'3px',background:'black'}"></span><span :style="{verticalAlign:'middle',display:'inline-block'}">“间夜数”,“出租率”,“平均房价”同“总房费”</span></div><div>注:以上数据,来源自“JY03 酒店综合统计月报表(固化)”。</div></div><div v-if="typeName==='客房指标'"><div :class="questionLess['questionPage-bg-title']">客房指标</div><div :style="{margin:'20rpx 0'}">以下数据均为固化数据:</div><div :style="{marginBottom:'20rpx'}">总房量:过夜审时的物理客房数。</div><div :style="{marginBottom:'20rpx'}">过夜房:过夜审时的在住客房数。</div><div :style="{marginBottom:'20rpx'}">维修房:过夜审时的维修客房数。</div><div :style="{marginBottom:'20rpx'}">过夜房出租率=过夜房/总房量*100%,非出租率。</div><div>注:以上数据,来源自“JY01 酒店综合统计日报表(固化)”。</div></div><div v-if="typeName==='工作台数据'"><div :class="questionLess['questionPage-bg-title']">工作台数据</div><div :style="{margin:'20rpx 0'}">以下数据均为实时数据</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">总客房:同PMS实时房态下全部客房数,包含维修房,可用房。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">可订房数=总客房数-维修房-今日预抵客房数-实时在住+今日预离。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">今日预离=今日应离未离的客房数。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">今日预抵=今日应到未到的预定客房数。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">自用房:同PMS工作台,自用房数的合计。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">维修房:同PMS实时房态,“按房态”的“维修”。</div></div><div v-if="typeName==='实时看板客房数'"><div :class="questionLess['questionPage-bg-title']">客房数</div><div :style="{margin:'20rpx 0'}">以下数据均为实时数据</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">实时在住客房数:同PMS工作台,在住-合计。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">预计出租客房数=实时在住客房数+今日预抵客房数-自用房-今日预离客房数。</div></div><div v-if="typeName==='实时看板出租率'"><div :class="questionLess['questionPage-bg-title']">出租率</div><div :style="{margin:'20rpx 0'}">以下数据均为实时数据</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">实时出租率=(实时在住客房数-自用房)/(总客房-维修房-自用房)*100%。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">预计出租率=(实时在住客房数+今日预抵客房数-自用房-今日预离客房数)/(总客房-维修房-自用房)*100%。</div></div><div v-if="typeName==='实时看板总房费'"><div :class="questionLess['questionPage-bg-title']">总房费</div><div :style="{margin:'20rpx 0'}">以下数据均为实时数据</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">实时总房费=(实时在住客房-今日预离房)房价累计,只看同住主单房价。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">预计总房费=实时房费收入+今日预抵客房房价累计。</div></div><div v-if="typeName==='实时看板平均房价'"><div :class="questionLess['questionPage-bg-title']">平均房价</div><div :style="{margin:'20rpx 0'}">以下数据均为实时数据</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">实时平均房价=实时房费/(实时在住-今日预离房-自用房)。</div><div :style="{marginBottom:'20rpx',paddingLeft:'8px'}">预计平均房价=预计总房费/(实时在住客房数+今日预抵客房数-自用房-今日预离客房数)。</div></div><div :style="{textAlign:'right'}"><vanButton round :class="questionLess['questionPage-button']" type="danger" @click="closePopup">关闭</vanButton></div></div></div> --><div :style="{position:'relative',height:'100%'}"><div :class="questionLess['questionPage-tab']"><div :class="[questionLess['questionPage-tab-item'],index===0?'active':'']" @click="tab(0)">门店收入</div><div :class="[questionLess['questionPage-tab-item'],index===1?'active':'']" @click="tab(1)">门店收入明细</div><div :class="[questionLess['questionPage-tab-item'],index===2?'active':'']" @click="tab(2)">数据维度</div><div :class="[questionLess['questionPage-tab-item'],index===3?'active':'']" @click="tab(3)">客房指标</div></div><div class="questionPage-scroll"><scroll-view :style="{height:'100%'}" scroll-y="true" :scroll-top="scrollTop" @scroll="scrollContent"><dl class="questionPage-part"><dt :class="questionLess['questionPage-part-title']">门店收入明细0</dt><dd :class="questionLess['questionPage-part-content']"><div :class="questionLess['questionPage-part-content-subtitle']">以下数据均为固化数据:</div><div><div>饼图:当天发生消费的一级科目和对应的金额,按金额从大到小顺时针排序。</div><div>注:以上数据,来源自“JY01 酒店综合统计日报表(固化)”。</div></div></dd></dl><dl class="questionPage-part"><dt :class="questionLess['questionPage-part-title']">门店收入明细1</dt><dd :class="questionLess['questionPage-part-content']"><div :class="questionLess['questionPage-part-content-subtitle']">以下数据均为固化数据:</div><div><div>饼图:当天发生消费的一级科目和对应的金额,按金额从大到小顺时针排序。</div><div>注:以上数据,来源自“JY01 酒店综合统计日报表(固化)”。</div></div></dd></dl><dl class="questionPage-part"><dt :class="questionLess['questionPage-part-title']">门店收入明细2</dt><dd :class="questionLess['questionPage-part-content']"><div :class="questionLess['questionPage-part-content-subtitle']">以下数据均为固化数据:</div><div><div>饼图:当天发生消费的一级科目和对应的金额,按金额从大到小顺时针排序。</div><div>注:以上数据,来源自“JY01 酒店综合统计日报表(固化)”。</div></div></dd></dl><dl class="questionPage-part"><dt :class="questionLess['questionPage-part-title']">门店收入明细3</dt><dd :class="questionLess['questionPage-part-content']"><div :class="questionLess['questionPage-part-content-subtitle']">以下数据均为固化数据:</div><div><div>饼图:当天发生消费的一级科目和对应的金额,按金额从大到小顺时针排序。</div><div>注:以上数据,来源自“JY01 酒店综合统计日报表(固化)”。</div></div></dd></dl><dl class="questionPage-part"><dt :class="questionLess['questionPage-part-title']">门店收入明细4</dt><dd :class="questionLess['questionPage-part-content']"><div :class="questionLess['questionPage-part-content-subtitle']">以下数据均为固化数据:</div><div><div>饼图:当天发生消费的一级科目和对应的金额,按金额从大到小顺时针排序。</div><div>注:以上数据,来源自“JY01 酒店综合统计日报表(固化)”。</div></div></dd></dl><dl class="questionPage-part"><dt :class="questionLess['questionPage-part-title']">门店收入明细4</dt><dd :class="questionLess['questionPage-part-content']"><div :class="questionLess['questionPage-part-content-subtitle']">以下数据均为固化数据:</div><div><div>饼图:当天发生消费的一级科目和对应的金额,按金额从大到小顺时针排序。</div><div>注:以上数据,来源自“JY01 酒店综合统计日报表(固化)”。</div></div></dd></dl><dl class="questionPage-part"><dt :class="questionLess['questionPage-part-title']">门店收入明细4</dt><dd :class="questionLess['questionPage-part-content']"><div :class="questionLess['questionPage-part-content-subtitle']">以下数据均为固化数据:</div><div><div>饼图:当天发生消费的一级科目和对应的金额,按金额从大到小顺时针排序。</div><div>注:以上数据,来源自“JY01 酒店综合统计日报表(固化)”。</div></div></dd></dl><dl class="questionPage-part"><dt :class="questionLess['questionPage-part-title']">门店收入明细4</dt><dd :class="questionLess['questionPage-part-content']"><div :class="questionLess['questionPage-part-content-subtitle']">以下数据均为固化数据:</div><div><div>饼图:当天发生消费的一级科目和对应的金额,按金额从大到小顺时针排序。</div><div>注:以上数据,来源自“JY01 酒店综合统计日报表(固化)”。</div></div></dd></dl></scroll-view></div></div>
</template>
<script>
import {navigateBack} from '../../utils/commUtil'
import questionLess from './questionPage.less'
export default {data () {return {questionLess,showCatergory: '',typeName: '',dataArr: '',index: 0,scrollTop: 0}},methods: {closePopup () {this.show = falsenavigateBack()wx.showTabBar()},scrollContent (e) {this.dataArr.forEach((ele, index) => {if (ele.top <= e.target.scrollTop && e.target.scrollTop <= ele.top + ele.height) {this.index = indexconsole.log(this.index)}})},tab (x) {this.scrollTop = this.dataArr[x].top}},onLoad: function (options) {console.log('options', options)this.typeName = options.typeName},onShow () {const query = wx.createSelectorQuery()let self = thisquery.selectAll('.questionPage-part').boundingClientRect(function (res) {res.forEach(ele => {ele.top = ele.top - 64})self.dataArr = res}).exec()}
}
</script>

这篇关于mpvue实现类似通讯录锚点的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/548878

相关文章

java实现docker镜像上传到harbor仓库的方式

《java实现docker镜像上传到harbor仓库的方式》:本文主要介绍java实现docker镜像上传到harbor仓库的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 前 言2. 编写工具类2.1 引入依赖包2.2 使用当前服务器的docker环境推送镜像2.2

C++20管道运算符的实现示例

《C++20管道运算符的实现示例》本文简要介绍C++20管道运算符的使用与实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录标准库的管道运算符使用自己实现类似的管道运算符我们不打算介绍太多,因为它实际属于c++20最为重要的

Java easyExcel实现导入多sheet的Excel

《JavaeasyExcel实现导入多sheet的Excel》这篇文章主要为大家详细介绍了如何使用JavaeasyExcel实现导入多sheet的Excel,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录1.官网2.Excel样式3.代码1.官网easyExcel官网2.Excel样式3.代码

python实现对数据公钥加密与私钥解密

《python实现对数据公钥加密与私钥解密》这篇文章主要为大家详细介绍了如何使用python实现对数据公钥加密与私钥解密,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录公钥私钥的生成使用公钥加密使用私钥解密公钥私钥的生成这一部分,使用python生成公钥与私钥,然后保存在两个文

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机

Golang如何对cron进行二次封装实现指定时间执行定时任务

《Golang如何对cron进行二次封装实现指定时间执行定时任务》:本文主要介绍Golang如何对cron进行二次封装实现指定时间执行定时任务问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录背景cron库下载代码示例【1】结构体定义【2】定时任务开启【3】使用示例【4】控制台输出总结背景

Golang如何用gorm实现分页的功能

《Golang如何用gorm实现分页的功能》:本文主要介绍Golang如何用gorm实现分页的功能方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录背景go库下载初始化数据【1】建表【2】插入数据【3】查看数据4、代码示例【1】gorm结构体定义【2】分页结构体

在Golang中实现定时任务的几种高效方法

《在Golang中实现定时任务的几种高效方法》本文将详细介绍在Golang中实现定时任务的几种高效方法,包括time包中的Ticker和Timer、第三方库cron的使用,以及基于channel和go... 目录背景介绍目的和范围预期读者文档结构概述术语表核心概念与联系故事引入核心概念解释核心概念之间的关系

C++11委托构造函数和继承构造函数的实现

《C++11委托构造函数和继承构造函数的实现》C++引入了委托构造函数和继承构造函数这两个重要的特性,本文主要介绍了C++11委托构造函数和继承构造函数的实现,具有一定的参考价值,感兴趣的可以了解一下... 目录引言一、委托构造函数1.1 委托构造函数的定义与作用1.2 委托构造函数的语法1.3 委托构造函

C++11作用域枚举(Scoped Enums)的实现示例

《C++11作用域枚举(ScopedEnums)的实现示例》枚举类型是一种非常实用的工具,C++11标准引入了作用域枚举,也称为强类型枚举,本文主要介绍了C++11作用域枚举(ScopedEnums... 目录一、引言二、传统枚举类型的局限性2.1 命名空间污染2.2 整型提升问题2.3 类型转换问题三、C