123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289 |
- <template>
- <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">
- <img :src="carWashInfo.icon" width="100" height="100" class="wd-icon" />
- </p>
- </a-col>
- <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="12" 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">
- <a-tag color="blue" v-if="carWashInfo.deviceVOList">{{ carWashInfo.deviceVOList[0].deviceNo }}</a-tag>
- <span v-else>-</span>
- </p>
- </a-col>
- <a-col :span="12" class="item-cont">
- <p class="item-label">网点标签:</p>
- <div class="item-main">
- <a-tag color="blue" v-for="(item, index) in labelList" :key="index">{{ item }}</a-tag>
- </div>
- </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>
- </a-col>
- <a-col :span="24" class="item-cont">
- <p class="item-label">路段指引:</p>
- <p :class="['item-main', carWashInfo.guidance ? 'guidance-con' : '']" 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="pic" 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 { storeFind, findItem, deviceImage, itemQuery } 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/noPic.jpg'), // 现场照片 路径
- carWashInfo: {}, // 网点信息
- serviceType: [], // 服务类型
- storeItemPriceDTOList: [], // 时段价格
- itemQueryList: [] // 服务类型 列表数据
- }
- },
- methods: {
- // 网点详情
- getCarWashInfo (id) {
- this.getItemQuery()
- 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 })
- // 获取当前设备图片
- deviceImage({ deviceNo: res.data.deviceVOList[0].deviceNo }).then(results => {
- if (results.status == 200) {
- this.pic = results.data || require('@/assets/noPic.jpg')
- } else {
- this.pic = require('@/assets/noPic.jpg')
- }
- })
- this.setVal()
- }
- })
- }
- })
- },
- // 赋值
- setVal () {
- const _this = this
- // 网点标签
- setTimeout(() => {
- const featuredServiceLabel = this.carWashInfo.featuredServiceLabel.split(',')
- const arr = []
- featuredServiceLabel.map(k => {
- arr.push(_this.$refs.featuredServiceLabel.getNameByCode(k))
- })
- _this.labelList = arr
- }, 0)
- // 时段价格
- this.setPeriodPrice(this.carWashInfo.storeItemPriceDTOList)
- },
- // 时段价格 赋值处理
- setPeriodPrice (storeItemPriceDTOList) {
- this.storeItemPriceDTOList = []
- for (let i = 0; i < storeItemPriceDTOList.length; i++) {
- this.storeItemPriceDTOList.push({
- beginTime: storeItemPriceDTOList[i][0].beginTime,
- endTime: storeItemPriceDTOList[i][0].endTime,
- currentPrices: []
- })
- this.serviceType = []
- for (let j = 0; j < storeItemPriceDTOList[i].length; j++) {
- const k = storeItemPriceDTOList[i][j]
- this.storeItemPriceDTOList[i].currentPrices.push({ name: k.itemName, price: k.currentPrice, itemId: k.itemId })
- const ind = this.itemQueryList.findIndex(item => item.id == k.itemId)
- this.serviceType.push(this.itemQueryList[ind].itemName)
- }
- }
- },
- // 获取服务类型列表
- getItemQuery () {
- itemQuery({
- pageNo: 1,
- pageSize: 1000
- }).then(res => {
- if (res.status == 200) {
- this.itemQueryList = res.data.list || []
- } else {
- this.itemQueryList = []
- }
- })
- }
- },
- watch: {
- // 父页面传过来的弹框状态
- openModal (newValue, oldValue) {
- this.isShow = newValue
- },
- // 重定义的弹框状态
- isShow (val) {
- if (!val) {
- this.$emit('close')
- }
- },
- carWashId (newValue, oldValue) {
- if (newValue && this.isShow) {
- this.getCarWashInfo(newValue)
- }
- }
- }
- }
- </script>
- <style lang="less">
- .DetailsCarWashModal{
- p{
- margin: 0;
- }
- .item-cont{
- margin-bottom: 24px;
- display: flex;
- align-items: center;
- .item-label{
- width: 115px;
- font-size: 14px;
- color: rgba(0, 0, 0, 0.85);
- flex-shrink: 0;
- }
- .item-main{
- flex-grow: 1;
- .wd-icon{
- display: block;
- }
- }
- .guidance-con{
- border: 1px dashed #e8e8e8;
- border-radius: 6px;
- padding: 20px;
- img {
- max-width: 100%;
- }
- }
- .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: 200px;
- border: 1px solid #e8e8e8;
- }
- }
- .pic{
- display: block;
- max-width: 100%;
- margin: 40px auto 50px;
- border: 1px solid #e8e8e8;
- }
- </style>
|