[toc] # 4.1 充值金币页开发(一) ## 4.1.1 实现充值金币页开发布局 1. 创建充值金币页面,页面名称为: `coin`  2. 在pages.json文件内配置充值金币页面的路径,并设置充值金币页面标题为`我的余额` ``` { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "app-plus": { "titleNView": { "titleAlign":"left", "titleText":"直播", "buttons":[ { "type" : "menu" } ] } } } }, { "path": "pages/my/my", "style": { } }, { "path": "pages/live/live", "style": { "app-plus":{ "titleNView":false } } }, { "path": "pages/coin/coin", "style": { "navigationBarTitleText":"我的余额", "navigationBarBackgroundColor":"#FFFFFF", "navigationBarTextStyle":"black" } } ], "globalStyle": { "navigationBarTextStyle": "white", "navigationBarTitleText": "九月直播", "navigationBarBackgroundColor": "#8745FF", "backgroundColor": "#8745FF" }, "tabBar": { "color":"#707070", "selectedColor":"#8745FF", "backgroundColor":"#ffffff", "borderStyle":"black", "midButton": { "iconPath":"static/tabbar/min.png", "iconWidth":"60px", "height" : "65px" }, "list": [ { "iconPath":"static/tabbar/find.png", "selectedIconPath":"static/tabbar/find-selected.png", "text" : "发现", "pagePath":"pages/index/index" }, { "iconPath":"static/tabbar/my.png", "selectedIconPath":"static/tabbar/find-selected.png", "text":"我的", "pagePath":"pages/my/my" } ] } } ``` 3. 点击弹出礼物层的充值按钮跳转到充值金币页面 ``` <! --给充值按钮添加点击事件 --> <view style="height: 100rpx;" class="flex align-center justify-end"> <view @click="openCoin" class="bg-warning flex mr-3 align-center py-2 rounded px-2 justify-center" > <text class="font">充值</text> </view> <view class="bg-main flex mr-3 align-center py-2 rounded px-2 justify-center" > <text class="font text-white" @click="sendGift">发送</text> </view> </view> //跳转到金币充值页面 openCoin(){ uni.navigateTo({ url: "../coin/coin" }) } ``` 4. 点击直播页面的金币图标时也跳转到充值金币页面 ``` <! --给充值按钮添加点击事件 --> <view @click="openCoin" style="height:80rpx; width: 80rpx; background-color: rgba(255,255,255,0.12);" class="flex mr-1 justify-center rounded-circle align-center"> <text class="iconfont text-white" style="font-size: 40px; ">&#xe633;</text> </view> //跳转到金币充值页面 openCoin(){ uni.navigateTo({ url: "../coin/coin" }) } ``` 5. 实现标题底部的边框线,并设置整体的内边距 ``` <template> <view class="border-top border-light-secondary p-3"> </view> </template> <script> </script> <style> </style> ``` 6. 实现当前金币模块布局 ``` <template> <view class="border-top border-light-secondary p-3"> <!-- 当前金币 --> <view class="rounded py-4 flex flex-column align-center justify-center bg-main"> <text class="text-white font-sm mb-2">当前金币</text> <text class="font-weight-bold text-white" style="font-size: 60rpx;">50</text> </view> </view> </template> <script> </script> <style> </style> ``` 7. 实现分割线 ``` <template> <view class="border-top border-light-secondary p-3"> <!-- 当前金币 --> <view class="rounded py-4 flex flex-column align-center justify-center bg-main"> <text class="text-white font-sm mb-2">当前金币</text> <text class="font-weight-bold text-white" style="font-size: 60rpx;">50</text> </view> <!-- 分割线 --> <view class="border-top border-light-secondary my-3"></view> </view> </template> <script> </script> <style> </style> ``` 8. 实现选择充值金币布局 ``` <template> <view class="border-top border-light-secondary p-3"> <!-- 当前金币 --> <view class="rounded py-4 flex flex-column align-center justify-center bg-main"> <text class="text-white font-sm mb-2">当前金币</text> <text class="font-weight-bold text-white" style="font-size: 60rpx;">50</text> </view> <!-- 分割线 --> <view class="border-top border-light-secondary my-3"></view> <!-- 选择充值金币标题 --> <view> <text class="font-sm text-muted">请选择充值金币</text> </view> <!-- 选择充值金币列表 --> <view class="flex flex-wrap" style="margin-left: -20rpx; margin-right: -20rpx;"> <view v-for="(item,index) in 6" style="width: 33.3%; box-sizing: border-box; " class=" p-2"> <view style="height: 130rpx;" class="border rounded flex flex-column align-center justify-center"> <view class="flex align-center"> <text class="iconfont text-warning mr-1">&#xe633;</text> <text class="font-md font-weight-bold">10</text> </view> <text class="font text-light-muted">¥10</text> </view> </view> </view> </view> </template> <script> </script> <style> </style> ```