@zamlia/mini-ui 0.0.1

package/src/components/industry/CitySelectModal/index.scss

@@ -0,0 +1,122 @@
+// 样式基础文件（变量和 mixin）已通过 Taro 配置自动注入，无需手动导入
+.we-select-city {
+  .nut-overlay {
+    z-index: 2001;
+  }
+
+  &__wrapper {
+    padding-bottom: 50px;
+    box-sizing: border-box;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    background: #ffffff;
+  }
+
+  // &__content {}
+
+  &__title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 34px;
+    padding-inline: 20px;
+    box-sizing: border-box;
+    font-size: 48px;
+    color: #303030;
+
+    &__back {
+      margin-right: 20px;
+    }
+  }
+
+  &__search {
+    padding: 0 40px 0 50px;
+    box-sizing: border-box;
+    margin: 0 auto 48px;
+    display: flex;
+    align-items: center;
+    width: 670px;
+    height: 74px;
+    background: #F5F5F5;
+    border-radius: 37px;
+
+    .nut-input {
+      padding-left: 12px;
+      background: transparent;
+    }
+
+    &-icon {
+      width: 31px;
+      height: 31px;
+    }
+
+    &-btn {
+      width: 74px;
+      height: 74px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 26px;
+      color: $primary-color;
+    }
+  }
+
+  &__hot {
+    margin-bottom: 30px;
+
+    &-title {
+      margin-bottom: 30px;
+      padding-inline: 20px;
+      box-sizing: border-box;
+      font-size: 34px;
+      color: #303030;
+    }
+
+    &-list {
+      margin: 0 auto;
+      width: 690px;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+
+      &-item {
+        margin-bottom: 18px;
+        margin-right: 20px;
+        height: 68px;
+        text-align: center;
+        line-height: 68px;
+        background: #F5F5F5;
+        border-radius: 10px;
+        font-size: 28px;
+        border-radius: 10px;
+        @include text-ellipsis(calc(690px / 4 - 10px * 3))
+      }
+
+      &-item:nth-child(4n) {
+        margin-right: 0;
+      }
+    }
+  }
+
+  &__list {
+    height: calc(100vh - 250px);
+    overflow-y: scroll;
+
+    &-item {
+      padding-left: 10px;
+      box-sizing: border-box;
+      margin: 0 auto;
+      display: flex;
+      align-items: center;
+      width: 690px;
+      height: 86px;
+      font-size: 28px;
+      border-radius: 10px;
+      border-bottom: 1px solid #f7f4f4;
+    }
+
+    &-item:nth-last-child(1) {
+      border-bottom: none;
+    }
+  }
+}

package/src/components/industry/CitySelectModal/index.tsx

@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import { View } from '@tarojs/components';
+import { Input, Overlay } from '@nutui/nutui-react-taro';
+import { ArrowLeft, Search } from '@nutui/icons-react-taro';
+import DICT_CITY from '@utils/city';
+import { Utils } from '@utils';
+import Taro from '@tarojs/taro';
+import './index.scss';
+
+export type CitySelectModalProps = {
+  visible: boolean
+  onChange: (city: CityData) => void
+  onClose: () => void
+};
+
+export type CityData = { id: string; value: string; }
+
+const hotCity = [
+  { id: "510100", value: "成都" },
+  { id: "310000", value: "上海" },
+  { id: "320500", value: "苏州" },
+  { id: "440300", value: "深圳" },
+  { id: "110100", value: "北京" }
+]
+
+const CitySelectModal: React.FC<CitySelectModalProps> = (props) => {
+  const {
+    visible,
+    onChange,
+    onClose
+  } = props;
+  const [list, setList] = useState<CityData[]>(DICT_CITY);
+  const [keyword, setKeyword] = useState<string>('');
+
+  const itemRender = (data: CityData) => {
+    return (
+      <View
+        className='we-select-city__list-item'
+        key={data?.id}
+        onClick={() => handleClick(data)}
+      >
+        {data?.value}
+      </View>
+    )
+  }
+
+  const handleConfirm = () => {
+    if (!keyword) setList(DICT_CITY)
+    const filter = DICT_CITY?.filter(it => it?.value?.indexOf(keyword) !== -1)
+
+    setList(filter)
+  }
+
+  /**
+   * 选择中
+   * @param {CityData}data
+   */
+  const handleClick = async (data: CityData) => {
+    Taro.showLoading({ title: '选择中...' })
+    await Utils.delay()
+
+    Taro.hideLoading({
+      complete: () => {
+        onChange(data)
+        onClose()
+      }
+    })
+  }
+
+  return (
+    <View className='we-select-city'>
+      <Overlay visible={visible} onClick={() => { }}>
+        <View className='we-select-city__wrapper'>
+          <View className='we-select-city__content'>
+            <View className='we-select-city__title' onClick={onClose}>
+              <View className='we-select-city__title-back'>
+                <ArrowLeft />
+              </View>
+              选择城市
+            </View>
+            <View className='we-select-city__search'>
+              <View className="we-select-city__search-icon">
+                <Search />
+              </View>
+              <Input
+                placeholder="请输入城市名称"
+                value={keyword}
+                onChange={(v) => setKeyword(v)}
+                onConfirm={handleConfirm}
+              />
+              <View className="we-select-city__search-btn" onClick={handleConfirm}>
+                搜索
+              </View>
+            </View>
+            <View className='we-select-city__list'>
+              <View className='we-select-city__hot'>
+                <View className='we-select-city__hot-title'>热门城市</View>
+                <View className='we-select-city__hot-list'>
+                  {
+                    hotCity?.map(it => (
+                      <View
+                        className='we-select-city__hot-list-item'
+                        onClick={() => handleClick(it)}
+                        key={it?.id}
+                      >
+                        {it?.value}
+                      </View>
+                    ))
+                  }
+                </View>
+              </View>
+              {list?.map(it => itemRender(it))}
+            </View>
+          </View>
+        </View>
+      </Overlay>
+    </View>
+  );
+};
+
+export default CitySelectModal;

package/src/components/industry/PaymentMethodSelect/index.scss

@@ -0,0 +1,146 @@
+.we-payment-method {
+  padding: 32px 32px 40px;
+  min-height: 400px;
+
+  &__item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 24px 0;
+    border-bottom: 1px solid #f5f5f5;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:active {
+      background-color: #fafafa;
+    }
+
+    &:last-of-type {
+      border-bottom: none;
+    }
+  }
+
+  &__item-left {
+    display: flex;
+    align-items: center;
+    flex: 1;
+  }
+
+  &__icon {
+    width: 64px;
+    height: 64px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 24px;
+    flex-shrink: 0;
+  }
+
+  &__icon-wechat {
+    background-color: #07c160;
+    position: relative;
+  }
+
+  &__icon-wechat-inner {
+    width: 40px;
+    height: 40px;
+    background-color: #fff;
+    border-radius: 6px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__icon-wechat-dot {
+    width: 6px;
+    height: 6px;
+    background-color: #07c160;
+    border-radius: 50%;
+    position: absolute;
+
+    &:first-child {
+      top: 8px;
+      left: 8px;
+    }
+
+    &:last-child {
+      bottom: 8px;
+      right: 8px;
+    }
+  }
+
+  &__icon-alipay {
+    background-color: #1677ff;
+  }
+
+  &__icon-alipay-text {
+    color: #fff;
+    font-size: 36px;
+    font-weight: 600;
+  }
+
+  &__name {
+    font-size: 32px;
+    color: #333;
+    font-weight: 400;
+  }
+
+  &__check {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 2px solid #d9d9d9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition: all 0.2s;
+  }
+
+  &__check-selected {
+    background-color: #1677ff;
+    border-color: #1677ff;
+  }
+
+  &__check-icon {
+    width: 20px;
+    height: 20px;
+    position: relative;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      background-color: #fff;
+      border-radius: 2px;
+    }
+
+    &::before {
+      width: 2px;
+      height: 10px;
+      left: 6px;
+      top: 2px;
+      transform: rotate(45deg);
+    }
+
+    &::after {
+      width: 2px;
+      height: 6px;
+      right: 6px;
+      top: 6px;
+      transform: rotate(-45deg);
+    }
+  }
+
+  &__footer {
+    margin-top: 40px;
+    padding-top: 32px;
+    border-top: 1px solid #f5f5f5;
+  }
+
+  &__confirm-btn {
+    width: 100%;
+  }
+}

package/src/components/industry/PaymentMethodSelect/index.tsx

