|
@@ -0,0 +1,367 @@
|
|
|
+<template>
|
|
|
+ <zj-page-container>
|
|
|
+ <zj-page-fill class="neibuview">
|
|
|
+ <zj-form-container ref="formRef" :form-data="formData" :form-rules="formRules">
|
|
|
+ <zj-form-module title="商品详情" :form-data="formData" :form-items="formItems" label-width="80px" :column="3">
|
|
|
+ </zj-form-module>
|
|
|
+ <zj-form-module title="出售信息" class="my-module" :form-data="formData.order" :form-items="formItems2"
|
|
|
+ label-width="80px" :column="3" />
|
|
|
+ </zj-form-container>
|
|
|
+ </zj-page-fill>
|
|
|
+ <div style="box-sizing: border-box; padding: 10px; text-align: right;">
|
|
|
+ <el-button type="primary" size="small" @click="handleSubmit">保存</el-button>
|
|
|
+ <el-button v-if="formData.id && ~['OFF'].indexOf(formData.status)" type="primary" size="small"
|
|
|
+ @click="copyGoods">克隆商品</el-button>
|
|
|
+ <el-button v-if="formData.id && ~['ON'].indexOf(formData.status)" type="primary" size="small"
|
|
|
+ @click="setStatus(false)">下架</el-button>
|
|
|
+ <el-button v-if="formData.id && ~['ON', 'SALE'].indexOf(formData.status)" type="primary" size="small"
|
|
|
+ @click="handleSubmit">转销售</el-button>
|
|
|
+ <el-button v-if="formData.id && ~['SALE'].indexOf(formData.status)" type="primary" size="small"
|
|
|
+ @click="setStatus(true)">重新上架</el-button>
|
|
|
+ <el-button size="small" @click="handleClose">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </zj-page-container>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import ImageUpload from '@/components/Common/image-upload.vue'
|
|
|
+import { esGoodsDetail, esGoodsCopy, esGoodsBatchUpdateStatus } from '@/api/commodityManagement'
|
|
|
+export default {
|
|
|
+ components: { ImageUpload },
|
|
|
+ props: {
|
|
|
+ detailId: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ formData: {
|
|
|
+ "brand": "",
|
|
|
+ "categoryId": "",
|
|
|
+ "categoryName": "",
|
|
|
+ "companyWechatId": "",
|
|
|
+ "companyWechatName": "",
|
|
|
+ "del": true,
|
|
|
+ "goodsName": "",
|
|
|
+ "goodsNote": "",
|
|
|
+ "imgList": [],
|
|
|
+ "isTop": true,
|
|
|
+ "likeCount": 0,
|
|
|
+ "makeDate": "",
|
|
|
+ "mark": "",
|
|
|
+ "markId": "",
|
|
|
+ "messageList": [],
|
|
|
+ "operateRecordList": [],
|
|
|
+ "power": "",
|
|
|
+ "price": 0,
|
|
|
+ "qty": 0,
|
|
|
+ "queryCount": 0,
|
|
|
+ "remark": "",
|
|
|
+ "sort": 0,
|
|
|
+ "status": "",
|
|
|
+ "topTime": "",
|
|
|
+ "userId": ""
|
|
|
+ },
|
|
|
+ formRules: {},
|
|
|
+ publishStatus: [
|
|
|
+ { label: '下架', value: "SALE" },
|
|
|
+ { label: '上架', value: "ON" },
|
|
|
+ { label: '已卖出', value: "OFF" },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ formItems() {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ name: 'el-input',
|
|
|
+ md: 12,
|
|
|
+ attributes: { disabled: true },
|
|
|
+ formItemAttributes: { label: '商品分类', prop: 'categoryName' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-radio',
|
|
|
+ options: this.publishStatus,
|
|
|
+ attributes: { disabled: true },
|
|
|
+ md: 12,
|
|
|
+ formItemAttributes: { label: '发布状态', prop: 'status' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-input',
|
|
|
+ md: 12,
|
|
|
+ attributes: { disabled: true },
|
|
|
+ formItemAttributes: { label: '商品名称', prop: 'goodsName' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-input',
|
|
|
+ md: 12,
|
|
|
+ attributes: { disabled: true, type: 'textarea' },
|
|
|
+ formItemAttributes: { label: '商品描述', prop: 'goodsNote' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-input',
|
|
|
+ md: 6,
|
|
|
+ attributes: { disabled: true },
|
|
|
+ formItemAttributes: { label: '商品价格', prop: 'price' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-input',
|
|
|
+ md: 6,
|
|
|
+ attributes: { disabled: true },
|
|
|
+ formItemAttributes: { label: '上架数量', prop: 'qty' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-input',
|
|
|
+ md: 6,
|
|
|
+ attributes: { disabled: true },
|
|
|
+ formItemAttributes: { label: '商品品牌', prop: 'brand' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-input',
|
|
|
+ md: 6,
|
|
|
+ attributes: { disabled: true },
|
|
|
+ formItemAttributes: { label: '功率(W)', prop: 'power' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-input',
|
|
|
+ md: 6,
|
|
|
+ attributes: { disabled: true },
|
|
|
+ formItemAttributes: { label: '制造日期', prop: 'makeDate' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-input',
|
|
|
+ md: 6,
|
|
|
+ attributes: { disabled: true },
|
|
|
+ formItemAttributes: { label: '联系电话', prop: 'linkPhone' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-input',
|
|
|
+ md: 6,
|
|
|
+ attributes: { disabled: true },
|
|
|
+ formItemAttributes: { label: '点赞量', prop: 'likeCount' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'slot-component',
|
|
|
+ md: 24,
|
|
|
+ attributes: { disabled: true, placeholder: '' },
|
|
|
+ formItemAttributes: { label: '留言量', prop: '' },
|
|
|
+ render: (h, { props }) => {
|
|
|
+ return (
|
|
|
+ <el-input
|
|
|
+ value={Number(this.formData?.messageList?.length)}
|
|
|
+ disabled={true}
|
|
|
+ size="mini"
|
|
|
+ placeholder=""
|
|
|
+ ></el-input>
|
|
|
+ )
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-radio',
|
|
|
+ options: [
|
|
|
+ { label: '一级能效', value: "一级能效" },
|
|
|
+ { label: '二级能效', value: "二级能效" },
|
|
|
+ { label: '三级能效', value: "三级能效" },
|
|
|
+ { label: '四级能效', value: "四级能效" },
|
|
|
+ { label: '五级能效', value: "五级能效" },
|
|
|
+ ],
|
|
|
+ md: 24,
|
|
|
+ attributes: { disabled: true },
|
|
|
+ formItemAttributes: { label: '能效标识', prop: 'mark' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'slot-component',
|
|
|
+ md: 24,
|
|
|
+ attributes: { disabled: true },
|
|
|
+ formItemAttributes: { label: '商品图片', prop: 'imgList' },
|
|
|
+ render: (h, { props }) => {
|
|
|
+ return (<div>
|
|
|
+ <ImageUpload file-list={this.formData.imgList} limit={this.formData?.imgList?.length + 1} isEdit={false} />
|
|
|
+ </div>)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ formItems2() {
|
|
|
+ return [{
|
|
|
+ name: 'slot-component',
|
|
|
+ md: 24,
|
|
|
+ attributes: { disabled: true },
|
|
|
+ formItemAttributes: { label: '', prop: '' },
|
|
|
+ render: (h, { props }) => {
|
|
|
+ var { formData } = props
|
|
|
+ console.log(formData, 999)
|
|
|
+ return (<div>
|
|
|
+ <el-row gutter={10}>
|
|
|
+ <el-col xs={24} sm={24} md={8} lg={8} xl={8}>
|
|
|
+ <div class='info'>
|
|
|
+ <div class='info_title'>上架人信息</div>
|
|
|
+ <div class='info_bottom'>
|
|
|
+ <div class='info_bottom_lt'>
|
|
|
+ <el-image
|
|
|
+ style='width: 40px; height: 40px'
|
|
|
+ src={this.$imageUrl + this.formData?.order?.buyerUserPic}
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ </div>
|
|
|
+ <div class='info_bottom_rt'>
|
|
|
+ <div>微信昵称:{formData.userName}</div>
|
|
|
+ <div>微信手机号:{formData.phone}</div>
|
|
|
+ <div>发布时间:{formData.goodsCreateTime}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col xs={24} sm={24} md={8} lg={8} xl={8}>
|
|
|
+ <div class='info'>
|
|
|
+ <div class='info_title'>买家信息</div>
|
|
|
+ {formData.saleStatus
|
|
|
+ ? <div class='info_bottom'>
|
|
|
+ <div class='info_bottom_lt'>
|
|
|
+ {this.formData.userPic ? <el-image
|
|
|
+ style='width: 40px; height: 40px'
|
|
|
+ src={this.$imageUrl + this.formData.userPic}
|
|
|
+ >
|
|
|
+ </el-image> : null
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ <div class='info_bottom_rt'>
|
|
|
+ <div>微信昵称:{formData.buyerUserName}</div>
|
|
|
+ <div>微信手机号:{formData.buyerUserPhone}</div>
|
|
|
+ <div>收货人信息:{formData.consigneeName}</div>
|
|
|
+ <div>收货人地址:{formData.address}</div>
|
|
|
+ <div>支付方式:{formData.payType === 'WECHAT' ? '微信支付' : ''}</div>
|
|
|
+ </div>
|
|
|
+ </div> : null}
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col xs={24} sm={24} md={8} lg={8} xl={8}>
|
|
|
+ <div class='info'>
|
|
|
+ <div class='info_title'>物流信息</div>
|
|
|
+ {formData.logisticsNum ? <div class='info_bottom'>
|
|
|
+ <div class='info_bottom_rt'>
|
|
|
+ <div>
|
|
|
+ <el-radio-group value={formData.logisticsType}>
|
|
|
+ <el-radio label='SELF'>自提</el-radio>
|
|
|
+ <el-radio label='DELIVERY'>物流</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <div>快递单号:{formData.logisticsNum}</div>
|
|
|
+ <div>快递公司:{formData.logisticsName}</div>
|
|
|
+ <el-button type='primary' size='small' onClick={() => { }}
|
|
|
+ >查看物流
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div> : null}
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>)
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ detailId: {
|
|
|
+ handler(newVal, oldVal) {
|
|
|
+ if (!newVal) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ esGoodsDetail({ id: newVal }).then(res => {
|
|
|
+ console.log(res.data)
|
|
|
+ this.formData = {
|
|
|
+ ...res.data,
|
|
|
+ imgList: res.data.imgList.map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ imgUrl: item.imgUrl
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ copyGoods() {
|
|
|
+ esGoodsCopy({ id: this.detailId.id }).then(res => {
|
|
|
+ this.$message({ type: 'success', message: `克隆成功!` })
|
|
|
+ this.handleClose()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setStatus(status){
|
|
|
+ esGoodsBatchUpdateStatus({ ids: this.detailId.id,status:status }).then(res => {
|
|
|
+ this.$message({ type: 'success', message: `设置成功!` })
|
|
|
+ this.handleClose()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleSubmit() {
|
|
|
+
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ this.$emit('back')
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.info {
|
|
|
+ .info_title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info_bottom {
|
|
|
+ display: flex;
|
|
|
+ margin: 10px 0;
|
|
|
+
|
|
|
+ .info_bottom_lt {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ //background-color: rgb(136, 235, 154);
|
|
|
+ }
|
|
|
+
|
|
|
+ .info_bottom_rt {
|
|
|
+ padding: 10px 0 0 10px;
|
|
|
+ line-height: 30px;
|
|
|
+
|
|
|
+ .photoPZ {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: text-top;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.neibuview {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 16px;
|
|
|
+
|
|
|
+ ::v-deep &>.zj-page-fill-scroll {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-right: 16px;
|
|
|
+
|
|
|
+ &>div:nth-child(1) {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.header1style {
|
|
|
+ text-align: right;
|
|
|
+ font-size: 12px;
|
|
|
+ color: red;
|
|
|
+ line-height: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.my-module {
|
|
|
+ ::v-deep .el-form-item__content {
|
|
|
+ margin-left: 12px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|