football/pages/app_admin/add-goods/add-goods.vue

<template>
    <app-layout>
        <view :class="is_service ? 'preventTouchMove' : ' '">
            <view class='title'>基本信息</view>
            <view class='goods-img'>
                <view class='label'>
                    <text>商品图片</text>
                    <text class="label-info">(最多9张，可拖拽改变顺序)</text>
                </view>
                <view class='goods-list'>
                    <movable-area style="height: auto; width: 100%;" class="flex-wrap">
                        <view @touchend.stop='touchend' @touchmove.stop='touchm' @longpress.stop='_longtap(item.pic_url,index,$event)' class='goods-item' v-for="(item,index) in img" :key="index">
                            <image mode="aspectFill" class='goods-cover move-img' :data-index="index" :src="item.pic_url"></image>
                            <image @click.stop='del_img(index)' v-if="!beMove" class='del-btn' src='./../image/delete.png'></image>
                            <view v-if="index == 0 && !beMove" class='main-img'>主图</view>
                        </view>
                        <view v-if="img.length < 9" @click.stop='addImg' class='add-goods-img'>
                            <image src='./../image/add-goods.png'></image>
                            <view>添加</view>
                        </view>
                        <movable-view :data-index="beginIndex" :x="x" :y="y" direction="all" :damping="5000" :friction="1" :disabled="disabled">
                            <image :hidden='imgHidden' mode="aspectFill" class="goods-cover img-border" :src='img_src'></image>
                        </movable-view>
                    </movable-area>
                </view>
            </view>
            <view class='goods-info'>
                <view class='info-item goods-name cross-center dir-left-nowrap'>
                    <view class="form-label">商品名称</view>
                    <view @click="nameBlur" v-if="inputName" :class="form.name.length > 0 ? 'input' : 'input placeholder'">{{form.name ? form.name :'请输入商品名称'}}</view>
                    <input :focus="!inputName" @blur="nameBlur" v-else class='input' placeholder-style="color: #cdcdcd" placeholder="请输入商品名称" v-model='form.name'></input>
                </view>
                <view class='info-item cross-center main-between'>
                    <view class="form-label">商品分类</view>
                    <view @click="chooseCat">
                        <view class='cat-info dir-right-nowrap cross-center'>
                            <image class="to-more" src='/static/image/icon/arrow-right.png'></image>
                            <text v-if="form.cats.length > 0">编辑</text>
                            <text style="color: #cdcdcd" v-else>未选择</text>
                        </view>
                    </view>
                </view>
                <view class='info-item cross-center dir-left-nowrap'>
                    <view class="form-label">单位</view>
                    <view class='dir-left-nowrap cross-center'>
                        <input maxlength="4" placeholder-style="color: #cdcdcd" placeholder="请输入商品单位" v-model='unit' class='input'></input>
                    </view>
                </view>
            </view>
            <view class='title'>规格、价格及库存</view>
            <view class='goods-info'>
                <view class='info-item main-between'>
                    <view>多规格</view>
                    <switch style="transform:scale(0.7)" :checked="set_attr" @change="set_attr = !set_attr"></switch>
                </view>
                <view v-if="set_attr" class='info-item cross-center main-between'>
                    <view class="form-label">商品规格</view>
                    <view @click="chooseAttr">
                        <view class='cat-info dir-right-nowrap cross-center'>
                            <image class="to-more" src='/static/image/icon/arrow-right.png'></image>
                            <text v-if="attr">已设置</text>
                            <text style="color: #cdcdcd" v-else>未设置，点击设置</text>
                        </view>
                    </view>
                </view>
                <view v-if="!set_attr" class='info-item cross-center dir-left-nowrap'>
                    <view class="form-label">规格</view>
                    <view class='dir-left-nowrap cross-center price-input'>
                        <view class="default-attr">默认规格</view>
                    </view>
                </view>
                <view class='info-item cross-center dir-left-nowrap'>
                    <view class="form-label">成本价</view>
                    <view class='dir-left-nowrap price-input cross-center main-between'>
                        <input @change="costChange" placeholder-style="color: #cdcdcd" placeholder="请输入成本价" type='digit' class='input' v-model="form.cost_price"></input>
                        <view>元</view>
                    </view>
                </view>
                <view class='info-item cross-center dir-left-nowrap'>
                    <view class="form-label">原价</view>
                    <view class='dir-left-nowrap price-input cross-center main-between'>
                        <input @change="originalChange" placeholder-style="color: #cdcdcd" placeholder="请输入原价" type='digit' class='input' v-model="form.original_price"></input>
                        <view>元</view>
                    </view>
                </view>
                <view class='info-item cross-center dir-left-nowrap'>
                    <view class="form-label">售价</view>
                    <view class='dir-left-nowrap price-input cross-center main-between'>
                        <input @change="priceChange" placeholder-style="color: #cdcdcd" placeholder="请输入售价" type='digit' class='input' v-model="form.price"></input>
                        <view>元</view>
                    </view>
                </view>
                <view v-if="!set_attr" class='info-item cross-center dir-left-nowrap'>
                    <view class="form-label">库存</view>
                    <view class='dir-left-nowrap price-input cross-center main-between'>
                        <input placeholder-style="color: #cdcdcd" placeholder="请输入库存" type='number' v-model="form.goods_num" class='input unit'></input>
                            <view class="unit-width">{{unit}}</view>
                    </view>
                </view>
                <view v-if="!set_attr" class='info-item cross-center dir-left-nowrap'>
                    <view class="form-label">货号</view>
                    <view class='dir-left-nowrap price-input cross-center'>
                        <input placeholder-style="color: #cdcdcd" placeholder="请输入货号" type='number' class='input' v-model="form.goods_no"></input>
                    </view>
                </view>
                <view v-if="!set_attr" class='info-item cross-center dir-left-nowrap'>
                    <view class="form-label">重量</view>
                    <view class='dir-left-nowrap cross-center price-input'>
                        <input placeholder-style="color: #cdcdcd" placeholder="请输入重量" type='number' v-model='form.goods_weight' class='input'></input>
                        <view>g</view>
                    </view>
                </view>
            </view>
            <view class='title'>运费、包邮及限购</view>
            <view class='goods-info'>
                <view class='info-item cross-center main-between'>
                    <view class="form-label">运费设置</view>
                    <view @click="chooseExpress">
                        <view class='cat-info dir-right-nowrap cross-center'>
                            <image class="to-more" src='/static/image/icon/arrow-right.png'></image>
                            <text v-if="bePostage.id > 0">{{bePostage.name}}</text>
                            <text v-else>未选择</text>
                        </view>
                    </view>
                </view>
                <view class='express-setting'>
                    <view class='express-input cross-center'>
                        <view class="integral">满件包邮</view>
                        <view class='dir-left-nowrap cross-center input-item'>
                            <input placeholder-style="color: #cdcdcd" placeholder="请输入包邮件数" type='number' v-model='form.pieces' class='input'></input>
                            <view>件</view>
                        </view>
                    </view>
                    <view class='express-etc'>如果设置0或空，则不支持满件包邮</view>
                </view>
                <view class='express-setting'>
                    <view class='express-input cross-center'>
                        <view class="integral">满额包邮</view>
                        <view class='dir-left-nowrap cross-center input-item'>
                            <input placeholder-style="color: #cdcdcd" placeholder="请输入包邮金额" type='digit' v-model='form.forehead' class='input'></input>
                            <view>元</view>
                        </view>
                    </view>
                    <view class='express-etc'>如果设置0或空，则不支持满额包邮</view>
                </view>
                <view class='info-item main-between'>
                    <view>限购</view>
                    <switch style="transform:scale(0.7)" :checked="confine" @change="confine=!confine"></switch>
                </view>
                <view v-if="confine" class='info-item cross-center dir-left-nowrap'>
                    <view class="form-label">限购数量</view>
                    <view class='dir-left-nowrap cross-center price-input'>
                        <view class='dir-left-nowrap cross-center price-input'>
                            <input placeholder-style="color: #cdcdcd" placeholder="请输入限购数量" type='number' v-model='form.confine_count' class='input'></input>
                            <view>件</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class='title'>商品图文描述</view>
            <view class='goods-info'>
                <view class='info-item cross-center main-between'>
                    <view class="form-label">商品图文描述</view>
                    <view @click="toGoodsDetail">
                        <view class='cat-info dir-right-nowrap cross-center'>
                            <image class="to-more" src='/static/image/icon/arrow-right.png'></image>
                            <text v-if="goods_detail.length > 0">已添加</text>
                            <text v-else>未添加</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class='title'>积分设置</view>
            <view class='goods-info integral-info'>
                <view class='express-setting'>
                    <view class='express-input cross-center'>
                        <view class="integral">积分赠送</view>
                        <input placeholder-style="color: #cdcdcd" placeholder="请输入积分赠送数量或比例" v-model='give_integral' class='input'></input>
                    </view>
                    <view class='express-etc'>会员购物赠送积分，如果不填或填0，则默认为不赠送，如果带%则为按成交价格的比例计算积分。</view>
                </view>
                <view class='express-setting'>
                    <view class='express-input cross-center'>
                        <view class="integral">积分抵扣</view>
                        <input placeholder-style="color: #cdcdcd" placeholder="请输入积分抵扣数量或比例" v-model='forehead_integral' class='input'></input>
                    </view>
                    <view class='express-etc'>如果不填或填0，则不支持积分抵扣；如果带%则为按成交价格的比例计算抵扣多少元。</view>
                </view>
            </view>
            <view class='title'>卡券</view>
            <view class='goods-info'>
                <view class='info-item cross-center main-between'>
                    <view class="form-label">卡券</view>
                    <view @click="chooseCard">
                        <view class='cat-info dir-right-nowrap cross-center'>
                            <image class="to-more" src='/static/image/icon/arrow-right.png'></image>
                            <text v-if="goods_card.length > 0">已选择</text>
                            <text v-else>未选择</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class='title'>服务内容</view>
            <view class='goods-info'>
                <view class='info-item cross-center main-between'>
                    <view class="form-label">服务内容</view>
                    <view @click="chooseService">
                        <view class='cat-info dir-right-nowrap cross-center'>
                            <image class="to-more" src='/static/image/icon/arrow-right.png'></image>
                            <text v-if="beService.length > 0">已选择</text>
                            <text v-else-if="service.length > 0">未选择</text>
                            <text v-else>未设置</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="main-between form-button">
                <view @click="submit(0)">
                    <view class='save'>保存</view>
                </view>
                <view @click="submit(1)">
                    <view class='send'>上架</view>
                </view>
            </view>
            <view :class="['dialog', `${iphone_x?'iphone_x':''}`]" v-if="dialog">
                <view class="picker-list">
                    <view class="main-between picker-header">
                        <view @click="toggle">取消</view>
                        <view @click="toggle(1)">确定</view>
                    </view>
                    <picker-view :value="[set_postage?postageIndex:-1]" class="picker" @change="bindChange">
                        <picker-view-column>
                            <view v-for="(item,idx) in postage" :key="item.id"
                            :class="[`cross-center picker-text`,{
                                'sure-color': newIndex === idx,
                                'cardinal-color': newIndex === idx + 1 || newIndex === idx - 1,
                                'even-color': newIndex === idx + 2 || newIndex === idx - 2,
                            }]">{{item.name}}</view>
                        </picker-view-column>
                    </picker-view>
                </view>
            </view>
        </view>
        <view class='dialog' v-if="is_service">
            <view class='dialog-item'>
                <view class='dialog-title'>服务内容</view>
                <view class="type-list">
                    <view v-if="is_service" v-for="(item,index) in service" :key="index" @click='choose(item)' class="dir-left-nowrap type-choose" >
                        <image v-if="item.isChoose" class="active-status" src='./../image/active.png'></image>
                        <image v-else class="active-status" src='/static/image/icon/form-er.png'></image>
                        <view :class="[`${item.isChoose ? 'active':''}`]">{{item.name}}</view>
                    </view>
                </view>
                <view class="main-center btn-area">
                    <view class="submit-btn" @click='cancelService'>取消</view>
                    <view class="line"></view>
                    <view class="submit-btn be-submit" @click='submitService'>确认</view>
                </view>
            </view>
        </view>
        <view class='dialog' v-if="modal">
            <view class='dialog-item'>
                <view class='dialog-title'>提示</view>
                <view class="error-info" v-if="set_cat">您暂未设置分类</view>
                <view class="error-info" v-if="set_postage && postage.length == 0">您暂未设置运费模板</view>
                <view class="error-info" v-if="set_service && service.length == 0">您暂未设置服务内容</view>
                <view class="error-info" v-if="set_card && card.length == 0">您暂未设置卡券</view>
                <view class="error-info">请前往商城后台设置</view>
                <view class="main-center btn-area">
                    <view class="submit-btn be-submit" @click='close'>确认</view>
                </view>
            </view>
        </view>
        <view class='dialog' v-if="error">
            <view class='dialog-item'>
                <view class='dialog-title'>提示</view>
                <view class="error-info">{{error}}</view>
                <view class="main-center btn-area">
                    <view class="submit-btn be-submit" @click='close'>确认</view>
                </view>
            </view>
        </view>
        <view class='dialog' v-if="beSubmit">
            <view class='dialog-item'>
                <view class='dialog-title'>提示</view>
                <view class="submit-info">是否确认要上架此商品</view>
                <view class="main-center btn-area">
                    <view class="submit-btn" @click='close'>取消</view>
                    <view class="line"></view>
                    <view class="submit-btn be-submit" @click='toSubmit'>确认</view>
                </view>
            </view>
        </view>
    </app-layout>
