|
@@ -1,97 +1,168 @@
|
|
|
<template>
|
|
|
- <a-modal class="DetailsCarWashModal" title="查看详情" :width="1000" :footer="null" :destroyOnClose="true" @cancel="isShow=false" v-model="isShow">
|
|
|
- <a-row :gutter="20">
|
|
|
- <a-col :span="12" class="item-cont">
|
|
|
- <p class="item-label">网点名称:</p>
|
|
|
- <p class="item-main">车领主网络科技有限公司-北二环贞观路口店车领主网络科技有限公司-北二环贞观路口店车领主网络科技有限公司-北二环贞观路口店车领主网络科技有限公司-北二环贞观路口店车领主网络科技有限公司-北二环贞观路口店</p>
|
|
|
- </a-col>
|
|
|
- <a-col :span="12" class="item-cont">
|
|
|
- <p class="item-label">地址:</p>
|
|
|
- <p class="item-main">陕西省 - 西安市 - 未央区</p>
|
|
|
- </a-col>
|
|
|
- <a-col :span="24" class="item-cont">
|
|
|
- <p class="item-label">详细地址:</p>
|
|
|
- <p class="item-main">北二环贞观路口华帝金座</p>
|
|
|
- </a-col>
|
|
|
- <a-col :span="12" class="item-cont">
|
|
|
- <p class="item-label">设备ID:</p>
|
|
|
- <p class="item-main">ID58787878787878787</p>
|
|
|
- </a-col>
|
|
|
- <a-col :span="12" class="item-cont">
|
|
|
- <p class="item-label">网点标签:</p>
|
|
|
- <p class="item-main">
|
|
|
- <a-tag color="blue">网点A</a-tag>
|
|
|
- <a-tag color="blue">网点B</a-tag>
|
|
|
- </p>
|
|
|
- </a-col>
|
|
|
- <a-col :span="12" class="item-cont">
|
|
|
- <p class="item-label">经度:</p>
|
|
|
- <p class="item-main">105.45</p>
|
|
|
- </a-col>
|
|
|
- <a-col :span="12" class="item-cont">
|
|
|
- <p class="item-label">纬度:</p>
|
|
|
- <p class="item-main">187.05</p>
|
|
|
- </a-col>
|
|
|
- <a-col :span="12" class="item-cont">
|
|
|
- <p class="item-label">服务类型:</p>
|
|
|
- <p class="item-main">
|
|
|
- <a-tag color="blue">极速洗车</a-tag>
|
|
|
- <a-tag color="blue">精致洗车</a-tag>
|
|
|
- <a-tag color="blue">机动洗车</a-tag>
|
|
|
- </p>
|
|
|
- </a-col>
|
|
|
- <a-col :span="12" class="item-cont">
|
|
|
- <p class="item-label">营业时间:</p>
|
|
|
- <p class="item-main">08:30 - 22:00</p>
|
|
|
- </a-col>
|
|
|
- <a-col :span="24" class="item-cont">
|
|
|
- <p class="item-label">时段价格:</p>
|
|
|
- <div class="item-main">
|
|
|
- <div class="item-period">
|
|
|
- <p class="period-name">【时段1】</p>
|
|
|
- <p class="period">08:30 - 11:30</p>
|
|
|
- <p class="period-price">极速洗车:<strong class="price">15</strong><span class="price-unit">元</span></p>
|
|
|
- <p class="period-price">精致洗车:<strong class="price">30</strong><span class="price-unit">元</span></p>
|
|
|
- <p class="period-price">机动洗车:<strong class="price">20</strong><span class="price-unit">元</span></p>
|
|
|
+ <div class="DetailsCarWash">
|
|
|
+ <a-modal class="DetailsCarWashModal" title="查看详情" :width="1000" :footer="null" :destroyOnClose="true" @cancel="isShow=false" v-model="isShow">
|
|
|
+ <v-select v-show="false" ref="featuredServiceLabel" placeholder="请选择网点标签" code="STORE_LABEL"></v-select>
|
|
|
+ <a-row :gutter="20">
|
|
|
+ <a-col :span="12" class="item-cont">
|
|
|
+ <p class="item-label">网点名称:</p>
|
|
|
+ <p class="item-main">{{ carWashInfo.name }}</p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" class="item-cont">
|
|
|
+ <p class="item-label">地址:</p>
|
|
|
+ <p class="item-main">{{ carWashInfo.addrProvinceName }} - {{ carWashInfo.addrCityName }} - {{ carWashInfo.addrDistrictName }}</p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24" class="item-cont">
|
|
|
+ <p class="item-label">详细地址:</p>
|
|
|
+ <p class="item-main">{{ carWashInfo.addrDetail }}</p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" class="item-cont">
|
|
|
+ <p class="item-label">设备ID:</p>
|
|
|
+ <p class="item-main">{{ carWashInfo.deviceVOList ? carWashInfo.deviceVOList[0].deviceNo : '' }}</p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" class="item-cont">
|
|
|
+ <p class="item-label">网点标签:</p>
|
|
|
+ <p class="item-main">
|
|
|
+ <a-tag color="blue" v-for="(item, index) in labelList" :ket="index">{{ item }}</a-tag>
|
|
|
+ </p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" class="item-cont">
|
|
|
+ <p class="item-label">经度:</p>
|
|
|
+ <p class="item-main">{{ carWashInfo.lng }}</p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" class="item-cont">
|
|
|
+ <p class="item-label">纬度:</p>
|
|
|
+ <p class="item-main">{{ carWashInfo.lat }}</p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" class="item-cont">
|
|
|
+ <p class="item-label">服务类型:</p>
|
|
|
+ <p class="item-main">
|
|
|
+ <a-tag color="blue" v-for="(item, index) in serviceType" :key="index">{{ item }}</a-tag>
|
|
|
+ </p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" class="item-cont">
|
|
|
+ <p class="item-label">营业时间:</p>
|
|
|
+ <p class="item-main">{{ carWashInfo.beginTime ? carWashInfo.beginTime.substr(0,5) : null }} - {{ carWashInfo.endTime ? carWashInfo.endTime.substr(0,5) : null }}</p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24" class="item-cont">
|
|
|
+ <p class="item-label">时段价格:</p>
|
|
|
+ <div class="item-main period-price-con">
|
|
|
+ <div class="item-period" v-for="(item, index) in storeItemPriceDTOList" :key="index">
|
|
|
+ <p class="period" :style="{width: 100/(item.currentPrices.length + 1) + '%'}">{{ item.beginTime }} - {{ item.endTime }}</p>
|
|
|
+ <p class="period-price" :style="{width: 100/(item.currentPrices.length + 1) + '%'}" v-for="(subItem, ind) in item.currentPrices" :key="ind">{{ subItem.name }}:<strong class="price">{{ subItem.price }}</strong><span class="price-unit">元</span></p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="item-period">
|
|
|
- <p class="period-name">【时段2】</p>
|
|
|
- <p class="period">11:30 - 7:30</p>
|
|
|
- <p class="period-price">极速洗车:<strong class="price">15</strong><span class="price-unit">元</span></p>
|
|
|
- <p class="period-price">精致洗车:<strong class="price">30</strong><span class="price-unit">元</span></p>
|
|
|
- <p class="period-price">机动洗车:<strong class="price">20</strong><span class="price-unit">元</span></p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </a-col>
|
|
|
- <a-col :span="24" class="item-cont">
|
|
|
- <p class="item-label">路段指引:</p>
|
|
|
- <p class="item-main">陕西省西安市未央区北二环贞观路口华帝金座</p>
|
|
|
- </a-col>
|
|
|
- <a-col :span="24" class="item-cont">
|
|
|
- <p class="item-label">温馨提示:</p>
|
|
|
- <p class="item-main">请注意避过高峰时期</p>
|
|
|
- </a-col>
|
|
|
- <a-col :span="24" class="btn-cont">
|
|
|
- <a-button @click="isShow=false">取消</a-button>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-modal>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24" class="item-cont">
|
|
|
+ <p class="item-label">路段指引:</p>
|
|
|
+ <p class="item-main" v-html="carWashInfo.guidance"></p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24" class="item-cont">
|
|
|
+ <p class="item-label">温馨提示:</p>
|
|
|
+ <p class="item-main">{{ carWashInfo.reminder }}</p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24" class="item-cont">
|
|
|
+ <p class="item-label">现场照片:</p>
|
|
|
+ <p class="item-main">
|
|
|
+ <img src="../../assets/avatar2.jpg" class="small-pic" @click="isPicModal=true" />
|
|
|
+ </p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24" class="btn-cont">
|
|
|
+ <a-button @click="isShow=false">取消</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-modal>
|
|
|
+
|
|
|
+ <!-- 查看现场照片 -->
|
|
|
+ <a-modal class="picModal" title="查看现场照片" :width="800" :footer="null" :destroyOnClose="true" @cancel="isPicModal=false" v-model="isPicModal">
|
|
|
+ <img :src="pic" class="pic" />
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import { VSelect } from '@/components'
|
|
|
+ import moment from 'moment'
|
|
|
+ import { storeFind, findItem } from '@/api/car-wash'
|
|
|
export default{
|
|
|
name: 'DetailsCarWashModal',
|
|
|
+ components: { VSelect },
|
|
|
props: {
|
|
|
openModal: { // 弹框是否展示
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
+ carWashId: { // 网点id
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
},
|
|
|
data(){
|
|
|
return{
|
|
|
isShow: this.openModal, // 弹框是否展示
|
|
|
+ labelList: [], // 网点标签
|
|
|
+ isPicModal: false, // 现场照片 弹框是否展示
|
|
|
+ pic: require('../../assets/avatar2.jpg'), // 现场照片 路径
|
|
|
+ carWashInfo: {} ,// 网点信息
|
|
|
+ serviceType: [], // 服务类型
|
|
|
+ storeItemPriceDTOList: [], // 时段价格
|
|
|
}
|
|
|
},
|
|
|
+ methods: {
|
|
|
+ // 网点详情
|
|
|
+ getCarWashInfo(id){
|
|
|
+ storeFind({ id: id }).then(res => {
|
|
|
+ if(res.status == 200){
|
|
|
+ // 查询门店的服务时段价格
|
|
|
+ findItem({ id: id }).then(result => {
|
|
|
+ if(result.status == 200){
|
|
|
+ this.carWashInfo = Object.assign(res.data, {storeItemPriceDTOList: result.data})
|
|
|
+ console.log(this.carWashInfo)
|
|
|
+ this.setVal()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 赋值
|
|
|
+ setVal(){
|
|
|
+ const _this = this
|
|
|
+ // 网点标签
|
|
|
+ setTimeout(()=>{
|
|
|
+ let featuredServiceLabel = this.carWashInfo.featuredServiceLabel.split(',')
|
|
|
+ let arr = []
|
|
|
+ featuredServiceLabel.map(k => {
|
|
|
+ arr.push(_this.$refs.featuredServiceLabel.getNameByCode(k))
|
|
|
+ })
|
|
|
+ _this.labelList = arr
|
|
|
+ },0)
|
|
|
+ // 时段价格
|
|
|
+ console.log(this.carWashInfo)
|
|
|
+ this.setPeriodPrice(this.carWashInfo.storeItemPriceDTOList)
|
|
|
+ },
|
|
|
+ // 时段价格 赋值处理
|
|
|
+ setPeriodPrice(storeItemPriceDTOList){
|
|
|
+ let arrInd = 0
|
|
|
+ this.storeItemPriceDTOList = []
|
|
|
+ for (var key in storeItemPriceDTOList) {
|
|
|
+ if (storeItemPriceDTOList.hasOwnProperty(key)) {
|
|
|
+ this.storeItemPriceDTOList.push({
|
|
|
+ beginTime: key.split(',')[0],
|
|
|
+ endTime: key.split(',')[1],
|
|
|
+ currentPrices: []
|
|
|
+ })
|
|
|
+ let idArr = []
|
|
|
+ storeItemPriceDTOList[key].map((k, ind) => {
|
|
|
+ this.storeItemPriceDTOList[arrInd].currentPrices.push({ name: k.itemName, price: k.currentPrice, itemId: k.itemId })
|
|
|
+ idArr.push(k.itemName)
|
|
|
+ })
|
|
|
+ this.serviceType = idArr // 服务类型
|
|
|
+ arrInd++
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(this.storeItemPriceDTOList)
|
|
|
+ console.log(this.serviceType)
|
|
|
+ },
|
|
|
+ },
|
|
|
watch: {
|
|
|
// 父页面传过来的弹框状态
|
|
|
openModal (newValue, oldValue) {
|
|
@@ -102,6 +173,11 @@
|
|
|
if (!val){
|
|
|
this.$emit('close')
|
|
|
}
|
|
|
+ },
|
|
|
+ carWashId (newValue, oldValue){
|
|
|
+ if(newValue){
|
|
|
+ this.getCarWashInfo(newValue)
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -126,15 +202,38 @@
|
|
|
.item-main{
|
|
|
flex-grow: 1;
|
|
|
}
|
|
|
+ .period-price-con{
|
|
|
+ border-bottom: 1px solid #e8e8e8;
|
|
|
+ }
|
|
|
.item-period{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-evenly;
|
|
|
flex-grow: 1;
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+ border-width: 1px 1px 0;
|
|
|
+ text-align: center;
|
|
|
+ .period, .period-price{
|
|
|
+ padding: 5px 0;
|
|
|
+ border-right: 1px solid #e8e8e8;
|
|
|
+ }
|
|
|
+ .period-price:last-child{
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.btn-cont{
|
|
|
text-align: center;
|
|
|
}
|
|
|
+ .small-pic{
|
|
|
+ display: block;
|
|
|
+ cursor: zoom-in;
|
|
|
+ width: 300px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pic{
|
|
|
+ display: block;
|
|
|
+ max-width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
}
|
|
|
</style>
|