自己写的功能模块总结

第一个是店铺编辑模块

简单介绍

1. 面向对象
   这是一个面写店铺管理员人员的模块。
2. 添加功能
   拥有改变该店铺信息的功能，管理人员添加本店铺就会记录信息，需要按照填写的地址规划区域，这样就可以进行区域管理。普通用户在某区域能就可以搜索到本店铺。
3. 编辑信息功能
   该模块有自定义经营状态，默认为营业状态，当选中休息状态就会弹出是否设置自动开业的选择，默认为不设置自动开业时间，当有需要设置自动开业时间，就可以选择这个选项并且设置开业时间。
   经营类型选择，默认为全天营业，也可以自定义是否每天某时间点开业，或者每周内哪几天经营，设置开业到结束时间
4. 备注打印功能，店铺管理员可以选择是否打印顾客和商家的备注,设置后，在所有门店生效。默认在订单小票顶部打印。
5. 内容保存功能，店铺管理员点击保存后内容生效，当信息发生变化后，点击保存就会弹出“是否更改所有门店的营业时间？”

<template>
  <div class="dp-body">
    <div class="dpgl-top">
      <h2>店铺设置</h2>
    </div>
    <div class="dpgl-xz">
      <div class="dpgl-xztop">
        <p><span>店铺设置</span></p>
      </div>
      <div class="jy-sz">
        <p>经营设置</p>
      </div>
      <div class="jy-box">
        <div class="dianpu-fw">
          <p>店铺范围：</p>
          <div class="dianpu-xuanx">
            <el-radio v-model="radio" label="1">所有</el-radio><br />
            <el-radio v-model="radio" label="2" class="dianpu-xuanx1"
              >自定义</el-radio
            >
          </div>
        </div>
      </div>
      <div class="jy-box">
        <div class="dianpu-fw">
          <p>营业状态：</p>
          <div class="dianpu-xuanx">
            <el-radio v-model="zhuangtai" label="1">营业</el-radio>
            <el-radio v-model="zhuangtai" label="2" class="dianpu-xuanx2"
              >休息</el-radio
            >
          </div>
        </div>
        <div v-if="zhuangtai == 2" class="dianpu-erji">
          <div class="dianpu-fw">
            <p>设置自动开业：</p>
            <div class="dianpu-xuanx">
              <el-radio v-model="kayesj" label="1">不设置自动开业时间</el-radio>
              <el-radio v-model="kayesj" label="2" class="dianpu-xuanx2"
                >设置自动开业时间</el-radio
              >
            </div>
          </div>
        </div>
        <div v-if="zhuangtai == 2 && kayesj == 2" class="dianpu-erji">
          <div class="dianpu-fw">
            <p class="dianpu-duiqi">自动开业时间：</p>
            <div class="dianpu-xuanx">
              <el-date-picker
                v-model="value1"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
      </div>
      <div class="jy-box">
        <div class="dianpu-fw">
          <p>经营类型：</p>
          <div class="dianpu-xuanx">
            <el-radio v-model="jylx" label="1">全天</el-radio><br />
            <el-radio v-model="jylx" label="2" class="dianpu-xuanx1"
              >自定义</el-radio
            >
          </div>
        </div>
        <div v-if="jylx == 2" class="dianpu-erji">
          <div class="dianpu-fw">
            <p>设置开业时间：</p>
            <div class="dianpu-xuanx">
              <el-radio v-model="szkysj" label="1">每天重复</el-radio>
              <el-radio v-model="szkysj" label="2" class="dianpu-xuanx2"
                >每周重复</el-radio
              >
            </div>
          </div>
        </div>
        <div v-if="jylx == 2" class="dianpu-erji">
          <div v-if="szkysj == 1" class="dianpu-rq">
            <el-row>
              <el-button plain>添加时间</el-button>
            </el-row>
            <el-date-picker
              v-model="value1"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="dianpu-rqq"
            >
            </el-date-picker>
          </div>
          <div v-if="szkysj == 2">
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="周一"></el-checkbox>
              <el-checkbox label="周二"></el-checkbox>
              <el-checkbox label="周三"></el-checkbox>
              <el-checkbox label="周四"></el-checkbox>
              <el-checkbox label="周五"></el-checkbox>
              <el-checkbox label="周六"></el-checkbox>
              <el-checkbox label="周日"></el-checkbox>
            </el-checkbox-group>
            <div class="dianpu-rq">
              <el-row>
                <el-button plain>添加时间</el-button>
              </el-row>
              <el-date-picker
                v-model="value1"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                class="dianpu-rqq"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
      </div>
      <div class="jy-sz">
        <p>基础设置</p>
      </div>
      <div class="jy-box">
        <div class="dianpu-fw">
          <p>顾客备注是否打印：</p>
          <div class="dianpu-xuanx">
            <el-switch v-model="gkdy" active-text="是" inactive-text="否">
            </el-switch>
          </div>
        </div>
      </div>
      <div class="jy-box dp-wei">
        <div class="dianpu-fw">
          <p>商家备注是否打印：</p>
          <div class="dianpu-xuanx">
            <el-switch v-model="sjdy" active-text="是" inactive-text="否">
            </el-switch>
          </div>
        </div>
      </div>
    </div>
      <el-row class="dp-baowei">
        <el-button type="success" class="dp-baocun">保存</el-button>
      </el-row>
  </div>
