shangfutong-ui/jeepay-ui-uapp-agent/pageWork/appManage/createdAppId.vue

<template>
    <view class="page-wrapper global-wrapper bgF2">
        <view class="select-title">商户</view>
        <JMainCard pd="0" wrapPd="30rpx">
            <view class="select-wrapper" @tap="jumpPage('mch')">
                <view class="select-mch" v-if="vdata.mchNo == undefined"> 请选择商户 </view>
                <view class="mch-info" v-else>
                    <image src="/static/equipmentImg/mch-list.svg" mode="scaleToFill" />
                    <view>{{ vdata.mchName }} <text>{{ vdata.mchNo }}</text>
                    </view>
                </view>
                <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
            </view>
        </JMainCard>
        <JMainCard pd="0" wrapPd="15rpx 30rpx">
            <JInput name="应用名称" :isBorder="true" v-model:value="vdata.appName" place="请输入应用名称"></JInput>
            <JInput name="备注" v-model:value="vdata.remark" place="请输入备注"></JInput>
        </JMainCard>
        <JMainCard pd="0" wrapPd="15rpx 30rpx">
            <JInput name="是否设置为默认应用" :isBorder="true">
                <switch :checked="vdata.defaultFlag == 1 ? true : false" style="margin-left: 20rpx; transform: scale(1.2)"
                    color="#7737fe" @change="switchState($event, 'defaultFlag')" />
            </JInput>
            <JInput name="状态">
                <switch :checked="vdata.state == 1 ? true : false" style="margin-left: 20rpx; transform: scale(1.2)"
                    color="#7737fe" @change="switchState($event, 'state')" />
            </JInput>
        </JMainCard>

        <!-- <input placeholder="请输入" v-model="vdata.appName" /> -->
        <JButton pd="30rpx 30rpx 50rpx 30rpx" @HandleTouch="submit">确认创建</JButton>
    </view>
</template>

<script setup>
import { reactive } from 'vue'
import { onShow, onLoad, onUnload } from '@dcloudio/uni-app'
import { $addApp } from '@/http/apiManager.js'
import JMainCard from '@/components/newComponents/JMainCard/JMainCard.vue'
import JInput from "@/components/newComponents/JInput/JInput"
import JButton from '@/components/newComponents/JButton/JButton'
import useStore from '@/hooks/useStore.js'
const { getStore, clearItem } = useStore()
onShow(() => {
    if (getStore('mch') && getStore('mch').mchNo && getStore('mch').mchNo !== vdata.mchNo) {
        delete getStore('mch').remark
        Object.assign(vdata, getStore('mch'))
    }
})
const vdata = reactive({
    appName: '',
    state: 1,
    defaultFlag: 1,
})
function randomKey (randomFlag, min, max) { // 生成随机128位私钥
    let str = ''
    let range = min
    const arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
    // 随机产生
    if (randomFlag) {
        range = Math.round(Math.random() * (max - min)) + min
    }
    for (var i = 0; i < range; i++) {
        var pos = Math.round(Math.random() * (arr.length - 1))
        str += arr[pos]
    }
    return str
}
const switchState = (e, v) => {
    vdata[v] = e.detail.value ? 1 : 0
}
const jumpPage = (val) => {
    uni.navigateTo({
        url: `/pageWork/SelectedList/SelectedList?title=${val}&selected=${vdata.mchNo}`,
    })
}
const submit = () => {
    const params = {
        appSignType: 'MD5',
        mchNo: vdata.mchNo,
        appName: vdata.appName,
        appSecret: randomKey(false, 128, 0),
        defaultFlag: vdata.defaultFlag,
        state: vdata.state,
    }
    console.log(params);

    $addApp(params).then(r => {
        uni.showToast({
            title: '创建成功',
            icon: 'none',
            duration: 2000,
            success: () => {
                uni.$emit('upDateList')
                uni.navigateBack()
            },
        })
    })
}
onUnload(() => {
    clearItem('mch')
})
</script>

<style lang="scss" scoped>
.page-wrapper {
    padding: .1rpx;
    box-sizing: border-box;
}

.select-title {
    margin-top: 30rpx;
    margin-left: 50rpx;
    font-size: 33rpx;
}

.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>