jje_staff/pages/index/index.vue

·
<template>
  <view class="page">
    <uni-nav-bar :fixed="true" background-color="#FFE05C" :border="false" :statusBar="true" title="首页"/>
    <view class="flex-row tuni ">
      <image class="profile" :src="userInfo.avatarUrl || '/static/ud4.png'"></image>
      <view class="tuniMsg">
        <view class="name ">
          <text>{{ userInfo.name }}</text>
        </view>
        <view>
          <text class="biaoqian ">{{ userInfo.post }}</text>
        </view>
      </view>
      <view class="flex-row justify-around tuni-right ">
        <view class="flex-col">
          <view class="flex-row justify-center dakaIcon ">
            <text>{{ userInfo.subNumber }}</text>
          </view>
          <view class="flex-row justify-center dakaText ">
            <text>今日预约</text>
          </view>
        </view>
        <view class="flex-col" @click="promotion">
          <view class="flex-row justify-center dakaIcon ">
            <u-icon name="/static/index/erweima.png" size="35"></u-icon>
          </view>
          <!--					<view class="flex-row justify-center dakaText " >-->
          <!--						<text>拓客码</text>-->
          <!--					</view>-->
        </view>
        <view class="flex-col " @click="userScanCode">
          <view class="flex-row justify-center dakaIcon ">
            <u-icon name="/static/index/saoma.png" size="25"></u-icon>
          </view>
          <view class="flex-row justify-center dakaText ">
            <text>报到打卡</text>
          </view>
        </view>
      </view>

    </view>

    <view class="flex-row justify-around buttons">
      <!--			<view class="buttonItem" @click="call" v-if="currService && currService.callState == '2'">-->
      <!--				<text>叫号</text>-->
      <!--			</view>-->
      <view class="buttonItem" :class="{buttonState:buttonState[0]}" @click="next">
        <text>下一位</text>
      </view>
      <view class="buttonItem" :class="{buttonState:buttonState[1]}" @click="takePlace">
        <text>已就位</text>
      </view>
      <view class="buttonItem" :class="{buttonState:buttonState[2]}" @click="settle">
        <text>结算</text>
      </view>
      <view class="buttonItem" :class="{buttonState:buttonState[3]}" @click="addService">
        <text>添加服务</text>
      </view>
    </view>

    <view class="flex-row justify-center ">
      <view class="serviceMsg " v-if="currService">
        <view class="flex-row serviceInfo ">
          <image class="serviceProfile" :src="currService.avatar || '/static/ud4.png'" @click="avatarOpen">
          </image>
          <view class="flex-col justify-end serviceInfo-rigth ">
            <view class="flex-row justify-between ">
              <view class="">
                <view class="flex-row">
                  <text class="servicename">{{ currService.serviceObjectName }}</text>
                  <text v-if="currService.isVip" class="biaoqian">会员客户</text>
                  <text v-else class="biaoqian">现金客户</text>
                </view>
                <view class="">
                  <text class="servicename">{{ currService.no }}</text>
                </view>
              </view>

              <view class="flex-col justify-center ">
                <view class="flex-row justify-center  tag" @click="openSelectServiceObjectPopup">
                  <text>切换</text>
                  <u-icon name="/static/index/qiehuan.png" size="18"></u-icon>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view :style="{'height':'120rpx'}"></view>
        <view class="flex-row justify-center" v-if="!currService.balanceFlag">
          <view class="flex-row justify-center hintView">
            <view class="hint">
              <text>!</text>
            </view>
            <view class="hintCentent">
              <text>娇宝余额不足哟~</text>
            </view>
          </view>
        </view>

        <view class="flex-row justify-center" v-if="currService.balanceFlag && currService.balance *1 <= 200">
          <view class="flex-row justify-center hintView" :class="{hintViewBgColor2: currService.balance *1 <= 100,
						  		   hintViewBgColor3: currService.balance *1 > 100 && currService.balance *1 <= 200}">
            <view class="hint">
              <text>!</text>
            </view>
            <view class="hintCentent">
              <text>娇宝余额充足~</text>
            </view>
          </view>
        </view>

        <view class="flex-col orderMsg">


          <view class="flex-row justify-between">
            <view class="flex-row">
              <u-icon name="/static/index/quhao.png" size="20"></u-icon>
              <text class="key">排号：</text>
              <text class="value">{{ currService.planNumber }}</text>
            </view>
            <view class="flex-col justify-center stateStr">
              <text>{{ currService.statusDesc }}</text>
            </view>
          </view>
          <view class="flex-row">
            <u-icon name="/static/index/orderNo1.png" size="20"></u-icon>
            <text class="key">订单编号：</text>
            <text class="value">{{ currService.orderNo }}</text>
          </view>
          <view class="flex-row">
            <u-icon name="/static/index/jiandao.png" size="20"></u-icon>
            <text class="key">服务项目：</text>
            <text class="value">{{ currService.serviceProject }}</text>
          </view>
          <view class="flex-row">
            <u-icon name="/static/index/tel.png" size="18"></u-icon>
            <text class="key">手机尾号：</text>
            <text class="value">{{ currService.phone.substring(7, 11) }}</text>
          </view>
          <view class="flex-row">
            <u-icon name="/static/index/quanyika.png" size="16"></u-icon>
            <text class="key">权益卡：</text>
            <template v-if="currService.cardList && currService.cardList.length">
              <text class="biaoqian" v-for="(card,index) in currService.cardList" :key="index">{{ card.title }}</text>
            </template>
            <text class="value" v-else>无</text>
          </view>
        </view>
        <view class="flex-row justify-center">
          <view class="imgs">
            <view class="mmImgView" :class="{floatRight: (index+1) % 2==0,marginTop:index>1}"
                  v-for="(i,index) in 0" :key="index">
              <image class="mmImg" mode="widthFix" src="/static/mn1.webp"></image>
            </view>
          </view>

        </view>

        <view class="flex-row justify-center" v-if="currService.status!==12">
          <view class="like">
            <text>{{ currService.preference || '暂无' }}</text>
          </view>
        </view>
      </view>

      <view class="flex-col" :style="{'height':sysHeight}" v-else>
        <view class="flex-row justify-center">
          <image class="dataNull" src="/static/index/dataNull.png"></image>
        </view>
        <view class="flex-row justify-center dataNullText">
          <text>暂无服务项目,请点击下一位刷新页面</text>
        </view>
      </view>
    </view>

    <uni-popup ref="avatarPopup" type="center">
      <view class="avatarView " v-if="currService">
        <view class="flex-row justify-center">
          <image class="avatarOpen" mode="widthFix" :src="currService.avatar || '/static/ud4.png'"></image>
        </view>
        <view class="flex-row justify-center" :style="{'marginTop':'20rpx'}">
          <text>服务对象：{{ currService.serviceObjectName }}</text>
        </view>
      </view>
    </uni-popup>

    <uni-popup ref="reminderPopup" type="center">
      <view class="reminderView ">
        <view class="reminderTitle">
          <text>保存用户喜好</text>
        </view>
        <view class="textareaView flex-row justify-center">
					<textarea class="textarea" v-model="content" placeholder-style="color:#999999;fontSize:28rpx"
                    placeholder="请输入用户喜好"/>
        </view>
        <view class="flex-row justify-around " :style="{'marginTop':'20rpx'}">
          <view class="cancelButton " @click="closeReminderPopup">
            <text>取消</text>
          </view>
          <view class="confirmButton " @click="preference">
            <text>确定</text>
          </view>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="addServicePopup" @change="popupChange" type="bottom">
      <view class="addService">
        <scroll-view class="scrollY1 " scroll-y>
          <view class="flex-col">
            <view class="popupTitle">
              <text>选择服务项目</text>
            </view>
            <view class="flex-row justify-center">
              <view class="serviceItems ">
                <view class="serviceItem "
                      :class="{vBackGround: serviceProjectListIndex === index,marginLeft16: (index+3) % 3!==0,marginTop24:index>2}"
                      v-for="(item,index) in serviceProjectList" :key="index"
                      @click="selectProject(item,index)">
                  <text>{{ item.serviceName }}</text>
                </view>
              </view>
            </view>
            <view class="popupTitle marginTop24">
              <text>选择服务技师</text>
            </view>

            <view class="flex-row justify-center">
              <view class="serviceItems ">
                <view class="flex-col serviceTeach "
                      :class="{marginLeft28: (index+4) % 4!==0,marginTop24:index>3}"
                      v-for="(item,index) in servicePersonList" :key="index"
                      @click="servicePersonListIndex = index">
                  <image class="serviceTeachImg" :src="item.facePhotoUrl ||'/static/ud4.png'"
                         :class="{vBackGround: servicePersonListIndex === index}"></image>
                  <view class="serviceTeachName">
                    <text>{{ item.personName }}</text>
                  </view>
                  <image v-if="servicePersonListIndex === index" class="vImage"
                         src="/static/index/xuanzhong.png"></image>
                </view>
              </view>
            </view>

          </view>


        </scroll-view>

        <view class="flex-row justify-around">
          <view class="cancelButton " @click="closeAddServicePopup">
            <text>取消</text>
          </view>
          <view class="confirmButton" @click="addServiceProject">
            <text>确定</text>
          </view>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="selectServiceObjectPopup" @change="popupChange" type="bottom">
      <view class="addService">

        <view class="popupTitle">
          <text>切换服务对象</text>
        </view>

        <scroll-view class="scrollY" scroll-y>
          <view class="flex-row objectItem" :class="{'vBackGround': selectServiceObjectIndex === index}"
                v-for="(item,index) in selectServiceObjectList" :key="index"
                @click="selectServiceObjectIndex = index">
            <image class="objectImage" :src="item.facePhotoUrl || '/static/ud4.png'"></image>
            <view class="flex-col objectName ">
              <text>{{ item.nickName }}</text>
            </view>
            <image v-if="selectServiceObjectIndex === index" class="vImage"
                   src="/static/index/xuanzhong.png"></image>
          </view>
        </scroll-view>

        <view class="flex-row justify-around">
          <view class="cancelButton" @click="closeSelectServiceObjectPopup">
            <text>取消</text>
          </view>
          <view class="confirmButton" @click="switchServiceObject">
            <text>确定</text>
          </view>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="promotionPopup" type="center">
      <view class="promotionView">
        <view class="flex-row justify-center qrcodeView">
          <uv-qrcode ref="qrcode" size="400rpx" :value="qrcodeUrl" :options="options"></uv-qrcode>
        </view>
        <view class="flex-row justify-center">
          <text>娇骄儿造型</text>
        </view>
        <view class="flex-row justify-center">
          <text>{{ codeTime }}</text>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import MescrollItem from "./module/mescrollUni-item.vue";
