You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
370 lines
8.2 KiB
370 lines
8.2 KiB
<template> |
|
<view class="server_container"> |
|
<view class="mt20 row flex-c-sb border-none"> |
|
<text class="title">总价</text> |
|
<text class="info">{{totalPrice}}</text> |
|
</view> |
|
<!-- 安装信息 --> |
|
<block v-for="item in goodsTypeArr"> |
|
<view class="mt20"> |
|
<PullDownBox ref="serversInfoRef"> |
|
<template #title> |
|
<view class="server_list_container_header"> |
|
<view class="row flex-c-sb border-none"> |
|
<view class="title"> |
|
{{ item.label }} |
|
</view> |
|
|
|
<!-- 新增 --> |
|
<view class="flex-c-c" @click.stop="() => handleAdd(item)"> |
|
<view class="mr10"> |
|
<u-icon name="plus-circle" color="#2979ff" size="30"></u-icon> |
|
</view> |
|
|
|
<view class="specialInfo">添加</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<template #content> |
|
<view class="server_list_container_info"> |
|
<block v-for="(value, index) in item.renderList || []" :key="item.id"> |
|
<view :class="{info_item: true, mt20: index !== 0}"> |
|
<view class="title flex-c-sb"> |
|
<view class="flex-c-c"> |
|
<view class="fwb mr20">第 {{ index + 1 }} 组</view> |
|
|
|
<view class="button flex-c-c" @click="() => handleEdit(value, item)"> |
|
<u-icon name="edit-pen" color="#d3832a" size="36"></u-icon> |
|
|
|
<view class="ml10">编辑</view> |
|
</view> |
|
</view> |
|
|
|
<view class="flex-c-c"> |
|
<u-icon name="trash" color="#fff" size="36"></u-icon> |
|
|
|
<view class="ml10">删除</view> |
|
</view> |
|
</view> |
|
|
|
<view class="info_item_container pb0"> |
|
<view class="row flex-c-sb"> |
|
<text class="title">商品类型</text> |
|
<text class="info">{{ value.type_name }}</text> |
|
</view> |
|
|
|
<view class="row flex-c-sb"> |
|
<text class="title">商品类目</text> |
|
|
|
<text class="info">{{ value.commodity_type }}</text> |
|
</view> |
|
|
|
<view class="row flex-c-sb"> |
|
<text class="title">单位</text> |
|
<text class="info">{{ value.unit }}</text> |
|
</view> |
|
|
|
<view class="row flex-c-sb"> |
|
<text class="title">产品名称</text> |
|
<text class="info">{{ value.product_name }}</text> |
|
</view> |
|
|
|
<view class="row flex-c-sb"> |
|
<text class="title">数量</text> |
|
<text class="info">{{ value.number }}</text> |
|
</view> |
|
|
|
<view class="row flex-c-sb"> |
|
<text class="title">单价</text> |
|
<text class="info">{{ value.price }}</text> |
|
</view> |
|
|
|
<view class="row flex-c-sb"> |
|
<text class="title">总价</text> |
|
<text class="info">{{ value.money }}</text> |
|
</view> |
|
|
|
<view class="row"> |
|
<view class="title">特殊要求</view> |
|
<view class="mt10 info"> |
|
{{ value.remark || '暂无数据' }} |
|
</view> |
|
</view> |
|
|
|
<view class="row pb0 border-none"> |
|
<view class="title">图片</view> |
|
<view class="mt10 flex flex-wrap"> |
|
<block v-for="item in value.images"> |
|
<view class="mb20 mr20" @click="()=> handleShowImg(item)"> |
|
<image :src="item.url" mode=""></image> |
|
</view> |
|
</block> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</block> |
|
</view> |
|
</template> |
|
</PullDownBox> |
|
</view> |
|
</block> |
|
|
|
<ShowImgBox v-model="details.showImg" :imgUrl="details.showImgUrl" /> |
|
</view> |
|
</template> |
|
|
|
<script setup lang="ts"> |
|
import { reactive, computed, ref } from 'vue' |
|
import utils from '@/utils/utils.js' |
|
|
|
import type { PropType } from 'vue' |
|
|
|
const props = defineProps({ |
|
/** 页面路由数据 */ |
|
pageInfo: { |
|
type: Object as PropType<Object>, |
|
required: true, |
|
}, |
|
/** 页面数据 */ |
|
info: { |
|
type: Object as PropType<Object>, |
|
required: true, |
|
}, |
|
/** 商品品类信息 */ |
|
goodsTypeArr: { |
|
type: Object as PropType<Object>, |
|
required: true, |
|
}, |
|
}) |
|
|
|
const serversInfoRef = ref() |
|
|
|
const serversInfo = computed(() => { |
|
const _type = utils.getObjType(props.info) |
|
|
|
if (_type === 'object' && utils.getObjType(props.info.service) === 'array') { |
|
return props.info.service |
|
} else return [] |
|
}) |
|
|
|
/** 价格统计 */ |
|
const totalPrice = computed(() => { |
|
let _total = 0 |
|
|
|
for (let i = 0; i < serversInfo.value.length; i++) { |
|
const item = serversInfo.value[i] |
|
|
|
_total = utils.computeNumber(_total, '+', item.money).result |
|
} |
|
|
|
return _total |
|
}) |
|
|
|
/** 商品品类数据 */ |
|
const goodsTypeArr = computed(() => { |
|
const _type = utils.getObjType(props.goodsTypeArr) |
|
|
|
if (_type === 'object' && utils.getObjType(props.goodsTypeArr.CommodityTypeTree) === 'array') { |
|
const { CommodityTypeTree } = props.goodsTypeArr as any |
|
|
|
const _arr : {}[] = [] |
|
|
|
const _serverArr = [...serversInfo.value] |
|
|
|
for (let i = 0; i < CommodityTypeTree.length; i++) { |
|
const item = CommodityTypeTree[i] |
|
|
|
const pushItem = { ...item } |
|
|
|
const filterArr = [..._serverArr] |
|
|
|
for (let i = 0; i < filterArr.length; i++) { |
|
const value = filterArr[i] |
|
|
|
const { commodity_type_ids } = value |
|
|
|
if (utils.getObjType(commodity_type_ids) !== 'array') continue |
|
|
|
const [firstType, secondType] = commodity_type_ids |
|
|
|
if (firstType === pushItem.value) { |
|
if (pushItem.children) { |
|
// 转译商品类型 |
|
for (let i = 0; i < pushItem.children.length; i++) { |
|
const val = pushItem.children[i] |
|
|
|
if (val.value !== secondType) continue |
|
value.type_name = val.label |
|
break |
|
} |
|
} |
|
|
|
pushItem.renderList ? pushItem.renderList.push(value) : (pushItem.renderList = [value]) |
|
|
|
for (let i = 0; i < _serverArr.length; i++) { |
|
const ite = _serverArr[i] |
|
|
|
// 根据内存地址判断删除的值 |
|
if (ite !== value) continue |
|
|
|
_serverArr.splice(i, 1) |
|
break |
|
} |
|
} |
|
} |
|
|
|
// 判断是否存在子类信息, 并判断组件是否已渲染 |
|
pushItem.children && |
|
serversInfoRef.value && |
|
serversInfoRef.value[i] && |
|
serversInfoRef.value[i].handleShowPullDown(true) |
|
|
|
_arr.push(pushItem) |
|
} |
|
|
|
return _arr |
|
} else return [] |
|
}) |
|
|
|
const details = reactive({ |
|
showImg: false, |
|
showImgUrl: '' |
|
}) |
|
|
|
/** 新增服务内容 */ |
|
const handleAdd = item => { |
|
console.log('item :>> ', item) |
|
uni.navigateTo({ |
|
url: |
|
'/pagesHome/pages/addInfo/addInfo?type=add&id=' + |
|
item.value + |
|
'&install_id=' + |
|
props.pageInfo.id, |
|
}) |
|
} |
|
|
|
/** 编辑 */ |
|
const handleEdit = (value, item) => { |
|
uni.setStorageSync('taskServersDetails', value) |
|
|
|
uni.navigateTo({ |
|
url: |
|
'/pagesHome/pages/addInfo/addInfo?type=edit&id=' + |
|
item.value + |
|
'&install_id=' + |
|
props.pageInfo.id, |
|
}) |
|
} |
|
|
|
const handleShowImg = (item) => { |
|
details.showImg = true |
|
details.showImgUrl = item.url |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
@import url('@/utils/style/common.scss'); |
|
|
|
.server_container { |
|
background-color: #f5f5f6; |
|
|
|
:deep(.Pulldown-title-container) { |
|
padding: 0; |
|
} |
|
|
|
:deep(.Pulldown_content) { |
|
padding: 0; |
|
} |
|
|
|
:deep(.PullDownBox) { |
|
border-radius: 0; |
|
} |
|
} |
|
|
|
// 头部 |
|
.server_list_container_header { |
|
background-color: #fff; |
|
// padding-top: 20upx; |
|
} |
|
|
|
// 列表信息 |
|
.server_list_container_info { |
|
background-color: #f5f5f6; |
|
padding: 20upx; |
|
|
|
.info_item { |
|
background: #fff; |
|
border-radius: 20upx; |
|
overflow: hidden; |
|
|
|
.button { |
|
padding: 8upx 20upx; |
|
background-color: #fff; |
|
border-radius: 6upx; |
|
font-weight: bold; |
|
color: var(--subjectColor); |
|
} |
|
|
|
&>.title { |
|
padding: 20upx; |
|
background-color: var(--subjectColor); |
|
color: #fff; |
|
} |
|
|
|
.info_item_container { |
|
padding: 20upx; |
|
} |
|
} |
|
|
|
:deep(.uni-input-placeholder) { |
|
text-align: right; |
|
} |
|
|
|
:deep(.uni-input-input) { |
|
text-align: right; |
|
} |
|
|
|
/* #ifdef MP-WEIXIN */ |
|
input { |
|
text-align: right; |
|
} |
|
|
|
/* #endif */ |
|
} |
|
|
|
.row { |
|
background: #fff; |
|
padding: 20upx; |
|
border-bottom: 4upx solid #eee; |
|
font-size: 0.9rem; |
|
|
|
image { |
|
width: 160upx; |
|
height: 160upx; |
|
border-radius: 10upx; |
|
} |
|
|
|
&.border-none { |
|
border: none; |
|
} |
|
|
|
.title { |
|
font-weight: bold; |
|
} |
|
|
|
.info { |
|
color: #999; |
|
} |
|
|
|
.specialInfo { |
|
color: #509fff; |
|
} |
|
} |
|
|
|
.pb0 { |
|
padding-bottom: 0upx !important; |
|
} |
|
</style> |