624 lines
16 KiB
Vue
624 lines
16 KiB
Vue
|
<template>
|
|||
|
|
<view class="app-container">
|
|||
|
|
<HeaderBar title="任务详情" enable-back text-align="center" />
|
|||
|
|
|
|||
|
|
<view class="task-detail">
|
|||
|
|
<!-- 基本信息卡片 -->
|
|||
|
|
<view class="info-card">
|
|||
|
|
<view class="card-header">
|
|||
|
|
<view class="order-no">
|
|||
|
|
任务编号：{{ detail.no }}
|
|||
|
|
<text class="tag type-tag">{{ TaskType.parseName(detail.type) }}</text>
|
|||
|
|
<text :class="['tag', 'status-tag', getStatusClass(detail.status)]">
|
|||
|
|
{{ TaskStatus.parseNameForUser(detail.status) }}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="info-list">
|
|||
|
|
<template v-if="showMore">
|
|||
|
|
<template v-if="detail.carId">
|
|||
|
|
<view class="info-item">
|
|||
|
|
<text class="label">联系人</text>
|
|||
|
|
<view class="value flex-row">
|
|||
|
|
<view>
|
|||
|
|
{{ detail.createName | dv }}
|
|||
|
|
</view>
|
|||
|
|
<view class="edit-btn" v-if="mode === 'user' && TaskStatus.canUpdate().includes(detail.status)" @click="handleMore">
|
|||
|
|
<u-icon name="edit-pen" size="18" color="#2979ff"></u-icon>
|
|||
|
|
修改信息
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-item">
|
|||
|
|
<text class="label">联系电话</text>
|
|||
|
|
<text class="value phone-number" @click="handleCall">{{ detail.createMobile | dv }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-item">
|
|||
|
|
<text class="label">车牌号</text>
|
|||
|
|
<view class="value address-wrap">
|
|||
|
|
<text>{{ detail.carNo | dv}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<template v-else-if="mode === 'user' && TaskStatus.canUpdate().includes(detail.status)">
|
|||
|
|
<view class="add-placeholder" @click="handleMore">
|
|||
|
|
<u-icon name="plus" size="24" color="#2979ff"></u-icon>
|
|||
|
|
<text class="add-text">请选择您的爱车</text>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<view class="info-item">
|
|||
|
|
<text class="label">下单时间</text>
|
|||
|
|
<text class="value">{{ detail.createTime | dv }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-item">
|
|||
|
|
<text class="label">地区</text>
|
|||
|
|
<view class="value address-wrap">
|
|||
|
|
<text>{{ detail.regionMergerName | dv}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-item">
|
|||
|
|
<text class="label">详细地址</text>
|
|||
|
|
<view class="value address-wrap">
|
|||
|
|
<text>{{ detail.createAddress | dv}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<view class="info-item">
|
|||
|
|
<text class="label">备注</text>
|
|||
|
|
<text class="value">{{ detail.remark | dv }}</text>
|
|||
|
|
</view>
|
|||
|
|
<template v-if="detail.mchId">
|
|||
|
|
<view class="info-item">
|
|||
|
|
<text class="label">商家</text>
|
|||
|
|
<text class="value">{{ detail.mchName | dv }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-item">
|
|||
|
|
<text class="label">接单时间</text>
|
|||
|
|
<text class="value">{{ detail.receiveTime | dv }}</text>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<view class="info-item" v-if="detail.status === TaskStatus.CANCEL">
|
|||
|
|
<text class="label">取消原因</text>
|
|||
|
|
<text class="value">{{ detail.cancelRemark | dv }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 视频播放 -->
|
|||
|
|
<view class="video-card" v-if="detail.video && isVideo(detail.video) && (showMore || isVip2)">
|
|||
|
|
<view class="card-header">视频信息</view>
|
|||
|
|
<video
|
|||
|
|
:src="parseLocalUrl(detail.video)"
|
|||
|
|
class="video-player"
|
|||
|
|
controls
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 图片 -->
|
|||
|
|
<view class="video-card" v-if="detail.video && isImage(detail.video) && (showMore || isVip2)">
|
|||
|
|
<view class="card-header">图片信息</view>
|
|||
|
|
<image-upload
|
|||
|
|
:value="detail.video"
|
|||
|
|
disabled
|
|||
|
|
:limit="1"
|
|||
|
|
:deletable="false"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 位置信息 -->
|
|||
|
|
<view class="map-card" v-if="detail.createLat && detail.createLon && showMore">
|
|||
|
|
<view class="card-header">
|
|||
|
|
<text class="card-title">位置信息</text>
|
|||
|
|
<button class="nav-btn" @click="openLocation">
|
|||
|
|
<text class="nav-text">导航</text>
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
<map
|
|||
|
|
class="map"
|
|||
|
|
:scale="16"
|
|||
|
|
:show-location="true"
|
|||
|
|
:latitude="Number(detail.createLat)"
|
|||
|
|
:longitude="Number(detail.createLon)"
|
|||
|
|
:markers="markers"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<template v-if="mode === 'mch'">
|
|||
|
|
<view class="info-item price-section">
|
|||
|
|
<view class="price-content">
|
|||
|
|
<view class="price-row total">
|
|||
|
|
<text class="price-label">合计金额</text>
|
|||
|
|
<text class="price-value">¥ {{ detail.receiveAmount | fix2 | dv }}</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="price-row">
|
|||
|
|
<text class="price-label">基础价格</text>
|
|||
|
|
<text class="price-value">¥ {{ detail.basePrice | fix2 | dv }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="price-row" v-if="detail.userLevelName">
|
|||
|
|
<text class="price-label">{{ detail.userLevelName | dv }}</text>
|
|||
|
|
<text class="price-value">¥ {{ detail.userLevelExtraPrice | fix2 | dv }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="price-row" v-if="detail.shareLevelName">
|
|||
|
|
<text class="price-label">{{ detail.shareLevelName | dv }}</text>
|
|||
|
|
<text class="price-value">¥ {{ detail.shareLevelExtraPrice | fix2 | dv }}</text>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 底部固定按钮 -->
|
|||
|
|
<view class="bottom-actions">
|
|||
|
|
<template v-if="mode === 'mch'">
|
|||
|
|
<button class="action-btn" v-if="TaskStatus.canReceive().includes(detail.status)" @click="handleReceive">¥{{ detail.receiveAmount | fix2 | dv}} 立即接单</button>
|
|||
|
|
<button class="action-btn" v-if="TaskStatus.canComplete().includes(detail.status)" @click="handleComplete">完成任务</button>
|
|||
|
|
</template>
|
|||
|
|
<template v-else>
|
|||
|
|
<button v-if="detail.mchId" class="action-btn plain" @click="handleContact">联系客服</button>
|
|||
|
|
<button class="action-btn plain" v-if="TaskStatus.canCancel().includes(detail.status)" @click="handleCancel">取消任务</button>
|
|||
|
|
<button class="action-btn" v-if="TaskStatus.canAfterSale().includes(detail.status)" @click="handleAfterSale">申请售后</button>
|
|||
|
|
</template>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import HeaderBar from '@/components/HeaderBar.vue'
|
|||
|
|
import { appGetTaskDetail, appAfterSaleTask, appCancelTask } from '@/api/app/task'
|
|||
|
|
import { TaskType, TaskStatus } from '@/utils/enums'
|
|||
|
|
import { parseLocalUrl, isImage, isVideo } from '@/utils/index'
|
|||
|
|
import { mchReceiveTask, mchCompleteTask } from '@/api/mch/task'
|
|||
|
|
import { getMchDetail } from '@/api/app/mch'
|
|||
|
|
import { mapGetters } from 'vuex'
|
|||
|
|
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
HeaderBar
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
id: null,
|
|||
|
|
detail: {},
|
|||
|
|
TaskType,
|
|||
|
|
TaskStatus,
|
|||
|
|
markers: [],
|
|||
|
|
mode: 'user',
|
|||
|
|
mch: {}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapGetters(['mchId', 'userId']),
|
|||
|
|
showMore() {
|
|||
|
|
return this.mode === 'user' || this.detail.mchId === this.mchId;
|
|||
|
|
},
|
|||
|
|
isVip2() {
|
|||
|
|
return this.mch.vipLevel === '2'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
this.id = options.id;
|
|||
|
|
if (options.mode) {
|
|||
|
|
this.mode = options.mode;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.getDetail()
|
|||
|
|
this.getMchInfo()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getMchInfo() {
|
|||
|
|
getMchDetail(this.mchId).then(res => {
|
|||
|
|
this.mch = res.data
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
isImage,
|
|||
|
|
isVideo,
|
|||
|
|
handleMore() {
|
|||
|
|
uni.navigateTo({ url: `/pages/car/index?taskId=${this.id}` })
|
|||
|
|
},
|
|||
|
|
parseLocalUrl,
|
|||
|
|
getDetail() {
|
|||
|
|
appGetTaskDetail(this.id).then(res => {
|
|||
|
|
this.detail = res.data
|
|||
|
|
// 设置地图标记点
|
|||
|
|
if (this.detail.createLat && this.detail.createLon) {
|
|||
|
|
this.markers = [{
|
|||
|
|
id: 1,
|
|||
|
|
latitude: Number(this.detail.createLat),
|
|||
|
|
longitude: Number(this.detail.createLon),
|
|||
|
|
width: 24,
|
|||
|
|
height: 32,
|
|||
|
|
callout: {
|
|||
|
|
content: this.detail.createAddress || '任务位置',
|
|||
|
|
color: '#333333',
|
|||
|
|
fontSize: 14,
|
|||
|
|
borderRadius: 4,
|
|||
|
|
padding: 8,
|
|||
|
|
display: 'ALWAYS'
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
openLocation() {
|
|||
|
|
if (this.detail.createLat && this.detail.createLon) {
|
|||
|
|
uni.openLocation({
|
|||
|
|
latitude: Number(this.detail.createLat),
|
|||
|
|
longitude: Number(this.detail.createLon),
|
|||
|
|
name: '任务地点',
|
|||
|
|
address: this.detail.createAddress,
|
|||
|
|
success: () => {
|
|||
|
|
console.log('导航打开成功')
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error('导航打开失败', err)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '导航打开失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getStatusClass(status) {
|
|||
|
|
switch (status) {
|
|||
|
|
case TaskStatus.WAIT_RECEIVE:
|
|||
|
|
return 'status-waiting'
|
|||
|
|
case TaskStatus.RECEIVED:
|
|||
|
|
return 'status-received'
|
|||
|
|
case TaskStatus.FINISHED:
|
|||
|
|
return 'status-finished'
|
|||
|
|
case TaskStatus.CANCEL:
|
|||
|
|
return 'status-cancel'
|
|||
|
|
case TaskStatus.AFTER_SALE:
|
|||
|
|
return 'status-after-sale'
|
|||
|
|
default:
|
|||
|
|
return ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleReceive() {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确定要接单吗？',
|
|||
|
|
confirmText: '确认',
|
|||
|
|
cancelText: '取消',
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
const params = { id: this.id, mchId: this.$store.getters.mchId };
|
|||
|
|
mchReceiveTask(params).then(res => {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
uni.showToast({ title: '接单成功', icon: 'success' });
|
|||
|
|
this.getDetail(); // 刷新详情
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({ title: res.msg || '操作失败', icon: 'none' });
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
handleComplete() {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确定要完成任务吗？',
|
|||
|
|
confirmText: '确认',
|
|||
|
|
cancelText: '取消',
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
const params = { id: this.id };
|
|||
|
|
mchCompleteTask(params).then(res => {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
uni.showToast({ title: '完成成功', icon: 'success' });
|
|||
|
|
this.getDetail(); // 刷新详情
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({ title: res.msg || '操作失败', icon: 'none' });
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
handleCancel() {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确定要取消任务吗？',
|
|||
|
|
confirmText: '确认',
|
|||
|
|
cancelText: '取消',
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
const params = { id: this.id };
|
|||
|
|
appCancelTask(params).then(res => {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
uni.showToast({ title: '取消成功', icon: 'success' });
|
|||
|
|
this.getDetail(); // 刷新详情
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({ title: res.msg || '操作失败', icon: 'none' });
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
handleContact() {
|
|||
|
|
uni.navigateTo({ url: `/pages/mchCustom/index?mchId=${this.detail.mchId}&mode=user` })
|
|||
|
|
},
|
|||
|
|
handleAfterSale() {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确定要申请售后吗？',
|
|||
|
|
confirmText: '确认',
|
|||
|
|
cancelText: '取消',
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
const params = { id: this.id };
|
|||
|
|
appAfterSaleTask(params).then(res => {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
uni.showToast({ title: '申请售后成功', icon: 'success' });
|
|||
|
|
this.getDetail(); // 刷新详情
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({ title: res.msg || '操作失败', icon: 'none' });
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
handleCall() {
|
|||
|
|
if (this.detail.createMobile) {
|
|||
|
|
uni.makePhoneCall({
|
|||
|
|
phoneNumber: this.detail.createMobile,
|
|||
|
|
success: () => {
|
|||
|
|
console.log('拨打电话成功');
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error('拨打电话失败', err);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.task-detail {
|
|||
|
|
padding: 20rpx;
|
|||
|
|
padding-bottom: 120rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-card, .video-card, .map-card {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
border-bottom: 1rpx solid #f8f9fc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-title {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-btn {
|
|||
|
|
min-width: 120rpx;
|
|||
|
|
height: 52rpx;
|
|||
|
|
line-height: 52rpx;
|
|||
|
|
background: #2979ff;
|
|||
|
|
border-radius: 26rpx;
|
|||
|
|
padding: 0 24rpx;
|
|||
|
|
border: none;
|
|||
|
|
margin: 0;
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-text {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tag {
|
|||
|
|
padding: 4rpx 16rpx;
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.type-tag {
|
|||
|
|
background-color: #e6f4ff;
|
|||
|
|
color: #1890ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-tag {
|
|||
|
|
&.status-waiting {
|
|||
|
|
color: #E6A23C;
|
|||
|
|
background-color: #fdf6ec;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.status-received {
|
|||
|
|
color: #409EFF;
|
|||
|
|
background-color: #ecf5ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.status-finished {
|
|||
|
|
color: #67C23A;
|
|||
|
|
background-color: #f0f9eb;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.status-cancel {
|
|||
|
|
color: #909399;
|
|||
|
|
background-color: #f4f4f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.status-after-sale {
|
|||
|
|
color: #F56C6C;
|
|||
|
|
background-color: #fef0f0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price-section {
|
|||
|
|
flex-direction: column;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
margin: 20rpx 0;
|
|||
|
|
|
|||
|
|
.price-content {
|
|||
|
|
margin-top: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price-row {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.total {
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
|
|||
|
|
.price-label {
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price-value {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #2979ff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price-label {
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price-value {
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-list {
|
|||
|
|
.info-item {
|
|||
|
|
display: flex;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
width: 140rpx;
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.value {
|
|||
|
|
flex: 1;
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
|
|||
|
|
&.phone-number {
|
|||
|
|
color: #007aff;
|
|||
|
|
text-decoration: underline;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.edit-btn {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 4rpx;
|
|||
|
|
color: #2979ff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.address-wrap {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-placeholder {
|
|||
|
|
width: 100%;
|
|||
|
|
background: #ffffff71;
|
|||
|
|
border: 2rpx dashed #2979ff;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
padding: 40rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
flex-direction: row;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
min-height: 200rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
margin: 20rpx 0;
|
|||
|
|
}
|
|||
|
|
.video-player {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 400rpx;
|
|||
|
|
background: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 500rpx;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-actions {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 20rpx 30rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
gap: 24rpx;
|
|||
|
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|||
|
|
z-index: 100;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn {
|
|||
|
|
background: #007aff;
|
|||
|
|
color: #fff;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
padding: 0 40rpx;
|
|||
|
|
height: 64rpx;
|
|||
|
|
line-height: 64rpx;
|
|||
|
|
border: none;
|
|||
|
|
width: fit-content;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
</style>
|