### VK-Pay Quick Installation

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/vk-pay-introduction.md

Steps to quickly install and set up the VK-Pay plugin, including dependency installation and configuration.

```APIDOC
## VK-Pay Plugin - Quick Installation

### 1. Installation Steps

1. Purchase and install the `vk-uni-pay` plugin from the plugin market.
2. Introduce public module dependencies in cloud functions: `uni-config-center`, `vk-uni-pay`.
3. Configure the payment parameters file: `uniCloud/cloudfunctions/common/uni-config-center/uni-pay/config.js`.
4. Copy the cloud function code from the example project to `uniCloud/cloudfunctions/vk-pay/service/`.
5. Upload the public module `vk-uni-pay` and the cloud function `vk-pay`.

### 2. Configure uni-id Mini Program Parameters

```json
// cloudfunctions/common/uni-config-center/uni-id/config.json
{
  "mp-weixin": {
    "oauth": {
      "weixin": {
        "appid": "WeChat Mini Program AppID",
        "appsecret": "WeChat Mini Program Secret"
      }
    }
  },
  "mp-alipay": {
    "oauth": {
      "alipay": {
        "appid": "Alipay Mini Program AppID", 
        "privateKey": "Alipay Mini Program Private Key"
      }
    }
  }
}
```

### 3. Security Reminder

**In the production environment, the following test files must be deleted:**
- `vk-pay/service/pay/refund.js` - Refund interface
- `vk-pay/service/pay/transfer.js` - Transfer interface

Refund and transfer functions should be implemented in business cloud functions with strict permission verification.
```

--------------------------------

### Basic Upload Example

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/admin-upload-examples.md

This example demonstrates the basic usage of the vk-data-upload component for uploading files.

```APIDOC
## Basic Upload Example

### Description
This example demonstrates the basic usage of the vk-data-upload component for uploading files.

### Method
Not applicable (Vue component example)

### Endpoint
Not applicable

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
`v-model`: The bound file list (Array).
`limit`: Maximum number of files allowed (Number, default: 9).

### Request Example
```vue
<template>
  <view class="page">
    <vk-data-page-header
      title="Upload 上传"
      subTitle="基础用法"
    ></vk-data-page-header>
    <view class="page-body">
      <vk-data-upload
        v-model="form1.images"
        :limit="6"
      ></vk-data-upload>
    </view>

    <el-button @click="clearImages">清空值</el-button>
    <el-button @click="setImages">设置值</el-button>

    <view class="tips mt15">
      <view class="mt15 json-view" v-if="form1">
        <view style="font-size: 14px;">表单数据</view>
        <pre>
          {{ form1 }}
        </pre>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form1: {
        images: []
      }
    }
  },
  methods: {
    clearImages() {
      this.form1.images = []
    },
    setImages() {
      this.form1.images = [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg'
      ]
    }
  }
}
</script>
```

### Response
#### Success Response (200)
Not applicable (Vue component example)

#### Response Example
Not applicable
```

--------------------------------

### Drag Upload Example

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/admin-upload-examples.md

This example shows how to implement drag-and-drop file uploading using the vk-data-upload component.

```APIDOC
## Drag Upload Example

### Description
This example shows how to implement drag-and-drop file uploading using the vk-data-upload component.

### Method
Not applicable (Vue component example)

### Endpoint
Not applicable

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
`v-model`: The bound file list (Array).
`limit`: Maximum number of files allowed (Number, default: 9).
`drag`: Enables drag upload functionality (Boolean, default: false).
`multiple`: Allows multiple file selection (Boolean, default: false).
`accept`: Specifies accepted file types (String, e.g., '.jpg,.jpeg,.png').
`auto-upload`: Automatically uploads files upon selection (Boolean, default: true).
`show-file-list`: Displays the list of uploaded files (Boolean, default: true).

### Request Example
```vue
<template>
  <view class="page">
    <vk-data-page-header
      title="Upload 上传"
      subTitle="拖拽上传"
    ></vk-data-page-header>
    <view class="page-body">
      <vk-data-upload
        v-model="form1.files"
        :limit="10"
        drag
        multiple
        accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx"
        :auto-upload="true"
        :show-file-list="true"
      >
        <div class="upload-drag-area">
          <i class="el-icon-upload"></i>
          <div class="upload-text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="upload-tip">支持jpg、png、pdf等格式，单个文件不超过10MB</div>
        </div>
      </vk-data-upload>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form1: {
        files: []
      }
    }
  }
}
</script>

