update

admin-update/src/cool/components/upload/index.vue

@@ -29,7 +29,7 @@
 		>
 			<slot name="content">
 				<div class="upload-wrap" v-loading="item.loading">
-					<img :src="item.url" alt v-if="item.url" />
+					<img :src="imgHostUrl + item.url" alt v-if="item.url" />
 					<i class="el-icon-plus avatar-uploader-icon" v-else></i>
 
 					<i class="el-icon-close" v-if="item.url" @click.stop="removeFile(index)"></i>
@@ -42,6 +42,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { baseUrl } from '@/config/env';
+import { imgHostUrl } from '@/config/env';
 
 export default {
 	props: {
@@ -61,6 +62,7 @@ export default {
 		const upload = this.$service.common.upload();
 
 		return {
+			imgHostUrl: imgHostUrl,
 			action: upload.url,
 			list: [],
 			index: 0
@@ -152,18 +154,18 @@ export default {
 
 			if (multiple) {
 				if (item.url) {
-					item.url = smallUrl;
+					item.url = shortUrl;
 				} else {
 					// item.url = smallUrl;
 					this.list.push({
-						url: smallUrl
+						url: shortUrl
 					});
 				}
 				console.log('sadfas', this.list);
 			} else {
 				this.list = [
 					{
-						url: smallUrl
+						url: shortUrl
 					}
 				];
 			}

admin-update/src/sass/shop/list.vue

@@ -1,323 +1,316 @@
 <template>
-    <div class="app-list-content">
-        <cl-crud class="liu-crud-wrap" @load="onLoad">
-            <!-- 粉丝 -->
-            <template #table-column-totalFans="{scope}">
-                <span>{{ scope.row.merchantAsset.totalFans }}</span>
-            </template>
+	<div class="app-list-content">
+		<cl-crud class="liu-crud-wrap" @load="onLoad">
+			<!-- 粉丝 -->
+			<template #table-column-totalFans="{scope}">
+				<span>{{ scope.row.merchantAsset.totalFans }}</span>
+			</template>
 
-            <!-- 客户 -->
-            <template #table-column-totalUser="{scope}">
-                <span>{{ scope.row.merchantAsset.totalUser }}</span>
-            </template>
+			<!-- 客户 -->
+			<template #table-column-totalUser="{scope}">
+				<span>{{ scope.row.merchantAsset.totalUser }}</span>
+			</template>
 
-            <!-- 访问量 -->
-            <template #table-column-totalVisit="{scope}">
-                <span>{{ scope.row.merchantAsset.totalVisit }}</span>
-            </template>
+			<!-- 访问量 -->
+			<template #table-column-totalVisit="{scope}">
+				<span>{{ scope.row.merchantAsset.totalVisit }}</span>
+			</template>
 
-            <!-- 微信支付 -->
-            <template #table-column-wxPayInit="{scope}">
-                <i v-if="scope.row.extend.wxPayInit== '0'" class="iconfont icondagou"></i>
-                <i v-else class="iconfont icondagou" style="color: rgb(219, 219, 221);"></i>
-                <el-button  type="text" @click="payOption(1,scope.row)">配置</el-button>
-            </template>
-            <!-- 支付宝支付 -->
-            <template #table-column-aliPayInit="{scope}">
-                <i v-if="scope.row.extend.aliPayInit== '0'" class="iconfont icondagou"></i>
-                <i v-else class="iconfont icondagou" style="color: rgb(219, 219, 221)"></i>
-                <el-button  type="text" @click="payOption(2,scope.row)">配置</el-button>
-            </template>
+			<!-- 微信支付 -->
+			<template #table-column-wxPayInit="{scope}">
+				<i v-if="scope.row.extend.wxPayInit == '0'" class="iconfont icondagou"></i>
+				<i v-else class="iconfont icondagou" style="color: rgb(219, 219, 221);"></i>
+				<el-button type="text" @click="payOption(1, scope.row)">配置</el-button>
+			</template>
+			<!-- 支付宝支付 -->
+			<template #table-column-aliPayInit="{scope}">
+				<i v-if="scope.row.extend.aliPayInit == '0'" class="iconfont icondagou"></i>
+				<i v-else class="iconfont icondagou" style="color: rgb(219, 219, 221)"></i>
+				<el-button type="text" @click="payOption(2, scope.row)">配置</el-button>
+			</template>
 
-            <!-- 公众号 -->
-            <template #table-column-wxAppId="{scope}">
-                <span v-if="scope.row.wxAppId">{{ scope.row.wxAppId }}</span>
-                <el-button
-                        type="text"
-                        v-else
-                        @click="bindJump(`/wx-open/begin-auth?id=${scope.row.id}`)"
-                >待绑定
-                </el-button
-                >
-            </template>
+			<!-- 公众号 -->
+			<template #table-column-wxAppId="{scope}">
+				<span v-if="scope.row.wxAppId">{{ scope.row.wxAppId }}</span>
+				<el-button
+					type="text"
+					v-else
+					@click="bindJump(`/wx-open/begin-auth?id=${scope.row.id}`)"
+					>待绑定
+				</el-button>
+			</template>
 
-            <!-- 小程序 -->
-            <template #table-column-miniAppId="{scope}">
-                <span v-if="scope.row.miniAppId">{{ scope.row.miniAppId }}</span>
-                <el-button
-                        type="text"
-                        v-else
-                        @click="bindJump(`/wx-open/begin-auth?id=${scope.row.id}&authType=2`)"
-                >待绑定
-                </el-button
-                >
-            </template>
+			<!-- 小程序 -->
+			<template #table-column-miniAppId="{scope}">
+				<span v-if="scope.row.miniAppId">{{ scope.row.miniAppId }}</span>
+				<el-button
+					type="text"
+					v-else
+					@click="bindJump(`/wx-open/begin-auth?id=${scope.row.id}&authType=2`)"
+					>待绑定
+				</el-button>
+			</template>
 
-            <!-- 平台帐号激活 -->
-            <template #slot-activation="{scope}">
-                <el-button
-                        type="primary"
-                        size="mini"
-                        @click="bindJump(`/merchant/add-platform-merchant`)"
-                >平台帐号激活
-                </el-button
-                >
-            </template>
-        </cl-crud>
-        <!-- 微信支付 -->
-        <el-dialog
-                :title="dialogTitle"
-                :visible.sync="wxPayDialog"
-                :close-on-click-modal="false"
-                width="500px"
-        >
-            <div class="ad-modal-content">
-                <el-form
-                        v-if="plamPayType===1"
-                        :model="form"
-                        :rules="rule"
-                        ref="form"
-                        label-width="100px"
-                        class="demo-form"
-                >
-                    <el-form-item label="商户ID" prop="status">
-                        <el-input
-                                v-model="form.wxPayMerchantId"
-                                placeholder="请输入商户ID"
-                                size="small"
-                        ></el-input>
-                    </el-form-item>
-                    <el-form-item label="密钥" prop="remark">
-                        <el-input type="textarea" v-model="form.wxPayKey" ></el-input>
-                    </el-form-item>
-                </el-form>
-                <el-form
-                        v-if="plamPayType===2"
-                        :model="form"
-                        :rules="rule"
-                        ref="form"
-                        label-width="100px"
-                        class="demo-form"
-                >
-                    <el-form-item label="商户ID" prop="status">
-                        <el-input
-                                v-model="form.alipayPId"
-                                placeholder="请输入商户ID"
-                                size="small"
-                        ></el-input>
-                    </el-form-item>
-                    <el-form-item label="商户私钥" prop="remark">
-                        <el-input type="textarea" v-model="form.alipayKey" ></el-input>
-                    </el-form-item>
-                    <el-form-item label="支付宝公钥" prop="remark">
-                        <el-input type="textarea" v-model="form.alipayPublicKey" ></el-input>
-                    </el-form-item>
-                </el-form>
-            </div>
-            <div slot="footer" class="dialog-footer">
-                <el-button size="small" @click="resetForm('form')">取 消</el-button>
-                <el-button type="primary" size="small" @click="setPayConfirm">确认</el-button>
-            </div>
-        </el-dialog>
-        <!-- 支付宝支付 -->
-    </div>
+			<!-- 平台帐号激活 -->
+			<template #slot-activation="{scope}">
+				<el-button
+					type="primary"
+					size="mini"
+					@click="bindJump(`/merchant/add-platform-merchant`)"
+					>平台帐号激活
+				</el-button>
+			</template>
+		</cl-crud>
+		<!-- 微信支付 -->
+		<el-dialog
+			:title="dialogTitle"
+			:visible.sync="wxPayDialog"
+			:close-on-click-modal="false"
+			width="500px"
+		>
+			<div class="ad-modal-content">
+				<el-form
+					v-if="plamPayType === 1"
+					:model="form"
+					:rules="rule"
+					ref="form"
+					label-width="100px"
+					class="demo-form"
+				>
+					<el-form-item label="商户ID" prop="status">
+						<el-input
+							v-model="form.wxPayMerchantId"
+							placeholder="请输入商户ID"
+							size="small"
+						></el-input>
+					</el-form-item>
+					<el-form-item label="密钥" prop="remark">
+						<el-input type="textarea" v-model="form.wxPayKey"></el-input>
+					</el-form-item>
+				</el-form>
+				<el-form
+					v-if="plamPayType === 2"
+					:model="form"
+					:rules="rule"
+					ref="form"
+					label-width="100px"
+					class="demo-form"
+				>
+					<el-form-item label="商户ID" prop="status">
+						<el-input
+							v-model="form.alipayPId"
+							placeholder="请输入商户ID"
+							size="small"
+						></el-input>
+					</el-form-item>
+					<el-form-item label="商户私钥" prop="remark">
+						<el-input type="textarea" v-model="form.alipayKey"></el-input>
+					</el-form-item>
+					<el-form-item label="支付宝公钥" prop="remark">
+						<el-input type="textarea" v-model="form.alipayPublicKey"></el-input>
+					</el-form-item>
+				</el-form>
+			</div>
+			<div slot="footer" class="dialog-footer">
+				<el-button size="small" @click="resetForm('form')">取 消</el-button>
+				<el-button type="primary" size="small" @click="setPayConfirm">确认</el-button>
+			</div>
+		</el-dialog>
+		<!-- 支付宝支付 -->
+	</div>
 </template>
 
 <script>
-    import {getFirstHost} from '@/cool/utils';
+import { getFirstHost } from '@/cool/utils';
 
-    export default {
-        data() {
-            return {
-                // cl-crud
-                app: null,
-                wxPayDialog: false,
-                dialogTitle: '',
-                plamPayType: 1,
-                form: {},
-                rule: {}
-            };
-        },
-        mounted() {
-        },
-        methods: {
-            wxPayConfigFn() {
-            },
-            // 绑定跳转
-            bindJump(url) {
-                let host = `http://api.w.${getFirstHost()}.com`;
-                window.open(host + url);
-            },
-            // crud
-            onLoad({ctx, app}) {
-                this.app = app;
-                let applyHost = () => {
-                    return this.$service.sassShop.merchantList();
-                };
-                ctx.service({
-                    page: applyHost
-                })
-                    .set('table', {
-                        columns: [
-                            {
-                                prop: 'id',
-                                label: 'ID',
-                                align: 'center'
-                            },
-                            {
-                                prop: 'merchantName',
-                                label: '名称',
-                                align: 'center'
-                            },
-                            {
-                                prop: 'totalFans',
-                                label: '粉丝',
-                                align: 'center'
-                            },
-                            {
-                                prop: 'totalUser',
-                                label: '客户',
-                                align: 'center'
-                            },
-                            {
-                                prop: 'totalIncome',
-                                label: '收入',
-                                align: 'center',
-                                emptyText: '无'
-                            },
-                            {
-                                prop: 'totalVisit',
-                                label: '访问量',
-                                align: 'center'
-                            },
-                            {
-                                prop: 'wxPayInit',
-                                label: '微信支付',
-                                align: 'center'
-                            },
-                            {
-                                prop: 'aliPayInit',
-                                label: '支付宝支付',
-                                align: 'center',
-                                'min-width': '100px'
-                            },
-                            {
-                                prop: 'adminName',
-                                label: '店长',
-                                align: 'center'
-                            },
-                            {
-                                prop: 'openAppId',
-                                label: '平台',
-                                align: 'center',
-                                'min-width': '150px'
-                            },
-                            {
-                                prop: 'wxAppId',
-                                label: '公众号',
-                                align: 'center',
-                                'min-width': '150px'
-                            },
-                            {
-                                prop: 'miniAppId',
-                                label: '小程序',
-                                align: 'center',
-                                'min-width': '150px'
-                            },
-                            {
-                                prop: 'miniVersion',
-                                label: '小程序版本',
-                                align: 'center'
-                            },
-                            {
-                                prop: 'setName',
-                                label: '套餐',
-                                align: 'center'
-                            },
-                            {
-                                prop: 'status',
-                                label: '状态',
-                                align: 'center'
-                            }
-                        ],
-                        // 操作列
-                        op: {
-                            visible: false, // 是否显示
-                            // 同 element-ui Table-column Attributes
-                            props: {
-                                width: 150,
-                                align: 'center',
-                                fixed: 'right',
-                                label: '操作'
-                            },
-                            // 布局，请移步 `layout`
-                            layout: []
-                        }
-                    })
-                    .set('layout', [
-                        // ['slot-tabs'],
-                        ['flex1', 'refresh-btn', 'slot-activation'],
-                        ['data-table'],
-                        ['flex1', 'pagination']
-                    ])
-                    .done();
-                app.refresh();
-            },
+export default {
+	data() {
+		return {
+			// cl-crud
+			app: null,
+			wxPayDialog: false,
+			dialogTitle: '',
+			plamPayType: 1,
+			form: {},
+			rule: {}
+		};
+	},
+	mounted() {},
+	methods: {
+		wxPayConfigFn() {},
+		// 绑定跳转
+		bindJump(url) {
+			let host = `http://api.w.${getFirstHost()}.com`;
+			window.open(host + url);
+		},
+		// crud
+		onLoad({ ctx, app }) {
+			this.app = app;
+			let applyHost = () => {
+				return this.$service.sassShop.merchantList();
+			};
+			ctx.service({
+				page: applyHost
+			})
+				.set('table', {
+					columns: [
+						{
+							prop: 'id',
+							label: 'ID',
+							align: 'center'
+						},
+						{
+							prop: 'merchantName',
+							label: '名称',
+							align: 'center'
+						},
+						{
+							prop: 'totalFans',
+							label: '粉丝',
+							align: 'center'
+						},
+						{
+							prop: 'totalUser',
+							label: '客户',
+							align: 'center'
+						},
+						{
+							prop: 'totalIncome',
+							label: '收入',
+							align: 'center',
+							emptyText: '无'
+						},
+						{
+							prop: 'totalVisit',
+							label: '访问量',
+							align: 'center'
+						},
+						{
+							prop: 'wxPayInit',
+							label: '微信支付',
+							align: 'center'
+						},
+						{
+							prop: 'aliPayInit',
+							label: '支付宝支付',
+							align: 'center',
+							'min-width': '100px'
+						},
+						{
+							prop: 'adminName',
+							label: '店长',
+							align: 'center'
+						},
+						{
+							prop: 'openAppId',
+							label: '平台',
+							align: 'center',
+							'min-width': '150px'
+						},
+						{
+							prop: 'wxAppId',
+							label: '公众号',
+							align: 'center',
+							'min-width': '150px'
+						},
+						{
+							prop: 'miniAppId',
+							label: '小程序',
+							align: 'center',
+							'min-width': '150px'
+						},
+						{
+							prop: 'miniVersion',
+							label: '小程序版本',
+							align: 'center'
+						},
+						{
+							prop: 'setName',
+							label: '套餐',
+							align: 'center'
+						},
+						{
+							prop: 'status',
+							label: '状态',
+							align: 'center'
+						}
+					],
+					// 操作列
+					op: {
+						visible: false, // 是否显示
+						// 同 element-ui Table-column Attributes
+						props: {
+							width: 150,
+							align: 'center',
+							fixed: 'right',
+							label: '操作'
+						},
+						// 布局，请移步 `layout`
+						layout: []
+					}
+				})
+				.set('layout', [
+					// ['slot-tabs'],
+					['flex1', 'refresh-btn', 'slot-activation'],
+					['data-table'],
+					['flex1', 'pagination']
+				])
+				.done();
+			app.refresh();
+		},
 
-            payOption(type, data) {
-                this.plamPayType = type
-                console.log(type)
-                this.$service.sassShop.merchantExtend({id: data.id}).then(res => {
-                    this.form = {...res}
-                    this.wxPayDialog = true
-                    switch (type) {
-                        case 1: //微信
-                            this.dialogTitle = '微信支付设置'
-                            break;
-                        case 2://支付宝
-                            this.dialogTitle = '支付宝支付设置'
-                            break;
-                    }
-                })
-            },
-            setPayConfirm() {
-                let plamPayType = this.plamPayType
-                switch (plamPayType) {
-                    case 1: //微信
-                        var data = {
-                            merchantId: this.form.merchantId,
-                            wxPayMerchantId: this.form.wxPayMerchantId,
-                            wxPayKey: this.form.wxPayKey
-                        }
-                        this.$service.sassShop.setWxPay(data).then(res => {
-                            this.resetForm()
-                            this.$message("成功")
-                        });
-                        break;
-                    case 2://支付宝
-                        var data = {
-                            merchantId: this.form.merchantId,
-                            alipayPId: this.form.alipayPId,
-                            alipayKey: this.form.alipayKey,
-                            alipayPublicKey: this.form.alipayPublicKey
-                        }
-                        this.$service.sassShop.setAlipa(data);
-                        break;
-
-                }
-
-            },
-            resetForm(formName) {
-                let formNamed = formName || 'form'
-                this.$refs[formNamed].resetFields();
-                this.wxPayDialog = false
-            }
-        }
-    };
+		payOption(type, data) {
+			this.plamPayType = type;
+			console.log(type);
+			this.$service.sassShop.merchantExtend({ id: data.id }).then(res => {
+				this.form = { ...res };
+				this.wxPayDialog = true;
+				switch (type) {
+					case 1: //微信
+						this.dialogTitle = '微信支付设置';
+						break;
+					case 2: //支付宝
+						this.dialogTitle = '支付宝支付设置';
+						break;
+				}
+			});
+		},
+		setPayConfirm() {
+			let plamPayType = this.plamPayType;
+			switch (plamPayType) {
+				case 1: //微信
+					var data = {
+						merchantId: this.form.merchantId,
+						wxPayMerchantId: this.form.wxPayMerchantId,
+						wxPayKey: this.form.wxPayKey
+					};
+					this.$service.sassShop.setWxPay(data).then(res => {
+						this.resetForm();
+						this.$message('成功');
+					});
+					break;
+				case 2: //支付宝
+					var data = {
+						merchantId: this.form.merchantId,
+						alipayPId: this.form.alipayPId,
+						alipayKey: this.form.alipayKey,
+						alipayPublicKey: this.form.alipayPublicKey
+					};
+					this.$service.sassShop.setAlipa(data);
+					break;
+			}
+		},
+		resetForm(formName) {
+			let formNamed = formName || 'form';
+			this.$refs[formNamed].resetFields();
+			this.wxPayDialog = false;
+		}
+	}
+};
 </script>
 <style lang="scss">
-    .icondagou {
-        color: green;
-        font-weight: bold;
-    }
+.icondagou {
+	color: green;
+	font-weight: bold;
+}
 </style>

admin-update/src/service/ad/index.js

@@ -15,6 +15,13 @@ export class AdService extends BaseService {
 			params: data
 		});
 	}
+
+	delete(data) {
+		return this.request({
+			url: '/delete',
+			params: data
+		});
+	}
 }
 
 export default new AdService();

admin-update/src/views/goods/goods-add.vue

@@ -1,162 +1,196 @@
 <template>
-    <div class="app-content">
-        <div class="form-wrap">
-            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px">
-                <el-form-item label="名称" prop="goodsName">
-                    <el-input v-model="ruleForm.goodsName"></el-input>
-                </el-form-item>
-                <el-form-item label="已售" prop="sold">
-                    <el-input v-model="ruleForm.sold"></el-input>
-                </el-form-item>
-                <el-form-item label="库存" prop="stock">
-                    <el-input v-model="ruleForm.stock"></el-input>
-                </el-form-item>
-                <el-form-item label="分类" prop="categoryIdList">
-                    <el-checkbox-group v-model="ruleForm.categoryIdList">
-                        <el-checkbox
-                                border
-                                v-for="(item, index) in categoryData"
-                                :label="item.id"
-                                :key="index"
-                                size="small"
-                                @change="selChangeDialogFn($event, item)"
-                        >{{ item.categoryName }}
-                        </el-checkbox
-                        >
-                    </el-checkbox-group>
-                </el-form-item>
-                <el-form-item label="款式" prop="goodsStyle">
-                    <el-checkbox-group v-model="ruleForm.goodsStyle" @change="changeStyleFn">
-                        <el-checkbox label="1" name="goodsStyle" true-label="1" false-label="0">
-                            <span>多款式</span>
-                        </el-checkbox>
-                    </el-checkbox-group>
-                </el-form-item>
-                <el-form-item label="价格" prop="price">
-                    <el-input v-model="ruleForm.price"></el-input>
-                </el-form-item>
-                <el-form-item label="图片" prop="shopImg">
-                    <div class="list-wrap">
-                        <!--<cl-upload v-model="ruleForm.shopImg"  :props="{multiple:true}"></cl-upload>-->
+	<div class="app-content">
+		<div class="form-wrap">
+			<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px">
+				<el-form-item label="名称" prop="goodsName">
+					<el-input v-model="ruleForm.goodsName"></el-input>
+				</el-form-item>
+				<el-form-item label="已售" prop="sold">
+					<el-input v-model="ruleForm.sold"></el-input>
+				</el-form-item>
+				<el-form-item label="库存" prop="stock">
+					<el-input v-model="ruleForm.stock"></el-input>
+				</el-form-item>
+				<el-form-item label="分类" prop="categoryIdList">
+					<el-checkbox-group v-model="ruleForm.categoryIdList">
+						<el-checkbox
+							border
+							v-for="(item, index) in categoryData"
+							:label="item.id"
+							:key="index"
+							size="small"
+							@change="selChangeDialogFn($event, item)"
+							>{{ item.categoryName }}</el-checkbox
+						>
+					</el-checkbox-group>
+				</el-form-item>
+				<el-form-item label="款式" prop="goodsStyle">
+					<el-checkbox-group v-model="ruleForm.goodsStyle" @change="changeStyleFn">
+						<el-checkbox label="1" name="goodsStyle" true-label="1" false-label="0">
+							<span>多款式</span>
+						</el-checkbox>
+					</el-checkbox-group>
+					<!-- 选择款式 -->
+					<div class="style-modal-content" v-if="ruleForm.goodsStyle == 1">
+						<el-form :inline="true" :model="styleForm" class="demo-form-inline">
+							<div
+								class="flex-center-between"
+								v-for="(item, index) in styleStoreData"
+								:key="index"
+							>
+								<el-form-item label="款式名称">
+									<el-input
+										v-model="item.styleName"
+										placeholder="款式名称"
+									></el-input>
+								</el-form-item>
+								<el-form-item label="价格">
+									<el-input v-model="item.price" placeholder="价格"></el-input>
+								</el-form-item>
+								<el-form-item label="图片" class="flex-center">
+									<cl-upload
+										v-model="item.picture"
+										:props="{ multiple: true }"
+									></cl-upload>
+								</el-form-item>
+								<el-form-item>
+									<el-button
+										type="primary"
+										size="small"
+										@click="styleDelFn(index)"
+										>删除</el-button
+									>
+								</el-form-item>
+							</div>
+						</el-form>
+						<el-button type="primary" size="small" @click="styleFormAddFn"
+							>新增</el-button
+						>
+					</div>
+				</el-form-item>
+				<el-form-item label="价格" prop="price" v-if="ruleForm.goodsStyle == 0">
+					<el-input v-model="ruleForm.price"></el-input>
+				</el-form-item>
+				<el-form-item label="图片" prop="shopImg">
+					<div class="list-wrap">
+						<!--<cl-upload v-model="ruleForm.shopImg"  :props="{multiple:true}"></cl-upload>-->
 
-                        <elxUpload
-                                :limit="4"
-                                :fileList.sync="fileList_show"
-                                @success="fromToData"
-                                @handleRemove="fromToData"
-                        ></elxUpload>
-                    </div>
-                    <div>
-                        <el-button type="primary" size="small" @click="imgStoreModal = true"
-                        >从图库选择
-                        </el-button
-                        >
-                    </div>
-                    <el-dialog :visible.sync="dialogVisible">
-                        <img width="100%" :src="dialogImageUrl" alt/>
-                    </el-dialog>
-                </el-form-item>
-                <el-form-item label="商品简介" prop="content">
-                    <cl-editor-quill v-model="ruleForm.content" @load="editor"></cl-editor-quill>
-                    <!-- <el-input type="textarea" v-model="ruleForm.desc"></el-input> -->
-                </el-form-item>
-                <el-form-item label="节假日自动涨价 ">
-                    <el-checkbox-group v-model="ruleForm.autoRise">
-                        <el-checkbox label="1" name="autoRise" true-label="1" false-label="0">
-                            <span>需要</span>
-                        </el-checkbox>
-                        <el-popover
-                                placement="top"
-                                width="100"
-                                trigger="hover"
-                                v-model="autoPricePopover"
-                        >
-                            <p>特定节日商品会自动进行涨价 无需手动调价</p>
-                            <div style="text-align: right; margin-top: 10px">
-                                <el-button
-                                        size="mini"
-                                        type="primary"
-                                        @click="autoPricePopover = false"
-                                >涨价设置
-                                </el-button
-                                >
-                            </div>
-                            <el-button
-                                    type="text"
-                                    icon="el-icon-question"
-                                    slot="reference"
-                            ></el-button>
-                            <!-- <el-button slot="reference">删除</el-button> -->
-                        </el-popover>
-                    </el-checkbox-group>
-                </el-form-item>
-                <el-form-item label="配送方式">
-                    <el-checkbox-group v-model="ruleForm.needSend">
-                        <el-checkbox label="1" name="type" true-label="1" false-label="0">
-                            <span>到店自提</span>
-                        </el-checkbox>
-                    </el-checkbox-group>
-                </el-form-item>
-                <el-form-item label="运费">
-                    <el-radio-group v-model="ruleForm.freightType">
-                        <el-radio label="0">
-                            <span>按距离收费</span>
-                        </el-radio>
-                        <el-popover
-                                placement="top"
-                                width="100"
-                                trigger="hover"
-                                v-model="chargePopover"
-                        >
-                            <p>5公里内免运费，超过5公里每增加1公里运费增加2元</p>
-                            <div style="text-align: right; margin-top: 10px">
-                                <el-button size="mini" type="primary" @click="chargePopover = false"
-                                >修改
-                                </el-button
-                                >
-                            </div>
-                            <el-button
-                                    type="text"
-                                    icon="el-icon-question"
-                                    slot="reference"
-                                    class="question-btn"
-                            ></el-button>
-                            <!-- <el-button slot="reference">删除</el-button> -->
-                        </el-popover>
-                        <el-radio label="1">
-                            <span>免运费</span>
-                        </el-radio>
-                    </el-radio-group>
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="submitForm('ruleForm',1)">上架出售</el-button>
-                    <el-button @click="submitForm('ruleForm',0)">加入仓库</el-button>
-                </el-form-item>
-            </el-form>
-        </div>
-        <!-- 从图库选择 -->
-        <el-dialog title="从图库选择" :visible.sync="imgStoreModal" width="600px">
-            <div class="store-modal-content">
-                <div class="select-wrap flex-center-start">
-                    <div style="width: 80px">选择分类</div>
-                    <el-select
-                            v-model="imgStoreVal"
-                            placeholder="选择分类"
-                            size="mini"
-                            :clearable="true"
-                            style="width: 200px"
-                            @change="selChangeFn"
-                    >
-                        <el-option
-                                v-for="(item, index) in categoryData"
-                                :key="index"
-                                :label="item.categoryName"
-                                :value="item.id"
-                        >{{ item.categoryName }}
-                        </el-option
-                        >
-                    </el-select>
-                    <!-- <div style="width: 80px">选择分类</div>
+						<elxUpload
+							:limit="4"
+							:fileList.sync="fileList_show"
+							@success="fromToData"
+							@handleRemove="fromToData"
+						></elxUpload>
+					</div>
+					<div>
+						<el-button type="primary" size="small" @click="imgStoreModal = true"
+							>从图库选择</el-button
+						>
+					</div>
+					<el-dialog :visible.sync="dialogVisible">
+						<img width="100%" :src="dialogImageUrl" alt />
+					</el-dialog>
+				</el-form-item>
+				<el-form-item label="商品简介" prop="content">
+					<cl-editor-quill v-model="ruleForm.content" @load="editor"></cl-editor-quill>
+					<!-- <el-input type="textarea" v-model="ruleForm.desc"></el-input> -->
+				</el-form-item>
+				<el-form-item label="节日自动涨价 ">
+					<el-checkbox-group v-model="ruleForm.autoRise">
+						<el-checkbox label="1" name="autoRise" true-label="1" false-label="0">
+							<span>需要</span>
+						</el-checkbox>
+						<el-popover
+							placement="top"
+							width="100"
+							trigger="hover"
+							v-model="autoPricePopover"
+						>
+							<p>特定节日商品会自动进行涨价 无需手动调价</p>
+							<div style="text-align: right; margin-top: 10px">
+								<el-button
+									size="mini"
+									type="primary"
+									@click="autoPricePopover = false"
+									>涨价设置</el-button
+								>
+							</div>
+							<el-button
+								type="text"
+								icon="el-icon-question"
+								slot="reference"
+							></el-button>
+							<!-- <el-button slot="reference">删除</el-button> -->
+						</el-popover>
+					</el-checkbox-group>
+				</el-form-item>
+				<el-form-item label="配送方式">
+					<el-checkbox-group v-model="ruleForm.needSend">
+						<el-checkbox label="1" name="type" true-label="1" false-label="0">
+							<span>到店自提</span>
+						</el-checkbox>
+					</el-checkbox-group>
+				</el-form-item>
+				<el-form-item label="运费">
+					<el-radio-group v-model="ruleForm.freightType">
+						<el-radio label="0">
+							<span>按距离收费</span>
+						</el-radio>
+						<el-popover
+							placement="top"
+							width="100"
+							trigger="hover"
+							v-model="chargePopover"
+						>
+							<p>5公里内免运费，超过5公里每增加1公里运费增加2元</p>
+							<div style="text-align: right; margin-top: 10px">
+								<el-button size="mini" type="primary" @click="chargePopover = false"
+									>修改</el-button
+								>
+							</div>
+							<el-button
+								type="text"
+								icon="el-icon-question"
+								slot="reference"
+								class="question-btn"
+							></el-button>
+							<!-- <el-button slot="reference">删除</el-button> -->
+						</el-popover>
+						<el-radio label="1">
+							<span>免运费</span>
+						</el-radio>
+					</el-radio-group>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="submitForm('ruleForm', 1)"
+						>上架出售</el-button
+					>
+					<el-button @click="submitForm('ruleForm', 0)">加入仓库</el-button>
+				</el-form-item>
+			</el-form>
+		</div>
+		<!-- 从图库选择 -->
+		<el-dialog title="从图库选择" :visible.sync="imgStoreModal" width="600px">
+			<div class="store-modal-content">
+				<div class="select-wrap flex-center-start">
+					<div style="width: 80px">选择分类</div>
+					<el-select
+						v-model="imgStoreVal"
+						placeholder="选择分类"
+						size="mini"
+						:clearable="true"
+						style="width: 200px"
+						@change="selChangeFn"
+					>
+						<el-option
+							v-for="(item, index) in categoryData"
+							:key="index"
+							:label="item.categoryName"
+							:value="item.id"
+							>{{ item.categoryName }}</el-option
+						>
+					</el-select>
+					<!-- <div style="width: 80px">选择分类</div>
                     <el-select
                         v-model="imgStoreVal"
                         size="small"
@@ -170,23 +204,28 @@
                             :value="item.value"
                         >
                         </el-option>
-                    </el-select> -->
-                </div>
-                <div class="img-store-wrap">
-                    <el-checkbox-group v-model="imgStoreArr" class="list-store" @change="setCheckImg">
-                        <div
-                                class="list-checkbox"
-                                v-for="(item, index) in imgStoreData"
-                                :key="index">
-                            <el-checkbox :label="item.imgUrl+''">
-                                <div class="list-img">
-                                    <img :src="item.imgUrl" alt="图库图片"/>
-                                </div>
-                            </el-checkbox>
-                        </div>
-                    </el-checkbox-group>
-                </div>
-                <!-- <el-pagination
+					</el-select>-->
+				</div>
+				<div class="img-store-wrap">
+					<el-checkbox-group
+						v-model="imgStoreArr"
+						class="list-store"
+						@change="setCheckImg"
+					>
+						<div
+							class="list-checkbox"
+							v-for="(item, index) in imgStoreData"
+							:key="index"
+						>
+							<el-checkbox :label="item.imgUrl + ''">
+								<div class="list-img">
+									<img :src="item.imgUrl" alt="图库图片" />
+								</div>
+							</el-checkbox>
+						</div>
+					</el-checkbox-group>
+				</div>
+				<!-- <el-pagination
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="currentPage"
@@ -194,301 +233,287 @@
                     layout="total, prev, pager, next"
                     :total="1000"
                 >
-                </el-pagination> -->
-            </div>
-            <div slot="footer" class="dialog-footer">
-                <el-button size="small" @click="imgStoreModal = false">取 消</el-button>
-                <el-button type="primary" size="small" @click="checkImage"
-                >确 定
-                </el-button
-                >
-            </div>
-        </el-dialog>
-        <!-- 选择款式 -->
-        <el-dialog title="选择款式" :visible.sync="styleStoreModal" width="800px">
-            <div class="style-modal-content">
-                <el-form :inline="true" :model="styleStoreData" class="demo-form-inline">
-                    <div
-                            class="flex-center-between"
-                            v-for="(item, index) in styleStoreData"
-                            :key="index"
-                    >
-                        <el-form-item label="款式名称">
-                            <el-input v-model="item.styleName" placeholder="款式名称"></el-input>
-                        </el-form-item>
-                        <el-form-item label="价格">
-                            <el-input v-model="item.price" placeholder="价格"></el-input>
-                        </el-form-item>
-                        <el-form-item label="图片" class="flex-center">
-                            <cl-upload v-model="item.shopImg" :props="{multiple:true}"></cl-upload>
-                        </el-form-item>
-                        <el-form-item>
-                            <el-button type="primary" size="small" @click="styleDelFn(index)"
-                            >删除
-                            </el-button
-                            >
-                        </el-form-item>
-                    </div>
-                </el-form>
-                <el-button type="primary" size="small" @click="styleFormAddFn">新增</el-button>
-            </div>
-            <div slot="footer" class="dialog-footer">
-                <el-button size="small" @click="styleStoreModal = false">取 消</el-button>
-                <el-button type="primary" size="small" @click="styleStoreModal = false"
-                >确 定
-                </el-button
-                >
-            </div>
-        </el-dialog>
-    </div>
+				</el-pagination>-->
+			</div>
+			<div slot="footer" class="dialog-footer">
+				<el-button size="small" @click="imgStoreModal = false">取 消</el-button>
+				<el-button type="primary" size="small" @click="checkImage">确 定</el-button>
+			</div>
+		</el-dialog>
+	</div>
 </template>
 
 <script>
-    import {mapGetters} from 'vuex';
-    import elxUpload from '@/components/common/elx-upload.vue';
+import { mapGetters } from 'vuex';
+import elxUpload from '@/components/common/elx-upload.vue';
 
-    export default {
-        name: 'goods-add',
-        data() {
-            return {
-                ruleForm: {
-                    goodsName: '',
-                    sold: '',
-                    stock: '',
-                    categoryIdList: [],
-                    goodsStyle: '0',
-                    price: '',
-                    autoRise: '1',
-                    needSend: '0',
-                    shopImg: [],
-                    freightType: '0'
-                },
+export default {
+	name: 'goods-add',
+	data() {
+		return {
+			ruleForm: {
+				goodsName: '',
+				sold: '',
+				stock: '',
+				categoryIdList: [],
+				goodsStyle: '0',
+				price: '',
+				autoRise: '1',
+				needSend: '0',
+				shopImg: [],
+				freightType: '0'
+			},
 
-                rules: {
-                    goodsName: [{required: true, message: '请输入名称', trigger: 'blur'}],
-                    categoryIdList: [{required: true, message: '请选择分类', trigger: 'blur'}],
-                    stock: [{required: true, message: '必填', trigger: 'blur'}],
-                    price: [{required: true, message: '必填', trigger: 'blur'}],
-                    sold: [{required: true, message: '必填', trigger: 'blur'}],
-                    goodsStyle: [{required: true, message: '必填', trigger: 'blur'}],
-                    shopImg: [{required: true, message: '必填', trigger: 'blur'}],
-                    content: [{required: true, message: '必填', trigger: 'blur'}],
+			rules: {
+				goodsName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+				categoryIdList: [{ required: true, message: '请选择分类', trigger: 'blur' }],
+				stock: [{ required: true, message: '必填', trigger: 'blur' }],
+				price: [{ required: true, message: '必填', trigger: 'blur' }],
+				sold: [{ required: true, message: '必填', trigger: 'blur' }],
+				goodsStyle: [{ required: true, message: '必填', trigger: 'blur' }],
+				shopImg: [{ required: true, message: '必填', trigger: 'blur' }],
+				content: [{ required: true, message: '必填', trigger: 'blur' }]
+			},
+			// 图片展示
+			fileList_show: [],
+			dialogImageUrl: '',
+			dialogVisible: false,
+			// 需要自动涨价
+			autoPricePopover: false,
+			// 距离收费
+			chargePopover: false,
+			// 从图库中选择
+			imgStoreData: [],
+			imgStoreModal: false,
+			imgStoreVal: '',
+			imgStoreOpt: [],
+			imgStoreArr: [],
+			currentPage: 1,
+			// 款式选择
+			styleStoreData: [],
+			styleForm: {
+				styleName: '',
+				price: '',
+				picture: ''
+			}
+		};
+	},
+	components: {
+		elxUpload
+	},
+	computed: {
+		...mapGetters({ categoryData: 'category' }),
+		...mapGetters(['token'])
+	},
+	created() {
+		this.init();
+	},
+	methods: {
+		init() {
+			this.pageParams = this.$route.query;
+			if (this.pageParams.editType == '2') {
+				this.$service.goods.info({ id: this.pageParams.id }).then(res => {
+					this.ruleForm = res;
+					this.fliterData(res);
+					console.log(this.ruleForm);
+				});
+			}
+			this.$store.dispatch('getCategory');
+			this._getImgStore();
+		},
+		_getImgStore() {
+			return this.$service.imgStore
+				.list({
+					page: 1,
+					categoryId: this.imgStoreVal
+				})
+				.then(res => {
+					this.imgStoreData = res.list;
+				});
+		},
+		// api
+		addFn(type) {
+			let form = JSON.parse(JSON.stringify(this.ruleForm));
 
-                },
-                // 图片展示
-                fileList_show: [],
-                dialogImageUrl: '',
-                dialogVisible: false,
-                // 需要自动涨价
-                autoPricePopover: false,
-                // 距离收费
-                chargePopover: false,
-                // 从图库中选择
-                imgStoreData: [],
-                imgStoreModal: false,
-                imgStoreVal: '',
-                imgStoreOpt: [],
-                imgStoreArr: [],
-                currentPage: 1,
-                // 款式选择
-                styleStoreModal: false,
-                styleStoreData: [],
-                styleForm: {
-                    styleName: '',
-                    price: '',
-                    img: ''
-                }
-            };
-        },
-        components: {
-            elxUpload
-        },
-        computed: {
-            ...mapGetters({categoryData: 'category'}),
-            ...mapGetters(['token'])
-        },
-        created() {
-            this.init();
-        },
-        methods: {
-            init() {
-                this.pageParams = this.$route.query
-                if (this.pageParams.editType == '2') {
-                    this.$service.goods.detail({id: this.pageParams.id}).then(res => {
-                        this.ruleForm = res
-                        this.fliterData(res)
-                        console.log(this.ruleForm)
-                    })
-                }
-                this.$store.dispatch('getCategory');
-                this._getImgStore();
-            },
-            _getImgStore() {
-                return this.$service.imgStore
-                    .list({
-                        page: 1,
-                        categoryId: this.imgStoreVal
-                    })
-                    .then(res => {
-                        this.imgStoreData = res.list;
-                    });
-            },
-            // api
-            addFn(type) {
-                let form = JSON.parse(JSON.stringify(this.ruleForm));
-                let status = type // 0加入仓库 ,1上架
+			let serverType = 'add';
+			if (this.pageParams.editType == '2') {
+				serverType = 'update';
+				delete form.shortImgList;
+				delete form.imgList;
+				delete form.smallImgList;
+			}
+			if (form.goodsStyle == 1) {
+				delete form.price;
+				form.goodsStyleList = this.styleStoreData;
+			}
+			this.$service.goods[serverType]({
+				...form,
+				status: type
+			}).then(res => {
+				this.resetForm('ruleForm');
+				this.$message.success('添加成功！');
+				this.$router.push('/goods/list');
+			});
+		},
 
-                let serverType = 'add'
-                if (this.pageParams.editType  == '2') {
-                    serverType = 'update'
-                   delete form.shortImgList
-                   delete form.imgList
-                   delete form.smallImgList
-                }
-                this.$service.goods[serverType]({
-                    ...form,
-                    goodsStyleList: this.styleStoreData
-                }).then(res => {
-                    this.resetForm('ruleForm');
-                    this.$message.success('添加成功！');
-                    this.$router.push('/goods/list');
-                });
-            },
+		//编辑的时候初始化数据
+		fliterData(res) {
+			// 图片
+			let list = res.smallImgList;
+			let list2 = res.imgList;
+			let list3 = res.shortImgList;
+			let newList = [];
+			for (let i = 0; i < list.length; i++) {
+				newList.push({ url: list[i], showBBGG: list2[i] });
+			}
+			this.ruleForm.shopImg = list3;
+			this.fileList_show = newList;
+			console.log(this.fileList_show, this.ruleForm.shopImg);
 
-            //编辑的时候初始化数据
-            fliterData(res) {
-                // 图片
-                let list=res.smallImgList
-                let list2=res.imgList
-                let list3=res.shortImgList
-                let newList = []
-                for (let i = 0; i < list.length; i++) {
-                    newList.push({url: list[i],showBBGG:list2[i]})
-                }
-                this.ruleForm.shopImg = list3
-                this.fileList_show = newList
-                console.log( this.fileList_show, this.ruleForm.shopImg)
+			// 处理多款式
+			if (!this.$util.isEmpty(res.goodsStyleList)) {
+				for (let i in res.goodsStyleList) {
+					this.styleStoreData.push(res.goodsStyleList[i]);
+				}
+			}
 
-                // 商品分类
-               this.ruleForm.categoryIdList= res.categoryIdList.map(String)
-            },
-            //上传图片组件逻辑
-            fromToData({file, fileList}) {
-                let list = []
-                // console.log( file, fileList)
-                for (let i = 0; i < fileList.length; i++) {
-                    if (fileList[i].response) {
-                        list.push(fileList[i].response.shortUrl)
-                    }
-                }
-                this.$set( this.ruleForm,'shopImg',list)
-                console.log(this.ruleForm.shopImg)
-            },
-            // operate
-            changeStyleFn(val) {
-                console.log(val);
-                if (val) {
-                    // this.styleFormAddFn()
-                    this.styleStoreModal = true;
-                }
-            },
-            selChangeDialogFn(status, item) {
-                console.log(status, item);
-            },
-            submitForm(formName, type) {
-                this.$refs[formName].validate(valid => {
-                    console.log(valid)
-                    if (valid) {
-                        this.addFn(type);
-                    } else {
-                        console.log('error submit!!');
-                        return false;
-                    }
-                });
-            },
-            resetForm(formName) {
-                this.$refs[formName].resetFields();
-            },
-            checkImage() {
-                this.imgStoreModal = false
-            },
-            setCheckImg(val) {
-                this.$set(this.ruleForm, 'shopImg', this.ruleForm.shopImg.concat(val))
-                console.log(this.ruleForm.shopImg, val)
-            },
+			// 商品分类
+			this.ruleForm.categoryIdList = res.categoryIdList.map(String);
+		},
+		//上传图片组件逻辑
+		fromToData({ file, fileList }) {
+			let list = [];
+			// console.log( file, fileList)
+			for (let i = 0; i < fileList.length; i++) {
+				if (fileList[i].response) {
+					list.push(fileList[i].response.shortUrl);
+				}
+			}
+			this.$set(this.ruleForm, 'shopImg', list);
+			console.log(this.ruleForm.shopImg);
+		},
+		// operate
+		changeStyleFn(val) {
+			console.log(val);
+			this.styleStoreData = [];
+			if (val) {
+				this.styleFormAddFn();
+				// this.styleFormAddFn()
+				this.styleStoreModal = true;
+			}
+		},
+		selChangeDialogFn(status, item) {
+			console.log(status, item);
+		},
+		submitForm(formName, type) {
+			this.$refs[formName].validate(valid => {
+				console.log(valid);
+				if (valid) {
+					this.addFn(type);
+				} else {
+					console.log('error submit!!');
+					return false;
+				}
+			});
+		},
+		resetForm(formName) {
+			this.$refs[formName].resetFields();
+		},
+		checkImage() {
+			this.imgStoreModal = false;
+		},
+		setCheckImg(val) {
+			this.$set(this.ruleForm, 'shopImg', this.ruleForm.shopImg.concat(val));
+			console.log(this.ruleForm.shopImg, val);
+		},
 
-            // 编辑器
-            editor(ref) {
-                console.log(ref);
-            },
-            handleSizeChange(val) {
-                console.log(`每页 ${val} 条`);
-            },
-            handleCurrentChange(val) {
-                console.log(`当前页: ${val}`);
-            },
-            // 图库选择
-            selChangeFn(e) {
-                this.imgStoreVal = e;
-            },
-            // 款式选择弹窗
-            styleDelFn(index) {
-                this.styleStoreData.splice(index, 1);
-            },
-            styleFormAddFn() {
-                let form = JSON.parse(JSON.stringify(this.styleForm));
-                this.styleStoreData.push(form);
-            }
-        }
-    };
+		// 编辑器
+		editor(ref) {
+			console.log(ref);
+		},
+		handleSizeChange(val) {
+			console.log(`每页 ${val} 条`);
+		},
+		handleCurrentChange(val) {
+			console.log(`当前页: ${val}`);
+		},
+		// 图库选择
+		selChangeFn(e) {
+			this.imgStoreVal = e;
+		},
+		// 款式选择弹窗
+		styleDelFn(index) {
+			console.log('index', index);
+			if (this.styleStoreData.length == 1) {
+				this.$message.error('最少保留一个款式！');
+				return false;
+			}
+			this.styleStoreData.splice(index, 1);
+		},
+		styleFormAddFn() {
+			if (this.styleStoreData.length > 5) {
+				this.$message.error('最多选择六个款式！');
+				return false;
+			}
+			let form = JSON.parse(JSON.stringify(this.styleForm));
+			this.styleStoreData.push(form);
+		}
+	}
+};
 </script>
 
 <style lang="scss" scoped>
-    .form-wrap {
-        // width: 60%;
-        .question-btn {
-            position: relative;
-            right: 28px;
-        }
-    }
+.form-wrap {
+	// width: 60%;
+	.question-btn {
+		position: relative;
+		right: 28px;
+	}
+}
 
-    .cl-editor-quill {
-        /deep/ .editor {
-            height: 300px;
-        }
-    }
+.cl-editor-quill {
+	/deep/ .editor {
+		height: 300px;
+	}
+}
 
-    // 图库选择
-    .store-modal-content {
-        .select-wrap {
-            margin-bottom: 20px;
-        }
-        .img-store-wrap {
-            .list-store {
-                @include disFlex(center, flex-start);
-                flex-wrap: wrap;
-                .list-checkbox {
-                    position: relative;
-                    margin-bottom: 10px;
-                    /deep/ .el-checkbox__input {
-                        position: absolute;
-                        top: 10px;
-                        right: 10px;
-                    }
-                }
-                .list-img {
-                    width: 100px;
-                    height: 100px;
-                }
-            }
-        }
-    }
+// 图库选择
+.store-modal-content {
+	.select-wrap {
+		margin-bottom: 20px;
+	}
+	.img-store-wrap {
+		.list-store {
+			@include disFlex(center, flex-start);
+			flex-wrap: wrap;
+			.list-checkbox {
+				position: relative;
+				margin-bottom: 10px;
+				/deep/ .el-checkbox__input {
+					position: absolute;
+					top: 10px;
+					right: 10px;
+				}
+			}
+			.list-img {
+				width: 100px;
+				height: 100px;
+			}
+		}
+	}
+}
 
-    // 风格选择
-    .style-modal-content {
-        /deep/ .upload-wrap {
-            width: 60px !important;
-            height: 60px !important;
-        }
-    }
+// 风格选择
+.style-modal-content {
+	/deep/ .upload-wrap {
+		width: 60px !important;
+		height: 60px !important;
+	}
+	.flex-center-between {
+		margin-top: 10px;
+		&:first-child {
+			margin-top: 0;
+		}
+	}
+}
 </style>

admin-update/src/views/setting/coupon.vue

@@ -1,11 +1,80 @@
 <template>
-	<div class="app-content">新人领券设置</div>
+	<div class="app-content setting-coupon-wrap">
+		<el-form :model="form" :rules="rules" ref="form" label-width="140px" class="demo-form">
+			<el-form-item label="开启状态" prop="name">
+				<el-switch v-model="form.switch" active-value="1" inactive-value="0"></el-switch>
+			</el-form-item>
+			<el-form-item label="新人注册会员赠送" prop="name">
+				<div class="flex-center flex-wrap">
+					<el-input v-model="form.amount" style="width: 150px"></el-input>
+					<div class="prompt-text">元优惠券，满</div>
+					<el-input v-model="form.miniCost" style="width: 150px"></el-input>
+					<div class="prompt-text">元可以使用，领取后</div>
+					<el-input v-model="form.duration" style="width: 150px"></el-input>
+					<div class="prompt-text">天内有效。</div>
+				</div>
+			</el-form-item>
+			<el-form-item>
+				<!-- <el-button @click="resetForm('form')">重置</el-button> -->
+				<el-button type="primary" @click="submitForm('form')">保存</el-button>
+			</el-form-item>
+		</el-form>
+	</div>
 </template>
 
 <script>
 export default {
-	name: 'coupon-setting'
+	name: 'setting-freight',
+	data() {
+		return {
+			form: {
+				switch: 1,
+				amount: 0,
+				miniCost: 0,
+				duration: 0
+			},
+			rules: {}
+		};
+	},
+	mounted() {
+		this.init();
+	},
+	methods: {
+		init() {
+			this.$service.coupon.assetDet().then(res => {
+				if (this.$util.isEmpty(res)) return;
+				Object.keys(this.form).forEach((i, index) => {
+					this.form[i] = res[i];
+				});
+			});
+		},
+		_updateFn() {
+			this.$service.coupon.assetUpdate(this.form).then(res => {
+				this.$store.dispatch('shopInfo');
+				this.$message.success('更新成功！');
+			});
+		},
+		submitForm(formName) {
+			this.$refs[formName].validate(valid => {
+				if (valid) {
+					this._updateFn();
+				} else {
+					console.log('error submit!!');
+					return false;
+				}
+			});
+		},
+		resetForm(formName) {
+			this.$refs[formName].resetFields();
+		}
+	}
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.setting-coupon-wrap {
+	.prompt-text {
+		margin: 0 10px;
+	}
+}
+</style>