</template>

<script>
    import { mapState } from "vuex";

    export default {
        data() {
            return {
                postageIndex: -1,
                height: 0,
                give_integral: 0,
                forehead_integral: 0,
                beSubmit: false,
                inputName: true,
                form: {
                    cats: [],
                    name: '',
                    cost_price: '',
                    price: '',
                    original_price: ''
                },
                cats: [],
                forehead: -1,
                unit: '件',
                iphone_x: false,
                set_attr: false,
                modal: false,
                error: false,
                set_cat: false,
                set_postage: false,
                set_service: false,
                confine: false,
                is_service: false,
                goods_card: [],
                img: [],
                card: [],
                goods_detail: [],
                beMove: false,
                service: [],
                postage: [],
                bePostage: '',
                beService: [],
                default_service: [],
                newIndex: '0',
                index: '0',
                attr: false,
                have_children: false,
                disabled: true,
                imgHidden: true,
                flag: false,
                x: 0,
                y: 0,
                id: 0,
                first_service: true,
                choose_list: [],
                elements: [],
                img_src: '',
                loading: false,
                dialog: false,
                loading: false
            }
        },
        computed: {
            ...mapState({
                theme: state => state.mallConfig.theme,
                userInfo: state => state.user.info,
                adminImg: state => state.mallConfig.__wxapp_img.app_admin,
            })
        },
        methods: {
            money(val) {
              let num = val.toString(); //先转换成字符串类型
              if (num.indexOf('.') == 0) { //第一位就是 .
                num = '0' + num
              }
              num = num.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
              num = num.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
              num = num.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
              num = num.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
              if (num.indexOf(".") < 0 && num != "") {
                num = parseFloat(num);
              }
              return +num
            },
            costChange(e) {
                this.form.cost_price = this.money(e.detail.value)
            },
            originalChange(e) {
                this.form.original_price = this.money(e.detail.value)
            },
            priceChange(e) {
                this.form.price = this.money(e.detail.value)
            },
            nameBlur() {
                this.inputName = !this.inputName;
            },

            catchTouchMove() {
                return false;
            },
            toSubmit() {
                let that = this;
                if(that.loading) {
                    return false
                }
                uni.showLoading({
                    title: '提交中...'
                });
                that.loading = true;
                that.beSubmit = false;
                that.$request({
                    url: that.$api.app_admin.edit,
                    data: {
                        form: JSON.stringify(that.form)
                    },
                    method: 'post'
                }).then(response=>{
                    that.loading = false;
                    that.$hideLoading();
                    uni.hideLoading();
                    that.loading = false;
                    if(response.code == 0) {
                        if(response.code == 0) {
                            uni.showToast({
                                title: response.msg,
                                duration: 1000
                            });
                            uni.setStorage({
                                key: "goods_status",
                                data: '保存成功'
                            })
                            setTimeout(function() {
                                uni.navigateBack();
                            }, 500)
                        }else {
                            uni.showToast({
                                title: response.msg,
                                icon: 'none',
                                duration: 1000
                            });
                        }
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    that.loading = false;
                    that.$hideLoading();
                    uni.hideLoading();
                });
            },

            submit(status) {
                let pass = false;
                let that = this;
                let form = that.form;
                let cats = [];
                if (that.img.length > 0) {
                    form.pic_url = that.img;
                } else {
                    that.error = '请上传商品图片';
                    return false
                }
                if (!form.name) {
                    that.error = '请设置商品名称';
                    return false
                }
                if (that.cats.length == 0) {
                    that.error = '请设置商品分类';
                    return false
                }else {
                    for(let i in that.cats) {
                        cats.push(that.cats[i].value)
                    }
                }
                if (!that.unit) {
                    that.error = '请设置商品单位';
                    return false
                } else {
                    if (!form.unit) {
                        form.unit = that.unit
                    }
                }
                if (!form.cost_price) {
                    that.error = '请设置商品成本价';
                    return false
                }
                if (form.cost_price < 0) {
                    that.error = '成本价不得小于零';
                    return false
                }
                if (!form.original_price) {
                    that.error = '请设置商品原价';
                    return false
                }
                if (form.original_price < 0) {
                    that.error = '商品原价不得小于零';
                    return false
                }
                if (!form.price) {
                    that.error = '请设置商品售价';
                    return false
                }
                if (form.price < 0.01) {
                    that.error = '商品售价不得小于零';
                    return false
                }
                if(!that.set_attr) {
                    form.use_attr = 0;
                    form.attr = []; 
                    if (!form.goods_num) {
                        that.error = '商品库存不得为空';
                        return false
                    } else if (form.goods_num < 0) {
                        that.error = '商品库存不得小于零';
                        return false
                    } else {
                        pass = true;
                    }
                }else {
                    form.use_attr = 1;
                    form.goods_num = 0;
                    if (!form.attr_groups || form.attr_groups.length == 0) {
                        that.error = '请设置商品规格';
                        return false
                    }else {
                        pass = true
                    }
                }
                form.cards = that.goods_card;
                form.services = [];
                if (that.beService.length > 0) {
                    form.services = that.beService;
                }
                let service_num = 0;
                if(that.beService.length == that.default_service.length) {
                    for(let i in that.beService) {
                        if(that.beService[i] == that.default_service[i]) {
                            service_num++;
                        }
                    }
                }
                form.is_default_services = 1;
                if(that.beService.length == 0 || service_num != that.beService.length) {
                    form.is_default_services = 0;
                }
                form.status = status;
                form.virtual_sales = 0;
                form.cover_pic = '';
                form.sort = 100;
                form.accumulative = 1;
                form.member_price = {};
                form.mchCats = [];
                if (that.goods_detail.length > 0) {
                    form.detail = '';
                    for(let i in that.goods_detail) {
                        if(that.goods_detail[i].type == "img") {
                            form.detail += '<p><img src="' + that.goods_detail[i].pic_url + '"/></p>'
                        }else if(that.goods_detail[i].type == "line") {
                            form.detail += '<p><img src="' + that.adminImg.line + '"/></p>'
                        }else if(that.goods_detail[i].type == "text") {
                            form.detail += '<p>' + that.goods_detail[i].text + '</p>'
                        }
                    }
                } else {
                    that.error = '请设置图文描述';
                    return false
                }
                if (that.forehead_integral) {
                    if (that.forehead_integral > 0) {
                        form.forehead_integral_type = 1;
                    } else {
                        form.forehead_integral_type = 2;
                        form.forehead_integral = that.forehead_integral.replace('%', '')
                    }
                }
                if (that.give_integral) {
                    if (that.give_integral > 0) {
                        form.give_integral_type = 1;
                        form.give_integral = that.give_integral;
                    } else {
                        form.give_integral_type = 2;
                        form.give_integral = that.give_integral.replace('%', '')
                    }
                }
                form.freight_id = that.bePostage.id;
                form.freight = that.bePostage;
                form.individual_share = 0;
                form.is_level = 0;
                form.individual_share = 0;
                form.video_url = '';
                if (pass) {
                    that.form = form;
                    that.form.cats = cats;
                    if(that.id > 0) {
                        that.form.id = that.id;
                    }
                    if(status == 0) {
                        that.toSubmit();
                    }else {
                        that.beSubmit = true; 
                    }
                }
            },

            close() {
                this.error = null;
                this.modal = false;
                this.beSubmit = false;
            },

            inputAttr(index) {
                this.attr[index].attr_list[0].attr_id = (+index + 2).toString();
            },

            _longtap: function (img_src,index,e) {
                let that = this;
                var query = uni.createSelectorQuery();
                var nodesRef = query.selectAll(".move-img");
                nodesRef.fields({
                    dataset: true,
                    rect: true

                }, (result) => {
                    that.elements = result;
                }).exec()
                const detail = e.detail;
                that.img[index].pic_url = '';
                that.x = e.currentTarget.offsetLeft;
                that.y = e.currentTarget.offsetTop;
                that.imgHidden = false;
                that.flag = true;
                that.beMove = true;
                that.img_src = img_src;
                that.beginIndex = index;
            },
            //触摸结束
            touchend: function (e) {
                let that = this;
                if (!that.flag) {
                    return;
                }
                const x = e.changedTouches[0].pageX
                const y = e.changedTouches[0].pageY
                const list = that.elements;
                let data = that.img
                const beginIndex = that.beginIndex;
                for (var j = 0; j < list.length; j++) {
                    const item = list[j];
                    if (x > item.left && x < item.right && y > item.top && y < item.bottom) {
                        const endIndex = item.dataset.index;
                        //向后移动
                        if (beginIndex < endIndex) {
                            let tem = data[beginIndex];
                            for (let i = beginIndex; i < endIndex; i++) {
                                data[i] = data[i + 1]
                            }
                            data[endIndex] = tem;
                        }
                        //向前移动
                        if (beginIndex > endIndex) {
                            let tem = data[beginIndex];
                            for (let i = beginIndex; i > endIndex; i--) {
                                data[i] = data[i - 1]
                            }
                            data[endIndex] = tem;
                        }
                        data[endIndex].pic_url = that.img_src;
                        that.img = data;
                    }
                }
                if (!that.img[beginIndex].pic_url) {
                    that.img[beginIndex].pic_url = that.img_src;
                }
                that.imgHidden = true;
                that.flag = false;
                that.beMove = false;
                that.beginIndex = null;
            },
            //滑动
            touchm: function (e) {
                if (this.flag) {
                    const x = e.touches[0].pageX
                    const y = e.touches[0].pageY
                    this.x = x - 60;
                    this.y = y - 129;
                }
            },
            cancelService() {
                let beService = this.beService;
                let service = this.service;
                if (beService.length > 0) {
                    service.forEach(function(res, index) {
                        res.isChoose = false;
                        beService.forEach(function(row) {
                            if (row.id == res.id) {
                                res.isChoose = true;
                            }
                        })
                    })
                } else {
                    service.forEach(function(res, index) {
                        res.isChoose = false;
                    })
                }
                this.beService = beService;
                this.service = service;
                this.set_service = false;
                this.is_service = false;
                setTimeout(v=>{
                    uni.pageScrollTo({
                        scrollTop: 45550,
                        duration: 0
                    });
                },0)
            },

            submitService() {
                let beService = [];
                this.service.forEach(function(row) {
                    if (row.isChoose) {
                        beService.push(row)
                    }
                })
                this.beService = beService;
                this.set_service = false;
                this.is_service = false;
                setTimeout(v=>{
                    uni.pageScrollTo({
                        scrollTop: 45550,
                        duration: 0
                    });
                },0)
            },
            choose(item) {
                let that = this;
                that.service.forEach(function(row) {
                    if (row.id == item.id) {
                        row.isChoose = !row.isChoose;
                        that.$forceUpdate();
                    }
                })
            },
            toGoodsDetail() {
                uni.navigateTo({
                    url: '/pages/app_admin/goods-detail/goods-detail'
                })
            },
            addImg() {
                let that = this;
                let num = 9 - that.img.length;
                uni.chooseImage({
                    count: num,
                    sizeType: ['original', 'compressed'],
                    sourceType: ['album', 'camera'],
                    success(res) {
                        // tempFilePath可以作为img标签的src属性显示图片
                        const tempFilePaths = res.tempFilePaths;
                        let img = that.img;
                        tempFilePaths.forEach(function (row, index) {   
                            uni.showLoading({
                                title: '上传中...'
                            });
                            let fileName = '';
                            // #ifdef MP-BAIDU
                            fileName = row.substr(row.lastIndexOf('/') + 1);
                            // #endif
                            uni.uploadFile({
                                url: that.$api.upload.file,
                                filePath: row,
                                name: 'file',
                                fileType: 'image',
                                formData: {
                                    file: row,
                                    file_name: fileName
                                },
                                success(res) {
                                    // #ifndef MP-BAIDU
                                    const imgInfo = JSON.parse(res.data);
                                    // #endif
                                    // #ifdef MP-BAIDU
                                    const imgInfo = res.data;
                                    // #endif
                                    let para = {
                                        pic_url: imgInfo.data.url,
                                        id: imgInfo.data.id
                                    }
                                    if (imgInfo.code == 0) {
                                        img.push(para)
                                    }
                                    that.img = img;
                                    if (index == tempFilePaths.length - 1) {
                                        uni.hideLoading();
                                    }
                                },
                                fail(e) {
                                    console.log('upload fail:', e);
                                    if (e && e.errMsg) {
                                        uni.showModal({
                                            title: '错误',
                                            content: e.errMsg,
                                            showCancel: false,
                                        });
                                    }
                                }
                            })
                        })
                    }
                })
            },
            del_img(index) {
                this.img.splice(index, 1);
            },
            chooseCat() {
                uni.navigateTo({
                    url: '/pages/app_admin/goods-cat/goods-cat'
                })
            },
            chooseAttr() {
                let that = this;
                uni.navigateTo({
                    url: '/pages/app_admin/goods-attr/goods-attr'
                })
                uni.setStorage({
                    key: "goods_unit",
                    data: that.unit
                })
            },
            bindChange(e) {
                this.newIndex = e.detail.value[0]
            },
            toggle(status) {
                this.choose_list = [];
                this.dialog = false;
                this.set_cat = false;
                if (status == 1) {
                    if (this.set_postage) {
                        this.bePostage = this.postage[this.newIndex]
                    }
                }else {
                    this.set_postage = false;
                }
            },
            chooseService() {
                let that = this;
                if(that.first_service) {
                    that.$request({
                        url: that.$api.app_admin.service,
                    }).then(response=>{
                        that.$hideLoading();
                        if(response.code == 0) {
                            that.service = response.data.list;
                            if (response.data.list.length == 0) {
                                that.modal = true;
                            } else {
                                that.is_service = true;
                            }
                            let beService = [];
                            response.data.list.forEach(function (row) {
                                row.isChoose = false
                                if (row.is_default == 1) {
                                    beService.push(row);
                                    row.isChoose = true
                                }
                            })
                            that.set_service = true;
                            that.beService = beService;
                            that.default_service = beService;
                            that.first_service = false;
                        }else {
                            uni.showToast({
                                title: response.msg,
                                icon: 'none',
                                duration: 1000
                            });
                        }
                    }).catch(response => {
                        that.$hideLoading();
                    });
                }else {
                    if (that.service.length == 0) {
                        that.modal = true;
                    } else {
                        that.is_service = true;
                    }
                }
            },
            chooseCard() {
                let that = this;
                that.$request({
                    url: that.$api.app_admin.card,
                }).then(response=>{
                    that.$hideLoading();
                    if(response.code == 0) { true;
                        that.card = response.data.list;
                        if(response.data.list.length == 0) {
                            that.set_card = true;
                            that.modal = true;
                        }else {
                            uni.navigateTo({
                                url: '/pages/app_admin/goods-card/goods-card'
                            })
                        }
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    that.$hideLoading();
                });
            },
            chooseExpress() {
                let that = this;
                that.$request({
                    url: that.$api.app_admin.postage,
                }).then(response=>{
                    that.$hideLoading();
                    if(response.code == 0) {
                        if (response.data.list.length == 0) {
                            that.set_postage = true;
                            that.modal = true;
                            that.postage = response.data.list;
                        } else {
                            let arr = [];
                            response.data.list.forEach(function (row, index) {
                                arr.push(response.data.list[index].id)
                            })
                            let index = arr.indexOf(that.bePostage.id);
                            if(index > -1) {
                                that.postageIndex = index;
                                that.newIndex = index;
                            }else {
                                that.bePostage = ''
                            }
                            that.set_postage = true;
                            that.dialog = true;
                            that.postage = response.data.list;
                        }
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    that.$hideLoading();
                });
            },
            getService(id) {
                let that = this;
                that.$request({
                    url: that.$api.app_admin.service,
                }).then(response=>{
                    that.$hideLoading();
                    if(response.code == 0) {
                        that.service = response.data.list;
                        for(let i in that.service) {
                            that.service[i].isChoose = false;
                        }
                        if(id > 0) {
                            for(let j in that.beService) {
                                for(let i in that.service) {
                                    if(that.service[i].id == that.beService[j].id) {
                                        that.service[i].isChoose = true;
                                        that.first_service = false;
                                    }
                                }
                            }
                        }else {
                            console.log(2)
                            that.beService = [];
                            response.data.list.forEach(function(row) {
                                row.isChoose = false
                                if (row.is_default == 1) {
                                    that.beService.push(row);
                                    row.isChoose = true
                                }
                            })
                        }
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    that.$hideLoading();
                });
            },
            getPostage(id) {
                let that = this;
                that.$request({
                    url: that.$api.app_admin.postage,
                }).then(response=>{
                    that.$hideLoading();
                    if(response.code == 0) {
                        that.postage = response.data.list;
                        if(id > 0) {
                            return
                        }else {
                            that.bePostage = '';
                            response.data.list.forEach(function(row) {
                                if (row.status == 1) {
                                    that.bePostage = row;
                                }
                            })
                        }
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    that.$hideLoading();
                });
            },
            getCard() {
                let that = this;
                that.$request({
                    url: that.$api.app_admin.card,
                }).then(response=>{
                    that.$hideLoading();
                    if(response.code == 0) {
                        that.card = response.data.list;
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    that.$hideLoading();
                });
            },
            getDetail(id) {
                let that = this;
                that.$request({
                    url: that.$api.app_admin.goods_edit,
                    data: {
                        id: id
                    }
                }).then(response=>{
                    that.$hideLoading();
                    that.getService(id);
                    that.getPostage(id);
                    if(response.code == 0) {
                        that.form = response.data.detail;
                        that.img = that.form.pic_url;
                        that.cats = that.form.cats;
                        that.set_attr = that.form.use_attr;
                        that.beService = that.form.services;
                        that.bePostage = that.form.freight;
                        that.goods_card = that.form.cards;
                        that.forehead_integral = +that.form.forehead_integral;
                        if(that.form.forehead_integral_type == 2) {
                            that.forehead_integral = that.form.forehead_integral + '%';
                        }
                        that.give_integral = +that.form.give_integral;
                        if(that.form.give_integral_type == 2) {
                            that.give_integral = that.form.give_integral + '%';
                        }
                        if(that.form.attr_groups.length > 0 && that.form.attr.length > 0) {
                            that.attr = true;
                            uni.setStorage({
                                key: "goods_attr_groups",
                                data: that.form.attr_groups
                            })
                            uni.setStorage({
                                key: "goods_attr",
                                data: that.form.attr
                            })
                        }
                        let detail = that.form.detail.split(/<\/p>|<br\/>|<img /);
                        let good_detail = [];
                        let para;
                        console.log(detail)
                        for(let i in detail) {
                            detail[i] =  detail[i].replace(/<p>/g, '').replace(/<\/p>/g, '');
                            para = {type: ''};
                            if(detail[i].indexOf('src') > -1) {
                                para.type = 'img'
                                para.id = ''
                                para.pic_url = detail[i].slice(5, detail[i].length -3)
                            }else {
                                para.type = 'text'
                                para.text = detail[i]
                            }
                            good_detail[i] = para;
                        }
                        for(let i in good_detail) {
                            if(good_detail[i].text == '') {
                                good_detail.splice(i,1);
                            }
                        }
                        that.goods_detail = good_detail;
                        uni.setStorage({
                            key: "goods_card",
                            data: that.form.cards
                        })
                        uni.setStorage({
                            key: "goods_cat",
                            data: that.cats
                        })
                        uni.setStorage({
                            key: "goods_detail",
                            data: good_detail
                        })
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    that.$hideLoading();
                });
            }
        },

        onLoad(options) {
            let that = this;
            uni.getSystemInfo({
                success: function (res) {
                    if(res.model.indexOf('iPhone X') > -1 || res.model.indexOf('iPhone 11') > -1 || res.model.indexOf('iPhone11') > -1 || res.model.indexOf('iPhone12') > -1 || res.model.indexOf('Unknown Device') > -1) {
                        that.iphone_x = true;
                    }
                }
            })
            uni.getSystemInfo({
                success: function (res) {
                    let clientHeight = res.windowHeight;
                    let clientWidth = res.windowWidth;
                    let ratio = 750 / clientWidth;
                    that.height = clientHeight * ratio;
                }
            });
            that.getCard();
            uni.removeStorage({
                key: 'goods_card',
                success(res) {
                    that.goods_card = [];
                }
            })
            uni.removeStorage({
                key: 'goods_cat',
                success(res) {
                    console.log(res)
                }
            })
            uni.removeStorage({
                key: 'goods_unit',
                success(res) {
                    console.log(res)
                }
            })
            uni.removeStorage({
                key: 'goods_attr_groups',
                success(res) {
                    console.log(res)
                }
            })
            uni.removeStorage({
                key: 'goods_attr',
                success(res) {
                    console.log(res)
                }
            })
            uni.removeStorage({
                key: 'temp_attr',
                success(res) {
                    console.log(res)
                }
            })
            uni.removeStorage({
                key: 'temp_attr_info',
                success(res) {
                    console.log(res)
                }
            })
            uni.removeStorage({
                key: 'goods_detail',
                success(res) {
                    that.goods_detail = [];
                }
            })
            if(options.id > 0) {
                that.$showLoading({
                    type: 'global',
                    text: '加载中...'
                });
                that.id = options.id;
                setTimeout(v=>{
                    uni.setNavigationBarTitle({
                        title: '编辑商品',
                    });
                    that.getDetail(options.id);
                },500)
            }else {
                that.getService();
                that.getPostage();
            }
        },
        onShow() {
            let that = this;
            uni.getStorage({
                key: 'goods_card',
                success(res) {
                    that.goods_card = res.data;
                }
            })
            uni.getStorage({
                key: 'goods_cat',
                success(res) {
                    that.cats = res.data;
                }
            })
            uni.getStorage({
                key: 'goods_detail',
                success(res) {
                    that.goods_detail = res.data;
                }
            })
            uni.getStorage({
                key: 'goods_attr_groups',
                success(res) {
                    that.form.attr_groups = res.data;
                    that.attr = true;
                }
            })
            uni.getStorage({
                key: 'goods_attr',
                success(res) {
                    that.form.attr = res.data;
                }
            })
            uni.removeStorage({
                key: 'temp_attr',
                success(res) {
                    console.log(res)
                }
            })
            uni.removeStorage({
                key: 'temp_attr_info',
                success(res) {
                    console.log(res)
                }
            })
        }
    }
</script>

<style scoped lang="scss">
    .preventTouchMove{
        bottom: 0; 
        left: 0; 
        width: 100%;
        overflow: hidden; 
        position: fixed; 
        z-index: 0; 
    }
    .title {
        font-size: #{28rpx};
        color: #999;
        margin: #{30rpx} #{24rpx} #{13rpx};
    }

    .goods-img {
        background-color: #fff;
        padding: #{32rpx} #{24rpx};
    }

    .goods-list {
        margin-top: #{8rpx};
        margin-left: #{-24rpx};
    }

    .goods-item {
        position: relative;
        margin-left: #{24rpx};
        margin-top: #{24rpx};
        height: #{218rpx};
        width: #{218rpx};
    }

    .label {
        font-size: #{28rpx};
        color: #999;
    }

    .goods-cover {
        height: #{218rpx};
        width: #{218rpx};
    }

    .del-btn {
        height: #{40rpx};
        width: #{40rpx};
        position: absolute;
        right: #{-8rpx};
        top: #{-16rpx};
    }

    .main-img {
        height: #{40rpx};
        line-height: #{40rpx};
        width: #{218rpx};
        text-align: center;
        font-size: #{24rpx};
        color: #fff;
        background-color: rgba(68, 109, 253, 0.5);
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .add-goods-img {
        background-color: #f4f5f9;
        position: relative;
        margin-left: #{24rpx};
        margin-top: #{24rpx};
        height: #{218rpx};
        width: #{218rpx};
        font-size: #{24rpx};
        color: #999;
        z-index: 10;
        text-align: center;
    }

    .add-goods-img image {
        height: #{40rpx};
        width: #{40rpx};
        margin: #{70rpx} auto #{10rpx};
    }

    .goods-info {
        background-color: #fff;
        padding: 0 #{24rpx};
        .info-item:first-of-type {
            border-top: 0;
        }
        .info-item.goods-name {
            border-top: #{1rpx} solid #e2e2e2;
        }
    }

    .form-label {
        width: #{176rpx};
    }

    .info-item {
        border-top: #{1rpx} solid #e2e2e2;
        height: #{88rpx};
        line-height: #{88rpx};
        font-size: #{28rpx};
        color: #353535;
    }

    view.input {
        height: #{80rpx};
        line-height: #{80rpx};
        white-space: nowrap;
        overflow: auto;
    }

    view.input.placeholder {
        color: #cdcdcd;
    }

    .input {
        width: #{476rpx};
        background-color: #fff;
        padding-left: #{25rpx};
        font-size: #{28rpx};
    }

    .input.unit {
        width: #{396rpx};
    }

    .unit-width {
        width: #{112rpx};
        text-align: right;
    }

    .cat-info {
        width: #{526rpx};
        color: #666;
    }

    .to-more {
        height: #{24rpx};
        width: #{12rpx};
        margin-left: #{10rpx};
    }

    .price-input {
        position: relative;
        color: #666;
        height: #{88rpx};
        .default-attr {
            padding-left: #{25rpx};
        }
    }

    .money {
        position: absolute;
        height: #{88rpx};
        line-height: #{88rpx};
        width: #{20rpx};
        left: 0;
        top: 0;
    }

    .attr-info {
        background-color: #fff;
        padding: 0 #{24rpx};
        margin-top: #{20rpx};
    }

    .attr-input {
        width: #{638rpx};
    }

    .attr-input .input {
        color: #666;
        width: #{412rpx};
    }
    .attr-input .input.unit {
        width: #{330rpx};
    }

    .express-setting {
        height: #{136rpx};
        padding: #{16rpx} 0 #{20rpx};
        border-top: #{1rpx} solid #e2e2e2;
    }

    .express-input {
        position: relative;
        .input-item {
            font-size: #{28rpx};
            color: #353535;
            .input {
                width: #{650rpx};
            }
        }
    }

    .express-input .input {
        width: #{702rpx};
        padding-left: #{216rpx};
    }

    .express-input .integral {
        position: absolute;
        left: 0;
        z-index: 2;
    }

    .express-etc {
        color: #999;
        font-size: #{24rpx};
        margin-top: #{16rpx};
    }

    .form-button {
        width: #{656rpx};
        margin: 0 auto;
    }

    .save {
        height: #{80rpx};
        line-height: #{80rpx};
        text-align: center;
        width: #{300rpx};
        margin: #{80rpx} 0;
        font-size: #{28rpx};
        color: #446dfd;
        border: #{2rpx} solid #446dfd;
        background-color: #FFFFFF;
        border-radius: #{40rpx};
    }

    .send {
        height: #{80rpx};
        line-height: #{80rpx};
        text-align: center;
        width: #{300rpx};
        margin: #{80rpx} #{24rpx};
        font-size: #{28rpx};
        color: #fff;
        background-color: #446dfd;
        border-radius: #{40rpx};
    }

    .dialog {
        position: fixed;
        height: 100%;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 10;
        background-color: rgba(0, 0, 0, .3);
    }

    .dialog.iphone_x .picker-list{
        padding-bottom: #{50rpx};
    }

    .picker {
        width: 100%;
        height: #{440rpx};
        color: #999999;
    }


    .dialog.iphone_x .picker{
        height:#{490rpx};
    }

    .picker-list {
        background-color: #fff;
        padding-top: #{20rpx};
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    .picker-header {
        padding: 0 #{24rpx};
        color: #446dfd;
        font-size: #{32rpx};
    }

    .is_cat {
        padding: #{50rpx} 0 0 #{24rpx};
        color: #666666;
        font-size: #{28rpx};
        border-bottom: #{1rpx} solid #e2e2e2;
    }

    .is_cat text {
        margin-right: #{48rpx};
        display: inline-block;
        max-width: #{130rpx};
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .is_cat text:last-of-type {
        padding-bottom: #{24rpx};
        color: #446dfd;
        border-bottom: #{2rpx} solid #446dfd;
    }

    .type-list {
        max-height: #{400rpx};
        overflow: auto;
    }

    .type-choose {
        padding: 0 #{24rpx} 0 #{72rpx};
        height: #{36rpx};
        line-height: #{36rpx};
        color: #353535;
        font-size: #{32rpx};
        text-align: left;
        margin: #{35rpx} 0 #{50rpx};
    }

    .type-choose .active {
        color: #446dfd;
    }

    .active-status {
        width: #{36rpx};
        height: #{36rpx};
        display: block;
        margin-right: #{24rpx};
    }

    .attr-btn-item {
        padding-left: #{88rpx};
        background-color: #fff;
    }

    .dialog-item {
        padding-top: #{20rpx};
        position: fixed;
        top: 25%;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: #{620rpx};
        border-radius: #{16rpx};
        background-color: #fff;
    }

    .btn-area {
        height: #{88rpx};
        position: relative;
        border-top: #{1rpx} solid #e2e2e2;
    }

    .btn-area .line {
        height: #{32rpx};
        width: #{1rpx};
        background-color: #e2e2e2;
        position: absolute;
        top: #{28rpx};
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .submit-btn {
        height: #{88rpx};
        line-height: #{88rpx};
        font-size: #{32rpx};
        color: #666;
        width: #{310rpx};
        text-align: center;
    }

    .submit-btn.be-submit {
        color: #446dfd;
    }

    .dialog-title {
        text-align: center;
        margin: #{15rpx} 0 #{50rpx};
    }

    .img-border {
        height: #{250rpx};
        width: #{250rpx};
        margin-top: #{-16rpx};
        margin-left: #{-16rpx}; 
    }

    .screen {
        height: 100%;
        overflow: hidden;
    }

    .error-info {
        text-align: center;
        margin: #{50rpx};
    }

    .submit-info {
        text-align:center;
        margin-bottom: #{60rpx};
    }

    .picker-text {
        line-height: #{88rpx};
        color: #446dfd;
        font-size: #{32rpx};
        padding-left: #{24rpx};
    }

    .picker-text.sure-color {
        color: #446dfd;
    }
    .picker-text.cardinal-color {
        color: #999999;
    }
    .picker-text.even-color {
        color: #cdcdcd;
    }

    .integral {
        font-size: #{28rpx};
        color: #353535;
    }

    .integral-info .express-setting {
        height: #{164rpx};
    }

    .integral-info .express-setting:first-of-type {
        border-top:0
    }

    .label-info {
        font-size: #{24rpx};
        color: #999999;
    }
</style>