pad_spa/src/pages/confirmOrder/addOrder/index.vue

<template>
  <div class="mine">
    <div class="left">
      <div class="user-info">
        <div class="user-img">
          <img :src="userInfo.image"
               alt />
        </div>
        <div class="user-span">
          <div class="name">
            昵称：
            <span>{{userInfo.nickname}}</span>
          </div>
          <div class="sex">
            性别：
            <span>{{userInfo.sex}}</span>
          </div>
          <div class="age">
            肤龄：
            <span>{{userInfo.age==1?'男':userInfo.age==2?'女':'保密'}}</span>
          </div>
          <div class="skin-type">
            肤质：
            <span>{{userInfo.skin}}</span>
          </div>
        </div>
      </div>
      <div class="user-record">
        <div class="fraction"
             @click="isPore=true">
          <div class="title">肌肤得分</div>
          <div class="num">{{userInfo.score}}分</div>
        </div>
        <div class="status">
          <div class="title">皮肤状态</div>
          <div class="tips">{{userInfo.skin_status}}</div>
        </div>
        <div class="times">
          <div class="title">上传检测时间</div>
          <div class="ts">{{userInfo.check_time}}</div>
        </div>
      </div>
      <div class="lable">
        <div class="lable-title">面诊标签</div>
        <div class="lable-list">
          <div v-for="(item,index) in lableList"
               :key="index"
               class="lable-info">{{item}}</div>
        </div>
      </div>
      <div class="ps">
        <div class="ps-title">备注</div>
        <div class="ps-text">{{remarks | ellipsis(20)}}</div>
      </div>
      <div class="programme">
        <div class="tab">
          <div class="tab-title">执行方案</div>
        </div>
        <div class="programme-list">
          <div :class="['programme-info',item.onSelect?'programme-active':'']"
               v-for="(item,index) in programmeList"
               :key="index"
               @click="onOperation(index)">
            <div class="programme-left">
              <div class="programme-img">
                <img :src="item.cover_url"
                     alt />
              </div>
              <div class="programme-tips">
                <div class="tips-title">{{item.name|ellipsis(9)}}</div>
                <div class="tips-title">{{item.desc|ellipsis(9)}}</div>
                <div class="tips-title">
                  仪器：
                  <span>{{item.device_name|ellipsis(9)}}</span>
                </div>
              </div>
            </div>
            <div class="programme-right">
              <div class="frequency">
                执行频率：
                <span>{{item.rate}}</span>
              </div>
              <div class="duration">
                持续时长：
                <span>{{item.duration}}</span>
              </div>
            </div>
            <div class="operation"
                 v-if="item.onSelect">
              <div class="edit">编辑</div>
              <div class="delete">删除</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="shop-info">
        <div class="shpo-name">
          预约店铺：
          <span>{{userInfos.store_name}}</span>
        </div>
        <div class="shpo-address">
          门店地址：
          <span>{{order_data.address}}</span>
        </div>
        <!-- <div class="shpo-ts">
          美容时间：
          <span>{{order_data.order_time}}</span>
        </div>-->
      </div>
      <div class="project">
        <div class="project-title">
          <div>
            共
            <span>{{order_data.project_list?order_data.project_list.length:0}}个</span>项目
          </div>
          <div v-if="order_data.type!='one'"
               class="add-project"
               @click="addProject">添加</div>
        </div>
        <div class="project-list">
          <div class="project-info"
               v-for="(item,index) in order_data.project_list"
               :key="index">
            <div class="project-image">
              <img :src="item.cover_url" />
            </div>
            <div class="project-content">
              <div class="title-price">
                <div class="project-tit">{{item.name}}</div>
                <div class="project-price">
                  <span class="min-size">￥</span>
                  {{Number(item.price).toFixed(2)}}
                </div>
              </div>
              <div class="project-tips">{{item.product_names}}</div>
              <div class="project-zoom">
                <div>
                  <span v-if="item.device_name">{{item.device_name}}（{{item.room}}）{{item.use_time}}分钟</span>
                </div>
                <div v-if="order_data.type!='one'">
                  <img @click="eidt(item)"
                       src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/eidt.png" />
                  <img @click="deleteProject(item)"
                       class="delete"
                       src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/delete.png"
                       alt />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cost"
           v-if="!isChange || order_data.project_list.length>0">
        <div class="over-price">
          合计：
          <span class="price-num">
            <span class="min-size">￥</span>
            {{reservationPrice}}
            <span class="min-size"></span>
          </span>
        </div>
      </div>
      <div class="payment"
           @click="determine">确定订单</div>
    </div>
    <!-- 选择优惠券 -->
    <mine-pupop :show="isCoupun">
      <div class="coupon-block">
        <div class="delete-pupop"
             @click="isCoupun=false">
          <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
               alt />
        </div>
        <div class="coupon-pupop-title">选择优惠券</div>
        <ul class="coupon-lists">
          <li class="coupon-info"
              v-for="item,index in couponList"
              :key="index">
            <!-- 1: '抵扣券',
      2: '满减券',
      3: '全额减免券',
            4: '项目卡券'-->
            <div class="coupon-tips-text">{{item.type==1?'抵扣券':item.type==2?'满减券':item.type==3?'全额减免券':'项目卡券'}}</div>
            <div class="top">
              <div v-if="item.type==3"
                   class="discount-over">全免</div>
              <div v-else
                   class="discount">
                <div class="price-num">
                  <span class="size">￥</span>
                  {{item.price}}
                </div>
                <div class="price-tips">{{item.full_price}}</div>
              </div>
              <div class="coupon-tip">
                <div class="tips-title">{{item.coupon_name}}</div>
                <div class="tips-ts">有效期至{{item.ex_time}}</div>
              </div>
              <div class="choice-icon"
                   @click="selectPupop(item,index)">
                <img :src="item.isSelect?select:unSelect" />
              </div>
            </div>
            <div class="bottom">
              <div class="coupon-notes"
                   @click="isOver=!isOver">
                <div class="notes-text min-size">
                  <span v-if="!isOver">{{item.coupon_desc |ellipsis(20)}}</span>
                  <span v-else>{{item.coupon_desc}}</span>
                </div>
                <div class="notes-icon">
                  <img :src="isOver?open:unOpen"
                       alt />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </mine-pupop>
    <!-- 选择项目 -->
    <mine-pupop :show="isProject">
      <div class="project-block">
        <div class="delete-pupop"
             @click="isProject=false">
          <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
               alt />
        </div>
        <div class="project-pupop-title">选择项目</div>
        <div class="project-select">
          <el-select v-model="classifyInfo"
                     placeholder="请选择分类"
                     style="width: 295px;"
                     @change="getClassify"
                     size="mini">
            <el-option v-for="item in classifyList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="project-select">
          <el-select v-model="projectInfo"
                     placeholder="请选择项目"
                     style="width: 295px;"
                     :disabled="classifyInfo.length==0?true:false"
                     @change="getProducts"
                     size="mini">
            <el-option v-for="item in projectList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="products-select">
          <el-select v-model="productsInfo"
                     placeholder="请选择升级产品包"
                     style="width: 295px;"
                     :disabled="projectInfo.length==0?true:false"
                     size="mini">
            <el-option v-for="item in productsList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="products-button"
             @click="orderUpdate">确定</div>
      </div>
    </mine-pupop>
    <!-- 选择时间 -->
    <mine-pupop :show="isTs">
      <div class="ts-block">
        <div class="delete-pupop"
             @click="isTs=false">
          <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
               alt />
        </div>
        <div class="ts-pupop-title">选择时间</div>
        <div class="ts-content">
          <ul class="ts-table">
            <li v-for="item,index in tsTableList"
                :key="index"
                @click="changetsTable(index)"
                :class="tsTableIndex==index?'ts-table-active':''">
              <div>{{item.text}}</div>
              <div>{{item.ts}}</div>
            </li>
          </ul>
          <div v-if="tsBodyList.day">
            <div class="time-slot">
              <div class="day"
                   @click="changeActive(1)"
                   :style="active==1?'color: #333333;font-weight: 600;':''">{{ tsBodyList.day.name}}</div>
              <div class="night"
                   @click="changeActive(0)"
                   :style="active==0?'color: #333333;font-weight: 600;':''">{{tsBodyList.night.name}}</div>
            </div>
            <ul class="ts-boty"
                v-if="active==1">
              <li v-for="item,index in tsBodyList.day.list"
                  :key="index">
                <div :style="item.status==0?'color: #D3D3D3;':''"
                     @click="selectTime(item)"
                     :class="timeIndexText==item.order_time?'time-active':''">{{item.order_time}}</div>
              </li>
            </ul>
            <ul class="ts-boty"
                v-else>
              <li v-for="item,index in tsBodyList.night.list"
                  :key="index">
                <div :style="item.status==0?'color: #D3D3D3;':''"
                     @click="selectTime(item)"
                     :class="timeIndexText==item.order_time?'time-active':''">{{item.order_time}}</div>
              </li>
            </ul>
          </div>
        </div>
        <el-button class="ts-button"
                   :style="this.timeIndexText.length == 0?'background: rgb(211, 211, 211);':''"
                   @click="comfigTs">确认</el-button>
      </div>
    </mine-pupop>
    <!-- 皮肤状态 -->
    <mine-pupop :show="isPore">
      <div class="pore-block">
        <div class="delete-pupop"
             @click="isPore=false">
          <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
               alt />
        </div>
        <div class="pore-content">
          <ul>
            <li class="pore-info"
                v-for="item,index in poreList"
                :key="index">
              <div class="pore-top">
                <div class="pore-title">
                  <div>{{item.name}}</div>
                  <div class="pore-medium"
                       v-if="item.main_item">{{item.main_item.name}}{{item.main_item.num}}</div>
                </div>
                <div class="pore-over">
                  <div class="min-size"
                       v-for="value,index in item.items"
                       :key="index">{{value.name}}{{value.num}}个</div>
                </div>
              </div>
              <div class="pore-bottom min-size">{{item.suggest | ellipsis(85)}}</div>
            </li>
          </ul>
        </div>
      </div>
    </mine-pupop>
  </div>