</template>
<style lang="scss" scoped>
.dp-body {
  background-color: rgba(246, 247, 249);
  height: 100vh;
}
.dpgl-top {
  height: 50px;
  background-color: #f3f3f3;
  h2 {
    line-height: 50px;
    padding-left: 20px;
    color: #999;
    font-size: 14px;
  }
}
.dpgl-xz {
  width: 1100px;
  margin: 25px 0 0 30px;
  background-color: #fff;
  .dpgl-xztop {
    height: 50px;
    background-color: #f3f3f3;
    p {
      color: #666;
      line-height: 50px;
      margin-left: 30px;
      span {
        font-size: 12px;
      }
    }
  }
  .jy-sz {
    height: 50px;
    p {
      font-size: 16px;
      color: #333;
      font-weight: 600;
      line-height: 50px;
      padding-left: 25px;
      border-bottom: 1px solid rgba(242, 242, 242, 1);
    }
  }
  .jy-box {
    margin-left: 205px;
    margin-top: 20px;
    .dianpu-erji {
      margin-top: 30px;
      .dianpu-duiqi {
        line-height: 40px;
      }
      .dianpu-rq {
        display: flex;
        margin-top: 20px;
        .dianpu-rqq {
          margin-left: 30px;
        }
      }
    }
  }
  .dp-wei {
    padding-bottom: 20px;
  }
  .dianpu-fw {
    display: flex;
    .dianpu-xuanx {
      margin-left: 20px;
    }
    .dianpu-xuanx1 {
      margin-top: 10px;
    }
    .dianpu-xuanx2 {
      margin-left: 20px;
    }
  }
}
.dp-baowei{
    width: 1100px;
  margin: 25px 0 0 30px;
  .dp-baocun{
      margin-left: 515px;
  }
}
</style>
<script>
export default {
  data() {
    return {
      radio: "1",
      zhuangtai: "1",
      kayesj: "1",
      value1: "",
      jylx: "1",
      szkysj: "1",
      checkList: [],
      gkdy: true,
      sjdy: true,
    };
  },
};
</script>

第二个是搜索模块

1. 面向对象
   这是一个面写普通的模块，用于用户搜索。
2. 搜索功能
   当用户需要收索某一类型的产品，当用户把内容填入搜索框中，当点击搜索后会把搜索框的内容添加到负载中，收索目标内容。
3. 按照推荐和价格排布
   当用户点击推荐时就会把推荐的序号添加到负载中，得到商品数据，点击价格的时候跟推荐同理，但是当点击第一次的时候会降序，第二次是升序。
4. 按照品牌的内容收索
   选择收索内容的牌子来收索内容，
5. 筛选内容收索
   通过筛选内容来收索内容，筛选的内容有价格范围，排序其他。