多规格编辑

releaselog.md

@@ -1,4 +1,7 @@
 
+# 0.2.5 (20.11.19 15:00)
+### 多规格列表快捷编辑
+
 # 0.2.4 (20.11.18 19:00)
 ### 多规格编辑
 

src/components/uni-popup/uni-popup-dialog.vue

@@ -197,6 +197,7 @@
 	.uni-dialog-content-text {
 		font-size: 14px;
 		color: #6e6e6e;
+        @include omits(2);
 	}
 
 	.uni-dialog-button-group {
@@ -238,6 +239,8 @@
 	.uni-dialog-input {
 		flex: 1;
 		font-size: 14px;
+		border: 1px solid #f1f1f1;
+		padding: 0 5px;
 	}
 
 	.uni-popup__success {

src/components/uni-popup/uni-popup-spec.vue

@@ -0,0 +1,320 @@
+<template>
+    <view class="uni-popup-dialog">
+        <view class="uni-dialog-title">
+            <text
+                class="uni-dialog-title-text"
+                :class="['uni-popup__' + dialogType]"
+                >{{ title }}</text
+            >
+        </view>
+        <view class="uni-dialog-content">
+            <text class="uni-dialog-content-text" v-if="content">{{
+                content
+            }}</text>
+            <!-- <input  class="uni-dialog-input" v-model="val" :type="inputType" :placeholder="placeholder" :focus="focus" > -->
+			
+        <view class="sku-item" v-for="item of skuData.skus" :key="item.skuId">
+            <text>{{ item.key }}：</text>
+            <input  v-model="item[nameType]" :type="inputType" :placeholder="placeholder"/>
+        </view>
+        </view>
+        <view class="uni-dialog-button-group">
+            <view class="uni-dialog-button" @click="close">
+                <text class="uni-dialog-button-text">取消</text>
+            </view>
+            <view class="uni-dialog-button uni-border-left" @click="onOk">
+                <text class="uni-dialog-button-text uni-button-color"
+                    >确定</text
+                >
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+/**
+ * PopUp 弹出层-对话框样式
+ * @description 弹出层-对话框样式
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=329
+ * @property {String} value input 模式下的默认值
+ * @property {String} placeholder input 模式下输入提示
+ * @property {String} type = [success|warning|info|error] 主题样式
+ *  @value success 成功
+ * 	@value warning 提示
+ * 	@value info 消息
+ * 	@value error 错误
+ * @property {String} mode = [base|input] 模式、
+ * 	@value base 基础对话框
+ * 	@value input 可输入对话框
+ * @property {String} content 对话框内容
+ * @property {Boolean} beforeClose 是否拦截取消事件
+ * @event {Function} confirm 点击确认按钮触发
+ * @event {Function} close 点击取消按钮触发
+ */
+
+export default {
+    name: "uniPopupSpec",
+    props: {
+        value: {
+            type: [String, Number],
+            default: "",
+        },
+        placeholder: {
+            type: [String, Number],
+            default: "请输入内容",
+        },
+        /**
+         * 对话框主题 success/warning/info/error	  默认 success
+         */
+        type: {
+            type: String,
+            default: "error",
+        },
+        /**
+         * 对话框模式 base/input
+         */
+        mode: {
+            type: String,
+            default: "base",
+        },
+        /**
+         * 对话框标题
+         */
+        title: {
+            type: String,
+            default: "提示",
+        },
+        /**
+         * 对话框内容
+         */
+        content: {
+            type: [String, Boolean],
+            default: false,
+        },
+        /**
+         * 拦截取消事件 ，如果拦截取消事件，必须监听close事件，执行 done()
+         */
+        beforeClose: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * 输入框type
+         */
+        inputType: {
+            type: String,
+            default: "digit",
+        },
+        /**
+         * skus
+         */
+        skuData: {
+            type: Object,
+            default: () => {
+                return {};
+            },
+        },
+        /**
+         * 绑定字段名
+         */
+        nameType: {
+            type: String,
+            default: 'price'
+        },
+    },
+    data() {
+        return {
+            dialogType: "error",
+            focus: false,
+            val: "",
+        };
+    },
+    inject: ["popup"],
+    watch: {
+        type(val) {
+            this.dialogType = val;
+        },
+        mode(val) {
+            if (val === "input") {
+                this.dialogType = "info";
+            }
+        },
+        value(val) {
+            this.val = val;
+        },
+        skuData(v) {
+            console.log(v);
+        },
+    },
+    created() {
+        // 对话框遮罩不可点击
+        this.popup.mkclick = false;
+        if (this.mode === "input") {
+            this.dialogType = "info";
+            this.val = this.value;
+        } else {
+            this.dialogType = this.type;
+        }
+    },
+    mounted() {
+        this.focus = true;
+    },
+    methods: {
+        /**
+         * 点击确认按钮
+         */
+        onOk() {
+			for(let item of this.skuData.skus){
+				if(!item[this.nameType]){
+					return this.fn.showToast("请输入修改后值");
+				}
+			}
+            this.$emit(
+                "confirm",
+                () => {
+                    this.popup.close();
+                    if (this.mode === "input") this.val = this.value;
+                },
+                this.skuData
+            );
+        },
+        /**
+         * 点击取消按钮
+         */
+        close() {
+            if (this.beforeClose) {
+                this.$emit("close", () => {
+                    this.popup.close();
+                });
+                return;
+            }
+            this.popup.close();
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.uni-popup-dialog {
+    width: 300px;
+    border-radius: 15px;
+    background-color: #fff;
+}
+
+.uni-dialog-title {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: row;
+    justify-content: center;
+    padding-top: 15px;
+    padding-bottom: 5px;
+}
+
+.uni-dialog-title-text {
+    font-size: 16px;
+    font-weight: 500;
+}
+
+.uni-dialog-content {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 5px 15px 15px 15px;
+    flex-direction: column;
+    text,
+    input {
+        width: 100%;
+    }
+    text {
+        text-align: center;
+        padding-bottom: 10px;
+    }
+}
+
+.uni-dialog-content-text {
+    font-size: 14px;
+    color: #6e6e6e;
+        @include omits(2);
+}
+
+.uni-dialog-button-group {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: row;
+    border-top-color: #f5f5f5;
+    border-top-style: solid;
+    border-top-width: 1px;
+}
+
+.uni-dialog-button {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+
+    flex: 1;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: 45px;
+}
+
+.uni-border-left {
+    border-left-color: #f0f0f0;
+    border-left-style: solid;
+    border-left-width: 1px;
+}
+
+.uni-dialog-button-text {
+    font-size: 14px;
+}
+
+.uni-button-color {
+    color: #27a34f;
+}
+
+.uni-dialog-input {
+    flex: 1;
+    font-size: 14px;
+}
+
+.uni-popup__success {
+    color: #4cd964;
+}
+
+.uni-popup__warn {
+    color: #f0ad4e;
+}
+
+.uni-popup__error {
+    color: #dd524d;
+}
+
+.uni-popup__info {
+    color: #909399;
+}
+.sku-item {
+	width: 100%;
+	&~.sku-item{
+		margin-top: 10px;
+	}
+    text {
+        display: block;
+        width: 100%;
+        font-size: 14px;
+		padding: 0;
+	text-align: left;
+    }
+    input {
+        display: block;
+		border: 1px solid #f1f1f1;
+        width: 100%;
+        margin-top: 5px;
+		padding: 0 5px;
+    }
+}
+</style>

src/pages/manage/good-list.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="page shop-cart-page" :class="{ page_red: theme === 1 }">
         <div class="page__top">
+            <span class="quick-add" @click="jump('/pages/manage/add-good-form')">新增</span>
             <div class="search">
                 <i class="iconfont icontubiao- search__icon"></i>
                 <input
@@ -279,25 +280,52 @@
                 </div>
             </div>
         </div>
+        <!-- 单商品价格 -->
         <uni-popup ref="popup" type="dialog">
             <uni-popup-dialog
                 mode="input"
                 :title="'修改价格'"
                 :content="rePriceText"
+                :value="rePriceValue"
                 placeholder="请输入修改后的价格"
                 @confirm="setPriceConfirm"
             ></uni-popup-dialog>
         </uni-popup>
-
+        <!-- 多规格商品价格 -->
+        <uni-popup ref="popupPriceSkus" type="dialog">
+            <uni-popup-spec
+                mode="input"
+                :title="'修改价格'"
+                :content="rePriceText"
+                :skuData="rePriceSkuData"
+                :nameType="'price'"
+                placeholder="请输入修改后的价格"
+                @confirm="setSkusPriceConfirm"
+            ></uni-popup-spec>
+        </uni-popup>
+        <!-- 单规格库存 -->
         <uni-popup ref="dialogPopup" type="dialog">
             <uni-popup-dialog
                 mode="input"
                 :title="'修改库存'"
                 :content="reStockText"
+                :value="reStockValue"
                 placeholder="请输入修改后的库存"
                 @confirm="setStockConfirm"
             ></uni-popup-dialog>
         </uni-popup>
+        <!-- 多规格商品库存 -->
+        <uni-popup ref="popupStockSkus" type="dialog">
+            <uni-popup-spec
+                mode="input"
+                :title="'修改库存'"
+                :content="reStockText"
+                :skuData="reStockSkuData"
+                :nameType="'stock'"
+                placeholder="请输入修改后的库存"
+                @confirm="setSkusStockConfirm"
+            ></uni-popup-spec>
+        </uni-popup>
 
         <div
             class="canvas"
@@ -330,11 +358,12 @@
 import MyImage from "../../components/image/index";
 import uniPopup from "../../components/uni-popup/uni-popup";
 import uniPopupDialog from "../../components/uni-popup/uni-popup-dialog";
+import uniPopupSpec from "../../components/uni-popup/uni-popup-spec";
 import config from "../../common/js/config";
 import MyShare from "../../components/share/index";
 export default {
     name: "",
-    components: { MyImage, uniPopup, uniPopupDialog, MyShare },
+    components: { MyImage, uniPopup, uniPopupDialog, MyShare, uniPopupSpec },
     // 数据
     data() {
         return {
@@ -357,10 +386,14 @@ export default {
 
             // 修改价格文字
             rePriceText: "",
+            rePriceValue: "",
             rePriceData: {},
+            rePriceSkuData: {},
             // 修改库存文字
             reStockText: "",
+            reStockValue: "",
             reStockData: {},
+            reStockSkuData: {},
             // 上下架状态
             typeStatus: 1,
             // 搜索
@@ -597,10 +630,33 @@ export default {
 
         // 改价
         setPrice(val) {
-            this.rePriceText = "当前价格：" + val.price / 100 + "元";
-            this.rePriceData = val;
-            this.$refs.popup.open({
-                type: "dialog",
+            uni.showLoading({
+                title: "加载中...",
+            });
+            this.api.get("/Product/Detail", { id: val.id }).then((res) => {
+                uni.hideLoading();
+                console.log(res.data);
+                if (!res.data.skuInfo) {
+                    // 单商品
+                    this.rePriceText = val.name;
+                    this.rePriceValue = val.price / 100;
+                    this.rePriceData = val;
+                    this.$refs.popup.open({
+                        type: "dialog",
+                    });
+                } else {
+                    // 多商品
+                    this.rePriceData = res.data;
+                    this.rePriceText = val.name;
+                    let data = JSON.parse(res.data.skuInfo);
+                    for (let item of data.skus) {
+                        item.price /= 100;
+                    }
+                    this.rePriceSkuData = data;
+                    this.$refs.popupPriceSkus.open({
+                        type: "dialog",
+                    });
+                }
             });
         },
 
@@ -636,12 +692,48 @@ export default {
             }
         },
 
+        setSkusPriceConfirm(done, value) {
+            console.log(value);
+            for (let item of value.skus) {
+                item.price = parseInt(Number(item.price) * 100);
+            }
+            this.rePriceData.skuInfo = JSON.stringify(value);
+            this.api.post("/product/SaveEdit", this.rePriceData).then((res) => {
+                if (res.success) {
+                    this.fn.showToast("修改成功");
+                    done();
+                } else {
+                    this.fn.showToast("修改失败");
+                }
+            });
+        },
+
         // 改库存
         setStock(val) {
-            this.reStockText = "当前库存：" + val.stock;
-            this.reStockData = val;
-            this.$refs.dialogPopup.open({
-                type: "dialog",
+            uni.showLoading({
+                title: "加载中...",
+            });
+            this.api.get("/Product/Detail", { id: val.id }).then((res) => {
+                uni.hideLoading();
+                console.log(res.data);
+                if (!res.data.skuInfo) {
+                    // 单商品
+                    this.reStockText = val.name;
+                    this.reStockValue = val.stock;
+                    this.reStockData = val;
+                    this.$refs.dialogPopup.open({
+                        type: "dialog",
+                    });
+                } else {
+                    // 多商品
+                    this.reStockData = res.data;
+                    this.reStockText = val.name;
+                    let data = JSON.parse(res.data.skuInfo);
+                    this.reStockSkuData = data;
+                    this.$refs.popupStockSkus.open({
+                        type: "dialog",
+                    });
+                }
             });
         },
 
@@ -675,6 +767,22 @@ export default {
             }
         },
 
+        setSkusStockConfirm(done, value) {
+            // console.log(value);
+            for (let item of value.skus) {
+                item.stock = Number(item.stock);
+            }
+            this.reStockData.skuInfo = JSON.stringify(value);
+            this.api.post("/product/SaveEdit", this.reStockData).then((res) => {
+                if (res.success) {
+                    this.fn.showToast("修改成功");
+                    done();
+                } else {
+                    this.fn.showToast("修改失败");
+                }
+            });
+        },
+
         shareLoading(id, status) {
             for (let item of this.goodsList) {
                 if (item.id === id) {
@@ -1808,4 +1916,10 @@ page {
 .remove-icon {
     padding-left: px(20);
 }
+.quick-add{
+    font-size: px(44);
+    color:  rgb(0, 188, 38);
+    flex-shrink: 0;
+    margin-right: px(30);
+}
 </style>

src/pages/manage/index.vue

@@ -48,7 +48,7 @@
 
         <button class="btn" @click="layout">退出登录</button>
 
-        <div class="ver">0.2.4</div>
+        <div class="ver">0.2.5</div>
     </div>
 </template>