@ -0,0 +1,106 @@ | |||
<template> | |||
<view class="grid"> | |||
<view class="item" style="--color : #5baaff"> | |||
<!-- <image src="/static/image/activity/h.png" mode=""></image> --> | |||
<uv-icon size="40rpx" color="#5baaff" name="tags"></uv-icon> | |||
<view class="text"> | |||
{{ item.type }} | |||
</view> | |||
</view> | |||
<view class="item" | |||
style="--color : #f56c6c"> | |||
<!-- <image src="/static/image/activity/price.png" mode=""></image> --> | |||
<uv-icon size="40rpx" color="#f56c6c" name="integral"></uv-icon> | |||
<view class="text" | |||
v-if="item.price"> | |||
{{ item.price }}元/人 | |||
</view> | |||
<view class="text" | |||
v-else> | |||
免费 | |||
</view> | |||
</view> | |||
<view class="item" style="--color : #5ac725"> | |||
<uv-icon size="40rpx" color="#5ac725" name="account"></uv-icon> | |||
<view class="text" | |||
v-if="item.sum"> | |||
{{ item.num }}/{{ item.sum }}人 | |||
</view> | |||
<view class="text" | |||
v-else> | |||
{{ item.num }}/不限 | |||
</view> | |||
</view> | |||
<view class="addUser" @click.stop="addUser"> | |||
<uv-icon size="40rpx" color="#5baaff" name="plus-circle"></uv-icon> | |||
加入 | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
props: { | |||
item: {}, | |||
}, | |||
data() { | |||
return { | |||
} | |||
}, | |||
methods: { | |||
addUser() { | |||
uni.makePhoneCall({ | |||
phoneNumber: this.item.phone, | |||
}) | |||
}, | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.grid { | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
padding: 20rpx 0; | |||
image { | |||
width: 30rpx; | |||
height: 30rpx; | |||
} | |||
.item { | |||
display: flex; | |||
align-items: center; | |||
font-size: 26rpx; | |||
color: var(--color); | |||
.text { | |||
margin-left: 4rpx; | |||
} | |||
} | |||
.addUser { | |||
display: flex; | |||
align-items: center; | |||
font-size: 26rpx; | |||
color: $uni-color; | |||
margin-left: 10rpx; | |||
background: rgba($uni-color, 0.2); | |||
padding: 10rpx 20rpx; | |||
border-radius: 20rpx; | |||
.text { | |||
margin-left: 4rpx; | |||
} | |||
} | |||
} | |||
</style> |
@ -0,0 +1,81 @@ | |||
<template> | |||
<view> | |||
<view class="dynamics" v-html="$utils.stringFormatHtml(item.title)"> | |||
</view> | |||
<view class="address" | |||
@click.stop="openLocation(item.latitude, item.longitude)" | |||
v-if="item.address"> | |||
<uv-icon size="30rpx" name="map"></uv-icon> | |||
<view class="text-ellipsis"> | |||
{{ item.address }} | |||
</view> | |||
</view> | |||
<view class="Artworkimages"> | |||
<view class="wrokimg" @click.stop="previewImage(images, i)" :key="i" v-for="(img, i) in images"> | |||
<image :src="img" mode="aspectFill"></image> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
props: { | |||
item: {}, | |||
}, | |||
computed : { | |||
images(){ | |||
if(!this.item.image){ | |||
return [] | |||
} | |||
return this.item.image.split(',') | |||
} | |||
}, | |||
data() { | |||
return { | |||
} | |||
}, | |||
methods: { | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.dynamics { | |||
margin-top: 20rpx; | |||
font-size: 28rpx; | |||
letter-spacing: 3rpx; | |||
} | |||
.address { | |||
font-size: 24rpx; | |||
margin: 20rpx 0; | |||
display: flex; | |||
align-items: center; | |||
background-color: #eee; | |||
padding: 10rpx 20rpx; | |||
width: fit-content; | |||
border-radius: 40rpx; | |||
max-width: calc(100% - 40rpx); | |||
} | |||
.Artworkimages { | |||
display: flex; | |||
flex-wrap: wrap; | |||
.wrokimg { | |||
margin: 10rpx; | |||
image { | |||
height: 190rpx; | |||
width: 190rpx; | |||
border-radius: 20rpx; | |||
} | |||
} | |||
} | |||
</style> |
@ -0,0 +1,134 @@ | |||
<template> | |||
<view class="box" :style="{'--sexcolor' : sex[item.sex].color}"> | |||
<view class="headPortraitimg"> | |||
<image :src="item.userImage" @click.stop="previewImage([item.userImage])" mode="aspectFill"></image> | |||
</view> | |||
<view class="YaoduUniversalWall"> | |||
<view class="heide"> | |||
<view class="username text-ellipsis"> | |||
{{ item.userName }} | |||
</view> | |||
<view class="inde" v-if="item.sex"> | |||
<!-- 性别 --> | |||
{{ item.sex }} | |||
</view> | |||
<view class="inde" v-if="item.yearDate"> | |||
<!-- 年份 --> | |||
{{ item.yearDate }} | |||
</view> | |||
<view class="inde" v-if="item.addId"> | |||
<!-- 地址 --> | |||
{{ item.addId }} | |||
</view> | |||
<view class="authentication" v-if="item.isContent"> | |||
<!-- 个人认证 --> | |||
{{ item.isContent }} | |||
</view> | |||
</view> | |||
<view class="Times"> | |||
<view class="TimeMonth"> | |||
<!-- 10-08 --> | |||
{{ item.createTime }}发布 | |||
</view> | |||
<!-- <view class="Month"> | |||
12:34 | |||
</view> --> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
import mixinsSex from '@/mixins/sex.js' | |||
export default { | |||
mixins: [mixinsSex], | |||
props: { | |||
item: {}, | |||
}, | |||
data() { | |||
return { | |||
} | |||
}, | |||
methods: { | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.box { | |||
display: flex; | |||
align-items: center; | |||
.headPortraitimg { | |||
width: 100rpx; | |||
height: 100rpx; | |||
border-radius: 15rpx; | |||
overflow: hidden; | |||
image { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
} | |||
.YaoduUniversalWall { | |||
padding: 0rpx 10rpx; | |||
.username { | |||
max-width: 200rpx; | |||
} | |||
.heide { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
.inde { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
padding: 0rpx 10rpx; | |||
margin: 0rpx 5rpx; | |||
font-size: 20rpx; | |||
height: 30rpx; | |||
color: white; | |||
// background-color: rgb(124, 136, 242); | |||
background-color: var(--sexcolor); | |||
border-radius: 7rpx; | |||
flex-shrink: 0; | |||
} | |||
.authentication { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
padding: 0rpx 10rpx; | |||
margin: 0rpx 5rpx; | |||
font-size: 20rpx; | |||
height: 34rpx; | |||
padding: 0rpx 10rpx; | |||
color: white; | |||
background-color: #ffd036; | |||
border-radius: 7rpx; | |||
flex-shrink: 0; | |||
} | |||
.Times { | |||
display: flex; | |||
padding: 5rpx 0rpx; | |||
font-size: 20rpx; | |||
margin-top: 10rpx; | |||
.Month { | |||
margin: 0rpx 15rpx; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@ -1,22 +1,52 @@ | |||
<template> | |||
<view class="page pageList"> | |||
<navbar title="找车" leftClick @leftClick="$utils.navigateBack" /> | |||
<view | |||
style="padding: 10rpx 30rpx;"> | |||
<uv-search | |||
bgColor="#fff" | |||
@search="getData" | |||
@custom="getData" | |||
searchIconSize="30rpx" | |||
placeholder="请输入搜索关键字..." | |||
v-model="queryParams.title"></uv-search> | |||
</view> | |||
<view class="list"> | |||
<cartItem | |||
:key="index" | |||
v-for="(item, index) in list" | |||
:item="item" | |||
@click="$utils.navigateTo('/pages_order/car/carListDetail?id=' + item.id)" | |||
/> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
import mixinsList from '@/mixins/list.js' | |||
import cartItem from '../components/list/cart/cartItem.vue' | |||
export default { | |||
mixins: [mixinsList], | |||
components : { | |||
cartItem, | |||
}, | |||
data() { | |||
return { | |||
mixinsListApi : 'getCatPage', | |||
} | |||
}, | |||
methods: { | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.page{ | |||
.list{ | |||
padding: 0 20rpx; | |||
} | |||
} | |||
</style> |
@ -1,22 +1,162 @@ | |||
<template> | |||
<view class="page pageList"> | |||
<view class="postDetail"> | |||
<navbar leftClick @leftClick="$utils.navigateBack" title="详情" /> | |||
<view class="swipe"> | |||
<uv-swiper | |||
:list="[detail.imageTitle]" | |||
indicator | |||
height="420rpx"></uv-swiper> | |||
</view> | |||
<view class="box"> | |||
<view class="title"> | |||
{{ detail.title }} | |||
</view> | |||
<view class="createBy"> | |||
{{ detail.num }}余座 | |||
{{ detail.startTime }}出发 | |||
</view> | |||
<view class="createBy"> | |||
{{ detail.startAddress }} | |||
到 | |||
{{ detail.endAddress }} | |||
</view> | |||
<view class="createBy"> | |||
<view class=""> | |||
{{ $dayjs(detail.createTime).format('YYYY-MM-DD') }} | |||
</view> | |||
<view class="phone" | |||
v-if="detail.phone" | |||
@click.stop="callPhone"> | |||
<image src="/static/image/home/phone.png" mode=""></image> | |||
联系司机 | |||
</view> | |||
</view> | |||
</view> | |||
<commentList | |||
@getData="getData" | |||
:list="list" | |||
:params="params" | |||
/> | |||
</view> | |||
</template> | |||
<script> | |||
import mixinsList from '@/mixins/list.js' | |||
import commentList from '../components/list/comment/commentList.vue' | |||
export default { | |||
mixins: [mixinsList], | |||
components: { | |||
commentList | |||
}, | |||
data() { | |||
return { | |||
detail: {}, | |||
mixinsListApi : 'getCommentPage', | |||
params : { | |||
type : '7', | |||
orderId : '', | |||
name : '', | |||
}, | |||
id : 0, | |||
} | |||
}, | |||
methods: { | |||
onLoad(options) { | |||
// this.$route.query的参数 | |||
console.log(options) | |||
this.id = options.id | |||
this.queryParams.type = this.params.type | |||
this.queryParams.orderId = options.id | |||
this.params.orderId = options.id | |||
}, | |||
onPullDownRefresh(){ | |||
this.getDetail() | |||
}, | |||
onShow() { | |||
this.getDetail() | |||
}, | |||
onShareAppMessage(res) { | |||
return { | |||
title: this.detail.title, | |||
path: '/pages_order/scenicSpot/scenicSpotDetail?id=' + this.id | |||
} | |||
}, | |||
methods: { | |||
getDetail() { | |||
this.$api('getCatDetail', { | |||
id : this.id | |||
}, res => { | |||
uni.stopPullDownRefresh() | |||
if (res.code == 200) { | |||
this.params.title = res.result.title | |||
this.detail = res.result | |||
} | |||
}) | |||
}, | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
<style lang="scss" scoped> | |||
.postDetail { | |||
.box { | |||
padding: 20rpx; | |||
width: 100vw; | |||
background-color: #fff; | |||
box-sizing: border-box; | |||
.title { | |||
font-size: 34rpx; | |||
font-weight: 600; | |||
color: #000; | |||
} | |||
.createBy { | |||
display: flex; | |||
margin-top: auto; | |||
margin-bottom: 10rpx; | |||
font-size: 24rpx; | |||
margin-top: 20rpx; | |||
color: #555; | |||
&>view { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
padding-right: 20rpx; | |||
} | |||
} | |||
</style> | |||
.controls { | |||
margin-top: 30rpx; | |||
} | |||
.content { | |||
margin-top: 30rpx; | |||
font-size: 28rpx; | |||
} | |||
} | |||
} | |||
.phone{ | |||
background-color: rgba($uni-color, 0.2); | |||
color: $uni-color; | |||
padding: 8rpx 16rpx; | |||
border-radius: 10rpx; | |||
margin-left: auto; | |||
image{ | |||
width: 20rpx; | |||
height: 20rpx; | |||
} | |||
} | |||
</style> |
@ -0,0 +1,109 @@ | |||
<template> | |||
<view class="item" @click="$emit('click')"> | |||
<image :src="item.imageTitle" | |||
@click.stop="previewImage([item.imageTitle])" | |||
mode="aspectFill"></image> | |||
<view class="text"> | |||
<view class="title"> | |||
{{ item.title }} | |||
</view> | |||
<view class="createBy"> | |||
{{ item.num }}余座 | |||
{{ item.startTime }}出发 | |||
</view> | |||
<view class="createBy"> | |||
{{ item.startAddress }} | |||
到 | |||
{{ item.endAddress }} | |||
</view> | |||
<view class="createBy"> | |||
<view class=""> | |||
{{ $dayjs(item.createTime).format('YYYY-MM-DD') }} | |||
</view> | |||
<view class="phone" | |||
v-if="item.phone" | |||
@click.stop="callPhone"> | |||
<image src="/static/image/home/phone.png" mode=""></image> | |||
联系司机 | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
import mixinsSex from '@/mixins/sex.js' | |||
export default { | |||
mixins: [mixinsSex], | |||
props: ['item'], | |||
data() { | |||
return { | |||
}; | |||
}, | |||
methods: { | |||
callPhone(){ | |||
uni.makePhoneCall({ | |||
phoneNumber: this.item.phone | |||
}) | |||
}, | |||
}, | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.item { | |||
height: 220rpx; | |||
width: 100%; | |||
background-color: #fff; | |||
overflow: hidden; | |||
border-radius: 10rpx; | |||
color: #777; | |||
display: flex; | |||
font-size: 24rpx; | |||
margin: 30rpx 0; | |||
image { | |||
width: 50%; | |||
height: 100%; | |||
} | |||
.text { | |||
display: flex; | |||
flex-direction: column; | |||
padding: 16rpx; | |||
width: 50%; | |||
.title { | |||
font-size: 30rpx; | |||
font-weight: 600; | |||
color: #000; | |||
} | |||
.createBy { | |||
display: flex; | |||
margin-top: auto; | |||
line-height: 40rpx; | |||
justify-content: space-between; | |||
&>view { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
} | |||
.phone{ | |||
background-color: rgba($uni-color, 0.2); | |||
color: $uni-color; | |||
padding: 8rpx 16rpx; | |||
border-radius: 10rpx; | |||
margin-left: auto; | |||
image{ | |||
width: 20rpx; | |||
height: 20rpx; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
</style> |