<template> <div v-if="product.checked" class="reason"> <div class="select-reason"> <slot name="type">退货原因</slot> <span class="icon iconfont"></span> <select class="reason" v-model="product.reason.id" @change="changeReason(product.reason.id)" name="reason"> <option v-for="(reason, index) in reasons" :key="index" :value="reason.id" :selected="reason.id === product.reason.id">{{reason.name}}</option> </select> </div> <template v-if="specialReasons.indexOf(product.reason.id) !== -1"> <div class="remark"> <textarea v-model="product.remark" max-length="100" placeholder="原因说明"></textarea> </div> <div class="image-list clearfix"> <div class="image-item" v-for="(image, index) in imageListForShow" :key="index"> <span @click="deleteImage(image.index)" class="icon iconfont icon-close"></span> <img :src="image.path | resize(100, 130)"> </div> <upload v-show="imageListForShow.length < 4" class="image-item" :image-list="product.imageList" :bucket="bucket"></upload> </div> <div class="image-example"> <div class="example-wrap" @click="changeExample"> <p class="exp-title"> 请按照示例传图 <span v-if="showUploadExample" class="icon iconfont"></span> <span v-else class="icon iconfont"></span> </p> <ul v-if="showUploadExample" class="example-img-list clearfix"> <li> <img src="//img12.static.yhbimg.com/evidenceImages/2017/07/11/14/0226626181f8e333be04a29d7d182c859d.png?imageView2/2/w/160/h/160/interlace/1"> <span>瑕疵细节</span> </li> <li class="plus">+</li> <li> <img src="//img11.static.yhbimg.com/evidenceImages/2017/07/11/14/011977ec9da18e3a06a0e808fc350bc269.png?imageView2/2/w/160/h/160/interlace/1"> <span>合格证</span> </li> <li class="plus">+</li> <li> <img src="//img11.static.yhbimg.com/evidenceImages/2017/07/11/14/015426f911d9257a4b3bee550529879246.png?imageView2/2/w/160/h/160/interlace/1"> <span>条码标签</span> </li> <li class="plus">+</li> <li> <img src="//img12.static.yhbimg.com/evidenceImages/2017/07/11/14/0277d1a5157ae8282a76269c5c18e1e99e.png?imageView2/2/w/160/h/160/interlace/1"> <span>领标</span> </li> </ul> </div> </div> </template> </div> <div v-else></div> </template> <script> import upload from 'vues/components/tools/upload.vue'; const util = require('js/plugin/util'); const tip = require('js/plugin/tip'); const reasonConfig = require('vues/home/return/reason'); module.exports = { props: ['product', 'data'], data() { return { bucket: 'evidenceImages', reasons: [], specialReasons: [], showUploadExample: true // 默认打开上传附图说明 }; }, computed: { imageListForShow() { const list = []; this.product.imageList.forEach((path, index) => { list.push({ index: index, path: util.getImgHost(path, this.bucket) + '?imageView2/2/w/160/h/160' }); }); return list; } }, methods: { deleteImage(index) { this.product.imageList.splice(index, 1); }, changeReason(rid) { if (this.product.change && this.product.change.sku === this.product.productSku && this.specialReasons.indexOf(rid) === -1) { this.product.change = null; tip.show('无理由换货不可选择相同颜色尺码'); } }, changeExample() { this.showUploadExample = !this.showUploadExample; } }, components: { upload }, created() { this.reasons = reasonConfig.reasons; this.specialReasons = reasonConfig.specialReasons; } }; </script> <style lang="scss"> .reason { font-size: 32px; background: #f6f6f6; border-top: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; .select-reason { padding: 0 30px; width: 100%; height: 90px; line-height: 90px; background: #fff; overflow: hidden; select { direction: rtl; height: 90px; } .icon, .reason { line-height: 90px; float: right; color: #b0b0b0; } .reason { margin-right: 6px; } } .remark { background: #fff; position: relative; &:before { content: ""; position: absolute; left: 30px; right: 0; top: 0; border-bottom: 1px solid #f1f1f1; } textarea { width: 100%; font-size: 24px; resize: none; border: 1px solid #f1f1f1; border-radius: 5px; padding: 15px 20px; } } .image-list { padding: 30px; padding-top: 0; background: #fff; .image-item { position: relative; float: left; margin-right: 25px; margin-top: 25px; width: 154px; height: 154px; &:last-child { margin-right: 0; } .icon-close { position: absolute; right: -20px; top: -20px; color: #fff; background-color: red; border-radius: 100%; z-index: 2; width: 40px; height: 40px; font-size: 30px; text-align: center; } img { width: 100%; height: 100%; } } .label-input { position: relative; width: 150px; height: 150px; font-size: 150px; &:before { content: "\e604"; } input { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; } } } .image-example { padding: 0 30px 20px; background-color: #fff; .example-wrap { padding: 10px 20px; background-color: #fbfbfb; font-size: 24px; color: #aaa; } .exp-title { line-height: 2; } .example-img-list { margin-top: 10px; li { width: 100px; float: left; text-align: center; > img { width: 100px; height: 100px; } > span { line-height: 2; } } .plus { width: 40px; line-height: 100px; } } } } </style>