DetailsCarWashModal.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. <template>
  2. <div class="DetailsCarWash">
  3. <a-modal
  4. class="DetailsCarWashModal"
  5. title="查看详情"
  6. :width="1000"
  7. :footer="null"
  8. :destroyOnClose="true"
  9. @cancel="isShow=false"
  10. v-model="isShow">
  11. <v-select v-show="false" ref="featuredServiceLabel" placeholder="请选择网点标签" code="STORE_LABEL"></v-select>
  12. <a-row :gutter="20">
  13. <a-col :span="12" class="item-cont">
  14. <p class="item-label">网点照片:</p>
  15. <p class="item-main">
  16. <img :src="carWashInfo.icon" width="100" height="100" class="wd-icon" />
  17. </p>
  18. </a-col>
  19. <a-col :span="12" class="item-cont">
  20. <p class="item-label">网点名称:</p>
  21. <p class="item-main">{{ carWashInfo.name || '-' }}</p>
  22. </a-col>
  23. <a-col :span="12" class="item-cont">
  24. <p class="item-label">地址:</p>
  25. <p class="item-main">{{ carWashInfo.addrProvinceName }} - {{ carWashInfo.addrCityName }} - {{ carWashInfo.addrDistrictName }}</p>
  26. </a-col>
  27. <a-col :span="12" class="item-cont">
  28. <p class="item-label">详细地址:</p>
  29. <p class="item-main">{{ carWashInfo.addrDetail || '-' }}</p>
  30. </a-col>
  31. <a-col :span="12" class="item-cont">
  32. <p class="item-label">设备ID:</p>
  33. <p class="item-main">
  34. <a-tag color="blue" v-if="carWashInfo.deviceVOList">{{ carWashInfo.deviceVOList[0].deviceNo }}</a-tag>
  35. <span v-else>-</span>
  36. </p>
  37. </a-col>
  38. <a-col :span="12" class="item-cont">
  39. <p class="item-label">网点标签:</p>
  40. <div class="item-main">
  41. <a-tag color="blue" v-for="(item, index) in labelList" :key="index">{{ item }}</a-tag>
  42. </div>
  43. </a-col>
  44. <a-col :span="12" class="item-cont">
  45. <p class="item-label">经度:</p>
  46. <p class="item-main">{{ carWashInfo.lng || '-' }}</p>
  47. </a-col>
  48. <a-col :span="12" class="item-cont">
  49. <p class="item-label">纬度:</p>
  50. <p class="item-main">{{ carWashInfo.lat || '-' }}</p>
  51. </a-col>
  52. <a-col :span="12" class="item-cont">
  53. <p class="item-label">服务类型:</p>
  54. <p class="item-main">
  55. <a-tag color="blue" v-for="(item, index) in serviceType" :key="index">{{ item }}</a-tag>
  56. </p>
  57. </a-col>
  58. <a-col :span="12" class="item-cont">
  59. <p class="item-label">营业时间:</p>
  60. <p class="item-main">{{ carWashInfo.beginTime ? carWashInfo.beginTime.substr(0,5) : null }} - {{ carWashInfo.endTime ? carWashInfo.endTime.substr(0,5) : null }}</p>
  61. </a-col>
  62. <a-col :span="24" class="item-cont">
  63. <p class="item-label">时段价格:</p>
  64. <div class="item-main period-price-con">
  65. <div class="item-period" v-for="(item, index) in storeItemPriceDTOList" :key="index">
  66. <p class="period" :style="{width: 100/(item.currentPrices.length + 1) + '%'}">{{ item.beginTime }} - {{ item.endTime }}</p>
  67. <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>
  68. </div>
  69. </div>
  70. </a-col>
  71. <a-col :span="24" class="item-cont">
  72. <p class="item-label">路段指引:</p>
  73. <p :class="['item-main', carWashInfo.guidance ? 'guidance-con' : '']" v-html="carWashInfo.guidance || '-'"></p>
  74. </a-col>
  75. <a-col :span="24" class="item-cont">
  76. <p class="item-label">温馨提示:</p>
  77. <p class="item-main">{{ carWashInfo.reminder || '-' }}</p>
  78. </a-col>
  79. <a-col :span="24" class="item-cont">
  80. <p class="item-label">现场照片:</p>
  81. <p class="item-main">
  82. <img :src="pic" class="small-pic" @click="isPicModal=true" />
  83. </p>
  84. </a-col>
  85. <a-col :span="24" class="btn-cont">
  86. <a-button @click="isShow=false">返回列表</a-button>
  87. </a-col>
  88. </a-row>
  89. </a-modal>
  90. <!-- 查看现场照片 -->
  91. <a-modal
  92. class="picModal"
  93. title="查看现场照片"
  94. :width="800"
  95. :footer="null"
  96. :destroyOnClose="true"
  97. @cancel="isPicModal=false"
  98. v-model="isPicModal">
  99. <img :src="pic" class="pic" />
  100. </a-modal>
  101. </div>
  102. </template>
  103. <script>
  104. import { VSelect } from '@/components'
  105. import { storeFind, findItem, deviceImage, itemQuery } from '@/api/car-wash'
  106. export default {
  107. name: 'DetailsCarWashModal',
  108. components: { VSelect },
  109. props: {
  110. openModal: { // 弹框是否展示
  111. type: Boolean,
  112. default: false
  113. },
  114. carWashId: { // 网点id
  115. type: String,
  116. default: ''
  117. }
  118. },
  119. data () {
  120. return {
  121. isShow: this.openModal, // 弹框是否展示
  122. labelList: [], // 网点标签
  123. isPicModal: false, // 现场照片 弹框是否展示
  124. pic: require('@/assets/noPic.jpg'), // 现场照片 路径
  125. carWashInfo: {}, // 网点信息
  126. serviceType: [], // 服务类型
  127. storeItemPriceDTOList: [], // 时段价格
  128. itemQueryList: [] // 服务类型 列表数据
  129. }
  130. },
  131. methods: {
  132. // 网点详情
  133. getCarWashInfo (id) {
  134. this.getItemQuery()
  135. storeFind({ id: id }).then(res => {
  136. if (res.status == 200) {
  137. // 查询门店的服务时段价格
  138. findItem({ id: id }).then(result => {
  139. if (result.status == 200) {
  140. this.carWashInfo = Object.assign(res.data, { storeItemPriceDTOList: result.data })
  141. // 获取当前设备图片
  142. deviceImage({ deviceNo: res.data.deviceVOList[0].deviceNo }).then(results => {
  143. if (results.status == 200) {
  144. this.pic = results.data || require('@/assets/noPic.jpg')
  145. } else {
  146. this.pic = require('@/assets/noPic.jpg')
  147. }
  148. })
  149. this.setVal()
  150. }
  151. })
  152. }
  153. })
  154. },
  155. // 赋值
  156. setVal () {
  157. const _this = this
  158. // 网点标签
  159. setTimeout(() => {
  160. const featuredServiceLabel = this.carWashInfo.featuredServiceLabel.split(',')
  161. const arr = []
  162. featuredServiceLabel.map(k => {
  163. arr.push(_this.$refs.featuredServiceLabel.getNameByCode(k))
  164. })
  165. _this.labelList = arr
  166. }, 0)
  167. // 时段价格
  168. this.setPeriodPrice(this.carWashInfo.storeItemPriceDTOList)
  169. },
  170. // 时段价格 赋值处理
  171. setPeriodPrice (storeItemPriceDTOList) {
  172. this.storeItemPriceDTOList = []
  173. for (let i = 0; i < storeItemPriceDTOList.length; i++) {
  174. this.storeItemPriceDTOList.push({
  175. beginTime: storeItemPriceDTOList[i][0].beginTime,
  176. endTime: storeItemPriceDTOList[i][0].endTime,
  177. currentPrices: []
  178. })
  179. this.serviceType = []
  180. for (let j = 0; j < storeItemPriceDTOList[i].length; j++) {
  181. const k = storeItemPriceDTOList[i][j]
  182. this.storeItemPriceDTOList[i].currentPrices.push({ name: k.itemName, price: k.currentPrice, itemId: k.itemId })
  183. const ind = this.itemQueryList.findIndex(item => item.id == k.itemId)
  184. this.serviceType.push(this.itemQueryList[ind].itemName)
  185. }
  186. }
  187. },
  188. // 获取服务类型列表
  189. getItemQuery () {
  190. itemQuery({
  191. pageNo: 1,
  192. pageSize: 1000
  193. }).then(res => {
  194. if (res.status == 200) {
  195. this.itemQueryList = res.data.list || []
  196. } else {
  197. this.itemQueryList = []
  198. }
  199. })
  200. }
  201. },
  202. watch: {
  203. // 父页面传过来的弹框状态
  204. openModal (newValue, oldValue) {
  205. this.isShow = newValue
  206. },
  207. // 重定义的弹框状态
  208. isShow (val) {
  209. if (!val) {
  210. this.$emit('close')
  211. }
  212. },
  213. carWashId (newValue, oldValue) {
  214. if (newValue && this.isShow) {
  215. this.getCarWashInfo(newValue)
  216. }
  217. }
  218. }
  219. }
  220. </script>
  221. <style lang="less">
  222. .DetailsCarWashModal{
  223. p{
  224. margin: 0;
  225. }
  226. .item-cont{
  227. margin-bottom: 24px;
  228. display: flex;
  229. align-items: center;
  230. .item-label{
  231. width: 115px;
  232. font-size: 14px;
  233. color: rgba(0, 0, 0, 0.85);
  234. flex-shrink: 0;
  235. }
  236. .item-main{
  237. flex-grow: 1;
  238. .wd-icon{
  239. display: block;
  240. }
  241. }
  242. .guidance-con{
  243. border: 1px dashed #e8e8e8;
  244. border-radius: 6px;
  245. padding: 20px;
  246. img {
  247. max-width: 100%;
  248. }
  249. }
  250. .period-price-con{
  251. border-bottom: 1px solid #e8e8e8;
  252. }
  253. .item-period{
  254. display: flex;
  255. align-items: center;
  256. justify-content: space-evenly;
  257. flex-grow: 1;
  258. border: 1px solid #e8e8e8;
  259. border-width: 1px 1px 0;
  260. text-align: center;
  261. .period, .period-price{
  262. padding: 5px 0;
  263. border-right: 1px solid #e8e8e8;
  264. }
  265. .period-price:last-child{
  266. border-right: none;
  267. }
  268. }
  269. }
  270. .btn-cont{
  271. text-align: center;
  272. }
  273. .small-pic{
  274. display: block;
  275. cursor: zoom-in;
  276. width: 200px;
  277. border: 1px solid #e8e8e8;
  278. }
  279. }
  280. .pic{
  281. display: block;
  282. max-width: 100%;
  283. margin: 40px auto 50px;
  284. border: 1px solid #e8e8e8;
  285. }
  286. </style>