客户管理和商品图片管理页面开发

src/views/customer/index.vue

@@ -0,0 +1,354 @@
+<template>
+  <basic-container>
+    <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" ref="crud" v-model="form"
+      :permission="permissionList" :before-open="beforeOpen" @search-change="searchChange" @search-reset="searchReset"
+      @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
+      @refresh-change="refreshChange">
+      <template slot-scope="{ row }" slot="menu">
+        <el-button type="text" icon="el-icon-shopping-cart-1" size="small" @click="handleDetail(row)"
+          :disabled="row.neckLength < 1">购买记录</el-button>
+        <el-button type="text" icon="el-icon-delete" size="small" @click="handleDelete(row)">删除</el-button>
+      </template>
+      <template slot-scope="scope" slot="menuLeft">
+        <el-button icon="el-icon-delete" type="danger" size="small" @click="deleteItem" plain>删除</el-button>
+        <el-button icon="el-icon-download" type="warning" size="small" @click="exportData" plain>导出</el-button>
+      </template>
+    </avue-crud>
+    <el-dialog :visible.sync="dialogVisible" width="60%" title="购买记录" :append-to-body="true" center>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item label="昵称">kooriookami</el-descriptions-item>
+        <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
+        <template v-for="(item, index) in recordData">
+          <el-descriptions-item label="下单时间">{{item.createTime}}</el-descriptions-item>
+          <el-descriptions-item label="下单编号">{{item.orderNo}}</el-descriptions-item>
+        </template>
+      </el-descriptions>
+      <div style="margin: 20px 0 0; text-align:center;">
+        <el-pagination
+          background
+          layout="total, prev, pager, next"
+          @current-change="currentRecordChange"
+          :total="recordPage.total">
+        </el-pagination>
+      </div>
+    </el-dialog>
+  </basic-container>
+</template>
+
+<script>
+// import {getBaseList,getTypeList} from "@/api/base"
+import {
+  getList,
+  exportList,
+  deleteList,
+  detailList,
+} from "@/api/statistics/statistics";
+export default {
+  data() {
+    return {
+      form: {},
+      dialogVisible: false,
+      query: {},
+      loading: true,
+      page: {
+        pageSize: 10,
+        currentPage: 1,
+        total: 0,
+      },
+      selectionList: [],
+      option: {
+        selection: true,
+        searchShowBtn: false,
+        refreshBtn: false,
+        columnBtn: false,
+        height: "auto",
+        calcHeight: 30,
+        tip: false,
+        searchShow: true,
+        searchMenuSpan: 4,
+        searchSpan: 6,
+        border: false,
+        addBtn: false,
+        viewBtn: false,
+        editBtn: false,
+        delBtn: false,
+        column: [
+          {
+            label: "微信昵称",
+            prop: "nickname",
+            search: true,
+          },
+          {
+            label: "手机号",
+            prop: "phonenumber",
+            search: true,
+          },
+          {
+            label: "购买次数",
+            prop: "neckLength",
+            html: true,
+            formatter: (data) => {
+              return '<span style="' + (data.neckLength > 0 ? '' : 'color:red;') + '">' + data.neckLength + '</span>'
+            }
+          },
+        ],
+      },
+      data: [],
+      //购买记录
+      recordPage: {
+        pageSize: 10,
+        currentPage: 1,
+        total: 1
+      },
+      recordRow: {},
+      recordData: [],
+
+    };
+  },
+  computed: {
+    ids() {
+      let ids = [];
+      this.selectionList.forEach((ele) => {
+        ids.push(ele.id);
+      });
+      return ids.join(",");
+    },
+  },
+  created() {
+    this.onLoad();
+  },
+  methods: {
+    sizeChange(pageSize) {
+      this.page.pageSize = pageSize;
+      this.onLoad();
+    },
+    //购买记录
+    handleDetail(row) {
+      this.recordRow = row;
+      this.recordData = [
+        { createTime: '2023-07-21 21:12:53', orderNo: '14426859489451654' }
+      ];
+      this.recordPage.total = 20;
+      this.dialogVisible = true;
+    },
+    //购买记录页码切换
+    currentRecordChange(currentPage) {
+      console.log(currentPage)
+      this.recordPage.currentPage = currentPage;
+      // this.recordData = [
+      //   { createTime: '2023-07-21 21:12:53', orderNo: '14426859489451654' },
+      //   { createTime: '2023-07-21 21:12:53', orderNo: '14426859489451654' },
+      //   { createTime: '2023-07-21 21:12:53', orderNo: '14426859489451654' }
+      // ];
+      this.handleDetail();
+    },
+    selectionChange(data) {
+      this.selectionList = data;
+    },
+    currentChange(currentPage) {
+      this.page.currentPage = currentPage;
+      this.onLoad();
+    },
+    getWinData() {
+      getBaseList().then((res) => {
+        this.winData = res.data.data;
+        let tmp = this.winData.find((item) => item.id == this.userInfo.user_id);
+        if (tmp) {
+          this.form.windows = tmp.id;
+          this.isWinDis = true;
+        }
+      });
+    },
+    getTypeData() {
+      getTypeList().then((res) => {
+        this.typeData = res.data.data;
+      });
+    },
+    handleList(row) {
+      console.log(row);
+      this.dialogVisible = true;
+      getResolveList({ appealId: row.id }).then((res) => {
+        console.log("res", res);
+        this.listData = res.data.data;
+      });
+    },
+    searchReset() {
+      this.query = {};
+      this.form = {};
+      this.onLoad(this.page);
+    },
+    searchChange(params, done) {
+      console.log(params)
+      this.form = params
+      console.log(this.form);
+
+      this.query = this.form;
+      this.page.currentPage = 1;
+      this.onLoad(this.page, this.form);
+      done();
+    },
+    handleSuccess(res) {
+      console.log(res);
+      if (res.code == 200) {
+        this.$message.success("上传成功");
+      }
+    },
+    fn(str) {
+      let num = null;
+      str >= 10 ? (num = str) : (num = "0" + str);
+      return num;
+    },
+    getTime() {
+      //获取当前时间
+      var date = new Date();
+      var year = date.getFullYear(); //当前年份
+      var month = date.getMonth(); //当前月份
+      var data = date.getDate(); //天
+      var hours = date.getHours(); //小时
+      var minute = date.getMinutes(); //分
+      var second = date.getSeconds(); //秒
+      this.day = date.getDay(); //获取当前星期几
+      // this.getWeek(this.day);
+      this.time = this.fn(hours) + ":" + this.fn(minute);
+      this.date = year + "-" + (month + 1) + "-" + data;
+    },
+    onLoad() {
+      let params = {};
+      // params = {
+      //   username:this.form.name ? this.form.name : '',
+      //   phone:this.form.phonenumber ? this.form.phonenumber : '',
+      //   pillowHardness:this.form.hardness ? this.form.hardness : '',
+      //   pillowMaterial:this.form.material ? this.form.material : ''
+      // }
+
+      if (!this.form.timeArr) {
+        params = {
+          username: this.form.username ? this.form.username : "",
+          phone: this.form.phonenumber ? this.form.phonenumber : "",
+          pillowHardness: this.form.hardness ? this.form.hardness : "",
+          pillowMaterial: this.form.material ? this.form.material : "",
+          ageRange: this.form.ageRange ? this.form.ageRange : "",
+        };
+      } else {
+        params = {
+          username: this.form.username ? this.form.username : "",
+          phone: this.form.phonenumber ? this.form.phonenumber : "",
+          pillowHardness: this.form.hardness ? this.form.hardness : "",
+          pillowMaterial: this.form.material ? this.form.material : "",
+          ageRange: this.form.ageRange ? this.form.ageRange : "",
+          startTime: this.form.timeArr[0],
+          endTime: this.form.timeArr[1],
+        };
+      }
+      console.log("par", params);
+
+      getList({
+        current: this.page.currentPage,
+        size: this.page.pageSize,
+        ...params,
+      }).then((res) => {
+        console.log("res==>", res);
+        this.loading = false;
+        this.data = res.data.data.records;
+        this.page.total = res.data.data.total;
+      });
+    },
+    addRegister() {
+      this.$router.push({ path: "/register/add", query: { type: "add" } });
+    },
+    exportData() {
+      let params = {};
+      if (!this.form.timeArr) {
+        params = {
+          username: this.form.name ? this.form.name : "",
+          phone: this.form.phonenumber ? this.form.phonenumber : "",
+          pillowHardness: this.form.hardness ? this.form.hardness : "",
+          pillowMaterial: this.form.material ? this.form.material : "",
+          ageRange: this.form.age ? this.form.age : "",
+        };
+      } else {
+        params = {
+          username: this.form.name ? this.form.name : "",
+          phone: this.form.phonenumber ? this.form.phonenumber : "",
+          pillowHardness: this.form.hardness ? this.form.hardness : "",
+          pillowMaterial: this.form.material ? this.form.material : "",
+          ageRange: this.form.age ? this.form.age : "",
+          startTime: this.form.timeArr[0],
+          endTime: this.form.timeArr[1],
+        };
+      }
+      exportList(params).then((res) => {
+        console.log(res);
+        if (!res || !res.data) {
+          this.$message({
+            type: "error",
+            message: "导出失败！",
+          });
+          return;
+        }
+        let blob = new Blob([res.data]); //response.data为后端传的流文件
+        let downloadFilename = "统计" + ".xlsx"; //设置导出的文件名
+        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+          //兼容ie浏览器
+          window.navigator.msSaveOrOpenBlob(blob, downloadFilename);
+        } else {
+          //谷歌,火狐等浏览器
+          let url = window.URL.createObjectURL(blob);
+          let downloadElement = document.createElement("a");
+          downloadElement.style.display = "none";
+          downloadElement.href = url;
+          downloadElement.download = downloadFilename;
+          document.body.appendChild(downloadElement);
+          downloadElement.click();
+          document.body.removeChild(downloadElement);
+          window.URL.revokeObjectURL(url);
+        }
+        this.$message({ type: "success", message: "导出成功！" });
+      });
+    },
+    deleteItem() {
+      if (this.selectionList.length == 0) {
+        this.$message.warning("请至少选择一条数据");
+        return;
+      }
+      this.$confirm(`确认删除当前数据吗？`, {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        deleteList(this.ids).then((res) => {
+          console.log(res);
+          if (res.data.code == 200) {
+            this.$message.success("删除成功");
+            this.page.pageSize = 1;
+            this.onLoad();
+          }
+        });
+      });
+    },
+    importRegister() { },
+    handleEdit() {
+      this.$router.push({ path: "/request/add" });
+    },
+    handleDelete(row) {
+      this.$confirm(`确认删除当前数据吗？`, {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        deleteList(row.id).then((res) => {
+          console.log(res);
+          if (res.data.code == 200) {
+            this.$message.success("删除成功");
+            this.page.currentPage = 1;
+            this.onLoad();
+          }
+        });
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+</style>

src/views/product/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <basic-container>
+    <el-form :inline="true">
+      <el-form-item label="商品介绍详情图片：">
+        <div style="width: 360px; height: calc(100vh - 280px); overflow: auto;">
+          <img :src="productDetail.src" style="width: 100%; height: auto;" />
+        </div>
+      </el-form-item>
+      <el-form-item label-width="0">
+        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
+          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
+          <img v-if="imageUrl" :src="imageUrl" class="avatar">
+          <template v-else>
+            <i class="el-icon-plus avatar-uploader-icon"></i>
+            <div class="tip">图片宽度：750 高度：不限 文件大小：≤5M</div>
+          </template>
+        </el-upload>
+      </el-form-item>
+      <div style="text-align:right;padding: 20px 0;">
+        <el-button type="success" size="small" @click="doSave">重新上传</el-button>
+        <el-button type="info" size="small" @click="cancelPublish" v-if="productDetail.status == 2">取消发布</el-button>
+        <el-button type="primary" size="small" @click="doPublish" v-if="productDetail.status == 1">发 布</el-button>
+      </div>
+    </el-form>
+  </basic-container>
+</template>
+
+<script>
+// import {getBaseList,getTypeList} from "@/api/base"
+import {
+  getList,
+  exportList,
+  deleteList,
+  detailList,
+} from "@/api/statistics/statistics";
+export default {
+  data() {
+    return {
+      productDetail: {
+        src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
+        status: 1
+      },
+      imageUrl: ''
+
+    };
+  },
+  created() {
+  },
+  methods: {
+    //商品详情
+    queryProduct() {
+      
+    },
+    //重新上传
+    doSave() {
+      if(this.imageUrl == '') {
+        this.$message.warning("请先上传图片");
+        return;
+      }
+      this.$confirm(`确认重新上传当前商品图片吗？`, {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        this.$message.success("重新上传成功");
+        this.imageUrl = "";
+        this.productDetail.src = "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100";
+      });
+    },
+    //取消发布
+    cancelPublish() {
+      this.$confirm(`确认取消发布当前商品吗？`, {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        this.$message.success("取消发布成功");
+      });
+    },
+    //发布
+    doPublish() {
+      this.$confirm(`确认发布当前商品吗？`, {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        this.$message.success("发布成功");
+        this.imageUrl = "";
+      });
+    },
+    handleAvatarSuccess(res, file) {
+      this.imageUrl = URL.createObjectURL(file.raw);
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg';
+      const isLt2M = file.size / 1024 / 1024 < 5;
+
+      if (!isJPG) {
+        this.$message.error('上传头像图片只能是 JPG 格式!');
+      }
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 5MB!');
+      }
+      return isJPG && isLt2M;
+    }
+  },
+};
+</script>
+<style lang="scss">
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #409EFF;
+  width: 368px;
+  text-align: center;
+  margin-top: 100px;
+}
+
+.tip {
+  line-height: 78px;
+  text-align: center;
+}
+
+.avatar {
+  width: 368px;
+  height: 368px;
+  display: block;
+}
+</style>

vue.config.js

@@ -26,7 +26,8 @@ module.exports = {
     proxy: {
       "/api": {
         //本地服务接口地址
-        target: "http://47.104.224.41:80",
+        target: "http://192.168.3.32:80",
+        // target: "http://47.104.224.41:80",
         // target: "http://192.168.1.106:80",
         //远程演示服务地址,可用于直接启动项目
         //target: 'https://saber.bladex.vip/api',