jiazhipeng
1 year ago
14 changed files with 2503 additions and 562 deletions
@ -1,8 +1,575 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="title">我的</view> |
|||
|
|||
<view class="topBox" @click="gotoProfile"> |
|||
<view class="avatar-box flex-center"> |
|||
<image :src="showImg(userInfo.avatar)" mode="aspectFill" class="headImg" v-if="userInfo.avatar"></image> |
|||
<image src="https://static.ticket.sz-trip.com/yandu/images/user/grxx.png" mode="aspectFill" |
|||
class="headImg" v-else></image> |
|||
</view> |
|||
<view class="username" v-if="userInfo.nickname">{{userInfo.nickname}}</view> |
|||
<view class="username" v-else>请登录/注册 ></view> |
|||
</view> |
|||
|
|||
<view class="orderBox"> |
|||
<navigator :url="'/subPackages/order/trades'" class="moreBox flex-between"> |
|||
我的订单 |
|||
<span class="flex-between">全部订单 <img |
|||
src="https://static.ticket.sz-trip.com/yandu/images/user/rightIcon.png" alt=""></span> |
|||
</navigator> |
|||
|
|||
<view class="flex-around" style="margin-top: 20rpx;"> |
|||
<view class="orderItem" v-for="(item,index) in orderList" :key="index" @click="goTrades(item)"> |
|||
<img :src="item.src" alt=""> |
|||
<view>{{item.title}}</view> |
|||
</view> |
|||
</view> |
|||
<!-- 待付款轮播 --> |
|||
<!-- <swiper class="my-swipe" :autoplay="3000" indicator-color="white" v-if="dfkList && dfkList.length>0" circular> |
|||
<swiper-item v-for="(item,index) in dfkList" :key="item.id"> |
|||
<div class="dfkBox" @click="goToOrderDetail(item)"> |
|||
<image :src="showImg(item.order_child[0].specifications_image)" mode="aspectFill"></image> |
|||
<div class="contentBox"> |
|||
<div style="width:300rpx;"> |
|||
<div style="font-size: 27rpx;margin-bottom: 10rpx;">等待付款 </div> |
|||
<div style="display: flex;color: #8A8A8A;font-size: 27rpx;">剩余时间：<uni-countdown class="countdown" @timeup="timeup(index)" :show-day="false" :hour="differTimeList[index].slice(0,2)" :minute="differTimeList[index].slice(3,5)" :second="differTimeList[index].slice(6,8)"/></div> |
|||
</div> |
|||
<div class="orderBtn" @click.stop="setOrderId(item.order_id)">去支付</div> |
|||
</div> |
|||
</div> |
|||
</swiper-item> |
|||
</swiper> --> |
|||
</view> |
|||
|
|||
<view class="cygj"> |
|||
<view class="cyItem flex-between" v-for="(item,index) in cyList" :key="index" |
|||
@click="gotoUrl(item.path,index)" v-if="item.isShow"> |
|||
<view class="flex-center"> |
|||
<img :src="item.src" class="headIcon"> |
|||
{{item.title}} |
|||
</view> |
|||
<img src="https://static.ticket.sz-trip.com/yandu/images/user/rightIcon-gray.png" class="rightIcon"> |
|||
</view> |
|||
<!-- <button id="contact" class="cyItem flex-between" open-type="contact" bindcontact="handleContact" session-from="sessionFrom"> |
|||
<view class="flex-center"> |
|||
<img src="https://static.ticket.sz-trip.com/dongtai/images/user/zxkf.png" class="headIcon"> |
|||
在线客服 |
|||
</view> |
|||
<img src="https://static.ticket.sz-trip.com/dongtai/images/user/rightIcon-gray.png" class="rightIcon"> |
|||
</button> --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
// import moment from "moment"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
dfkList: [], |
|||
differTimeList: [], |
|||
nowDateTime: '', //当前时间秒数 |
|||
userInfo: {}, |
|||
orderList: [{ |
|||
src: 'https://static.ticket.sz-trip.com/yandu/images/user/dfk.png', |
|||
title: '待付款', |
|||
status: 'WAIT_PAYMENT' |
|||
}, |
|||
{ |
|||
src: 'https://static.ticket.sz-trip.com/yandu/images/user/dfh.png', |
|||
title: '待发货', |
|||
status: 'PAYMENT_SUCCESSFULLY' |
|||
}, |
|||
{ |
|||
src: 'https://static.ticket.sz-trip.com/yandu/images/user/dsh.png', |
|||
title: '待收货', |
|||
status: 'WAIT_CONFIRM' |
|||
}, |
|||
{ |
|||
src: 'https://static.ticket.sz-trip.com/yandu/images/user/dpj.png', |
|||
title: '待评价', |
|||
status: 'WAIT_COMMENT' |
|||
}, |
|||
{ |
|||
src: 'https://static.ticket.sz-trip.com/yandu/images/user/tksh.png', |
|||
title: '退款/售后', |
|||
status: 'WAIT_REFUND,REFUND_SUCCESS,REFUND_REFUSAL,REFUND_ERROR,REFUND_PART' |
|||
}, |
|||
], |
|||
cyList: [{ |
|||
src: 'https://static.ticket.sz-trip.com/yandu/images/user/grsc.png', |
|||
title: '个人收藏', |
|||
path: '', |
|||
isShow: true |
|||
}, |
|||
{ |
|||
src: 'https://static.ticket.sz-trip.com/yandu/images/user/yhq.png', |
|||
title: '优惠券', |
|||
path: '', |
|||
isShow: true |
|||
}, |
|||
{ |
|||
src: 'https://static.ticket.sz-trip.com/yandu/images/user/cyxx.png', |
|||
title: '常用信息', |
|||
path: '/subPackages/user/travelerList', |
|||
isShow: true |
|||
}, |
|||
{ |
|||
src: 'https://static.ticket.sz-trip.com/yandu/images/user/lyzx.png', |
|||
title: '旅游咨询', |
|||
path: '', |
|||
isShow: true |
|||
}, |
|||
{ |
|||
src: 'https://static.ticket.sz-trip.com/yandu/images/user/tsjb.png', |
|||
title: '投诉举报', |
|||
path: '/subPackages/service/service', |
|||
isShow: true |
|||
}, |
|||
{ |
|||
src: 'https://static.ticket.sz-trip.com/yandu/images/user/ysgl.png', |
|||
title: '隐私管理', |
|||
path: '', |
|||
isShow: true |
|||
} |
|||
], |
|||
} |
|||
}, |
|||
onShow() { |
|||
// this.dfkList = [] |
|||
// this.nowDateTime = parseInt(new Date().getTime() / 1000) |
|||
// this.Post({}, "/api/user/userInfo").then((res) => { |
|||
// if (res.data) { |
|||
// this.userInfo = res.data; |
|||
// // this.getDfk() |
|||
|
|||
// // 是否展示商户核销 |
|||
// this.Post({},'/api/merchants/is_merchant').then(res => { |
|||
// this.cyList[6].isShow = res.data |
|||
// }) |
|||
// } |
|||
// }); |
|||
}, |
|||
methods: { |
|||
// 个人信息或登录 |
|||
gotoProfile() { |
|||
// 有token去个人信息，没有去登录 |
|||
uni.navigateTo({ |
|||
url: '/subPackages/user/profile' |
|||
}) |
|||
}, |
|||
timeup(index) { |
|||
// return this.dfkList.splice(index,1) |
|||
}, |
|||
setOrderId(id) { |
|||
let that = this; |
|||
that.orderId = id; |
|||
that.Post({ |
|||
order_id: id, |
|||
type: "miniprogram", |
|||
platform: 'miniprogram' |
|||
}, |
|||
'/api/pay/unify' |
|||
).then(res => { |
|||
if (res.data) { |
|||
uni.requestPayment({ |
|||
nonceStr: res.data.nonceStr, |
|||
package: res.data.package, |
|||
paySign: res.data.paySign, |
|||
signType: res.data.signType, |
|||
timeStamp: res.data.timeStamp |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
// 待付款 |
|||
getDfk() { |
|||
this.differTimeList = [] |
|||
let params = { |
|||
offset: this.dfkList.length, |
|||
limit: 10, |
|||
status: 'WAIT_PAYMENT', |
|||
} |
|||
this.Post(params, '/api/order/orderList').then(res => { |
|||
this.isLoading = false |
|||
if (res) { |
|||
this.dfkList = [...this.dfkList, ...res.data] |
|||
this.dfkList.forEach(item => { |
|||
// 获取时间差,订单关闭时间-当前时间，若存在即展示倒计时differTimeList |
|||
let del; |
|||
if (moment(item.close_time).diff(moment()) > 0) { |
|||
del = moment.utc(moment(item.close_time).diff(moment())).format('HH:mm:ss') |
|||
} else { |
|||
del = '00:00:00' |
|||
} |
|||
this.differTimeList.push(del) |
|||
}) |
|||
console.log(this.differTimeList); |
|||
console.log('this.differTimeList：' + this.differTimeList[0].slice(0, 2)) |
|||
} |
|||
}) |
|||
}, |
|||
goToOrderDetail(item) { |
|||
uni.navigateTo({ |
|||
url: '/subPackages/order/detail?id=' + item.order_id |
|||
}); |
|||
}, |
|||
getChild(list) { |
|||
let arr = [] |
|||
for (let i = 0; i < list.length; i++) { |
|||
if (list[i].product_model == "ticket") { |
|||
console.log(list[i]); |
|||
arr.push(list[i]) |
|||
break |
|||
} |
|||
} |
|||
console.log(arr); |
|||
if (arr.length > 0) { |
|||
return arr[0] |
|||
} else { |
|||
return list[0] |
|||
} |
|||
|
|||
}, |
|||
goCoupon() { |
|||
uni.navigateTo({ |
|||
url: "/subPackages/user/coupon", |
|||
}); |
|||
}, |
|||
goKeFu() { |
|||
uni.navigateTo({ |
|||
url: "/subPackages/publicservices/ServiceOnline", |
|||
}); |
|||
}, |
|||
// open(){ |
|||
// this.$refs.popup.open('center') |
|||
// }, |
|||
gotoUrl(path, index) { |
|||
if (index == 3) { |
|||
this.clickPhone('13333333333') |
|||
return; |
|||
} |
|||
uni.navigateTo({ |
|||
url: path |
|||
}) |
|||
}, |
|||
qidai() { |
|||
uni.showToast({ |
|||
title: '功能建设中...', |
|||
icon: 'none' |
|||
}) |
|||
}, |
|||
goTrades(item) { |
|||
if (item) { |
|||
uni.navigateTo({ |
|||
url: "/subPackages/order/trades?type=" + item.title, |
|||
}); |
|||
} else { |
|||
uni.navigateTo({ |
|||
url: "/subPackages/order/trades", |
|||
}); |
|||
} |
|||
}, |
|||
//判断是否关注公众号 |
|||
isGz(item) { |
|||
this.$refs.pop.openPop( |
|||
'https://yjks.oss-cn-shanghai.aliyuncs.com/uploads/20230517/db9eb60e0abfea8be1075b406fefe551.jpg'); |
|||
// this.Post({}, '/api/wechat/getSubcribeInfo').then(res => { |
|||
// if (res.data) { |
|||
// uni.navigateTo({ |
|||
// url:'/subPackages/webPage/webPage?url='+'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU2NjQwNTYxNg==#wechat_redirect' |
|||
// }) |
|||
// } else { |
|||
// console.log(this.$refs.pop); |
|||
// } |
|||
// }); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
<style scoped lang="scss"> |
|||
/deep/.uni-countdown { |
|||
font-size: 20px !important; |
|||
|
|||
/deep/.uni-countdown__splitor { |
|||
font-size: 20px !important; |
|||
} |
|||
} |
|||
|
|||
.bg { |
|||
min-height: 100vh; |
|||
overflow-x: hidden; |
|||
background: url('https://static.ticket.sz-trip.com/yandu/images/user/topBg.png') no-repeat; |
|||
background-size: 100%; |
|||
background-color: #F7F7F7; |
|||
padding-bottom: 100rpx; |
|||
} |
|||
|
|||
.title { |
|||
font-weight: bold; |
|||
font-size: 36rpx; |
|||
color: #333333; |
|||
position: absolute; |
|||
top: 110rpx; |
|||
left: 50%; |
|||
transform: translate(-50%, 0); |
|||
} |
|||
|
|||
.topBox { |
|||
width: 750rpx; |
|||
height: 373rpx; |
|||
padding: 100rpx 0 0 26rpx; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
margin-top: 90rpx; |
|||
|
|||
.avatar-box { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.headImg { |
|||
width: 60rpx; |
|||
height: 66rpx; |
|||
} |
|||
|
|||
.username { |
|||
margin: 40rpx 0 0 28rpx; |
|||
font-weight: 500; |
|||
font-size: 40rpx; |
|||
color: #000000; |
|||
} |
|||
} |
|||
|
|||
.orderBox { |
|||
width: 697rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 0rpx 23rpx 0rpx rgba(80, 80, 80, 0.12); |
|||
border-radius: 20rpx; |
|||
margin: -48rpx auto 0; |
|||
padding-bottom: 30.6rpx; |
|||
|
|||
.moreBox { |
|||
height: 84rpx; |
|||
margin: auto; |
|||
font-size: 31rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #000000; |
|||
padding-left: 26rpx; |
|||
|
|||
span { |
|||
width: 173rpx; |
|||
height: 40rpx; |
|||
background: rgba(223, 237, 224, .8); |
|||
border-radius: 20rpx 0rpx 0rpx 20rpx; |
|||
padding: 0 24rpx; |
|||
font-size: 25rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #71B580; |
|||
box-sizing: border-box; |
|||
|
|||
img { |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.orderItem { |
|||
font-size: 24rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #000000; |
|||
width: 20%; |
|||
text-align: center; |
|||
|
|||
img { |
|||
width: 62rpx; |
|||
height: 62rpx; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.lxwm { |
|||
width: 696rpx; |
|||
height: 447rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px 4rpx 12rpx 0px rgba(150, 149, 149, 0.3); |
|||
border-radius: 20rpx; |
|||
margin: auto; |
|||
padding: 27rpx 19rpx 0 19rpx; |
|||
font-size: 31rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #000000; |
|||
|
|||
.midBox { |
|||
padding: 26rpx 43rpx 21rpx 44rpx; |
|||
box-sizing: border-box; |
|||
|
|||
img { |
|||
width: 265rpx; |
|||
height: 252rpx; |
|||
border-radius: 15rpx; |
|||
} |
|||
} |
|||
|
|||
.botBox { |
|||
padding: 0 30rpx 0 51rpx; |
|||
font-size: 27rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #000000; |
|||
} |
|||
} |
|||
|
|||
.cygj { |
|||
width: 697rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
margin: 30rpx auto 0; |
|||
padding: 0 27rpx; |
|||
font-size: 28rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #000000; |
|||
|
|||
.cyItem { |
|||
height: 106rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
|
|||
.headIcon { |
|||
width: 42rpx; |
|||
height: 42rpx; |
|||
margin-right: 15rpx; |
|||
} |
|||
|
|||
.rightIcon { |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.cyItem:last-child { |
|||
border: none; |
|||
} |
|||
} |
|||
|
|||
.my-swipe { |
|||
// width: 100%; |
|||
margin: 0 30rpx; |
|||
margin-top: 37.3rpx; |
|||
} |
|||
|
|||
swiper { |
|||
height: 111rpx !important; |
|||
} |
|||
|
|||
.dfkBox { |
|||
width: 100%; |
|||
height: 111rpx; |
|||
background: #F7F7F7; |
|||
margin: 0 auto 30.64rpx; |
|||
// padding: 0.25rem; |
|||
display: flex; |
|||
} |
|||
|
|||
.dfkBox image { |
|||
width: 137rpx; |
|||
height: 111rpx; |
|||
border-radius: 13rpx; |
|||
flex-shrink: 0; |
|||
// margin-right: 16.7rpx; |
|||
} |
|||
|
|||
.dfkBox .contentBox { |
|||
padding-left: 5rpx; |
|||
padding-right: 5rpx; |
|||
height: 111rpx; |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
} |
|||
|
|||
// .van-count-down{ |
|||
// font-size: 0.39rem; |
|||
// font-family: PingFang SC; |
|||
// font-weight: 400; |
|||
// color: #FB6E4D; |
|||
// } |
|||
|
|||
.orderBtn { |
|||
width: 152rpx; |
|||
height: 56rpx; |
|||
background: linear-gradient(270deg, #FC5109, #FDC43A); |
|||
; |
|||
border-radius: 28rpx; |
|||
text-align: center; |
|||
line-height: 56rpx; |
|||
font-size: 27rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
// margin-left: 50rpx; |
|||
// margin-right: 20rpx; |
|||
} |
|||
|
|||
#contact { |
|||
-webkit-tap-highlight-color: transparent; |
|||
background-color: rgba(0, 0, 0, 0); |
|||
border-radius: 0; |
|||
box-sizing: border-box; |
|||
color: transparent; |
|||
cursor: pointer; |
|||
overflow: hidden; |
|||
padding: 0 27rpx; |
|||
position: relative; |
|||
text-align: center; |
|||
text-decoration: none; |
|||
border: transparent 0px solid; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 28rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #000000; |
|||
} |
|||
|
|||
button::after { |
|||
border: none; |
|||
background-color: rgba(0, 0, 0, 0); |
|||
} |
|||
|
|||
.more { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-color: rgba(0, 0, 0, .5); |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
|
|||
image { |
|||
width: 646rpx; |
|||
height: 959rpx; |
|||
} |
|||
|
|||
img { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,196 @@ |
|||
function getLocalFilePath(path) { |
|||
if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf('_downloads') === 0) { |
|||
return path |
|||
} |
|||
if (path.indexOf('file://') === 0) { |
|||
return path |
|||
} |
|||
if (path.indexOf('/storage/emulated/0/') === 0) { |
|||
return path |
|||
} |
|||
if (path.indexOf('/') === 0) { |
|||
var localFilePath = plus.io.convertAbsoluteFileSystem(path) |
|||
if (localFilePath !== path) { |
|||
return localFilePath |
|||
} else { |
|||
path = path.substr(1) |
|||
} |
|||
} |
|||
return '_www/' + path |
|||
} |
|||
|
|||
function dataUrlToBase64(str) { |
|||
var array = str.split(',') |
|||
return array[array.length - 1] |
|||
} |
|||
|
|||
var index = 0 |
|||
function getNewFileId() { |
|||
return Date.now() + String(index++) |
|||
} |
|||
|
|||
function biggerThan(v1, v2) { |
|||
var v1Array = v1.split('.') |
|||
var v2Array = v2.split('.') |
|||
var update = false |
|||
for (var index = 0; index < v2Array.length; index++) { |
|||
var diff = v1Array[index] - v2Array[index] |
|||
if (diff !== 0) { |
|||
update = diff > 0 |
|||
break |
|||
} |
|||
} |
|||
return update |
|||
} |
|||
|
|||
export function pathToBase64(path) { |
|||
return new Promise(function(resolve, reject) { |
|||
if (typeof window === 'object' && 'document' in window) { |
|||
if (typeof FileReader === 'function') { |
|||
var xhr = new XMLHttpRequest() |
|||
xhr.open('GET', path, true) |
|||
xhr.responseType = 'blob' |
|||
xhr.onload = function() { |
|||
if (this.status === 200) { |
|||
let fileReader = new FileReader() |
|||
fileReader.onload = function(e) { |
|||
resolve(e.target.result) |
|||
} |
|||
fileReader.onerror = reject |
|||
fileReader.readAsDataURL(this.response) |
|||
} |
|||
} |
|||
xhr.onerror = reject |
|||
xhr.send() |
|||
return |
|||
} |
|||
var canvas = document.createElement('canvas') |
|||
var c2x = canvas.getContext('2d') |
|||
var img = new Image |
|||
img.onload = function() { |
|||
canvas.width = img.width |
|||
canvas.height = img.height |
|||
c2x.drawImage(img, 0, 0) |
|||
resolve(canvas.toDataURL()) |
|||
canvas.height = canvas.width = 0 |
|||
} |
|||
img.onerror = reject |
|||
img.src = path |
|||
return |
|||
} |
|||
if (typeof plus === 'object') { |
|||
plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) { |
|||
entry.file(function(file) { |
|||
var fileReader = new plus.io.FileReader() |
|||
fileReader.onload = function(data) { |
|||
resolve(data.target.result) |
|||
} |
|||
fileReader.onerror = function(error) { |
|||
reject(error) |
|||
} |
|||
fileReader.readAsDataURL(file) |
|||
}, function(error) { |
|||
reject(error) |
|||
}) |
|||
}, function(error) { |
|||
reject(error) |
|||
}) |
|||
return |
|||
} |
|||
if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) { |
|||
wx.getFileSystemManager().readFile({ |
|||
filePath: path, |
|||
encoding: 'base64', |
|||
success: function(res) { |
|||
resolve('data:image/png;base64,' + res.data) |
|||
}, |
|||
fail: function(error) { |
|||
reject(error) |
|||
} |
|||
}) |
|||
return |
|||
} |
|||
reject(new Error('not support')) |
|||
}) |
|||
} |
|||
|
|||
export function base64ToPath(base64) { |
|||
return new Promise(function(resolve, reject) { |
|||
if (typeof window === 'object' && 'document' in window) { |
|||
base64 = base64.split(',') |
|||
var type = base64[0].match(/:(.*?);/)[1] |
|||
var str = atob(base64[1]) |
|||
var n = str.length |
|||
var array = new Uint8Array(n) |
|||
while (n--) { |
|||
array[n] = str.charCodeAt(n) |
|||
} |
|||
return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], { type: type }))) |
|||
} |
|||
var extName = base64.split(',')[0].match(/data\:\S+\/(\S+);/) |
|||
if (extName) { |
|||
extName = extName[1] |
|||
} else { |
|||
reject(new Error('base64 error')) |
|||
} |
|||
var fileName = getNewFileId() + '.' + extName |
|||
if (typeof plus === 'object') { |
|||
var basePath = '_doc' |
|||
var dirPath = 'uniapp_temp' |
|||
var filePath = basePath + '/' + dirPath + '/' + fileName |
|||
if (!biggerThan(plus.os.name === 'Android' ? '1.9.9.80627' : '1.9.9.80472', plus.runtime.innerVersion)) { |
|||
plus.io.resolveLocalFileSystemURL(basePath, function(entry) { |
|||
entry.getDirectory(dirPath, { |
|||
create: true, |
|||
exclusive: false, |
|||
}, function(entry) { |
|||
entry.getFile(fileName, { |
|||
create: true, |
|||
exclusive: false, |
|||
}, function(entry) { |
|||
entry.createWriter(function(writer) { |
|||
writer.onwrite = function() { |
|||
resolve(filePath) |
|||
} |
|||
writer.onerror = reject |
|||
writer.seek(0) |
|||
writer.writeAsBinary(dataUrlToBase64(base64)) |
|||
}, reject) |
|||
}, reject) |
|||
}, reject) |
|||
}, reject) |
|||
return |
|||
} |
|||
var bitmap = new plus.nativeObj.Bitmap(fileName) |
|||
bitmap.loadBase64Data(base64, function() { |
|||
bitmap.save(filePath, {}, function() { |
|||
bitmap.clear() |
|||
resolve(filePath) |
|||
}, function(error) { |
|||
bitmap.clear() |
|||
reject(error) |
|||
}) |
|||
}, function(error) { |
|||
bitmap.clear() |
|||
reject(error) |
|||
}) |
|||
return |
|||
} |
|||
if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) { |
|||
var filePath = wx.env.USER_DATA_PATH + '/' + fileName |
|||
wx.getFileSystemManager().writeFile({ |
|||
filePath: filePath, |
|||
data: dataUrlToBase64(base64), |
|||
encoding: 'base64', |
|||
success: function() { |
|||
resolve(filePath) |
|||
}, |
|||
fail: function(error) { |
|||
reject(error) |
|||
} |
|||
}) |
|||
return |
|||
} |
|||
reject(new Error('not support')) |
|||
}) |
|||
} |
|||
@ -0,0 +1,11 @@ |
|||
{ |
|||
"id": "mmmm-image-tools", |
|||
"name": "image-tools", |
|||
"version": "1.4.0", |
|||
"description": "图像转换工具，可用于图像和base64的转换", |
|||
"keywords": [ |
|||
"base64", |
|||
"保存", |
|||
"图像" |
|||
] |
|||
} |
|||
@ -0,0 +1,593 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<img src="https://static.ticket.sz-trip.com/hsrNewTown/images/calendar/topLeft.png" class="topLeft" @click="goBack"/> |
|||
|
|||
<view class="calendar"> |
|||
<view class="calendar-top flex-between"> |
|||
<view @click="preNextDate(0)"> |
|||
<img src="https://static.ticket.sz-trip.com/hsrNewTown/images/calendar/left.png" class="iconfont" /> |
|||
{{ monthShow ? '上一月' : '上一周' }} |
|||
</view> |
|||
<view>{{year}}年<span>{{month}}</span>月</view> |
|||
<view @click="preNextDate(1)"> |
|||
{{ monthShow ? '下一月' : '下一周' }} |
|||
<img src="https://static.ticket.sz-trip.com/hsrNewTown/images/calendar/right.png" class="iconfont" /> |
|||
</view> |
|||
</view> |
|||
<view class="calendar-bottom"> |
|||
<view class="week-item" v-for="(item,index) in weekList" :key="index"> |
|||
{{item}} |
|||
</view> |
|||
|
|||
<view v-for="(item, index) in everyDay" :key="item.day" class="day-box flex-center" :class="(nowDay > item.date) ? 'grayDate' : ''" v-if="monthShow"> |
|||
<view class="day-item" :class="selectDay == item.date ? 'daySelect' : ''" @click="changeDate(item.date)"> |
|||
{{ nowDay== item.date ? '今日' : item.day }} |
|||
<view class="day-point" v-if="(item.day && selectDay != item.date) && item.flag"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view v-for="(item, index) in weekDates" :key="index" class="day-box flex-center" :class="(nowDay > getNowTime(item)) ? 'grayDate' : ''" v-if="!monthShow"> |
|||
<view class="day-item" :class="selectDay == getNowTime(item) ? 'daySelect' : ''" @click="changeDate(getNowTime(item))"> |
|||
{{ nowDay == getNowTime(item) ? '今日' : getNowTime(item).slice(-2) }} |
|||
<view class="day-point" v-if="(item && selectDay != getNowTime(item)) && item.flag"></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 class="box"> |
|||
<view class="search-box"> |
|||
<img src="https://static.ticket.sz-trip.com/yandu/images/eventCalendar/search.png" class="search-img" /> |
|||
<input type="text" placeholder="搜索" v-model="keywords" @confirm="getList()"/> |
|||
</view> |
|||
|
|||
<view class="type-box flex-between"> |
|||
<view :class="['type-item',{'type-active': index == typeIndex}]" v-for="(item,index) in typeList" :key="index" @click="typeIndex = index;getList()"> |
|||
{{item.title}} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="item" v-for="(item,index) in list" :key="index"> |
|||
<image :src="showImg(item.image)" mode="aspectFill" class="item-img"></image> |
|||
<view class="content flex-column"> |
|||
<view class="title text-overflowRows">{{item.title}}</view> |
|||
<view class="tag text-overflow" v-if="item.keyword">{{item.keyword}}</view> |
|||
<view class="subtitle text-overflow" v-if="item.address">地址：{{item.address}}</view> |
|||
<view class="subtitle text-overflow" v-if="item.start_time && item.end_time">时间：{{item.start_time}} - {{item.end_time}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
weekList: ['日', '一', '二', '三', '四', '五', '六'], |
|||
monthShow: false, |
|||
year: 0, |
|||
month: 0, |
|||
day: 0, |
|||
week: '', |
|||
nowDay: '', |
|||
selectDay: '', |
|||
everyDay: [], |
|||
weekDates: [], |
|||
list: [], |
|||
keywords: '', |
|||
typeList: [ |
|||
{ |
|||
title: '全部', |
|||
id: '' |
|||
}, |
|||
{ |
|||
title: '景区活动', |
|||
id: '13' |
|||
}, |
|||
{ |
|||
title: '演出', |
|||
id: '14' |
|||
}, |
|||
{ |
|||
title: '展览', |
|||
id: '15' |
|||
}, |
|||
{ |
|||
title: '其他', |
|||
id: '16' |
|||
} |
|||
], |
|||
typeIndex: 0 |
|||
} |
|||
}, |
|||
onLoad() { |
|||
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()) |
|||
// if(uni.getSystemInfoSync().platform == 'ios'){ |
|||
// this.getEveryDay(this.year + '/' + this.month + '/' + this.day); |
|||
// }else{ |
|||
// this.getEveryDay(this.year + '-' + this.month); |
|||
// } |
|||
this.getWeekDates(new Date()) |
|||
|
|||
this.getList() |
|||
}, |
|||
methods: { |
|||
// 列表 |
|||
getList() { |
|||
this.Post({ |
|||
date: this.selectDay, |
|||
offset: 0, |
|||
limit: 100, |
|||
type_id: this.typeList[this.typeIndex].id, |
|||
title: this.keywords |
|||
},'/api/activity/getActivityCalendar').then(res => { |
|||
this.list = res.data |
|||
}) |
|||
}, |
|||
// 将日期格式/改为- |
|||
formatDate(dateStr) { |
|||
if (dateStr) { |
|||
return dateStr.replace(/^\D*(\d{4})\D*(\d{2})\D*(\d{2})\D*$/, '$1-$2-$3').replace(/^(\d{4})-(\d{0,2})-(\d{0,2})$/, (match, p1, p2, p3) => {return `${p1}-${String(p2).padStart(2, '0')}-${String(p3).padStart(2, '0')}`;}) |
|||
} |
|||
return |
|||
}, |
|||
// 获取当前日期是否有活动 |
|||
getActivityCalendarCount() { |
|||
let start = '' |
|||
let end = '' |
|||
if (!this.monthShow) { |
|||
start = this.getNowTime(this.weekDates[0]) |
|||
end = this.getNowTime(this.weekDates[6]) |
|||
} else{ |
|||
start = this.everyDay[0].date |
|||
end = this.everyDay.slice(-1)[0].date |
|||
} |
|||
|
|||
this.Post({ |
|||
begin_date: start, |
|||
end_date: end, |
|||
},'/api/activity/getActDateCount').then(res => { |
|||
if (!this.monthShow) { //按周展示 |
|||
this.weekDates.forEach(day=> { |
|||
const date = this.formatDate(this.getNowTime(day)) |
|||
day.flag = 0 |
|||
res.data.forEach(item=> { |
|||
if (date == item) { |
|||
day.flag = 1 |
|||
} |
|||
}) |
|||
}) |
|||
} else{ //按月展示 |
|||
this.everyDay.forEach(day=> { |
|||
day.flag = 0 |
|||
res.data.forEach(item=> { |
|||
if (this.formatDate(day.date) == item) { |
|||
day.flag = 1 |
|||
} |
|||
}) |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// 获取当前日期 |
|||
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; |
|||
console.log(this.everyDay) |
|||
this.getActivityCalendarCount(); |
|||
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 |
|||
|
|||
if(this.weekDates.length > 0) this.getActivityCalendarCount(); |
|||
}, |
|||
// 切换上一周月、下一周月 |
|||
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() |
|||
} |
|||
} |
|||
this.getActivityCalendarCount() |
|||
}, |
|||
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)) |
|||
} |
|||
}, |
|||
// 选中日期 |
|||
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.pageNo = 0 |
|||
this.list = [] |
|||
this.getList() |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
min-height: 100vh; |
|||
overflow-x: hidden; |
|||
background: url('https://static.ticket.sz-trip.com/yandu/images/eventCalendar/topBg.png') no-repeat; |
|||
background-size: 100%; |
|||
background-color: #F7F7F7; |
|||
padding-bottom: 100rpx; |
|||
} |
|||
|
|||
.topLeft { |
|||
position: absolute; |
|||
left: 26rpx; |
|||
top: 101rpx; |
|||
width: 53.33rpx; |
|||
height: 53.33rpx; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.topBg { |
|||
width: 750rpx; |
|||
height: 520rpx; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
.calendar{ |
|||
padding: 0 26rpx; |
|||
margin-top: 170rpx; |
|||
|
|||
.calendar-top{ |
|||
height: 109rpx; |
|||
font-size: 27rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #000000; |
|||
|
|||
view:nth-child(2){ |
|||
font-size: 31rpx; |
|||
font-weight: bold; |
|||
|
|||
span { |
|||
font-size: 40rpx; |
|||
} |
|||
} |
|||
|
|||
.iconfont{ |
|||
width: 20rpx; |
|||
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; |
|||
|
|||
.day-point{ |
|||
width: 5rpx; |
|||
height: 5rpx; |
|||
background: #FF3615; |
|||
border-radius: 50%; |
|||
margin: 5rpx auto 0; |
|||
} |
|||
} |
|||
|
|||
.daySelect{ |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
text-align: center; |
|||
line-height: 80rpx; |
|||
background: linear-gradient(90deg, #9EE4FE, #7FD491); |
|||
font-size: 29rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #000000; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
|
|||
.grayDate{ |
|||
.day-item{ |
|||
color: #999999; |
|||
|
|||
.day-point{ |
|||
background: #CCCCCC; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.iconfont{ |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
// position: absolute; |
|||
// left: 50%; |
|||
// right: 0; |
|||
// margin-left: -18rpx; |
|||
// bottom: 36rpx; |
|||
display: block; |
|||
margin: 0 auto; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.box { |
|||
width: 697rpx; |
|||
height: auto; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
margin: 26.67rpx auto 0; |
|||
padding: 27rpx 13rpx; |
|||
|
|||
.search-box { |
|||
width: 670rpx; |
|||
height: 53rpx; |
|||
background: #F7F7F7; |
|||
border-radius: 13rpx; |
|||
padding: 0 12rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.search-img { |
|||
width: 26.67rpx; |
|||
height: 26.67rpx; |
|||
} |
|||
|
|||
input { |
|||
margin-left: 11rpx; |
|||
width: 610rpx; |
|||
line-height: 53rpx; |
|||
font-weight: 400; |
|||
font-size: 25rpx; |
|||
color: #000; |
|||
} |
|||
} |
|||
|
|||
.type-box { |
|||
height: 134rpx; |
|||
|
|||
.type-item { |
|||
line-height: 54rpx; |
|||
border-radius: 13rpx; |
|||
border: 1rpx solid #999999; |
|||
padding: 0 20rpx; |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #666666; |
|||
} |
|||
.type-active { |
|||
background: linear-gradient(90deg, #9EE4FE, #7FD491); |
|||
font-weight: bold; |
|||
color: #000000; |
|||
border: none; |
|||
} |
|||
} |
|||
|
|||
.item { |
|||
display: flex; |
|||
margin-bottom: 20rpx; |
|||
|
|||
.item-img { |
|||
width: 187rpx; |
|||
height: 236rpx; |
|||
border-radius: 13rpx; |
|||
} |
|||
|
|||
.content { |
|||
width: 447rpx; |
|||
height: 236rpx; |
|||
padding: 15rpx 0; |
|||
margin-left: 15rpx; |
|||
justify-content: space-between; |
|||
|
|||
.title { |
|||
width: 447rpx; |
|||
font-weight: bold; |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
.tag { |
|||
padding: 0 10rpx; |
|||
width: fit-content; |
|||
max-width: 400rpx; |
|||
line-height: 36rpx; |
|||
border-radius: 7rpx; |
|||
border: 1rpx solid #71B580; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #71B580; |
|||
} |
|||
|
|||
.subtitle { |
|||
width: 447rpx; |
|||
font-weight: 400; |
|||
font-size: 24rpx; |
|||
color: #000000; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,224 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="box"> |
|||
<view class="info"> |
|||
<image class="img" src="" mode=""></image> |
|||
<view class="main"> |
|||
<view class="title text-overflowRows"> |
|||
名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称 |
|||
</view> |
|||
<view class="main-bottom"> |
|||
<view class="price"> |
|||
9.9 |
|||
</view> |
|||
<view class="num-box"> |
|||
<view class="del">-</view> |
|||
<view class="num">1</view> |
|||
<view class="add">+</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="msg-box"> |
|||
<view class="left-text"> |
|||
优惠券 |
|||
</view> |
|||
<view class="coupon" v-if="!coupon"> |
|||
暂无可用优惠券 |
|||
<image class="rightIcon" :src="showImg('/uploads/20240827/96dee582e7ce3b8293e659bb1dc87433.png')" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="name-box"> |
|||
<view class="left-text"> |
|||
联系人： |
|||
</view> |
|||
<input type="text" placeholder="输入您的名字" /> |
|||
</view> |
|||
<view class="phone-box"> |
|||
<view class="" style="display: flex;"> |
|||
<view class="left-text"> |
|||
手机号： |
|||
</view> |
|||
<input type="number" /> |
|||
</view> |
|||
<image class="cha" :src="showImg('/uploads/20240827/5e5970926e92a2109da55bfe32a47e4b.png')" mode=""></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="bottom"> |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
coupon:null, |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
background: #F7F7F7; |
|||
min-height: 100vh; |
|||
padding: 26rpx 25.33rpx 168rpx; |
|||
} |
|||
|
|||
.box { |
|||
width: 699rpx; |
|||
// height: 553rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
padding: 28rpx 21.33rpx 0; |
|||
} |
|||
|
|||
.bottom { |
|||
height: 148rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1); |
|||
padding: 20.67rpx 26.67rpx 40.67rpx; |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
} |
|||
|
|||
.img { |
|||
width: 167rpx; |
|||
height: 160rpx; |
|||
background: #666666; |
|||
border-radius: 7rpx; |
|||
margin-right: 29.33rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.info { |
|||
display: flex; |
|||
margin-bottom: 22rpx; |
|||
} |
|||
|
|||
.main { |
|||
padding-top: 8.67rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.title { |
|||
width: 429rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 33rpx; |
|||
color: #333333; |
|||
} |
|||
|
|||
.main-bottom { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.num-box { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.price { |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
font-size: 33rpx; |
|||
color: #000000; |
|||
} |
|||
.price::before { |
|||
content: "￥"; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.del { |
|||
width: 47rpx; |
|||
height: 47rpx; |
|||
background: #E8E8E8; |
|||
border-radius: 50%; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
font-size: 34rpx; |
|||
color: #999999; |
|||
text-align: center; |
|||
line-height: 47rpx; |
|||
} |
|||
|
|||
.add { |
|||
width: 47rpx; |
|||
height: 47rpx; |
|||
background: #71B580; |
|||
border-radius: 50%; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
font-size: 34rpx; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
line-height: 47rpx; |
|||
} |
|||
|
|||
.num { |
|||
margin: 0 29rpx; |
|||
} |
|||
|
|||
.msg-box { |
|||
padding: 42rpx 0; |
|||
border-bottom: 1rpx solid #CCC; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.name-box { |
|||
padding: 42rpx 0; |
|||
display: flex; |
|||
border-bottom: 1rpx solid #CCC; |
|||
} |
|||
|
|||
.phone-box { |
|||
padding: 42rpx 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.rightIcon { |
|||
width: 10.67rpx; |
|||
height: 20rpx; |
|||
margin-left: 19.33rpx; |
|||
} |
|||
|
|||
.left-text { |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
.coupon { |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
font-size: 27rpx; |
|||
color: #999999; |
|||
} |
|||
|
|||
.cha { |
|||
width: 26rpx; |
|||
height: 25.33rpx; |
|||
} |
|||
|
|||
input { |
|||
margin-left: 20rpx; |
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,22 @@ |
|||
<template> |
|||
<view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -0,0 +1,186 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="line-list"> |
|||
<view class="form"> |
|||
<view class="form-item"> |
|||
<view class="form-title"> |
|||
姓名: |
|||
</view> |
|||
<input type="text" v-model="form.name" placeholder="请填写您的姓名" |
|||
placeholder-style="color:#999999;font-size:31rpx"> |
|||
</view> |
|||
<view class="form-item"> |
|||
<view class="form-title"> |
|||
手机号: |
|||
</view> |
|||
<input type="number" v-model="form.phone" placeholder="请填写您的联系方式" maxlength="11" |
|||
placeholder-style="color:#999999;font-size:31rpx"> |
|||
</view> |
|||
</view> |
|||
<view class="content"> |
|||
<view class="content-name"> |
|||
反馈内容: |
|||
</view> |
|||
<textarea cols="30" rows="10" v-model="form.content" placeholder="请填写具体的问题内容" |
|||
placeholder-style="color: #999999;font-size: 31rpx;" maxlength="500"> |
|||
|
|||
</textarea> |
|||
<span>{{form.content.length}}/500</span> |
|||
</view> |
|||
</view> |
|||
|
|||
<view :class="['btn',{'actBtn':form.name&&form.phone&&form.content}]" @click="sendForm()"> |
|||
提交 |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
form: { |
|||
name: '', |
|||
phone: '', |
|||
content: '', |
|||
}, |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
methods: { |
|||
sendForm() { |
|||
if (!this.idChinaName(this.form.name)) { |
|||
uni.showToast({ |
|||
title: "请输入正确的姓名", |
|||
icon: "none" |
|||
}) |
|||
return false |
|||
} |
|||
if (!this.IsTel(this.form.phone)) { |
|||
uni.showToast({ |
|||
title: "请输入正确的手机号", |
|||
icon: "none" |
|||
}) |
|||
return false |
|||
} |
|||
if (this.form.content.replace(/\s*/g, "").length < 15) { |
|||
uni.showToast({ |
|||
title: "请输入15字以上的建议或反馈", |
|||
icon: "none" |
|||
}) |
|||
return false |
|||
} |
|||
this.Post({ |
|||
username: this.form.name, |
|||
mobile: this.form.phone, |
|||
content: this.form.content |
|||
}, "/api/suggest/add").then(res => { |
|||
if (res) { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: "none" |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
view { |
|||
box-sizing: border-box; |
|||
font-family: PingFang SC; |
|||
} |
|||
|
|||
.bg { |
|||
min-height: 100vh; |
|||
background-color: rgba(255, 255, 255, 1); |
|||
padding-top: 35rpx; |
|||
overflow: hidden; |
|||
padding-bottom: 160rpx; |
|||
} |
|||
|
|||
.line-list { |
|||
width: 697rpx; |
|||
margin: 0 auto; |
|||
|
|||
.form { |
|||
.form-item { |
|||
width: 697rpx; |
|||
height: 120rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
border-bottom: #D8D8D8 solid 1rpx; |
|||
|
|||
.form-title { |
|||
width: 150rpx; |
|||
font-size: 31rpx; |
|||
font-weight: 500; |
|||
color: #333333; |
|||
} |
|||
|
|||
|
|||
} |
|||
} |
|||
|
|||
.content { |
|||
margin: 0 auto; |
|||
margin-top: 36rpx; |
|||
width: 697rpx; |
|||
position: relative; |
|||
|
|||
span { |
|||
font-weight: 400; |
|||
font-size: 24rpx; |
|||
color: #999999; |
|||
position: absolute; |
|||
right: 22rpx; |
|||
bottom: 14rpx; |
|||
} |
|||
|
|||
.content-name { |
|||
font-size: 31rpx; |
|||
font-weight: 500; |
|||
color: #333333; |
|||
} |
|||
|
|||
textarea { |
|||
width: 657rpx; |
|||
height: 243rpx; |
|||
background: #F7F7F7; |
|||
border-radius: 13rpx; |
|||
padding: 20rpx; |
|||
margin-top: 42rpx; |
|||
font-size: 31rpx; |
|||
font-weight: 500; |
|||
color: #333333; |
|||
padding-bottom: 45rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
width: 697rpx; |
|||
height: 80rpx; |
|||
background: #CCCCCC; |
|||
border-radius: 40rpx; |
|||
margin: 0 auto; |
|||
margin-top: 160rpx; |
|||
text-align: center; |
|||
line-height: 80rpx; |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
position: absolute; |
|||
left: 26.5rpx; |
|||
bottom: 46rpx; |
|||
|
|||
} |
|||
|
|||
.actBtn { |
|||
background: linear-gradient(90deg, #9EE4FE, #7FD491); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,350 @@ |
|||
<template> |
|||
<view v-if="info"> |
|||
<view class="user-other-info"> |
|||
<div class="info-avatar-top"> |
|||
<span>头像</span> |
|||
<view @click="uploadImg()"> |
|||
<image :src="showImg(info.avatar)" mode="aspectFill" |
|||
style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image> |
|||
</view> |
|||
</div> |
|||
<navigator url="/subPackages/user/changeNickname" tag="view" class="userinfo-item"> |
|||
<span>姓名</span> |
|||
<view>{{nickname}}</view> |
|||
</navigator> |
|||
<view class="userinfo-item" @click="showSexSelect = true"> |
|||
<span>性别</span> |
|||
<!-- <view>{{sexes[info.gender]}}</view> --> |
|||
<radio-group @change="changesex"> |
|||
<label style="margin-right: 15rpx;" v-for="(item,index) in sexes" :key="index"> |
|||
<radio color="#FEB419" :value="item.value" :checked="index === info.gender-1" />{{item.text}} |
|||
</label> |
|||
</radio-group> |
|||
</view> |
|||
<navigator url="/subPackages/user/bindTel" class="userinfo-item"> |
|||
<span>手机号</span> |
|||
<view>{{info.mobile}}</view> |
|||
</navigator> |
|||
<view class="userinfo-item"> |
|||
<span>生日</span> |
|||
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"> |
|||
<view class="uni-input">{{birthday}}</view> |
|||
</picker> |
|||
</view> |
|||
<view class="btn-tao" @click="submit">保存</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {pathToBase64} from "@/static/js/mmmm-image-tools/index.js" |
|||
export default { |
|||
name: "Profile", |
|||
data() { |
|||
const currentDate = this.getDate({ |
|||
format: true |
|||
}) |
|||
return { |
|||
date: currentDate, |
|||
info: null, |
|||
showSexSelect: false, |
|||
sexes: [{ |
|||
value: '1', |
|||
text: '男' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
text: '女' |
|||
} |
|||
], |
|||
today: null, |
|||
showCropper: false, |
|||
nickname: '', |
|||
gender: '', |
|||
birthday: '', |
|||
email: '', |
|||
fileList1: [], |
|||
startDate: '1900-1-1', |
|||
endDate: '2050-1-1' |
|||
} |
|||
}, |
|||
onShow() { |
|||
console.log(this.$store.state.user.userInfo,uni.getStorageSync('userInfo')) |
|||
this.getList() |
|||
}, |
|||
computed: { |
|||
// startDate() { |
|||
// return this.getDate('start'); |
|||
// }, |
|||
// endDate() { |
|||
// return this.getDate('end'); |
|||
// } |
|||
}, |
|||
methods: { |
|||
getFile(e) { |
|||
console.log(e) |
|||
}, |
|||
getList() { |
|||
let today = new Date(); |
|||
today = today.getFullYear() + "/" + (today.getMonth() + 1) + "/" + today.getDate(); |
|||
this.today = today; |
|||
this.Post({}, "/api/user/userInfo").then(res => { |
|||
if (!res.data.birthday) { |
|||
let date = new Date(); |
|||
res.data.birthday = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date |
|||
.getDate(); |
|||
} |
|||
this.info = res.data; |
|||
this.nickname = this.info.nickname |
|||
this.email = this.info.email |
|||
this.birthday = this.info.birthday |
|||
this.gender = this.info.gender |
|||
this.info.token = JSON.parse(uni.getStorageSync('userInfo')).token || this.$store.state.user.userInfo.token || '2dd9b712-f118-41f6-b3a8-602e4fbb0ce3' |
|||
console.log(this.info) |
|||
this.$store.commit('changeUserInfo', this.info) |
|||
}) |
|||
}, |
|||
uploadImg() { |
|||
uni.chooseImage({ |
|||
success: (chooseImageRes) => { |
|||
const tempFilePaths = chooseImageRes.tempFilePaths; |
|||
// // #ifdef MP-WEIXIN |
|||
// uni.getFileSystemManager().readFile({ |
|||
// filePath: tempFilePaths[0], |
|||
// encoding: 'base64', |
|||
// success: res => { |
|||
// this.Post({ |
|||
// method: 'POST', |
|||
// base64: 'data:image/png;base64,' + res.data |
|||
// }, '/api/common/base64').then(res => { |
|||
// if (res.data) { |
|||
// this.Post({ |
|||
// avatar: res.data |
|||
// }, '/api/user/profile').then(res => { |
|||
// uni.showModal({ |
|||
// title: '提示', |
|||
// content: res.msg, |
|||
// showCancel: false, |
|||
// success: res => { |
|||
// if (res.confirm) { |
|||
// this.getList() |
|||
// } |
|||
// } |
|||
// }) |
|||
// }) |
|||
// } |
|||
// }) |
|||
// } |
|||
// }) |
|||
// // #endif |
|||
|
|||
pathToBase64(tempFilePaths[0]).then(base64 => { |
|||
this.Post({ |
|||
method: 'POST', |
|||
base64: base64 |
|||
}, '/api/common/base64').then(res => { |
|||
if (res.data) { |
|||
this.Post({ |
|||
avatar: res.data |
|||
}, '/api/user/profile').then(res => { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: res.msg, |
|||
showCancel: false, |
|||
success: res => { |
|||
if (res.confirm) { |
|||
this.getList() |
|||
} |
|||
} |
|||
}) |
|||
}) |
|||
} |
|||
}) |
|||
}) |
|||
} |
|||
}); |
|||
}, |
|||
//生日 |
|||
bindDateChange: function(e) { |
|||
this.birthday = e.detail.value |
|||
}, |
|||
getDate(type) { |
|||
const date = new Date(); |
|||
let year = date.getFullYear(); |
|||
let month = date.getMonth() + 1; |
|||
let day = date.getDate(); |
|||
|
|||
if (type === 'start') { |
|||
year = year - 60; |
|||
} else if (type === 'end') { |
|||
year = year + 2; |
|||
} |
|||
month = month > 9 ? month : '0' + month; |
|||
day = day > 9 ? day : '0' + day; |
|||
return `${year}/${month}/${day}`; |
|||
}, |
|||
changesex(value) { |
|||
this.gender = value.detail.value |
|||
}, |
|||
submit() { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '确认修改您的信息？', |
|||
success: res => { |
|||
if (res.confirm) { |
|||
this.Post({ |
|||
nickname: this.nickname, |
|||
gender: this.gender, |
|||
birthday: this.birthday |
|||
}, '/api/user/profile').then(res => { |
|||
console.log(res) |
|||
if (res.code == 200) { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: res.msg, |
|||
showCancel: false, |
|||
success: res => { |
|||
if (res.confirm) { |
|||
this.getList() |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
view { |
|||
box-sizing: content-box; |
|||
} |
|||
.info-avatar-top { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
font-size: 30rpx; |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
padding: 40rpx 0; |
|||
height: 48rpx; |
|||
color: #333; |
|||
align-items: center; |
|||
} |
|||
.info-avatar-top view{ |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.info-avatar-top view:after{ |
|||
font-family: "iconfont"; |
|||
content: "\e62e"; |
|||
font-size: 26rpx; |
|||
font-weight: bold; |
|||
margin-left: 6rpx; |
|||
} |
|||
.info-avatar-top img { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border-radius: 50%; |
|||
margin-right: 10rpx; |
|||
} |
|||
|
|||
.change-avatar-btn { |
|||
color: #FFF; |
|||
width: 220rpx; |
|||
margin: 0 auto; |
|||
line-height: 70rpx; |
|||
border-radius: 20rpx; |
|||
background: #4C93FF; |
|||
position: relative; |
|||
font-size: 34rpx; |
|||
} |
|||
|
|||
.change-avatar-btn input { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
opacity: 0; |
|||
} |
|||
|
|||
.user-other-info { |
|||
margin: 30rpx; |
|||
} |
|||
|
|||
.userinfo-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
font-size: 30rpx; |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
padding: 40rpx 0; |
|||
height: 48rpx; |
|||
color: #333; |
|||
} |
|||
|
|||
.info-avatar-top span { |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.userinfo-item span { |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.userinfo-item view:after, |
|||
.birthday-box:after { |
|||
font-family: "iconfont"; |
|||
content: "\e62e"; |
|||
font-size: 26rpx; |
|||
font-weight: bold; |
|||
margin-left: 6rpx; |
|||
} |
|||
|
|||
.birthday-box { |
|||
text-align: right; |
|||
} |
|||
|
|||
.cropper { |
|||
width: auto; |
|||
height: 100%; |
|||
} |
|||
|
|||
.cropper-content { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
z-index: 1000; |
|||
} |
|||
|
|||
.dialog-footer .change-avatar-btn { |
|||
position: fixed; |
|||
text-align: center; |
|||
bottom: 80rpx; |
|||
left: 50%; |
|||
margin-left: -110rpx; |
|||
} |
|||
|
|||
.btn-tao { |
|||
text-align: center; |
|||
font-size: 30rpx; |
|||
width: 697rpx; |
|||
height: 80rpx; |
|||
background: linear-gradient(90deg, #F84A56, #FF9834); |
|||
border-radius: 40rpx; |
|||
line-height: 80rpx; |
|||
color: #FFFFFF; |
|||
position: fixed; |
|||
left: 26rpx; |
|||
bottom: 100rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,77 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="cancat-nav flex-around"> |
|||
<view :class="['concat-nav-item',showType===0?'active':'']" @click="showType=0"> |
|||
<view>出行人信息</view> |
|||
<view v-if="showType===0" class="active-bar"></view> |
|||
</view> |
|||
<view :class="['concat-nav-item',showType===1?'active':'']" @click="showType=1"> |
|||
<view>收货地址</view> |
|||
<view v-if="showType===1" class="active-bar"></view> |
|||
</view> |
|||
</view> |
|||
<view class="concat-detail"> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "travelerList", |
|||
data() { |
|||
return { |
|||
showType: 0 |
|||
}; |
|||
}, |
|||
onShow() { |
|||
this.$nextTick(()=>{ |
|||
this.init() |
|||
}) |
|||
}, |
|||
methods: { |
|||
init () { |
|||
if (this.showType === 0 && this.$refs.travelListVueRef) { |
|||
this.$refs.travelListVueRef.getList() |
|||
} else if (this.showType === 1 && this.$refs.selfPickupVueRef) { |
|||
this.$refs.selfPickupVueRef.getList() |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
position: relative; |
|||
background: #F7F7F7; |
|||
height: 100vh; |
|||
overflow-x: hidden; |
|||
} |
|||
.cancat-nav{ |
|||
width: 100%; |
|||
display: flex; |
|||
height: 112rpx; |
|||
flex-shrink: 0; |
|||
.concat-nav-item{ |
|||
ffont-weight: 500; |
|||
font-size: 35rpx; |
|||
color: #000000; |
|||
text-align: center; |
|||
} |
|||
.concat-nav-item.active{ |
|||
color: #000000; |
|||
} |
|||
.active-bar{ |
|||
width: 100%; |
|||
height: 11rpx; |
|||
background: #71B580; |
|||
} |
|||
} |
|||
.concat-detail{ |
|||
flex: 1; |
|||
height: 10rpx; |
|||
overflow: hidden; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue