From c981511db7617bee6243beab06d33411cfd3de35 Mon Sep 17 00:00:00 2001
From: chenkun <3289431190@qq.com>
Date: Sat, 12 Oct 2024 01:22:08 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9D=99=E6=80=81=E9=A1=B5=E9=9D=A2=20?=
 =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83/=E8=81=94=E7=B3=BB?=
 =?UTF-8?q?=E6=88=91=E4=BB=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/config/customerServicePopup.vue | 159 +++++++++++++++++++++++++++++
 pages/index/center2.vue                    |  33 ++++--
 pages_order/tradingPlatform/nowOrder.vue   |  15 +--
 static/image/center/12.svg                 |   1 +
 static/image/center/13.svg                 |   1 +
 5 files changed, 193 insertions(+), 16 deletions(-)
 create mode 100644 components/config/customerServicePopup.vue
 create mode 100644 static/image/center/12.svg
 create mode 100644 static/image/center/13.svg

diff --git a/components/config/customerServicePopup.vue b/components/config/customerServicePopup.vue
new file mode 100644
index 0000000..cababbf
--- /dev/null
+++ b/components/config/customerServicePopup.vue
@@ -0,0 +1,159 @@
+<template>
+	<!-- 联系客服弹框 -->
+	<uv-overlay :show="show" @click="close">
+		<view class="warp">
+			<view class="rect" @tap.stop>
+				<view class="title">联系客服</view>
+				<view class="center">确定拨打客服电话?</view>
+				<view class="bottom">
+					<view>
+						<uv-button type="info" shape="circle" text="取消" :custom-style="customStyle1"
+							@click="close"></uv-button>
+					</view>
+					<view>
+						<uv-button type="info" shape="circle" text="确定" :custom-style="customStyle2"
+							@click="confirm"></uv-button>
+					</view>
+				</view>
+			</view>
+		</view>
+	</uv-overlay>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show: false,
+				phone:'',
+			}
+		},
+
+		computed: {
+			customStyle1() {
+				return {
+					height: '60rpx',
+					background: '#FFF',
+					color: '#000000',
+					fontSize: '36rpx',
+					borderRadius: '40rpx', //圆角
+
+					// nvue中必须是下方的写法
+					'border-top-right-radius': '40rpx',
+					'border-bottom-left-radius': '40rpx',
+					'border-bottom-right-radius': '40rpx',
+					'width': '150rpx',
+				}
+			},
+			customStyle2() {
+				return {
+					height: '60rpx',
+					background: '#1f1c39',
+					color: '#FFF',
+					fontSize: '34px',
+					borderRadius: '40rpx', //圆角
+					// nvue中必须是下方的写法
+					'border-top-right-radius': '40rpx',
+					'border-bottom-left-radius': '40rpx',
+					'border-bottom-right-radius': '40rpx',
+					'width': '150rpx',
+				}
+			}
+		},
+		mounted() {
+			this.getCustomPhone()
+		},
+		methods: {
+			getCustomPhone(){
+				this.$api('customUser', {}, res => {
+					this.phone = res.result.phone
+				})
+			},
+			open() {
+				this.show = true
+			},
+			close() {
+				this.show = false
+			},
+			// 拨打电话
+			confirm() {
+				this.show = false
+				let phone = this.phone; // 需要拨打的电话号码
+				// console.log('拨打电话', phone)
+				const res = uni.getSystemInfoSync();
+				// ios系统默认有个模态框
+				if (res.platform == 'ios') {
+					uni.makePhoneCall({
+						phoneNumber: phone,
+						success() {
+							console.log('ios拨打成功');
+						},
+						fail() {
+							console.log('ios拨打失败');
+						}
+					})
+				} else {
+					//安卓手机手动设置一个showActionSheet
+					uni.showActionSheet({
+						itemList: [phone, '呼叫'],
+						success: function(res) {
+							if (res.tapIndex == 1) {
+								uni.makePhoneCall({
+									phoneNumber: phone,
+									success() {
+										console.log('安卓拨打成功');
+									},
+									fail() {
+										console.log('安卓拨打失败');
+									}
+								})
+							}
+						}
+					})
+				}
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.warp {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+
+	}
+
+	.rect {
+		width: 600rpx;
+		height: 300rpx;
+		background-color: #fff;
+		border-radius: 20rpx;
+		overflow: hidden;
+
+		.title {
+			padding: 20rpx 0 10rpx 20rpx;
+			background-color: $uni-color;
+			color: #FFF;
+			text-align: left;
+			width: 100%;
+			height: 18%;
+			font-size: 36rpx;
+		}
+
+		.center {
+			height: 40%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 36rpx;
+		}
+
+		.bottom {
+			display: flex;
+			justify-content: center;
+			gap: 50rpx;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/index/center2.vue b/pages/index/center2.vue
index 837fe39..51b6d53 100644
--- a/pages/index/center2.vue
+++ b/pages/index/center2.vue
@@ -31,7 +31,7 @@
 
       <!--内容-->
       <view class="content">
-        <view class="item" v-for="(item, index) in list" :key="index">
+        <view class="item" v-for="(item, index) in list" :key="index" @click="tapItem(item, index)">
           <view class="key">
             <view class="img">
               <img :src="item.imgUrl" style="width: 100%; height: 100%;"/>
@@ -46,6 +46,8 @@
         </view>
       </view>
     </view>
+    <!-- 联系客服弹框 -->
+    <customerServicePopup ref="customerServicePopup" />
 
     <tabber select="3"/>
   </view>
@@ -53,27 +55,46 @@
 <script>
 import topbar from "@/components/base/topbar.vue";
 import tabber from "@/components/base/tabbar.vue";
+import customerServicePopup from "@/components/config/customerServicePopup.vue";
 
 export default {
   name: "center2",
-  components: {tabber, topbar},
+  components: {customerServicePopup, tabber, topbar},
   data() {
     return {
       list:[
-        {text: '联系客服', value: ">" , imgUrl: '/static/image/center/1.png'},
-        {text: '系统设置', value: ">" , imgUrl: '/static/image/center/1.png'},
-        {text: '关于我们', value: ">" , imgUrl: '/static/image/center/1.png'}
+        //   this.$t('pages.index.index.companyProfile')
+        { text: '联系客服', value: ">" , imgUrl: '/static/image/center/13.svg'},
+        {text: '系统设置', value: ">" , imgUrl: '/static/image/center/12.svg'},
+        {text: '关于我们', value: ">" , imgUrl: '/static/image/center/13.svg'}
       ]
     }
   },
-  methods: {},
+  methods: {
+    tapItem(item, index){
+      console.log(item, index,"item,index==========")
+      if (index === 0){
+        this.$refs.customerServicePopup.open()
+      }else if (index === 1){
+        console.log("系统设置")
+      }else if (index === 2){
+        console.log("关于我们")
+      }
+
+    }
+
+  },
 }
 </script>
 
 
 <style scoped lang="scss">
 .page {
+  background-color: #2e2e2e;
+  height: calc(100vh -  120rpx);
+
   .frame {
+    background-color: #2e2e2e;
     .head {
       display: flex;
       background-color: $uni-color;
diff --git a/pages_order/tradingPlatform/nowOrder.vue b/pages_order/tradingPlatform/nowOrder.vue
index ea6f983..62c7c7f 100644
--- a/pages_order/tradingPlatform/nowOrder.vue
+++ b/pages_order/tradingPlatform/nowOrder.vue
@@ -106,6 +106,8 @@
       </view>
     </view>
 
+    <!-- 联系客服弹框 -->
+    <customerServicePopup ref="customerServicePopup" />
   </view>
 </template>
 
@@ -114,10 +116,11 @@ import topbar from "@/components/base/topbar.vue";
 import {mapGetters} from 'vuex'
 import Position from '@/utils/position.js'
 import dayjs from "dayjs";
+import customerServicePopup from '@/components/config/customerServicePopup.vue'
 
 export default {
   components: {
-    topbar,
+    topbar,customerServicePopup,
   },
   computed: {
     ...mapGetters(['userShop']),
@@ -157,15 +160,7 @@ export default {
     },
     // 联系我们
     contactUs() {
-      uni.makePhoneCall({
-        phoneNumber: this.phoneNumber,
-        success() {
-          console.log('ios拨打成功');
-        },
-        fail() {
-          console.log('ios拨打失败');
-        }
-      })
+      this.$refs.customerServicePopup.open()
     },
 
     startDateChange(val) {
diff --git a/static/image/center/12.svg b/static/image/center/12.svg
new file mode 100644
index 0000000..687f4ad
--- /dev/null
+++ b/static/image/center/12.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="27.303" height="26.753" viewBox="0 0 27.303 26.753"><defs><style>.a{fill:#fff;}</style></defs><g transform="translate(-1.696 -1.596)"><g transform="translate(1 1.188)"><path class="a" d="M612.57,205.321a5.04,5.04,0,1,0,4.556-5.483,5.028,5.028,0,0,0-4.556,5.483Zm2.4-.22a2.643,2.643,0,1,1,2.875,2.388,2.641,2.641,0,0,1-2.875-2.388Zm0,0" transform="translate(-603.184 -190.963)"/><path class="a" d="M621.335,194.136a5.119,5.119,0,0,1-7.211.754,5.951,5.951,0,0,1-.644-.613A12.12,12.12,0,0,0,611,195.6a5.139,5.139,0,0,1-3.6,6.3,4.581,4.581,0,0,1-.927.157,11.29,11.29,0,0,0-.346,3.974,5.3,5.3,0,0,1,3.582,2.215,6.121,6.121,0,0,1,.314,5.608,8.143,8.143,0,0,0,3.393,2.105,5.37,5.37,0,0,1,4.116-2.8,5.224,5.224,0,0,1,5.074,2.278,11.663,11.663,0,0,0,2.8-1.885,5.125,5.125,0,0,1,1.838-7.006,5.292,5.292,0,0,1,1.869-.644,11.376,11.376,0,0,0-.456-4.179,5.123,5.123,0,0,1-4.257-6,11.149,11.149,0,0,0-3.063-1.587Zm5.09,1.775a2.967,2.967,0,0,0,1.524,3.629,2.4,2.4,0,0,0,1.053.173l.927-.031.33.864a10.59,10.59,0,0,1,.738,6.3l-.11.628h-1.225c-1.4-.157-2.953,1.7-3.11,3.095a2.715,2.715,0,0,0,.566,2.2l.566.817-.676.911a14.4,14.4,0,0,1-4.414,2.765l-1.1.456a3.321,3.321,0,0,0-3.409-2.859,3.2,3.2,0,0,0-3.189,3.267l-1.288-.314a9.052,9.052,0,0,1-5.655-3.5l-.628-.676.534-.44c.738-.848.283-2.969-.314-3.943a2.813,2.813,0,0,0-2.4-1.21l-.848.094-.189-1.115a12.6,12.6,0,0,1,.534-6.692l.346-.974,1.037.141a2.552,2.552,0,0,0,2.875-2.2,2.487,2.487,0,0,0-.267-1.539l-.534-.644.8-.66a12.956,12.956,0,0,1,4.681-2.686l.99-.3.5.911a2.566,2.566,0,0,0,4.54-.079l.456-.927,1.005.251a11.675,11.675,0,0,1,5,2.781l.707.6Z" transform="translate(-603.184 -190.963)"/></g></g></svg>
\ No newline at end of file
diff --git a/static/image/center/13.svg b/static/image/center/13.svg
new file mode 100644
index 0000000..684de10
--- /dev/null
+++ b/static/image/center/13.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26.736" height="24.295" viewBox="0 0 26.736 24.295"><defs><style>.a{fill:#fff;}.b{clip-path:url(#a);}</style><clipPath id="a"><rect class="a" width="26.736" height="24.295"/></clipPath></defs><g transform="translate(-321 -56)"><path class="a" d="M387.107,56.56a11.615,11.615,0,1,1-3.787,22.6,1.01,1.01,0,0,1,.658-1.909,9.592,9.592,0,1,0-5.637-5.169,1.01,1.01,0,1,1-1.845.823A11.62,11.62,0,0,1,387.107,56.56Zm0,0" transform="translate(-52.477 -0.539)"/><path class="a" d="M947.629,336.7q-.029.039,0-3.992a20.352,20.352,0,0,0,0-3.077,3.535,3.535,0,1,1,0,7.07Zm0,0" transform="translate(-603.439 -263.506)"/><g transform="translate(321 56)"><g class="b" transform="translate(0 0)"><path class="a" d="M569.167,575.388h2.02a2.525,2.525,0,0,1,0,5.05h-2.02a2.525,2.525,0,0,1,0-5.05Zm0,0" transform="translate(-557.557 -556.178)"/><path class="a" d="M324.415,336.7q1.953,0,0-3.992a20.584,20.584,0,0,1,0-3.077,3.535,3.535,0,1,0,0,7.07Zm0,0" transform="translate(-320.884 -319.506)"/></g></g><path class="a" d="M503.28,408.067a1.01,1.01,0,0,1,1.428.044,7.067,7.067,0,0,0,10.107.206,1.01,1.01,0,0,1,1.416,1.441,9.09,9.09,0,0,1-13-.265,1.01,1.01,0,0,1,.045-1.427Zm0,0" transform="translate(-175.232 -338.781)"/></g></svg>
\ No newline at end of file