init
This commit is contained in:
shuhongfan
@@ -0,0 +1,21 @@
|
||||
.BtnFooter{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: 172rpx;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
.btn{
|
||||
width: 404rpx;
|
||||
height: 88rpx;
|
||||
background: #CCCCCC;
|
||||
border-radius: 44rpx;
|
||||
color: white;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
margin: 24rpx auto 0;
|
||||
}
|
||||
.btn.active{
|
||||
background-color:#E84134 ;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
<!-- 底部按钮 -->
|
||||
<template>
|
||||
<view class="BtnFooter">
|
||||
<view class="btn" :class="isActive?'active':''" @click="handleClick">{{btnText}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
} from 'vue';
|
||||
defineProps({
|
||||
btnText:{
|
||||
type: String,
|
||||
default: '确定',
|
||||
},
|
||||
isActive:{
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
})
|
||||
const emits = defineEmits(["@confirm"]);
|
||||
|
||||
const handleClick = ()=>{
|
||||
emits('confirm')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style src="./index.scss" lang="scss" scoped></style>
|
||||
@@ -0,0 +1,18 @@
|
||||
.NavBar{
|
||||
position: relative;
|
||||
background-color: white;
|
||||
.title{
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.navbar-image{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
position: absolute;
|
||||
left: 26rpx;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
<!-- 头部导航组件 -->
|
||||
<template>
|
||||
<view class="NavBar" :style="{'height':all}">
|
||||
<view class="title" :style="{'paddingTop':capsuleTop+'px',height:capsuleHeight+'px'}">
|
||||
{{title}}
|
||||
<image :src='src' @click="handleTo" class="navbar-image"></image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
nextTick,
|
||||
watch,
|
||||
computed
|
||||
} from 'vue';
|
||||
import {
|
||||
onLoad,
|
||||
onShow
|
||||
} from '@dcloudio/uni-app';
|
||||
// 获取父组件值、方法
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
handleToLink:{//用于自定义跳转
|
||||
type:Function
|
||||
},
|
||||
src:{
|
||||
type: String,
|
||||
default: '../../static/goBack.png',
|
||||
}
|
||||
})
|
||||
//设备栏高度
|
||||
let deviceNavHeight = ref()
|
||||
//胶囊顶部距离头部的距离
|
||||
let capsuleTop = ref()
|
||||
//胶囊底部距离头部的距离
|
||||
let capsuleBottom = ref()
|
||||
//导航栏高度
|
||||
let all = ref()
|
||||
//胶囊高度
|
||||
let capsuleHeight = ref()
|
||||
onLoad(() => {
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
deviceNavHeight.value = res.statusBarHeight
|
||||
capsuleTop.value = uni.getMenuButtonBoundingClientRect().top
|
||||
capsuleBottom.value = uni.getMenuButtonBoundingClientRect().bottom
|
||||
all.value = (capsuleTop.value + capsuleBottom.value - deviceNavHeight.value) + 'px'
|
||||
capsuleHeight.value = uni.getMenuButtonBoundingClientRect().height
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
//头部导航跳转
|
||||
const handleTo = () => {
|
||||
if(props.handleToLink){
|
||||
props.handleToLink()
|
||||
}else{
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style src="./index.scss" lang="scss" scoped></style>
|
||||
@@ -0,0 +1,27 @@
|
||||
.net-fail{
|
||||
.net-fail-image{
|
||||
width: 400rpx;
|
||||
height: 240rpx;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
margin-top: 310rpx;
|
||||
}
|
||||
.tips{
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #818181;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
.btn{
|
||||
width: 240rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size:30rpx ;
|
||||
background-color: #E63E32;
|
||||
border-radius: 44rpx;
|
||||
margin: 0 auto;
|
||||
margin-top: 64rpx;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<view class="net-fail">
|
||||
<image src='../../static/net-fail.png' class="net-fail-image"/>
|
||||
<p class="tips">请检查网络</p>
|
||||
<div class="btn" @click="handleTo">重新加载</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 获取父组件值、方法
|
||||
const props = defineProps({
|
||||
handleToRefresh: { //用于自定义跳转
|
||||
type: Function
|
||||
}
|
||||
})
|
||||
//重新加载
|
||||
const handleTo = () => {
|
||||
props.handleToRefresh()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style src="./index.scss" lang="scss" scoped></style>
|
||||
@@ -0,0 +1,13 @@
|
||||
.navBox{
|
||||
.input-view{
|
||||
position: relative;
|
||||
icon{
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
position: absolute;
|
||||
right: 220rpx;
|
||||
top: 15rpx;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<!-- 公用nav -->
|
||||
<view class="navBox" >
|
||||
<view class="search ">
|
||||
<!-- 头部自定义导航 -->
|
||||
<view class="uni-navbar" :style="{'paddingTop':capsuleTop +'px'}">
|
||||
<view class="input-view">
|
||||
<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
|
||||
<input
|
||||
confirm-type="search"
|
||||
class="nav-bar-input"
|
||||
type="text"
|
||||
v-model="searchVal"
|
||||
placeholder="请输入快递单号"
|
||||
@confirm="handleSearch"
|
||||
@input="handleSearch"
|
||||
/>
|
||||
<icon type="clear" size="14" v-if="searchVal" @click="handleCancel"></icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app';
|
||||
const props = defineProps({
|
||||
isShowCancel:{
|
||||
type:Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
// ------定义变量------
|
||||
const emit = defineEmits('handleSearch'); //子组件向父组件事件传递
|
||||
const searchVal = ref('');
|
||||
//胶囊顶部距离头部的距离
|
||||
let capsuleTop = ref()
|
||||
// -----方法------
|
||||
onLoad(() => {
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
capsuleTop.value = uni.getMenuButtonBoundingClientRect().top
|
||||
|
||||
}
|
||||
})
|
||||
})
|
||||
// 取消搜索
|
||||
const handleCancel = () => {
|
||||
searchVal.value = '';
|
||||
emit('handleSearch', searchVal);
|
||||
};
|
||||
// 搜索
|
||||
const handleSearch = (e) => {
|
||||
searchVal.value =e.detail.value
|
||||
emit('handleSearch', searchVal);
|
||||
};
|
||||
// 扫二维码
|
||||
const handleQr = () => {};
|
||||
</script>
|
||||
<style src="./index.scss" lang="scss" scoped></style>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<scroll-view scroll-x="true" class="tabScroll" :scroll-into-view="scrollinto" :scroll-with-animation="true">
|
||||
<view class="scroll-row">
|
||||
<view v-for="(item, index) in tabBars" :key="index" :id="'tab' + index" class="scroll-row-item" @click="changeTab(index)">
|
||||
<view :class="tabIndex == index ? 'scroll-row-item-act' : 'scroll-row-item-normal'">
|
||||
<text class="line"></text>
|
||||
{{item.label}}
|
||||
<view class="num">{{staticNum[index]}}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
// 获取父组件数据
|
||||
const props = defineProps({
|
||||
tabBars:{
|
||||
type:Object,
|
||||
default:() => ({})
|
||||
},
|
||||
staticNum:{
|
||||
type:Object
|
||||
}
|
||||
})
|
||||
// ------定义变量------
|
||||
const emit = defineEmits(''); //子组件向父组件事件传递
|
||||
const scrollinto = ref('tab0'); //tab切换
|
||||
let tabIndex = ref(0); //当前tab
|
||||
// ------定义方法------
|
||||
// tab选项卡切换轮播
|
||||
const changeTab = index => {
|
||||
// 点击的还是当前数据的时候直接return
|
||||
if (tabIndex.value == index) {
|
||||
return;
|
||||
}
|
||||
tabIndex.value = index;
|
||||
emit('getTabIndex',index)
|
||||
// 滑动
|
||||
scrollinto.value = 'tab' + index;
|
||||
};
|
||||
//把数据、方法暴漏给父组件
|
||||
defineExpose({
|
||||
changeTab
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user