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

<template>
  <view class="shopdetail">
    <Header :title="title"></Header>
    <view class="" style="height: 94upx;"></view>
    <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 noborder">
        <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="uni-list-cell">
            <view class="uni-list-cell-db">
              <picker
                @change="changeShop"
                :value="shopIndex"
                :range="shopList"
                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">
          <input
            class="input-shopname"
            type="text"
            v-model="shopname"
            placeholder-style="color:#a2a8a8;font-size:30upx"
            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="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">{{ num1 }}</text>
          <view class="add" @tap="addUser">+</view>
          <view class="txt">天内最多购买</view>
          <view class="sub" @tap="subtractDate">-</view
          ><text class="num2">{{ num2 }}</text
          ><view class="add" @tap="addDate">+</view><text class="unit">张</text>
        </view>
      </view>
      <!-- 卖价 -->
      <view class="price-warp" v-if="typeProperty === '0'">
        <view class="name">卖价：</view>
        <input
          class="price"
          type="text"
          v-model="price"
          placeholder="请输入卖价"
        />
      </view>
      <!-- 打折价 -->
      <view class="price-warp" v-if="typeProperty === '0'">
        <view class="name">划线价：</view>
        <input
          class="price"
          type="text"
          v-model="rateprice"
          placeholder="请输入划线价"
        />
      </view>
      <!-- 销售属性 -->
      <view class="property" v-if="typeProperty === 1">
        <view class="property-warp">
          <view class="title">销售属性</view>

          <view class="date">
            <view class="namebar">过期日期：</view>
            <view class="num">2020-07</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 items"
                  :key="item.value"
                >
                  <view class="checkth">
                    <radio :value="item.value" :checked="index === current" />
                  </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" v-if="typeProperty === 1">
        <view class="property-warp">
          <view class="title">商品库存</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 items"
                  :key="item.value"
                >
                  <view class="checkth">
                    <radio :value="item.value" :checked="index === current" />
                  </view>
                  <view class="txt">
                    <text class="txt1"> {{ item.name }}</text>
                    <text> {{ item.know }}</text>
                  </view>
                </label>
              </radio-group>
            </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">{{ progress }}%</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="placeholder"
            @input="saveTxt"
            @ready="onEditorReady"
          ></editor>
        </view>
      </view>

      <view class="btn" @tap="submitMesage">确认</view>
      <rf-loading v-if="loading"></rf-loading>
    </view>
  </view>
</template>

