111
This commit is contained in:
parent
ecab089767
commit
69ee4b66d7
|
|
@ -1,30 +1,35 @@
|
|||
const install = (Vue, vm) => {
|
||||
|
||||
Vue.prototype.$u.http.setConfig({
|
||||
// baseUrl: 'http://2087p773d1.wicp.vip', // 请求的本域名
|
||||
// baseUrl: 'https://lchighpass.zhieasy.cn',
|
||||
// baseUrl: 'http://speaking.viphk.91tunnel.com',//测试https://speaking.iava.top/
|
||||
// baseUrl: 'http://yml.dev.bc3.top',//
|
||||
// baseUrl: 'https://ielts.zhieasy.cn',//正式
|
||||
baseURL: 'https://api.admin-v2.langsi.online',
|
||||
// baseUrl: 'http://i3qsdb.natappfree.cc',//正式
|
||||
// Vue.prototype.$u.http.setConfig({
|
||||
|
||||
// baseUrl: 'http://hwihh5.natappfree.cc',
|
||||
// baseUrl: 'http://192.168.10.104:8088',
|
||||
method: 'POST',
|
||||
// 设置为json，返回后会对数据进行一次JSON.parse()
|
||||
dataType: 'json',
|
||||
showLoading: true, // 是否显示请求中的loading
|
||||
loadingText: '...', // 请求loading中的文字提示
|
||||
loadingTime: 800, // 在此时间内，请求还没回来的话，就显示加载中动画，单位ms
|
||||
originalData: false, // 是否在拦截器中返回服务端的原始数据
|
||||
loadingMask: true, // 展示loading的时候，是否给一个透明的蒙层，防止触摸穿透
|
||||
// 配置请求头信息
|
||||
header: {
|
||||
'content-type': 'application/json;charset=UTF-8',
|
||||
'Tenant-Id':1
|
||||
},
|
||||
});
|
||||
// baseURL: 'https://yruibao.com/admin',
|
||||
|
||||
// // baseUrl: 'http://192.168.10.104:8088',
|
||||
// method: 'POST',
|
||||
// // 设置为json，返回后会对数据进行一次JSON.parse()
|
||||
// dataType: 'json',
|
||||
// showLoading: true, // 是否显示请求中的loading
|
||||
// loadingText: '...', // 请求loading中的文字提示
|
||||
// loadingTime: 800, // 在此时间内，请求还没回来的话，就显示加载中动画，单位ms
|
||||
// originalData: false, // 是否在拦截器中返回服务端的原始数据
|
||||
// loadingMask: true, // 展示loading的时候，是否给一个透明的蒙层，防止触摸穿透
|
||||
// // 配置请求头信息
|
||||
// header: {
|
||||
// 'content-type': 'application/json;charset=UTF-8',
|
||||
|
||||
// },
|
||||
// });
|
||||
Vue.prototype.$u.http.setConfig({
|
||||
baseUrl: 'http://192.168.2.87/dev-api',
|
||||
loadingText: '努力加载中~',
|
||||
loadingTime: 800,
|
||||
// 设置自定义头部content-type
|
||||
header: {
|
||||
'content-type': 'application/json;charset=UTF-8',
|
||||
|
||||
},
|
||||
// ......
|
||||
});
|
||||
|
||||
// 请求拦截部分，如配置，每次请求前都会执行
|
||||
Vue.prototype.$u.http.interceptor.request = (config) => {
|
||||
|
|
@ -40,9 +45,9 @@ const install = (Vue, vm) => {
|
|||
|
||||
// 方式四，如果token放在了Storage本地存储中，拦截是每次请求都执行的
|
||||
// 所以哪怕您重新登录修改了Storage，下一次的请求将会是最新值
|
||||
// const token = uni.getStorageSync('token');
|
||||
const token = uni.getStorageSync('token');
|
||||
|
||||
const token = " Bearer 830608e02a9e4209bffbde69b66f1315"
|
||||
// const token = " eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImE1ZmE2YzM0LWM0Y2YtNGEwMS05YjY2LTE1M2M4YWY1YzU1YSJ9.Wze_tAjY7cCfw2K6mtDpTSd-QFLRF4A49Fx7bq7g2tVLKL4v5bqqHfpG0VQy7_a_CUQch5RPBTBIKMVCDupIqg"
|
||||
|
||||
// console.log("我是token", token)
|
||||
config.header.Authorization = token;
|
||||
|
|
|
|||
17
main.js
17
main.js
|
|
@ -2,9 +2,9 @@ import Vue from 'vue'
|
|||
import App from './App'
|
||||
import cookies from 'weapp-cookie'
|
||||
import uView from "uview-ui";
|
||||
import httpInterceptor from '@/common/http.interceptor.js'
|
||||
|
||||
// http接口API集中管理引入部分
|
||||
import httpApi from '@/common/http.api.js'
|
||||
// import httpApi from '@/common/http.api.js'
|
||||
import store from "./store/index.js"
|
||||
import './uni.scss';
|
||||
// 公共样式与字体图标
|
||||
|
|
@ -34,12 +34,13 @@ App.mpType = 'app'
|
|||
Vue.prototype.$store = store
|
||||
// #endif
|
||||
|
||||
const app = new Vue({
|
||||
store,
|
||||
...App
|
||||
})
|
||||
const app = new Vue({
|
||||
store,
|
||||
render: h => h(App),
|
||||
}).$mount('#app');
|
||||
import httpInterceptor from '@/common/http.interceptor.js'
|
||||
Vue.use(httpInterceptor, app)
|
||||
Vue.use(httpApi, app)
|
||||
// Vue.use(httpApi, app)
|
||||
// #ifdef MP-WEIXIN
|
||||
Vue.prototype.wxLogin = async function(){
|
||||
console.log("wxLogin")
|
||||
|
|
@ -57,4 +58,4 @@ Vue.prototype.wxLogin = async function(){
|
|||
|
||||
|
||||
|
||||
app.$mount()
|
||||
// app.$mount()
|
||||
|
|
|
|||
|
|
@ -50,8 +50,8 @@
|
|||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"libVersion": "latest",
|
||||
"appid" : "wx5affa901f005d975",
|
||||
"libVersion" : "latest",
|
||||
"appid" : "wx3914d4d7441fb438",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
|
|
|
|||
101
package-lock.json
generated
101
package-lock.json
generated
|
|
@ -1,8 +1,107 @@
|
|||
{
|
||||
"name": "dianbiao",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 1,
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "dianbiao",
|
||||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"crypto-js": "^4.1.1",
|
||||
"echarts": "^5.4.0",
|
||||
"fast-xml-parser": "^4.0.12",
|
||||
"js-base64": "^3.7.3",
|
||||
"js-md5": "^0.7.3",
|
||||
"mp-html": "^2.4.2",
|
||||
"mpvue-echarts": "^0.3.2",
|
||||
"uview-ui": "^1.8.8",
|
||||
"weapp-cookie": "^1.4.8"
|
||||
}
|
||||
},
|
||||
"node_modules/crypto-js": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
|
||||
"integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
|
||||
},
|
||||
"node_modules/echarts": {
|
||||
"version": "5.4.3",
|
||||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.3.tgz",
|
||||
"integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0",
|
||||
"zrender": "5.4.4"
|
||||
}
|
||||
},
|
||||
"node_modules/fast-xml-parser": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.3.2.tgz",
|
||||
"integrity": "sha512-rmrXUXwbJedoXkStenj1kkljNF7ugn5ZjR9FJcwmCfcCbtOMDghPajbc+Tck6vE6F5XsDmx+Pr2le9fw8+pXBg==",
|
||||
"dependencies": {
|
||||
"strnum": "^1.0.5"
|
||||
},
|
||||
"bin": {
|
||||
"fxparser": "src/cli/cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/js-base64": {
|
||||
"version": "3.7.5",
|
||||
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.5.tgz",
|
||||
"integrity": "sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA=="
|
||||
},
|
||||
"node_modules/js-md5": {
|
||||
"version": "0.7.3",
|
||||
"resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.7.3.tgz",
|
||||
"integrity": "sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ=="
|
||||
},
|
||||
"node_modules/mp-html": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/mp-html/-/mp-html-2.4.2.tgz",
|
||||
"integrity": "sha512-MSfJh5ckuaI2uibeO4qiUl2e/j5fpXy6cmW/ZzSkb+U3rTJfMSNzODqrDwG0YWOd8BVI+tD9/jLZiBhJbMupUg=="
|
||||
},
|
||||
"node_modules/mpvue-echarts": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/mpvue-echarts/-/mpvue-echarts-0.3.2.tgz",
|
||||
"integrity": "sha512-KULGS1DOMNhXu3nBkBv6BtmnqjyHLc+2Dur7eW+2s2aic1NCOygglCMmAmMEU6/TGSR67ttFA2NYxXPUYbNhWQ=="
|
||||
},
|
||||
"node_modules/set-cookie-parser": {
|
||||
"version": "2.6.0",
|
||||
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
|
||||
"integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ=="
|
||||
},
|
||||
"node_modules/strnum": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz",
|
||||
"integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA=="
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
|
||||
},
|
||||
"node_modules/uview-ui": {
|
||||
"version": "1.8.8",
|
||||
"resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-1.8.8.tgz",
|
||||
"integrity": "sha512-Osal3yzXiHor0In9OPTZuXTaqTbDglMZ9RGK/MPYDoQQs+y0hrBCUD0Xp5T70C8i2lLu2X6Z11zJhmsQWMR7Jg=="
|
||||
},
|
||||
"node_modules/weapp-cookie": {
|
||||
"version": "1.4.8",
|
||||
"resolved": "https://registry.npmjs.org/weapp-cookie/-/weapp-cookie-1.4.8.tgz",
|
||||
"integrity": "sha512-YksOnCI4mM+MAlAf/5iL0aSzwfePHZTUS9NorL0RerAxJMOpzzrEZrMBF+wKS1usH/UQqkZTMSxjiWs0ZcAE9g==",
|
||||
"dependencies": {
|
||||
"set-cookie-parser": "^2.4.8"
|
||||
}
|
||||
},
|
||||
"node_modules/zrender": {
|
||||
"version": "5.4.4",
|
||||
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.4.tgz",
|
||||
"integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0"
|
||||
}
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"crypto-js": {
|
||||
"version": "4.2.0",
|
||||
|
|
|
|||
110
pages.json
110
pages.json
|
|
@ -2,6 +2,7 @@
|
|||
"easycom": {
|
||||
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
|
||||
},
|
||||
"lazyCodeLoading": "requiredComponents",
|
||||
"pages": [{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
|
|
@ -103,6 +104,115 @@
|
|||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/shebei/eletj",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#4473f6",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/shebei/sbdetail",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#4473f6",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/userpage/skzh",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#4473f6",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/userpage/bdcard",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#4473f6",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/userpage/order_detail",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#4473f6",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/userpage/cbRecord",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#4473f6",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/userpage/czRecord",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#4473f6",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/userpage/glRecord",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#4473f6",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/userpage/userSet",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#4473f6",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/userpage/czindex",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#4473f6",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/login/login",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "",
|
||||
"enablePullDownRefresh" : false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
179
pages/login/login.vue
Normal file
179
pages/login/login.vue
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar :is-back="false" :title="tittxt" :border-bottom="false" :background="bgc" title-color='#fff' title-size='36' height='36' >
|
||||
|
||||
</u-navbar>
|
||||
<view class="imgbox">
|
||||
<image src="@/static/login.png" mode=""></image>
|
||||
</view>
|
||||
<view class="tip">
|
||||
欢迎来到e租居
|
||||
</view>
|
||||
<view class="inputbox">
|
||||
<!-- 在这里放置你的输入框 -->
|
||||
<view class="box1" v-if="chooseType">
|
||||
<view class="input_txt">
|
||||
首次使用请选择您的身份
|
||||
</view>
|
||||
<div class="button" style="margin-top: 162rpx;" @click="userType(1)">
|
||||
我是房东
|
||||
</div>
|
||||
<div class="button" @click="userType(2)">
|
||||
我是租户
|
||||
</div>
|
||||
</view>
|
||||
<view class="box1" v-if="login">
|
||||
<view class="input_txt" style="width: 536rpx;font-size: 24rpx;line-height: 32rpx;">
|
||||
您暂未授权e租居小程序获取你的信息，将无法正常使用小程序的功能。如需要正常使用请点击“授权”按钮，打开头像，昵称等信息的授权。
|
||||
</view>
|
||||
|
||||
<button class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="margin-top: 330rpx;margin-left: -10rpx;" >
|
||||
授权登录
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#7D86EF",
|
||||
},
|
||||
tittxt:"授权登录",
|
||||
chooseType:true,
|
||||
usertype:'',
|
||||
login:false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
userType(num){
|
||||
this.chooseType=false
|
||||
this.login=true
|
||||
if(num==1){
|
||||
this.usertype='00'
|
||||
}else{
|
||||
this.usertype='01'
|
||||
}
|
||||
},
|
||||
getPhoneNumber(e) {
|
||||
let that = this;
|
||||
console.log("eeeeeeee", e);
|
||||
const wxLoginAsync = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
wx.login({
|
||||
success(res) {
|
||||
if (res.code) {
|
||||
console.log('登录！', res);
|
||||
let data = {
|
||||
wxOpenId: res.code,
|
||||
userType: that.usertype,
|
||||
mobileCode: e.detail.code,
|
||||
};
|
||||
resolve(data);
|
||||
} else {
|
||||
reject(res.errMsg);
|
||||
}
|
||||
},
|
||||
fail(err) {
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
wxLoginAsync()
|
||||
.then(async (data) => {
|
||||
this.$u.post("/app/auth/wxLogin",data).then((res) => {
|
||||
|
||||
|
||||
|
||||
|
||||
// this.$forceUpdate()
|
||||
if (res.code == 200) {
|
||||
console.log(res,'resres');
|
||||
wx.setStorageSync('token', res.token);
|
||||
that.ceshi()
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
},
|
||||
async ceshi() {
|
||||
this.$u.get("/app/user/userInfo").then((res) => {
|
||||
console.log('进入跳转');
|
||||
// uni.switchTab({
|
||||
// url: '/pages/index/index'
|
||||
// })
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
page{
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.page {
|
||||
position: relative; /* 添加相对定位 */
|
||||
}
|
||||
|
||||
.imgbox {
|
||||
width: 750rpx;
|
||||
height: 576rpx;
|
||||
z-index: 0;
|
||||
|
||||
image {
|
||||
width: 750rpx;
|
||||
height: 576rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
width: 204rpx;
|
||||
position: absolute;
|
||||
top: 400rpx;
|
||||
left: 30rpx;
|
||||
font-weight: 500;
|
||||
font-size: 48rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 66rpx;
|
||||
}
|
||||
|
||||
.inputbox {
|
||||
position: absolute; /* 或者 fixed，根据你的需求 */
|
||||
top: 700rpx; /* 调整这里来控制距离顶部的距离 */
|
||||
|
||||
width: 750rpx; /* 调整输入框的宽度 */
|
||||
padding: 100rpx 0;
|
||||
background: #fff; /* 设置背景颜色，这里是红色的半透明 */
|
||||
border-radius: 50rpx; /* 设置圆角 */
|
||||
z-index: 999; /* 设置 z-index，确保在其他内容上方显示 */
|
||||
padding-left: 104rpx;
|
||||
.input_txt{
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.button{
|
||||
margin-top: 64rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 562rpx;
|
||||
height: 96rpx;
|
||||
background: #8883F0;
|
||||
border-radius: 52rpx 52rpx 52rpx 52rpx;
|
||||
|
||||
font-weight: 500;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
209
pages/my.vue
209
pages/my.vue
|
|
@ -4,44 +4,42 @@
|
|||
height='36'
|
||||
id="navbar">
|
||||
</u-navbar>
|
||||
<view class="userpage" v-if="false">
|
||||
<view class="img">
|
||||
<!-- <image src="" mode=""></image> -->
|
||||
<view class="userpage" v-if="false">
|
||||
<view class="top_box">
|
||||
|
||||
</view>
|
||||
<view class="cont">
|
||||
<view class="tit">
|
||||
其他
|
||||
</view>
|
||||
<view class="card" @click="topage(1)">
|
||||
<image src="../static/icon.png" mode=""></image>
|
||||
<view class="conts">
|
||||
<view class="top">充值记录</view>
|
||||
<view class="bot">
|
||||
01:00
|
||||
</view>
|
||||
<view class="bot_box">
|
||||
<view class="userinfo">
|
||||
<view class="userimg_box">
|
||||
<image src="../static/off.png" mode=""></image>
|
||||
</view>
|
||||
<view class="nickname">
|
||||
用户昵称
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<image src="../static/icon.png" mode=""></image>
|
||||
<view class="conts">
|
||||
<view class="top">常见问题</view>
|
||||
<view class="bot">
|
||||
充值、体现、使用说明
|
||||
</view>
|
||||
</view>
|
||||
<view class="botcard" style="margin-top: 116rpx;">
|
||||
<image src="../static/cz.png" mode=""></image>
|
||||
<view class="txt">充值记录</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<image src="../static/icon.png" mode=""></image>
|
||||
<view class="conts">
|
||||
<view class="top">意见反馈</view>
|
||||
<view class="bot">
|
||||
01:00
|
||||
</view>
|
||||
</view>
|
||||
<view class="botcard">
|
||||
<image src="../static/cb.png" mode=""></image>
|
||||
<view class="txt">抄表记录</view>
|
||||
</view>
|
||||
<view class="botcard">
|
||||
<image src="../static/wt.png" mode=""></image>
|
||||
<view class="txt">常见问题</view>
|
||||
</view>
|
||||
<view class="botcard">
|
||||
<image src="../static/yj.png" mode=""></image>
|
||||
<view class="txt">意见反馈</view>
|
||||
</view>
|
||||
<view class="botcard">
|
||||
<image src="../static/sz.png"></image>
|
||||
<view class="txt">设置</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fdpage">
|
||||
<view class="fdpage" style="padding-bottom: 200rpx;">
|
||||
<view class="top_box">
|
||||
<view class="userinfo">
|
||||
<view class="img">
|
||||
|
|
@ -91,16 +89,28 @@
|
|||
</view>
|
||||
<view class="bot_box">
|
||||
<view class="botcard">
|
||||
<div class="txt">告警设备</div>
|
||||
<image src="../static/cz.png" mode=""></image>
|
||||
<view class="txt">充值记录</view>
|
||||
</view>
|
||||
<view class="botcard">
|
||||
<div class="txt">起充金额</div>
|
||||
<image src="../static/cb.png" mode=""></image>
|
||||
<view class="txt">抄表记录</view>
|
||||
</view>
|
||||
<view class="botcard">
|
||||
<div class="txt">帮助中心</div>
|
||||
<image src="../static/wt.png" mode=""></image>
|
||||
<view class="txt">常见问题</view>
|
||||
</view>
|
||||
<view class="botcard">
|
||||
<div class="txt">设置</div>
|
||||
<image src="../static/yj.png" mode=""></image>
|
||||
<view class="txt">意见反馈</view>
|
||||
</view>
|
||||
<view class="botcard">
|
||||
<image src="../static/gl.png" mode=""></image>
|
||||
<view class="txt">归零记录</view>
|
||||
</view>
|
||||
<view class="botcard">
|
||||
<image src="../static/sz.png"></image>
|
||||
<view class="txt">设置</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -117,7 +127,7 @@
|
|||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#8883F0",
|
||||
backgroundColor: " rgba(0, 0, 0, 0)",
|
||||
},
|
||||
}
|
||||
},
|
||||
|
|
@ -144,74 +154,84 @@ page{
|
|||
width: 750rpx;
|
||||
height: 100vh;
|
||||
.userpage{
|
||||
.img{
|
||||
// position: absolute;
|
||||
// position: fixed;
|
||||
margin-top: -170rpx;
|
||||
.top_box{
|
||||
padding-top: 40rpx;
|
||||
width: 750rpx;
|
||||
height: 444rpx;
|
||||
height: 352rpx;
|
||||
background-color: #8883F0;
|
||||
z-index: 1;
|
||||
}
|
||||
.cont{
|
||||
// position: absolute;
|
||||
// position: fixed;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
margin-top: -185rpx;
|
||||
width: 750rpx;
|
||||
height: 1;
|
||||
padding: 0 40rpx;
|
||||
|
||||
padding-top: 96rpx;
|
||||
border-radius: 200rpx 0 0 0;
|
||||
}
|
||||
.bot_box{
|
||||
position: relative;
|
||||
|
||||
padding: 40rpx 50rpx ;
|
||||
margin-top: -50rpx;
|
||||
width: 750rpx;
|
||||
// min-height: 500rpx;
|
||||
background: #F7FAFE;
|
||||
z-index: 10;
|
||||
.tit{
|
||||
margin-left: 40rpx;
|
||||
font-size: 40rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 600;
|
||||
color: #262B37;
|
||||
}
|
||||
.card{
|
||||
border-radius: 50rpx 50rpx 0 0;
|
||||
.userinfo{
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
margin-top: 40rpx;
|
||||
width: 670rpx;
|
||||
height: 160rpx;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: -100rpx;
|
||||
width: 650rpx;
|
||||
height: 184rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(53,140,255,0.1);
|
||||
border-radius: 32rpx 32rpx 32rpx 32rpx;
|
||||
image{
|
||||
margin-left: 40rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
.conts{
|
||||
margin-left: 40rpx;
|
||||
.userimg_box{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.top{
|
||||
width: 100%;
|
||||
font-size: 32rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 600;
|
||||
color: #262B37;
|
||||
}
|
||||
.bot{
|
||||
margin-top: 4rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #95989D;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: -36rpx;
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
image{
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
}
|
||||
.nickname{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 110rpx;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 36rpx;
|
||||
color: #262B37;
|
||||
}
|
||||
}
|
||||
.botcard{
|
||||
margin-bottom: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 38rpx;
|
||||
width: 650rpx;
|
||||
height: 118rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
|
||||
image{
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
margin-right: 32rpx
|
||||
;
|
||||
}
|
||||
.txt{
|
||||
font-size: 30rpx;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
color: #383838;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.fdpage{
|
||||
.top_box{
|
||||
|
|
@ -306,6 +326,12 @@ page{
|
|||
background: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
|
||||
image{
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
margin-right: 32rpx
|
||||
;
|
||||
}
|
||||
.txt{
|
||||
font-size: 30rpx;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
|
|
@ -314,6 +340,7 @@ page{
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
263
pages/shebei/eletj.vue
Normal file
263
pages/shebei/eletj.vue
Normal file
|
|
@ -0,0 +1,263 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar title="用电分析" :border-bottom="false" :background="bgc" title-color='#2E4975'
|
||||
title-size='36' height='36' id="navbar"></u-navbar>
|
||||
<div class="card">
|
||||
<view class="month">
|
||||
2024年01月
|
||||
</view>
|
||||
<view class="tit">
|
||||
本月用电量（度）
|
||||
</view>
|
||||
<div class="txt">
|
||||
25.36
|
||||
</div>
|
||||
<view class="echarts">
|
||||
|
||||
<!-- <mpvue-echarts id="main" ref="pieChart" :echarts="echarts" @onInit="initChart" /> -->
|
||||
<l-echart ref="chart" @finished="initChart"></l-echart>
|
||||
</view>
|
||||
</div>
|
||||
<view class="list">
|
||||
<view class="card_list">
|
||||
<view class="left">
|
||||
2023年04月
|
||||
</view>
|
||||
<view class="right">
|
||||
5.30 度
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
|
||||
export default {
|
||||
components: {
|
||||
LEchart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#F7FAFE",
|
||||
},
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// setTimeout(() => {
|
||||
|
||||
// this.initChart()
|
||||
// }, 300);
|
||||
// this.initChart()
|
||||
},
|
||||
methods: {
|
||||
generateWaveData(length) {
|
||||
const data = [];
|
||||
for (let i = 0; i < length; i++) {
|
||||
const y = Math.sin((i / (length - 1)) * Math.PI * 2); // 正弦函数生成波浪形状的y值
|
||||
data.push((y + 1) * 50); // 映射到0-100的范围
|
||||
}
|
||||
return data;
|
||||
},
|
||||
async initChart() {
|
||||
console.log('111111');
|
||||
// let _this = this
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
left: 50,
|
||||
right: 10,
|
||||
top: 10,
|
||||
bottom: 30,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
fontSize: 11,
|
||||
rotate: 0,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'],
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
fontSize: 11,
|
||||
formatter: function (value) {
|
||||
// 保留两位小数，没有小数时显示00
|
||||
return value+'.00'+ '度'
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
visualMap: {
|
||||
type: 'piecewise',
|
||||
show: false,
|
||||
dimension: 0,
|
||||
seriesIndex: 0,
|
||||
pieces: [{
|
||||
gt: 1,
|
||||
lt: 3,
|
||||
color: 'rgba(0, 0, 180, 0.4)',
|
||||
},
|
||||
{
|
||||
gt: 5,
|
||||
lt: 7,
|
||||
color: 'rgba(0, 0, 180, 0.4)',
|
||||
},
|
||||
],
|
||||
},
|
||||
series: [{
|
||||
type: 'line',
|
||||
smooth: 0.6,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: '#E0DBFF',
|
||||
width: 4,
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#B4B0F7'
|
||||
}, ]),
|
||||
},
|
||||
},
|
||||
data: [20.00, 56.00, 30.00, 58.00, 25.00, 30.00, 45.00],
|
||||
}],
|
||||
};
|
||||
// console.log( this.$refs.chartRef,'1111');
|
||||
const chart = await this.$refs.chart.init(echarts);
|
||||
console.log(option);
|
||||
chart.setOption(option)
|
||||
return chart
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F7FAFE;
|
||||
}
|
||||
|
||||
.page {
|
||||
padding: 0 59rpx;
|
||||
|
||||
.title {
|
||||
margin-top: 170rpx;
|
||||
font-size: 48rpx;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0rpx;
|
||||
|
||||
color: rgba(38, 43, 55, 1);
|
||||
}
|
||||
|
||||
.card {
|
||||
padding-top: 32rpx;
|
||||
margin-top: 66rpx;
|
||||
width: 632rpx;
|
||||
height: 586rpx;
|
||||
background: #8883F0;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||||
opacity: 1;
|
||||
// filter: blur(0px);
|
||||
border-radius: 40rpx;
|
||||
|
||||
.month {
|
||||
|
||||
margin-left: 22rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.tit {
|
||||
margin-top: 18rpx;
|
||||
margin-left: 22rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
|
||||
}
|
||||
|
||||
.txt {
|
||||
margin-top: 2rpx;
|
||||
margin-left: 22rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.echarts {
|
||||
margin-left: 22rpx;
|
||||
margin-top: 60rpx;
|
||||
// width: 100%;
|
||||
// height: 80%;
|
||||
width: 588rpx;
|
||||
height: 320rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.card_list {
|
||||
width: 632rpx;
|
||||
height: 88rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||||
opacity: 1;
|
||||
border-radius: 30rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 16rpx;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
margin-left: 52rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-right: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
593
pages/shebei/sbdetail.vue
Normal file
593
pages/shebei/sbdetail.vue
Normal file
|
|
@ -0,0 +1,593 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar :title="tittxt" :border-bottom="false" :background="bgc" title-color='#2E4975'
|
||||
title-size='36' height='36' id="navbar">
|
||||
</u-navbar>
|
||||
<view class="zhuhu" >
|
||||
<view class="card1">
|
||||
<view class="top">
|
||||
<view class="left">
|
||||
设备
|
||||
</view>
|
||||
<view class="right">
|
||||
<image class="img1" src="@/static/off.png" mode="" style="margin-right: 30rpx;"></image>
|
||||
<image class="img1" src="@/static/share.png" mode="" @click="toewm()"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mid">
|
||||
<view class="mid_left">
|
||||
<image src="../../static/db.png" mode=""></image>
|
||||
</view>
|
||||
<view class="mid_right">
|
||||
<view class="mid_top">
|
||||
{{ deviceInfo.deviceName }}号
|
||||
</view>
|
||||
<view class="mid_bot">
|
||||
<view class="txt" v-if="deviceInfo">电表号：{{ deviceInfo.deviceId }}</view>
|
||||
<div class="tip" v-if="deviceInfo.onlineStatus==1">在线</div>
|
||||
<div class="tip" v-if="deviceInfo.onlineStatus==0">离线</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bot">
|
||||
<view class="bot_left">
|
||||
<view class="echarts">
|
||||
|
||||
<!-- <mpvue-echarts id="main" ref="pieChart" :echarts="echarts" @onInit="initChart" /> -->
|
||||
<l-echart ref="chart" @finished="initChart"></l-echart>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bot_right">
|
||||
<view class="cont">
|
||||
<view class="tit">
|
||||
150KWH
|
||||
</view>
|
||||
<view class="txt">
|
||||
总电量
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont" style="margin-left: 60rpx;">
|
||||
<view class="tit">
|
||||
0.5元/度
|
||||
</view>
|
||||
<view class="txt">
|
||||
电价
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card2">
|
||||
<view class="tit">实时</view>
|
||||
<view class="cont_box">
|
||||
<view class="cont">
|
||||
<view class="top">{{deviceInfo.realTimePower}}KW</view>
|
||||
<view class="bot">实时功率</view>
|
||||
</view>
|
||||
<view class="cont" style="width: 70rpx;">
|
||||
<view class="top">{{deviceInfo.electricity}}A</view>
|
||||
<view class="bot">电流</view>
|
||||
</view>
|
||||
<view class="cont">
|
||||
<view class="top">{{deviceInfo.voltage}}V</view>
|
||||
<view class="bot">电压</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="card3">
|
||||
<view class="tit">其他</view>
|
||||
<view class="cont_box">
|
||||
<view class="cont" style="width: 56rpx;">
|
||||
<view class="top">
|
||||
<image src="@/static/cb.png" mode="" style="width: 58rpx;height: 56rpx;" ></image>
|
||||
</view>
|
||||
<view class="bot">抄表</view>
|
||||
</view>
|
||||
<view class="cont" style="width: 58rpx;">
|
||||
<view class="top">
|
||||
<image src="@/static/gl.png" mode="" style="width: 58rpx;height: 58rpx;"></image>
|
||||
</view>
|
||||
<view class="bot">归零</view>
|
||||
</view>
|
||||
<view class="cont" style="width: 58rpx;">
|
||||
<view class="top">
|
||||
<image src="@/static/yc.png" mode="" style="width: 58rpx;height: 60rpx;"></image>
|
||||
</view>
|
||||
<view class="bot">异常</view>
|
||||
</view>
|
||||
<view class="cont" @click="toydfx()">
|
||||
<view class="top">
|
||||
<image src="@/static/fx.png" mode=""></image>
|
||||
</view>
|
||||
<view class="bot">用电分析</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
<view class="cont_box" style="padding-left: 30rpx;">
|
||||
<view class="cont" style="width: 115rpx;margin-right: 50rpx;" >
|
||||
<view class="top">
|
||||
<image src="@/static/yc.png" mode="" style="width: 58rpx;height: 60rpx;"></image>
|
||||
</view>
|
||||
<view class="bot">房租提醒</view>
|
||||
</view>
|
||||
<view class="cont" style="width: 56rpx;">
|
||||
<view class="top">
|
||||
<image src="@/static/sz.png" mode=""></image>
|
||||
</view>
|
||||
<view class="bot">设置</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="button">电费充值</view> -->
|
||||
<!-- <view class="zhanwei" style="width: 100%;height: 300rpx;">
|
||||
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#F7FAFE",
|
||||
|
||||
},
|
||||
deviceInfo:{},
|
||||
loadings:false,
|
||||
info:'',
|
||||
tittxt:"设备列表",
|
||||
titlist: [
|
||||
"全部",
|
||||
"电表",
|
||||
"水表",
|
||||
|
||||
],
|
||||
curtitidx:0,
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
|
||||
let id = option.id
|
||||
this.getDevice(id)
|
||||
},
|
||||
methods: {
|
||||
async initChart() {
|
||||
let value = 100;
|
||||
let value2 = this.deviceInfo.surplusElectriQuantity
|
||||
const option = {
|
||||
// backgroundColor:"#061740",
|
||||
title: {
|
||||
show: false,
|
||||
text: `历史请求满意度`, // 图表标题
|
||||
x: 'center',
|
||||
y: '20',
|
||||
textStyle: {
|
||||
color: '#333', //'#fff',
|
||||
fontSize: 20,
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
type: 'pie', // 饼图类型
|
||||
radius: ['98%', '70%'], // 饼图半径，第一个值是内半径，第二个值是外半径
|
||||
silent: true,
|
||||
clockwise: true,
|
||||
startAngle: 90, // 起始角度
|
||||
z: 0,
|
||||
zlevel: 0,
|
||||
|
||||
data: [{
|
||||
value: value,
|
||||
name: '占比', // 数据项名称
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#8883F0', // 数据项颜色
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
position: 'center',
|
||||
formatter: ` {a|${value2}}\n\n{b|剩余电量}`, // 标签内容格式
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 15,
|
||||
fontWeight: '700',
|
||||
color: '#333',
|
||||
},
|
||||
b: {
|
||||
fontSize: 11,
|
||||
color: '#888',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 100 - value,
|
||||
name: '',
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#173164',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'gauge', // 仪表盘类型
|
||||
radius: '130%', // 仪表盘半径，占图表容器的百分比
|
||||
center: ['50%', '50%'], // 仪表盘中心位置
|
||||
startAngle: 359,
|
||||
endAngle: 359.9,
|
||||
splitNumber: 2, // 刻度分割段数
|
||||
hoverAnimation: true,
|
||||
axisTick: {
|
||||
show: true, // 是否显示刻度线
|
||||
length: 10, // 刻度线长度
|
||||
lineStyle: {
|
||||
color: 'auto',
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
length: 0, // 刻度线分隔线长度
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#061740',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false, // 是否显示刻度标签
|
||||
},
|
||||
pointer: {
|
||||
show: false, // 是否显示指针
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
},
|
||||
detail: {
|
||||
show: false, // 是否显示仪表盘详情
|
||||
},
|
||||
data: [{
|
||||
value: 0,
|
||||
name: '',
|
||||
}, ],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// console.log( this.$refs.chartRef,'1111');
|
||||
const chart = await this.$refs.chart.init(echarts);
|
||||
console.log(option);
|
||||
chart.setOption(option)
|
||||
// chart.resize({
|
||||
// width: uni.upx2px(210), // Convert 210rpx to pixels
|
||||
// height: uni.upx2px(190.14) // Convert 190.14rpx to pixels
|
||||
// });
|
||||
return chart
|
||||
},
|
||||
|
||||
// 获取设备详情
|
||||
getDevice(id){
|
||||
this.$u.get("/app/device/"+id).then((res) => {
|
||||
|
||||
|
||||
|
||||
|
||||
// this.$forceUpdate()
|
||||
if (res.code == 200) {
|
||||
this.deviceInfo=res.data
|
||||
console.log(this.deviceInfo.deviceId,'resres');
|
||||
this.loadings=true
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
swiperchange(e){
|
||||
this.curtitidx=e.detail.current
|
||||
console.log(e,'aaaa');
|
||||
},
|
||||
changeidx(index){
|
||||
this.curtitidx=index
|
||||
},
|
||||
toewm(){
|
||||
uni.navigateTo({
|
||||
url:"/pages/shebei/ewm"
|
||||
})
|
||||
},
|
||||
toydfx(){
|
||||
uni.navigateTo({
|
||||
url:"/pages/shebei/eletj"
|
||||
})
|
||||
},
|
||||
tofztx(){
|
||||
uni.navigateTo({
|
||||
url:"/pages/userpage/fztx"
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F7FAFE;
|
||||
}
|
||||
|
||||
.page {
|
||||
.zhuhu {
|
||||
margin-top: 20rpx;
|
||||
padding: 0 40rpx;
|
||||
|
||||
.card1 {
|
||||
padding: 34rpx 0 0 40rpx;
|
||||
width: 670rpx;
|
||||
height: 583rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 14rpx 35rpx 0rpx rgba(53, 140, 255, 0.1);
|
||||
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
font-size: 35rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #8883F0;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-right: 56rpx;
|
||||
|
||||
.img1 {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mid {
|
||||
margin-top: 54rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-content: flex-start;
|
||||
|
||||
.mid_left {
|
||||
image {
|
||||
width: 37rpx;
|
||||
height: 98rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.mid_right {
|
||||
margin-left: 40rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.mid_top {
|
||||
width: 100%;
|
||||
font-size: 42rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #262B37;
|
||||
}
|
||||
|
||||
.mid_bot {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
|
||||
.txt {
|
||||
font-size: 24rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #95989D;
|
||||
}
|
||||
|
||||
.tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 19rpx;
|
||||
width: 38rpx;
|
||||
height: 23rpx;
|
||||
background: rgba(204, 204, 204, 0);
|
||||
opacity: 1;
|
||||
border: 2rpx solid #8883F0;
|
||||
border-radius: 40rpx;
|
||||
font-size: 14rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #8883F0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bot {
|
||||
margin-top: 83rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
|
||||
.bot_left {
|
||||
width: 210rpx;
|
||||
height: 190.14rpx;
|
||||
|
||||
.echarts {
|
||||
width: 210rpx;
|
||||
height: 190.14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bot_right {
|
||||
// margin-top: 50rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.cont {
|
||||
.tit {
|
||||
font-size: 28rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 600;
|
||||
color: #262B37;
|
||||
line-height: 49rpx;
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-size: 24rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #262B37;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card2 {
|
||||
padding-top: 40rpx;
|
||||
margin-top: 24rpx;
|
||||
width: 670rpx;
|
||||
height: 254rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(53, 140, 255, 0.1);
|
||||
border-radius: 28rpx;
|
||||
|
||||
.tit {
|
||||
margin-left: 40rpx;
|
||||
|
||||
font-size: 35rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #8883F0;
|
||||
}
|
||||
|
||||
.cont_box {
|
||||
margin-top: 32rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-around;
|
||||
|
||||
.cont {
|
||||
width: 110rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.top {
|
||||
font-size: 32rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #262B37;
|
||||
}
|
||||
|
||||
.bot {
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #262B37;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card3 {
|
||||
padding-top: 40rpx;
|
||||
margin-top: 24rpx;
|
||||
width: 670rpx;
|
||||
// height: 318rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(53, 140, 255, 0.1);
|
||||
border-radius: 28rpx;
|
||||
padding-bottom: 20rpx;
|
||||
.tit {
|
||||
margin-left: 40rpx;
|
||||
|
||||
font-size: 35rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #8883F0;
|
||||
}
|
||||
|
||||
.cont_box {
|
||||
padding-left: 60rpx;
|
||||
margin-top: 32rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
// justify-content: space-around;
|
||||
.cont:last-child{
|
||||
margin-right: 0rpx;
|
||||
}
|
||||
.cont {
|
||||
width: 112rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 80rpx;
|
||||
.top {
|
||||
image {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bot {
|
||||
margin-top: 15rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-left: 76rpx;
|
||||
margin-top: 178rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 520rpx;
|
||||
height: 104rpx;
|
||||
background: #8883F0;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||||
border-radius: 52rpx 52rpx 52rpx 52rpx;
|
||||
|
||||
font-size: 32rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
139
pages/userpage/bdcard.vue
Normal file
139
pages/userpage/bdcard.vue
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
<template>
|
||||
<view>
|
||||
<u-navbar title="收款账户" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
height='36'></u-navbar>
|
||||
<view class="cont">
|
||||
|
||||
<view class="tip">注意：绑定非一类卡，会因转租额度受限导致转账失败 </view>
|
||||
<view class="input_box">
|
||||
<view class="text">持卡人姓名</view>
|
||||
<view class="ipt">
|
||||
<u-input v-model="name" placeholder='请输入持卡人姓名' placeholder-style='font-size: 24rpx;'/>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="input_box">
|
||||
<view class="text">身份证号码</view>
|
||||
<view class="ipt">
|
||||
<u-input v-model="idnum" placeholder='请输入身份证号码' placeholder-style='font-size: 24rpx;'/>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="input_box">
|
||||
<view class="text" style="margin-right: 126rpx;">银行卡号</view>
|
||||
<view class="ipt">
|
||||
<u-input v-model="name" placeholder='请输入银行卡号' placeholder-style='font-size: 24rpx;'/>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="input_box">
|
||||
<view class="text" style="margin-right: 150rpx;">验证码</view>
|
||||
<view class="ipt" style="width: 170rpx;">
|
||||
<u-input v-model="name" placeholder='请输入验证码' placeholder-style='font-size: 20rpx;color: red;'/>
|
||||
</view>
|
||||
<view class="yzmbtn">
|
||||
获取验证码
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="btn">
|
||||
立即支付
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#F7FAFE",
|
||||
},
|
||||
name:'',
|
||||
idnum:'',
|
||||
cardnum:''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tobd(){
|
||||
uni.navigateTo({
|
||||
url:''
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
page{
|
||||
background: #F7FAFE;
|
||||
}
|
||||
.cont{
|
||||
display: flex;
|
||||
// justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
width: 594rpx;
|
||||
.tip{
|
||||
margin-top: 62rpx;
|
||||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #FF8D1A;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
.input_box{
|
||||
margin-top: 66rpx;
|
||||
width: 594rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
.text{
|
||||
margin-right: 102rpx;
|
||||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #262B37;
|
||||
}
|
||||
.ipt{
|
||||
width: 360rpx;
|
||||
.u-input::placeholder {
|
||||
font-size: 20px;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
.yzmbtn{
|
||||
margin-left: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 150rpx;
|
||||
height: 50rpx;
|
||||
background: #8EA9E4;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
|
||||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 218rpx;
|
||||
width: 590rpx;
|
||||
height: 84rpx;
|
||||
background: #2A82E4;
|
||||
border-radius: 40rpx;
|
||||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
103
pages/userpage/cbRecord.vue
Normal file
103
pages/userpage/cbRecord.vue
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<template>
|
||||
<view>
|
||||
<u-navbar title="抄表记录" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
height='36'></u-navbar>
|
||||
<view class="cont">
|
||||
<view class="card">
|
||||
<view class="left">
|
||||
<image src="@/static/ele1.png" mode=""></image>
|
||||
</view>
|
||||
<view class="card_cont">
|
||||
<view class="text">2501号电表 抄表时剩余电量</view>
|
||||
<view class="txt">
|
||||
2023年04月01日 15:52
|
||||
</view>
|
||||
</view>
|
||||
<view class="card_right">
|
||||
115.00度
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#F7FAFE",
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tobd(){
|
||||
uni.navigateTo({
|
||||
url:''
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
page{
|
||||
background: #F7FAFE;
|
||||
}
|
||||
.cont{
|
||||
width: 672rpx;
|
||||
margin: 16rpx auto 0;
|
||||
display: flex;
|
||||
// justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.card{
|
||||
padding-left: 44rpx ;
|
||||
padding-right: 38rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 16rpx;
|
||||
width: 672rpx;
|
||||
height: 180rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
|
||||
border-radius: 30rpx;
|
||||
.left{
|
||||
width: 37.33rpx;
|
||||
height: 50rpx;
|
||||
image{
|
||||
width: 37.33rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
.card_cont{
|
||||
width: 310rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.text{
|
||||
width: 310rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #262B37;
|
||||
}
|
||||
.txt{
|
||||
width: 310rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #95989D;
|
||||
line-height: 64rpx;
|
||||
}
|
||||
}
|
||||
.card_right{
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #262B37;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
151
pages/userpage/czRecord.vue
Normal file
151
pages/userpage/czRecord.vue
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
<template>
|
||||
<view class="pages">
|
||||
<u-navbar title="充值记录" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
height='36'></u-navbar>
|
||||
|
||||
|
||||
<view class="cards" >
|
||||
<view class="card_left">
|
||||
<view class="top">2501电表充值</view>
|
||||
<view class="bot">
|
||||
2023-12-11 15:12:11
|
||||
</view>
|
||||
</view>
|
||||
<view class="card_right">
|
||||
<view class="top">+220.00度</view>
|
||||
<view class="bot">
|
||||
￥60.00
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#F7FAFE",
|
||||
},
|
||||
obj:{}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #F7FAFE;
|
||||
}
|
||||
|
||||
.pages {
|
||||
width: 750rpx;
|
||||
|
||||
.tops {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.tit {
|
||||
margin-left: 36rpx;
|
||||
font-size: 48rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #262B37;
|
||||
}
|
||||
|
||||
.more {
|
||||
margin-right: 36rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #8883F0;
|
||||
}
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 672rpx;
|
||||
height: 154rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||||
margin: 18rpx auto;
|
||||
border-radius: 30rpx;
|
||||
|
||||
.card_left {
|
||||
margin-left: 50rpx;
|
||||
|
||||
.top {
|
||||
font-size: 24rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #262B37;
|
||||
}
|
||||
|
||||
.bot {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
|
||||
.card_right {
|
||||
margin-right: 24rpx;
|
||||
text-align: right;
|
||||
|
||||
.top {
|
||||
margin-top: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #8883F0
|
||||
}
|
||||
|
||||
.bot {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
margin-left: 116rpx;
|
||||
margin-top: 124rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 520rpx;
|
||||
height: 104rpx;
|
||||
background: #8883F0;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
|
||||
border-radius: 52rpx 52rpx 52rpx 52rpx;
|
||||
|
||||
font-size: 32rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
303
pages/userpage/czindex.vue
Normal file
303
pages/userpage/czindex.vue
Normal file
|
|
@ -0,0 +1,303 @@
|
|||
<template>
|
||||
<view>
|
||||
<u-navbar title="充值" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
height='36'></u-navbar>
|
||||
<view class="cont">
|
||||
<view class="jglist_box">
|
||||
<view class="jgli" v-for="(item,index) in jglist" :key="index" :class="jgindex==index? 'act1':''" @click="cgIdx(index)">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="ipt_box" >
|
||||
<view class="ipt">
|
||||
<u-input v-model="value" :type="type" :border="border" placeholder='自定义' placeholder-style="font-size: 32rpx;color: #A6A6A6;" @click="ckinpt()"/>
|
||||
</view>
|
||||
|
||||
<view class="txt" style="margin-left: auto;margin-right: 20rpx;">
|
||||
元
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_card">
|
||||
<view class="info_li">
|
||||
<view class="text">充值金额：50元</view>
|
||||
<view class="txt">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_li">
|
||||
<view class="text">到账电量：80.23度</view>
|
||||
<view class="txt">
|
||||
(单价0.6元/度)
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_li">
|
||||
<view class="text">充值金额：50元</view>
|
||||
<view class="txt" @click="showtip=!showtip">
|
||||
查看明细 <u-icon name="arrow-down" v-show="showtip"></u-icon> <u-icon name="arrow-up" v-show="showtip==false"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tip" v-if="showtip">
|
||||
<view class="tip_txt">
|
||||
平台服务费：0.30
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cztip">
|
||||
<view class="cztip_li">
|
||||
充值须知
|
||||
|
||||
</view>
|
||||
<view class="cztip_li">
|
||||
|
||||
1.充值时与蓝牙设备保持三米以内
|
||||
|
||||
</view>
|
||||
<view class="cztip_li">
|
||||
|
||||
2.支付成功后，需点击“完成”按钮，请勿直接退出
|
||||
|
||||
</view>
|
||||
<view class="cztip_li">
|
||||
|
||||
3.若发生充值异常，可以在“我的”，“常见问题”中排查
|
||||
</view>
|
||||
</view>
|
||||
<view class="patBtn" @click="payBtn()">
|
||||
立即支付
|
||||
</view>
|
||||
<u-mask :show="tipshow" @click="tipshow = false" z-index='10'>
|
||||
|
||||
</u-mask>
|
||||
<view class="tip_box">
|
||||
<view class="cont">
|
||||
<view class="tit">温馨提示</view>
|
||||
<view class="texts">
|
||||
充值金额不低于10元
|
||||
</view>
|
||||
<view class="tip_btn">
|
||||
好的
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#F7FAFE",
|
||||
},
|
||||
jgindex:0,
|
||||
jglist:[
|
||||
'50元',
|
||||
'100元',
|
||||
'150元',
|
||||
'200元',
|
||||
'300元',
|
||||
'500元',
|
||||
],
|
||||
value: '',
|
||||
type: 'text',
|
||||
border: false,
|
||||
showtip:false,
|
||||
tipshow:true
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tobd(){
|
||||
uni.navigateTo({
|
||||
url:''
|
||||
})
|
||||
},
|
||||
cgIdx(idx){
|
||||
this.jgindex=idx
|
||||
},
|
||||
ckinpt(){
|
||||
this.jgindex=-1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
page{
|
||||
background: #F7FAFE;
|
||||
}
|
||||
.cont{
|
||||
width: 648rpx;
|
||||
margin: 16rpx auto 0;
|
||||
display: flex;
|
||||
// justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
.jglist_box{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.jgli:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.jgli{
|
||||
margin-top: 40rpx;
|
||||
margin-right: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 188rpx;
|
||||
height: 122rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
|
||||
border-radius: 20rpx;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #383838;
|
||||
|
||||
}
|
||||
.act1{
|
||||
background: #2A82E4;
|
||||
font-weight: 400;
|
||||
font-size: 40rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.ipt_box{
|
||||
width: 420rpx;
|
||||
height: 122rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
margin-top: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #A6A6A6;
|
||||
.ipt{
|
||||
margin-left: 20rpx;
|
||||
margin-right: 10rpx;
|
||||
/deep/.u-input__input{
|
||||
font-size: 32rpx !important;
|
||||
color: #A6A6A6 !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.info_card{
|
||||
margin-top: 46rpx;
|
||||
padding:20rpx 28rpx 40rpx 36rpx ;
|
||||
width: 648rpx;
|
||||
// height: 266rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.info_li{
|
||||
margin-top: 30rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.text{
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #383838;
|
||||
}
|
||||
.txt{
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #383838;
|
||||
}
|
||||
}
|
||||
.tip{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 576rpx;
|
||||
height: 70rpx;
|
||||
background-image: url('@/static/tpbg.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
.tip_txt{
|
||||
margin-left: 38rpx;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cztip{
|
||||
margin-top: 30rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.cztip_li{
|
||||
width: 100%;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #FF8D1A;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
.patBtn{
|
||||
margin-top: 152rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 590rpx;
|
||||
height: 84rpx;
|
||||
background: #2A82E4;
|
||||
border-radius: 50rpx;
|
||||
font-weight: 400;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF
|
||||
}
|
||||
.tip_box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 12;
|
||||
height: 100%;
|
||||
.cont{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 616rpx;
|
||||
height: 360rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
.tit{
|
||||
margin-top: 44rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 48rpx;
|
||||
color: #262B37;
|
||||
}
|
||||
.texts{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #262B37;
|
||||
}
|
||||
.tip_btn{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 266rpx;
|
||||
height: 96rpx;
|
||||
background: #2A82E4;
|
||||
border-radius: 52rpx 52rpx 52rpx 52rpx;
|
||||
font-weight: 500;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
103
pages/userpage/glRecord.vue
Normal file
103
pages/userpage/glRecord.vue
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<template>
|
||||
<view>
|
||||
<u-navbar title="抄表记录" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
height='36'></u-navbar>
|
||||
<view class="cont">
|
||||
<view class="card">
|
||||
<view class="left">
|
||||
<image src="@/static/gl.png" mode=""></image>
|
||||
</view>
|
||||
<view class="card_cont">
|
||||
<view class="text">2501号电表 归零时剩余电量</view>
|
||||
<view class="txt">
|
||||
2023年04月01日 15:52
|
||||
</view>
|
||||
</view>
|
||||
<view class="card_right">
|
||||
115.00度
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#F7FAFE",
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tobd(){
|
||||
uni.navigateTo({
|
||||
url:''
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
page{
|
||||
background: #F7FAFE;
|
||||
}
|
||||
.cont{
|
||||
width: 672rpx;
|
||||
margin: 16rpx auto 0;
|
||||
display: flex;
|
||||
// justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.card{
|
||||
padding-left: 44rpx ;
|
||||
padding-right: 38rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 16rpx;
|
||||
width: 672rpx;
|
||||
height: 180rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
|
||||
border-radius: 30rpx;
|
||||
.left{
|
||||
width: 58rpx;
|
||||
height: 58rpx;
|
||||
image{
|
||||
width: 58rpx;
|
||||
height: 58rpx;
|
||||
}
|
||||
}
|
||||
.card_cont{
|
||||
width: 310rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.text{
|
||||
width: 310rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #262B37;
|
||||
}
|
||||
.txt{
|
||||
width: 310rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #95989D;
|
||||
line-height: 64rpx;
|
||||
}
|
||||
}
|
||||
.card_right{
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #262B37;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
139
pages/userpage/order_detail.vue
Normal file
139
pages/userpage/order_detail.vue
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
<template>
|
||||
<view>
|
||||
<u-navbar title="账单详情" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
height='36'></u-navbar>
|
||||
<view class="cont">
|
||||
<view class="order_card">
|
||||
<view class="cardtop">
|
||||
<view class="text">
|
||||
到账金额
|
||||
</view>
|
||||
<view class="num">
|
||||
12,000.00
|
||||
</view>
|
||||
<view class="text">
|
||||
账户余额12365.23
|
||||
</view>
|
||||
</view>
|
||||
<view class="card_bot">
|
||||
<view class="info_li">
|
||||
<view class="text">
|
||||
到账日期
|
||||
</view>
|
||||
<view class="text">
|
||||
2023-12-11 15:30
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_li">
|
||||
<view class="text">
|
||||
充值设备
|
||||
</view>
|
||||
<view class="text">
|
||||
2501号电表
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_li">
|
||||
<view class="text">
|
||||
充值类型
|
||||
</view>
|
||||
<view class="text">
|
||||
电费充值
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_li">
|
||||
<view class="text">
|
||||
充值用户
|
||||
</view>
|
||||
<view class="text">
|
||||
aliyou
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#F7FAFE",
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tobd(){
|
||||
uni.navigateTo({
|
||||
url:''
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
page{
|
||||
background: #F7FAFE;
|
||||
}
|
||||
.cont{
|
||||
display: flex;
|
||||
// justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
// width: 594rpx;
|
||||
.order_card{
|
||||
margin: 0 auto;
|
||||
width: 700rpx;
|
||||
height: 638rpx;
|
||||
background-image: url('@/static/order_bg.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
.cardtop{
|
||||
margin-top: 48rpx;
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// justify-content: center;
|
||||
.text{
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #808080;
|
||||
}
|
||||
.num{
|
||||
text-align: center;
|
||||
margin-top: 18rpx;
|
||||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 60rpx;
|
||||
color: #8883F0;
|
||||
}
|
||||
|
||||
}
|
||||
.card_bot{
|
||||
margin: 0 auto;
|
||||
margin-top: 20rpx;
|
||||
width: 560rpx;
|
||||
text-align: center;
|
||||
.info_li{
|
||||
margin-top: 35rpx;
|
||||
width: 560rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
.text{
|
||||
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,10 +3,7 @@
|
|||
<u-navbar title="收支明细" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
height='36'></u-navbar>
|
||||
|
||||
<view class="tops">
|
||||
<view class="tit">充值记录</view>
|
||||
<view class="more">更多</view>
|
||||
</view>
|
||||
|
||||
<view class="cards" >
|
||||
<view class="card_left">
|
||||
<view class="top">用户充值</view>
|
||||
|
|
@ -21,9 +18,7 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn">
|
||||
电费充值
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
|
|
|||
124
pages/userpage/skzh.vue
Normal file
124
pages/userpage/skzh.vue
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<view>
|
||||
<u-navbar title="收款账户" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
height='36'></u-navbar>
|
||||
<view class="cont">
|
||||
<view class="card" @click="tobd()">
|
||||
<view class="tit">
|
||||
个人用户
|
||||
</view>
|
||||
<view class="txt">
|
||||
拥有个人银行卡
|
||||
</view>
|
||||
</view>
|
||||
<view class="card" style="background-color: #8883F0;">
|
||||
<view class="tit">
|
||||
企业用户
|
||||
</view>
|
||||
<view class="txt">
|
||||
拥有个人银行卡
|
||||
</view>
|
||||
</view>
|
||||
<view class="card" style="background-color: #00BA88 ;">
|
||||
<view class="tit">
|
||||
微信账号
|
||||
</view>
|
||||
<view class="txt">
|
||||
需微信实名认证
|
||||
</view>
|
||||
</view>
|
||||
<view class="card" style="background-color: #4C97E7 ;">
|
||||
<view class="tit">
|
||||
支付宝账号
|
||||
</view>
|
||||
<view class="txt">
|
||||
需支付宝实名认证
|
||||
</view>
|
||||
</view>
|
||||
<view class="tip">充值须知 1.充值时与蓝牙设备保持三米以内 </view>
|
||||
<view class="btn">
|
||||
立即支付
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#F7FAFE",
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tobd(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/userpage/bdcard'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cont{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
.card{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 26rpx;
|
||||
width: 636rpx;
|
||||
height: 188rpx;
|
||||
background: #8EA9E4;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
|
||||
border-radius: 20rpx;
|
||||
.tit{
|
||||
|
||||
width: 80%;
|
||||
margin-top: 38rpx;
|
||||
margin-left: 48rpx;
|
||||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 40rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.txt{
|
||||
// margin-top: 20rpx;
|
||||
margin-left: 48rpx;
|
||||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.tip{
|
||||
margin-top: 62rpx;
|
||||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #FF8D1A;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
.btn{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 218rpx;
|
||||
width: 590rpx;
|
||||
height: 84rpx;
|
||||
background: #2A82E4;
|
||||
border-radius: 40rpx;
|
||||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
309
pages/userpage/userSet.vue
Normal file
309
pages/userpage/userSet.vue
Normal file
|
|
@ -0,0 +1,309 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar title="设置" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
height='36'></u-navbar>
|
||||
<view class="card">
|
||||
<view class="li">
|
||||
<view class="tit">
|
||||
更换绑定手机号
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="txt">
|
||||
138***8999
|
||||
</view>
|
||||
<view class="iconfont icon-xiangyou1"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="li" style="border-bottom: #fff solid 2rpx;">
|
||||
<view class="tit">
|
||||
修改密码
|
||||
</view>
|
||||
<view class="info">
|
||||
<!-- <view class="txt">
|
||||
ESP2001
|
||||
</view> -->
|
||||
<view class="iconfont icon-xiangyou1"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card" style="margin-top: 26rpx;">
|
||||
<view class="li">
|
||||
<view class="tit">
|
||||
用户协议
|
||||
</view>
|
||||
<view class="info">
|
||||
|
||||
<view class="iconfont icon-xiangyou1"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="tit">
|
||||
隐私政策
|
||||
</view>
|
||||
<view class="info">
|
||||
|
||||
<view class="iconfont icon-xiangyou1"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="li" style="border-bottom: #fff solid 2rpx;">
|
||||
<view class="tit">
|
||||
个人信息收集清单
|
||||
</view>
|
||||
<view class="info">
|
||||
|
||||
<view class="iconfont icon-xiangyou1"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="card" style="margin-top: 26rpx;">
|
||||
<view class="li">
|
||||
<view class="tit">
|
||||
常见问题
|
||||
</view>
|
||||
<view class="info">
|
||||
|
||||
<view class="iconfont icon-xiangyou1"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="li" style="border-bottom: #fff solid 2rpx;">
|
||||
<view class="tit">
|
||||
意见反馈
|
||||
</view>
|
||||
<view class="info">
|
||||
|
||||
<view class="iconfont icon-xiangyou1"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="card" style="margin-top: 26rpx;">
|
||||
|
||||
|
||||
<view class="li" style="border-bottom: #fff solid 2rpx;">
|
||||
<view class="tit">
|
||||
角色切换
|
||||
</view>
|
||||
<view class="info" @click="show=!show">
|
||||
<view class="txt">
|
||||
当前为房东模式
|
||||
</view>
|
||||
<view class="iconfont icon-xiangyou1"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<u-mask :show="showloading"></u-mask>
|
||||
<view class="fz" v-show="showfz">
|
||||
<view class="fz_top">
|
||||
<view class="iconfont icon-shanchu">
|
||||
|
||||
</view>
|
||||
<view class="tit">
|
||||
设备分组
|
||||
</view>
|
||||
<view class="txt">
|
||||
管理
|
||||
</view>
|
||||
</view>
|
||||
<view class="card_cont">
|
||||
<view class="cards" v-for="item in 10" :key="item">
|
||||
<view class="txt">
|
||||
全部
|
||||
</view>
|
||||
<view class="num">
|
||||
1
|
||||
</view>
|
||||
</view>
|
||||
<view class="zhanwei" style="width: 100%;height: 100rpx;">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="dd">
|
||||
<u-select v-model="show" :list="list" title='欠费断电'></u-select>
|
||||
</view>
|
||||
<view class="btn">
|
||||
退出登录
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#F7FAFE",
|
||||
},
|
||||
showloading: false,
|
||||
showfz: false,
|
||||
show: false,
|
||||
list: [{
|
||||
value: '1',
|
||||
label: '房东模式'
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '用户模式'
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F7FAFE;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 750rpx;
|
||||
|
||||
.card {
|
||||
padding: 16rpx 38rpx;
|
||||
margin: 60rpx auto 0;
|
||||
width: 654rpx;
|
||||
// height: 734rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||||
opacity: 1;
|
||||
|
||||
.li {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 94rpx;
|
||||
border-bottom: #E5E5E5 solid 2rpx;
|
||||
|
||||
.tit {
|
||||
font-size: 32rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
|
||||
.txt {
|
||||
font-size: 32rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #95989D;
|
||||
}
|
||||
|
||||
.icon-xiangyou1 {
|
||||
margin-left: 6rpx;
|
||||
color: #95989D;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 52rpx auto 0;
|
||||
width: 654rpx;
|
||||
height: 100rpx;
|
||||
background: #FF4F4F;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||||
opacity: 1;
|
||||
border-radius: 30rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.fz {
|
||||
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 750rpx;
|
||||
height: 1152rpx;
|
||||
background: #F7FAFE;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
z-index: 10071;
|
||||
|
||||
.fz_top {
|
||||
margin: 18rpx 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.icon-shanchu {
|
||||
margin-left: 40rpx;
|
||||
font-size: 50rpx;
|
||||
}
|
||||
|
||||
.tit {
|
||||
font-size: 36rpx;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.txt {
|
||||
margin-right: 40rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
color: #2A82E4;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.card_cont {
|
||||
width: 750rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
height: 1030rpx;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
.cards {
|
||||
margin-top: 32rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 40rpx;
|
||||
width: 682rpx;
|
||||
border-radius: 30rpx;
|
||||
height: 114rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||||
|
||||
.txt {
|
||||
font-size: 36rpx;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 36rpx;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
static/cb.png
Normal file
BIN
static/cb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
static/cz.png
Normal file
BIN
static/cz.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
static/device.png
Normal file
BIN
static/device.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
static/ele.png
Normal file
BIN
static/ele.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 553 B |
BIN
static/ele1.png
Normal file
BIN
static/ele1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 626 B |
BIN
static/gl.png
Normal file
BIN
static/gl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
static/login.png
Normal file
BIN
static/login.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 248 KiB |
BIN
static/order_bg.png
Normal file
BIN
static/order_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
static/tpbg.png
Normal file
BIN
static/tpbg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
static/wt.png
Normal file
BIN
static/wt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
static/yj.png
Normal file
BIN
static/yj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1018 B |
Loading…
Reference in New Issue
Block a user