Skip to content

M
mallapp
Commit e435c02e authored by Mac's avatar Mac
Browse files
Options

司导日历

parent 8e2d5bff
Hide whitespace changes
Inline Side-by-side
Showing with 691 additions and 20 deletions
pages.json
View file @ e435c02e
......@@ -325,6 +325,8 @@
"path":"guidedetails"
},{
"path":"place_order"
},{
"path":"rili"
}]
},
{
......
pages/guidecar/components/njzz-calendar/njzz-calendar.vue 0 → 100755
View file @ e435c02e
<template>
<view class="calendar">
<view class="calenHead-tradition" v-if="mode=='2'">
<picker class="dateBox" mode="multiSelector" :range="pickerData.list" :value="pickerData.indexList" @change="bindPickerChange">
<text class="font-big">{{nowMonth.month}}月</text>
<text class="font-small">{{nowMonth.year}}年</text>
<uni-icons type="arrowdown" size="10"></uni-icons>
</picker>
<text class="reset" @tap="reset">重置</text>
</view>
<scroll-view class="calenHead" scroll-x v-if="mode=='1'">
<view class="headItem" v-for="(date,index) in monthList" v-bind:key="index" :class="[current==index?'active':'']" @tap="headItemTap(index)">
<text>{{date.getMonth()+1}}月</text>
</view>
</scroll-view>
<view class="weekBar">
<view class="weekItem" v-for="(item,index) in weekSort" v-bind:key="index">
{{item}}
</view>
</view>
<view class="dayBox">
<view class="day" v-for="(item,index) in space" :key="index"></view>
<view class="day" :class="[getDateStr(item.date)==getDateStr(dayActive.date)?'active':'']" v-for="(item,index) in dayList" v-bind:key="index" @tap="selectDate(item)">
<view :class="[isToday(item.date)?'today':'']">{{isToday(item.date) ? "今天" : item.date.getDate()}}</view>
<view class="calen-text-orange">{{item.price?item.price:''}}</view>
</view>
</view>
</view>
</template>
<script>
// import uniIcons from "../uni-icons/uni-icons.vue"
export default{
// components:{uniIcons},
name:"Zcalendar",
props:{
themeColor:{ //主题色 并没有用到 留给以后用吧
type:String,
default:"#ff625a"
},
datePrice:{
type:Array,
default:()=>[]
},
howManyMonth:{ //包含当月共显示几个月
type:String,
default:"6"
},
defaultSelect:{ //默认选择的日期
type:String,
default:""
},
mode:{
type:String,
default:"1" //1:固定月份列表 2:传统日历模式(自由选择日期)
}
},
data(){
return{
today:{},//今天日期
weekSort:["日","一","二","三","四","五","六"],
current:0, //当前选中的月份下标 团期模式
nowMonth:{},
dayActive:false, //选中的日期 {date:date,price:string} date需要自己格式化 method提供了 getDateStr(date)
monthList:[],//月份列表 明确的说是 存放的是date对象
space:0//周几占位个数 例如 周二占位2个
}
},
mounted() {
this.today = new Date();
this.nowMonth = {
year:this.today.getFullYear(),
month:(this.today.getMonth()+1<10)?"0"+(this.today.getMonth()+1) : this.today.getMonth()+1
}
this.setMonthList()
},
updated() {
if(this.defaultSelect != "" && !this.dayActive){
this.dayActive = this.getDefaultData(this.defaultSelect)
}
},
computed: {
monthDatePrice: function () {
//过滤出 每个月份的团期价格list 并且按照对象内的价格排序 以用来显示当前月份xxxx金额起,用于mode1
let map = {}
let _that = this;
this.monthList.forEach((date,i)=>{
let list = _that.datePrice.filter(item=>new Date(item.date).getFullYear()==date.getFullYear() && new Date(item.date).getMonth()==date.getMonth()).sort(function(a,b){
return a.price - b.price
})
map[i] = list
})
return map
},
dayList:function(){
let list = [];
let _that = this;
let date = this.mode == "1" ? this.monthList[this.current] : this.mode == "2"? new Date(this.nowMonth.year+"-"+this.nowMonth.month+"-01"): new Date();
if(this.monthList.length){
list = this.getEveryDay(date)
let num = list[0].date.getDay();
_that.space = num;
}
return list
},
pickerData:function(){
let now = new Date().getFullYear();
//可选择前/后多少年
let beforeYears = 0;
let afterYears = 10;
let list = []; //用来选择的数据
let indexList = []; //默认选中的下标list
let yearList = [];
let monthList = ["01","02","03","04","05","06","07","08","09","10","11","12"];
for(let i = now-beforeYears;i<=now+afterYears;i++){
yearList.push(i.toString())
}
list.push(yearList)
list.push(monthList)
indexList.push(yearList.indexOf(""+this.nowMonth.year)) //我也不知道为什么 .toString()报错
indexList.push(monthList.indexOf(""+this.nowMonth.month))
let map = {
indexList:indexList,
list:list
}
return map;
}
},
methods:{
headItemTap(index){
console.log(index)
this.current = index
},
getDefaultData(d){ //设置初始值
let list = this.datePrice.filter(item=>item.date==d);
let obj={};
if(list.length>0){ //逻辑依旧是保证没有团期（价格）的不能选中
obj = {
date:new Date(list[0].date),
price:list[0].price
}
}else{
obj = false
}
return obj;
},
isToday(date){
return date.getFullYear()==this.today.getFullYear() && date.getMonth()==this.today.getMonth() && date.getDate() == this.today.getDate()
},
getDateStr(date){ //当前年 月 日
if(date){
let year = date.getFullYear();
let month =(date.getMonth() + 1).toString();
let day = (date.getDate()).toString();
if (month.length == 1) {
month = "0" + month;
}
if (day.length == 1) {
day = "0" + day;
}
let dateTime = year + "-" + month + "-" + day;
return dateTime;
}
},
getNextMonth(date,num) { //获取下几个月 第一天
let now = new Date(date);
let ds = new Date(now.setDate(1))
ds = new Date(ds.setMonth(ds.getMonth() + num));
let year = ds.getFullYear();
let mon = ds.getMonth() + 1;
let day = ds.getDate();
let s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + "01";
let newDate = new Date(s)
return newDate;
},
setMonthList(){
let list = []
let now = new Date() //以当前月份为第一个月 如果需要自定义开始月份修改这个就行
for(let i=0;i<this.howManyMonth;i++){
let month = this.getNextMonth(now,i)
this.monthList.push(month)
}
},
getEveryDay(date) { //获取月份每一天 date对象
let _that = this;
let dayArry = [];
let d = date;
let lastDay = new Date(d.getFullYear(),d.getMonth()+1 <10 ? "0"+(d.getMonth()+1):d.getMonth()+1,0).getDate()
for (let k = 1; k <= lastDay; k++) {
let price = 0;
_that.datePrice.forEach(item=>{
if(item.date == _that.getDateStr(new Date(date.getFullYear(),date.getMonth(),k))){
price = item.price
}
})
dayArry.push(
{
date:new Date(date.getFullYear(),date.getMonth(),k),
price:price
}
);
}
return dayArry;
},
selectDate(data){ //选择日期
//多选模式请在这改造
/* this.$set(this.dayActive,"date",date) */
if(data.price){
this.dayActive = {
date:data.date,
price:data.price
}
let map = this.getSelectData()
this.$emit('changeDate',map.date)
}
},
getSelectData(){ //获取最终结果
let map = {
date:this.getDateStr(this.dayActive.date),
price:this.dayActive.price
}
return map;
},
bindPickerChange(e){
//传统日历模式选择日期
this.nowMonth.year = this.pickerData.list[0][e.detail.value[0]]
this.nowMonth.month = this.pickerData.list[1][e.detail.value[1]]
this.$emit('changeMonth',this.nowMonth)
},
reset(){
//重置
this.nowMonth.year = this.today.getFullYear()
this.nowMonth.month = this.today.getMonth()+1
this.dayActive = {}
this.$emit('changeDate',{})
}
}
}
</script>
<style lang="scss">
.calendar{
font-size: 22upx;
color: #333333;
border: 1px solid #d7d7d7;
font-weight: 600;
border-left: 0;
border-right: 0;
//日历中用到的小字体
.calen-text-small{
font-size: 16upx;
}
.calen-text-orange{
color: #e58252;
}
.calenHead-tradition{
position: relative;
vertical-align: bottom;
height: 80upx;
line-height: 80upx;
background: #f8f8f8;
.dateBox{
line-height: 80upx;
display: inline-block;
height: 80upx;
padding: 0 40upx;
&:after{
border: 0;
}
.font-big{
font-size: 38upx;
margin-right: 10upx;
}
.font-small{
font-size: 18upx;
}
}
.reset{
color: #4a77e6;
font-weight: 400;
float: right;
padding: 0 30upx;
}
}
.calenHead{
display: flex;
align-items: flex-start;
white-space: nowrap;
.headItem{
display: inline-block;
flex-shrink: 0;
width: 215upx;
height: 65upx;
text-align: center;
line-height: 65upx;
position: relative;
&.active{
background-color: #e8e8e8;
&:before{
content: "";
width: 16upx;
height: 16upx;
background: #6e7480;
transform: rotate(45deg);
display: block;
position: absolute;
bottom: -8upx;
left: 50%;
margin-left: -8upx;
}
}
&:after{
content: "";
width: 1px;
height: 28upx;
display: inline-block;
background: #e8e8e8;
position: absolute;
right: 0;
top: 50%;
margin-top: -14upx;
}
}
}
.weekBar{
background-color: #6e7480;
display: flex;
align-items: flex-start;
.weekItem{
height: 44upx;
width: 14.28%;
line-height: 44upx;
text-align: center;
color: #FFFFFF;
}
}
.dayBox{
display: flex;
width: 100%;
flex: 1;
flex-direction: row;
flex-wrap: wrap;
.day{
width: 14.285%;
flex-wrap: nowrap;
height: 106upx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-bottom: 1px solid #d7d7d7;
margin-bottom: -1px; /* 偷懒的方法 负边距使border重合*/
&.active{
background: #f77333 !important;
color: #FFFFFF !important;
view{
color: #FFFFFF !important;
}
}
.today{
color: #f77333;
}
view{
height: 30upx;
}
}
}
}
</style>
pages/guidecar/guidedetails.vue
View file @ e435c02e
......@@ -3,14 +3,14 @@
<view class="guide" v-if='type==1'>
<view class="guide-top">
<image :src="g.guide_photo" style="width: 60px; height: 60px;margin-right: 10px" mode="widthFix"></image>
<image :src="guideModel.GuidePhoto" style="width: 60px; height: 60px;margin-right: 10px" mode="widthFix"></image>
<view class="column" style="height: 36px;justify-content: space-between;">
<view class="row">
<span>{{g.guide_name}}</span>
<span>{{guideModel.Name}}</span>
</view>
<view class="row">
<u-rate
:current="g.guide_score"
:current="guideModel.Score"
active-color="#FF8C10"
inactive-color="#b2b2b2"
active-icon="star"
......@@ -25,16 +25,20 @@
<view class="guide-info">
<view class="guide-info-item">
<span class='info-text'>工龄：</span>
<span>{{g.guide_workyears}}年</span>
<span>{{guideModel.WorkYears}}年</span>
</view>
<!-- <view class="guide-info-item">
<view class="guide-info-item">
<span class='info-text'>电话：</span>
<span>{{guideModel.Telephone}}</span>
</view>
<view class="guide-info-item">
<span class='info-text'>服务人数：</span>
<span>{{g.guide_workyears}}年</span>
<span>{{guideModel.OrderGuestNum}}人</span>
</view>
<view class="guide-info-item">
<span class='info-text'>出单：</span>
<span>{{g.guide_workyears}}单</span>
</view> -->
<span>{{guideModel.OrderNum}}单</span>
</view>
</view>
<view class="guide-info">
<view class="guide-info-item">
......@@ -66,11 +70,11 @@
</swiper>
</view>
<view style="margin-top: 15px ;font-size: 16px;" >
{{g.car_model!=''?g.car_model:'无'}}
{{carModel.CarBrand!=''?carModel.CarBrand:'无'}}
</view>
<view style="margin-top: 5px;" >
<u-rate
:current="g.car_score"
:current="carModel.Score"
active-color="#FF8C10"
inactive-color="#b2b2b2"
active-icon="star"
......@@ -83,19 +87,19 @@
<view class="guide-info">
<view class="guide-info-item">
<span class='info-text'>购买年限：</span>
<span>{{g.car_buyyear}}</span>
<span>{{carModel.car_buyyear}}</span>
</view>
<view class="guide-info-item">
<span class='info-text'>颜色：</span>
<span>{{g.carcolor_name}}</span>
<span>{{carModel.carcolor_name}}</span>
</view>
<view class="guide-info-item">
<span class='info-text'>座位数：</span>
<span>{{g.ride_num}}座</span>
<span>{{carModel.GuestNum}}座</span>
</view>
<view class="guide-info-item">
<span class='info-text'>分类：</span>
<span>{{g.guide_workyears}}</span>
<span>{{carModel.CarClassStr}}</span>
</view>
</view>
</view>
......@@ -120,7 +124,9 @@ export default {
type:1,//1为
g:{},
detailContent:'',
imgs:[]
imgs:[],
carModel:{},
guideModel:{},
};
},
......@@ -135,19 +141,18 @@ export default {
uni.setNavigationBarTitle({
title: '导游详情',
});
this.getGuideCarGuideModel()
}else{
uni.setNavigationBarTitle({
title: '车辆详情',
});
this.getGuideCarModel()
}
}
this.g.pic_url.forEach((x) => {
this.imgs.push(x.pic_url);
});
let richtext = this.g.guide_introduction;
setTimeout(()=>{
this.detailContent = richtext;
},10)
......@@ -163,7 +168,41 @@ export default {
},
methods: {
getGuideCarGuideModel(){//根据导游id获取导游信息
this.request2(
{
url: '/api/AppletGuideCar/GetGuideCarGuideModel',
data: {
ID:this.g.guide_id,
}
},
(res) => {
this.guideModel = res.data;
let richtext = this.guideModel.Introduction;
setTimeout(()=>{
this.detailContent = richtext;
},10)
console.log(this.guideModel)
}
);
},
getGuideCarModel(){
this.request2(
{
url: '/api/AppletGuideCar/GetGuideCarModel',
data: {
ID:this.g.car_id,
}
},
(res) => {
this.carModel = res.data;
console.log(this.guideModel)
}
);
},
clickDescription(e) {
console.log(e);
},
......
pages/guidecar/index.vue
View file @ e435c02e
......@@ -203,7 +203,6 @@
day: true,
hour: true,
minute: true,
},
amapPlugin:null,
key: 'c785085c46d1eb41b1ebe8d1ec7fd945',
......
pages/guidecar/rili.vue 0 → 100644
View file @ e435c02e
<template>
<view class="rili">
<div class='g_top'>
<view class="topB" @click="">
<span class='ztext'>{{STime.month}}月{{STime.day}}日</span>
<span class='titext'>{{STime.week+' '+STime.hour+':'+STime.minute}}</span>
</view>
<view class="topB" style="height: 20px;align-items: center;">
<span style='font-size: 11px;color: #1C1E1F;'>{{intervalDay}}</span>
<image src="../../static/images/sanjiao.png" mode="aspectFill" style="width: 55px;height: 4px;"></image>
</view>
<view class="topB" @click="">
<span class='ztext'>{{ETime.month}}月{{ETime.day}}日</span>
<span class='titext'>{{ETime.week+' '+ETime.hour+':'+ETime.minute}}</span>
</view>
</div>
<view>
<z-calendar ref="calendar"
:datePrice="datePrice"
howManyMonth="6"
mode="2"
@changeDate="changeDate"
@changeMonth="changeMonth"
:defaultSelect="defaultSelect"></z-calendar>
</view>
<view class="time">
<view class="time_item" @click="showStart=true,timeType=1,defaultTime = qutime">
<span>取车时间</span>
<span>{{qutime}}</span>
</view>
<view class="time_item" @click="showStart=true,timeType=2,defaultTime = stilltime">
<span>还车时间</span>
<span>{{stilltime}}</span>
</view>
</view>
<view class="btn" >确定</view>
<u-picker v-model="showStart" mode="time" :params="params" @confirm='btnStart' :default-time='defaultTime'></u-picker>
</view>
</template>
<script>
import zCalendar from "./components/njzz-calendar/njzz-calendar.vue"
export default {
components:{zCalendar},
data() {
return {
selectedData:{},
datePrice:[
],
STime:{},
ETime:{},
intervalDay:'',
defaultSelect:'',
qutime:'',
stilltime:'',
showStart:false,
defaultTime:'',//默认取、还车时间
params: {//时间的配置
hour: true,
minute: true,
},
};
},
mounted() {
let myDate = new Date();
let year = myDate.getFullYear(); //年
let month = myDate.getMonth() + 1; //月
let hour = myDate.getHours(); //时
let minute = myDate.getMinutes(); //分
if(month<10){
month = ('0' + month)
}
let Month = year+'-'+month
this.STime = this.getTime('2020-09-18 12:20',1)
this.ETime = this.getTime('2020-09-19 12:20',2)
let startTime = new Date('2020-09-18 12:20'); // 开始时间
let endTime = new Date('2020-09-19 12:20'); // 结束时间
let usedTime = endTime - startTime; // 相差的毫秒数
let days = Math.floor(usedTime / (24 * 3600 * 1000)); // 计算出天数
let leavel = usedTime % (24 * 3600 * 1000); // 计算天数后剩余的时间
let hours = Math.floor(leavel / (3600 * 1000)); // 计算剩余的小时数
if(days>0){
if(leavel>0){
this.intervalDay=days+1+'天'
}else{
this.intervalDay=days+'天'
}
}else{
if(hours>=6){
this.intervalDay='1天'
}else{
this.intervalDay='半天'
}
}
this.getGoodsDateList(Month)
},
methods:{
changeDate(data){ //选择日期事件 可以将data绑定到此页面以用来提交等操作
console.log("日期："+data);
this.selectedData = data;
this.STime = this.getTime(data+' '+this.qutime)
},
getTest(){
//上面那个是选择日期时自动绑定的方式，但默认赋值之后没有进行选择操作 如何拿到选中的值
//一般来说设置默认的值在此页面早就拿到了 但如果不想再次处理数据格式可以用以下方式获取组件已经处理好的数据 $refs或者$children请查看vue官方文档
console.log(this.$refs.calendar.getSelectData())
},
changeMonth(nowMonth){
let Month = nowMonth.year+'-'+nowMonth.month;
this.getGoodsDateList(Month)
},
getGoodsDateList(Month){
this.request2(
{
url: '/api/AppletGCOrder/GetAppletSDGoodsTargetDateList',
data: {
GoodsId:367468,
Month:Month
}
},
res => {
let data =res.data;
let datePrice=[];
data.forEach(x=>{
if(x.IsReserve==1 && x.SurplusNum>0){
let obj = {}
obj.date = x.Date;
obj.price = '剩'+x.SurplusNum+'座';
datePrice.push(obj)
}
})
this.datePrice = datePrice
}
);
},
btnStart(val){
console.log(val)
if(this.timeType==1){
this.qutime=val.hour+":"+val.minute
}
if(this.timeType==2){
this.stilltime=val.hour+":"+val.minute
}
},
getTime(time,type=0){
let myDate = new Date(time);
let obj = {}
obj.year = myDate.getFullYear(); //年
obj.month = myDate.getMonth() + 1; //月
obj.day = myDate.getDate(); //日
obj.hour = myDate.getHours(); //时
obj.minute = myDate.getMinutes(); //分
let days = myDate.getDay();
obj.week = this.getweek(days)//星期几
if(type==1){
if(obj.month<10){
obj.month = ('0' + obj.month)
}
this.defaultSelect = obj.year+'-'+obj.month+'-'+obj.day;
this.qutime=obj.hour+':'+obj.minute//初始取车时间
}else if(type==2){
this.stilltime=obj.hour+':'+obj.minute//初始还车时间
}
return obj
},
getweek(day){//根据值返回当前时间的星期几
if(day==1){
return '星期一'
}else if(day==2){
return '星期二'
}else if(day==3){
return '星期三'
}else if(day==4){
return '星期四'
}else if(day==5){
return '星期五'
}else if(day==6){
return '星期六'
}else if(day==0){
return '星期日'
}
},
}
}
</script>
<style>
.rili .time{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
margin-top: 20px;
}
.rili .time_item{
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
}
.rili .btn{
width: 90%;
margin-left: 5% ;
height: 44px;
border-radius: 22px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 16px;
margin-top: 30px;
color: #FFF;
background-image: linear-gradient(
to right,
#FF8585,
#EE4454
);
}
.rili .g_top{
width: 92%;
height: 45px;
border-radius: 22.5px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
padding: 0 20px;
margin-left: 4%;
margin-top: 10px;
margin-bottom: 10px;
}
.rili .topB{
display: flex;
flex-direction: column;
justify-content: space-between;
/* align-items: center; */
}
.rili .titext{
font-size: 22rpx;
color: #929292;
}
.rili .ztext{
font-size: 28rpx;
color: #1C1E1F;
}
</style>
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