<style scoped>
.upload-drag-area {
  padding: 40px;
  text-align: center;
  border: 2px dashed #dcdfe6;
  border-radius: 6px;
  background-color: #f5f7fa;
}

.upload-drag-area .el-icon-upload {
  font-size: 48px;
  color: #c0c4cc;
  margin-bottom: 16px;
}

.upload-text {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.upload-text em {
  color: #409eff;
  font-style: normal;
}

.upload-tip {
  font-size: 12px;
  color: #909399;
}
</style>
```

### Response
#### Success Response (200)
Not applicable (Vue component example)

#### Response Example
Not applicable
```

--------------------------------

### File Upload Example

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/admin-upload-examples.md

Shows how to set up the vk-data-upload component for general file uploads, specifying accepted document types.

```APIDOC
## File Upload Example

### Description
Shows how to set up the vk-data-upload component for general file uploads, specifying accepted document types.

### Method
Not applicable (Vue component example)

### Endpoint
`action`: The URL for file uploads (e.g., `/api/upload/file`).

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
`v-model`: The bound file list (Array).
`action`: The URL to upload files to (String, default: '').
`limit`: Maximum number of files allowed (Number, default: 9).
`accept`: Accepted file types, e.g., `.doc,.docx,.pdf` (String, default: '').
`show-file-list`: Displays the list of uploaded files (Boolean, default: true).
`multiple`: Allows multiple file selection (Boolean, default: false).

### Request Example
```vue
<vk-data-upload
  v-model="form.documents"
  action="/api/upload/file"
  :limit="5"
  accept=".doc,.docx,.pdf,.xls,.xlsx"
  :show-file-list="true"
  :multiple="true"
>
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="upload-tip">支持doc、docx、pdf、xls、xlsx格式</div>
</vk-data-upload>
```

### Response
#### Success Response (200)
Not applicable (Vue component example)

#### Response Example
Not applicable
```

--------------------------------

### Image Upload Example

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/admin-upload-examples.md

Demonstrates how to configure the vk-data-upload component for image uploads, including specifying accepted image types and list type.

```APIDOC
## Image Upload Example

### Description
Demonstrates how to configure the vk-data-upload component for image uploads, including specifying accepted image types and list type.

### Method
Not applicable (Vue component example)

### Endpoint
`action`: The URL for image uploads (e.g., `/api/upload/image`).

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
`v-model`: The bound file list (Array).
`action`: The URL to upload images to (String, default: '').
`limit`: Maximum number of images allowed (Number, default: 9).
`accept`: Accepted file types, typically `image/*` for images (String, default: '').
`list-type`: The display style for the file list, `picture-card` is common for images (String, default: 'text').
`multiple`: Allows multiple image selection (Boolean, default: false).

### Request Example
```vue
<vk-data-upload
  v-model="form.images"
  action="/api/upload/image"
  :limit="6"
  accept="image/*"
  list-type="picture-card"
  :multiple="true"
>
  <i class="el-icon-plus"></i>
</vk-data-upload>
```

### Response
#### Success Response (200)
Not applicable (Vue component example)

#### Response Example
Not applicable
```

--------------------------------

### Custom Upload Handling Example

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/admin-upload-examples.md

Demonstrates how to manually handle file uploads using the `auto-upload` property and custom event handlers.

```APIDOC
## Custom Upload Handling Example

### Description
Demonstrates how to manually handle file uploads using the `auto-upload` property and custom event handlers.

### Method
Not applicable (Vue component example)

### Endpoint
Not applicable

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
`v-model`: The bound file list (Array).
`auto-upload`: Set to `false` to disable automatic uploading (Boolean, default: true).
`multiple`: Allows multiple file selection (Boolean, default: false).
`show-file-list`: Displays the list of uploaded files (Boolean, default: true).

### Request Example
```vue
<vk-data-upload
  v-model="form.files"
  :auto-upload="false"
  :multiple="true"
  :show-file-list="true"
  @change="handleFileChange"
>
  <el-button size="small" type="primary">选择文件</el-button>
</vk-data-upload>

<el-button 
  v-if="form.files.length > 0"
  @click="uploadFiles"
  type="success"
>
  开始上传
</el-button>
```

### Response
#### Success Response (200)
Not applicable (Vue component example)

#### Response Example
Not applicable
```

--------------------------------

### Basic Dialog Example

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/admin-dialog-examples.md

Demonstrates the basic usage of the vk-data-dialog component, including how to open and close it, set a title, and handle confirm/cancel events. It shows a simple dialog with custom content.

```Vue
<template>
  <view class="page">
    <vk-data-page-header title="Dialog 弹窗" subTitle="基础弹窗"></vk-data-page-header>
    <view class="page-body">
      <el-button @click="dialogVisible = true">打开弹窗</el-button>
      
      <vk-data-dialog
        v-model="dialogVisible"
        title="基础弹窗标题"
        width="500px"
        @confirm="handleConfirm"
        @cancel="handleCancel"
      >
        <p>这是弹窗内容区域</p>
        <p>可以放置任何自定义内容</p>
      </vk-data-dialog>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    handleConfirm() {
      console.log('确认按钮点击')
      this.dialogVisible = false
    },
    handleCancel() {
      console.log('取消按钮点击')
      this.dialogVisible = false
    }
  }
}
</script>
```

--------------------------------

### VK Upload Basic Usage Example

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/admin-upload-examples.md

Demonstrates the basic usage of the vk-data-upload component for uploading images. It shows how to bind the uploaded files to a model, set the upload limit, and provides buttons to clear and set the uploaded file list programmatically. This example uses Vue.js.

```vue
<template>
  <view class="page">
    <vk-data-page-header
      title="Upload 上传"
      subTitle="基础用法"
    ></vk-data-page-header>
    <view class="page-body">
      <vk-data-upload
        v-model="form1.images"
        :limit="6"
      ></vk-data-upload>
    </view>

    <el-button @click="clearImages">清空值</el-button>
    <el-button @click="setImages">设置值</el-button>

    <view class="tips mt15">
      <view class="mt15 json-view" v-if="form1">
        <view style="font-size: 14px;">表单数据</view>
        <pre>
          {{ form1 }}
        </pre>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form1: {
        images: []
      }
    }
  },
  methods: {
    clearImages() {
      this.form1.images = []
    },
    setImages() {
      this.form1.images = [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg'
      ]
    }
  }
}
</script>
```

--------------------------------

### Role and Permission Checking Examples (JavaScript)

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/cloud-permission-system.md

Provides examples of checking user roles and permissions using VK Unicloud's `vk.userCenter` methods. Demonstrates how to check for a specific role, any of multiple permissions, or all of a set of permissions. Assumes `uid` and `vk` are available in the scope.

```javascript
// 检查用户是否有特定角色
let hasRole = await vk.userCenter.hasRole({
  uid,
  role: 'admin'
});

// 检查用户是否有多个权限中的任意一个
let hasAnyPermission = await vk.userCenter.hasAnyPermission({
  uid,
  permissions: ['user-view', 'user-manage']
});

// 检查用户是否有所有指定权限
let hasAllPermissions = await vk.userCenter.hasAllPermissions({
  uid,
  permissions: ['user-view', 'user-edit']
});
```

--------------------------------

### Element UI Icon Example (Vue)

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/admin-icons-examples.md

Demonstrates how to use Element UI icons within a Vue component. It shows the basic structure for displaying an icon and setting its properties.

```vue
<template>
  <el-icon>
    <Edit />
  </el-icon>
</template>

<script setup>
import { Edit } from '@element-plus/icons-vue'
</script>

```

--------------------------------

### Multiple File Types Upload Example

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/admin-upload-examples.md

Configures the vk-data-upload component to accept a variety of file types, including images, PDFs, documents, and archives.

```APIDOC
## Multiple File Types Upload Example

### Description
Configures the vk-data-upload component to accept a variety of file types, including images, PDFs, documents, and archives.

### Method
Not applicable (Vue component example)

### Endpoint
`action`: The URL for file uploads (e.g., `/api/upload/any`).

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
`v-model`: The bound file list (Array).
`action`: The URL to upload files to (String, default: '').
`limit`: Maximum number of files allowed (Number, default: 9).
`accept`: Comma-separated list of accepted file types (String, e.g., `image/*,.pdf,.doc`).
`multiple`: Allows multiple file selection (Boolean, default: false).
`show-file-list`: Displays the list of uploaded files (Boolean, default: true).

### Request Example
```vue
<vk-data-upload
  v-model="form.attachments"
  action="/api/upload/any"
  :limit="10"
  accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.zip,.rar"
  :multiple="true"
  :show-file-list="true"
>
  <el-button size="small" type="primary">选择文件</el-button>
</vk-data-upload>
```

### Response
#### Success Response (200)
Not applicable (Vue component example)

#### Response Example
Not applicable
```

--------------------------------

### Table Dialog Example

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/admin-dialog-examples.md

Demonstrates embedding a data table within a dialog using vk-data-dialog and vk-data-table. This example shows how to display tabular data within a modal window, including configuration for columns and pagination.

```Vue
<template>
  <view class="page">
    <vk-data-page-header title="Dialog 弹窗" subTitle="表格弹窗"></vk-data-page-header>
    <view class="page-body">
      <el-button @click="dialogVisible = true">打开表格弹窗</el-button>
      
      <vk-data-dialog
        v-model="dialogVisible"
        title="表格弹窗"
        width="800px"
        height="600px"
      >
        <vk-data-table
          :data="tableData"
          :columns="tableColumns"
          :pagination="true"
        ></vk-data-table>
      </vk-data-dialog>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [
        { id: 1, name: "张三", age: 25, city: "北京" },
        { id: 2, name: "李四", age: 30, city: "上海" },
        { id: 3, name: "王五", age: 28, city: "广州" }
      ],
      tableColumns: [
        { key: "id", title: "ID", width: 100 },
        { key: "name", title: "姓名", width: 150 },
        { key: "age", title: "年龄", width: 100 },
        { key: "city", title: "城市", width: 150 }
      ]
    }
  }
}
</script>
```

--------------------------------

### Form Dialog Example

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/admin-dialog-examples.md

Illustrates how to integrate a form within a dialog using vk-data-dialog and vk-data-form. It showcases setting up form fields, validation rules, and handling form submission success within the dialog context.

```Vue
<template>
  <view class="page">
    <vk-data-page-header title="Form 表单" subTitle="弹窗表单"></vk-data-page-header>
    <view class="page-body">
      <el-button @click="form1.props.show = true">弹出表单</el-button>

      <vk-data-dialog
        v-model="form1.props.show"
        title="表单标题"
        width="600px"
        mode="form"
      >
        <vk-data-form
          ref="form1"
          v-model="form1.data"
          :action="form1.props.action"
          :columns="form1.props.columns"
          :rules="form1.props.rules"
          :form-type="form1.props.formType"
          :loading.sync="form1.props.loading"
          :auto-close="true"
          label-width="140px"
          @success="onFormSuccess"
        ></vk-data-form>
      </vk-data-dialog>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form1: {
        data: {
          text: "",
          number: null,
          radio: 1,
          checkbox: [1,2]
        },
        props: {
          action: "template/test/sys/test",
          columns: [
            { key: "text", title: "text类型字段", type: "text" },
            { key: "number", title: "number类型字段", type: "number" },
            { key: "radio", title: "radio类型字段", type: "radio",
              data: [
                { value: 1, label: "选项1" },
                { value: 2, label: "选项2" }
              ]
            },
            { key: "checkbox", title: "checkbox类型字段", type: "checkbox",
              data: [
                { value: 1, label: "选项1" },
                { value: 2, label: "选项2" }
              ]
            }
          ],
          rules: {
            text: [
              { required: true, message: "text不能为空", trigger: "change" }
            ]
          },
          formType: "",
          loading: false,
          show: false
        }
      }
    }
  },
  methods: {
    onFormSuccess() {
      console.log("表单提交成功")
    }
  }
}
</script>
```

--------------------------------

### VK Upload Drag-and-Drop Example

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/admin-upload-examples.md

Showcases the vk-data-upload component configured for drag-and-drop file uploads. It allows multiple file selections, specifies accepted file types, automatically uploads files, and displays the file list. This example is built using Vue.js and includes custom styling for the drag-and-drop area.

```vue
<template>
  <view class="page">
    <vk-data-page-header
      title="Upload 上传"
      subTitle="拖拽上传"
    ></vk-data-page-header>
    <view class="page-body">
      <vk-data-upload
        v-model="form1.files"
        :limit="10"
        drag
        multiple
        accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx"
        :auto-upload="true"
        :show-file-list="true"
      >
        <div class="upload-drag-area">
          <i class="el-icon-upload"></i>
          <div class="upload-text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="upload-tip">支持jpg、png、pdf等格式，单个文件不超过10MB</div>
        </div>
      </vk-data-upload>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form1: {
        files: []
      }
    }
  }
}
</script>

<style scoped>
.upload-drag-area {
  padding: 40px;
  text-align: center;
  border: 2px dashed #dcdfe6;
  border-radius: 6px;
  background-color: #f5f7fa;
}

.upload-drag-area .el-icon-upload {
  font-size: 48px;
  color: #c0c4cc;
  margin-bottom: 16px;
}

.upload-text {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.upload-text em {
  color: #409eff;
  font-style: normal;
}

.upload-tip {
  font-size: 12px;
  color: #909399;
}
</style>
```

--------------------------------

### Customizing Element UI Icon Styles with CSS

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/admin-icons-examples.md

Provides CSS examples for customizing the appearance of Element UI icons, including changing color, font size, applying hover effects, and styling for disabled states. These styles can be applied using custom CSS classes.

```css
/* 自定义图标颜色和大小 */
.custom-icon {
  color: #409EFF;
  font-size: 24px;
}

/* 悬停效果 */
.icon-hover:hover {
  color: #67C23A;
  transform: scale(1.1);
}

/* 禁用状态 */
.icon-disabled {
  color: #C0C4CC;
  cursor: not-allowed;
}
```

--------------------------------

### VK Upload Document Upload Configuration

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/admin-upload-examples.md

Sets up the vk-data-upload component for document uploads. It allows multiple file selections, specifies the upload action URL, sets a limit of 5 files, and accepts common document formats like .doc, .docx, .pdf, .xls, and .xlsx. The file list is displayed, and a tip indicating accepted formats is provided. This example uses Vue.js.

```vue
<vk-data-upload
  v-model="form.documents"
  action="/api/upload/file"
  :limit="5"
  accept=".doc,.docx,.pdf,.xls,.xlsx"
  :show-file-list="true"
  :multiple="true"
>
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="upload-tip">支持doc、docx、pdf、xls、xlsx格式</div>
</vk-data-upload>
```

--------------------------------

### JavaScript 临时缓存云函数

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/cloud-function-test-basic.md

演示了如何使用 Redis 临时缓存数据。该云函数支持设置（`setex`）和获取（`get`）缓存，并允许指定缓存的生存时间（TTL）。适用于需要临时存储和检索数据的场景。

```javascript
module.exports = {
  /**
   * 临时缓存测试
   * @url template/test/pub/temporaryCache 前端调用的url参数地址
   * data 极速版调用时，userInfo和uid可能为空
   * res 返回参数说明
   * @params {Number} code 错误码，极速版调用时，userInfo和uid可能为空
   * @params {String} msg 详细信息
   */
  main: async (event) => {
    let { data = {}, userInfo, util, originalParam } = event;
    let { uniID, config, pubFun, vk , db, _ } = util;
   极速版调用时，userInfo和uid可能为空
    let res = { code : 0, msg : '极速版调用时，userInfo和uid可能为空' };
    // 业务逻辑开始----------------------------------------------------------- 
    let { key, value, ttl = 300 } = data;
    
    if (key && value) {
      // 设置缓存
      await vk.redis.setex(key, ttl, JSON.stringify(value));
      res.msg = '缓存设置成功';
    } else if (key) {
      // 获取缓存
      const cachedValue = await vk.redis.get(key);
      if (cachedValue) {
        res.value = JSON.parse(cachedValue);
        res.msg = '缓存获取成功';
      } else {
        res.msg = '缓存不存在';
      }
    } else {
      return { code: -1, msg: '参数key不能为空' };
    }
    
    // 业务逻辑结束-----------------------------------------------------------
    return res;
  }
}
```

--------------------------------

### vk-data-detail Component Basic Usage (Vue)

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/admin-detail-examples.md

Shows a basic example of using the vk-data-detail component in Vue.js to display user information. It demonstrates passing data and column configurations to the component.

```vue
<vk-data-detail
  :data="userInfo"
  :columns="userColumns"
  label-width="120px"
></vk-data-detail>
```

--------------------------------

### Vue Drawer Component Example

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/admin-element-examples.md

Demonstrates the implementation of a drawer component in Vue.js using Element UI. It covers opening the drawer from the right and handling the closing confirmation.

```vue
<template>
  <view class="page-body">
    <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
      打开抽屉
    </el-button>

    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleDrawerClose"
    >
      <span>我来啦!</span>
    </el-drawer>
  </view>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      direction: 'rtl'
    }
  },
  methods: {
    handleDrawerClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>
```

--------------------------------

### Vue Dialog Component Example

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/admin-element-examples.md

Illustrates the usage of a basic dialog component in Vue.js using Element UI. It shows how to open and close a dialog, along with handling confirmation before closing.

```vue
<template>
  <view class="page-body">
    <el-button @click="dialogVisible = true">打开弹窗</el-button>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>
```

--------------------------------

### Get User Information

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/cloud-object-development.md

Illustrates the use of `this.getUserInfo()` to fetch details of the currently logged-in user within a Cloud Object. The example logs the retrieved user information to the console.

```javascript
module.exports = {
  getUserData: async function() {
    let userInfo = await this.getUserInfo();
    console.log('用户信息:', userInfo);
    return userInfo;
  }
}
```

--------------------------------

### Create and Execute Payment

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/vk-pay-callback-frontend.md

This section demonstrates how to create a payment order and then execute the payment using the VK Pay SDK. It includes steps for showing loading indicators, calling the backend to create the payment, and handling the payment response.

```APIDOC
## POST /pay/createPayment and VKPay.pay

### Description
This process involves two main steps: first, creating a payment order on the server-side by calling `pay/createPayment`, and second, initiating the actual payment using the `vkPay.pay` method with the information received from the server.

### Method
POST

### Endpoint
`pay/createPayment` for order creation, followed by `vkPay.pay` for execution.

### Parameters
#### Request Body (for `pay/createPayment`)
- **provider** (string) - Required - The payment provider (e.g., 'wxpay').
- **out_trade_no** (string) - Required - A unique identifier for the transaction.
- **total_fee** (number) - Required - The total amount for the transaction in the smallest currency unit.
- **subject** (string) - Required - The description of the goods or service.
- **type** (string) - Required - The type of transaction (e.g., 'goods').
- **custom** (object) - Optional - Custom data to be associated with the transaction.
  - **user_id** (string) - Required - The ID of the user making the payment.
  - **goods_id** (string) - Required - The ID of the goods being purchased.
  - **quantity** (number) - Required - The quantity of the goods.

#### Request Body (for `vkPay.pay`)
- **provider** (string) - Required - The payment provider obtained from the `createPayment` response.
- **orderInfo** (object) - Required - The payment order information obtained from the `createPayment` response.

### Request Example
```javascript
// Importing the SDK
import vkPay from '@/uni_modules/vk-uni-pay/js_sdk/vk-pay.js';

// Inside a method, e.g., handlePay()

// Create Payment Order
let paymentRes = await vk.callFunction({
  url: 'pay/createPayment',
  data: {
    provider: 'wxpay',
    out_trade_no: 'ORDER_' + Date.now(),
    total_fee: 100,
    subject: 'Test Product',
    type: 'goods',
    custom: {
      user_id: this.userInfo._id,
      goods_id: this.goodsId,
      quantity: 1
    }
  }
});

// Execute Payment
if (paymentRes.code === 0) {
  let payRes = await vkPay.pay({
    provider: paymentRes.provider,
    orderInfo: paymentRes.orderInfo
  });
  // Handle payRes
}
```

### Response
#### Success Response (200)
- **code** (number) - 0 for success.
- **message** (string) - Success message.
- **provider** (string) - The payment provider used.
- **orderInfo** (object) - Details required to initiate the payment.

#### Response Example (for `createPayment`)
```json
{
  "code": 0,
  "message": "Order created successfully",
  "provider": "wxpay",
  "orderInfo": { ... }
}
```

#### Success Response (for `vkPay.pay`)
- **code** (number) - 0 for success.
- **msg** (string) - Success message.

#### Response Example (for `vkPay.pay`)
```json
{
  "code": 0,
  "msg": "Payment successful"
}
```

### Error Handling
- If `paymentRes.code` is not 0, an error occurred during order creation. Handle `paymentRes.msg`.
- If `payRes.code` is not 0, an error occurred during payment execution. Handle `payRes.msg`.
```

--------------------------------

### Ensure Data Consistency with Transactions

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/cloud-function-db-api.md

Shows how to use database transactions to guarantee data consistency across multiple operations. It includes an example of starting a transaction, performing operations (add, update), committing, or rolling back in case of errors.

```javascript
// 使用事务保证数据一致性
const transaction = await db.startTransaction();
try {
  // 执行多个数据库操作
  await transaction.collection('order').add(orderData);
  await transaction.collection('inventory').update(inventoryData);
  
  await transaction.commit();
  res.code = 0;
  res.msg = '操作成功';
} catch (error) {
  await transaction.rollback();
  res.code = -1;
  res.msg = '操作失败: ' + error.message;
}
```

--------------------------------

### 使用 Context7 检索文档

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/README.md

提供了使用 Context7 工具在 VK Unicloud 项目中进行文档检索的命令行示例。该命令允许用户通过关键词搜索相关文档。

```bash
context7 search "你的搜索关键词"
```

--------------------------------

### 标准云函数模板

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/cloud-function-development.md

这是一个标准的云函数模板，包含主函数 `main`。它演示了如何接收前端参数，进行业务逻辑处理，并与数据库进行交互。适用于大多数云函数的基本功能实现。

```javascript
'use strict';
/**
 * 云函数模板
 * @url 模块名/接口名 前端调用的url参数地址
 * @description 接口描述
 * @param {String} param1 参数1说明
 * @param {Object} param2 参数2说明
 */
module.exports = {
  /**
   * 主函数
   * @param {Object} event 前端传来的参数
   */
  main: async (event) => {
    let { data = {}, userInfo, util, filterResponse, originalParam } = event;
    let { customUtil, uniID, config, pubFun, vk, db, _, $ } = util;
    let { uid } = data; // 注意：uid 从 data 中获取，不是从 userInfo 中
    let res = { code: 0, msg: '' };

    // 业务逻辑开始-----------------------------------------------------------

    // 参数获取
    let { param1, param2 } = data;

    // 参数验证
    if (!param1) {
      return { code: -1, msg: 'param1不能为空' };
    }

    try {
      // 数据库操作
      let dbRes = await vk.baseDao.select({
        dbName: "table-name",
        whereJson: { _id: param1 }
      });

      // 返回结果
      res.data = dbRes.rows;

    } catch (err) {
      res.code = -1;
      res.msg = err.message;
    }

    // 业务逻辑结束-----------------------------------------------------------

    return res;
  }
}
```

--------------------------------

### VK-Pay Plugin Introduction

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/vk-pay-introduction.md

Overview of VK-Pay plugin, its core features, and supported payment methods.

```APIDOC
## VK-Pay Plugin - Introduction

### Overview
VK-Pay (vk-uni-pay) is a universal payment plugin built for UniCloud, compatible with all UniCloud frameworks.

### Core Features
- **Multi-platform Support**: WeChat Pay, Alipay, Apple In-App Purchase, Douyin Pay, Huawei Pay, etc.
- **Multi-scenario Coverage**: Mini Program Pay, App Pay, H5 Pay, PC QR Code Pay, Official Account Pay.
- **High Integration**: Deeply integrated with VK-UniCloud frameworks for out-of-the-box usage.
- **Secure and Reliable**: Supports V2 and V3 versions with a complete certificate verification mechanism.
- **Flexible Configuration**: Supports multi-merchant mode, personal pay, virtual pay, etc.

### Supported Payment Methods

| Payment Method | Support Status | Description | Requirements |
|----------------|----------------|-------------|----------------|
| WeChat Mini Program Pay | ✅ | Payment within WeChat Mini Programs | WeChat Mini Program Pay |
| Alipay Mini Program Pay | ✅ | Payment within Alipay Mini Programs | Alipay JSAPI Pay |
| APP - WeChat Pay | ✅ | Initiate WeChat client payment in APP | WeChat APP Pay |
| APP - Alipay Pay | ✅ | Initiate Alipay client payment in APP | Alipay APP Pay |
| H5 Mobile - WeChat Pay | ✅ | Initiate WeChat client payment in H5 browser | WeChat Native Pay |
| H5 Mobile - Alipay Pay | ✅ | Initiate Alipay client payment in H5 browser | Alipay Face-to-Face Payment |
| PC QR Code Pay - WeChat | ✅ | Display QR code in PC browser for WeChat scan payment | WeChat Native Pay |
| PC QR Code Pay - Alipay | ✅ | Display QR code in PC browser for Alipay scan payment | Alipay Face-to-Face Payment |
| Official Account H5 - WeChat Pay | ✅ | Payment within WeChat Official Account H5 pages | WeChat JSAPI Pay |
| Transfer to Alipay Balance | ✅ | Withdrawals to user's Alipay balance (instant) | Transfer to Alipay Accounts |
| Transfer to WeChat Wallet | ✅ | Withdrawals to user's WeChat wallet (instant) | Merchant Transfer |
| iOS In-App Purchase | ✅ | In-app purchases within Apple App Store | Apple In-App Purchase |
| Personal Pay (VksPay) | ✅ | Personal payment interface without business license requirements | VksPay Personal Pay |
| WeChat Mini Program Virtual Pay | ✅ | WeChat Mini Program virtual payment for short video dramas | WeChat Mini Program Virtual Pay |
| Douyin Mini Program Pay | ✅ | Payment within Douyin Mini Programs | Douyin Pay |
| Payment Code Pay | ✅ | Merchant scans user's payment code for payment | Alipay Face-to-Face Payment, WeChat Payment Code Pay |
| Huawei Pay | ✅ | Huawei Pay within HarmonyOS ecosystem | Huawei Pay |
```

--------------------------------

### JavaScript 云对象基本模板

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/cloud-permission-system.md

定义了一个VK云对象的JavaScript模板，包含了云对象的生命周期方法（_before, _after）以及常用的请求处理函数（getInfo, getList）。该模板还展示了如何初始化VK实例、数据库引用以及使用数据库操作符。

```javascript
'use strict';
var vk; // 全局vk实例
// 涉及的表名
const dbName = {
  //test: "vk-test", // 测试表
};

var db = uniCloud.database(); // 全局数据库引用
var _ = db.command; // 数据库操作符
var $ = _.aggregate; // 聚合查询操作符

var cloudObject = {
  isCloudObject: true, // 标记为极速开发模式
  /**
   * 请求前处理，主要用于调用方法之前进行预处理，一般用于拦截器、统一的身份验证、参数校验、定义全局对象等。
   */
  _before: async function() {
    vk = this.vk; // 将vk定义为全局对象
    // let { customUtil, uniID, config, pubFun } = this.getUtil(); // 获取工具包
  },
  /**
   * 请求后处理，主要用于处理本次调用方法的返回结果或者抛出的错误
   */
  _after: async function(options) {
    let { err, res } = options;
    if (err) {
      return; // 如果方法抛出错误，直接return;不处理
    }
    return res;
  },
  /**
   * 模板函数
   * @url client/user.getInfo 前端调用的url参数地址
   */
  get极速开发: async function(data) {
    let { uid } = this.getClientInfo(); // 获取客户端信息
    let userInfo = await this.getUserInfo(); // 获取当前登录的用户极速开发
    let res = { code: 0, msg: '' };
    // 业务逻辑开始-----------------------------------------------------------
    console.log("请求参数", data);
    res.userInfo = userInfo; // 返回前端当前登录的用户信息

    // 业务逻辑结束-----------------------------------------------------------
    return res;
  },
  /**
   * 模板函数
   * @url client/user.getList 前端调用的url参数地址
   */
  getList: async function(data) {
    let { uid, filterResponse, originalParam } = this.getClientInfo(); // 获取客户端信息
    let res = { code: 0, msg: '' };
    // 业务逻辑开始-----------------------------------------------------------
    console.log("请求参数", data);

    // 业务逻辑结束-----------------------------------------------------------
    return res;
  }
};

module.exports = cloudObject;
```

--------------------------------

### VK Admin 表单文件上传配置

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/admin-form-examples.md

配置VK Admin表单中的图片上传、文件上传和素材库选择字段。文件上传可设置接受的文件类型和数量限制，素材库选择可指定文件类型和多选。

```javascript
{ key: "image", title: "图片上传", type: "image", limit: 6 }
{ key: "file", title: "文件上传", type: "file", limit: 6,
  accept: ".txt,.xls,.xlsx,.doc,.docx,.ppt,.pptx,.pdf" 
}
{ key: "fileSelect", title: "素材库选择", type: "file-select", 
  fileType: "image", multiple: true 
}
```

--------------------------------

### Scoped CSS for Style Isolation (CSS)

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/admin-element-examples.md

Provides an example of using the `scoped` attribute in Vue.js components to encapsulate CSS styles, preventing them from leaking into other components. Includes an example for general element styling and deep selectors.

```css
/* 使用scoped样式 */
<style scoped>
.el-button {
  margin-right: 10px;
}
</style>

/* 使用深度选择器 */
<style scoped>
::v-deep .el-dialog__body {
  padding: 20px;
}
</style>
```

--------------------------------

### VK Admin 表单文本字段配置

Source: https://github.com/382444017/vk-unicloud-docs/blob/master/admin-form-examples.md

配置VK Admin表单中的单行文本和多行文本字段。多行文本支持自动调整大小、最大长度限制和字数限制显示。

```javascript
{ key: "text", title: "单行文本", type: "text" }
{ key: "textarea", title: "多行文本", type: "textarea", 
  autosize: { minRows: 4, maxRows: 10 }, 
  maxlength: 200, 
  showWordLimit: true 
}
```