719 lines
21 KiB
Vue
719 lines
21 KiB
Vue
<!-- 菜单悬浮的原理: 通过给菜单添加position:sticky实现, 用法超简单, 仅APP端的低端机不兼容 https://caniuse.com/#feat=css-sticky -->
|
||
<template>
|
||
<view>
|
||
<!-- 对于mescroll-body: 需设置:sticky="true", 此应避免在mescroll-body标签前面加其他非定位的元素, 否则下拉区域会被挤出, 无法会隐藏.-->
|
||
<!-- 对于mescroll-uni: 则无需设置:sticky="true", 无其他限制和要求 -->
|
||
|
||
<!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
|
||
<view class="sticky-tabs">
|
||
<view class=" u-flex padding bg">
|
||
<view class="u-m-r-10">
|
||
<image :src="avatar" style="width: 100rpx;height: 100rpx;border-radius: 100rpx;"
|
||
@click="goNav('/pages/my/userinfo')"></image>
|
||
</view>
|
||
<view class="u-flex-1 u-m-l-10 " v-if="isLogin && userName">
|
||
<view class="u-font-18 text-bold">
|
||
<view class="flex align-center">
|
||
<view class="margin-left-sm " style="color: #ffffff;">{{ userName }}</view>
|
||
<view class="labe" @tap="stateSave">
|
||
<text :style="{ background: !isTrue ? '#FF0000' : '#20C675' }"></text>
|
||
<view v-if="isTrue">已上线</view>
|
||
<view v-if="!isTrue">已离线</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex margin-left-sm margin-top-xs"
|
||
style="font-size: 22rpx;font-weight: 500;color: #ffffff;">
|
||
<view v-if="renzheng == 0" @click.stop="goNav('/my/renzheng/index?classify=' + 1)">
|
||
暂未实名认证
|
||
</view>
|
||
<view v-if="renzheng == 1" @click.stop="goNav('/my/renzheng/index?classify=' + 1)">
|
||
实名审核中
|
||
</view>
|
||
<view v-if="renzheng == 2">
|
||
已实名认证
|
||
</view>
|
||
<view v-if="renzheng == 3" @click.stop="goNav('/my/renzheng/index?classify=' + 1)">
|
||
实名已拒绝
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view v-else class="text-xl u-p-l-20 text-bold" @click="goLogin('/pages/public/login')"
|
||
style="color: #ffffff;">
|
||
登录
|
||
</view>
|
||
</view>
|
||
<!-- <view class="flex align-center padding-left bg">
|
||
<image src="../../static/images/data.png" style="width: 26upx;height: 26upx;"></image>
|
||
<view class="margin-left-xs flex align-center" style="color: #999999;">
|
||
<view @click="bindData(1)">{{startTime?startTime:'开始时间'}}</view>
|
||
至
|
||
<view @click="bindData(2)">{{endTime?endTime:'结束时间'}}</view>
|
||
</view>
|
||
</view> -->
|
||
<!-- <me-tabs v-model="tabIndex" nameKey='title' :tabs="tabs" @change="tabChange"></me-tabs> -->
|
||
<u-tabs :list="tabs" :is-scroll="true" :current="tabIndex" @change="tabChange" active-color="#000000"
|
||
inactive-color="#999999" :customStyle="{ 'background-color': '#050505' }" isShowImg textClass="">
|
||
</u-tabs>
|
||
</view>
|
||
|
||
<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
|
||
style="padding: 0 16px;background-color: #f7f7f7;">
|
||
<!-- 数据列表 -->
|
||
<!-- <view v-if="goods.length > 0" class="margin-sm padding-sm bg radius" v-for="(item,index) in goods"
|
||
:key='index' @click="clickItem(item)"> -->
|
||
<view class="bgwhite radius margin-bottom-sm padding-bottom-sm " v-for="(item, index) in goods" :key='index'
|
||
@click="goNav('/my/order/pay?ordersId=' + item.ordersId)">
|
||
<view class="flex justify-between padding-sm">
|
||
|
||
<view class="text-green" v-if="item.status == 1">待付款...</view>
|
||
<view class="text-green" v-if="item.status == 2">待服务</view>
|
||
<view class="text-green" v-if="item.status == 5">已完成</view>
|
||
<view class="text-green" v-if="item.status == 6">服务中</view>
|
||
<view class="text-green" v-if="item.status == 7">已出发</view>
|
||
<view class="text-green" v-if="item.status == 8">已到达</view>
|
||
<view class="text-green" v-if="item.status == 3">待评价</view>
|
||
<view class="text-green" v-if="item.status == 4" style="color: #999999;">已取消</view>
|
||
<view v-if="item.overTimeOrders == 1" style="color: red;font-size: 26rpx">(订单已超时)</view>
|
||
<!-- <view class="text-green" v-if="item.state ==1 ||item.state ==2">待完成</view>
|
||
|
||
<view class="text-green" v-if="item.state ==3||item.state ==4">已完成</view> -->
|
||
|
||
<view class="text-green">预约时间：{{ item.serveTime }}</view>
|
||
</view>
|
||
<view class="xian"></view>
|
||
<view class=" u-flex u-p-t-30 padding-sm">
|
||
<view class="u-m-r-10">
|
||
<u-avatar :src="item.massageImg ? item.massageImg : '../../static/logo.png'" mode="square"
|
||
size="100">
|
||
</u-avatar>
|
||
</view>
|
||
<view class="u-flex-1 margin-left-xs">
|
||
<view class="u-font-18 text-bold u-line-1" style="width: 560rpx;">
|
||
<view class="margin-right-xs text-df margin-left-xs"
|
||
style="margin-top: 0rpx;display: inline-block;width: 400rpx; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
|
||
{{ item.title }}
|
||
</view>
|
||
</view>
|
||
<view class="margin-left-xs text-cut" style="width:550upx">{{ item.address }}</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="flex u-p-t-20 justify-between align-center padding-sm">
|
||
<view class=" flex-sub ">
|
||
实收：<text class="text-df">￥</text><text class="text-xl text-bold">{{ item.sumArtificerMoney
|
||
}}</text>
|
||
</view>
|
||
<view class="flex text-right">
|
||
<!-- <u-button v-if="item.status == 1" :custom-style="customStyle" shape="circle" :plain="true"
|
||
@click="cancelOrder(item)">取消订单</u-button> -->
|
||
<!-- <u-button v-if="item.status == 1" :custom-style="customStyle1" shape="circle" :plain="true"
|
||
@click="bindphone(item.phone)">联系TA</u-button> -->
|
||
|
||
<u-button v-if="item.state == 1" :custom-style="customStyle1" shape="circle" :plain="true"
|
||
@click="goNav('/my/order/pay?id=' + item.ordersId + '&isTrue=1')">查看详情</u-button>
|
||
<u-button v-if="item.status == 6" :custom-style="customStyle" shape="circle" :plain="true"
|
||
@click="cancel(item)">服务完成</u-button>
|
||
</view>
|
||
</view>
|
||
<view class="xian" v-if="item.status == 6"></view>
|
||
<view class="pintuan_syrs flex justify-between" v-if="item.status == 6">
|
||
<view style="font-size: 28rpx;font-family: PingFang SC;font-weight: bold;color: #096f4b;">服务倒计时
|
||
</view>
|
||
<u-count-down :timestamp="endOfServiceTimer" separator-color="#20C675" color="#20C675"
|
||
font-size="30" separator-size="30"></u-count-down>
|
||
<!-- <uni-countdown ref="countDownEl" :title="'剩余'" :showDay="false" :fontSize="'14'"
|
||
:hour="item.endTime.hour" :minute="item.endTime.minute" :second="item.endTime.second"
|
||
color="#20C675" /> -->
|
||
<!-- <uni-countdown :day="item.endTime.day" :hour="item.endTime.hour" :minute="item.endTime.minute"
|
||
:second="item.endTime.second">
|
||
</uni-countdown> -->
|
||
</view>
|
||
</view>
|
||
<empty v-if="goods.length == 0"></empty>
|
||
<!-- 开始时间 -->
|
||
<u-picker v-model="startshow" mode="time" :params="paramsStart" @confirm="startData"></u-picker>
|
||
<!-- 结束时间 -->
|
||
<u-picker v-model="endshow" mode="time" :params="paramsEnd" @confirm="endData"></u-picker>
|
||
</mescroll-body>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import MescrollMixin from "@/components/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
||
import mescrollBody from "@/components/mescroll-uni/components/mescroll-body/mescroll-body.vue";
|
||
import meTabs from "@/components/mescroll-uni/me-tabs/me-tabs.vue";
|
||
import empty from '@/components/empty.vue'
|
||
import * as websocketUtils from 'utils/websocketUtils.js';
|
||
|
||
export default {
|
||
mixins: [MescrollMixin], // 使用mixin
|
||
components: {
|
||
mescrollBody,
|
||
meTabs,
|
||
empty
|
||
},
|
||
data() {
|
||
return {
|
||
endOfServiceTimer: null,
|
||
goods: [], // 数据列表
|
||
num: 1,
|
||
game: [],
|
||
tabs: [{
|
||
//这四个都支持支持class,style,src,onClick,等html内容
|
||
//选中图片
|
||
activityImageProps: {
|
||
src: '../../static/images/order_01.png',
|
||
style: 'width: 26px;height: 26px;',
|
||
},
|
||
//未选中时的样式
|
||
noactivityImageProps: {
|
||
src: '../../static/images/order_011.png',
|
||
style: 'width: 26px;height: 26px;',
|
||
},
|
||
//选中时的文字
|
||
activityTitleTextProps: {
|
||
class: 'activityTitleTextProps',
|
||
},
|
||
//未选中时的文字
|
||
noactivityTitleTextProps: {
|
||
class: 'noactivityTitleTextProps',
|
||
},
|
||
name: '今日订单',
|
||
status: '1'
|
||
}, {
|
||
activityImageProps: {
|
||
src: '../../static/images/order_02.png',
|
||
style: 'width: 26px;height: 26px;',
|
||
},
|
||
noactivityImageProps: {
|
||
src: '../../static/images/order_022.png',
|
||
style: 'width: 26px;height: 26px;',
|
||
},
|
||
activityTitleTextProps: {
|
||
class: 'activityTitleTextProps',
|
||
},
|
||
noactivityTitleTextProps: {
|
||
class: 'noactivityTitleTextProps',
|
||
},
|
||
name: '待服务',
|
||
status: '2'
|
||
}, {
|
||
activityImageProps: {
|
||
src: '../../static/images/order_03.png',
|
||
style: 'width: 26px;height: 26px;',
|
||
},
|
||
noactivityImageProps: {
|
||
src: '../../static/images/order_033.png',
|
||
style: 'width: 26px;height: 26px;',
|
||
},
|
||
activityTitleTextProps: {
|
||
class: 'activityTitleTextProps',
|
||
},
|
||
noactivityTitleTextProps: {
|
||
class: 'noactivityTitleTextProps',
|
||
},
|
||
name: '已完成',
|
||
status: '3'
|
||
}, {
|
||
activityImageProps: {
|
||
src: '../../static/images/order_04.png',
|
||
style: 'width: 26px;height: 26px;',
|
||
},
|
||
noactivityImageProps: {
|
||
src: '../../static/images/order_044.png',
|
||
style: 'width: 26px;height: 26px;',
|
||
},
|
||
activityTitleTextProps: {
|
||
class: 'activityTitleTextProps',
|
||
},
|
||
noactivityTitleTextProps: {
|
||
class: 'noactivityTitleTextProps',
|
||
},
|
||
name: '历史订单',
|
||
status: '4'
|
||
}],
|
||
tabIndex: 0, // tab下标
|
||
isTrue: true,
|
||
page: 1,
|
||
limit: 10,
|
||
userId: 0,
|
||
status: 1,
|
||
nickName: '',
|
||
customStyle: {
|
||
color: '#999999',
|
||
border: '2rpx solid #999999',
|
||
// backgroundColor: '#1E1F31',
|
||
border: "8rpx",
|
||
width: '180rpx',
|
||
height: '54rpx',
|
||
margin: "0 0 0 20rpx"
|
||
},
|
||
customStyle1: {
|
||
color: '#096f4b',
|
||
border: '2rpx solid #096f4b',
|
||
border: "8rpx",
|
||
width: '180rpx',
|
||
height: '54rpx',
|
||
margin: "0 0 0 20rpx"
|
||
},
|
||
latitude: '',
|
||
longitude: '',
|
||
avatar: '../../static/logo.png',
|
||
isLogin: true,
|
||
userName: '',
|
||
renzheng: 0,
|
||
startshow: false,
|
||
endshow: false,
|
||
paramsStart: {
|
||
year: true,
|
||
month: true,
|
||
day: true,
|
||
hour: false,
|
||
minute: false,
|
||
second: false
|
||
},
|
||
paramsEnd: {
|
||
year: true,
|
||
month: true,
|
||
day: true,
|
||
hour: false,
|
||
minute: false,
|
||
second: false
|
||
},
|
||
startTime: '',
|
||
endTime: '',
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.$queue.showLoading("加载中...");
|
||
this.userId = uni.getStorageSync('userId')
|
||
this.nickName = uni.getStorageSync('nickName')
|
||
let that = this;
|
||
uni.getLocation({
|
||
type: 'wgs84',
|
||
success: function(res) {
|
||
console.log('当前位置的经度：' + res.longitude);
|
||
console.log('当前位置的纬度：' + res.latitude);
|
||
that.$queue.setData('longitude', res.longitude);
|
||
that.$queue.setData('latitude', res.latitude);
|
||
that.latitude = res.latitude
|
||
that.longitude = res.longitude
|
||
}
|
||
});
|
||
},
|
||
onShow() {
|
||
let that = this;
|
||
this.userId = uni.getStorageSync('userId')
|
||
if (this.userId) {
|
||
this.getArtificer()
|
||
this.isLogin = true
|
||
this.getUserInfo()
|
||
|
||
} else {
|
||
this.isLogin = false
|
||
this.userName = ''
|
||
this.browse = 0
|
||
this.fans = 0
|
||
this.follow = 0
|
||
this.visitor = 0
|
||
this.avatar = '../../static/logo.png'
|
||
}
|
||
setTimeout(d => {
|
||
this.mescroll.resetUpScroll()
|
||
}, 1000)
|
||
this.upCallback({
|
||
num: this.num
|
||
});
|
||
},
|
||
watch: {
|
||
isTrue(newValue) {
|
||
if (newValue) {
|
||
this.$queue.showToast('您已上线');
|
||
} else {
|
||
this.$queue.showToast('您已离线');
|
||
}
|
||
},
|
||
isLogin(newValue) {
|
||
if (!newValue) {
|
||
this.goods = [];
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
//获取理疗师的信息
|
||
getArtificer() {
|
||
this.$Request.getT("/app/artificer/selectArtificer").then(res => {
|
||
if (res.code == 0) {
|
||
if (res.data) {
|
||
if (res.data.status == 1) {
|
||
this.isTrue = true
|
||
} else if (res.data.status == 2) {
|
||
this.isTrue = false
|
||
}
|
||
} else {
|
||
this.isTrue = false
|
||
}
|
||
websocketUtils.changeGoLiveFn(this.isTrue);
|
||
uni.setStorageSync('artificerId', res.data?.artificerId)
|
||
}
|
||
});
|
||
},
|
||
stateSave() {
|
||
this.$Request.postT('/app/artificer/updateArtificer').then(res => {
|
||
if (res.code == 0) {
|
||
this.getArtificer();
|
||
} else {
|
||
this.$queue.showToast(res.msg);
|
||
}
|
||
});
|
||
},
|
||
// 拨打电话
|
||
bindphone(phone) {
|
||
let that = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '是否拨打电话',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
console.log('用户点击确定', phone);
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone //仅为示例
|
||
});
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
},
|
||
/*下拉刷新的回调 */
|
||
downCallback() {
|
||
// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
|
||
// loadSwiper();
|
||
// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
|
||
this.mescroll.resetUpScroll()
|
||
},
|
||
timeFormat(param) {
|
||
return param < 10 ? '0' + param : param;
|
||
},
|
||
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
|
||
upCallback(page) {
|
||
// debugger;
|
||
if (!this.isLogin) {
|
||
uni.hideLoading();
|
||
if (this.mescroll) this.mescroll.endSuccess(); // 隐藏加载状态栏
|
||
return;
|
||
}
|
||
// debugger;
|
||
|
||
let curTab = this.tabs[this.tabIndex].status
|
||
this.num = page.num;
|
||
let data = {
|
||
type: curTab,
|
||
page: page.num,
|
||
limit: page.size,
|
||
startTime: this.startTime,
|
||
endTime: this.endTime
|
||
}
|
||
this.$Request.get('/app/artificer/selectTodayOrder', data).then(res => {
|
||
uni.hideLoading();
|
||
this.mescroll.endBySize(res.data.list.length, res.data.totalCount)
|
||
if (page.num == 1) this.goods = []; //如果是第一页需手动制空列表
|
||
this.goods = [...this.goods, ...res.data.list]; //追加新数据
|
||
|
||
this.goods.forEach(ret => {
|
||
switch (ret.state) {
|
||
case '1':
|
||
ret.statusName = '今日订单'
|
||
break;
|
||
case '2':
|
||
ret.statusName = '待完成'
|
||
break;
|
||
case '3':
|
||
ret.statusName = '已完成'
|
||
break;
|
||
case '4':
|
||
ret.statusName = '历史订单'
|
||
break;
|
||
}
|
||
if (ret.status == 6 && ret.endTime) {
|
||
let afterTimeStamp = new Date(ret.endTime).getTime() / 1000;
|
||
let currentTimeStamp = new Date().getTime() / 1000;
|
||
let formatTimeStamp = Math.floor(afterTimeStamp - currentTimeStamp);
|
||
this.endOfServiceTimer = formatTimeStamp;
|
||
}
|
||
if (this.$refs.countDownEl) this.$refs.countDownEl.update();
|
||
})
|
||
this.mescroll.endSuccess(res.data.list.length); // 隐藏加载状态栏
|
||
|
||
}).catch(() => {
|
||
//联网失败, 结束加载
|
||
this.mescroll.endErr();
|
||
});
|
||
},
|
||
// 切换菜单
|
||
tabChange(index) {
|
||
this.tabIndex = index
|
||
this.goods = []; // 置空列表,显示加载进度条
|
||
this.mescroll.resetUpScroll()
|
||
},
|
||
// 取消订单
|
||
cancelOrder(e) {
|
||
let that = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确认取消订单吗？取消订单将会被扣除信用分！',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
let data = {
|
||
ordersId: e.ordersId,
|
||
}
|
||
that.$queue.showLoading('提交中...')
|
||
that.$Request.post('/app/artificer/deleteOrders', data).then(res => {
|
||
uni.hideLoading();
|
||
if (res.code == 0) {
|
||
that.mescroll.resetUpScroll()
|
||
} else {
|
||
that.$queue.showToast(res.msg);
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 完成订单
|
||
cancel(e) {
|
||
let that = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '如果服务未完成点击完成订单会遭到平台违规处理，请确认服务是否完毕?',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
let data = {
|
||
ordersId: e.ordersId,
|
||
accomplishLongitude: that.longitude,
|
||
accomplishLatitude: that.latitude
|
||
}
|
||
that.$queue.showLoading('提交中...')
|
||
that.$Request.post('/app/artificer/accomplishOrders', data).then(res => {
|
||
uni.hideLoading();
|
||
if (res.code == 0) {
|
||
that.mescroll.resetUpScroll()
|
||
websocketUtils.uploadAudioEnd(); //关闭音频上传
|
||
} else {
|
||
that.$queue.showToast(res.msg);
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//时间弹框开关
|
||
bindData(index) {
|
||
console.log(index, 1111)
|
||
if (index == 1) {
|
||
this.startshow = true
|
||
} else if (index == 2) {
|
||
this.endshow = true
|
||
|
||
}
|
||
},
|
||
//开始时间
|
||
startData(e) {
|
||
// console.log(e)
|
||
this.startTime = e.year + ' ' + e.month + '-' + e.day
|
||
},
|
||
// 结束时间
|
||
endData(e) {
|
||
this.endTime = e.year + ' ' + e.month + '-' + e.day
|
||
// console.log(this.endTime)
|
||
this.mescroll.resetUpScroll()
|
||
},
|
||
goNav(e, name) {
|
||
console.log(e)
|
||
if (this.userId) {
|
||
uni.navigateTo({
|
||
url: e
|
||
})
|
||
} else {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您还未登录,请先登录',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
console.log('用户点击确定');
|
||
uni.navigateTo({
|
||
url: '/pages/public/login'
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
getUserInfo() {
|
||
this.$Request.get("/app/user/selectUserById").then(res => {
|
||
if (res.code == 0) {
|
||
this.userName = res.data.userName
|
||
this.invitationCode = res.data.invitationCode
|
||
this.avatar = res.data.avatar ? res.data.avatar : '../../static/logo.png'
|
||
this.isAuthentication = res.data.isAuthentication
|
||
|
||
// uni.setStorageSync('isAuthentication', res.data.isAuthentication)
|
||
|
||
uni.setStorageSync('avatar', res.data.avatar)
|
||
uni.setStorageSync('invitationCode', res.data.invitationCode)
|
||
uni.setStorageSync('zhiFuBao', res.data.zhiFuBao)
|
||
uni.setStorageSync('zhiFuBaoName', res.data.zhiFuBaoName)
|
||
|
||
if (res.data.isAuthentication == 0 || res.data.isAuthentication == null) {
|
||
this.renzheng = 0
|
||
uni.setStorageSync("renzheng", this.renzheng)
|
||
} else if (res.data.isAuthentication == 1) {
|
||
this.renzheng = 1
|
||
uni.setStorageSync("renzheng", this.renzheng)
|
||
} else if (res.data.isAuthentication == 2) {
|
||
this.renzheng = 2
|
||
uni.setStorageSync("renzheng", this.renzheng)
|
||
} else if (res.data.isAuthentication == 3) {
|
||
this.renzheng = 3
|
||
uni.setStorageSync("renzheng", this.renzheng)
|
||
} else if (res.data.isAuthentication == 4) {
|
||
this.renzheng = 4
|
||
uni.setStorageSync("renzheng", this.renzheng)
|
||
} else if (res.data.isAuthentication == 5) {
|
||
this.renzheng = 5
|
||
uni.setStorageSync("renzheng", this.renzheng)
|
||
} else if (res.data.isAuthentication == 6) {
|
||
this.renzheng = 6
|
||
uni.setStorageSync("renzheng", this.renzheng)
|
||
}
|
||
|
||
}
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/*
|
||
sticky生效条件：
|
||
1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
|
||
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
|
||
3、父元素的高度不能低于sticky元素的高度
|
||
4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
|
||
*/
|
||
|
||
|
||
.u-tabs {
|
||
background: #f7f7f7 !important;
|
||
border-radius: 10px 10px 0 0;
|
||
margin-top: -20px;
|
||
padding: 16px;
|
||
}
|
||
|
||
/deep/.u-scroll-view {
|
||
background-color: #ffffff !important;
|
||
padding: 10px 16px !important;
|
||
border-radius: 10px !important;
|
||
}
|
||
|
||
/deep/.u-tab-item {
|
||
height: auto !important;
|
||
line-height: normal !important;
|
||
width: 25% !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
/deep/.u-tab-bar {
|
||
display: none !important;
|
||
}
|
||
|
||
.sticky-tabs {
|
||
z-index: 990;
|
||
position: sticky;
|
||
top: var(--window-top);
|
||
// background-color: #fff;
|
||
}
|
||
|
||
/deep/.activityTitleTextProps {
|
||
color: #096f4b;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/deep/.noactivityTitleTextProps {
|
||
color: #666666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
// 使用mescroll-uni,则top为0
|
||
.mescroll-uni,
|
||
/deep/.mescroll-uni {
|
||
.sticky-tabs {
|
||
top: 300upx;
|
||
}
|
||
}
|
||
|
||
.demo-tip {
|
||
padding: 18upx;
|
||
font-size: 24upx;
|
||
text-align: center;
|
||
}
|
||
|
||
/deep/.page-box {
|
||
background-color: #F7F7F7 !important;
|
||
}
|
||
|
||
.bg {
|
||
background-image: linear-gradient(to right, #223845, #00a85b);
|
||
padding: 16px 16px 36px 16px;
|
||
}
|
||
|
||
.bgwhite {
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.xian {
|
||
width: 100%;
|
||
height: 1rpx;
|
||
border: 1rpx solid #f8f8f8;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.pintuan_syrs {
|
||
color: #999999;
|
||
font-size: 20upx;
|
||
margin: 20rpx 20rpx 0rpx;
|
||
display: flex;
|
||
padding-right: 18upx;
|
||
}
|
||
|
||
.labe {
|
||
background: #DCF4DC;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
border-radius: 39rpx;
|
||
color: #1A1B1B;
|
||
font-size: 22rpx;
|
||
font-weight: 400;
|
||
width: 110rpx;
|
||
height: 36rpx;
|
||
justify-content: center;
|
||
margin-left: 20rpx;
|
||
|
||
text {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
background: #20C675;
|
||
border-radius: 50%;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
</style> |