123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150 |
- <template>
- <el-form ref="form" :model="form" label-width="120px">
- <el-form-item label="商品名称">
- <el-input v-model="form.name" size="mini"></el-input>
- </el-form-item>
- <el-form-item label="商品简介">
- <el-input v-model="form.describe" size="mini"></el-input>
- </el-form-item>
- <el-form-item label="商品原价">
- <el-input v-model="form.price" size="mini"></el-input>
- </el-form-item>
- <el-form-item label="商品折扣价">
- <el-input v-model="form.discountPrice" size="mini"></el-input>
- </el-form-item>
- <el-form-item label="商品图标">
- <el-upload
- class="avatar-uploader"
- :action="uploadAction"
- :show-file-list="false"
- :on-success="onUploadSuccess"
- :before-upload="onBeforeUpload"
- >
- <img v-if="form.icon" :src="form.icon" class="avatar" />
- <i v-else class="el-icon-plus avatar-uploader-icon"></i>
- </el-upload>
- <p class="zy">注意:图标比例一定要1:1</p>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="save" size="mini">保存</el-button>
- <el-button @click="goBack" size="mini">取消</el-button>
- </el-form-item>
- </el-form>
- </template>
- <script>
- export default {
- data() {
- return {
- uploadAction: process.env.SERVER_PATH + "upload",
- form: {
- gid: 0,
- name: "",
- describe: "",
- price: "",
- discountPrice: "",
- icon: "",
- status: false
- }
- };
- },
- methods: {
- onBeforeUpload: function(file) {
- const isJPG = file.type === "image/jpeg";
- const isPNG = file.type === "image/png";
- if (!isJPG && !isPNG) {
- this.$message.error("上传商品图标只能是 JPG/PNG 格式!");
- return false;
- } else {
- return true;
- }
- },
- onUploadSuccess: function(res, file) {
- if (res.code != 0) {
- this.$message.error(
- "上传图片失败 原因:" + res.msg + "(" + res.code + ")"
- );
- return;
- } else {
- this.form.icon = res.obj;
- }
- },
- save: function() {
- let goods = {
- gid: this.form.gid,
- name: this.form.name,
- describe: this.form.describe,
- icon: this.form.icon,
- status: this.form.status ? 1 : 0,
- price: this.form.price,
- discountPrice: this.form.discountPrice
- };
- let that = this;
- this.$http.editGoodsBase(goods, this).then(data => {
- if (data.code === 0) {
- this.$message({
- message: "操作成功",
- type: "success",
- duration: 1000,
- onClose: function() {
- that.$router.push("/goodsManager");
- }
- });
- }
- });
- },
- goBack: function() {
- this.$router.back();
- }
- },
- mounted: function() {
- var gid = this.$route.query.gid;
- this.form.gid = gid;
- if (gid === 0) {
- return;
- }
- this.$http.getOneGood({ gid: gid }, this).then(res => {
- if (res.code === 0) {
- var base = res.obj;
- this.form.name = base.name;
- this.form.describe = base.describe;
- this.form.price = base.price.price;
- this.form.discountPrice = base.price.discountPrice;
- this.form.icon = base.icon;
- }
- });
- }
- };
- </script>
- <style scoped>
- .avatar-uploader .el-upload {
- border: 1px dashed #d9d9d9;
- border-radius: 6px;
- cursor: pointer;
- position: relative;
- overflow: hidden;
- width: 178px;
- }
- .avatar-uploader .el-upload:hover {
- border-color: #409eff;
- }
- .avatar-uploader img {
- height: 100%;
- width: 100%;
- }
- .el-form-item {
- margin-bottom: 0px;
- }
- .avatar {
- width: 178px;
- height: 178px;
- display: block;
- }
- .zy {
- color: red;
- }
- </style>
|