shangfutong-ui/jeepay-ui-uapp-agent/pageWork/deviceManagement/publicBind.vue

<template>
  <view>
    <JHeaderTitle :title="vdata.title" bgColor="#f2f2f2" />

    <!-- 商户 -->
    <JMainCard pd="0" wrapPd="30rpx 30rpx 0" v-if="getStore('mchInfo').mchNo" @tap="navigate('mch')">
      <JPreview
        img="/static/equipmentImg/mch-list.svg"
        :title="getStore('mchInfo').mchName"
        :qrcId="getStore('mchInfo').mchNo"
        :isLast="true"
      >
        <view class="arrow">
          <image src="/static/equipmentImg/arrow.svg" />
        </view>
      </JPreview>
    </JMainCard>
    <JMainCard pd="23rpx 0" wrapPd="30rpx 30rpx 0" v-else>
      <JInput @tap="navigate('mch')" :isBorder="true" name="请选择商户" textColor="#666" size="33rpx" :img="true" />
    </JMainCard>

    <!-- 门店 -->
    <JMainCard
      pd="0"
      wrapPd="30rpx 30rpx 0"
      v-if="getStore('mchInfo').mchNo && getStore('storeInfo').storeName"
      @tap="navigate('store')"
    >
      <JPreview
        img="/static/equipmentImg/store-list.svg"
        :title="getStore('storeInfo').storeName"
        :qrcId="getStore('storeInfo').storeId"
        :isLast="true"
      >
        <view class="arrow">
          <image src="/static/equipmentImg/arrow.svg" />
        </view>
      </JPreview>
    </JMainCard>

    <JMainCard pd="23rpx 0" wrapPd="30rpx 30rpx 0" v-if="getStore('mchInfo').mchNo && !getStore('storeInfo').storeName">
      <JInput @tap="navigate('store')" :isBorder="true" name="请选择门店" textColor="#666" size="33rpx" :img="true" />
    </JMainCard>

    <!-- 应用 -->
    <JMainCard
      pd="0"
      wrapPd="30rpx 30rpx 0"
      v-if="getStore('mchInfo').mchNo && getStore('appInfo').appName && vdata.isShowApp"
      @tap="navigate('app')"
    >
      <JPreview
        img="/static/equipmentImg/app-list.svg"
        :title="getStore('appInfo').appName"
        :qrcId="getStore('appInfo').appId"
        :isLast="true"
      >
        <view class="arrow">
          <image src="/static/equipmentImg/arrow.svg" />
        </view>
      </JPreview>
    </JMainCard>
    <JMainCard
      pd="23rpx 0"
      wrapPd="30rpx 30rpx 0"
      v-if="getStore('mchInfo').mchNo && !getStore('appInfo').appName && vdata.isShowApp"
    >
      <JInput @tap="navigate('app')" :isBorder="true" name="请选择应用" textColor="#666" size="33rpx" :img="true" />
    </JMainCard>

    <view @tap="bindHandle" class="bind" :class="{ mark: vdata.isMark }">确认绑定</view>
  </view>
</template>

<script setup>
import {
  $getQRcodeDetail,
  $qrcodeBind, // 码牌
  $getDeviceDetail,
  $bindDevice, // 喇叭/打印机
} from "@/http/apiManager.js"
import { onLoad, onShow } from "@dcloudio/uni-app"
import { ref, reactive, toRaw, watch } from "vue"
import JMainCard from "@/components/newComponents/JMainCard/JMainCard.vue"
import JLine from "@/components/newComponents/JLine/JLine.vue"

import JInput from "@/components/newComponents/JInput/JInput.vue"
import useStore from "@/hooks/useStore.js"
import JPreview from "@/components/newComponents/JPreview/JPreview.vue"
import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle.vue"

const { getStore, setStore } = useStore() // 简单的数据存储hook

const vdata = reactive({
  params: {}, // 存放设备信息
  isMark: true, // 是否去掉按钮的遮罩层
  getInfo: "", // 获取设备信息
  bindMch: "", // 绑定设备到商户
  isShowApp: true, // 是否展示应用 云喇叭云打印不展示
  title: "", // 页面标题
})

// 第一次进入页面时 重置商户 门店 应用 的数据
onLoad((option) => {
  vdata.qrcId = option.id
  vdata.title = option.title // 切换页面title
  // 根据tab来确定绑定不同的设备
  switch (option.tag) {
    case "code":
      vdata.getInfo = $getQRcodeDetail // 获取码牌信息
      vdata.bindMch = $qrcodeBind // 码牌绑定商户
      break
    case "device":
      vdata.getInfo = $getDeviceDetail // 获取 喇叭/打印机信息
      vdata.bindMch = $bindDevice // 喇叭/打印机绑定商户
      vdata.isShowApp = false
      break
    case "pos":
      vdata.getInfo = $getDeviceDetail // 获取 喇叭/打印机/pos信息
      vdata.bindMch = $bindDevice // 喇叭/打印机/pos绑定商户
      break
    default:
      null
  }

  setStore("mchInfo", {})
  setStore("storeInfo", {})
  if (vdata.isShowApp) {
    setStore("appInfo", {})
  }

  vdata.getInfo(option.id).then(({ bizData }) => {
    vdata.params = bizData
  })
})

// 如果每次进入页面时，可以获取到商户，门店，应用等信息，就可以去掉按钮的遮罩层进行绑定了
onShow(() => {
  if (vdata.isShowApp) {
    if (getStore("mchInfo").mchNo && getStore("storeInfo").storeId && getStore("appInfo").appId) {
      vdata.isMark = false
      vdata.params.storeId = getStore("storeInfo").storeId
      vdata.params.appId = getStore("appInfo").appId
      vdata.params.mchNo = getStore("mchInfo").mchNo
    }
  } else {
    if (getStore("mchInfo").mchNo && getStore("storeInfo").storeId) {
      vdata.isMark = false
      vdata.params.storeId = getStore("storeInfo").storeId
      vdata.params.mchNo = getStore("mchInfo").mchNo
    }
  }
  
 
})

// 绑定函数
const bindHandle = () => {
  if (vdata.isMark) return
  if (!vdata.isShowApp) vdata.params.bindType = 0 // 绑定到门店传0
  vdata.bindMch(vdata.qrcId, toRaw(vdata.params)).then(() => {
    uni.showToast({ icon: "none", title: "绑定成功" })
    setTimeout(() => {
      uni.navigateBack({})
    }, 1000)
  })
}

// 商户发生变化 重置门店和应用
watch(
  () => getStore("mchInfo").mchNo,
  () => {
    setStore("storeInfo", {})
    if (vdata.isShowApp) {
      setStore("appInfo", {})
    }
    vdata.isMark = true
  }
)

// 门店发生变化 重置应用
watch(
  () => getStore("storeInfo").storeId,
  () => {
    if (vdata.isShowApp) {
      setStore("appInfo", {})
    }
     vdata.isMark = true
  }
)

// 通用跳转
const navigate = (name) => {
  uni.navigateTo({ url: "/pageWork/publicSelect/publicSelect?name=" + name })
}
</script>
<style lang="scss">
page {
  background: #f2f2f2;
}
</style>
<style scoped lang="scss">
.arrow {
  width: 40rpx;
  height: 100%;
  display: flex;
  align-items: center;
  image {
    width: 40rpx;
    height: 40rpx;
  }
}
.bind {
  margin: 80rpx 30rpx 0 30rpx;
  height: 110rpx;
  border-radius: 20rpx;
  background: $primaryColor;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 33rpx;
}
.mark {
  opacity: 0.5;
}
</style>