food_wechat/pages/main/index.vue
air 747ee9226f 【类 型】:feat
【原  因】:客服功能 拨打电话
【过  程】:调用微信提供的拨打电话接口 从后台获取客服的电话参数
【影  响】:

# 类型 包含:
# feat:新功能(feature)
# fix:修补bug
# docs:文档(documentation)
# style: 格式(不影响代码运行的变动)
# refactor:重构(即不是新增功能,也不是修改bug的代码变动)
# test:增加测试
# chore:构建过程或辅助工具的变动
2025-01-16 14:14:10 +08:00

91 lines
2.1 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="vh100 flex column">
<!-- topbar -->
<u-navbar title="我的" bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
<view class="u-nav-slot" slot="left">
<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
</view>
</u-navbar>
<!-- 头像 -->
<view class="flex mc">
<view class="avatarBox rad-c">
<u-avatar size="300rpx" :src="avatarSrc"></u-avatar>
</view>
</view>
<!-- 昵称 -->
<view class="flex mc fz28 fb m-t-24">
{{userInfo.name}}
</view>
<!-- 菜单栏 -->
<view class="m-t-24 m-r-24 m-l-24 bg-w p-24 rad8 boxshadow">
<view class="fb fz36 p-b-12 borderBDas">常用功能</view>
<view class="flex msb">
<navigator url="/pages/order/index">
<view class="setItemBox flex mac column p-24">
<u-icon name="order" size="28"></u-icon>
<view class="fz24">订单</view>
</view>
</navigator>
<view class="setItemBox flex mac column p-24">
<u-icon name="map-fill" size="28"></u-icon>
<view class="fz24">地图</view>
</view>
<view class="setItemBox flex mac column p-24" @click="callPhone(shopCon.tel)">
<u-icon name="server-fill" size="28"></u-icon>
<view class="fz24">客服</view>
</view>
<view class="setItemBox flex mac column p-24">
<u-icon name="setting-fill" size="28"></u-icon>
<view class="fz24">设置</view>
</view>
</view>
</view>
<!-- tabbar -->
<view>
<tabbar></tabbar>
</view>
</view>
</template>
<script>
import {
callPhone
} from '@/utils/index.js'
export default {
data() {
return {
avatarSrc: "", //头像地址
menuCurrent: null, //tabbar当前页
}
},
onShow() {
// 当页面显示时设置tabber的激活项
this.$store.commit('setTabbarCurrent', 2)
},
methods: {
callPhone,
},
computed: {
userInfo() {
return this.$store.state.userInfo
},
//商铺信息
shopCon() {
return this.$store.state.shopCon
},
},
watch: {}
}
</script>
<style lang="scss" scoped>
.avatarBox {
margin-top: 89rpx;
border: 12rpx solid #fff;
}
.setItemBox {
width: 72rpx;
height: 72rpx;
}
</style>