<script>
let myCloud;
import Header from '../components/header.vue';
export default {
  components: {
    Header,
  },
  data() {
    return {
      loading: false,
      scenicId: uni.getStorageSync('scenicId'),
      title: '商品详情',
      num1: 1,
      num2: 10,
      showoperat: false,

      placeholder: '请输入内容...',
      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: '',

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

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

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

      price: 0.0,
      rateprice: 0.0,

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

      SHOPID: 0,
      shopData: {},

      items: [
        {
          value: 'USA',
          name: '有效期模式',
          know: '无需用户指定使用日，在过期时间前均可使用。'
        },
        {
          value: 'CHN',
          name: '使用旧模式',
          know: '用户购买时需选择游玩日，并在游玩日当天使用。',
          checked: 'true',
        },
      ],

      current: 0,
    };
  },
  onUnload() {
    uni.removeStorageSync('Id');
  },
  onLoad() {
    myCloud = uniCloud.init({
      provider: 'aliyun',
      spaceId: 'db8671a1-69bd-470d-ad59-ba927c88f4a4',
      clientSecret: '8nOzV70edtpCd0El6qce3g==',
    });

    this.getShopList();

    // ---------------------------------------------------
    this.SHOPID = uni.getStorageSync('Id');
    if (this.SHOPID) {
      this.getShopBuyId();
    }
  },
  methods: {
    // 单选
    radioChange: function (evt) {
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].value === evt.target.value) {
          this.current = i;
          break;
        }
      }
    },
    // 获取单个商品信息
    async getShopBuyId() {
      if (!this.SHOPID) return;
      await this.$http
        .get('/goods/getById/' + this.SHOPID)
        .then(async (res) => {
          if (res.code === 200 && res.msg === 'OK') {
            this.shopData = res.data;

            this.getShopList();

            // 限制购票回显
            if (this.shopData.saleRule === '1') {
              let sale = JSON.parse(this.shopData.saleRuleJson);
              this.showoperat = true;
              this.num1 = sale.data.saleDay;
              this.num2 = sale.data.saleNum;
            } else {
              this.showoperat = false;
            }

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

    // 初始化编辑器
    onEditorReady() {
      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.storeId != '') {
        this.getType();
        this.getLine(); // 判断是否有商品名称列表
      }
    },
    // 选择商品类型
    changeType(e) {
      this.typeIndex = e.detail.value;
      this.typeId = this.typeList[this.typeIndex].id;
      if (this.typeId != '') {
        this.getShopName();
      }
    },
    // 商品名称选择
    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(async (res) => {
          if (res.data) {
            console.log(res);
            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.storeList.forEach((item, index) => {
                if (this.shopData.shopId === item.id) {
                  this.storeIndex = index;
                }
              });
              this.storeId = this.storeList[this.storeIndex].id;
              // 商品类型回显
              this.getType();
              this.getLine();
            }
          }
        });
    },
    // 商品类型
    async getType() {
      this.typeList = [{ name: '商品类型(请先选择所属店铺)', id: '' }];
      this.$http
        .get('/type/getTypeListByShopId', {
          id: this.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.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() {
      this.shopList = [{ name: '商品名称(请先选择商品类型)', id: '' }];
      await this.$http
        .get('/goods/getTicketGoods', {
          typeId: this.typeId,
          shopId: this.storeId,
        })
        .then(async (res) => {
          let arr = [];
          res.data.forEach((element) => {
            arr.push({ name: element.ticket_name, id: element.ticket_no });
          });
          this.shopList = this.shopList.concat(arr);
        });
    },
    // 线路分配
    async getLine() {
      await this.$http
        .get('/goods/getCustomGroupList', {
          shopId: this.storeId,
        })
        .then(async (res) => {
          let arr = [];
          this.hasNameList = +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.name) {
            this.getShopName();
            this.shopList.forEach((item, index) => {
              if (this.shopData.name === item.name) {
                this.shopIndex = index;
              } else {
                this.shopIndex = 0;
              }
            });
            this.shopId = this.shopList[this.shopIndex].id;
          }

          // 分类回显
          if (this.shopData.customGroupId) {
            this.lineList.forEach((item, index) => {
              if (this.shopData.customGroupId === item.id) {
                this.lineIndex = index;
              }
            });
            this.lineId = this.lineList[this.lineIndex].id;
          }
        });
    },
    // 账号限制
    Change(e) {
      this.showoperat = e.detail.value;
    },
    subtractUser() {
      if (this.num1 <= 1) {
        this.$mHelper.toast('最少一天');
        return;
      } else {
        this.num1--;
      }
    },
    addUser() {
      this.num1++;
    },
    subtractDate() {
      if (this.num2 <= 1) {
        this.$mHelper.toast('最少一张票');
        return;
      } else {
        this.num2--;
      }
    },
    addDate() {
      this.num2++;
    },
    // 图标上传
    uploadImg() {
      let _self = this;
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], // camera 使用相机   album 从相册中选
        success: function (res) {
          // 成功则返回图片的本地文件路径列表 tempFilePaths
          _self.iconurl = res.tempFilePaths[0];
          myCloud.uploadFile({
            url: 'http://192.168.100.135:83/merch/common/upload/oss',
            filePath: _self.iconurl, // 要上传的文件对象
            cloudPath: _self.iconurl, // 要上传的文件对象
            name: 'file',
            success: (res) => {
              if (res.fileID) {
                _self.Icon = res.fileID;
              }
            },
            onUploadProgress: function (progressEvent) {
              _self.progress = Math.round(
                (progressEvent.loaded * 100) / progressEvent.total
              );
            },
          });
        },
      });
    },
    // 图册上传
    uploadList() {
      let _self = this;
      uni.chooseImage({
        count: 6,
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], // camera 使用相机   album 从相册中选
        success: function (res) {
          // 成功则返回图片的本地文件路径列表 tempFilePaths
          let img = [];
          img.push(res.tempFilePaths);
          if (_self.pickList.length >= 6) {
            _self.$mHelper.toast('最多只可上传6张图片');
          } else {
            _self.pickList = _self.pickList.concat(img);
            // for (let i = 0; i < _self.pickList.length; i++) {
            //   let element = _self.pickList[i];
            //   myCloud.uploadFile({
            //     url: 'http://192.168.100.135:83/merch/common/upload/oss',
            //     filePath: element, // 要上传的文件对象
            //     cloudPath: element,
            //     name: 'file',
            //     onUploadProgress: function (progressEvent) {
            //       // 上传进度回调
            //       let percentCompleted = Math.round(
            //         (progressEvent.loaded * 100) / progressEvent.total
            //       );
            //     },
            //     success: (res) => {
            //     },
            //   });
            // }
          }
        },
      });
    },
    // 删除图册中的图片
    deleteThisImg(index) {
      this.pickList.splice(index, 1);
    },
    // 富文本失去焦点保存内容
    saveTxt(e) {
      this.mastKnow = e.detail.html;
    },
    // 内容提交
    submitMesage() {
      let _this = this;
      this.loading = true;
      let astrictDate = {};
      // 判断是否限制账号购买
      if (this.showoperat) {
        this.showoperat = '1';
        astrictDate = {
          data: {
            saleDay: this.num1,
            saleNum: this.num2,
          },
        };
      } else {
        this.showoperat = '0';
        astrictDate = '';
      }
      // 判断是否可以自定义商品名称
      let name = '';
      if (this.shopList.length === 1) {
        name = this.shopname;
      } else {
        name = this.shopList[this.shopIndex].id;
      }
      if (!this.storeId) {
        this.$mHelper.toast('请选择所属商铺');
        this.loading = false;
        return;
      }
      if (!this.typeId) {
        this.$mHelper.toast('请选择商品类型');
        this.loading = false;
        return;
      }
      if (!name) {
        this.$mHelper.toast('请选择商品名称或者输入商品名称');
        this.loading = false;
        return;
      }

      this.$http
        .post('/goods/add', {
          id: this.shopData.id || '',
          mid: this.scenicId,
          shopId: this.storeId,
          typeId: this.typeId,
          name: name,
          customGroupId: this.lineId,
          saleRule: this.showoperat,
          saleRuleJson: JSON.stringify(astrictDate),
          describ: this.mastKnow,
          icon: this.Icon || '',
          del: this.shopData.del || '',
          upDown: this.shopData.upDown || '',
        })
        .then((res) => {
          if (res.code === 200 && res.msg === 'OK') {
            if (this.shopData.id) {
              this.$mHelper.toast('保存成功,请联系管理员进行审核');
            } else {
              this.$mHelper.toast('添加成功');
            }
            this.loading = false;
            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: 30upx;
          color: #a3a8a8;
        }
        .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: 32upx;
        color: #a3a8a8;
      }
      .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: 30upx;
            line-height: 93upx;
            color: #a3a8a8;
          }
          .num {
            flex: 1;
            height: 100%;
            line-height: 93upx;
          }
        }
      }
    }
    .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;
          }
        }
      }
    }
  }
}
</style>