<!--
|
* @Author: 张嘉彬
|
* @Date: 2021-10-27 15:12:29
|
* @Description:
|
-->
|
<template>
|
<div>
|
<p class="basicTip">
|
小贴士：为防止失真热区图片尺寸需与区域大小严格一致
|
</p>
|
<div>
|
<el-form-item :label="isActive? '展示图片：' : '热区图片：'">
|
<custom-upload-img class="uploadVideo" @handle-success="handleSuccess"
|
@handle-remove="handleRemove" :form="form" :isHot="!isActive"
|
:accept="isActive && '.jpg,.jpeg,.png'" :fileList="fileList"
|
:fileTip="isActive && '建议尺寸325*240像素，支持JPG、PNG、JPEG格式'">
|
</custom-upload-img>
|
</el-form-item>
|
<el-form-item label="商品详情：" :required="true">
|
<el-input disabled class="diyInput" v-model="form.content" :title="form.content"
|
placeholder="请选择一个商品">
|
<el-button id="append" @click="selectedItem" slot="append">选择商品</el-button>
|
</el-input>
|
</el-form-item>
|
</div>
|
<product-selected :show.sync='selectedDialog.show' :title="selectedDialog.title"
|
:multipleSelected="false" :singleShopSkuId="singleShopSkuId"
|
@hand-selected-row-data="handSelectedRowData" :form="form">
|
<!-- <el-table-column>
|
<template slot-scope="scope">
|
<el-button type="success" @click="choiceItem(scope.row)" size="mini"
|
:disabled="scope.row.spuId === form.spuId">添加</el-button>
|
</template>
|
</el-table-column> -->
|
</product-selected>
|
</div>
|
</template>
|
|
<script>
|
import productSelected from '@/views/diy-form/set-up/components/selectLists/productSelected.vue'
|
import { mapMutations } from 'vuex'
|
export default {
|
props: ['form', 'isActive'],
|
components: { productSelected },
|
data () {
|
return {
|
selectedDialog: {
|
show: false,
|
title: '选择商品'
|
},
|
singleShopSkuId: true
|
}
|
},
|
computed: {
|
fileList () {
|
return this.form.fileUrl ? [{ url: this.form.fileUrl, id: this.form.fileId }] : []
|
}
|
},
|
methods: {
|
...mapMutations(['updateCurrent']),
|
// 打开选择商品弹出框
|
selectedItem () {
|
this.selectedDialog.show = true
|
},
|
// 选择商品
|
choiceItem (row) {
|
this.selectedDialog.show = false
|
this.updateCurrent({ content: row.spuName, spuId: row.spuId, shopSpuId: row.shopSpuId })
|
},
|
// 选择规格
|
specSel (row) {
|
const _obj = {
|
content: row.spuName, spuId: row.spuId, shopSpuId: row.shopSpuId, shopSkuId: row.shopSkuId
|
}
|
this.selectedDialog.show = false
|
this.updateCurrent(_obj)
|
},
|
/**
|
* 获取上传成功的图片
|
*/
|
handleSuccess (data) {
|
this.updateCurrent({ fileUrl: data.url, fileId: data.id })
|
},
|
/**
|
* 移除图片
|
*/
|
handleRemove (data) {
|
this.updateCurrent({ fileUrl: null, fileId: null })
|
},
|
/**
|
* 获取弹出框返回的数据
|
*/
|
handSelectedRowData (rows) {
|
if (this.singleShopSkuId) {
|
this.specSel(rows)
|
}
|
}
|
}
|
}
|
</script>
|
|
<style>
|
</style>
|
