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

mini-program/pages/order/components/reason-sheet/index.js

@@ -0,0 +1,114 @@
+Component({
+  properties: {
+    show: Boolean,
+    title: String,
+    options: {
+      type: Object,
+      observer() {
+        this.init();
+      },
+    },
+    multiple: {
+      type: Boolean,
+      observer() {
+        this.init();
+      },
+    },
+    showConfirmButton: Boolean,
+    showCloseButton: Boolean,
+    confirmButtonText: {
+      type: String,
+      value: '确定',
+    },
+    cancelButtonText: {
+      type: String,
+      value: '取消',
+    },
+    emptyTip: {
+      type: String,
+      value: '请选择',
+    },
+  },
+
+  data: {
+    _options: [],
+    checkedIndexes: [],
+  },
+
+  methods: {
+    attached() {
+      this.toast = this.selectComponent('#t-toast');
+    },
+
+    init() {
+      const checkedIndexes = [];
+      const _options = this.properties.options.map((opt, i) => {
+        const checked = !!opt.checked;
+        if (checked) {
+          if (this.properties.multiple) checkedIndexes[0] = i;
+          else checkedIndexes.push(i);
+        }
+        return {
+          title: opt.title,
+          checked,
+        };
+      });
+      this.setData({ checkedIndexes, _options });
+    },
+
+    onOptionTap(e) {
+      const { index } = e.currentTarget.dataset;
+      const { checkedIndexes } = this.data;
+      let data = {};
+      if (this.properties.multiple) {
+        if (checkedIndexes.includes(index)) {
+          checkedIndexes.splice(index, 1);
+          data = { checkedIndexes, [`_options[${index}].checked`]: false };
+        } else {
+          checkedIndexes.push(index);
+          data = { checkedIndexes, [`_options[${index}].checked`]: true };
+        }
+      } else {
+        if (checkedIndexes[0] === index) {
+          // 单选不可取消选择
+          return;
+        }
+        data = {
+          [`_options[${index}].checked`]: true,
+          checkedIndexes: [index],
+        };
+        if (checkedIndexes[0] !== undefined) {
+          data[`_options[${checkedIndexes[0]}].checked`] = false;
+        }
+      }
+      this.setData(data);
+      this.triggerEvent('select', { index });
+      this._onOptionTap && this._onOptionTap(index);
+      if (!this.properties.showConfirmButton && !this.properties.multiple) {
+        // 没有确认按钮且是单选的情况下，选择选项则自动确定
+        this._onConfirm && this._onConfirm([index]);
+        this.setData({ show: false });
+      }
+    },
+
+    onCancel() {
+      this.triggerEvent('cancel');
+      this._onCancel && this._onCancel();
+      this.setData({ show: false });
+    },
+
+    onConfirm() {
+      if (this.data.checkedIndexes.length === 0) {
+        this.toast.show({
+          icon: '',
+          text: this.properties.emptyTip,
+        });
+        return;
+      }
+      const indexed = this.data.checkedIndexes;
+      this.triggerEvent('confirm', { indexed });
+      this._onConfirm && this._onConfirm(indexed);
+      this.setData({ show: false });
+    },
+  },
+});

mini-program/pages/order/components/reason-sheet/index.json

@@ -0,0 +1,10 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-popup": "tdesign-miniprogram/popup/popup",
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-button": "tdesign-miniprogram/button/button"
+  }
+}

mini-program/pages/order/components/reason-sheet/index.wxml

@@ -0,0 +1,50 @@
+<t-popup
+ visible="{{show}}"
+ placement="bottom"
+ bind:visible-change="onCancel"
+ close-btn="{{showCloseButton}}"
+>
+	<view class="popup-content">
+		<view class="header">
+			{{title}}
+		</view>
+		<view class="options">
+			<t-cell
+			 wx:for="{{_options}}"
+			 wx:key="title"
+			 t-class="cell"
+			 title="{{item.title}}"
+			 bindclick="onOptionTap"
+			 data-index="{{index}}"
+			 border="{{false}}"
+			>
+				<view slot="right-icon">
+					<t-icon
+					 name="check-circle-filled"
+					 size="36rpx"
+					 color="#fa4126"
+					 wx:if="{{item.checked}}"
+					/>
+					<t-icon
+					 name="circle"
+					 size="36rpx"
+					 color="#C7C7C7"
+					 wx:else
+					/>
+				</view>
+			</t-cell>
+		</view>
+		<view class="button-bar" wx:if="{{showConfirmButton}}">
+			<t-button
+			 class="btnWrapper"
+			 wx:if="{{showConfirmButton}}"
+			 t-class="btn"
+			 bindtap="onConfirm"
+			>
+				{{confirmButtonText}}
+			</t-button>
+		</view>
+	</view>
+</t-popup>
+<t-toast id="t-toast" />
+

mini-program/pages/order/components/reason-sheet/index.wxss

@@ -0,0 +1,47 @@
+page view {
+  box-sizing: border-box;
+}
+.popup-content {
+  background-color: white;
+  color: #222427;
+  border-radius: 20rpx 20rpx 0 0;
+  overflow: hidden;
+}
+.popup-content .header {
+  height: 100rpx;
+  line-height: 100rpx;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 32rpx;
+  font-weight: bold;
+  position: relative;
+}
+.popup-content .options {
+  max-height: 60vh;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+.popup-content .options .cell {
+  height: 100rpx;
+  align-items: center;
+  font-size: 30rpx;
+  color: #333333;
+}
+.popup-content .button-bar {
+  width: 100%;
+  padding: 20rpx 30rpx;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+}
+.popup-content .button-bar .btn {
+  width: 100%;
+  background: #fa4126;
+  color: #fff;
+  border-radius: 48rpx;
+}
+.button-bar .btnWrapper {
+  width: 100%;
+}

mini-program/pages/order/components/reason-sheet/reasonSheet.js

@@ -0,0 +1,25 @@
+function getInstance(context, selector = '#wr-reason-sheet') {
+  if (!context) {
+    const pages = getCurrentPages();
+    const page = pages[pages.length - 1];
+    context = page;
+  }
+  const instance = context && context.selectComponent(selector);
+  if (!instance) {
+    console.warn(`未找到reason-sheet组件,请检查selector是否正确`);
+    return null;
+  }
+  return instance;
+}
+
+export default function (options) {
+  const { context, selector, ..._options } = options;
+  return new Promise((resolve, reject) => {
+    const instance = getInstance(context, selector);
+    if (instance) {
+      instance.setData(Object.assign({}, _options));
+      instance._onCancel = () => reject();
+      instance._onConfirm = (indexes) => resolve(indexes);
+    }
+  });
+}