</template>

<script>
import minePupop from "../../../components/minePupop/index.vue";
import QRCode from "qrcodejs2";
import api from "../../../server/home";

export default {
  components: { minePupop },
  data () {
    return {
      open:
        "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/openNotes.png",
      unOpen:
        "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/upDate.png",
      select:
        "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/select.png",
      unSelect:
        "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/unSelect.png",
      userInfo: {},
      //面部标签
      lableList: [],
      //执行方案
      programmeList: [],
      order_data: {
        project_list: []
      }, //门店
      //项目列表
      projectList: [],
      //项目分类列表
      classifyList: [],
      //升级包列表
      productsList: [],
      //时间列表（头部）
      tsTableList: [],
      tsTableIndex: 0,
      active: 1,
      //时间列表（body）
      tsBodyList: {},
      //皮肤状态列表
      poreList: [],
      //优惠券列表
      couponList: [],
      //已选择的优惠券
      selectCouponList: [],
      //已选择优惠券的id（同一个id只能选择一张优惠券）
      selectCouponListId: [],
      //支付方式

      timesInfo: "",
      reservationPrice: 0, //预约费用
      projectInfo: "",
      productsInfo: "",
      timeIndexText: "", //当前选择的时间
      weekInfo: "",
      programmeIndex: "",
      classifyInfo: '',
      remarks: "",
      isCoupun: false, //是否展示优惠券弹窗
      isOver: false, //优惠券注释
      isProject: false, //是否展示选择项目弹窗
      isTs: false, //是否展示选择时间弹窗
      isPore: false, //皮肤状态弹窗
      choicePayType: false, //支付弹窗
      PayStatus: false, //支付状态弹窗
      isPayCode: true, //是否展示支付二维码
      id: 0, //订单id
      lastProjectPrice: "", //项目已选择的升级包
      isChange: false, //项目是否有改变
      isEditProject: false, //是否编辑项目
      payStatusInterval: null, //轮循拉支付状态
      page: 1,
      limit: 200,
      needSelect: false,
      coupSelectType: "",
      productDiscount: "",
      isSelectCoup: [], // 选择的优惠券
      // 下面是支付的数据
      showMoney: 0, // 价值总额
      discountPrice: 0, //活动后金额
      discount: 0, //折扣类型
      userInfos: {}
      // showRuleText: 10086,
    };
  },
  computed: {},
  watch: {},

  methods: {
    toHome () {
      this.$router.replace("/home");
    },
    getProjectClassify () {
      api.projectClassify().then(res => {
        this.classifyList = res.data.list
      })
    },
    getProjectList (e) {
      api.getProjectList({ id: e }).then(res => {
        this.projectList = res.data.list;
      });
    },
    getClassify (e) {
      this.projectInfo = ''
      console.log(e);
      this.getProjectList(e)
    },

    getProducts (e) {
      // this.productsInfo = ''
      api.getProducts({ id: e }).then(res => {
        this.productsList = res.data.list;
        this.productsList.forEach(item => {
          if (this.productsInfo == item.id) {
            this.lastProjectPrice = Number(item.price);
          }
        });
      });
    },
    eidt (item) {
      this.projectInfo = item.id;
      this.productsInfo =
        item.product_ids == "" ? "" : Number(item.product_ids);
      this.getProducts(item.id);
      this.isEditProject = true;
      this.isProject = true;
    },
    deleteProject (item) {
      this.order_data.project_list.forEach((res, index) => {
        if (item.id == res.id) {
          this.order_data.project_list.splice(index, 1);
          this.$message({
            message: "删除成功",
            type: "success"
          });
        }
      });
    },
    addProject () {
      this.projectInfo = "";
      this.productsInfo = "";
      this.isEditProject = false;
      this.isProject = true;
    },
    //新增
    orderUpdate () {
      // 编辑
      if (this.isEditProject) {
        if (this.productsInfo != "") {
          this.order_data.project_list.forEach(e => {
            console.log(this.projectInfo)
            console.log(this.projectInfo == e.id)
            if (this.projectInfo == e.id) {
              this.productsList.forEach(item => {
                e.product_ids = this.productsInfo;
                if (item.id == e.product_ids) {
                  if (e.product_ids != "") {
                    e.price = Number(e.price) - Number(this.lastProjectPrice);
                  }
                  this.isChange = true;
                  e.product_names = item.name;
                  console.log(
                    Number(e.price),
                    Number(item.price),
                    "Number(e.price) + Number(item.price)"
                  );
                  e.price = Number(e.price) + Number(item.price);
                  this.isProject = false;
                  this.isEditProject = false;
                  this.calculationPrice();
                }
              });
            }
          });
        } else {
          this.isProject = false;
          return;
        }
      } else {
        //新增
        let isIndexOf = false;
        if (this.projectInfo.length == 0) return;
        this.order_data.project_list.forEach(res => {
          if (this.projectInfo == res.id) {
            isIndexOf = true;
            this.$message.error("该项目已存在");
          }
        });
        if (isIndexOf) return;
        //项目包重组
        let projectInfo = {},
          nowProjectInfo = {},
          productsInfo = {};
        this.projectList.forEach(item => {
          if (this.projectInfo == item.id) {
            nowProjectInfo = item;
          }
        });
        if (this.productsInfo.length != 0) {
          this.productsList.forEach(item => {
            if (item.id == this.productsInfo) {
              productsInfo = item;
            }
          });
        }
        projectInfo["name"] = nowProjectInfo.name;
        projectInfo["id"] = nowProjectInfo.id;
        projectInfo["cover_url"] = nowProjectInfo.cover_url;
        projectInfo["device_name"] = "";
        projectInfo["room"] = "";
        projectInfo["use_time"] = "";
        projectInfo["price"] = nowProjectInfo.price;
        projectInfo["product_names"] = "";

        if (Object.keys(productsInfo).length > 0) {
          projectInfo["product_ids"] = productsInfo.id;
          projectInfo.product_names = productsInfo.name;
          projectInfo.price += Number(productsInfo.price);
        }
        this.order_data.project_list.push(projectInfo);
        this.isChange = true;
        this.isProject = false;
        this.calculationPrice();
      }
    },
    //获取最近七天的时间
    getWeekDate () {
      //获取系统当前时间
      let now = new Date();
      let nowTime = now.getTime();
      let oneDayTime = 24 * 60 * 60 * 1000;
      let tsTableList = [];
      for (let i = 0; i < 7; i++) {
        //显示周一
        let ShowTime = nowTime + i * oneDayTime;
        //初始化日期时间
        let myDate = new Date(ShowTime);
        let year = myDate.getFullYear();
        let month = myDate.getMonth() + 1;
        let date = myDate.getDate();
        let str = "周" + "日一二三四五六".charAt(myDate.getDay());
        let tsTableInfo = {};
        tsTableInfo["text"] = i == 0 ? "今天" : i == 1 ? "明天" : str;
        tsTableInfo["ts"] = month + "-" + date;
        tsTableInfo["order_day"] = year + "-" + month + "-" + date;
        tsTableList.push(tsTableInfo);
      }
      this.tsTableList = tsTableList;
    },
    //确定订单&支付
    determine () {
      if (this.order_data.project_list == 0) {
        this.$message.error(
          "项目选择不能为空!"
        );
        return;
      }
      this.getWeekDate();
      this.getOrderTime();
      this.order_time = "";
      this.tsTableIndex = 0;
      this.isTs = true;
    },
    //确定时间选择
    comfigTs () {
      let that = this;
      if (this.timeIndexText.length == 0) return;
      let order_data = [];
      this.order_data.project_list.forEach(item => {
        let order_data_info = {};
        order_data_info["id"] = item.id;
        if (item.product_ids != "") {
          order_data_info["product_id"] = item.product_ids;
        }
        order_data.push(order_data_info);
      });
      let params = {
        user_id: this.userInfo.user_id,
        order_data: JSON.stringify(order_data),
        order_day: this.tsTableList[this.tsTableIndex].order_day,
        order_time: this.timeIndexText
      };
      this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      api.padOrderAdd(params).then(res => {
        if (res.code == 200) {
          this.$loading().close()
          // 关闭当前页面并且跳转
          that.$router.push({
            path: "/confirmOrder/details",
            query: {
              id: res.data.order_id
            }
          });
        }
      });
    },
    //计算预约费用
    calculationPrice () {
      this.reservationPrice = 0;
      this.order_data.project_list.forEach(res => {
        this.reservationPrice += Number(res.price);
      });
    },


    changePayStatus () {
      this.PayStatus = false;
      if (this.payStatusInterval) {
        //如果定时器在运行则关闭
        clearInterval(this.payStatusInterval);
      }
    },
    payStatus () {
      api.payStatus({ id: this.id }).then(res => {
        if (res.data.pay_status == 1) {
          clearInterval(this.payStatusInterval);
          this.isPayCode = false;
        }
      });
    },

    //数组包含关系
    includes (arr1, arr2) {
      return arr2.every(val => arr1.includes(val));
    },
    //选中优惠券
    // selectPupop (item, index) {
    //   this.couponList[index].Select = !this.couponList[index].Select
    //   this.selectCouponList = this.couponList.filter(res => {
    //     return res.Select == true
    //   })
    //   this.selectCouponList.forEach(res => {
    //   })

    // },

    // 不可以用的不显示，如果同时有项目劵、抵扣劵、满减劵，只能用一种类型，其他劵不显示
    // 1、针对单个项目，项目劵可以多选
    // 2、抵扣劵、满减劵针对的是整个订单，当用户已使用了单个项目劵时，抵扣劵、满减劵就不能使用
    // 3、优惠劵可以给多个项目抵扣,
    // 4、默认抵扣金额最高的
    // 5、优惠劵排序，到期时间倒叙

    changeActive (e) {
      this.active = e;
    },
    selectTime (item) {
      if (item.status == 0) return;
      this.timeIndexText = item.order_time;
    },
    changetsTable (index) {
      this.tsTableIndex = index;
      this.getOrderTime();
    },
    getOrderTime () {
      let ids = "",
        idsList = [];
      this.order_data.project_list.forEach(res => {
        idsList.push(res.id);
      });
      ids = idsList.toString();
      let params = {
        ids: ids,
        order_day: this.tsTableList[this.tsTableIndex].order_day
      };
      api.getOrderTime(params).then(res => {
        this.tsBodyList = res.data;
      });
    },

    onOperation (index) {
      if (this.programmeList[index].onSelect) {
        this.$set(
          this.programmeList[index],
          "onSelect",
          !this.programmeList[index].onSelect
        );
      } else {
        this.$set(this.programmeList[index], "onSelect", true);
      }
    },
    //获取订单折扣类型
    getOrderDiscount () {
      api.getOrderDiscount({ id: this.id }).then(res => {
        this.discount = res.data.discount;
        this.getOrderInfo();
      });
    },

    getUserInfo () {
      let that = this;
      api.getUserInfo().then(res => {
        if (res.code == 200) {
          this.userInfos = res.data;
        }
      });
    }
  },

  created () {
    this.getUserInfo();
    let data = this.$route.query.data;

    console.log(data);
    if (data) {
      this.data = JSON.parse(data);
    }
    this.userInfo = this.data.user;
    this.lableList = this.data.tags;
    this.remarks = this.data.remark;
    this.programmeList = this.data.scheme_list;
    // this.order_data = this.data.order_data;
    this.reservationPrice = 0;
    this.poreList = this.data.detail_list;
    this.getProjectClassify()
    // this.getProjectList();
    // this.getOrderDiscount()
  },

  mounted () { },
  destroyed () {
    if (this.payStatusInterval) {
      //如果定时器在运行则关闭
      clearInterval(this.payStatusInterval);
    }
  }
};
</script>

