10 changed files with 892 additions and 380 deletions
@ -0,0 +1,386 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<!-- 日历 --> |
||||
|
<view class="calendar"> |
||||
|
<view class="calendar-top flex-between"> |
||||
|
<view @click="preNextDate(0)"> |
||||
|
<img src="https://static.ticket.sz-trip.com/tourGuide/images/index/leftIcon.png" class="iconfont" |
||||
|
style="margin-right: 13rpx;" /> |
||||
|
{{ monthShow ? '上一月' : '上一周' }} |
||||
|
</view> |
||||
|
<view>{{year}}年{{month}}月</view> |
||||
|
<view @click="preNextDate(1)"> |
||||
|
{{ monthShow ? '下一月' : '下一周' }} |
||||
|
<img src="https://static.ticket.sz-trip.com/tourGuide/images/index/rightIcon.png" class="iconfont" |
||||
|
style="margin-left: 13rpx;" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="calendar-bottom"> |
||||
|
<view class="week-item" v-for="(item,index) in weekList" :key="item + index"> |
||||
|
{{item}} |
||||
|
</view> |
||||
|
|
||||
|
<view v-for="(item, index) in everyDay" :key="item.day + index" class="day-box flex-center" |
||||
|
:class="(nowDay > item.date) ? 'grayDate' : ''" v-if="monthShow"> |
||||
|
<view :class="['day-item', selectDay == item.date ? 'daySelect' : '']" |
||||
|
@click="changeDate(item.date)"> |
||||
|
{{ nowDay== item.date ? '今日' : item.day }} |
||||
|
<view class="day-lunar" v-if="isShowLunar">{{showLunar(item)}}</view> |
||||
|
<view class="day-point" v-else></view> |
||||
|
<!-- <view class="day-point" v-if="(item.day && selectDay != item.date) && item.flag && !isShowLunar"></view> --> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view v-for="(item, index) in weekDates" :key="item + index" class="day-box flex-center" |
||||
|
:class="(nowDay > getNowTime(item)) ? 'grayDate' : ''" v-if="!monthShow"> |
||||
|
<view :class="['day-item', selectDay == getNowTime(item) ? 'daySelect' : '']" |
||||
|
@click="changeDate(getNowTime(item))"> |
||||
|
{{ nowDay == getNowTime(item) ? '今日' : getNowTime(item).slice(-2) }} |
||||
|
<view class="day-lunar" v-if="isShowLunar">{{showLunar(getNowTime(item))}}</view> |
||||
|
<view class="day-point" v-if="(item.day && selectDay != item.date) && item.flag && !isShowLunar"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="" style="width: 100%;height: 50rpx;padding: 20rpx;" @click="changeWeekMonth"> |
||||
|
<img :src="monthShow ? 'https://static.ticket.sz-trip.com/hsrNewTown/images/calendar/top.png' : 'https://static.ticket.sz-trip.com/hsrNewTown/images/calendar/bottom.png'" |
||||
|
class="iconfont" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
lunar |
||||
|
} from "../static/js/lunar.js" |
||||
|
export default { |
||||
|
props: { |
||||
|
isShowLunar: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
weekList: ['日', '一', '二', '三', '四', '五', '六'], |
||||
|
monthShow: false, |
||||
|
year: 0, |
||||
|
month: 0, |
||||
|
day: 0, |
||||
|
week: '', |
||||
|
nowDay: '', |
||||
|
selectDay: '', |
||||
|
everyDay: [], |
||||
|
weekDates: [], |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.year = Number(this.getNowTime(new Date(), 2).slice(0, 4)); |
||||
|
this.month = Number(this.getNowTime(new Date(), 2).slice(5, 7)); |
||||
|
this.day = Number(this.getNowTime(new Date(), 2).slice(8, 10)); |
||||
|
this.nowDay = this.getNowTime(new Date()) |
||||
|
this.selectDay = this.getNowTime(new Date()) |
||||
|
this.getWeekDates(new Date()) |
||||
|
}, |
||||
|
methods: { |
||||
|
// 选中日期 |
||||
|
changeDate(item) { |
||||
|
if (this.nowDay <= item) { |
||||
|
this.year = Number(item.slice(0, 4)); |
||||
|
this.month = Number(item.slice(5, 7)); |
||||
|
this.day = Number(item.slice(8, 10)); |
||||
|
this.selectDay = item |
||||
|
|
||||
|
this.$emit('changeDate', this.selectDay) |
||||
|
} |
||||
|
}, |
||||
|
// 农历 |
||||
|
showLunar(date) { |
||||
|
if(this.monthShow) { |
||||
|
if (!date.date) return; |
||||
|
var lunarObj = lunar.solar2lunar(date.date.slice(0, 4), date.date.slice(5, 7), date.date.slice(8, 10)); |
||||
|
}else { |
||||
|
var lunarObj = lunar.solar2lunar(date.slice(0, 4), date.slice(5, 7), date.slice(8, 10)); |
||||
|
} |
||||
|
|
||||
|
return lunarObj.festival || lunarObj.lunarFestival || lunarObj.IDayCn; |
||||
|
}, |
||||
|
// 获取当前日期 |
||||
|
getNowTime(time, type) { |
||||
|
var date = time, |
||||
|
year = date.getFullYear(), |
||||
|
month = date.getMonth() + 1, |
||||
|
day = date.getDate(), |
||||
|
hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(), |
||||
|
minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(), |
||||
|
second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); |
||||
|
month >= 1 && month <= 9 ? (month = "0" + month) : ""; |
||||
|
day >= 0 && day <= 9 ? (day = "0" + day) : ""; |
||||
|
if (type == 1) { |
||||
|
if (uni.getSystemInfoSync().platform == 'ios') { |
||||
|
var timer = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second; |
||||
|
} else { |
||||
|
var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second; |
||||
|
} |
||||
|
} else { |
||||
|
var timer = year + '/' + month + '/' + day; |
||||
|
} |
||||
|
|
||||
|
return timer; |
||||
|
}, |
||||
|
// 遍历月份日期 |
||||
|
getEveryDay(data) { |
||||
|
let date = new Date(data); |
||||
|
let month = date.getMonth(); |
||||
|
//设置月份 |
||||
|
date.setMonth(month + 1); |
||||
|
//设置一个月的某一天-这里设置为零则取到的日期中的天就会是当月的最后一天(比如,二月份就是28或29,其他月份就是30或31),方便下边的循环 |
||||
|
date.setDate(0); |
||||
|
let dayArry = []; |
||||
|
let day = date.getDate(); //获取当前月最后一天是几号 |
||||
|
for (let i = 1; i <= day; i++) { |
||||
|
date.setDate(i); //如果只获取当前选择月份的每一天,则不需要date.setDate(i)只需dayArry.push(i)即可,其中date.setDate(i)是设置当前月份的每一天 |
||||
|
dayArry.push({ |
||||
|
day: i, |
||||
|
week: this.getWeekday(date.getDay()), |
||||
|
date: this.getNowTime(date), |
||||
|
flag: 0 |
||||
|
}); //选中月份的每一天和当天是星期几 |
||||
|
} |
||||
|
|
||||
|
this.everyDay = dayArry; |
||||
|
this.resetDay(); |
||||
|
}, |
||||
|
getWeekday(day) { |
||||
|
return ['日', '一', '二', '三', '四', '五', '六'][day]; |
||||
|
}, |
||||
|
//重置日期与顶部周期相对应 |
||||
|
resetDay() { |
||||
|
let arr = this.weekList; |
||||
|
let w = this.everyDay[0].week; |
||||
|
arr.forEach((v, index) => { |
||||
|
if (v == w) { |
||||
|
let id = index; |
||||
|
if (id != 0) { |
||||
|
for (let i = 0; i < id; i++) { |
||||
|
this.everyDay.unshift({ |
||||
|
day: '', |
||||
|
week: '' |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 获取周 |
||||
|
getWeekDates(day) { |
||||
|
const currentDayOfWeek = day.getDay(); // 获取今天是星期几( 0 = 周日,...6 = 周六 |
||||
|
const startDate = new Date(day); |
||||
|
startDate.setDate(day.getDate() - currentDayOfWeek); |
||||
|
const weekDates = []; |
||||
|
for (let i = 0; i < 7; i++) { |
||||
|
const date = new Date(startDate); |
||||
|
date.setDate(startDate.getDate() + i); |
||||
|
weekDates.push(date) |
||||
|
} |
||||
|
this.weekDates = weekDates |
||||
|
}, |
||||
|
// 切换上一周月、下一周月 |
||||
|
preNextDate(e) { |
||||
|
if (this.monthShow) { |
||||
|
if (e) { |
||||
|
// 下一月 |
||||
|
this.month += 1; |
||||
|
if (this.month > 12) { |
||||
|
this.year += 1; |
||||
|
this.month = 1; |
||||
|
} |
||||
|
if (uni.getSystemInfoSync().platform == 'ios') { |
||||
|
this.getEveryDay(this.year + '/' + this.month + '/' + 1); |
||||
|
} else { |
||||
|
this.getEveryDay(this.year + '-' + this.month); |
||||
|
} |
||||
|
} else { |
||||
|
// 上一月 |
||||
|
this.month -= 1; |
||||
|
if (this.month == 0) { |
||||
|
this.year -= 1; |
||||
|
this.month = 12; |
||||
|
} |
||||
|
if (uni.getSystemInfoSync().platform == 'ios') { |
||||
|
this.getEveryDay(this.year + '/' + this.month + '/' + 1); |
||||
|
} else { |
||||
|
this.getEveryDay(this.year + '-' + this.month); |
||||
|
} |
||||
|
} |
||||
|
} else { |
||||
|
if (e) { |
||||
|
// 下一周 |
||||
|
this.getNextWeekDates() |
||||
|
} else { |
||||
|
// 上一周 |
||||
|
this.getPreviousWeekDates() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
getPreviousWeekDates() { |
||||
|
const today = this.weekDates[0] |
||||
|
const previousWeekStartDate = new Date(today); |
||||
|
previousWeekStartDate.setDate(today.getDate() - 7); // 上周的开始日期 |
||||
|
|
||||
|
const previousWeekDates = []; |
||||
|
for (let i = 0; i < 7; i++) { |
||||
|
const date = new Date(previousWeekStartDate); |
||||
|
date.setDate(previousWeekStartDate.getDate() + i); |
||||
|
previousWeekDates.push(date); |
||||
|
} |
||||
|
|
||||
|
this.weekDates = previousWeekDates; |
||||
|
this.year = Number(this.getNowTime(this.weekDates[0], 2).slice(0, 4)); |
||||
|
this.month = Number(this.getNowTime(this.weekDates[0], 2).slice(5, 7)); |
||||
|
}, |
||||
|
getNextWeekDates() { |
||||
|
const today = this.weekDates[0] |
||||
|
const nextWeekStartDate = new Date(today); |
||||
|
nextWeekStartDate.setDate(today.getDate() + 7); // 下周的开始日期 |
||||
|
|
||||
|
const nextWeekDates = []; |
||||
|
for (let i = 0; i < 7; i++) { |
||||
|
const date = new Date(nextWeekStartDate); |
||||
|
date.setDate(nextWeekStartDate.getDate() + i); |
||||
|
nextWeekDates.push(date); |
||||
|
} |
||||
|
|
||||
|
this.weekDates = nextWeekDates; |
||||
|
this.year = Number(this.getNowTime(this.weekDates[0], 2).slice(0, 4)); |
||||
|
this.month = Number(this.getNowTime(this.weekDates[0], 2).slice(5, 7)); |
||||
|
}, |
||||
|
// 更换周/月 |
||||
|
changeWeekMonth() { |
||||
|
this.monthShow = !this.monthShow |
||||
|
|
||||
|
this.month = Number(this.selectDay.slice(5, 7)); |
||||
|
|
||||
|
if (this.monthShow) { |
||||
|
this.year = Number(this.selectDay.slice(0, 4)) |
||||
|
if (uni.getSystemInfoSync().platform == 'ios') { |
||||
|
this.getEveryDay(this.year + '/' + this.month + '/' + 1); |
||||
|
} else { |
||||
|
this.getEveryDay(this.year + '/' + this.month); |
||||
|
} |
||||
|
} else { |
||||
|
this.getWeekDates(new Date(this.selectDay)) |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.calendar { |
||||
|
.calendar-top { |
||||
|
font-size: 27rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #000000; |
||||
|
padding: 59rpx 0 38rpx; |
||||
|
|
||||
|
view:nth-child(2) { |
||||
|
font-size: 35rpx; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.iconfont { |
||||
|
width: 11rpx; |
||||
|
height: 20rpx; |
||||
|
vertical-align: inherit; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.calendar-bottom { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
padding: 33rpx 0 40rpx; |
||||
|
width: 697rpx; |
||||
|
height: auto; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 20rpx; |
||||
|
position: relative; |
||||
|
|
||||
|
.week-item { |
||||
|
width: 14%; |
||||
|
text-align: center; |
||||
|
font-size: 24rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #666666; |
||||
|
} |
||||
|
|
||||
|
.day-box { |
||||
|
width: 14%; |
||||
|
height: 100rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
|
||||
|
.day-item { |
||||
|
font-size: 29rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #000000; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-around; |
||||
|
text-align: center; |
||||
|
|
||||
|
.day-lunar { |
||||
|
font-weight: 500; |
||||
|
font-size: 17rpx; |
||||
|
color: #999999; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.day-point{ |
||||
|
width: 5rpx; |
||||
|
height: 5rpx; |
||||
|
background: #FF3615; |
||||
|
border-radius: 50%; |
||||
|
margin: 5rpx auto 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.daySelect { |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
text-align: center; |
||||
|
background: #96684F; |
||||
|
border-radius: 27rpx; |
||||
|
color: #fff; |
||||
|
|
||||
|
.day-lunar { |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.grayDate { |
||||
|
.day-item { |
||||
|
color: #999999; |
||||
|
|
||||
|
.day-point{ |
||||
|
background: #CCCCCC; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.iconfont { |
||||
|
width: 20rpx; |
||||
|
height: 20rpx; |
||||
|
display: block; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,135 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<div class="box"> |
||||
|
<view class="box-title">订单详情</view> |
||||
|
<view class="item"> |
||||
|
<view class="title">下单日期:</view> |
||||
|
<view class="subtitle">{{detail.a}}</view> |
||||
|
</view> |
||||
|
<view class="item"> |
||||
|
<view class="title">订单号:</view> |
||||
|
<view class="subtitle">{{detail.b}}</view> |
||||
|
</view> |
||||
|
</div> |
||||
|
|
||||
|
<div class="box"> |
||||
|
<view class="box-title" style="text-align: left;">产品信息</view> |
||||
|
<view class="item"> |
||||
|
<view class="title">产品类型:</view> |
||||
|
<view class="subtitle">{{detail.c}}</view> |
||||
|
</view> |
||||
|
<view class="item"> |
||||
|
<view class="title">产品类型:</view> |
||||
|
<view class="subtitle">{{detail.d}}</view> |
||||
|
</view> |
||||
|
<view class="item"> |
||||
|
<view class="title">产品类型:</view> |
||||
|
<view class="subtitle">{{detail.e}}</view> |
||||
|
</view> |
||||
|
<view class="item"> |
||||
|
<view class="title">产品类型:</view> |
||||
|
<view class="subtitle">{{detail.f}}</view> |
||||
|
</view> |
||||
|
</div> |
||||
|
|
||||
|
<div class="box"> |
||||
|
<view class="box-title" style="text-align: left;">订单信息</view> |
||||
|
<view class="item"> |
||||
|
<view class="title">下单日期:</view> |
||||
|
<view class="subtitle">{{detail.g}}</view> |
||||
|
</view> |
||||
|
<view class="item"> |
||||
|
<view class="title">订单号:</view> |
||||
|
<view class="subtitle">{{detail.h}}</view> |
||||
|
</view> |
||||
|
<view class="item"> |
||||
|
<view class="title">订单号:</view> |
||||
|
<view class="subtitle">{{detail.i}}</view> |
||||
|
</view> |
||||
|
<view class="item"> |
||||
|
<view class="title">订单号:</view> |
||||
|
<view class="subtitle">{{detail.j}}</view> |
||||
|
</view> |
||||
|
<view class="item"> |
||||
|
<view class="title">出行人手机号1:</view> |
||||
|
<view class="subtitle">{{detail.k}}</view> |
||||
|
</view> |
||||
|
<view class="item"> |
||||
|
<view class="title">订单号:</view> |
||||
|
<view class="subtitle">{{detail.l}}</view> |
||||
|
</view> |
||||
|
<view class="item"> |
||||
|
<view class="title">订单号:</view> |
||||
|
<view class="subtitle">{{detail.m}}</view> |
||||
|
</view> |
||||
|
</div> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
detail: { |
||||
|
a: '2024-11-23', |
||||
|
b: 'JD85212456964232', |
||||
|
c: '产品类型产品类型产品类型产品类型', |
||||
|
d: '产品名称产品名称产品名称产品名称 产品名称', |
||||
|
e: '规格名称规格名称规格名称规格名称', |
||||
|
f: '800元', |
||||
|
g: '2', |
||||
|
h: '1600元', |
||||
|
i: '2024-11-23', |
||||
|
j: '于冰', |
||||
|
k: '15036660000', |
||||
|
l: '孙宁', |
||||
|
m: '13188889999', |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
min-height: 100vh; |
||||
|
background: #F5F5F5; |
||||
|
padding: 50rpx 26rpx; |
||||
|
} |
||||
|
|
||||
|
.box { |
||||
|
padding: 30rpx 26rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 13rpx; |
||||
|
margin-bottom: 30rpx; |
||||
|
|
||||
|
.box-title { |
||||
|
text-align: center; |
||||
|
font-weight: bold; |
||||
|
font-size: 32rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.item { |
||||
|
margin-top: 20rpx; |
||||
|
display: flex; |
||||
|
|
||||
|
.title { |
||||
|
min-width: 210rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 28rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.subtitle { |
||||
|
font-weight: 500; |
||||
|
font-size: 28rpx; |
||||
|
color: #646464; |
||||
|
|
||||
|
span { |
||||
|
color: #96684F; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,163 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="search-box flex-center"> |
||||
|
<image src="https://static.ticket.sz-trip.com/tourGuide/images/order/search.png" mode=""></image> |
||||
|
<input type="text" placeholder="输入订单号搜索" v-model="keywords" /> |
||||
|
<view class="search-btn" @click="getList"> |
||||
|
搜索 |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<calendarVue :isShowLunar="false" @changeDate="getList"></calendarVue> |
||||
|
|
||||
|
<view class="box" v-for="(item, index) in list" :key="index"> |
||||
|
<view class="box-title">订单详情</view> |
||||
|
<view class="item"> |
||||
|
<view class="title">下单日期:</view> |
||||
|
<view class="subtitle">{{item.a}}</view> |
||||
|
</view> |
||||
|
<view class="item"> |
||||
|
<view class="title">订单号:</view> |
||||
|
<view class="subtitle">{{item.b}}</view> |
||||
|
</view> |
||||
|
<view class="item"> |
||||
|
<view class="title">状态:</view> |
||||
|
<view class="subtitle"><span>{{item.c}}</span></view> |
||||
|
</view> |
||||
|
<view class="item"> |
||||
|
<view class="title">产品类型:</view> |
||||
|
<view class="subtitle">{{item.d}}</view> |
||||
|
</view> |
||||
|
<view class="item"> |
||||
|
<view class="title">产品名称:</view> |
||||
|
<view class="subtitle">{{item.e}}</view> |
||||
|
</view> |
||||
|
<view class="item"> |
||||
|
<view class="title">预定人手机号:</view> |
||||
|
<view class="subtitle">{{item.f}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="empty-text"> |
||||
|
暂无订单数据 |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import calendarVue from '../../components/calendar.vue'; |
||||
|
export default { |
||||
|
components: {calendarVue}, |
||||
|
data() { |
||||
|
return { |
||||
|
list: [ |
||||
|
{ |
||||
|
a: '2024-11-23', |
||||
|
b: 'JD85212456964232', |
||||
|
c: '出票成功', |
||||
|
d: '产品类型产品类型产品类型产品类型 产品类型', |
||||
|
e: '产品名称产品名称产品名称产品名称 产品名称产品名称产品名称产品', |
||||
|
f: '16099998888' |
||||
|
}, |
||||
|
{ |
||||
|
a: '2024-11-23', |
||||
|
b: 'JD85212456964232', |
||||
|
c: '出票成功', |
||||
|
d: '产品类型产品类型产品类型产品类型 产品类型', |
||||
|
e: '产品名称产品名称产品名称产品名称 产品名称产品名称产品名称产品', |
||||
|
f: '16099998888' |
||||
|
} |
||||
|
], |
||||
|
keywords: '' |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getList() { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
background: #F5F5F5; |
||||
|
min-height: 100vh; |
||||
|
padding: 50rpx 26rpx 50rpx; |
||||
|
} |
||||
|
|
||||
|
.search-box { |
||||
|
width: 697rpx; |
||||
|
height: 93rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 47rpx; |
||||
|
padding: 0 40rpx 0 26rpx; |
||||
|
|
||||
|
image { |
||||
|
width: 42.67rpx; |
||||
|
height: 42.67rpx; |
||||
|
margin-right: 23rpx; |
||||
|
} |
||||
|
|
||||
|
input { |
||||
|
font-weight: 400; |
||||
|
font-size: 27rpx; |
||||
|
color: #717171; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.search-btn { |
||||
|
padding-left: 40rpx; |
||||
|
line-height: 64rpx; |
||||
|
border-left: 1rpx solid #717171; |
||||
|
font-weight: 400; |
||||
|
font-size: 27rpx; |
||||
|
color: #0B898E; |
||||
|
margin-left: 23rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.box { |
||||
|
padding: 50rpx 26rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 13rpx; |
||||
|
margin-top: 30rpx; |
||||
|
|
||||
|
.box-title { |
||||
|
text-align: center; |
||||
|
font-weight: 500; |
||||
|
font-size: 32rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.item { |
||||
|
margin-top: 20rpx; |
||||
|
display: flex; |
||||
|
|
||||
|
.title { |
||||
|
min-width: 200rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 28rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.subtitle { |
||||
|
font-weight: 500; |
||||
|
font-size: 28rpx; |
||||
|
color: #646464; |
||||
|
|
||||
|
span { |
||||
|
color: #96684F; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.empty-text { |
||||
|
font-weight: 500; |
||||
|
font-size: 40rpx; |
||||
|
color: #646464; |
||||
|
text-align: center; |
||||
|
margin: 30rpx 0; |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,50 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="item flex-between"> |
||||
|
<view>登录账号</view> |
||||
|
<view>{{userInfo.mobile}}</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="item flex-between"> |
||||
|
<view>密码</view> |
||||
|
<view>****** <image url="https://static.ticket.sz-trip.com/tourGuide/images/user/rightGray.png"></image></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
userInfo: {} |
||||
|
} |
||||
|
}, |
||||
|
onShow() { |
||||
|
this.userInfo = (uni.getStorageSync('userInfo') && JSON.parse(uni.getStorageSync('userInfo'))) || this.$store.state.user.userInfo || {} |
||||
|
console.log(this.userInfo) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
min-height: 100vh; |
||||
|
background: #F5F5F5; |
||||
|
padding: 0 26rpx; |
||||
|
} |
||||
|
|
||||
|
.item { |
||||
|
height: 110rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 28rpx; |
||||
|
color: #000000; |
||||
|
border-bottom: 1rpx solid #D8D8D8; |
||||
|
|
||||
|
image { |
||||
|
width: 11.33rpx; |
||||
|
height: 20rpx; |
||||
|
margin-left: 20rpx; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
} |
||||
|
</style> |
Loading…
Reference in new issue