[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> ```