通过微信开发者工具 商城模板 创建新小程序

mini-program/pages/usercenter/components/ui-select-picker/index.js

@@ -0,0 +1,73 @@
+Component({
+  properties: {
+    show: {
+      type: Boolean,
+      observer(show) {
+        if (!show) return;
+        this.updateDivisions();
+      },
+    },
+    title: {
+      type: String,
+      value: '',
+    },
+    value: {
+      type: String,
+      value: '',
+      observer() {
+        if (!this.data.show) return;
+        this.updateDivisions();
+      },
+    },
+    pickerOptions: {
+      type: Array,
+      value: [],
+      observer() {
+        if (!this.data.show) return;
+        this.updateDivisions();
+      },
+    },
+    headerVisible: {
+      type: Boolean,
+      value: true,
+    },
+  },
+  data: {
+    pickerValue: [],
+  },
+  methods: {
+    updateDivisions() {
+      const { pickerOptions, value } = this.data;
+      const index = (pickerOptions || []).findIndex(
+        (item) => item.code === value,
+      );
+
+      setTimeout(() => {
+        this.setData({ pickerValue: index >= 0 ? [index] : [0] });
+      }, 0);
+    },
+
+    getAreaByIndex(indexes) {
+      const { pickerOptions } = this.data;
+      return pickerOptions[indexes.toString()];
+    },
+
+    onChange(e) {
+      const currentValue = e.detail.value;
+      const target = this.getAreaByIndex(currentValue);
+      if (target === null) return;
+
+      this.setData({ pickerValue: currentValue });
+      this.triggerEvent('change', { value: target.code, target: target });
+    },
+
+    onConfirm() {
+      const target = this.getAreaByIndex(this.data.pickerValue);
+      this.triggerEvent('confirm', { value: target?.code, target });
+    },
+
+    onClose() {
+      this.triggerEvent('close');
+    },
+  },
+});

mini-program/pages/usercenter/components/ui-select-picker/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-popup": "tdesign-miniprogram/popup/popup"
+  }
+}

mini-program/pages/usercenter/components/ui-select-picker/index.wxml

@@ -0,0 +1,21 @@
+<t-popup visible="{{show}}" placement="bottom">
+  <view class="city-picker-box" slot="content">
+    <view wx:if="{{headerVisible}}" class="city-picker-header city-picker-more">
+      <view class="btn" hover-class="btn__active" catch:tap="onClose">取消</view>
+      <view wx:if="{{title}}" class="title">{{title}}</view>
+      <view class="btn primary" hover-class="btn__active" catch:tap="onConfirm">确定</view>
+    </view>
+    <view wx:else class="city-picker-header">
+      <view wx:if="{{title}}" class="title">{{title}}</view>
+    </view>
+    <picker-view class="picker" indicator-class="picker-center-row" value="{{pickerValue}}" bind:change="onChange">
+      <picker-view-column class="picker-column">
+        <view wx:for="{{ pickerOptions }}" wx:key="code">{{ item.name }}</view>
+      </picker-view-column>
+    </picker-view>
+    <view class="city-picker-footer" wx:if="{{!headerVisible}}">
+      <view class="btn" hover-class="btn__active" catch:tap="onClose">取消</view>
+      <view class="btn primary" hover-class="btn__active" catch:tap="onConfirm">确定</view>
+    </view>
+  </view>
+</t-popup>

mini-program/pages/usercenter/components/ui-select-picker/index.wxss

@@ -0,0 +1,102 @@
+.city-picker-container {
+  opacity: 0;
+  position: fixed;
+  top: 100vh;
+  left: 0;
+  right: 0;
+  height: 100vh;
+  z-index: 100;
+}
+.city-picker-container.show {
+  top: 0;
+  opacity: 1;
+}
+.city-picker-container.show .city-picker-box {
+  bottom: 0;
+}
+.city-picker-shadow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.65);
+}
+.city-picker-header {
+  height: 100rpx;
+  line-height: 100rpx;
+  text-align: center;
+  font-size: 32rpx;
+  color: #333333;
+}
+.city-picker-more {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.city-picker-footer {
+  height: 100rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.city-picker-footer .btn {
+  width: 330rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  text-align: center;
+  color: #666666;
+  font-size: 32rpx;
+  position: relative;
+}
+.city-picker-footer .btn__active {
+  opacity: 0.5;
+}
+.city-picker-footer .btn::after {
+  display: block;
+  content: ' ';
+  position: absolute;
+  left: -50%;
+  right: -50%;
+  top: -50%;
+  bottom: -50%;
+  transform: scale(0.5);
+  border: 1rpx solid #999999;
+  border-radius: 16rpx;
+}
+.city-picker-footer .btn.primary {
+  color: #fa550f;
+}
+.city-picker-footer .btn.primary::after {
+  border-color: #fa550f;
+}
+.picker-column:not(:first-child) {
+  margin-left: 40rpx;
+}
+.city-picker-box {
+  position: absolute;
+  bottom: -100%;
+  transition: 0.3s bottom ease-in-out;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background-color: #fff;
+  padding: 0 30rpx;
+  color: #333333;
+  font-size: 34rpx;
+  border-radius: 20rpx 20rpx 0 0;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.show .city-picker-shadow {
+  display: block;
+}
+.picker {
+  height: 300rpx;
+  margin: 50rpx 0;
+  line-height: 88rpx;
+  text-align: center;
+}
+/* 似乎小程序picker-view的bug，indicator-class仅height生效，其他诸如line-height、text-align等放到父class中设置 */
+.picker-center-row {
+  height: 88rpx;
+}