From f1354bf39e5875ac9eca78c8406b25a1acea2a83 Mon Sep 17 00:00:00 2001
From: yurj26 <1816387074@qq.com>
Date: Tue, 11 Jul 2023 10:50:38 +0800
Subject: [PATCH] feat(component): add picker-view

---
 pages.json                                    |  6 ++
 .../component/picker-view/picker-view.test.js | 58 ++++++++++++
 pages/component/picker-view/picker-view.uvue  | 92 +++++++++++++++++++
 pages/tabBar/component.uvue                   |  3 +-
 4 files changed, 157 insertions(+), 2 deletions(-)
 create mode 100644 pages/component/picker-view/picker-view.test.js
 create mode 100644 pages/component/picker-view/picker-view.uvue

diff --git a/pages.json b/pages.json
index c2afa584..1cc5043e 100644
--- a/pages.json
+++ b/pages.json
@@ -68,6 +68,12 @@
         "navigationBarTitleText": "slider"
       }
     },
+    {
+      "path": "pages/component/picker-view/picker-view",
+      "style": {
+        "navigationBarTitleText": "picker-view"
+      }
+    },
     {
       "path": "pages/component/slider-100/slider-100",
       "style": {
diff --git a/pages/component/picker-view/picker-view.test.js b/pages/component/picker-view/picker-view.test.js
new file mode 100644
index 00000000..0f860c6b
--- /dev/null
+++ b/pages/component/picker-view/picker-view.test.js
@@ -0,0 +1,58 @@
+function getData(key = '') {
+    return new Promise(async (resolve, reject) => {
+        const data = await page.data()
+        resolve(key ? data[key] : data)
+    })
+}
+
+let page
+beforeAll(async () => {
+    page = await program.reLaunch('/pages/component/picker-view/picker-view')
+    await page.waitFor(1000)
+})
+
+describe('PickerView.uvue', () => {
+    it('value', async () => {
+        const el = await page.$('.picker-view')
+        await page.callMethod('setValue')
+        await page.waitFor(1000)
+        expect(await el.property('value')).toEqual([0, 0, 0])
+        expect(await getData('result')).toEqual([0, 0, 0])
+
+        await page.callMethod('setValue1')
+        await page.waitFor(1000)
+        expect(await el.property('value')).toEqual([10, 10, 10])
+        expect(await getData('result')).toEqual([10, 10, 10])
+    })
+
+    it('length', async () => {
+        const els = await page.$$('.picker-view')
+        expect(els.length).toBe(1)
+        const els1 = await page.$$('.picker-view-column')
+        expect(els1.length).toBe(3)
+    })
+    it('indicator-style', async () => {
+        const el = await page.$('.picker-view')
+        await page.setData({
+            indicatorStyle: 'height: 100px;'
+        })
+        await page.waitFor(500)
+        expect(await el.property('indicatorStyle')).toBe('height: 100px;')
+    })
+    it('mask-top-style', async () => {
+        const el = await page.$('.picker-view')
+        await page.setData({
+            maskTopStyle: 'background: #ffffff;'
+        })
+        await page.waitFor(500)
+        expect(await el.property('mask-top-style')).toBe('background: #ffffff;')
+    })
+    it('mask-bottom-style', async () => {
+        const el = await page.$('.picker-view')
+        await page.setData({
+            maskBottomStyle: 'background: #ffffff;'
+        })
+        await page.waitFor(500)
+        expect(await el.property('mask-bottom-style')).toBe('background: #ffffff;')
+    })
+})
\ No newline at end of file
diff --git a/pages/component/picker-view/picker-view.uvue b/pages/component/picker-view/picker-view.uvue
new file mode 100644
index 00000000..2ec05202
--- /dev/null
+++ b/pages/component/picker-view/picker-view.uvue
@@ -0,0 +1,92 @@
+<template>
+    <view>
+        <page-head :title="title"></page-head>
+        <view class="uni-padding-wrap">
+            <view class="uni-title">
+                日期：{{year}}年{{month}}月{{day}}日
+            </view>
+        </view>
+        <picker-view class="picker-view" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
+            :mask-top-style="maskTopStyle" :mask-bottom-style="maskBottomStyle">
+            <picker-view-column class="picker-view-column">
+                <view class="item" v-for="(item,index) in years" :key="index"><text class="text">{{item}}年</text></view>
+            </picker-view-column>
+            <picker-view-column class="picker-view-column">
+                <view class="item" v-for="(item,index) in months" :key="index"><text class="text">{{item}}月</text>
+                </view>
+            </picker-view-column>
+            <picker-view-column class="picker-view-column">
+                <view class="item" v-for="(item,index) in days" :key="index"><text class="text">{{item}}日</text></view>
+            </picker-view-column>
+        </picker-view>
+    </view>
+</template>
+
+<script lang="ts">
+    const date = new Date()
+    const _years : number[] = []
+    const _year = date.getFullYear()
+    const _months : number[] = []
+    const _month : number = date.getMonth() + 1
+    const _days : number[] = []
+    const _day = date.getDate()
+    for (let i = 2000; i <= _year; i++) {
+        _years.push(i)
+    }
+    for (let i = 1; i <= 12; i++) {
+        _months.push(i)
+    }
+    for (let i = 1; i <= 31; i++) {
+        _days.push(i)
+    }
+    export default {
+        data() {
+            return {
+                title: 'picker-view',
+                years: _years as number[],
+                year: _year as number,
+                months: _months as number[],
+                month: _month as number,
+                days: _days as number[],
+                day: _day as number,
+                value: [_year - 2000, _month - 1, _day - 1] as number[],
+                result: [] as number[],
+                indicatorStyle: 'height: 50px;',
+                maskTopStyle: '',
+                maskBottomStyle: ''
+            }
+        },
+        methods: {
+            bindChange(e : PickerViewChangeEvent) {
+                const val = e.detail.value
+                this.result = val
+                this.year = this.years[val[0]]
+                this.month = this.months[val[1]]
+                this.day = this.days[val[2]]
+            },
+            setValue() {
+                this.value = [0, 0, 0] as number[]
+            },
+            setValue1() {
+                this.value = [10, 10, 10] as number[]
+            },
+        }
+    }
+</script>
+
+<style>
+    .picker-view {
+        width: 100%;
+        height: 600rpx;
+        margin-top: 20rpx;
+    }
+
+    .item {
+        height: 50px;
+    }
+
+    .text {
+        line-height: 50px;
+        text-align: center;
+    }
+</style>
\ No newline at end of file
diff --git a/pages/tabBar/component.uvue b/pages/tabBar/component.uvue
index da0baaad..3143b709 100644
--- a/pages/tabBar/component.uvue
+++ b/pages/tabBar/component.uvue
@@ -115,8 +115,7 @@
                             name: 'picker',
                             enable: false */
                         }, {
-                            name: 'picker-view',
-                            enable: false
+                            name: 'picker-view'
                         }, {
                             name: 'radio',
                         }, {
-- 
GitLab