uni-xiudoyou/src/pages/shop/shopdetail.vue

<template>
  <view class="shopdetail">
    <view class="shopdetail-content">
      <!-- 所属店铺 -->
      <view class="shop detail-list">
        <view class="menu">
          <view class="uni-list-cell">
            <view class="uni-list-cell-db">
              <picker
                class="selectlist"
                mode="selector"
                @change="changeStore"
                :value="storeIndex"
                :range="storeList"
                :disabled="storeDisable"
                range-key="name"
              >
                <view class="uni-input title">{{
                  storeList[storeIndex].name
                }}</view>
              </picker>
              <image
                src="../../static/images/moreicon.png"
                class="more"
              ></image>
            </view>
          </view>
        </view>
      </view>
      <!-- 商品类型 -->
      <view class="shoptype detail-list">
        <view class="menu">
          <view class="uni-list-cell">
            <view class="uni-list-cell-db">
              <picker
                @change="changeType"
                :value="typeIndex"
                :range="typeList"
                :disabled="typeDisabled"
                range-key="name"
                class="selectlist"
              >
                <view class="uni-input title">{{
                  typeList[typeIndex].name
                }}</view>
              </picker>
              <image
                src="../../static/images/moreicon.png"
                class="more"
              ></image>
            </view>
          </view>
        </view>
      </view>
      <!-- 商品名称 -->
      <view class="shopname detail-list">
        <!-- <view class="menu" v-if="hasNameList === 1"> -->
        <view class="menu" v-if="typeProperty === '1'">
          <view class="uni-list-cell">
            <view class="uni-list-cell-db">
              <picker
                @change="changeShop"
                :value="shopIndex"
                :range="shopList"
                :disabled="nameDisabled"
                range-key="name"
                class="selectlist"
              >
                <view class="uni-input title">{{
                  shopList[shopIndex].name
                }}</view>
              </picker>
              <image
                src="../../static/images/moreicon.png"
                class="more"
              ></image>
            </view>
          </view>
        </view>
        <!-- <view class="menu" v-if="hasNameList === 0"> -->
        <view class="menu" v-if="typeProperty === '0'">
          <input
            class="input-shopname"
            type="text"
            v-model="shopname"
            placeholder-style="color:#a2a8a8;font-size:28upx"
            placeholder="请输入商品名称"
          />
        </view>
      </view>
      <!-- 自定义分类 -->
      <view class="classify detail-list noborder">
        <view class="menu">
          <view class="title bigtitle">自定义分类</view>
          <view class="txt" @tap="toClassify">管理分类</view>
        </view>
      </view>
      <!-- 分类 -->
      <view class="xiline detail-list">
        <view class="menu">
          <view class="uni-list-cell">
            <view class="uni-list-cell-db">
              <picker
                @change="changeClassify"
                :value="lineIndex"
                :range="lineList"
                :disabled="lineDidsable"
                range-key="name"
                class="selectlist"
              >
                <view class="uni-input title">{{
                  lineList[lineIndex].name
                }}</view>
              </picker>
              <image
                src="../../static/images/moreicon.png"
                class="more"
              ></image>
            </view>
          </view>
        </view>
      </view>
      <!-- 账号限制 -->
      <!-- <view class="warp" v-if="typeProperty === '1'"> -->
      <view class="warp">
        <view class="idastrict detail-list">
          <view class="menu">
            <view class="title astricttitle">账号限制</view>
            <switch :checked="showoperat" @change="Change" />
          </view>
        </view>
        <view class="detail-list operat" v-if="showoperat">
          <view class="menu">
            <view class="title">同一账号在</view>
            <view class="sub" @tap="subtractUser">-</view>
            <text class="num1">{{ astrictDate.data.saleDay }}</text>
            <view class="add" @tap="addUser">+</view>
            <view class="txt">天内最多购买</view>
            <view class="sub" @tap="subtractDate">-</view
            ><text class="num2">{{ astrictDate.data.saleNum }}</text
            ><view class="add" @tap="addDate">+</view
            ><text class="unit">张</text>
          </view>
        </view>
      </view>
      <view class="warp" v-if="typeProperty === '0'">
        <!-- 卖价 -->
        <view class="price-warp">
          <view class="name">卖价：</view>
          <input
            class="price"
            type="text"
            v-model="price"
            placeholder="请输入卖价"
          />
        </view>
        <!-- 打折价 -->
        <view class="price-warp">
          <view class="name">划线价：</view>
          <input
            class="price"
            type="text"
            v-model="rateprice"
            placeholder="请输入划线价"
          />
        </view>
        <!-- 销售属性 -->
        <view class="property">
          <view class="property-warp">
            <view class="title">销售属性</view>
            <view class="date">
              <view class="namebar">过期日期：</view>
              <view class="num" @tap="openTime"> {{ expirationDate }}</view>
            </view>
            <view class="pattern">
              <view class="uni-list">
                <radio-group @change="radioChange">
                  <label
                    class="uni-list-cell uni-list-cell-pd pattern-item"
                    v-for="(item, index) in patterList"
                    :key="index"
                  >
                    <view class="checkth">
                      <radio
                        :value="item.id"
                        :checked="index === patterIndex"
                      />
                    </view>
                    <view class="txt">
                      <text class="txt1"> {{ item.name }}</text>
                      <text> {{ item.know }}</text>
                    </view>
                  </label>
                </radio-group>
              </view>
            </view>
          </view>
        </view>
        <!-- 商品库存 -->
        <view class="property">
          <view class="property-warp">
            <view class="title">商品库存</view>
            <view class="pattern">
              <view class="uni-list">
                <radio-group @change="shopNumChange">
                  <label
                    class="uni-list-cell uni-list-cell-pd pattern-item"
                    v-for="(item, index) in shopNumList"
                    :key="index"
                  >
                    <view class="checkth">
                      <radio
                        :value="item.id"
                        :checked="index === shopNumIndex"
                      />
                    </view>
                    <view class="txt">
                      <text class="txt1"> {{ item.name }}</text>
                      <text> {{ item.know }}</text>
                      <view class="inventory"  v-if="item.name === '限日库存模式'">
                        <text class="name">日库存数：</text>
                        <input
                          class="dateInventory"
                          type="number"
                          placeholder="请输入库存数量"
                          v-model="dateInventory"
                        />
                      </view>

                      <view class="ref" v-if="item.name === '限日库存模式'">
                        <text class="residue">今日剩余库存:<text class="residuenum"> {{ todayResidue }}</text></text>
                        <image class="reficon" src="../../static/images/ref.png" @tap="refToday"></image>
                      </view>

                      <view
                        class="inventory"
                        v-if="item.name === '限总库存模式'"
                      >
                        <text class="name">总库存数：</text>
                        <input
                          class="dateInventory"
                          type="number"
                          placeholder="请输入库存数量"
                          v-model="sunInventory"
                        />
                      </view>

                      <view class="ref" v-if="item.name === '限总库存模式'">
                        <text class="residue">当前剩余总库存:<text class="residuenum"> {{ sunResidue }}</text></text>
                        <image class="reficon" src="../../static/images/ref.png" @tap="refSun"></image>
                      </view>
                    </view>
                  </label>
                </radio-group>
              </view>
            </view>
          </view>
        </view>
        <!-- 预定规则 -->
        <view class="booking">
          <view class="booking-warp">
            <view class="title">预定规则</view>
            <view class="model">
              <view class="inputnum">
                <text class="bar">预定数量：</text>
                <input
                  class="bookingnum"
                  v-model="astrictDate.data.bookRule"
                  type="number"
                  placeholder="请输入数量"
                />
              </view>
              <view class="txt">一天内同一身份证可预定数量</view>
            </view>
            <view class="truename">
              <view class="truename-warp">
                <view class="txt">是否开启实名制购票</view>
                <switch :checked="trueNme" @change="trueNmeChange" />
              </view>
            </view>
            <view class="modeltwo">
              <view class="uni-list">
                <radio-group @change="bookingChange">
                  <label
                    class="uni-list-cell uni-list-cell-pd booking-item"
                    v-for="(item, index) in bookingList"
                    :key="index"
                  >
                    <view class="checkth">
                      <radio
                        :value="item.id"
                        :checked="index === bookingIndex"
                      />
                    </view>
                    <view class="txt">{{ item.name }}</view>
                  </label>
                </radio-group>
              </view>
            </view>
            <view class="truename">
              <view class="truename-warp">
                <view class="txt">订单显示二维码</view>
                <switch :checked="codeShow" @change="codeShowChange" />
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 商品图标 -->
      <view class="shopicon">商品图标</view>
      <view class="iconcontent">
        <image class="shopLogo" :src="iconurl" v-if="iconurl"></image>
        <text class="icon" @tap="uploadImg">点击上传</text>
        <text class="per"
          >{{ uploadtxt }} {{ progress === 0 ? '' : progress }}
          <text v-if="progress != 0">%</text></text
        >
      </view>
      <view class="shopicon">商品图册</view>
      <view class="uploading">
        <view class="item-warp" v-for="(item, index) in pickList" :key="index">
          <view class="img-warp">
            <image :src="item" class="item list"></image>
            <view class="delete">
              <image
                src="../../static/images/delete.png"
                class="delete-icon"
                @tap="deleteThisImg(index)"
              ></image>
            </view>
          </view>
        </view>
        <view class="item-warp">
          <image
            src="../../static/images/upload.png"
            class="item upload"
            @tap="uploadList"
          ></image>
        </view>
      </view>
      <!-- 购票须知 -->
      <view class="shopicon">商品描述（购票须知）</view>
      <view class="know">
        <view class="container">
          <editor
            id="editor"
            class="ql-container"
            :placeholder="placeholderContent"
            @input="saveTxt"
            @ready="onEditorReady"
          ></editor>
        </view>
      </view>
      <view class="btn" @tap="submitMesage">确认</view>
      <rf-loading v-if="loading"></rf-loading>
      <uni-calendar
        ref="calendar"
        :insert="false"
        :range="false"
        @confirm="confirm"
      />
    </view>
  </view>
