feat: 虚拟评论可选规格

template/admin/src/api/product.js

@@ -84,6 +84,19 @@ export function productShowApi(data) {
   });
 }
 
+/**
+ * 添加虚拟评论
+ * @param {*} data
+ * @returns
+ */
+export function saveFictitiousReply(data) {
+  return request({
+    url: 'product/reply/save_fictitious_reply',
+    method: 'post',
+    data,
+  });
+}
+
 /**
  * @description 商品属性 -- 批量下架
  * @param {Object} param data {Object} 传值对象

template/admin/src/pages/product/components/addReply.vue

@@ -0,0 +1,236 @@
+<template>
+  <Modal :value="visible" :z-index="2" title="添加自评" width="700" @on-ok="onOk" @on-cancel="onCancel">
+    <Form :model="formData" :label-width="125">
+      <FormItem label="商品">
+        <div class="upload-box" @click="callGoods">
+          <img v-if="goods.id" :src="goods.image" class="image" />
+          <Icon v-else type="ios-add" />
+        </div>
+      </FormItem>
+      <FormItem v-if="goods.id" label="商品规格">
+        <div class="upload-box" @click="callAttr">
+          <img v-if="attr.image" :src="attr.image" class="image" />
+          <Icon v-else type="ios-add" />
+        </div>
+      </FormItem>
+      <FormItem label="用户头像">
+        <div class="upload-box" @click="callPicture('单选')">
+          <img v-if="avatar.att_dir" :src="avatar.att_dir" class="image" />
+          <Button v-if="avatar.att_dir" shape="circle" icon="md-close" class="btn" @click.stop="removeUser"></Button>
+          <Icon v-else type="ios-add" />
+        </div>
+      </FormItem>
+      <FormItem label="用户名称">
+        <Input v-model="formData.nickname" placeholder="请输入用户名称"></Input>
+      </FormItem>
+      <FormItem label="评价文字">
+        <Input
+          v-model="formData.comment"
+          type="textarea"
+          :autosize="{ minRows: 2 }"
+          placeholder="请输入评价文字"
+        ></Input>
+      </FormItem>
+      <FormItem label="商品分数">
+        <Rate v-model="product_score" />
+      </FormItem>
+      <FormItem label="服务分数">
+        <Rate v-model="service_score" />
+      </FormItem>
+      <FormItem label="评价图片">
+        <div v-for="item in picture" :key="item.att_id" class="upload-box">
+          <img :src="item.att_dir" class="image" />
+          <Button shape="circle" icon="md-close" class="btn" @click="removePicture(item.att_id)"></Button>
+        </div>
+        <div v-if="picture.length < 8" class="upload-box" @click="callPicture('多选')">
+          <Icon type="ios-add" />
+        </div>
+      </FormItem>
+      <FormItem label="评价时间">
+        <DatePicker
+          :value="add_time"
+          type="datetime"
+          placeholder="请选择评论时间(不选择默认当前添加时间)"
+          style="width: 200px"
+          @on-change="onChange"
+        />
+      </FormItem>
+    </Form>
+    <template slot="footer">
+      <Button @click="onCancel">取消</Button>
+      <Button type="primary" @click="onOk">确定</Button>
+    </template>
+  </Modal>
+</template>
+
+<script>
+import { saveFictitiousReply } from '@/api/product';
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    goods: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    attr: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    avatar: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    picture: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      formData: {
+        avatar: '',
+        nickname: '',
+        comment: '',
+      },
+      product_score: 0,
+      service_score: 0,
+      pics: [],
+      add_time: '',
+    };
+  },
+  watch: {
+    picture(value) {
+      this.pics = value.map((item) => {
+        return item.att_dir;
+      });
+    },
+    visible(value) {
+      if (!value) {
+        this.formData.nickname = '';
+        this.formData.comment = '';
+        this.product_score = 0;
+        this.service_score = 0;
+        this.add_time = '';
+      }
+    },
+  },
+  methods: {
+    removeUser() {
+      this.avatar.att_dir = '';
+    },
+    removePicture(att_id) {
+      this.$emit('removePicture', att_id);
+    },
+    onChange(date) {
+      this.add_time = date;
+    },
+    callGoods() {
+      this.$emit('callGoods');
+    },
+    callAttr() {
+      this.$emit('callAttr');
+    },
+    callPicture(type) {
+      this.$emit('callPicture', type);
+    },
+    onOk() {
+      if (!this.goods.id) {
+        return this.$Message.error('请选择商品');
+      }
+      if (!this.attr.image) {
+        return this.$Message.error('请选择商品规格');
+      }
+      if (!this.avatar.att_dir) {
+        return this.$Message.error('请选择用户头像');
+      }
+      if (!this.formData.nickname) {
+        return this.$Message.error('请填写用户昵称');
+      }
+      if (!this.formData.comment) {
+        return this.$Message.error('请填写评论内容');
+      }
+      if (!this.product_score) {
+        return this.$Message.error('商品分数必须是1-5之间的整数');
+      }
+      if (!this.service_score) {
+        return this.$Message.error('服务分数必须是1-5之间的整数');
+      }
+      let data = {
+        image: {
+          image: this.goods.image,
+          product_id: this.goods.id,
+        },
+        suk: this.attr.suk,
+        avatar: this.avatar.att_dir,
+        nickname: this.formData.nickname,
+        comment: this.formData.comment,
+        product_score: this.product_score,
+        service_score: this.service_score,
+        pics: this.pics,
+        add_time: this.add_time,
+      };
+      saveFictitiousReply(data)
+        .then((res) => {
+          this.$Message.success(res.msg);
+          this.$emit('update:visible', false);
+        })
+        .catch((res) => {
+          this.$Message.error(res.msg);
+        });
+    },
+    onCancel() {
+      this.$emit('update:visible', false);
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped>
+.upload-box {
+  position: relative;
+  display: inline-block;
+  width: 58px;
+  height: 58px;
+  border: 1px dashed #c0ccda;
+  border-radius: 4px;
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
+  vertical-align: middle;
+  text-align: center;
+  line-height: 58px;
+  cursor: pointer;
+
+  + .upload-box {
+    margin-left: 10px;
+  }
+
+  .ivu-icon {
+    vertical-align: middle;
+    font-size: 20px;
+  }
+
+  .image {
+    width: 100%;
+    height: 100%;
+  }
+
+  .btn {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 20px;
+    height: 20px;
+    transform: translate(50%, -50%);
+  }
+}
+</style>

template/admin/src/pages/product/productReply/index.vue

@@ -124,17 +124,72 @@
         <Button @click="cancels">取消</Button>
       </div>
     </Modal>
+    <addReply
+      :visible.sync="replyModal"
+      :goods="goodsData"
+      :attr="attrData"
+      :avatar="avatarData"
+      :picture="pictureData"
+      @callGoods="callGoods"
+      @callAttr="callAttr"
+      @callPicture="callPicture"
+      @removePicture="removePicture"
+    ></addReply>
+    <Modal v-model="goodsModal" title="选择商品" width="960" scrollable footer-hide>
+      <goodsList v-if="replyModal" @getProductId="getProductId"></goodsList>
+    </Modal>
+    <Modal v-model="attrModal" title="选择商品规格" width="960" scrollable footer-hide>
+      <Table :columns="tableColumns" :data="goodsData.attrs" height="500">
+        <template slot-scope="{ row, index }" slot="image">
+          <div class="product-data">
+            <img class="image" :src="row.image" />
+          </div>
+        </template>
+      </Table>
+    </Modal>
+    <Modal
+      v-model="pictureModal"
+      width="960px"
+      scrollable
+      footer-hide
+      closable
+      title="上传商品图"
+      :mask-closable="false"
+      :z-index="1"
+    >
+      <uploadPictures
+        :isChoice="isChoice"
+        @getPic="getPic"
+        @getPicD="getPicD"
+        :gridBtn="gridBtn"
+        :gridPic="gridPic"
+        v-if="pictureModal"
+      ></uploadPictures>
+    </Modal>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex';
 import { replyListApi, setReplyApi, fictitiousReply } from '@/api/product';
+import addReply from '../components/addReply.vue';
+import goodsList from '@/components/goodsList/index';
+import uploadPictures from '@/components/uploadPictures';
+
 export default {
   name: 'product_productEvaluate',
+  components: {
+    addReply,
+    goodsList,
+    uploadPictures,
+  },
   data() {
     return {
       modals: false,
+      replyModal: false,
+      pictureModal: false,
+      goodsModal: false,
+      attrModal: false, // 选择商品规格
       grid: {
         xl: 7,
         lg: 10,
@@ -142,6 +197,20 @@ export default {
         sm: 12,
         xs: 24,
       },
+      gridPic: {
+        xl: 6,
+        lg: 8,
+        md: 12,
+        sm: 12,
+        xs: 12,
+      },
+      gridBtn: {
+        xl: 4,
+        lg: 8,
+        md: 8,
+        sm: 8,
+        xs: 8,
+      },
       formValidate: {
         is_reply: '',
         data: '',
@@ -166,8 +235,65 @@ export default {
           { text: '本年', val: 'year' },
         ],
       },
+      tableColumns: [
+        // {
+        //   type: "selection",
+        //   width: 60,
+        //   align: "center",
+        // },
+        {
+          width: 60,
+          align: 'center',
+          render: (h, params) => {
+            return h('Radio', {
+              props: {
+                value: params.row.unique === this.attrData.unique,
+              },
+              on: {
+                'on-change': () => {
+                  this.attrData = params.row;
+                  this.attrModal = false;
+                },
+              },
+            });
+          },
+        },
+        {
+          title: '图片',
+          slot: 'image',
+          width: 120,
+          align: 'center',
+        },
+        {
+          title: '规格',
+          key: 'suk',
+          align: 'center',
+          minWidth: 120,
+        },
+        {
+          title: '售价',
+          key: 'ot_price',
+          align: 'center',
+          minWidth: 120,
+        },
+        {
+          title: '优惠价',
+          key: 'price',
+          align: 'center',
+          minWidth: 120,
+        },
+      ],
       value: '45',
       tableList: [],
+      goodsAddType: '',
+      goodsData: {},
+      attrData: {},
+      avatarData: {},
+      pictureData: [],
+      selectProductAttrList: [],
+      isChoice: '',
+      picTit: '',
+      tableIndex: 0,
       total: 0,
       loading: false,
       columns: [
@@ -235,11 +361,21 @@ export default {
       this.formValidate.product_id = 0;
       this.getList();
     },
+    replyModal(value) {
+      if (!value) {
+        this.goodsData = {};
+        this.attrData = {};
+        this.avatarData = {};
+        this.pictureData = [];
+        this.getList();
+      }
+    },
   },
   methods: {
     // 添加虚拟评论；
     add() {
-      this.$modalForm(fictitiousReply(this.formValidate.product_id)).then(() => this.getList());
+      // this.$modalForm(fictitiousReply(this.formValidate.product_id)).then(() => this.getList());
+      this.replyModal = true;
     },
     oks() {
       this.modals = true;
@@ -339,6 +475,45 @@ export default {
       this.getList();
     },
     search() {},
+    callGoods() {
+      this.goodsModal = true;
+    },
+    callAttr() {
+      this.attrModal = true;
+    },
+    getProductId(goods) {
+      this.goodsData = goods;
+      this.goodsModal = false;
+      this.attrData.unique = '';
+    },
+    getPic(pc) {
+      this.avatarData = pc;
+      this.pictureModal = false;
+    },
+    getPicD(pc) {
+      let pictureData = [...this.pictureData];
+      pictureData = pictureData.concat(pc);
+      pictureData.sort((a, b) => a.att_id - b.att_id);
+      let picture = [];
+      for (let i = 0; i < pictureData.length; i++) {
+        if (pictureData[i + 1] && pictureData[i].att_id != pictureData[i + 1].att_id) {
+          picture.push(pictureData[i]);
+        }
+        if (!pictureData[i + 1]) {
+          picture.push(pictureData[i]);
+        }
+      }
+      this.pictureData = picture;
+      this.pictureModal = false;
+    },
+    callPicture(type) {
+      this.isChoice = type;
+      this.pictureModal = true;
+    },
+    removePicture(att_id) {
+      let index = this.pictureData.findIndex((item) => item.att_id === att_id);
+      this.pictureData.splice(index, 1);
+    },
   },
 };
 </script>
@@ -394,4 +569,14 @@ export default {
   height: 100%;
   display: block;
 }
+.product-data {
+  display: flex;
+  align-items: center;
+
+  .image {
+    width: 50px !important;
+    height: 50px !important;
+    margin-right: 10px;
+  }
+}
 </style>