126 lines
3.1 KiB
Vue
126 lines
3.1 KiB
Vue
<template>
|
|
<view class="px-base">
|
|
<CuNavbar title="任务详情"></CuNavbar>
|
|
<view
|
|
class="mt-30rpx card-shadow bg-white rounded-19rpx px-base text-[#333333] text-27rpx"
|
|
>
|
|
<template v-for="(item, i) in columsList" :key="i">
|
|
<template v-if="item.dataIndex == 'taskable.photos'">
|
|
<view class="py-20rpx">
|
|
<view>{{ item.title }}</view>
|
|
<view class="grid grid-cols-3 gap-15rpx mt-20rpx">
|
|
<view class="" v-for="op in item.value" :key="op">
|
|
<image class="w-full" mode="widthFix" :src="op"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<view
|
|
v-else
|
|
class="py-20rpx flex"
|
|
:class="[
|
|
[
|
|
item.labelPosition == 'top'
|
|
? 'flex-col space-y-10rpx'
|
|
: 'items-center justify-between',
|
|
],
|
|
]"
|
|
>
|
|
<view>{{ item.title }}</view>
|
|
<view class="text-hex-999999">{{ item.value }}</view>
|
|
</view>
|
|
<uv-line color="#f5f5f5" v-if="i != columsList.length - 1"></uv-line>
|
|
</template>
|
|
</view>
|
|
<!-- <view class="h-100rpx">
|
|
<view
|
|
class="fixed bottom-0 left-0 right-0 h-120rpx bg-white flex items-center px-base space-x-30rpx"
|
|
>
|
|
<view class="flex-1">
|
|
<uv-button color="#999999" shape="circle" plain block>
|
|
拒绝
|
|
</uv-button>
|
|
</view>
|
|
<view class="flex-1">
|
|
<uv-button type="primary" shape="circle" block> 通过 </uv-button>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import CuNavbar from '@/components/cu-navbar/index'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { http } from '@/utils/request'
|
|
import { ref, computed } from 'vue'
|
|
import { timeFormat } from '@climblee/uv-ui/libs/function'
|
|
const baseColums = [
|
|
{
|
|
title: '申请人',
|
|
dataIndex: 'taskable.store_master.name',
|
|
},
|
|
{
|
|
title: '所属门店',
|
|
dataIndex: 'taskable.store.address',
|
|
},
|
|
{
|
|
title: '电话号码',
|
|
dataIndex: 'taskable.store_master.phone',
|
|
},
|
|
{
|
|
title: '申请时间',
|
|
dataIndex: 'created_at',
|
|
format: timeFormat,
|
|
},
|
|
{
|
|
title: '清洁范围',
|
|
dataIndex: 'taskable.description',
|
|
labelPosition: 'top',
|
|
},
|
|
{
|
|
title: '清洁结果',
|
|
dataIndex: 'taskable.photos',
|
|
},
|
|
]
|
|
const id = ref(null)
|
|
const data = ref({})
|
|
|
|
const columsList = computed(() => {
|
|
const arr = []
|
|
baseColums.forEach((e) => {
|
|
const { dataIndex, format } = e
|
|
let str = getValue(data.value, dataIndex)
|
|
if (isFunction(format)) {
|
|
str = format(str)
|
|
}
|
|
arr.push({
|
|
...e,
|
|
value: str,
|
|
})
|
|
})
|
|
return arr
|
|
})
|
|
|
|
onLoad((opt) => {
|
|
id.value = opt.id
|
|
getDetail()
|
|
})
|
|
|
|
const getDetail = async () => {
|
|
const resdata = await http.get(`/tasks/${id.value}`, {
|
|
params: {
|
|
id: id.value,
|
|
},
|
|
})
|
|
data.value = resdata
|
|
}
|
|
|
|
const getValue = (obj, path) => {
|
|
return path.split('.').reduce((acc, key) => (acc ? acc[key] : undefined), obj)
|
|
}
|
|
|
|
const isFunction = (fn) => {
|
|
return typeof fn === 'function'
|
|
}
|
|
</script>
|