import QQMapWX from '../../common/js/qqmap/myqqmap-sdk.js'
import {date} from "../../uni_modules/uv-ui-tools/libs/function/test";

export default {
  components: {
    MescrollItem
  },
  data() {
    return {
      buttonState: [0, 0, 0, 0], //0：不禁用按钮，1:禁用按钮。
      previousServiceOrderId: '',
      content: '',
      selectServiceObjectList: [],
      selectServiceObjectIndex: -1,
      servicePersonList: [],
      servicePersonListIndex: 0,
      serviceProjectList: [],
      serviceProjectListIndex: 0,
      tabIndex: 0,
      sysHeight: '',
      readerHeight: '',
      readerWidth: '',
      userInfo: {},
      storeId: '',
      storeName: '',
      currService: null,
      qqMap: new QQMapWX({
        key: 'ZIABZ-543WB-747UM-JL5Y7-NDS4E-HWB4M',
        vm: this
      }),
      codeUrl:'',
      qrcodeUrl: 'https://jje.admin.xinyuekj.com.cn/recharge/recharge?storeId={promotionStoreId}&techNo={techNo}',
      options: {
        // 指定二维码前景，一般可在中间放logo
        foregroundImagePadding: 2,
        foregroundImageBorderRadius: 5,
        foregroundImageSrc: '/static/logo.png'
      },
      codeTime: null,

    }
  },
  onLoad() {
    let sysInfo = uni.getSystemInfoSync()
    this.sysHeight = sysInfo.windowHeight - (sysInfo.windowWidth / 750) * 400 + 'px'
    this.readerHeight = sysInfo.windowHeight + 'px'
    this.readerWidth = sysInfo.windowWidth + 'px'

  },
  onShow() {
    this.getUserInfo()
    // this.userInfo = uni.getStorageSync('userInfo')
    // if (this.userInfo.signIn){
    // 	this.currServiceInfo()
    // }
  },
  methods: {
    avatarOpen() {
      this.$refs.avatarPopup.open()
    },

    async promotion() {
      await this.getUserInfo()
      console.log('------', this.userInfo)

      if (!this.userInfo.workStoreId || !this.userInfo.techNo) {
        uni.showToast({
          icon: 'error',
          duration: 2000,
          title: '请刷新页面重试'
        });
        return
      }
      let date = new Date();
      this.codeTime = date.toLocaleString();

      let data = {
        promotionStoreId: this.userInfo.workStoreId,
        techNo: this.userInfo.techNo
      };

      console.log(data)
      this.codeUrl = this.qrcodeUrl
      for (let key in data) {
        let regexp = new RegExp("{" + key + "}"); // 构造正则表达式
        this.codeUrl = this.codeUrl.replace(regexp, data[key]); // 执行替换操作
      }
      console.log('++++qrcodeUrl+++++', this.codeUrl)
      this.$refs.promotionPopup.open()
    },

    closeReminderPopup() {
      this.previousServiceOrderId = ''
      this.$refs.reminderPopup.close()
    },
    openSelectServiceObjectPopup() {
      this.$api.service.getServiceObjectList({
        orderServiceId: this.currService.orderServiceId,
      }).then(res => {
        this.selectServiceObjectList = res.data.data
        this.getServiceObjectUrl(this.selectServiceObjectList)
        uni.hideTabBar()
        this.$refs.selectServiceObjectPopup.open()
      })
    },

    // 获取图片
    getServiceObjectUrl(items) {
      for (let i = 0; i < items.length; i++) {
        let ptoto = items[i].facePhoto || items[i].personPhoto
        if (ptoto) {
          this.$api.service.getImgUrlByOssId({
            ossId: ptoto
          }).then(res => {
            items[i].facePhotoUrl = res.data.data[0].url.replace(/^http:/, "https:")
            this.$forceUpdate()
          })
        }
      }
    },

    closeSelectServiceObjectPopup() {
      this.serviceProjectListIndex = -1
      this.$refs.selectServiceObjectPopup.close()
    },
    switchServiceObject() {
      if (this.selectServiceObjectIndex === -1) {
        uni.showToast({
          icon: 'none',
          duration: 2000,
          title: '请选择服务对象'
        });
        return
      }
      this.$api.service.switchServiceObject({
        orderServiceId: this.currService.orderServiceId,
        serviceObjectId: this.selectServiceObjectList[this.selectServiceObjectIndex].id
      }).then(res => {
        this.currServiceInfo()
        this.closeSelectServiceObjectPopup()
      })
    },

    addService() {
      if (!this.currService) {
        uni.showToast({
          icon: 'error',
          duration: 2000,
          title: '没有服务对象'
        });
        return
      }
      this.serviceProjectListIndex = 0
      this.$api.service.serviceProjectList().then(res => {
        this.serviceProjectList = res.data.data
        this.serviceUserList(res.data.data[0])
        uni.hideTabBar()
        this.$refs.addServicePopup.open()
      })
    },

    selectProject(item, index) {
      this.serviceProjectListIndex = index
      this.serviceUserList(item)
    },
    serviceUserList(item) {
      this.$api.service.serviceUserList({
        serviceProjectId: item.id,
        storeId: this.storeId
      }).then(res => {
        this.servicePersonListIndex = 0
        this.servicePersonList = res.data.data
        this.getServiceObjectUrl(this.servicePersonList)
      })
    },

    closeAddServicePopup() {
      this.serviceProjectListIndex = 0
      this.$refs.addServicePopup.close()
    },
    addServiceProject() {
      this.previousServiceOrderId = this.currService.serviceObjectId
      this.$api.service.addServiceProject({
        orderServiceId: this.currService.orderServiceId,
        serviceProjectId: this.serviceProjectList[this.serviceProjectListIndex].id,
        serviceUserId: this.servicePersonList[this.servicePersonListIndex].personId
      }).then(res => {
        this.closeAddServicePopup()
        this.currServiceInfo()
        this.$refs.reminderPopup.open()

      })
    },

    popupChange(e) {
      if (!e.show) {
        uni.showTabBar()
      }
    },


    takePlace() {
      if (!this.currService) {
        uni.showToast({
          icon: 'error',
          duration: 2000,
          title: '没有服务对象'
        });
        return
      }
      this.$api.service.takePlace({
        orderServiceId: this.currService.orderServiceId
      }).then(res => {
        uni.showToast({
          icon: 'success',
          duration: 2000,
          title: '操作成功'
        });
        this.currServiceInfo()
      })
    },

    preference() {
      this.$refs.reminderPopup.close()
      this.$api.service.preference({
        serviceObjectId: this.previousServiceOrderId,
        preference: this.content
      }).then(res => {
        if (this.currService) {
          if (this.currService.serviceObjectId == this.previousServiceOrderId) {
            this.currService.preference = this.content
          }
        }
        this.previousServiceOrderId = ''
        this.content = ''
        uni.showToast({
          icon: 'success',
          duration: 2000,
          title: '保存成功'
        });
      })
    },

    settle() {
      let that = this
      if (!that.currService) {
        uni.showToast({
          icon: 'error',
          duration: 2000,
          title: '没有服务对象'
        });
        return
      }
      uni.showModal({
        title: '温馨提示',
        content: '是否确定结算',
        editable: false,
        success: (e) => {
          console.log(e)
          if (e.confirm) {
            that.previousServiceOrderId = that.currService.serviceObjectId
            uni.showLoading({
              title: '结算中...'
            });
            that.$api.service.settle({
              orderServiceId: that.currService.orderServiceId
            }).then(res => {
              uni.hideLoading();
              that.currServiceInfo()
              that.$refs.reminderPopup.open()
            }).catch(err => {
              uni.hideLoading();
            })
          }
        }
      })

    },
    start() {
      this.$api.service.start({
        orderServiceId: this.currService.orderServiceId
      }).then(res => {
        this.currServiceInfo()
      })
    },

    end() {
      this.$api.service.end({
        orderServiceId: this.currService.orderServiceId
      }).then(res => {
        this.currServiceInfo()
      })
    },
    call() {
      this.$api.service.call({
        orderServiceId: this.currService.orderServiceId
      }).then(res => {
        this.currServiceInfo()
      })
    },

    next() {
      if (!this.userInfo.signIn) {
        uni.showToast({
          icon: 'error',
          duration: 2000,
          title: '请先扫码签到'
        });
        return
      }
      uni.showModal({
        title: '温馨提示',
        content: '是否确定下一位',
        editable: false,
        success: (e) => {
          if (e.confirm) {
            console.log(e.confirm)
            uni.showLoading({
              title: '叫号中...'
            });
            this.$api.service.next({
              orderServiceId: this.currService ? this.currService.orderServiceId :
                  null,
              storeId: this.storeId
            }).then(res => {
              this.currServiceInfo(true)
            }).catch(err => {
              uni.hideLoading();
            })
          }
        }
      })
    },

    currServiceInfo(e) {
      if (!this.userInfo.signIn) {
        uni.showToast({
          icon: 'error',
          duration: 2000,
          title: '请先扫码签到'
        });
        return
      }
      uni.showLoading({
        title: '叫号中...'
      });
      this.$api.service.currServiceInfo({
        storeId: this.userInfo.workStoreId
      }).then(res => {
        if (e) {
          if (res.data.data === null) {
            uni.showModal({
              title: '温馨提示',
              content: '暂无需要服务的客户',
              editable: false,
              showCancel: false,
              success: (e) => {
                if (e.confirm) {

                }
              }
            })
          }
        }
        uni.hideLoading();
        this.currService = res.data.data
        console.log('当前服务对象============》', this.currService)
        this.setButtomState(this.currService)
        if (!this.currService) {
          return
        }
        this.equityCard(this.currService)
        this.currService.avatar = this.currService.avatar.replace(/^http:/, "https:")
      }).catch(err => {
        uni.hideLoading();
        console.log("出错了+++++++++++出错了+++++++", err)

      })

    },

    //查询是否是有权益卡的服务对象
    equityCard(data) {
      if (!data || !data.serviceObjectId) {
        return
      }
      this.$api.service.equityCard({
        serviceObjectId: data.serviceObjectId,
        memberId: data.userId,
        serviceStoreId: data.serviceStoreId
      }).then(res => {
        // data.cardList = res.data.data
        this.$set(data, 'cardList', res.data.data)
      })
    },


    setButtomState(currService) {
      if (currService) {
        if (currService.status == 12) {
          //叫号中
          this.buttonState = [0, 0, 1, 1]
        } else if (currService.status == 8 || currService.status == 1) {
          //服务中
          this.buttonState = [1, 1, 0, 0]
        }

      } else {
        this.buttonState = [0, 1, 1, 1]
      }
    },

    getUserInfo() {
      return this.$api.user.getUserInfo().then(res => {
        this.userInfo = res.data.data
        this.storeId = res.data.data.workStoreId
        uni.setStorageSync('userInfo', this.userInfo)
        if (this.userInfo.avatar) {
          this.getImgUrlByOssId(this.userInfo.avatar)
        }
        if (this.userInfo.signIn) {
          this.buttonState = [0, 1, 1, 1]
          this.currServiceInfo()
        }
        this.$forceUpdate()
        console.log('获取个人信息完毕')
      })

    },
    getImgUrlByOssId(ossId) {
      this.$api.service.getImgUrlByOssId({
        ossId: ossId
      }).then(res => {
        this.$set(this.userInfo, 'avatarUrl', res.data.data[0].url.replace(/^http:/, "https:"))
        uni.setStorageSync('userInfo', this.userInfo)
      })
    },

    userScanCode() {
      let that = this
      uni.navigateTo({
        url: '/pages/scanCode/scanCode',
        events: {
          getScancode: function (data) {
            let param = {
              storeId: JSON.parse(data).storeId,
              timestamp: JSON.parse(data).timestamp
            }
            that.$api.service.clockIn(param).then(res => {
              uni.showToast({
                icon: 'success',
                duration: 2000,
                title: '签到成功'
              });
              uni.setStorageSync('userInfo', that.userInfo)
              that.getUserInfo()
            })
          },
        }
      })
    },
    clickTab(e) {
      this.tabIndex = e
      if (e === 0) {
        this.currServiceInfo()
      }
    },

  }
}
</script>

<style lang="scss" scoped>
@import './index.rpx.css';
</style>