uniapp拨打固定的电话
function Hotline() {
// 拨打电话
uni.makePhoneCall({
phoneNumber: '19969547693'
})
}
页面跳转
//普通跳转
function homepage() {
uni.navigateTo({
url: '/pages/homepage/homepage'
});
}
//二、uni.redirectTo关闭当前页面，跳转到应用内的某个页面。
uni.redirectTo({
url: './index/index'
});
//三、uni.switchTab跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.switchTab({
url: '/pages/homepage/homepage'
});
首页页面展示
代码
<template>
<view class="bg">
<!-- 搜索地址 title-->
<div class="title">
<!-- 一级导航 -->
<uni-combox :candidates="candidates" placeholder="请选择所在城市" v-model="city" labelWidth="70px"
style="background-color:(117,17,29); margin: 4px 10px;"></uni-combox>
<!-- 二级导航 -->
<p
style=" margin: 10px; color: white; line-height: 20px; height: 20px; background-color: (117,17,29);padding: 2px;">
无障碍阅读</p>
</div>
<!-- 轮播图 swiper-box-->
<uni-swiper-dot :info="info">
<swiper class="swiper-box">
<swiper-item v-for="(item ,index) in info" :key="index">
<view class="swiper-box-img">
{{item.content}}
</view>
</swiper-item>
</swiper>
</uni-swiper-dot>
<!-- 常用服务 service-->
<div class="common">
<uni-icons type="map-pin" size="30" color="red"></uni-icons>
<h3>常用服务</h3>
</div>
<div style="display: flex;flex-wrap: wrap; justify-content:space-around;">
<div @click='homepage ' style="margin: 4px 12px;">
<image src="../../static/weixiu.png" class="service-img"></image>
<p class="service-p">我要保修</p>
</div>
<div @click='complaint' style="margin: 4px 12px;">
<image src="../../static/i247.png" class="service-img"></image>
<p class="service-p">投诉意见</p>
</div>
<div @click='Hotline' style="margin: 4px 12px;">
<image src="../../static/dianhua.png" class="service-img"></image>
<p class="service-p">服务热线</p>
</div>
<div @click='Notice' style="margin: 4px 12px;">
<image src="../../static/gonggao.png" class="service-img"></image>
<p class="service-p">通知公告</p>
</div>
<div @click='HandleRepairs' style="margin: 4px 12px;">
<image src="../../static/tousu.png" class="service-img"></image>
<p class="service-p">导出表单</p>
</div>
<div @click='HandlingComplaints' style="margin: 4px 12px;">
<image src="../../static/faxian.png" class="service-img"></image>
<p class="service-p">导入表单</p>
</div>
</div>
<!-- 公平 public-nav-->
<h3><uni-icons type="map-pin" size="30" color="red"></uni-icons>{{listcons.title}}</h3>
<uni-segmented-control :values="items" @clickItem="onClickItem" styleType="text"
style="margin-right: 120px; margin-left: 20px;" />
<view class="public-nav">
<view>
<view class="public-view" v-for="item in listcons.items " :key="item">
<img :src="item.icon" class="public-img" />
<p class="public-text">{{item.label}}</p>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
setup(_, ctx) {
const mode = 'round'
const items = ['报修意见', '通知通告', '导出表单']
const city = ''
const candidates = ['北京', '南京', '东京', '武汉', '天津', '上海', '海口']
const services = {
title: '常用服务',
items: [{
icon: '/static/weixiu.png',
label: '我要保修',
url: '/pages/homepage/homepage'
},
{
icon: '/static/i247.png',
label: '投诉意见',
},
{
icon: '/static/dianhua.png',
label: '服务热线',
}, {
icon: '/static/gonggao.png',
label: '通知公告',
}, {
icon: '/static/tousu.png',
label: '导出表单',
}, {
icon: '/static/faxian.png',
label: '导入表单',
}
],
}
function onClickItem(e) {
if (currents.value !== e.currentIndex) {
currents.value = e.currentIndex
}
}
const info = [{
content: ''
},
{
content: ''
},
{
content: ''
},
]
const listcons = {
title: '公开公正',
items: [{
icon: '../../static/微信图片_20230903143138.jpg',
label: '2023中秋国庆假期盘点 高速公路川流不息,景区景点“人从众”,大型商超人气火爆,电影市场红火向好'
}, {
icon: '../../static/微信图片_20230903143138.jpg',
label: '今年中秋、国庆双节并行，超8亿人次出游、国内旅游收入超7500亿元，上涨的热情、刷新的数据，映射出人们对美好生活的期盼，彰显中国经济的活力'
}, {
icon: '../../static/微信图片_20230903143138.jpg',
label: '没想到泼天的富贵要到文具届了，我想说自动铅笔更贵是因为它比普通铅笔改进了技术'
}, {
icon: '../../static/微信图片_20230903143138.jpg',
label: '2023中秋国庆假期盘点 高速公路川流不息,景区景点“人从众”,大型商超人气火爆,电影市场红火向好'
}, {
icon: '../../static/微信图片_20230903143138.jpg',
label: '今年中秋、国庆双节并行，超8亿人次出游、国内旅游收入超7500亿元，上涨的热情、刷新的数据，映射出人们对美好生活的期盼，彰显中国经济的活力'
}, {
icon: '../../static/微信图片_20230903143138.jpg',
label: '没想到泼天的富贵要到文具届了，我想说自动铅笔更贵是因为它比普通铅笔改进了技术'
}, ],
}
function homepage() {
uni.navigateTo({
url: '/pages/homepage/homepage'
});
}
function complaint() {
uni.navigateTo({
url: '/pages/complaint/complaint'
});
}
function Hotline() {
// 拨打电话
uni.makePhoneCall({
// phoneNumber: '19969547693'
phoneNumber: '18343078388'
})
}
function Notice() {
uni.navigateTo({
url: '/pages/Notice/Notice'
});
}
function HandleRepairs() {
uni.navigateTo({
url: '/pages/HandleRepairs/HandleRepairs'
});
}
function HandlingComplaints() {
uni.navigateTo({
url: '/pages/HandlingComplaints/HandlingComplaints'
});
}
return {
info,
mode,
items,
onClickItem,
city,
candidates,
complaint,
homepage,
Hotline,
Notice,
HandleRepairs,
HandlingComplaints,
listcons,
services
}
}
}
</script>
<style scoped>
/* 背景 */
.bg {
width: 100%;
height: 150px;
background-image: url('/static//QQ截图20230928135008.jpg');
background-position: center center;
background-repeat: no-repeat;
}
/* 搜索地址 */
.title {
display: flex;
justify-content: space-between;
}
.title-p {
color: antiquewhite;
}
/* 轮播图 */
.swiper-box {
margin: 10px;
}
.swiper-box-img {
/* background-color: aquamarine; */
width: 100%;
height: 150px;
background-image: url('../../static/212592593253b564407bcec.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
color: aqua;
}
/* 常用服务 */
.common {
width: 120px;
display: flex;
/* margin: 20px 0; */
margin-top: 20px;
}
.service-nav {
display: flex;
flex-wrap: wrap;
}
.service-img {
width: 25px;
height: 25px;
margin-left: 20px;
margin-top: 5px;
}
.service-p {
margin-left: 10px;
margin-top: 5px;
}
/* 公式公开 */
.public {
margin-top: -20px;
}
.public-nav {
display: flex;
margin-top: 15px;
height: 22rem;
}
.public-view {
display: flex;
align-items: center;
}
.public-img {
width: 70px;
height: 70px;
margin: 0 20px;
margin-top: 5px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.public-text {
width: 240px;
font-size: 14px;
color: #666;
/* 让文本不换行 */
white-space: nowrap;
overflow: hidden;
/* 超出部分隐藏 */
text-overflow: ellipsis;
/* 使用省略号代替超出部分 */
}
.example-body {
padding: 12px;
background-color: #FFFFFF;
}
.result-box {
text-align: center;
padding: 20px 0px;
font-size: 16px;
}
</style>
我的页面展示
代码
<template>
<view class="bg">
<p class="boder"></p>
<h3 class="name">ID : {{name}}</h3>
</view>
<view class="">
<view class="container">
<uni-section>
<uni-group mode="card">
<view class="tuichu">
<image src="../../static/baoxiu.png" style="width: 20px; height: 20px;margin-right: 20px;">
</image>
<h3 @click="gonavigate">服务 </h3>
</view>
</uni-group>
<uni-group title="" mode="card">
<view class="" style="display: flex; justify-content: space-between;">
<view class="tuichu">
<image src="../../static/baoxiu.png" style="width: 20px; height: 20px;margin-right: 20px;">
</image>
<h3 @click="gonavigate">收藏 </h3>
</view>
<uni-icons type="forward" size="20"></uni-icons>
</view>
<uni-list-item :disabled="true" style="margin-top: 10px;"></uni-list-item>
<view class="" style="display: flex; justify-content: space-between;">
<view class="tuichu">
<image src="../../static/baoxiu.png" style="width: 20px; height: 20px;margin-right: 20px;">
</image>
<h3 @click="gonavigate">朋友圈 </h3>
</view>
<uni-icons type="forward" size="20"></uni-icons>
</view>
<uni-list-item :disabled="true" style="margin-top: 10px;"></uni-list-item>
<view class="" style="display: flex; justify-content: space-between;">
<view class="tuichu">
<image src="../../static/baoxiu.png" style="width: 20px; height: 20px;margin-right: 20px;">
</image>
<h3 @click="gonavigate">导入 </h3>
</view>
<uni-icons type="forward" size="20"></uni-icons>
</view>
</uni-group>
<uni-group mode="card">
<view class="tuichu">
<image src="../../static/baoxiu.png" style="width: 20px; height: 20px;margin-right: 20px;">
</image>
<h3 @click="gonavigate">退出 </h3>
</view>
</uni-group>
</uni-section>
</view>
</view>
</template>
<script>
export default {
setup() {
const name = '周阿狗'
function gonavigate() {
uni.showToast({
title: '退出成功',
icon: 'none',
});
uni.redirectTo({
url: '../index/index'
});
}
return {
name,
gonavigate
}
}
}
</script>
<style>
.bg {
width: 100%;
height: 180px;
background-image: url('../../static/微信图片_20230903143208.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
}
.boder {
width: 70px;
height: 70px;
margin: 40px;
border-radius: 30px;
background-image: url('../../static/31wode.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.name {
padding: 60px 0;
color: aliceblue;
}
.tuichu {
display: flex;
}
</style>
登录展示
代码
<template>
<view class="t-login">
<image class="img-a" src="https://zhoukaiwen.com/img/loginImg/2.png"></image>
<image class="img-b" src="https://zhoukaiwen.com/img/loginImg/3.png"></image>
<view class="t-b">中通数智科技</view>
<view class="t-b2">吉林省中通数智科技有限公司</view>
<form class="cl">
<view class="t-a">
<image src="https://zhoukaiwen.com/img/loginImg/sj.png"></image>
<view class="line"></view>
<input placeholder="输入手机号" class="login-content_input" v-model="username" name="username" />
<!-- <input type="number" name="username" placeholder="请输入手机号" maxlength="11" v-model="username" /> -->
</view>
<view class="t-a">
<image src="https://zhoukaiwen.com/img/loginImg/yz.png"></image>
<view class="line"></view>
<input placeholder="请输入密码" class="login-content_input" v-model="password" :password="password" />
<!-- <input type="number" name="code" maxlength="6" placeholder="请输入密码" v-model="password" :password="password" /> -->
</view>
<view class="rememberMe">
<view class="rememberMe-text">记住我</view>
</view>
<button @tap="dengLu()">登 录</button>
</form>
</view>
</template>
<script lang="ts">
import { ref } from 'vue'
export default {
setup() {
const username = ref<String>('test000')
const password = ref<String>('test123456')
const rememberMe = ref<Boolean>(true)
function dengLu() {
uni.switchTab({
url: '/pages/home/home'
});
}
return {
username,
password,
rememberMe,
dengLu
}
}
}
</script>
<style scoped>
.login-content {
width: 100%;
text-align: center;
position: fixed;
}
/* 标题 */
.login-title {
margin-top: 180px;
font-size: 40px;
font-weight: bold;
margin-bottom: 50px;
}
.login-content_input {
width: 80%;
height: 40px;
background: #F8F8F8;
border-radius: 25px;
text-align: left;
padding: 10px;
box-sizing: border-box;
font-size: 15px;
margin: 0 10%;
}
/* 手机号 密码 */
.iphone,
.password {
position: relative;
margin-bottom: 60px;
}
/* 记住我 */
.rememberMe {
right: 15%;
position: fixed;
display: flex;
margin-top: 2px;
}
/* 按钮 */
.login-btn {
/* margin: 0 20%;
width: 58%;
height: 50px;
background: #004d00;
border-radius: 5px;
color: #fff;
font-size: 25px;
text-align: center;
line-height: 50px;
position: fixed;
bottom: 60px; */
position: fixed;
border-radius: 10px;
top: 80%;
left: 0;
right: 0;
bottom: 15%;
margin: 0 auto;
text-align: center;
width: 200px;
background-color: #006400;
color: white;
line-height: 34px;
font-size: 1rem;
}
.img-a {
position: absolute;
width: 100%;
top: -150rpx;
right: 0;
}
.img-b {
position: absolute;
width: 50%;
bottom: 0;
left: -50rpx;
/* margin-bottom: -200rpx; */
}
.t-login {
width: 650rpx;
margin: 0 auto;
font-size: 28rpx;
color: #000;
}
.t-login button {
margin: 64px 0;
font-size: 28rpx;
background: #5677fc;
color: #fff;
height: 90rpx;
line-height: 90rpx;
border-radius: 50rpx;
box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
}
.t-login input {
padding: 0 20rpx 0 120rpx;
height: 90rpx;
line-height: 90rpx;
margin-bottom: 50rpx;
background: #f8f7fc;
border: 1px solid #e9e9e9;
font-size: 28rpx;
border-radius: 50rpx;
}
.t-login .t-a {
position: relative;
}
.t-login .t-a image {
width: 40rpx;
height: 40rpx;
position: absolute;
left: 80rpx;
top: 28rpx;
/* border-right: 2rpx solid #dedede; */
margin-right: 20rpx;
}
.t-login .t-a .line {
width: 2rpx;
height: 40rpx;
background-color: #dedede;
position: absolute;
top: 28rpx;
left: 130rpx;
}
.t-login .t-b {
text-align: left;
font-size: 46rpx;
color: #000;
padding: 300rpx 0 30rpx 0;
font-weight: bold;
}
.t-login .t-b2 {
text-align: left;
font-size: 32rpx;
color: #aaaaaa;
padding: 0rpx 0 120rpx 0;
}
.t-login .t-c {
position: absolute;
right: 22rpx;
top: 22rpx;
background: #5677fc;
color: #fff;
font-size: 24rpx;
border-radius: 50rpx;
height: 50rpx;
line-height: 50rpx;
padding: 0 25rpx;
}
.t-login .t-d {
text-align: center;
color: #999;
margin: 80rpx 0;
}
.t-login .t-e {
text-align: center;
width: 250rpx;
margin: 80rpx auto 0;
}
.t-login .t-g {
float: left;
width: 50%;
}
.t-login .t-e image {
width: 50rpx;
height: 50rpx;
}
.t-login .t-f {
text-align: center;
margin: 200rpx 0 0 0;
color: #666;
}
.t-login .t-f text {
margin-left: 20rpx;
color: #aaaaaa;
font-size: 27rpx;
}
.t-login .uni-input-placeholder {
color: #000;
}
.cl {
zoom: 1;
}
.cl:after {
clear: both;
display: block;
visibility: hidden;
height: 0;
content: '\20';
}
.rememberMe {
right: 15%;
position: fixed;
display: flex;
}
.ada {
margin-top: 20px;
}
.rememberMe-text {
line-height: 30px;
}
</style>