</template>

<script>
let myCloud;
let _self;
import Header from '../components/header.vue';
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
import moment from '@/common/moment';
import indexConfig from '@/config/index.config';

export default {
  components: {
    Header,
    uniCalendar,
  },
  data () {
    return {
      loading: false,
      scenicId: uni.getStorageSync('scenicId'),
      title: '商品详情',
      showoperat: false,
      salerule: '',

      placeholderContent: '请输入内容...',
      mastKnow: '',

      storeList: [{ name: '所属店铺', id: '', type: '' }],
      storeIndex: 0,
      storeId: '',
      storeDisable: true,
      typeProperty: '1', // 判断所属店铺是否是自营店铺  1分销  0自营

      typeList: [{ name: '商品类型(请先选择所属店铺)', id: '' }],
      typeIndex: 0,
      typeId: '',
      typeDisabled: true,

      shopList: [{ name: '商品名称(请先选择商品类型)', id: '' }],
      shopIndex: 0,
      shopId: '',
      shopname: '',
      nameDisabled: true,

      hasNameList: 0, // 判断是否有商品名称列表

      lineList: [{ name: '分类(请先选择所属商品)', id: '' }],
      lineIndex: 0,
      lineId: '',
      lineDidsable: true,

      // 图标上传
      uploadtxt: '',
      progress: 0,
      iconurl: '',
      pickList: [],

      Icon: '',
      Imglist: [],
      progressimgs: 0,

      price: 0.00,
      rateprice: 0.00,

      // -------------- 编辑分界线 ------------------------------------

      SHOPID: 0,
      shopData: {},

      expirationDate: '请选择商品过期日期',
      // 销售属性
      patterList: [
        {
          id: '0',
          name: '有效期模式',
          know: '无需用户指定使用日，在过期时间前均可使用。',
        },
        {
          id: '1',
          name: '使用日模式',
          know: '用户购买时需选择游玩日，并在游玩日当天使用。',
        },
      ],
      patterIndex: 0,

      // 商品库存
      shopNumList: [
        {id: '0',name: '无限库存模式',know: '售卖商品不计算库存，无限售卖。'},
        { id: '1', name: '限日库存模式', know: '每日固定库存售卖。' },
        { id: '2', name: '限总库存模式', know: '总库存限制，卖完为止。' },
      ],
      shopNumIndex: 0,

      dateInventory: 0,
      sunInventory: 0,
      inventory: '',

      todayResidue: 0,
      sunResidue: 0,

      bookingnum: '',

      bookingList: [
        { id: '0', name: '未消费统一可退' },
        { id: '1', name: '过期不可退' },
        { id: '2', name: '统一不可退' },
      ],
      bookingIndex: 0,

      trueNme: false,
      codeShow: false,

      // 规则参数
      astrictDate: {
        data: {
          saleDay: 1, // 限购天数
          saleNum: 1, // 限购票数
          dateSetting: '0', // 有效期模式
          goodsStockFlag: '0', // 库存模式
          bookRule: '', // 同一天限购
          usubscribeRule: '0', // 可退规则
          isRealName: '1', // 开启实名制
          isShowQrcode: '1', // 显示二维码
        },
      },
    };
  },
  onShow () {
    if (this.storeId != '') {
      this.getLine(this.storeId)
    }
  },
  onReady () {
    myCloud = uniCloud.init({
      provider: 'aliyun',
      spaceId: 'db8671a1-69bd-470d-ad59-ba927c88f4a4',
      clientSecret: '8nOzV70edtpCd0El6qce3g==',
    });
  },
  onLoad ( option ) {
    if (option.id != 'undefined') {
      this.SHOPID = option.id
      this.getShopBuyId(option.id).then(() => {
        this.getShopList().then(() => {
          this.getShopName(this.typeId, this.storeId);
        });

        // 数据回显
        this.price = this.shopData.salePrice / 100;
        this.rateprice = this.shopData.price / 100;

        if (this.shopData.expiredTime) {
          this.expirationDate = this.shopData.expiredTime.slice(0, 10)
            ? this.shopData.expiredTime.slice(0, 10)
            : '请选择商品过期日期';
        }

        // 图标回显
        if (this.shopData.icon) {
          this.Icon = this.shopData.icon
          this.iconurl = this.shopData.icon;
        }

        // 图册回显
        if (this.shopData.imges) {
          this.Imglist = JSON.parse(this.shopData.imges)
          let urllist = JSON.parse(this.shopData.imges)
          urllist.forEach(element => {
            this.pickList.push(element.url)
          });
        }
        let rule = JSON.parse(this.shopData.saleRuleJson);

        if (rule) {
          this.astrictDate.data.saleDay = rule.data.saleDay
            ? rule.data.saleDay
            : 1;
          this.astrictDate.data.saleNum = rule.data.saleNum
            ? rule.data.saleNum
            : 1;
          // 有效期模式
          this.astrictDate.data.dateSetting = rule.data.dateSetting;
          this.patterIndex = +rule.data.dateSetting;
          // 库存模式
          this.astrictDate.data.goodsStockFlag = rule.data.goodsStockFlag;
          this.getResidue()
          this.shopNumIndex = +rule.data.goodsStockFlag;

          if (this.shopNumIndex === 1) {
            this.dateInventory = this.shopData.inventory;
          } else if (this.shopNumIndex === 2) {
            this.sunInventory = this.shopData.inventory;
          }
          // 预订数量
          this.astrictDate.data.bookRule = rule.data.bookRule;

          // 实名制
          if (rule.data.isRealName === '0') {
            this.trueNme = true;
          } else {
            this.trueNme = false;
          }
          this.astrictDate.data.isRealName = rule.data.isRealName;

          // 可退规则
          this.bookingIndex = +rule.data.usubscribeRule;
          this.astrictDate.data.usubscribeRule = rule.data.usubscribeRule;
          // 二维码
          if (rule.data.isShowQrcode === '0') {
            this.codeShow = true;
          } else {
            this.codeShow = false;
          }
          this.astrictDate.data.isShowQrcode = rule.data.isShowQrcode;
        }
        // 限制购票回显
        if (this.shopData.saleRule === '1') {
          this.showoperat = true;
          this.salerule = '1'
        } else {
          this.showoperat = false;
          this.salerule = '0'
        }
        this.loading = false;
      });
    } else {
      this.getShopList()
    }
  },
  methods: {
    // 获取单个商品信息
    async getShopBuyId (id) {
      this.loading = true;
      await this.$http.get('/goods/getById/' + id).then((res) => {
        if (res.code === 200 && res.msg === 'OK') {
          this.shopData = res.data;
          this.storeId = res.data.shopId;
          this.typeId = res.data.typeId;
          this.loading = false;
        }
      });
    },
    // 打开日历
    openTime () {
      this.$refs.calendar.open();
    },
    confirm (e) {
      this.expirationDate = e.fulldate;
    },
    // 自定义属性
    radioChange (evt) {
      for (let i = 0; i < this.patterList.length; i++) {
        if (this.patterList[i].id === evt.target.value) {
          this.patterIndex = i;
          break;
        }
      }
      this.astrictDate.data.dateSetting = evt.detail.value;
    },
    // 库存模式
    shopNumChange (e) {
      for (let i = 0; i < this.shopNumList.length; i++) {
        if (this.shopNumList[i].id === e.target.value) {
          this.shopNumIndex = i;
          break;
        }
      }

      if (e.detail.value === '1') {
        this.sunInventory = 0;
      }
      if (e.detail.value === '2') {
        this.dateInventory = 0;
      }

      this.astrictDate.data.goodsStockFlag = e.detail.value;
      this.getResidue()
    },
    // 剩余库存
    async getResidue () {
      console.log(this.astrictDate.data.goodsStockFlag);
      await this.$http.get('/goods/getInventory',{
        id:this.SHOPID,
        goodsStockFlag: this.astrictDate.data.goodsStockFlag
      }).then( res =>{
        if (res.code === 200 && res.msg ==='OK') {
          if (+this.astrictDate.data.goodsStockFlag === 1) {
            this.todayResidue = res.data.now_inventory
          } else if (+this.astrictDate.data.goodsStockFlag === 2) {
            this.sunResidue = res.data.now_inventory
          }
        }
      })
    },
    refToday () {
      this.todayResidue = '...'
      this.getResidue()
    },
    refSun () {
      this.sunResidue = '...'
      this.getResidue()
    },
    // 可退模式
    bookingChange (e) {
      for (let i = 0; i < this.bookingList.length; i++) {
        if (this.bookingList[i].id === e.target.value) {
          this.bookingIndex = i;
          break;
        }
      }
      this.astrictDate.data.usubscribeRule = e.detail.value;
    },
    // 实名制
    trueNmeChange (e) {
      if (e.detail.value) {
        this.astrictDate.data.isRealName = '0';
      } else {
        this.astrictDate.data.isRealName = '1';
      }
    },
    // 显示二维码
    codeShowChange (e) {
      if (e.detail.value) {
        this.astrictDate.data.isShowQrcode = '0';
      } else {
        this.astrictDate.data.isShowQrcode = '1';
      }
    },
    // 初始化编辑器
    onEditorReady () {
      // this.placeholderContent = this.shopData.describ
      uni
        .createSelectorQuery()
        .select('#editor')
        .context((res) => {
          this.editorCtx = res.context;
          this.editorCtx.setContents({
            html: this.shopData.describ, //this.EditGoodsDetail.content为赋值内容。
          });
        })
        .exec()
    },
    // -----------------------------------------------------------------
    // 跳转到管理分类页面
    toClassify () {
      if (this.storeId) {
        uni.setStorageSync('shopid', this.storeId);
        this.$mRouter.push({ route: '/pages/shop/classify' });
      } else {
        this.$mHelper.toast('请选择所属店铺后再进行自定义分类管理');
      }
    },
    // 选择店铺
    changeStore (e) {
      this.storeIndex = e.detail.value;
      this.storeId = this.storeList[this.storeIndex].id;
      this.typeProperty = this.storeList[this.storeIndex].type;

      if (!this.SHOPID) {
        this.getType(this.storeId)
        this.getLine(this.storeId)
      }
    },
    // 选择商品类型
    changeType (e) {
      this.typeIndex = e.detail.value;
      this.typeId = this.typeList[this.typeIndex].id;
      if (!this.SHOPID) {
        this.getShopName(this.typeId, this.storeId);
      }
    },
    // 商品名称选择
    changeShop (e) {
      this.shopIndex = e.detail.value;
      this.shopId = this.shopList[this.shopIndex].id;
    },
    // 分类
    changeClassify (e) {
      this.lineIndex = e.detail.value;
      this.lineId = this.lineList[this.lineIndex].id;
    },
    // 所属店铺
    async getShopList () {
      this.storeList = [{ name: '所属店铺', id: '', type: '' }];
      await this.$http
        .get('/shop/getList', { mid: this.scenicId })
        .then((res) => {
          if (res.data) {
            let arr = [];
            res.data.forEach((element) =>
              arr.push({
                name: element.name,
                id: element.id,
                type: element.shopFrom,
              })
            );
            this.storeList = this.storeList.concat(arr);
            this.storeDisable = false;
            // 所属店铺回显
            if (this.shopData.shopId) {
              this.storeDisable = true;
              this.storeList.forEach((item, index) => {
                if (this.shopData.shopId === item.id) {
                  this.storeIndex = index;
                }
              });
              this.storeId = this.storeList[this.storeIndex].id;
              this.typeProperty = this.storeList[this.storeIndex].type;

              this.getType(this.storeId);
              this.getLine(this.storeId);
            }
          }
        });
    },
    // 商品类型
    async getType (storeId) {
      this.typeList = [{ name: '商品类型(请先选择所属店铺)', id: '' }];
      this.$http
        .get('/type/getTypeListByShopId', {
          id: storeId,
        })
        .then((res) => {
          let arr = [];
          res.data[0].children.forEach((element) => {
            arr.push({ name: element.name, id: element.id });
          });
          this.typeList = this.typeList.concat(arr);
          this.typeDisabled = false;

          // 商品类型回显
          if (this.shopData.typeId) {
            this.typeDisabled = true;
            this.typeList.forEach((item, index) => {
              if (this.shopData.typeId === item.id) {
                this.typeIndex = index;
              }
            });
            this.typeId = this.typeList[this.typeIndex].id;
            this.shopname = this.shopData.name;
          }
        });
    },
    // 商品名称
    async getShopName (typeId, storeId) {
      this.shopList = [{ name: '商品名称(请先选择商品类型)', id: '' }];
      await this.$http
        .get('/goods/getTicketGoods', {
          typeId: typeId,
          shopId: storeId,
        })
        .then(async (res) => {
          if (res.code === 200) {
            let arr = [];
            res.data.forEach(element => arr.push({ name: element.ticket_name, id: element.ticket_no }));
            this.shopList = this.shopList.concat(arr);
            this.nameDisabled = false

            // 回显名称
            if (this.shopData.name) {
              this.loading = true;
              if (this.typeProperty != 0) {
                this.shopList[0] = { name: this.shopData.name, id: '' };
                this.shopIndex = 0
                this.shopId = this.shopList[this.shopIndex].id;
                if (this.shopList.length != 1) {
                  if (this.shopList[0].name === this.shopList[1].name) {
                    this.shopList.length = 1
                  }
                }
              } else {
                // 自营商品直接赋值
                this.shopname = this.shopData.name;
              }
              this.loading = false;
            }
          }
        });
    },
    // 线路分配
    async getLine (storeId) {
      this.lineList = [{ name: '分类(请先选择所属商品)', id: '' }];
      await this.$http
        .get('/goods/getCustomGroupList', {
          shopId: storeId,
        })
        .then(async (res) => {
          let arr = [];
          this.typeProperty = +res.data.shopFrom;
          res.data.customGroupList.forEach((element) => {
            arr.push({ name: element.name, id: element.id });
          });
          this.lineList = this.lineList.concat(arr);
          this.lineDidsable = false;

          // 分类回显
          if (this.shopData.customGroupId) {
            this.loading = true;
            this.lineList.forEach((item, index) => {
              if (this.shopData.customGroupId === item.id) {
                this.lineIndex = index;
              }
            });
            this.lineId = this.lineList[this.lineIndex].id;
            this.loading = false;
          }
        });
    },
    // 账号限制
    Change (e) {
      this.showoperat = e.detail.value;
    },
    subtractUser () {
      if (this.astrictDate.data.saleDay <= 1) {
        this.astrictDate.data.saleDay = 1
        this.$mHelper.toast('最少一天');
        return;
      } else {
        this.astrictDate.data.saleDay--;
      }
    },
    addUser () {
      this.astrictDate.data.saleDay++;
    },
    subtractDate () {
      if (this.astrictDate.data.saleNum <= 1) {
        this.astrictDate.data.saleNum = 1
        this.$mHelper.toast('最少一张票');
        return;
      } else {
        this.astrictDate.data.saleNum--;
      }
    },
    addDate () {
      this.astrictDate.data.saleNum++;
    },
    // 图标上传
    uploadImg () {
      let _self = this;
      _self.uploadtxt = '上传中...';
      _self.progress = 0;
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], // camera 使用相机   album 从相册中选
        success: function (res) {
          // 成功则返回图片的本地文件路径列表 tempFilePaths
          _self.iconurl = res.tempFilePaths[0];
          myCloud.uploadFile({
            url: indexConfig.uploadUrl,
            filePath: _self.iconurl, // 要上传的文件对象
            cloudPath: _self.iconurl, // 要上传的文件对象
            name: 'file',
            success: (res) => {
              if (res.fileID) {
                _self.Icon = res.fileID;
              }
            },
            fail: function (msg) {
              _self.$mHelper.toast('图标上传失败，请重新上传')
            },
            onUploadProgress: function (progressEvent) {
              _self.progress = Math.round(
                (progressEvent.loaded * 100) / progressEvent.total
              );
              if (_self.progress === 100) {
                _self.uploadtxt = '上传成功';
              }
            },
          });
        },
        fail: function (error) {
          _self.uploadtxt = '已取消上传';
        },
      });
    },
    // 图册上传
    uploadList () {
      let _self = this;
      uni.chooseImage({
        count: 6,
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], // camera 使用相机   album 从相册中选
        success: function (res) {
          // 成功则返回图片的本地文件路径列表 tempFilePaths
          if (_self.pickList.length >= 6) {
            _self.$mHelper.toast('最多只可上传6张图片');
          } else {
            _self.pickList = _self.pickList.concat(res.tempFilePaths).slice(0,6);
            _self.Imglist = []
            for (let i = 0; i < _self.pickList.length; i++) {
              let element = _self.pickList[i];
              myCloud.uploadFile({
                url: indexConfig.uploadUrl,
                filePath: element, // 要上传的文件对象
                cloudPath: element,
                name: 'file',
                onUploadProgress: function (progressEvent) {
                  // 上传进度回调
                  let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
                },
                success: (res) => {
                  _self.Imglist.push({url:res.fileID,uid:res.filePath})
                }
              });
            }
          }
        },
      });
    },
    // 删除图册中的图片
    deleteThisImg (index) {
      this.pickList.splice(index, 1);
      this.Imglist.forEach( (element,i) => {
        if (element.uid === this.pickList[index]) {
          this.Imglist.splice(i,1)
        }
      });
    },
    // 富文本失去焦点保存内容
    saveTxt (e) {
      this.mastKnow = e.detail.html;
    },
    // 内容提交
    submitMesage () {
      let _this = this;

      if (this.progress > 0  && this.progress < 100) {
        this.$mHelper.toast('您有图标正在上传，请在上传完成后提交内容！')
        return
      }

      // 判断是否限制账号购买 
      if (this.showoperat) {
        this.salerule = '1'
      } else {
        this.salerule = '0'
        this.astrictDate.data.saleDay = '';
        this.astrictDate.data.saleNum = '';
      }
      let name = '';
      if (this.typeProperty === 1) {
        if (this.SHOPID) {
          name = this.shopList[this.shopIndex].name
        } else {
          name = this.shopList[this.shopIndex].id;
        }
      } else if (this.typeProperty === 0) {
        name = this.shopname;
      }
      if (!this.storeId) {
        this.$mHelper.toast('请选择所属商铺!');
        return;
      }
      if (!this.typeId) {                                                               
        this.$mHelper.toast('请选择商品类型!');
        return;
      }
      if (!name) {
        this.$mHelper.toast('请选择商品名称或者输入商品名称！');
        return;
      }
      if (this.typeProperty === 0) {

        if (!this.lineId) {
          this.$mHelper.toast('请选择商品分类！');
          return;
        }
        const pat = new RegExp(/(?:^[1-9]([0-9]+)?(?:\.[0-9]{1,2})?$)|(?:^(?:0){1}$)|(?:^[0-9]\.[0-9](?:[0-9])?$)/)
        if (!this.price || !pat.test(this.price)) {
          this.$mHelper.toast('请输入正确的商品卖价！');
          return;
        }
        if (!this.rateprice || !pat.test(this.rateprice)) {
          this.$mHelper.toast('请输入正确的商品划线价！');
          return;
        }
        if (this.expirationDate === '请选择商品过期日期') {
          this.$mHelper.toast('请选择商品过期日期');
          return;
        }
        if (this.shopIndex === 0) {
          this.inventory = '';
        }
        if (this.shopNumIndex === 1) {
          this.inventory = this.dateInventory;
          if (!this.inventory) {
            this.$mHelper.toast('请输入日库存数量！');
            return;
          }
        }
        if (this.shopNumIndex === 2) {
          this.inventory = this.sunInventory;
          if (!this.inventory) {
            this.$mHelper.toast('请输入总库存数量！');
            return;
          }
        }
        if (!this.astrictDate.data.bookRule) {
          this.$mHelper.toast('请输入预订数量!');
          return;
        }
      }
    
      this.loading = true;
      this.$http
        .post('/goods/add', {
          id: this.shopData.id || '',
          mid: this.scenicId,
          shopId: this.storeId,
          typeId: this.typeId,
          customGroupId: this.lineId,
          describ: this.mastKnow,
          icon: this.Icon || '',
          imges: JSON.stringify(this.Imglist) || '',
          del: this.shopData.del || '',
          upDown: this.shopData.upDown || '',
          saleRule: this.salerule, // 限制购票
          saleRuleJson: JSON.stringify(this.astrictDate),
          //  自营
          name: name,
          salePrice: this.price * 100 || null,
          price: this.rateprice * 100 || null,
          expiredTime:this.expirationDate === '请选择商品过期日期'? '': this.expirationDate,
          inventory: this.inventory
        })
        .then((res) => {
          if (res.code === 200 && res.msg === 'OK') {
            this.loading = false;
            if (this.shopData.id) {
              this.$mHelper.toast('保存成功,请联系管理员进行审核');
            } else {
              this.$mHelper.toast('添加成功');
            }
            setTimeout(() => {
              this.$mRouter.back();
            }, 500);
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.shopdetail {
  .shopdetail-content {
    padding: 24upx 0 0upx;
    .detail-list {
      padding: 0 33upx;
      background-color: #ffffff;
      border-bottom: 1px solid #e7e7e7;
      box-sizing: border-box;
      .menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 93upx;
        .uni-list-cell {
          width: 100%;
          display: flex;
          align-items: center;
          height: 93upx;
          .uni-list-cell-db {
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .selectlist {
              width: 100%;
            }
          }
        }
        .title {
          font-size: 28upx;
          color: #232828;
        }
        .more {
          width: 15upx;
          height: 26upx;
        }
        .bigtitle {
          font-size: 34upx;
          color: #232828;
          font-weight: 700;
        }
        .input-shopname {
          width: 100%;
          height: 100%;
        }
        .txt {
          color: #a95cff;
          font-weight: 700;
        }
        .linetitle {
          color: #232828;
        }
        .astricttitle {
          font-weight: 700;
          font-size: 32upx;
          color: #232828;
        }
      }
    }
    .noborder {
      border-bottom: none;
    }
    .classify {
      background-color: #f9f9f9;
    }
    .idastrict {
      background-color: #fff;
    }
    .operat {
      background-color: #f9f9f9;
      .menu {
        .title {
          font-size: 28upx;
          color: #232828;
        }
        .sub,
        .add {
          width: 44upx;
          height: 44upx;
          border-radius: 50%;
          border: 1px solid #b4b8b7;
          color: #b4b8b7;
          text-align: center;
          line-height: 40upx;
          font-weight: 700;
        }
        .txt {
          color: #232828;
          font-weight: normal;
        }
        .unit {
          color: #232828;
        }
      }
    }
    .shopicon {
      height: 100upx;
      padding: 0 33upx;
      font-size: 32upx;
      color: #232828;
      font-weight: 700;
      line-height: 100upx;
    }
    .iconcontent {
      padding: 25upx 33upx;
      background-color: #f9f9f9;
      display: flex;
      align-items: center;
      .icon {
        display: inline-block;
        height: 56upx;
        font-size: 28upx;
        color: #a3a8a8;
        border-radius: 50%;
        margin-left: 20upx;
        border: 1px dashed #ccc;
        border-radius: 5%;
        text-align: center;
        line-height: 56upx;
        padding: 0 15upx;
      }
      .shopLogo {
        width: 56upx;
        height: 56upx;
        border-radius: 50%;
      }
      .per {
        margin-left: 50upx;
        color: #a3a8a8;
      }
    }
    .uploading {
      padding: 25upx 33upx;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      background-color: #fff;
      .item-warp {
        border-radius: 17upx;
        margin-right: 15upx;
        margin-bottom: 15upx;
        box-sizing: border-box;
        overflow: hidden;
        .img-warp {
          position: relative;
        }
        .item {
          width: 160upx;
          height: 160upx;
        }
        &:nth-child(4) {
          margin-right: 0;
        }
        .delete {
          position: absolute;
          right: -35upx;
          top: -35upx;
          width: 70upx;
          height: 70upx;
          border-radius: 50%;
          background-color: #8064f7;
          .delete-icon {
            position: absolute;
            left: 13upx;
            bottom: 13upx;
            width: 14upx;
            height: 14upx;
          }
        }
      }
    }
    .know {
      padding: 24upx 33upx;
      background-color: #fff;
      #editor {
        width: 100%;
        height: 300px;
      }
    }
    .btn {
      width: 100%;
      height: 98upx;
      color: #ffffff;
      font-size: 32upx;
      text-align: center;
      line-height: 98upx;
      background-color: #8064f7;
      margin-top: 27upx;
      letter-spacing: 2upx;
    }
    .price-warp {
      padding: 0 33upx;
      background-color: #ffffff;
      border-bottom: 1px solid #e7e7e7;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      height: 93upx;
      .name {
        font-size: 28upx;
        color: #232828;
      }
      .price {
        flex: 1;
      }
    }
    .property {
      .property-warp {
        .title {
          padding: 20upx 33upx;
          font-size: 34rpx;
          color: #232828;
          font-weight: 700;
        }
        .date {
          padding: 0 33upx;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #e7e7e7;
          background-color: #fff;
          height: 93upx;
          .namebar {
            font-size: 28upx;
            line-height: 93upx;
            color: #232828;
          }
          .num {
            flex: 1;
            height: 100%;
            line-height: 93upx;
            color: #a3a8a8;
          }
        }
      }
    }
    .pattern {
      .pattern-item {
        display: flex;
        border-bottom: 1px solid #e7e7e7;

        .checkth {
          width: 100upx;
        }
        .txt {
          flex: 1;
          display: flex;
          justify-content: center;
          flex-direction: column;
          color: #a3a8a8;
          .txt1 {
            color: #232828;
            font-weight: 700;
          }
          .inventory {
            display: flex;
            align-items: center;
            .name {
              width: 150upx;
              color: #232828;
            }
            .dateInventory {
              flex: 1;
              color: #232828;
            }
          }
          .ref {
            display: flex;
            align-items: center;
            .residue {
              color:  #232828;
            }
            .residuenum{
              margin-left: 15upx;
              color: firebrick;
              font-weight: 700;
            }
            .reficon{
              margin-left: 30upx;
              width: 30upx;
              height: 30upx;
              z-index: 10;
            }
          }
        }
      }
    }
    .booking {
      .booking-warp {
        .title {
          padding: 20upx 33upx;
          font-size: 34rpx;
          color: #232828;
          font-weight: 700;
        }
        .model {
          padding: 20upx 33upx;
          background-color: #fff;
          border-bottom: 1px solid #e7e7e7;
          .inputnum {
            display: flex;
            align-items: center;
            .bar {
              width: 150upx;
              font-size: 28upx;
              font-weight: 700;
              color: #232828;
            }
            .bookingnum {
              flex: 1;
            }
          }
          .txt {
            margin-top: 28upx;
            color: #a3a8a8;
          }
        }
        .truename {
          .truename-warp {
            padding: 20upx 33upx;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #e7e7e7;
            background-color: #fff;
          }
        }
        .modeltwo {
          .booking-item {
            display: flex;
            border-bottom: 1px solid #e7e7e7;
            .checkth {
              width: 100upx;
            }
            .txt {
              flex: 1;
            }
          }
        }
      }
    }
  }
}
</style>