@2kog/pkg-widget 0.1.9

package/src/components/common/phone-code-select.vue

@@ -0,0 +1,104 @@
+<template>
+    <el-select
+        v-model="select"
+        filterable
+        :filter-method="filterMethod"
+        class="w-phonecode-select"
+        popper-class="w-phonecode-select__pop"
+        style="width: 200px"
+        placeholder=""
+    >
+        <el-option
+            v-for="country in filterData"
+            :key="country.iso2"
+            :label="country.name"
+            :value="country.dialCode"
+        >
+            <span class="fi" :class="`fi-${country.iso2}`"></span>
+            <span class="u-country">{{ country.name }} <span class="u-dial">(+{{ country.dialCode }})</span></span>
+        </el-option>
+
+        <template #label>
+            <div class="m-label">
+                <span class="fi" :class="`fi-${country?.iso2}`"></span>
+                <span class="u-dial">(+{{ country?.dialCode }})</span>
+            </div>
+        </template>
+    </el-select>
+</template>
+
+<script>
+import "flag-icons/css/flag-icons.min.css";
+import intlTelInput from "intl-tel-input";
+
+export default {
+    name: "CountryPhonecode",
+    props: {
+        modelValue: {
+            type: [Number,  String],
+            default: "",
+        },
+    },
+    emits: ["update:modelValue"],
+    data() {
+        return {
+            countryData: [],
+            filterData: [],
+            select: ""
+        };
+    },
+    computed: {
+        country() {
+            return this.countryData?.find(
+                (item) => item.dialCode == this.select
+            ) || {}
+        },
+    },
+    watch: {
+        select(val) {
+            this.$emit("update:modelValue", val);
+        },
+        modelValue: {
+            handler(val) {
+                this.select = val;
+            },
+            immediate: true,
+        }
+    },
+    mounted() {
+        this.countryData = intlTelInput.getCountryData();
+        this.filterData = this.countryData;
+    },
+    methods: {
+        filterMethod(query) {
+            if (query !== "") {
+                this.filterData = this.countryData.filter((item) => {
+                    return (item.name
+                        .toLowerCase()
+                        .includes(query.toLowerCase()) || item.dialCode.includes(query));
+                });
+            } else {
+                this.filterData = this.countryData;
+            }
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.w-phonecode-select {
+    .m-label {
+        .flex;
+        align-content: center;
+        gap: 5px;
+    }
+}
+.w-phonecode-select__pop {
+    .u-country {
+        margin-left: 10px;
+    }
+    .u-dial {
+        color: #999;
+    }
+}
+</style>

package/src/components/common/upload-image.vue

@@ -0,0 +1,138 @@
+<template>
+    <div class="w-upload-image">
+        <div
+            v-if="data"
+            class="u-image"
+            :style="{ width, height }"
+            :class="{ 'is-circle': isCircle }"
+        >
+            <img class="u-image-pic" :src="data" />
+            <i class="u-image-mask"></i>
+            <i class="u-image-delete" title="移除" @click="remove"
+                ><img src="../../assets/img/trash.svg" alt="移除"
+            /></i>
+        </div>
+        <div v-else class="u-upload" :class="{ 'is-circle': isCircle }" @click="select" :style="{ width, height }" v-loading="loading">
+            <i class="u-upload-icon">＋</i>
+        </div>
+        <input
+            class="u-upload-input"
+            type="file"
+            @change="add"
+            ref="uploadInput"
+            :accept="accept"
+        />
+    </div>
+</template>
+
+<script>
+import {buildOssSuffix} from "@2kog/pkg-common/utils/common";
+import cloneDeep from "lodash/cloneDeep";
+export default {
+    name: "UploadImage",
+    props: {
+        // 图片地址
+        url: {
+            type: String,
+            default: "",
+        },
+        defaultAvatar: {
+            type: String,
+            required: false,
+            default: "",
+        },
+        size: {
+            type: Array,
+            default: [120, 120],
+        },
+        shape: {
+            type: String,
+            default: "square",
+        },
+        uploadFn: {
+            type: Function,
+            default: () => {},
+            required: true,
+        },
+        domain: {
+            type: String,
+            default: "",
+            required: true,
+        },
+        accept: {
+            type: Array,
+            default: () => [
+                ".jpg",
+                ".jpeg",
+                ".png",
+                ".gif",
+                ".bmp",
+                ".webp",
+                ".heic",
+                ".heif",
+            ],
+        },
+    },
+    data() {
+        return {
+            data: "",
+            file: null,
+
+            loading: false,
+        };
+    },
+    computed: {
+        isCircle() {
+            return this.shape === "circle";
+        },
+        width() {
+            return this.size[0] + "px";
+        },
+        height() {
+            return this.size[1] + "px";
+        },
+    },
+    watch: {
+        url: {
+            handler: function (val) {
+                this.data = val && this.getAvatar(this.domain + val) || cloneDeep(this.defaultAvatar);
+            },
+            immediate: true,
+        }
+    },
+    methods: {
+        select: function () {
+            this.$refs.uploadInput.dispatchEvent(new MouseEvent("click"));
+        },
+        getAvatar(url) {
+            const size = this.size.map(item => item * 2)
+            return url ? url + buildOssSuffix(size) : "";
+        },
+        add: function (e) {
+            this.file = e.target.files[0];
+            // this.data = window.URL.createObjectURL(this.file);
+            // this.$emit("update", this.file);
+            this.loading = true;
+            this.uploadFn(this.file)
+                .then((res) => {
+                    this.data = this.getAvatar(this.domain + res.data.data);
+                    this.$emit("update", res.data.data);
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
+        remove: function () {
+            this.$refs.uploadInput.value = "";
+            this.data = "";
+            this.data.startsWith("blob:") &&
+                window.URL.revokeObjectURL(this.data);
+            this.$emit("update", "");
+        },
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/component/upload-image.less";
+</style>

package/src/demo/pay-dialog-demo.vue

@@ -0,0 +1,133 @@
+<!-- 支付弹窗组件使用示例 -->
+<template>
+    <div class="demo">
+        <h1>支付弹窗组件演示</h1>
+
+        <el-button type="primary" @click="openPayDialog">打开支付弹窗(支付宝)</el-button>
+        <el-button type="success" @click="openWepayDialog" style="margin-left: 10px;">打开支付弹窗(微信)</el-button>
+
+        <!-- 支付弹窗 -->
+        <Payment
+            v-model="payVisible"
+            title="支付中心"
+            width="50%"
+            :product-id="productId"
+            :count="count"
+            :product-desc="productDesc"
+            :pay-mode="payMode"
+            :return-url="'/order/success'"
+            :api-request="handleApiRequest"
+            @done="onPaymentDone"
+            @cancel="onPaymentCancel"
+            @error="onError"
+        />
+    </div>
+</template>
+
+<script>
+import Payment from '../components/common/pay.vue';
+import axios from 'axios'; // 或者你的请求库
+
+function $http(options = {}, axiosConfig = {}) {
+    // 解构options并设置默认值
+    const { interceptor = true, domain, region, progress } = options;
+
+    // 获取请求域名
+    let requestDomain = "";
+    if (domain) {
+        requestDomain = domain;
+    } else {
+        requestDomain = import.meta.env.VUE_APP_COMMON_API;
+    }
+
+    // 设置请求头
+    let config = {
+        // 同时发送cookie和basic auth
+        withCredentials: true,
+        headers: {
+            Authorization: "Bearer " + localStorage.getItem("RX_Token"),
+        },
+        baseURL: requestDomain,
+    };
+
+    // 设置进度条
+    if (progress) {
+        config.onUploadProgress = progress;
+    }
+
+    // 创建实例
+    const ins = axios.create(Object.assign(axiosConfig, config));
+
+    return ins;
+}
+
+export default {
+    components: {
+        Payment,
+    },
+    data() {
+        return {
+            payVisible: false, // 支付弹窗显示状态
+            payMode: 'alipay', // 默认支付方式
+            productId: 1,
+            count: 1,
+            productDesc: 'VIP会员 - 年度套餐',
+        };
+    },
+    methods: {
+        // 打开支付弹窗(支付宝)
+        openPayDialog() {
+            this.payMode = 'alipay';
+            this.payVisible = true;
+        },
+
+        // 打开支付弹窗(微信)
+        openWepayDialog() {
+            this.payMode = 'wepay';
+            this.payVisible = true;
+        },
+
+        // API请求函数 - 适配你的项目
+        async handleApiRequest(url, method, data) {
+            try {
+                console.log(`API请求: ${method} ${url}`, data);
+                const response = await $http()[method.toLowerCase()](url, method === 'GET' ? { params: data } : data);
+                return response.data.data;
+            } catch (error) {
+                throw error;
+            }
+        },
+
+        // 支付完成
+        onPaymentDone(data) {
+            console.log('支付成功:', data);
+            this.$message?.success('支付成功！');
+            // 弹窗会自动关闭并刷新页面
+        },
+
+        // 取消支付
+        onPaymentCancel() {
+            console.log('用户取消支付');
+        },
+
+        // 错误处理
+        onError({ step, error }) {
+            console.error(`${step} 失败:`, error);
+            this.$message?.error(error.message || '操作失败');
+        },
+    },
+};
+</script>
+
+<style scoped>
+.demo {
+    max-width: 800px;
+    margin: 40px auto;
+    padding: 20px;
+    text-align: center;
+}
+
+h1 {
+    margin-bottom: 40px;
+}
+</style>

package/src/locale/en-us/index.js

@@ -0,0 +1,39 @@
+export default {
+    payment: {
+        title: 'Payment Center',
+        loading: 'Processing order...',
+        loadingCreate: 'Creating order...',
+        loadingQrcode: 'Generating QR code...',
+        loadingOrder: 'Processing order...',
+        success: 'Payment Successful!',
+        successDesc: 'Order completed, thank you for your purchase',
+
+        // Payment methods
+        alipay: 'Alipay',
+        alipayTip: 'Huabei installment supported',
+        wepay: 'WeChat Pay',
+        wepayTip: 'Credit card supported',
+
+        // Price
+        currency: 'CNY',
+
+        // Tips
+        pcAlipay: 'Mobile device not available? Use ',
+        pcAlipayLink: 'PC version Alipay',
+        pcAlipaySuffix: ' to pay.',
+        expireTip: '(Expires in 20 minutes, please click [Payment Completed] after payment)',
+        warningTitle: 'Order not paid or expired',
+
+        // Buttons
+        cancel: 'Cancel',
+        completed: 'Payment Completed',
+
+        // Error messages
+        invalidOrder: 'Invalid order number',
+        createOrderFailed: 'Failed to create order',
+        orderTimeout: 'Order processing timeout',
+        orderFailed: 'Order processing failed',
+        getQrcodeFailed: 'Failed to get payment QR code',
+        paymentTimeout: 'Payment timeout',
+    }
+};

package/src/locale/index.js

@@ -0,0 +1,31 @@
+import { createI18n } from "vue-i18n";
+
+const getLocale = () => {
+    const _val = localStorage.getItem('lang');
+    if (!_val) {
+        return navigator.language;
+    } else {
+        return _val;
+    }
+}
+
+// 1. Ready translated locale messages
+// The structure of the locale message is the hierarchical object structure with each locale as the top property
+import enUs from "./en-us";
+import zhCn from "./zh-cn";
+const lang = {
+    "en-US": enUs,
+    "zh-CN": zhCn,
+};
+
+// 2. Create i18n instance with options
+const i18n = createI18n({
+    locale: getLocale(), // set locale
+    fallbackLocale: "zh-CN", // set fallback locale
+    messages: lang, // set locale messages
+    // If you need to specify other options, you can set other options
+    // ...
+    warnHtmlInMessage: "off",
+});
+
+export { i18n };

package/src/locale/zh-cn/index.js

@@ -0,0 +1,39 @@
+export default {
+    payment: {
+        title: '支付中心',
+        loading: '正在处理订单...',
+        loadingCreate: '正在创建订单...',
+        loadingQrcode: '正在生成二维码...',
+        loadingOrder: '正在处理订单...',
+        success: '支付成功！',
+        successDesc: '订单已完成,感谢您的购买',
+
+        // 支付方式
+        alipay: '支付宝支付',
+        alipayTip: '支持花呗分期',
+        wepay: '微信支付',
+        wepayTip: '支持信用卡',
+
+        // 价格
+        currency: '元',
+
+        // 提示
+        pcAlipay: '手机不在身边？使用',
+        pcAlipayLink: '电脑版支付宝',
+        pcAlipaySuffix: '支付。',
+        expireTip: '（20分钟过期，请在支付完成后点击【已完成支付】）',
+        warningTitle: '订单尚未支付或已过期',
+
+        // 按钮
+        cancel: '取消',
+        completed: '已完成支付',
+
+        // 错误提示
+        invalidOrder: '无效订单号',
+        createOrderFailed: '创建订单失败',
+        orderTimeout: '订单处理超时',
+        orderFailed: '订单处理失败',
+        getQrcodeFailed: '获取支付二维码失败',
+        paymentTimeout: '支付超时',
+    }
+};

package/src/main.js

@@ -0,0 +1,18 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+const app = createApp(App);
+
+import { i18n } from "./locale";
+app.use(i18n);
+
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+app.use(ElementPlus);
+
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component);
+}
+
+app.mount('#app')

package/vite.config.js

@@ -0,0 +1,29 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vitePluginRequire from "vite-plugin-require";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [vue(), vitePluginRequire.default()],
+    server: {
+        proxy: {
+            '/api': {
+                target: 'https://pay.dpying.com',
+                changeOrigin: true,
+                secure: false,
+                // 不需要 rewrite,保持完整路径
+            }
+        }
+    },
+    css: {
+        preprocessorOptions: {
+            less: {
+                additionalData: `
+                    @import "./node_modules/csslab/base.less";
+                    @import "./node_modules/csslab/reset.less";
+                    @import "./src/assets/css/var.less";
+                `,
+            },
+        },
+    },
+});