页面切图

2023-03-09 13:50:45 +08:00
parent 43419da4c7
commit b5892b275f
16 changed files with 282 additions and 29 deletions
--- a/pages/home/service.vue
+++ b/pages/home/service.vue
@@ -0,0 +1,105 @@
+<template>
+    <Cn-page :loading='loading'>
+        <view slot='body'>
+            <view class='index'>
+                <!-- 客服页面 显示微信和电话 -->
+                <view class="content">
+                    <view class="content-item">
+                        <view class="content-item-left">
+                            <image src="/static/phone.png" style="height: 40rpx;width: 40rpx" />
+                        </view>
+                        <view class="content-item-right">
+                            <view class="content-item-right-title">电话</view>
+                            <view class="content-item-right-des">10086</view>
+                        </view>
+                        <view class="content-item-operation" @click="call">拨打</view>
+                    </view>
+                    <view class="content-item mt60">
+                        <view class="content-item-left">
+                            <image src="/static/wechat.png" style="height: 40rpx;width: 40rpx" />
+                        </view>
+                        <view class="content-item-right">
+                            <view class="content-item-right-title">微信</view>
+                            <view class="content-item-right-des">10086</view>
+                        </view>
+                        <view class="content-item-operation" @click="copy">复制</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </Cn-page>
+</template>
+<script>
+export default {
+    data () {
+        return {
+            loading: false
+        }
+    },
+    methods: {
+        call () {
+            uni.makePhoneCall({
+                phoneNumber: '10086'
+            })
+        },
+        copy () {
+            uni.setClipboardData({
+                data: '10086',
+                success: () => {
+                    this.$util.toast('复制成功')
+                }
+            })
+        }
+    }
+}
+</script>
+<style lang='scss'>
+.index {
+    padding: 34rpx;
+
+    .content {
+        margin-bottom: 20rpx;
+        padding: 34rpx;
+        background: $uni-theme-white;
+        border-radius: 12rpx;
+
+        .content-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .content-item-left {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 80rpx;
+                height: 80rpx;
+                border-radius: 12rpx;
+            }
+
+            .content-item-right {
+                flex: 1;
+                margin-left: 20rpx;
+
+                .content-item-right-title {
+                    font-size: 32rpx;
+                    margin-bottom: 10rpx;
+                }
+
+                .content-item-right-des {
+                    font-size: 28rpx;
+                }
+            }
+
+            .content-item-operation {
+                padding: 8rpx 20rpx;
+                margin-left: 20rpx;
+                font-size: 24rpx;
+                color: #fff;
+                background: $uni-theme-blue;
+                border-radius: 4rpx;
+            }
+        }
+    }
+}
+</style>