<style lang='less' scoped>
.mine {
  height: 100%;
  display: flex;
  .left {
    width: 318px;
    padding: 12px 12px 0 12px;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
    border-radius: 8px;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 18px;
    overflow: scroll;
    height: 100%;
    .user-info {
      display: flex;
      align-items: center;
      .user-img {
        width: 96px;
        img {
          width: 100%;
          display: block;
        }
      }
      .user-span {
        margin-left: 12px;

        span {
          color: #333333;
        }
      }
    }
    .user-record {
      margin-top: 16px;
      display: flex;
      justify-content: space-between;
      .num {
        font-size: 18px;
        font-family: OPPOSans-B, OPPOSans;
        font-weight: normal;
        color: #fa7d22;
        line-height: 29px;
      }
      .tips {
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 30px;
      }
      .ts {
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 30px;
      }
    }
    .lable {
      margin-top: 23px;
      width: 100%;
      overflow: scroll;
      background: #ffffff;
      .lable-title {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 20px;
        margin-bottom: 14px;
      }
      .lable-list {
        width: 100%;
        min-height: 105rpx;
        .lable-info {
          display: inline-block;
          padding: 0 12px;
          margin-left: 10px;
          height: 24px;
          line-height: 24px;
          border-radius: 2px;
          border: 1px solid #d6d6d6;
          margin-bottom: 10px;
        }
        .add-lable {
          display: inline-block;
          width: 27px;
          height: 24px;
          line-height: 24px;
          font-size: 12px;
          font-family: PingFang-SC-Regular, PingFang-SC;
          font-weight: 400;
          color: #333333;
          text-align: center;
          margin-left: 10px;
          border-radius: 2px;
          border: 1px solid #d6d6d6;
        }
      }
      .remarks {
        /deep/ .el-textarea__inner:focus {
          border-color: #fa852f;
        }
      }
    }
    .ps {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 20px;
      .ps-text {
        margin-top: 10px;
        font-size: 12px;
        font-weight: 400;
        color: #666666;
        line-height: 17px;
      }
    }
    .programme {
      margin-top: 20px;
      width: 100%;
      background: #ffffff;
      border-radius: 8px;

      .tab {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .tab-title {
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 20px;
        }
      }
      .programme-list {
        margin-top: 10px;
        position: relative;
        z-index: 1;
        .programme-info {
          position: relative;
          margin-bottom: 10px;
          border-radius: 4px;
          border: 1px solid #f5f5f5;
          display: flex;
          justify-content: space-between;
          padding: 8px 8px 8px 10px;
          align-items: center;
          .programme-left {
            display: flex;
            align-items: center;
            .programme-img {
              width: 48px;
              display: inline-block;
              img {
                width: 100%;
                display: block;
              }
            }
            .programme-tips {
              display: inline-block;
              margin-left: 10px;
              font-size: 10px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
              line-height: 14px;
              zoom: 0.83;
            }
          }
          .programme-right {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 17px;
            .duration {
              margin-top: 14px;
            }
          }
          .operation {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 10px;
            z-index: 10;
            width: 44px;
            background: #ffffff;
            box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
              0px 6px 16px 0px rgba(0, 0, 0, 0.08),
              0px 3px 6px -4px rgba(0, 0, 0, 0.12);
            border-radius: 2px;
            padding: 10px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 17px;
            .delete {
              margin-top: 20px;
            }
          }
        }
        .programme-active {
          border: 1px solid #fa852f;
        }
      }
    }
  }
  .right {
    margin-left: 18px;
    position: relative;
    flex: 1;
    .shop-info {
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
      border-radius: 8px;
      padding: 12px;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 24px;
      span {
        font-weight: 500;
        color: #333333;
      }
    }
    .project {
      margin-top: 18px;
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
      border-radius: 8px;
      padding: 16px 12px 12px 12px;
      .project-title {
        padding-bottom: 7px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
          color: #fa7d22;
        }
        .add-project {
          width: 60px;
          height: 28px;
          background: #fa7d22;
          border-radius: 8px;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 28px;
          text-align: center;
        }
      }
      .project-list {
        padding-top: 10px;
        height: 220px;
        overflow: scroll;
        .project-info {
          margin-bottom: 10px;
          display: flex;
          .project-image {
            width: 60px;
            height: 60px;
            img {
              width: 100%;
              display: block;
            }
          }
          .project-content {
            flex: 1;
            margin-left: 10px;
            .title-price {
              display: flex;
              justify-content: space-between;
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #292929;
              line-height: 22px;
            }
            .project-tips {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
              line-height: 18px;
            }
            .project-zoom {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #fa7d22;
              line-height: 18px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              img {
                width: 20px;
              }
              .delete {
                margin-left: 10px;
              }
            }
          }
        }
      }
    }
    .cost {
      overflow: scroll;
      background: #ffffff;
      border-radius: 8px;
      margin-top: 18px;
      padding: 10px 19px 11px 12px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 20px;
      .cost-coupon-list {
        border-bottom: 1px solid #f9f9f9;
      }
      .cost-title {
        display: flex;
        justify-content: space-between;
      }
      .coupon {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        .coupon-tips {
          display: flex;
          align-items: center;
          .coupon-icon {
            width: 16px;
            img {
              width: 100%;
              display: block;
            }
          }
          .coupon-title {
            margin-left: 3px;
          }
          .coupon-tip {
            margin-left: 10px;
            background: #ffefeb;
            border-radius: 4px;
            border: 1px solid #ff3007;
            font-size: 10px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ff3007;
            line-height: 14px;
            padding: 2px 6px;
            zoom: 0.83;
          }
        }
      }
      .coupon-ps {
        margin-left: -6px;
        margin-top: 11px;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 17px;
        .cou-price {
          font-weight: 500;
          color: #ff3007;
        }
      }
      .over-price {
        margin-top: 14px;
        text-align: right;
        .price-num {
          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ff3007;
          line-height: 25px;
        }
      }
    }
    .payment {
      position: absolute;
      bottom: 0;
      margin-top: 18px;
      left: 50%;
      transform: translateX(-50%);
      width: 176px;
      height: 28px;
      background: #fa7d22;
      border-radius: 14px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 28px;
      text-align: center;
    }
  }
  .coupon-block {
    width: 540px;
    height: 400px;
    background: #ffffff;
    border-radius: 8px;
    position: relative;
    padding: 42px;
    .delete-pupop {
      width: 32px;
      position: absolute;
      right: 5px;
      top: 5px;
      img {
        width: 100%;
      }
    }
    .coupon-pupop-title {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 20px;
      text-align: center;
    }
    .coupon-lists {
      display: inline-block;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      margin-top: 20px;
      height: 228px;
      overflow: scroll;
      .coupon-info {
        width: 345px;
        margin-bottom: 20px;
        padding: 20px 14px 10px 14px;
        position: relative;
        background: #fff4e6;
        border-radius: 12px;
        .coupon-tips-text {
          position: absolute;
          left: 0;
          top: 0;
          padding: 0 8px;
          height: 18px;
          background: #875617;
          border-radius: 12px 0px 12px 0px;
          font-size: 12px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 18px;
          zoom: 0.83;
          text-align: center;
        }
        .top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 10px;
          border-bottom: 1px dashed #ffdfb6;
          .all-free {
            font-size: 22px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ff3007;
            line-height: 30px;
          }
          .discount {
            .price-num {
              font-size: 28px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #ff3007;
              line-height: 40px;
              .size {
                font-size: 14px;
                line-height: 20px;
              }
            }
            .price-tips {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ff3007;
              line-height: 17px;
            }
          }
          .discount-over {
            font-size: 22px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ff3007;
            line-height: 30px;
          }
          .coupon-tip {
            .tips-title {
              font-size: 16px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #875617;
              line-height: 22px;
            }
            .tips-ts {
              margin-top: 4px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #875617;
              line-height: 17px;
            }
          }
          .choice-icon {
            width: 20px;
            img {
              width: 100%;
            }
          }
        }
        .bottom {
          padding-top: 9px;
          .coupon-notes {
            display: flex;
            justify-content: space-between;

            .notes-text {
              width: 314px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #c38029;
              line-height: 18px;
            }
            .notes-icon {
              width: 24px;
              img {
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
  .project-block {
    width: 540px;
    height: 400px;
    background: #ffffff;
    border-radius: 8px;
    position: relative;
    padding: 42px;
    .delete-pupop {
      width: 32px;
      position: absolute;
      right: 5px;
      top: 5px;
      img {
        width: 100%;
      }
    }
    .project-pupop-title {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 20px;
      text-align: center;
    }
    .project-select {
      text-align: center;
      margin-top: 26px;
    }
    .products-select {
      text-align: center;
      margin-top: 20px;
    }
    .products-button {
      position: absolute;
      bottom: 42px;
      left: 50%;
      transform: translateX(-50%);
      width: 176px;
      height: 28px;
      background: #fa7d22;
      border-radius: 14px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 28px;
      text-align: center;
    }
  }
  .ts-block {
    width: 540px;
    height: 420px;
    background: #ffffff;
    border-radius: 8px;
    position: relative;
    padding: 42px 105px;
    .delete-pupop {
      width: 32px;
      position: absolute;
      right: 5px;
      top: 5px;
      img {
        width: 100%;
      }
    }
    .ts-pupop-title {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 20px;
      text-align: center;
    }
    .ts-content {
      .ts-table {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #999999;
        line-height: 20px;
        padding: 9px 0;
        display: flex;
        justify-content: space-between;
        li {
          text-align: center;
        }
        .ts-table-active {
          color: #fa7d22;
          border-bottom: 4px solid #fa4622;
        }
      }

      .time-slot {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 22px;
      }
      .ts-boty {
        margin-top: 10px;
        margin-left: -19px;
        display: flex;
        justify-content: unset;
        flex-wrap: wrap;
        li {
          margin-top: 10px;
          width: 68px;
          margin-left: 19px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          background: #f9f9f9;
          border-radius: 8px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
        .time-active {
          background: #fff0e6;
          border: 1px solid #fa7d22;
          font-weight: 500;
          color: #fa7d22;
        }
      }
    }
    .ts-button {
      position: absolute;
      bottom: 42px;
      padding: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 176px;
      height: 28px;
      background: #fa7d22;
      border-radius: 14px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 28px;
      text-align: center;
    }
  }
  .pore-block {
    width: 540px;
    height: 400px;
    background: #ffffff;
    border-radius: 8px;
    position: relative;
    padding: 42px;
    .delete-pupop {
      width: 32px;
      position: absolute;
      right: 5px;
      top: 5px;
      img {
        width: 100%;
      }
    }
    .pore-content {
      overflow: scroll;
      height: 310px;
      .pore-info {
        margin-top: 10px;
        border-radius: 4px;
        border: 1px solid #f5f5f5;
        .pore-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 20px;
          padding: 10px;
          .pore-title {
            .pore-medium {
              font-size: 18px;
              color: #fa7d22;
              line-height: 25px;
            }
          }
          .pore-over {
            font-size: 12px;
          }
        }
        .pore-bottom {
          padding: 6px 8px;
          background: #f5f5f5;
          border-radius: 4px;
          font-size: 12px;
          font-family: PingFang-SC-Regular, PingFang-SC;
          font-weight: 400;
          color: #333333;
          line-height: 14px;
        }
      }
    }
  }
  .pay-block {
    width: 540px;
    height: 400px;
    background: #ffffff;
    border-radius: 8px;
    position: relative;
    padding: 42px;
    .delete-pupop {
      width: 32px;
      position: absolute;
      right: 5px;
      top: 5px;
      img {
        width: 100%;
      }
    }
    .pay-title {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 20px;
      text-align: center;
    }
    .pay-suc {
      margin-top: 40px;
      margin-bottom: 80px;
      text-align: center;
      img {
        width: 140px;
      }
    }
    .pay-price {
      margin-top: 10px;
      font-size: 14px;
      font-family: OPPOSans-B, OPPOSans;
      font-weight: normal;
      color: #fa4622;
      text-align: center;
      line-height: 31px;
      span {
        font-size: 20px;
      }
    }
    .banner {
      margin-top: 24px;
      .qrCode {
        text-align: center;
      }
    }
    .pay-list {
      width: 338px;
      margin-top: 8px;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      .pay-info {
        margin-top: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        height: 44px;
        border-radius: 35px;
        border: 1px solid #d0d0d0;

        padding: 0 20px;
        .pay-left {
          margin-left: 8px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 22px;
          display: flex;
          align-items: center;
          img {
            width: 24px;
          }
          span {
            margin-left: 20px;
          }
        }
        .pay-right {
          img {
            width: 24px;
          }
        }
      }
    }
    .pay-button {
      margin-top: 28px;
      width: 176px;
      height: 28px;
      background: #fa7d22;
      border-radius: 14px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 28px;
      text-align: center;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>