<template>
|
<div>
|
<el-dialog :visible.sync="dialogVisible" :title="title" :close-on-click-modal="false" :modal-append-to-body="false" v-if="dialogVisible" width="564px">
|
<el-form size="mini" class="createProd" ref="form">
|
<el-form-item label="商品名称：">
|
<el-select
|
v-model.trim="content"
|
filterable
|
remote
|
placeholder="请输入商品名称"
|
:remote-method="remoteMethod"
|
:loading="vagueLoading"
|
clearable
|
@change="handChange"
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.spuId"
|
:label="item.spuName"
|
:value="item.spuId">
|
<span class="prodLeft">{{ item.spuName }}</span>
|
<span class="prodRight">{{ item.spuNum }}</span>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer buttonPosition">
|
<el-button size="mini" @click="submit" type="primary" :loading="loading">确定</el-button>
|
<el-button size="mini" @click="dialogVisible = false">取消</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import integralProdApi from '@/api/member/integralProd'
|
export default {
|
props: {
|
title: {
|
type: String,
|
default: null
|
},
|
show: {
|
type: Boolean,
|
default: false
|
},
|
shopId: {
|
type: String,
|
default: null
|
}
|
},
|
data () {
|
return {
|
dialogVisible: false,
|
content: null,
|
options: [],
|
prodItem: null, // 选择的商品信息
|
vagueLoading: false,
|
loading: false
|
}
|
},
|
watch: {
|
/**
|
* 监控外部显示变量变化
|
* 传递到dialog组件
|
*/
|
show: function (newShow, oldShow) {
|
this.dialogVisible = newShow
|
},
|
/**
|
* 监控内部显示属性变化
|
* 传递到外部调用变量
|
*/
|
dialogVisible: function (newDialogShow, oldDialogShow) {
|
this.$emit('update:show', newDialogShow)
|
if (!newDialogShow) {
|
this.content = null
|
this.options = []
|
}
|
}
|
},
|
methods: {
|
// 确定
|
async submit () {
|
if (!this.shopId) {
|
this.$message({
|
message: '此用户没有店铺',
|
type: 'warning'
|
})
|
return
|
}
|
if (!this.content) {
|
this.$message({
|
message: '请输入商品名称',
|
type: 'warning'
|
})
|
return
|
}
|
try {
|
if (this.prodItem) {
|
this.loading = true
|
const res = await integralProdApi.getProdInfo({ shopId: this.shopId, spuId: this.prodItem.spuId })
|
if (res.data && res.code === '0') {
|
this.loading = false
|
this.$emit('hand-selected', res.data, this.prodItem)
|
this.dialogVisible = false
|
} else {
|
this.loading = false
|
}
|
}
|
} catch (error) {
|
this.loading = false
|
}
|
},
|
// 远程搜索
|
async remoteMethod (queryString) {
|
if (queryString) {
|
this.vagueLoading = true
|
try {
|
const res = await integralProdApi.queryProdBySpuName({ spuName: queryString })
|
if (res.data && res.code === '0') {
|
this.options = res.data
|
this.vagueLoading = false
|
}
|
} catch (error) {
|
this.vagueLoading = false
|
}
|
} else {
|
this.options = []
|
}
|
},
|
handChange (val) {
|
if (val) {
|
this.prodItem = this.options.find(item => {
|
return item.spuId === this.content
|
})
|
}
|
this.options = []
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.createProd{
|
.el-select{
|
width: 400px;
|
}
|
}
|
.prodLeft{
|
float: left;
|
}
|
.prodRight{
|
float: right;
|
color: #8492a6;
|
font-size: 13px;
|
margin-left: 20px;
|
}
|
</style>
|
