Skip to content

G
gxpt_wechat
Commit 4924ef47 by zhangzhen
Options

优化

parent c0c6a222
Showing with 34 additions and 651 deletions
pages/my/myInfo_v1.vue deleted 100644 → 0
<template>
<view class="myInfo">
<view class="header" :style="{height: statusBarHeight+180+'px',paddingTop: statusBarHeight+'px'}">
<view class="header-content-box">
<view class="login-content">
<view v-if="loginStatus" class="flex-1 flex-row" @tap="onNavToSetUserInfo">
<view class="cu-avatar xl margin-left" >
<image class="avatar-bg" :src="assetsPath+'/avatar_bg.png'" mode="scaleToFill"></image>
<view class="avatar-box">
<image class="avatar-img" :src="userInfo.avatar|| assetsPath+'/logo_icon.png'" mode="scaleToFill" @tap.stop="onProview"></image>
</view>
</view>
<view class="flex-col margin-left">
<text class="text-title text-lg text-bold text-xxl">{{userInfo.nickName||"凑角_"+userName}}</text>
<!-- <view class="flex-row" style="margin-top: 10rpx;">
<text class="cuIcon-hotfill text-white"></text>
<text class="text-white text-lg">会员用户</text>
</view> -->
</view>
<view class="nav-right" @tap.stop="onNavToSetUserInfo">
<image class="img" :src="assetsPath+'/setting.png'" mode="scaleToFill"></image>
<text class="text-gray">修改资料</text>
</view>
</view>
<view v-else class="none-login margin-left" @tap="onNavToLogin">
<view class="cu-avatar xl round">
<image class="avatar-img" :src=" assetsPath+'/avatar_no.png'" mode="scaleToFill"></image>
</view>
<text class="text-gray margin-left" >授权登录</text>
</view>
<view class="flex-between amount-coupon" :style="{background:'url('+assetsPath+'/my_coupon_bg.png) 0 0 / 100% 100% no-repeat'}">
<view class="part-left">
<text v-if="loginStatus" class="text-title text-xl">会员用户专享</text>
<text v-else class="text-title text-xl">点击上方授权登录，才能享受优惠哦！</text>
</view>
<view v-if="loginStatus" class="flex-row" @tap="onNavToMyCoupon">
<text class="text-name text-xl">优惠券</text>
<text class="text-white text-xl text-bold">{{userInfo.number|| 0}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="flex-col content-box">
<view class="user-action">
<view v-for="(item,k) in userAction" :key="k" v-if="item.show" class="action-box" >
<view :style="{background:item.color}" class="action-item" @tap="onActionNav(item,k)">
<view class="flex-1">
<text class="text-title text-lg">{{item.label}}</text>
</view>
<view class="img-box">
<image :src="item.iconUrl" mode="widthFix"></image>
</view>
</view>
</view>
</view>
<view class="main">
<view class="cu-list menu sm-border">
<view class="cu-item arrow" @tap="onHandle(6)">
<view class="content" style="position: relative;">
<image :src="assetsPath+'/my_list_3.png'" class="png" mode="aspectFit"></image>
<text class="text-title">我的车辆</text>
<view class="numberplate">
<text>{{userInfo.numberplate || ''}}</text>
</view>
</view>
</view>
<view class="cu-item arrow" @tap="onHandle(1)">
<view class="content">
<image :src="assetsPath+'/my_list_1.png'" class="png" mode="aspectFit"></image>
<text class="text-title">客服咨询</text>
</view>
</view>
<view class="cu-item arrow" @tap="onHandle(2)">
<view class="content">
<image :src="assetsPath+'/my_list_2.png'" class="png" mode="aspectFit"></image>
<text class="text-title">WIFI连接</text>
</view>
</view>
<view class="cu-item arrow" @tap="onHandle(3)">
<view class="content">
<image :src="assetsPath+'/my_list_3.png'" class="png" mode="aspectFit"></image>
<text class="text-title">全国门店</text>
</view>
</view>
<view class="cu-item arrow" @tap="onHandle(4)">
<view class="content">
<image :src="assetsPath+'/my_list_4.png'" class="png" mode="aspectFit"></image>
<text class="text-title">联系我们</text>
</view>
</view>
<view v-if="userInfo.isAdmin" class="cu-item arrow" @tap="onHandle(5)">
<view class="content">
<image :src="assetsPath+'/my_list_4.png'" class="png" mode="aspectFit"></image>
<text class="text-title">设备控制</text>
</view>
</view>
</view>
</view>
</view>
<!-- <view class="login-out" v-if="loginStatus">
<button class="cu-btn block bg-pink lg round" @tap="onLoginOut">
<text class="cuIcon-exit"></text>退出登录
</button>
</view> -->
<LoginPop ref="loginPop" @success="onCheckUserLogin" />
<f-tabbar></f-tabbar>
<uni-popup ref="popup" type="bottom" maskClick="false">
<view class="popup-content">
<view class="flex-between title-box">
<text class="text-black text-bold text-xl">无线WI-FI</text>
<text class="cuIcon-roundclose text-gray text-xxl" @tap="onClose"></text>
</view>
<view class="flex-col">
<view class="text">
<text class="text-title text-xl">WI-FI名称：</text>
<text class="text-title text-xxl">{{wifiData.name}}</text>
</view>
<view class="text">
<text class="text-title text-xl">WI-FI密码：</text>
<text class="text-title text-xxl">{{wifiData.password}}</text>
</view>
</view>
<view class="box-btn">
<button class="cu-btn line-pink lg" @tap="onCopy">复制密码</button>
<button class="cu-btn bg-pink lg" @tap='onConnectWifi'>一键连接</button>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import fTabbar from '@/components/module/f-tabbar/f-tabbar';
import {getUserInfo,loginOut,systemConfig} from "@/api/index.js"
import config from "@/config/index.config"
import LoginPop from "@/components/login/login"
import {deviceCtrlAuth} from '@/api/store.js'
export default {
components: {
fTabbar,
LoginPop
},
data() {
return {
loginStatus: true,
statusBarHeight: this.statusBarHeight,
assetsPath:config.assetsPath,
hostUrl: config.hostUrl,
userInfo:{},
userAction:[],
wifiData:{
name:"",
password:''
},
servicePhone:'',
userName:'',
deviceRole:false
}
},
onShow() {
this.userAction = [
{
label:"我的订单",
iconUrl:config.assetsPath+'/my_list_15.png',
routePath:"/pages/orderRecord/orderRecord",
type:"1",
color:"#FEF9EE",
show:true
},
{
label:"消费记录",
iconUrl:config.assetsPath+'/my_list_16.png',
routePath:"/pages/payRecord/index",
type:"2",
color:"#EEF3FE",
show:true
},
{
label:"保洁管理",
iconUrl:config.assetsPath+'/my_list_17.png',
routePath:"/pages/cleanManage/cleanManage",
type:"3",
color:"#F1EEFE",
show:false
},
{
label:"保洁记录",
iconUrl:config.assetsPath+'/my_list_17.png',
routePath:"/pages/cleanRecord/index",
type:"4",
color:"#F1EEFE",
show:false
}
];
this.onCheckUserLogin();
this.onGetSysConfig();
},
onLoad() {
console.log("我是V2版本")
// 隐藏原生的tabbar
uni.hideTabBar();
},
methods: {
onGetSysConfig(){
let sysConfigList = uni.getStorageSync('sysConfig')
if(!sysConfigList){
systemConfig().then(res=>{
if(res.data.code == 200){
uni.setStorage({
key:'sysConfig',
data: res.data.rows,
success: () => {
this.onGetSysConfig();
}
})
}
})
return;
}
let wifi = sysConfigList.find(item=>item.configKey === 'wechat.wifi')
if(wifi){
let w = wifi.configValue.split(';')
this.wifiData.name=w[0];
this.wifiData.password = w[1];
}
let s = sysConfigList.find(item=>item.configKey === 'wechat.customer.service.phone')
if(s){
this.servicePhone= s.configValue
}
},
onCheckUserLogin() {
let tokenHeaders = uni.getStorageSync("tokenHeaders");
if (tokenHeaders) {
this.onGetUserInfo();
} else {
this.loginStatus = false;
uni.removeStorage({
key:'userInfo'
})
this.userInfo = {}
}
},
onGetUserInfo() {
getUserInfo().then(res => {
if(res.data.code == 200){
this.userInfo = res.data.data;
this.userName = this.userInfo.phone.slice(-4);
uni.setStorageSync('userInfo',this.userInfo)
this.userAction = this.userAction.map(item=>{
let show = item.show;
if(item.type == '3' && this.userInfo.isCleaner){
show = true
}
if(item.type == '4' && this.userInfo.isAdmin && !this.userInfo.isCleaner){
show = true
}
return {
...item,
show
}
})
this.loginStatus = true;
}
})
},
onNavToLogin() {
this.$refs.loginPop.open();
},
onNavToMyCoupon(){
uni.navigateTo({
url:"/pages/couponList/index"
})
},
onActionNav(val,k){
if(val.routePath){
if(k===0){
uni.switchTab({
url:val.routePath
})
}else{
uni.navigateTo({
url:val.routePath
})
}
}
},
onNavToSetUserInfo(){
if(this.loginStatus==true){
uni.navigateTo({
url:"/pages/setUserInfo/index"
})
}
},
onHandle(val){
if(val ==1){
uni.makePhoneCall({
phoneNumber:this.servicePhone
})
}else if(val == 2){
if(this.wifiData.name && this.wifiData.password){
this.$refs.popup.open()
}else{
uni.showToast({
icon:"none",
title:"无法进行WIFI连接"
})
}
}else if(val === 3){
uni.navigateTo({
url:'/pages/storeList/storeList'
})
} else if(val === 4){
uni.navigateTo({
url:'/pages/useCouponIllustrate/useCouponIllustrate?keyData=call_us_images'
})
}else if(val === 5){
uni.navigateTo({
url:'/pages/deviceManage/index'
})
}else if(val === 6){
let num = this.userInfo.numberplate || '';
uni.navigateTo({
url:'/setting/license-plate-number/list?number='+num
})
}
},
onClose(){
this.$refs.popup.close()
},
onCopy(){
uni.setClipboardData({
data:this.wifiData.password
})
},
onConnectWifi(){
uni.startWifi({
success:()=>{
uni.connectWifi({
SSID:this.wifiData.name,
BSSID:this.wifiData.name,
password:this.wifiData.password,
success: () => {
uni.showToast({
icon:"none",
title:'连接成功'
})
},
fail: (err) => {
uni.showToast({
icon:'none',
title:"WIFI连接失败"
})
},
complete: (res) => {
console.log(res,909090)
}
})
}
})
},
onProview(){
uni.previewImage({
current:0,
urls: [this.userInfo.avatar]
})
},
// 退出登录，解除手机号与当前微信的绑定
onLoginOut(){
uni.showLoading({
title:"加载中"
})
loginOut().then(res=>{
console.log(res)
if(res.data.code == 200){
uni.showToast({
icon:"none",
title:"用户已退出登录"
})
this.loginStatus = false;
uni.clearStorage();
}
})
}
}
}
</script>
<style>
page {
/* background-color: #ffffff; */
}
</style>
<style lang="scss" scoped>
.myInfo {
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
min-height: 100vh;
overflow-x: hidden;
.header {
display: flex;
flex-direction: column;
width: 100%;
min-height: 360upx;
background: linear-gradient(90deg,rgba(228, 5, 131, 0.2) 20%,rgba(255,255,255,0.9));
.header-content-box {
display: flex;
flex: 1;
.login-content {
display: flex;
flex-direction: column;
width: 100%;
margin-top: 30upx;
>.flex-row {
position: relative;
align-items: center;
.cu-avatar{
position: relative;
background-color: transparent;
width: 80px;
height: 80px;
.avatar-bg{
width: 100%;
height: 100%;
}
.avatar-box{
position: absolute;
width: 80%;
height: 80%;
overflow: hidden;
z-index: 99;
}
}
.nav-right{
display: flex;
flex-direction: row;
align-items: center;
position: absolute;
right: 5vw;
// margin-top: 20upx;
.img{
width: 14px;
height: 16px;
margin-right: 6upx;
}
text{
font-size: 30upx;
}
}
}
.amount-coupon {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 3% 28upx;
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 106upx;
padding: 0 30upx;
.part-left{
text{
color: #512C19;
}
}
.flex-row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
.text-name{
color: #936E4C;
}
.text-white{
color: #E2177C;
margin-left: 20upx;
}
}
.line {
height: 90%;
border-left: 2upx solid #ffffff;
}
}
}
.none-login {
display: flex;
flex: 1;
flex-direction: row;
align-items: center;
width: 100%;
.cu-avatar{
width: 64px;
height: 64px;
border-radius: 50%;
background-color: #ffffff;
overflow: hidden;
.avatar-img{
width: 100%;
height: 100%;
}
}
.text-gray{
font-size: 40rpx;
color: #36122D;
font-weight: bold;
}
}
}
}
.content-box{
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
width: 100%;
border-radius: 28upx 28upx 0 0;
margin-top: -28upx;
background-color: #ffffff;
box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(81,6,49,0.3);
}
.user-action {
position: relative;
display: flex;
flex-direction: row;
width: 97%;
padding: 30upx 0;
z-index: 10;
.action-box{
width: 30%;
margin: 0 1.5%;
>.action-item {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 88rpx;
border-radius: 12rpx;
.flex-1{
display: flex;
align-items: center;
justify-content: center;
}
.img-box{
display: flex;
align-items: flex-end;
width: 52upx;
height: 100%;
image{
width: 100%;
max-height: 40upx;
}
}
}
}
}
.main {
width: 100%;
.content{
display: flex;
flex-direction: row;
align-items: center;
}
}
}
.login-out{
width: 94%;
margin-top: 40upx;
}
.avatar-img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.popup-content{
display: flex;
flex-direction: column;
width: 100vw;
min-height: 40vh;
background-color: #f1f1f1;
border-radius: 20upx 20upx 0 0;
.title-box{
padding: 30upx 20upx 0 20upx;
align-items: center;
.cuIcon-roundclose{
font-size: 68upx;
}
}
.flex-col{
display: flex;
flex: 1;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
.text{
width: 60%;
margin: 10upx 0;
}
}
.box-btn{
display: flex;
flex-direction: row;
padding: 30upx 0;
justify-content: center;
align-items: center;
margin-bottom: 10%;
.cu-btn{
margin: 0 5%;
}
}
}
.numberplate{
position: absolute;
right: 8upx;
top: 0;
height: 100%;
display: flex;
align-items: center;
}
</style>
\ No newline at end of file
pages/vipCreate/vipCreate.vue
......@@ -41,6 +41,9 @@
<view v-for="(item,k) in rechargeConfList" :key="k" class="flex-col item"
@tap="onRechargeChange(k)">
<image class="amount-bg" :src="assetsPath+'/vip/amount_bg.png'" mode="widthFix"></image>
<view class="absolute absolute-1">
<text>特惠充值</text>
</view>
<view class="flex-col item-content" :class="rechargeIndex === k?'active':''">
<view v-if="item.giveType.includes('1')" class="preferential">
<text>送{{item.giveAmount}}小时</text>
......@@ -85,8 +88,8 @@
<view class="flex-3">
<view class="flex-row">
<text class="text-1">￥</text>
<text class="text-2">99.</text>
<text class="text-3">00</text>
<text class="text-2">{{equityAmountList[0]}}.</text>
<text class="text-3">{{equityAmountList[1]}}</text>
</view>
<view class="cu-btn-box" @tap="onSubmit">
<button class="cu-btn"
......@@ -100,8 +103,7 @@
<checkbox class='round yellow' :class="checked?'checked':''" :checked="checked"
value="checked" style="transform: scale(0.6);"></checkbox>
</checkbox-group>
<text>我已阅读</text><text class="text-pink" @tap="onNavToRule2">用户充值协议</text><text>,
并同意协议内容</text>
<text>我已阅读</text><text class="text-pink" @tap="onNavToRule2">用户充值协议</text><text>,并同意协议内容</text>
</view>
</view>
</view>
......@@ -147,7 +149,7 @@
</view>
</view>
<view class="look-prefer-nav">
<view class="look-prefer-nav" @tap="onNavToRule3">
<text class="text-title">点击可查看权益详情</text>
<image class="img" :src="assetsPath+'/vip/icon_right.png'" mode="widthFix"></image>
</view>
......@@ -170,6 +172,7 @@
</template>
<script>
import moment from "@/common/moment.js";
import fTabbar from '@/components/module/f-tabbar/f-tabbar';
import {
equityMembersList,
......@@ -200,6 +203,7 @@
rechargeIndex: 0,
index: 0,
consumerMemberStatus: false,
equityAmountList:[],
preferList: [{
iconUrl: config.assetsPath + "/vip/p_1.png",
title: "会员价",
......@@ -287,6 +291,8 @@
console.log(res, 999999)
if (res.data.code == 200 && res.data.rows) {
this.list = res.data.rows
this.equityAmountList = Number(this.list[0].requiredAmount).toFixed(2).toString().split('.');
console.log(this.equityAmountList,9999)
}
this.onGetUserInfo();
})
......@@ -310,6 +316,7 @@
this.checked = false;
},
onSubmit() {
if(this.consumerMemberStatus) return;
if (!this.checked) {
uni.showToast({
icon: "none",
......@@ -369,6 +376,11 @@
url: "/setting/rule/rule?keyData=user_pay_protocol"
})
},
onNavToRule3(){
uni.navigateTo({
url: "/setting/rule/rule?keyData=user_equity_details"
})
},
onNavToRecharge() {
if (!this.checked) {
uni.showToast({
......@@ -557,13 +569,29 @@
}
.list-box {
position: relative;
display: flex;
flex: 1;
width: 100%;
padding: 0 1%;
justify-content: center;
align-items: center;
.absolute-1{
display: flex;
justify-content: center;
align-items: center;
top: -14upx;
left: -8upx;
width: 96rpx;
height: 28rpx;
background: linear-gradient(90deg, #FF7800, #FF0000);
border-radius: 6rpx;
z-index: 8;
text{
font-size: 18rpx;
color: #FFFFFF;
}
}
.item {
position: relative;
display: flex;
......
static/tab-bar-img/vip.png
static/tab-bar-img/vip.png

5.97 KB | W: | H:

static/tab-bar-img/vip.png

7.61 KB | W: | H:

static/tab-bar-img/vip.png
static/tab-bar-img/vip.png
static/tab-bar-img/vip.png
static/tab-bar-img/vip.png
  • 2-up
  • Swipe
  • Onion skin
static/tab-bar-img/vip_selected.png
static/tab-bar-img/vip_selected.png

8.87 KB | W: | H:

static/tab-bar-img/vip_selected.png

11.5 KB | W: | H:

static/tab-bar-img/vip_selected.png
static/tab-bar-img/vip_selected.png
static/tab-bar-img/vip_selected.png
static/tab-bar-img/vip_selected.png
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment