jhsw_xiaochengxu/src/components/PayPackage.vue

<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import { userLoginApi, getUserPhoneApi } from "@/services/home";
import { useMemberStore } from "@/stores/";
import type { LoginParams, GetPhoneParams } from "@/types/home";
import { login } from "@/hooks/useIsLogin";
const useMember = useMemberStore();
const packagePopup = ref<any>();

const packageList = reactive<any[]>([
    { name: '单次卡(税务报告)', desc: '税务报告单次获取', price: '980' },
    { name: '4次卡(税务报告)', desc: '税务报告4次卡', price: '2680' },
    { name: '12次卡(税务报告)', desc: '税务报告12次卡', price: '5980' },
]);

const userInfoMsg = reactive<LoginParams>({
    code: "",
});

onMounted(() => {
    console.log("登录");
});
//获取手机号
const getPhoneNumber = (e: any) => {
    console.log(e);
    //获取到动态令牌后将动态令牌传输到后台方法
    //同时需要将获取到的openId传输给后台
    const params = {
        openId: useMember.userInfo.openId,
        code: e.detail.code,
    };
    getUserPhone(params);
};
const getUserPhone = async (val: GetPhoneParams) => {
    const phoneInfo = await getUserPhoneApi(val);
    useMember.userInfo.phone = phoneInfo.data;
    login().then((res: any) => {
        //这时可以查询是否授权
        if (res.code == "2001") {
            uni.showToast({
                title: '暂无权限',
                icon: "none",
                duration: 2000
            });
        } else {
            uni.showToast({
                title: "登录成功",
                icon: "none",
                success() {
                    uni.navigateTo({ url: "/pages/index/inviteUser" });
                }
            });
        }
    });
    close();
    //获取到手机号后
    //将缓存里的手机号替换为最新的
};

//拿到code 向后台请求openId   session_key

const open = () => {
    login().then((res: any) => {
        userInfoMsg.code = res.code;
    });
    packagePopup.value.open("center");
};
const close = () => {
    packagePopup.value.close();
};

const agree = ref<boolean>(false);
const radioChange = () => {
    agree.value = !agree.value;
};

const stipulate = ref<any>();

const stipulateClose = () => {
    stipulate.value.close();
};

const viewDetail = () => {
    stipulateOpen();
};
const stipulateOpen = () => {
    stipulate.value.open("bottom");
};

defineExpose({
    open,
});
</script>
<template>
    <view>
        <uni-popup ref="packagePopup">
            <view class="payPackage">
                <view class="pay_title">套餐购买</view>
                <view class="package_list">
                    <view class="package_item" v-for="item in packageList">
                        <view class="item_head">

                        </view>
                        <view class="item_body">
                            <view class="item_name">
                                {{ item.name }}
                            </view>
                            <view class="item_desc">
                                {{ item.desc }}
                            </view>
                        </view>
                        <view class="item_price">
                            {{ item.price }}
                        </view>
                    </view>
                </view>
                <view class="pay_way">
                    <view class="pay_way_title">
                        付款方式
                    </view>
                    <view class="way_item">
                        <view class="way_icon">
                            <image src="" mode="scaleToFill" />
                        </view>
                        <view class="way_title">微信支付</view>
                        <view class="way_check"></view>
                    </view>
                </view>
                <view class="pay_control">
                    <view class="pay_info"><text>待支付</text><text class="unit">￥</text><text class="amout">980</text>>
                    </view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>
<style lang="scss" scoped>
.payPackage {
    width: 593rpx;
    height: 617rpx;
    background: url(https://test.jue-ming.com:8849/api/show?filePath=./jinhong/index/dialog_bg.png) no-repeat top;
    background-size: cover;
    border-radius: 40rpx;
}

.pay_title {
    font-family: 'Alibaba PuHuiTi 2.0';
    font-weight: normal;
    font-size: 32rpx;
    color: #4A89FB;
    text-align: center;
    padding: 28rpx 0 30rpx;
}

.package_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 517rpx;
    height: 100rpx;
    background: #FFFFFF;
    border-radius: 14rpx;
    border: 1px solid #D6D6D6;
    margin: 0 auto 14rpx;
    padding: 14rpx 70rpx;
}

.package_item.active {
    background: #0056FF;
}

.item_body {
    flex: 1;
}

.item_name {
    font-family: Alibaba PuHuiTi 2.0;
    font-weight: normal;
    font-size: 28rpx;
    color: #333333;
    line-height: 36rpx;
}

.item_desc {
    font-family: Alibaba PuHuiTi 2.0;
    font-weight: normal;
    font-size: 20rpx;
    color: #999999;
    line-height: 36rpx;
}

.item_price {
    font-family: Alibaba PuHuiTi 2.0;
    font-weight: normal;
    font-size: 28rpx;
    color: #333333;
    line-height: 125rpx;
}

.pay_way_title {
    font-family: 'Alibaba PuHuiTi 2.0';
    font-weight: normal;
    font-size: 32rpx;
    color: #333333;
    margin: 35rpx 42rpx 26rpx 0;
}

.way_item {
    display: flex;
}

.pay_info {
    font-family: 'Alibaba PuHuiTi 2.0';
    font-weight: normal;
    font-size: 28rpx;
    color: #333333;
    display: flex;
    align-items: center;
}

.amout {
    font-family: Alibaba PuHuiTi 2.0;
    font-weight: normal;
    font-size: 28rpx;
    color: #F20404;
}

.unit {
    font-family: Alibaba PuHuiTi 2.0;
    font-weight: normal;
    font-size: 20rpx;
    color: #F20404;
}
</style>