@@ -0,0 +1,316 @@
+import React, { useState, useEffect } from 'react'
+import { View, Text } from '@tarojs/components'
+import BottomPopup from '@components/common/BottomPopup'
+import { prefixClass, prefixElement } from '@config/classPrefix'
+import classNames from 'classnames'
+import { Button } from '@nutui/nutui-react-taro'
+import './index.scss'
+
+export type PaymentMethod = 'WECHAT' | 'ALIPAY'
+
+export interface PaymentMethodSelectProps {
+  /**
+   * 实例 ID，用于区分多个实例
+   */
+  id: string
+  /**
+   * 默认选中的支付方式
+   * @default 'wechat'
+   */
+  defaultMethod?: PaymentMethod
+  /**
+   * 确认按钮文本
+   * @default '确认支付'
+   */
+  confirmText?: string
+}
+
+interface PaymentMethodSelectInstance {
+  id: string
+  visible: boolean
+  selectedMethod: PaymentMethod
+  resolvePromise: ((value: PaymentMethod | null) => void) | null
+  defaultMethod: PaymentMethod
+  confirmText: string
+}
+
+// 全局实例管理器
+const instances = new Map<string, PaymentMethodSelectInstance>()
+
+// 更新通知回调 Map
+const updateCallbacks = new Map<string, (() => void)>()
+
+/**
+ * 通知指定实例的组件更新
+ */
+const notifyUpdate = (id: string) => {
+  const callback = updateCallbacks.get(id)
+  if (callback) {
+    callback()
+  }
+}
+
+// 支付方式配置
+const paymentMethods: Array<{
+  key: PaymentMethod
+  name: string
+}> = [
+  {
+    key: 'WECHAT',
+    name: '微信支付',
+  },
+  {
+    key: 'ALIPAY',
+    name: '支付宝支付',
+  },
+]
+
+// 内部组件实现
+const PaymentMethodSelectComponent: React.FC<PaymentMethodSelectProps> = (props) => {
+  const { id, defaultMethod = 'WECHAT', confirmText = '确认支付' } = props
+
+  // 初始化实例
+  useEffect(() => {
+    if (!instances.has(id)) {
+      instances.set(id, {
+        id,
+        visible: false,
+        selectedMethod: defaultMethod,
+        resolvePromise: null,
+        defaultMethod,
+        confirmText,
+      })
+    } else {
+      // 更新配置
+      const instance = instances.get(id)!
+      instance.defaultMethod = defaultMethod
+      instance.confirmText = confirmText
+    }
+  }, [id, defaultMethod, confirmText])
+
+  // 监听全局状态变化
+  const [instance, setInstance] = useState<PaymentMethodSelectInstance | null>(
+    instances.get(id) || null
+  )
+
+  useEffect(() => {
+    // 注册更新回调
+    const callback = () => {
+      const currentInstance = instances.get(id)
+      if (currentInstance) {
+        setInstance({ ...currentInstance })
+      }
+    }
+    updateCallbacks.set(id, callback)
+
+    return () => {
+      updateCallbacks.delete(id)
+    }
+  }, [id])
+
+  // 如果实例不存在，返回 null
+  if (!instance) {
+    return null
+  }
+
+  const { visible, selectedMethod } = instance
+
+  // 选择支付方式
+  const handleSelectMethod = (method: PaymentMethod) => {
+    const currentInstance = instances.get(id)
+    if (currentInstance) {
+      currentInstance.selectedMethod = method
+      notifyUpdate(id)
+    }
+  }
+
+  // 确认支付
+  const handleConfirm = () => {
+    const currentInstance = instances.get(id)
+    if (currentInstance && currentInstance.resolvePromise) {
+      currentInstance.resolvePromise(currentInstance.selectedMethod)
+      currentInstance.resolvePromise = null
+      currentInstance.visible = false
+      notifyUpdate(id)
+    }
+  }
+
+  // 关闭弹窗时的处理
+  const handleClose = () => {
+    const currentInstance = instances.get(id)
+    if (currentInstance) {
+      if (currentInstance.resolvePromise) {
+        currentInstance.resolvePromise(null)
+        currentInstance.resolvePromise = null
+      }
+      currentInstance.visible = false
+      notifyUpdate(id)
+    }
+  }
+
+  return (
+    <BottomPopup
+      title="选择支付方式"
+      showClose
+      maskClose
+      visible={visible}
+      onClose={handleClose}
+    >
+      <View className={prefixClass('payment-method')}>
+        {paymentMethods.map((method) => (
+          <View
+            key={method.key}
+            className={classNames(
+              prefixElement('payment-method', 'item'),
+              {
+                [prefixElement('payment-method', 'item-selected')]: selectedMethod === method.key,
+              }
+            )}
+            onClick={() => handleSelectMethod(method.key)}
+          >
+            <View className={prefixElement('payment-method', 'item-left')}>
+              <View
+                className={classNames(
+                  prefixElement('payment-method', 'icon'),
+                  prefixElement('payment-method', `icon-${method.key}`)
+                )}
+              >
+                {method.key === 'WECHAT' && (
+                  <View className={prefixElement('payment-method', 'icon-wechat-inner')}>
+                    <View className={prefixElement('payment-method', 'icon-wechat-dot')} />
+                    <View className={prefixElement('payment-method', 'icon-wechat-dot')} />
+                  </View>
+                )}
+                {method.key === 'ALIPAY' && (
+                  <Text className={prefixElement('payment-method', 'icon-alipay-text')}>支</Text>
+                )}
+              </View>
+              <Text className={prefixElement('payment-method', 'name')}>
+                {method.name}
+              </Text>
+            </View>
+            <View
+              className={classNames(
+                prefixElement('payment-method', 'check'),
+                {
+                  [prefixElement('payment-method', 'check-selected')]: selectedMethod === method.key,
+                }
+              )}
+            >
+              {selectedMethod === method.key && (
+                <View className={prefixElement('payment-method', 'check-icon')} />
+              )}
+            </View>
+          </View>
+        ))}
+
+        <View className={prefixElement('payment-method', 'footer')}>
+          <Button
+            type="primary"
+            size="large"
+            onClick={handleConfirm}
+            className={prefixElement('payment-method', 'confirm-btn')}
+          >
+            {confirmText}
+          </Button>
+        </View>
+      </View>
+    </BottomPopup>
+  )
+}
+
+// 创建组件，包含静态方法
+const PaymentMethodSelect = PaymentMethodSelectComponent as typeof PaymentMethodSelectComponent & {
+  /**
+   * 打开支付方式选择弹窗（静态方法）
+   * 
+   * @param id 实例 ID，需要在页面中先渲染 <PaymentMethodSelect id={id} />
+   * @param options 可选配置
+   * @returns Promise<PaymentMethod | null> 返回选择的支付方式，取消时返回 null
+   * 
+   * @example
+   * ```tsx
+   * // 在页面中渲染组件
+   * <PaymentMethodSelect id="payment" />
+   * 
+   * // 然后调用静态方法
+   * const method = await PaymentMethodSelect.open('payment')
+   * if (method) {
+   *   console.log('选择的支付方式:', method) // 'wechat' | 'alipay'
+   * } else {
+   *   console.log('用户取消了选择')
+   * }
+   * ```
+   */
+  open: (id: string, options?: { defaultMethod?: PaymentMethod; confirmText?: string }) => Promise<PaymentMethod | null>
+  
+  /**
+   * 关闭支付方式选择弹窗（静态方法）
+   * 
+   * @param id 实例 ID
+   * 
+   * @example
+   * ```tsx
+   * PaymentMethodSelect.close('payment')
+   * ```
+   */
+  close: (id: string) => void
+}
+
+/**
+ * 添加静态方法
+ * @param id 
+ * @param options 
+ * @returns 
+ */
+PaymentMethodSelect.open = (id: string, options?: { defaultMethod?: PaymentMethod; confirmText?: string }): Promise<PaymentMethod | null> => {
+  let instance = instances.get(id)
+  
+  if (!instance) {
+    // 如果实例不存在，创建新实例
+    instance = {
+      id,
+      visible: false,
+      selectedMethod: options?.defaultMethod || 'WECHAT',
+      resolvePromise: null,
+      defaultMethod: options?.defaultMethod || 'WECHAT',
+      confirmText: options?.confirmText || '确认支付',
+    }
+    instances.set(id, instance)
+    console.warn(`PaymentMethodSelect: 实例 ${id} 不存在，已自动创建。建议在页面中先渲染 <PaymentMethodSelect id="${id}" />`)
+  }
+
+  // 更新配置
+  if (options) {
+    if (options.defaultMethod !== undefined) {
+      instance.defaultMethod = options.defaultMethod
+      instance.selectedMethod = options.defaultMethod
+    }
+    if (options.confirmText !== undefined) {
+      instance.confirmText = options.confirmText
+    }
+  }
+
+  return new Promise<PaymentMethod | null>((resolve) => {
+    instance!.resolvePromise = resolve
+    instance!.visible = true
+    instance!.selectedMethod = instance!.defaultMethod
+    notifyUpdate(id)
+  })
+}
+
+PaymentMethodSelect.close = (id: string) => {
+  const instance = instances.get(id)
+  if (instance) {
+    if (instance.resolvePromise) {
+      instance.resolvePromise(null)
+      instance.resolvePromise = null
+    }
+      instance.visible = false
+      notifyUpdate(id)
+  }
+}
+
+PaymentMethodSelectComponent.displayName = 'PaymentMethodSelect'
+
+export default PaymentMethodSelect

package/src/components/industry/index.ts

@@ -0,0 +1,5 @@
+export { default as PaymentMethodSelect } from './PaymentMethodSelect'
+export { default as CitySelectButton } from './CitySelectButton';
+
+export type { PaymentMethodSelectProps, PaymentMethod } from './PaymentMethodSelect'
+export type { CitySelectButtonProps } from './CitySelectButton'