new-cashier/jeepay-ui-uapp-agent/pageWork/terminal/addTerminal.vue

<template>
  <view class="page-wrapper global-wrapper bgF2">
    <JHeaderTitle title="创建辅助终端" bgColor="#f2f2f2" />
    <JMainCard pd="0" wrapPd="30rpx">
      <view class="select-wrapper" @tap="jumpPage('mch', mchInfo.mchNo)">
        <view class="select-mch" v-if="!mchInfo.mchNo"> 请选择商户 </view>
        <view class="mch-info" v-else>
          <image src="/static/equipmentImg/mch-list.svg" mode="scaleToFill" />
          <view
            >{{ mchInfo.mchName }} <text>{{ mchInfo.mchNo }}</text>
          </view>
        </view>
        <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
      </view>
    </JMainCard>
    <JMainCard wrapPd="0 30rpx" pd="0" v-if="mchInfo.mchNo">
      <view class="select-wrapper" @tap="jumpPage('store', storeInfo.storeId, { mchNo: mchInfo.mchNo })">
        <view class="select-mch" v-if="!storeInfo.agentNo"> 请选择门店 </view>
        <view class="mch-info" v-else>
          <image src="/static/navImg/nav-mendian.svg" mode="scaleToFill" />
          <view
            >{{ storeInfo.storeName }} <text>{{ storeInfo.agentNo }}</text>
          </view>
        </view>
        <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
      </view>
    </JMainCard>
    <JMainCard pd="0" wrapPd="30rpx" v-if="mchInfo.mchNo">
      <view class="select-wrapper" @tap="jumpPage('appId', appInfo.appId, { mchNo: mchInfo.mchNo })">
        <view class="select-mch" v-if="!appInfo.appId"> 请选择应用 </view>
        <view class="mch-info" v-else>
          <image src="/static/iconImg/icon-app-selected.svg" mode="scaleToFill" />
          <view
            >{{ appInfo.appName }} <text>{{ appInfo.appId }}</text>
          </view>
        </view>
        <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
      </view>
    </JMainCard>
    <JButton pdTop="0" pd="0 30rpx 50rpx" bottom="55rpx" @HandleTouch="next">下一步</JButton>
  </view>
</template>

<script setup>
import { ref } from "vue"
import { onShow, onLoad } from "@dcloudio/uni-app"
import useStore from "@/hooks/useStore.js"
import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle.vue"
import JMainCard from "@/components/newComponents/JMainCard/JMainCard.vue"
import JButton from "@/components/newComponents/JButton/JButton.vue"
const { getStore, setStore, clearItem } = useStore()
onShow(() => {
  if (getStore("mch")) {
    if (mchInfo.value.mchNo != getStore("mch").mchNo) {
      clearItem("store")
      clearItem("appId")
    }
    mchInfo.value = getStore("mch")
  }
  if (getStore("store")) {
    storeInfo.value = getStore("store")
  }
  if (getStore("appId")) {
    appInfo.value = getStore("appId")
  }
})
const mchInfo = ref({}) //商户信息
const storeInfo = ref({}) //门店信息
const appInfo = ref({}) //门店信息

const next = () => {
  if (mchInfo.value.mchNo && storeInfo.value.storeId && appInfo.value.appId) {
    setStore("createINfo", { mchNo: mchInfo.value.mchNo, storeId: storeInfo.value.storeId, appId: appInfo.value.appId })
    uni.navigateTo({
      url: "/pageWork/terminal/addTerminalNext",
      success: () => {
        clearItem("store")
        clearItem("appId")
        clearItem("mch")
      },
    })
  } else {
    uni.showToast({
      title: "请选择门店 商户 应用信息",
      icon: "none",
    })
  }
}
// 跳转到通用选择页面
const jumpPage = (val, selected, search) => {
  if (search) search = JSON.stringify(search)
  uni.navigateTo({
    url: `/pageWork/SelectedList/SelectedList?title=${val}&selected=${selected}&&search=${search}`,
  })
}
</script>

<style lang="scss" scoped>
.page-wrapper {
  .select-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    .select-mch {
      margin: 20rpx;
    }
    .mch-info {
      display: flex;
      image {
        width: 93rpx;
        height: 93rpx;
        margin-right: 10rpx;
      }
      view {
        display: flex;
        flex-direction: column;
        font-size: 33rpx;
        font-weight: 700;
        text {
          margin-top: 15rpx;
          color: #8c8c8c;
          font-size: 25rpx;
          font-weight: 500;
        }
      }
    }
    image {
      width: 40rpx;
      height: 40rpx;
    }
    .img-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      width: 93rpx;
      height: 93rpx;
      margin-right: 20rpx;
      image {
        width: 60rpx;
        height: 66rpx;
      }
    }
  }
}
</style>