gas-station-ticket-uniapp-240822/pages/weddingCelebration/weddingCelebration.vue

<template>
	<view class="weddingCelebration">
		<uni-nav-bar dark :fixed="true" background-color="#00aaff" :border="false" status-bar title="婚庆服务" @clickLeft="back" left-icon="left"/>
		<uni-section title="婚庆服务" type="line" titleFontSize="34rpx">
			<uni-card :is-shadow="false">
				<view class="weixin-top">
					<view class="title">微信号:</view>
					<view @click="copy(wx.keyCentent)" class="copy icon">
						<image src="@/static/weddingCelebration/copy.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="number">{{ wx.keyCentent }}</view>
			</uni-card>
			
			<uni-card :is-shadow="false">
				<view class="weixin-top">
					<view class="title">手机号:</view>
					<view @click="clickService(phone.keyCentent)" class="copy icon">
						<image src="@/static/weddingCelebration/phone.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="number">{{ phone.keyCentent }}</view>
			</uni-card>
		</uni-section>
	</view>
</template>

<script>
	export default {
		name : 'weddingCelebration',
		data(){
			return {
				wx : {},
				phone : {},
				classifyKey : [ 'wx' , 'phone' ]
			}
		},
		onShow(){
			this.getData()
		},
		methods : {
			back(){
				uni.switchTab({
					url: '/pages/payment/payment'
				})
			},
			
			//获取微信号,手机号
			getWxPhoneNumber(keyValue){
				this.$api('getConfig',{ keyValue }, res => {
					this[keyValue] = res.result
				})
			},
			
			//获取数据
			getData(){
				let dataList = [ 'wx' , 'phone' ]
				dataList.forEach(item => {
					this.getWxPhoneNumber(item)
				})
			},
			
			//复制内容
			copy(content) {
				uni.setClipboardData({
					data: content,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},
			
			//拨打电话
			clickService(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber,
					success: () => {},
					fail: () => {}
				});
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.weddingCelebration{
		min-height: 100vh;
		width: 750rpx;
		margin: 0rpx auto;
		
		.weixin-top{
			display: flex;
			justify-content: space-between;
			
			.title{
				font-size: 34rpx;
			}
			
			image{
				width: 45rpx;
			}
		}
	}
</style>