Skip to content

G
gxpt_wechat
Commit 2eb426bb by zhangzhen
Options

细节完善

parent 033925a8
Showing with 256 additions and 225 deletions
components/login/login.vue
......@@ -10,7 +10,8 @@
</view>
<view class="phone-box btn-box">
<button class="cu-btn round bg-pink block" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">授权手机号</button>
<button class="cu-btn bg-gray block" @tap="onCancle">拒绝</button>
<button class="cu-btn bg-pink block" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">授权</button>
</view>
</view>
</view>
......@@ -34,6 +35,9 @@
open(){
this.$refs.popupPhone.open()
},
onCancle(){
this.$refs.popupPhone.close()
},
onGetPhoneNumber(e){
this.phoneCode = e.detail.code;
wx.login({
......@@ -70,15 +74,12 @@
display: flex;
flex-direction: column;
width: 100%;
min-height: 600upx;
.content-box{
display: flex;
flex-direction: column;
width: 90%;
background-color: #ffffff;
border: 1px solid #B70469;
border-radius: 20upx;
margin: 0 auto 40upx;
width: 100%;
background-color: #f1f1f1;
border-radius: 20upx 20upx 0 0;
.title{
display: flex;
justify-content: center;
......@@ -91,16 +92,25 @@
justify-content: center;
align-items: center;
padding: 30upx;
min-height: 300upx;
min-height: 240upx;
}
.phone-box{
display: flex;
justify-content: center;
align-items: center;
padding: 30upx 0;
padding: 20upx 0 40upx;
.cu-btn{
width: 70%;
width: 200upx;
margin: 0 30upx;
border-radius: 12upx;
}
.bg-gray{
background-color: #ffffff;
color: #B70469;
}
.bg-pink{
background-color: #B70469;
color: #ffffff;
}
}
}
......
components/module/f-tabbar/f-tabbar.vue
<template>
<view>
<view :class="[isFixed?'f-fixed':'']">
<!-- 二次封装tabbar -->
<u-tabbar
:value="tabIndex"
@change="onTabbar"
:fixed="false"
:placeholder="false"
:safeAreaInsetBottom="safeAreaInsetBottom"
:activeColor="activeColor"
:inactiveColor="inactiveColor"
:border="border"
>
<block v-for="(item,index) in list" :key="index">
<!-- 自定义icon -->
<u-tabbar-item :text="item.name" :badge="item.badge" :dot="item.dot" :badgeStyle="item.badgeStyle">
<template v-if="index === 2">
<view slot="inactive-icon">
<view class="scan-code-icon">
<image src="../../../static/scan_code_icon.png" mode="widthFix"></image>
</view>
</view>
</template>
<template v-else>
<view>
<view :class="[isFixed?'f-fixed':'']">
<!-- 二次封装tabbar -->
<u-tabbar :value="tabIndex" @change="onTabbar" :fixed="false" :placeholder="false"
:safeAreaInsetBottom="safeAreaInsetBottom" :activeColor="activeColor" :inactiveColor="inactiveColor"
:border="border">
<block v-for="(item,index) in list" :key="index">
<!-- 自定义icon -->
<u-tabbar-item :text="item.name" :badge="item.badge" :dot="item.dot" :badgeStyle="item.badgeStyle">
<template>
<view slot="active-icon">
<image class="icon" :src="hostUrl+item.iconFill"></image>
<image class="icon" :src="item.iconFill"></image>
</view>
<view slot="inactive-icon">
<image class="icon" :src="hostUrl+item.icon"></image>
<image class="icon" :src="item.icon"></image>
</view>
</template>
</u-tabbar-item>
</block>
</u-tabbar>
<!-- 苹果安全距离-默认20px -->
<view :style="{paddingBottom:systemInfo.tabbarPaddingB+'px',background:'#fff'}"></view>
</view>
<!-- 防止塌陷高度 -->
<view v-if="isFixed && isFillHeight" :style="{height:systemInfo.tabbarH+'px'}"></view>
</u-tabbar-item>
</block>
</u-tabbar>
<!-- 苹果安全距离-默认20px -->
<view :style="{paddingBottom:systemInfo.tabbarPaddingB+'px',background:'#fff'}"></view>
</view>
<!-- 防止塌陷高度 -->
<view v-if="isFixed && isFillHeight" :style="{height:systemInfo.tabbarH+'px'}"></view>
<!-- #ifdef H5 -->
<u-safe-bottom></u-safe-bottom>
<!-- #endif -->
</view>
</view>
</template>
<script>
import indexConfig from "@/config/index.config.js";
import {getTabbarHeight} from "@/utils/tools.js";
import {wxScanCode} from "@/utils/tools.js";
import indexConfig from "@/config/index.config.js";
import {
getTabbarHeight
} from "@/utils/tools.js";
import {
wxScanCode
} from "@/utils/tools.js";
export default {
name: 'f-tabbar',
props:{
// 是否固定在底部
isFixed:{
type:Boolean,
default:true,
},
// 是否设置防止塌陷高度
isFillHeight:{
type:Boolean,
default:true,
},
// 选中的颜色
activeColor:{
type:String,
default:'#0C7DFF',
},
// 未选中颜色
inactiveColor:{
type:String,
default:'#666666',
},
// 是否显示边框色
border:{
type:Boolean,
default: function() {
return true;
}
},
// 右上角的角标提示信息
badge: {
type: [String, Number, null],
default: uni.$u.props.tabbarItem.badge
},
// 是否显示圆点，将会覆盖badge参数
dot: {
type: Boolean,
default: uni.$u.props.tabbarItem.dot
},
// 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
badgeStyle: {
type: [Object, String],
default: uni.$u.props.tabbarItem.badgeStyle
}
},
data(){
return {
safeAreaInsetBottom:false,
systemInfo:{
tabbarH:getTabbarHeight().tabbarH,
tabbarPaddingB:getTabbarHeight().tabbarPaddingB,
export default {
name: 'f-tabbar',
props: {
// 是否固定在底部
isFixed: {
type: Boolean,
default: true,
},
// 是否设置防止塌陷高度
isFillHeight: {
type: Boolean,
default: true,
},
// 选中的颜色
activeColor: {
type: String,
default: '#E40583',
},
// 未选中颜色
inactiveColor: {
type: String,
default: '#666666',
},
// 是否显示边框色
border: {
type: Boolean,
default: function() {
return true;
}
},
// 右上角的角标提示信息
badge: {
type: [String, Number, null],
default: uni.$u.props.tabbarItem.badge
},
hostUrl:indexConfig.hostUrl,
tabIndex:0,
path:'', //当前路径
list:[
{
name: '首页',
url: 'pages/index/index',
icon: '/static/tab-icon/home.png',
iconFill: '/static/tab-icon/home-filling.png'
},
{
name: '订单',
url: 'pages/siteNav/index',
icon: '/static/tab-icon/site.png',
iconFill: '/static/tab-icon/site-filling.png'
// 是否显示圆点，将会覆盖badge参数
dot: {
type: Boolean,
default: uni.$u.props.tabbarItem.dot
},
{
name: '我的',
url: 'pages/my/myInfo',
icon: '/static/tab-icon/user.png',
iconFill: '/static/tab-icon/user-filling.png'
// dot: true
}]
}
},
created() {
//获取页面路径
let currentPages = getCurrentPages();
let page = currentPages[currentPages.length - 1];
this.path = page.route;
//获取页面路径
this.list.forEach((item,index)=>{
if(item.url && this.path == item.url){
this.tabIndex = index
}
})
// #ifdef H5
this.safeAreaInsetBottom = true
// #endif
},
methods:{
onTabbar(index){
if(index === 2){
wxScanCode()
}else if (this.path !== this.list[index].url) {
uni.switchTab({
url: '/' + this.list[index].url
});
}
}
}
}
// 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
badgeStyle: {
type: [Object, String],
default: uni.$u.props.tabbarItem.badgeStyle
}
},
data() {
return {
safeAreaInsetBottom: false,
systemInfo: {
tabbarH: getTabbarHeight().tabbarH,
tabbarPaddingB: getTabbarHeight().tabbarPaddingB,
},
hostUrl: indexConfig.hostUrl,
tabIndex: 0,
path: '', //当前路径
list: [{
name: '首页',
url: 'pages/index/index',
icon: '/static/tab-bar-img/home.png',
iconFill: '/static/tab-bar-img/home_selected.png'
},
{
name: '订单',
url: 'pages/orderRecord/orderRecord',
icon: '/static/tab-bar-img/order.png',
iconFill: '/static/tab-bar-img/order_selected.png'
},
{
name: '我的',
url: 'pages/my/myInfo',
icon: '/static/tab-bar-img/user.png',
iconFill: '/static/tab-bar-img/user_selected.png'
// dot: true
}
]
}
},
created() {
//获取页面路径
let currentPages = getCurrentPages();
let page = currentPages[currentPages.length - 1];
this.path = page.route;
//获取页面路径
this.list.forEach((item, index) => {
if (item.url && this.path == item.url) {
this.tabIndex = index
}
})
// #ifdef H5
this.safeAreaInsetBottom = true
// #endif
},
methods: {
onTabbar(index) {
if (this.path !== this.list[index].url) {
uni.switchTab({
url: '/' + this.list[index].url
});
}
}
}
}
</script>
<style lang="scss" scoped>
.f-fixed{
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 90;
.icon{
display: block;
width: 28px;
height: 28px;
.f-fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 90;
.icon {
display: block;
width: 28px;
height: 28px;
}
}
}
.icon-large{
}
.scan-code-icon{
display: flex;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
transform: scale(2) translateY(-6px);
background: #007AFF;
border-radius: 50%;
box-shadow: 0 0 4px rgba($color: #007AFF, $alpha: 0.3);
image{
display: block;
width: 60%;
height: auto;
.icon-large {}
.scan-code-icon {
display: flex;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
transform: scale(2) translateY(-6px);
background: #007AFF;
border-radius: 50%;
box-shadow: 0 0 4px rgba($color: #007AFF, $alpha: 0.3);
image {
display: block;
width: 60%;
height: auto;
}
}
}
</style>
</style>
\ No newline at end of file
components/toolBox/toolBox.vue
......@@ -130,7 +130,7 @@
<style lang="scss" scoped>
.tool-box{
position: fixed;
bottom: 5vh;
bottom: 10vh;
right: 0;
z-index: 99;
.tool-item{
......
pages/cleanManage/cleanManage.vue
......@@ -41,7 +41,7 @@
</view>
<view class="room-box">
<view v-for="(val,k) in item.roolList" class="room-item" :class="val.status==3?'bg-blue':val.status==2?'bg-red':'bg-gray'">
<view v-for="(val,k) in item.roolList" class="room-item" :class="val.roomStatus===0?'bg-gray':val.roomStatus==1?'bg-yellow':val.roomStatus==2?'bg-yellow':val.roomStatus==3?'bg-pink':'bg-red'">
<view class="room-name">
<text>{{val.name}}</text>
......@@ -50,7 +50,7 @@
<text>{{val.roomName}}</text>
</view> -->
<view class="room-stauts margin-top">
<text>{{statusEnum[val.status]}}</text>
<text>{{statusEnum[val.roomStatus]}}</text>
</view>
</view>
</view>
......@@ -75,7 +75,8 @@
0:'空闲中',
1:'使用中',
2:'待保洁',
3:'保洁中'
3:'保洁中',
4:'维护中'
}
};
},
......@@ -87,7 +88,32 @@
getListStore().then(res=>{
console.log(res)
if(res.data.code ===200){
this.list =res.data.data&&res.data.data.length? res.data.data:[]
if(res.data.data&&res.data.data.length){
this.list =res.data.data.map(item=>{
return {
...item,
roolList:item.roolList.map(val=>{
let roomStatus = 0;
if(val.recordsStatus != null && val.recordsStatus ===0){
roomStatus = 2
}else if(val.recordsStatus != null && val.recordsStatus ===1){
roomStatus = 3
}else if(val.status != null && val.status ===0){
roomStatus = 0
}else if(val.status != null && val.status ===1){
roomStatus = 1
}else if(val.status != null && val.status ===3){
roomStatus = 4
}
return {
...val,
roomStatus
}
})
}
})
}
}
})
},
......@@ -200,7 +226,7 @@
display: flex;
flex-wrap: wrap;
width: 100%;
padding: 0 1%;
padding: 0 1% 20upx 1%;
.room-item{
display: flex;
flex-direction: column;
......
pages/index/index.vue
......@@ -15,7 +15,7 @@
<view class="flex-col content">
<view class="flex-row title-content ">
<text>凑角共享棋牌室</text>
<button class="cu-btn round bg-pink text-bold text-xl"
<button class="cu-btn round bg-pink text-xl"
@tap="onNavToChangeStore">切换门店</button>
</view>
<view class="flex-1 tips-content">
......@@ -94,7 +94,7 @@
</view>
</scroll-view>
<ToolBox v-model="show" />
<uni-popup ref="popup" type="center">
<uni-popup ref="popup" type="bottom">
<view class="flex-col location-box">
<view class="flex-col content-box">
<view class="title">
......@@ -105,16 +105,18 @@
</view>
</view>
<view class="flex-between btn-box">
<button class="cu-btn round bg-white block" @tap="onClose">关闭</button>
<button class="cu-btn round bg-pink block" @tap="onNavToSet">去设置</button>
<button class="cu-btn bg-white block" @tap="onClose">关闭</button>
<button class="cu-btn bg-pink block" @tap="onNavToSet">去设置</button>
</view>
</view>
</uni-popup>
<LoginPop ref="loginPop" />
<f-tabbar></f-tabbar>
</view>
</template>
<script>
import fTabbar from '@/components/module/f-tabbar/f-tabbar';
import fNavbar from '@/components/module/f-navbar/f-navbar';
import LoginPop from "@/components/login/login"
import {
......@@ -132,6 +134,7 @@
export default {
components: {
fTabbar,
fNavbar,
ToolBox,
LoginPop
......@@ -223,8 +226,11 @@
},
onLoad(option) {
// 隐藏原生的tabbar
uni.hideTabBar();
this.onCheckUserLogin();
this.onGetDicts()
// this.$refs.popup.open()
// this.$refs.loginPop.open()
},
methods: {
......@@ -438,6 +444,7 @@
flex-direction: column;
align-items: center;
width: 100%;
margin-bottom: 50px;
}
}
......@@ -491,7 +498,7 @@
text {
font-size: 40upx;
font-weight: 800;
font-weight: 600;
color: #3D3D3D;
line-height: 58upx;
margin-right: 30upx;
......@@ -696,7 +703,7 @@
.room-name {
text {
font-size: 34upx;
font-weight: 800;
font-weight: bold;
color: #3D3D3D;
}
}
......@@ -720,8 +727,7 @@
display: flex;
flex-direction: row;
align-items: center;
margin: 20upx;
margin: 20upx 10upx 20upx 20upx;
.item {
display: flex;
justify-content: center;
......@@ -730,11 +736,12 @@
padding: 0 8upx;
background: #FFFFFF;
border-radius: 11rpx 11rpx 11rpx 11rpx;
border: 2rpx solid #130F26;
margin: 0 10upx;
border: 2rpx solid #E40583;
margin: 0 5upx;
text {
font-size: 25upx;
color: #E40583;
}
}
}
......@@ -768,15 +775,12 @@
display: flex;
flex-direction: column;
width: 100%;
min-height: 600upx;
background-color: #f1f1f1;
.content-box{
display: flex;
flex-direction: column;
width: 90%;
background-color: #ffffff;
border: 1px solid #B70469;
border-radius: 20upx;
margin: 0 auto 40upx;
width: 100%;
border-radius: 20upx 20upx;
.title{
display: flex;
justify-content: center;
......@@ -795,10 +799,10 @@
.btn-box{
display: flex;
justify-content: space-between;
width: 84%;
margin: 0 auto;
width: 64%;
margin: 0 auto 40upx;
.cu-btn{
width: 40%;
width: 45%;
}
}
}
......
pages/my/myInfo.vue
......@@ -86,16 +86,19 @@
</button>
</view> -->
<LoginPop ref="loginPop" @success="onCheckUserLogin" />
<f-tabbar></f-tabbar>
</view>
</template>
<script>
import fTabbar from '@/components/module/f-tabbar/f-tabbar';
import {getUserInfo,loginOut} from "@/api/index.js"
import config from "@/config/index.config"
import LoginPop from "@/components/login/login"
export default {
components: {
fTabbar,
LoginPop
},
data() {
......@@ -140,7 +143,8 @@
this.onCheckUserLogin();
},
onLoad() {
// 隐藏原生的tabbar
uni.hideTabBar();
},
methods: {
onCheckUserLogin() {
......
pages/order/order.vue
......@@ -7,7 +7,7 @@
</view>
<view class="part-right">
<view class="flex-between part-1">
<text class="text-title text-xl text-bold">一帆风顺</text>
<text class="text-title text-xl text-bold">{{roomInfo.name||'一帆风顺'}}</text>
<view class="cu-tag line-blue radius sm">
空闲中
</view>
......@@ -516,7 +516,6 @@
}else{
startDateArr[1] = m
}
console.log(startDateArr,"1111")
this.endTime = startDateArr.map(num => num >= 10 ? num : `0${num}` ).join(':');
}else{
this.endTime = this.startTime.split(":").map((item, k) => {
......
pages/orderRecord/orderRecord.vue
......@@ -49,10 +49,12 @@
:loadmore-text="loadmoreText" :nomore-text="nomoreText" />
</view>
<NoLogin v-model="loginStatus" />
<f-tabbar></f-tabbar>
</view>
</template>
<script>
import fTabbar from '@/components/module/f-tabbar/f-tabbar';
import {
orderList
} from "@/api/order.js"
......@@ -63,6 +65,7 @@ import NoLogin from "@/components/noLogin/noLogin"
export default {
components:{
fTabbar,
NoLogin
},
data() {
......@@ -104,7 +107,8 @@ import NoLogin from "@/components/noLogin/noLogin"
};
},
onLoad() {
// 隐藏原生的tabbar
uni.hideTabBar();
},
onReachBottom() {
if (this.status == 'loadmore') {
......@@ -138,7 +142,6 @@ import NoLogin from "@/components/noLogin/noLogin"
this.status = 'loading'
this.queryParams.status = this.statusList[this.statusIndex].value;
orderList(this.queryParams).then(res => {
console.log(res)
uni.hideLoading()
if (res.data.code == 200) {
if(this.queryParams.pageNum ==1){
......@@ -157,7 +160,6 @@ import NoLogin from "@/components/noLogin/noLogin"
})
},
tabSelect(i) {
console.log(i, 99999)
this.statusIndex = i;
this.queryParams.pageNum = 1;
this.list = []
......
pages/orderResult/orderResult.vue
......@@ -127,14 +127,12 @@
};
},
onLoad(option) {
console.log(option,909090)
this.orderNo = option.orderNo;
this.onLoading();
},
methods:{
onLoading(){
getOrderInfoByNo(this.orderNo).then(res=>{
console.log(res,909090)
this.orderInfo = {
...res.data.data,
startDate: res.data.data.preStartDate.split(" ")[0],
......@@ -172,7 +170,7 @@
scale: 18,
name: this.orderInfo.address,
complete: (res) => {
console.log(res)
}
})
},
......
pages/setUserInfo/index.vue
......@@ -144,7 +144,6 @@
height: 90px;
border-radius: 50%;
position: relative;
overflow: hidden;
.avatar-img{
display: block;
width: 100%;
......
pages/storeList/storeList.vue
......@@ -2,7 +2,7 @@
<view class="room-list" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
<view class="header-top" :style="{height:CustomBar+50+'px', paddingTop:StatusBar+'px'}">
<view class="bar-title" :style="{height:CustomBar-StatusBar+'px'}">
<text class="text-lg text-white text-bold">选择门店</text>
<text class="text-xxl text-white text-bold">选择门店</text>
</view>
<view class="cu-bar search">
<view class="city-box">
......@@ -11,10 +11,10 @@
</view>
<view class="search-form round">
<text class="cuIcon-search"></text>
<input type="text" placeholder="请输入门店关键词" confirm-type="search"></input>
<input v-model="queryParams.name" type="text" placeholder="请输入门店关键词" confirm-type="search"></input>
</view>
<view class="action">
<button class="cu-btn bg-gradual-pink shadow-blur round">搜索</button>
<button class="cu-btn bg-white shadow-blur round" @tap='onLoading'>搜索</button>
</view>
</view>
</view>
......@@ -118,10 +118,10 @@
scale: 18,
name: val.address,
success: (res) => {
console.log(res)
},
complete: (res) => {
console.log(res, 909090)
}
})
},
......@@ -164,7 +164,7 @@
display: flex;
flex-direction: column;
width: 100%;
background:linear-gradient(to bottom,#ff55ff,#ffaaff);
background:linear-gradient(to bottom,#E40583,#ff007f);
z-index: 100;
.bar-title{
display: flex;
......
pages/useCoupon/index.vue
......@@ -91,9 +91,7 @@
},
methods: {
onLoading(d) {
console.log(d, 90909)
getUseCoupon(d).then(res => {
console.log(res.data.data, "优惠券")
if (res.statusCode == 200) {
if (res.data && res.data.data.length) {
this.list = res.data.data.sort((a, b) => b.subPrice - a.subPrice);
......
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