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

mini-program/pages/order/components/customer-service/index.js

@@ -0,0 +1,38 @@
+Component({
+  externalClasses: ['wr-class'],
+
+  properties: {
+    phoneNumber: String,
+    desc: String,
+  },
+
+  data: {
+    show: false,
+  },
+
+  methods: {
+    onBtnTap() {
+      this.setData({
+        show: true,
+      });
+    },
+
+    onDialogClose() {
+      this.setData({
+        show: false,
+      });
+    },
+
+    onCall() {
+      const { phoneNumber } = this.properties;
+      wx.makePhoneCall({
+        phoneNumber,
+      });
+    },
+    onCallOnlineService() {
+      wx.showToast({
+        title: '你点击了在线客服',
+      });
+    },
+  },
+});

mini-program/pages/order/components/customer-service/index.json

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

mini-program/pages/order/components/customer-service/index.wxml

@@ -0,0 +1,23 @@
+<!-- 联系客服按钮 -->
+<view class="wr-class customer-service text-btn" hover-class="text-btn--active" bindtap="onBtnTap">联系客服</view>
+<!-- 联系客服弹框 -->
+<t-popup visible="{{show}}" placement="bottom" bind:visible-change="onDialogClose">
+	<view class="dialog--customer-service">
+		<view class="content" wx:if="{{desc}}">
+			<view class="title">服务时间:</view>
+			<text class="subtitle">{{desc}}</text>
+		</view>
+		<view class="options">
+			<view
+			  class="option main"
+			  hover-class="text-btn--active"
+			  wx:if="{{phoneNumber}}"
+			  bindtap="onCall"
+			>呼叫 {{phoneNumber}}
+			</view>
+			<view class="option main online" hover-class="text-btn--active" bindtap="onCallOnlineService">在线客服</view>
+			<view class="option" hover-class="text-btn--active" bindtap="onDialogClose">取消</view>
+		</view>
+	</view>
+</t-popup>
+

mini-program/pages/order/components/customer-service/index.wxss

@@ -0,0 +1,48 @@
+.text-btn {
+  display: inline;
+  color: #333;
+  font-size: 24rpx;
+}
+.text-btn--active {
+  opacity: 0.5;
+}
+.dialog--customer-service {
+  background-color: #f3f4f5;
+  overflow: hidden;
+}
+.dialog--customer-service .content {
+  font-size: 26rpx;
+  margin: 32rpx 30rpx;
+  text-align: center;
+}
+.dialog--customer-service .content .title {
+  display: inline;
+  color: #999999;
+  font-weight: bold;
+}
+.dialog--customer-service .content .subtitle {
+  display: inline;
+  color: #999999;
+}
+.dialog--customer-service .options .option {
+  color: #333333;
+  font-size: 30rpx;
+  text-align: center;
+  height: 100rpx;
+  line-height: 100rpx;
+  background-color: white;
+}
+.dialog--customer-service .options .option:not(:last-child) {
+  margin-bottom: 20rpx;
+}
+.dialog--customer-service .options .option--active {
+  opacity: 0.5;
+}
+.dialog--customer-service .options .option.main {
+  color: #333;
+}
+.dialog--customer-service .options .option.online {
+  position: relative;
+  top: -17rpx;
+  margin-bottom: 2rpx;
+}