新增icon、新增充值页面、修复已知bug

mock/template_page.js

@@ -33,6 +33,30 @@ export default {
         }
       ]
     },
+    {
+      title: '充值提现',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [
+        {
+          icon: 'send',
+          title: '蓝色充值',
+          author: '图鸟北北',
+          url: '/templatePage/money/demo1/demo1'
+        },
+        {
+          icon: 'send',
+          title: '绿色充值',
+          author: '图鸟北北',
+          url: '/templatePage/money/demo2/demo2'
+        },
+        {
+          icon: 'send',
+          title: '暗黑充值',
+          author: '图鸟北北',
+          url: '/templatePage/money/demo3/demo3'
+        }
+      ]
+    },
     {
       title: '个人中心',
       backgroundColor: 'tn-cool-bg-color-1',
@@ -213,34 +237,40 @@ export default {
         list: [
           {
             icon: 'send',
-            title: '3D全景(第三方，约120￥一年)',
+            title: '3D全景(第三方，有免费版付费版)',
             author: '图鸟北北 & 芊云全景',
             url: '/templatePage/life/pano/pano'
           },
           {
-            icon: 'rocket',
+            icon: 'send',
-            title: 'Ucharts图表(第三方，免费开源)',
+            title: '3D模型(第三方，有免费版付费版)',
-            author: '图鸟北北 & Ucharts秋云',
+            author: '图鸟北北 & 芊云全景',
-            url: '/templatePage/life/candle/candle'
+            url: '/templatePage/life/pano/model'
           },
           {
-            icon: 'rocket',
+            icon: 'send',
-            title: '阿凡提·污克西西(第三方，免费开源)',
-            author: '阿凡提·污克西西',
-            url: '/templatePage/life/candle/candle'
-          },
-          {
-            icon: 'rocket',
             title: '微信红包封面',
             author: '微信红包封面',
             url: '/templatePage/life/cover/cover'
           },
           {
-            icon: 'rocket',
+            icon: 'send',
             title: '营销小游戏-魔方',
             author: '最帅的你',
             url: '/templatePage/life/cube/cube'
           },
+          {
+            icon: 'rocket',
+            title: '图鸟图表(待开源，免费开源)',
+            author: '图鸟北北 & Ucharts秋云',
+            url: '/templatePage/life/candle/candle'
+          },
+          {
+            icon: 'rocket',
+            title: '图鸟生态，期待你的加入',
+            author: '合作微信 tnkewo',
+            url: '/templatePage/life/candle/candle'
+          }
         ]
       }
   ]

pages.json

@@ -442,6 +442,24 @@
         "navigationBarTitleText": "简约登录",
         "enablePullDownRefresh": false
       }
+    },{
+      "path": "money/demo1/demo1",
+      "style": {
+        "navigationBarTitleText": "蓝色充值",
+        "enablePullDownRefresh": false
+      }
+    },{
+      "path": "money/demo2/demo2",
+      "style": {
+        "navigationBarTitleText": "绿色充值",
+        "enablePullDownRefresh": false
+      }
+    },{
+      "path": "money/demo3/demo3",
+      "style": {
+        "navigationBarTitleText": "暗黑充值",
+        "enablePullDownRefresh": false
+      }
     }, {
       "path": "health/qrcode/qrcode",
       "style": {
@@ -496,6 +514,12 @@
         "navigationBarTitleText": "3D全景",
         "enablePullDownRefresh": false
       }
+    },{
+      "path": "life/pano/model",
+      "style": {
+        "navigationBarTitleText": "3D模型",
+        "enablePullDownRefresh": false
+      }
     }, {
       "path": "life/plus/plus",
       "style": {
@@ -630,8 +654,330 @@
         "enablePullDownRefresh": false
       }
     }]
-  }, 
+  }, {
-	{
+    "root": "vipPage",
+    "pages": [{
+        "path": "blog/circle/circle",
+        "style": {
+          "navigationBarTitleText": "精选圈子",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "blog/blogger/blogger",
+        "style": {
+          "navigationBarTitleText": "博客博主",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/tuniao/tuniao",
+        "style": {
+          "navigationBarTitleText": "图鸟首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "shop/store/store",
+        "style": {
+          "navigationBarTitleText": "店铺商品",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "shop/order/order",
+        "style": {
+          "navigationBarTitleText": "商品订单",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "shop/classify/classify",
+        "style": {
+          "navigationBarTitleText": "商品分类",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "shop/money/money",
+        "style": {
+          "navigationBarTitleText": "积分活动",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "life/guide/guide",
+        "style": {
+          "navigationBarTitleText": "操作指引",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/cool/cool",
+        "style": {
+          "navigationBarTitleText": "酷炫功能",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/link/link",
+        "style": {
+          "navigationBarTitleText": "友情链接",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/movie/movie",
+        "style": {
+          "navigationBarTitleText": "电影首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/mimicry/mimicry",
+        "style": {
+          "navigationBarTitleText": "拟态首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/food/food",
+        "style": {
+          "navigationBarTitleText": "食物首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/tea/tea",
+        "style": {
+          "navigationBarTitleText": "奶茶首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/read/read",
+        "style": {
+          "navigationBarTitleText": "阅读首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/moon/moon",
+        "style": {
+          "navigationBarTitleText": "月亮首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/plan/plan",
+        "style": {
+          "navigationBarTitleText": "计划首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/year/year",
+        "style": {
+          "navigationBarTitleText": "新年首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "life/bless/bless",
+        "style": {
+          "navigationBarTitleText": "祝福页面",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/card/card",
+        "style": {
+          "navigationBarTitleText": "卡片首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/drag/basic-drag/basic-drag",
+        "style": {
+          "navigationBarTitleText": "Drag长按拖拽",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/drag/upload-image-drag/upload-image-drag",
+        "style": {
+          "navigationBarTitleText": "图片上传长按拖拽",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/gravity/page1/page1",
+        "style": {
+          "navigationBarTitleText": "重力首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/cropper/cropper",
+        "style": {
+          "navigationBarTitleText": "Cropper图片裁剪",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/stack-swiper/stack-swiper",
+        "style": {
+          "navigationBarTitleText": "StackSwiper堆叠轮播",
+          "enablePullDownRefresh": false
+        }
+      },
+      {
+        "path": "life/power/power",
+        "style": {
+          "navigationBarTitleText": "充电首页",
+          "enablePullDownRefresh": false
+        }
+      },
+      {
+        "path": "components/scroll-view/index",
+        "style": {
+          "navigationBarTitleText": "自定义下拉刷新",
+          "enablePullDownRefresh": false
+        }
+      },
+      {
+        "path": "components/scroll-view/basic/scroll-view",
+        "style": {
+          "navigationBarTitleText": "自定义下拉刷新",
+          "enablePullDownRefresh": false
+        }
+      },
+      {
+        "path": "components/scroll-view/custom/scroll-view",
+        "style": {
+          "navigationBarTitleText": "自定义下拉刷新",
+          "enablePullDownRefresh": false
+        }
+      },
+      {
+        "path": "components/cascade-selection/cascade-selection",
+        "style": {
+          "navigationBarTitleText": "级联选择",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/waterfall/waterfall",
+        "style": {
+          "navigationBarTitleText": "瀑布流",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/custom-swiper/index",
+        "style": {
+          "navigationBarTitleText": "图鸟轮播(实验)",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/custom-swiper/horizontal/custom-swiper",
+        "style": {
+          "navigationBarTitleText": "图鸟轮播-横向",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/custom-swiper/vertical/custom-swiper",
+        "style": {
+          "navigationBarTitleText": "图鸟轮播-纵向",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "blog/blog/blog",
+        "style": {
+          "navigationBarTitleText": "圈子首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "blog/prefer/prefer",
+        "style": {
+          "navigationBarTitleText": "商品优选",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "blog/socialize/socialize",
+        "style": {
+          "navigationBarTitleText": "社交圈子",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "blog/myblog/myblog",
+        "style": {
+          "navigationBarTitleText": "圈子中心",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "blog/message/message",
+        "style": {
+          "navigationBarTitleText": "社交圈子",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "blog/product/product",
+        "style": {
+          "navigationBarTitleText": "优选详情",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/health/health",
+        "style": {
+          "navigationBarTitleText": "健康首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/tree-view/tree-view",
+        "style": {
+          "navigationBarTitleText": "树形菜单",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "home/panoramic/panoramic",
+        "style": {
+          "navigationBarTitleText": "全景首页",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/table/index",
+        "style": {
+          "navigationBarTitleText": "表格",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/table/basic/index",
+        "style": {
+          "navigationBarTitleText": "基础表格",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/table/stripe/index",
+        "style": {
+          "navigationBarTitleText": "斑马纹表格",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/table/fixed-header/index",
+        "style": {
+          "navigationBarTitleText": "固定头部表格",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/table/fixed-column/index",
+        "style": {
+          "navigationBarTitleText": "固定列表格",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/table/multi-header/index",
+        "style": {
+          "navigationBarTitleText": "多表头表格",
+          "enablePullDownRefresh": false
+        }
+      }, {
+        "path": "components/table/complex/index",
+        "style": {
+          "navigationBarTitleText": "复杂表格",
+          "enablePullDownRefresh": false
+        }
+      },{
+        "path": "life/start/start",
+        "style": {
+          "navigationBarTitleText": "首次指引",
+          "enablePullDownRefresh": false
+        }
+      },
+      {
+        "path": "home/ucharts/ucharts",
+        "style": {
+          "navigationBarTitleText": "uCharts首页",
+          "enablePullDownRefresh": false
+        }
+      }
+      
+    ]
+  }, {
     "root": "thirdPage",
     "pages": [{
       "path": "short-video/short-video",
@@ -654,7 +1000,7 @@
   "preloadRule": {
     "pages/index/index": {
       "network": "all",
-      "packages": ["basicPage", "componentsPage", "templatePage", "thirdPage"]
+      "packages": ["basicPage", "componentsPage", "templatePage", "vipPage", "thirdPage"]
     }
   },
   "globalStyle": {

templatePage/life/pano/model.vue

@@ -0,0 +1,24 @@
+<template>
+	<view class="components-pano">
+		<!-- <web-view src="https://sketchfab.com/models/1e9cb6b98a5b4bc39f0e48ec0261000d/embed?autostart=1&internal=1&ui_infos=0&ui_snapshots=1&ui_stop=0&ui_watermark=0"></web-view> -->
+    <web-view src="https://vr.he29.com/tour/mf926a02a03966a.html"></web-view>
+    <!-- <web-view src="https://vr.he29.com/v3/tour/index?id=7026"></web-view> -->
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>

templatePage/money/demo1/demo1.vue

@@ -0,0 +1,219 @@
+<template>
+  <view class="template-pay tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar>
+    
+    
+    <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}" style="background: linear-gradient(180deg, #D8E5FF, #F9FFF9);">
+      <view class="tn-margin">
+        <view class="button-vip tn-flex tn-flex-row-between tn-shadow-blur tn-main-gradient-blue">
+          <view class="tn-margin-left tn-margin-top-lg">
+            <view class="tn-color-white">
+              我的余额
+            </view>
+            <view class="tn-color-white tn-padding-top-sm">
+              <text class="" style="margin-left: -6rpx;">￥</text>
+              <text class="tn-text-bold" style="font-size: 80rpx;">129.29</text>
+            </view>
+            <view class="tn-color-white" style="padding-top: 45rpx;opacity: 0.6;">6122 **** **** 60606</view>
+          </view>
+          <view class="tn-margin-right tn-margin-top-xl tn-color-white">
+            <view class="tn-padding-bottom-xs">
+              <text class="tn-padding-right-xs" style="opacity: 0.3;">可用本金</text>
+              ￥129.00
+            </view>
+            <view class="tn-padding-bottom-xs">
+              <text class="tn-padding-right-xs" style="opacity: 0.3;">赠送金额</text>
+              ￥0.29
+            </view>
+            <view class="tn-padding-bottom-xs">
+              <text class="tn-padding-right-xs" style="opacity: 0.3;">冻结金额</text>
+              ￥0.00
+            </view>
+          </view>
+          
+        </view>
+      </view>
+    
+    </view>
+
+    
+    <view class="tn-margin tn-padding-top-xl">
+      <view class="tn-bg-gray--light tn-flex" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
+        <text class="tn-flex tn-text-lg tn-padding-right-xs tn-color-gray--dark">￥</text>
+      	<input placeholder="请输入充值金额" name="input" placeholder-style="color:#AAAAAA" style="width: 100%;"></input>
+      </view>
+    </view>
+    
+    <view class="tn-flex tn-flex-col-center tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs">
+      <view class="justify-content-item">
+        <view class="tn-text-xxl">
+          <text class="tn-icon-payment-alipay tn-color-blue--dark"></text>
+          <text class="tn-padding-left-sm tn-text-lg">支付宝</text>
+        </view>
+      </view>
+      <view class="justify-content-item tn-text-xl tn-color-green--dark">
+        <view class="tn-icon-success-circle"></view>
+      </view>
+    </view>
+    <view class="tn-flex tn-flex-col-center tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs">
+      <view class="justify-content-item">
+        <view class="tn-text-xxl">
+          <text class="tn-icon-payment-wechat tn-color-green--dark"></text>
+          <text class="tn-padding-left-sm tn-text-lg">微信支付</text>
+        </view>
+      </view>
+      <view class="justify-content-item tn-text-xl tn-color-grey--disabled">
+        <view class="tn-icon-circle"></view>
+      </view>
+    </view>
+    <view class="tn-flex tn-flex-col-center tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs">
+      <view class="justify-content-item">
+        <view class="tn-text-xxl">
+          <text class="tn-icon-pay-fill tn-color-aquablue--dark"></text>
+          <text class="tn-padding-left-sm tn-text-lg">银行卡支付</text>
+        </view>
+      </view>
+      <view class="justify-content-item tn-text-xl tn-color-grey--disabled">
+        <view class="tn-icon-circle"></view>
+      </view>
+    </view>
+
+    <!-- 悬浮按钮-->
+    <view class="tn-flex tn-footerfixed">
+      <view class="tn-flex-1 justify-content-item tn-margin tn-text-center">
+        <view class="tn-padding-xl">
+          <text class="tn-icon-tip tn-padding-right-xs tn-color-gray"></text> 
+          <text class="tn-color-gray">点击充值即表示你已同意</text>
+          <text class="tn-color-blue--disabled">《充值协议》</text>
+        </view>
+        <tn-button backgroundColor="tn-main-gradient-aquablue" padding="40rpx 0" width="100%" shadow>
+          <text class="tn-color-white">立 即 充 值</text>
+        </tn-button>
+      </view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplatePay',
+    mixins: [template_page_mixin],
+    data(){
+      return {
+      }
+    },
+    methods: {
+      // 跳转
+      tn(e) {
+      	uni.navigateTo({
+      		url: e,
+      	});
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* 胶囊*/
+  .tn-custom-nav-bar__back {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    box-sizing: border-box;
+    background-color: rgba(0, 0, 0, 0.15);
+    border-radius: 1000rpx;
+    border: 1rpx solid rgba(255, 255, 255, 0.5);
+    color: #FFFFFF;
+    font-size: 18px;
+    
+    .icon {
+      display: block;
+      flex: 1;
+      margin: auto;
+      text-align: center;
+    }
+    
+    &:before {
+      content: " ";
+      width: 1rpx;
+      height: 110%;
+      position: absolute;
+      top: 22.5%;
+      left: 0;
+      right: 0;
+      margin: auto;
+      transform: scale(0.5);
+      transform-origin: 0 0;
+      pointer-events: none;
+      box-sizing: border-box;
+      opacity: 0.7;
+      background-color: #FFFFFF;
+    }
+  }
+  
+  
+  /* 底部悬浮按钮 start*/
+  .tn-tabbar-height {
+  	min-height: 100rpx;
+  	height: calc(120rpx + env(safe-area-inset-bottom) / 2);
+  }
+  .tn-footerfixed {
+    position: fixed;
+    width: 100%;
+    bottom: calc(60rpx + env(safe-area-inset-bottom));
+    z-index: 1024;
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
+    
+  }
+  /* 底部悬浮按钮 end*/
+  
+  /* 卡 */
+  .button-vip {
+    width: 100%;
+    height: 300rpx;
+    border-radius: 15rpx;
+    position: relative;
+    z-index: 1;
+    
+    &::after {
+      content: " ";
+      position: absolute;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      bottom: 0;
+      border-radius: inherit;
+      opacity: 1;
+      transform: scale(1, 1);
+      background-size: 100% 100%;
+      background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg4.png);
+    }    
+  }
+  
+  
+  /* 间隔线 start*/
+  .tn-strip-bottom-min {
+    width: 100%;
+    border-bottom: 1rpx solid #F8F9FB;
+  }
+  
+  .tn-strip-bottom {
+   width: 100%;
+   border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
+  }
+   /* 间隔线 end*/
+
+</style>

templatePage/money/demo2/demo2.vue

@@ -0,0 +1,263 @@
+<template>
+  <view class="template-pay tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar>
+    
+    
+    <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <view class="tn-margin">
+        <view class="button-vip tn-flex tn-flex-row-between tn-shadow-blur" style="background-color: #56BD48;">
+          <view class="tn-margin-left tn-margin-top-lg">
+            <view class="tn-color-white">
+              余额
+            </view>
+            <view class="tn-color-white tn-padding-top">
+              <text class="" style="margin-left: -6rpx;">￥</text>
+              <text class="tn-text-bold" style="font-size: 80rpx;">129.29</text>
+            </view>
+          </view>
+          <view class="tn-margin-right tn-margin-top-xl tn-color-white">
+            <view class="tn-padding-bottom-xs">
+              <text class="tn-padding-right-xs" style="opacity: 0.3;">可用本金</text>
+              ￥129.00
+            </view>
+            <view class="tn-padding-bottom-xs">
+              <text class="tn-padding-right-xs" style="opacity: 0.3;">赠送金额</text>
+              ￥0.29
+            </view>
+            <view class="tn-padding-bottom-xs">
+              <text class="tn-padding-right-xs" style="opacity: 0.3;">冻结金额</text>
+              ￥0.00
+            </view>
+          </view>
+          
+        </view>
+      </view>
+    
+    </view>
+    
+    <view class="tn-tag-content tn-text-justify tn-margin">
+      <view class="tn-tag-content__item tn-margin-right tn-text-bold tag-select">
+        <text class="">30元</text>
+      </view>
+      <view class="tn-tag-content__item tn-margin-right tn-text-bold tag-select-no">
+        <text class="">50元</text>
+      </view>
+      <view class="tn-tag-content__item tn-margin-right tn-text-bold tag-select-no">
+        <text class="">80元</text>
+      </view>
+      <view class="tn-tag-content__item tn-margin-right tn-text-bold tag-select-no">
+        <text class="">100元</text>
+      </view>
+      <view class="tn-tag-content__item tn-margin-right tn-text-bold tag-select-no">
+        <text class="">300元</text>
+      </view>
+      <view class="tn-tag-content__item tn-margin-right tn-text-bold tag-select-no">
+        <text class="">1000元</text>
+      </view>
+      <view class="tn-tag-content__item tn-margin-right tn-text-bold tag-select-no">
+        <text class="">6000元</text>
+      </view>
+    </view>
+
+    <view class="tn-flex tn-flex-col-center tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs">
+      <view class="justify-content-item">
+        <view class="tn-text-xxl">
+          <text class="tn-icon-payment-alipay tn-color-blue--dark"></text>
+          <text class="tn-padding-left-sm tn-text-lg">支付宝</text>
+        </view>
+      </view>
+      <view class="justify-content-item tn-text-xl tn-color-green--dark">
+        <view class="tn-icon-success-circle"></view>
+      </view>
+    </view>
+    <view class="tn-flex tn-flex-col-center tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs">
+      <view class="justify-content-item">
+        <view class="tn-text-xxl">
+          <text class="tn-icon-payment-wechat tn-color-green--dark"></text>
+          <text class="tn-padding-left-sm tn-text-lg">微信支付</text>
+        </view>
+      </view>
+      <view class="justify-content-item tn-text-xl tn-color-grey--disabled">
+        <view class="tn-icon-circle"></view>
+      </view>
+    </view>
+    <view class="tn-flex tn-flex-col-center tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs">
+      <view class="justify-content-item">
+        <view class="tn-text-xxl">
+          <text class="tn-icon-pay-fill tn-color-aquablue--dark"></text>
+          <text class="tn-padding-left-sm tn-text-lg">银行卡支付</text>
+        </view>
+      </view>
+      <view class="justify-content-item tn-text-xl tn-color-grey--disabled">
+        <view class="tn-icon-circle"></view>
+      </view>
+    </view>
+
+    <!-- 悬浮按钮-->
+    <view class="tn-flex tn-footerfixed">
+      <view class="tn-flex-1 justify-content-item tn-margin tn-text-center">
+        <view class="tn-padding-xl">
+          <text class="tn-icon-tip tn-padding-right-xs tn-color-gray"></text> 
+          <text class="tn-color-gray">点击充值即表示你已同意</text>
+          <text class="tn-color-blue--disabled">《充值协议》</text>
+        </view>
+        <tn-button backgroundColor="#56BD48" padding="40rpx 0" width="100%" shadow>
+          <text class="tn-color-white">立 即 充 值</text>
+        </tn-button>
+      </view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplatePay',
+    mixins: [template_page_mixin],
+    data(){
+      return {
+      }
+    },
+    methods: {
+      // 跳转
+      tn(e) {
+      	uni.navigateTo({
+      		url: e,
+      	});
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* 胶囊*/
+  .tn-custom-nav-bar__back {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    box-sizing: border-box;
+    background-color: rgba(0, 0, 0, 0.15);
+    border-radius: 1000rpx;
+    border: 1rpx solid rgba(255, 255, 255, 0.5);
+    color: #FFFFFF;
+    font-size: 18px;
+    
+    .icon {
+      display: block;
+      flex: 1;
+      margin: auto;
+      text-align: center;
+    }
+    
+    &:before {
+      content: " ";
+      width: 1rpx;
+      height: 110%;
+      position: absolute;
+      top: 22.5%;
+      left: 0;
+      right: 0;
+      margin: auto;
+      transform: scale(0.5);
+      transform-origin: 0 0;
+      pointer-events: none;
+      box-sizing: border-box;
+      opacity: 0.7;
+      background-color: #FFFFFF;
+    }
+  }
+  
+  
+  /* 底部悬浮按钮 start*/
+  .tn-tabbar-height {
+  	min-height: 100rpx;
+  	height: calc(120rpx + env(safe-area-inset-bottom) / 2);
+  }
+  .tn-footerfixed {
+    position: fixed;
+    width: 100%;
+    bottom: calc(60rpx + env(safe-area-inset-bottom));
+    z-index: 1024;
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
+    
+  }
+  /* 底部悬浮按钮 end*/
+  
+  /* 卡 */
+  .button-vip {
+    width: 100%;
+    height: 240rpx;
+    border-radius: 15rpx;
+    position: relative;
+    z-index: 1;
+    
+    &::after {
+      content: " ";
+      position: absolute;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      bottom: 0;
+      border-radius: inherit;
+      opacity: 1;
+      transform: scale(1, 1);
+      background-size: 100% 100%;
+    }    
+  }
+  
+  
+  /* 间隔线 start*/
+  .tn-strip-bottom-min {
+    width: 100%;
+    border-bottom: 1rpx solid #F8F9FB;
+  }
+  
+  .tn-strip-bottom {
+   width: 100%;
+   border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
+  }
+   /* 间隔线 end*/
+   
+   /* 选择*/
+  .tag-select{
+    color: #07C160;
+    border: 1rpx solid #07C160;
+    background-color: #07C16010;
+    border-radius: 16rpx;
+  }
+  
+  .tag-select-no{
+    color: #080808;
+    border: 1rpx solid #E6E6E6;
+    background-color: #F9F9F9;
+    border-radius: 16rpx;
+  }
+  
+  /* 标签内容 start*/
+  .tn-tag-content {
+    &__item {
+      display: inline-block;
+      line-height: 45rpx;
+      padding: 20rpx 42rpx;
+      margin: 20rpx 20rpx 5rpx 0rpx;
+      
+      &--prefix {
+        padding-right: 10rpx;
+      }  
+    }
+  }
+  /* 标签内容 end*/
+  
+</style>

templatePage/money/demo3/demo3.vue

@@ -0,0 +1,231 @@
+<template>
+  <view class="template-pay tn-safe-area-inset-bottom">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed alpha customBack>
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+        <text class='icon tn-icon-home-capsule-fill'></text>
+      </view>
+    </tn-nav-bar>
+    
+    
+    <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <view class="tn-margin">
+        <view class="button-vip tn-flex tn-flex-row-between tn-shadow-blur tn-main-gradient-aquablue">
+          <view class="tn-margin-left tn-margin-top-lg">
+            <view class="tn-color-white tn-padding-top tn-text-center">
+              <text class="tn-icon-rabbit tn-padding-right-sm" style="font-size: 80rpx;margin-left: -10rpx;"></text>
+              <text class="tn-text-bold" style="font-size: 80rpx;">12,929</text>
+            </view>
+            <view class="tn-color-white tn-text-sm" style="padding-top: 65rpx;opacity: 0.6;">充值金额，可用于购买礼物与特权</view>
+          </view>
+        </view>
+      </view>
+    
+    </view>
+    
+    <view class="tn-margin tn-padding-top tn-color-white tn-text-lg tn-text-bold">
+      选择充值金额
+    </view>
+    
+    <view class="tn-flex tn-flex-col-center tn-flex-wrap tn-color-white tn-margin-sm">
+      <view class="tn-padding-sm tn-text-center tag-select-no">
+        <view class="tn-text-xl tn-padding-top-sm">
+          <text class="tn-icon-rabbit tn-padding-right-sm" style="margin-left: -10rpx;"></text>
+          <text class="tn-text-bold">56</text>
+        </view>
+        <view class="tn-padding-top-xs" style="color: #888CA0;">
+          ￥8.00
+        </view>
+      </view>
+      <view class="tn-padding-sm tn-text-center tag-select">
+        <view class="tn-text-xl tn-padding-top-sm">
+          <text class="tn-icon-rabbit tn-padding-right-sm" style="margin-left: -10rpx;"></text>
+          <text class="tn-text-bold">118</text>
+        </view>
+        <view class="tn-padding-top-xs" style="color: #888CA0;">
+          ￥16.00
+        </view>
+      </view>
+      <view class="tn-padding-sm tn-text-center tag-select-no">
+        <view class="tn-text-xl tn-padding-top-sm">
+          <text class="tn-icon-rabbit tn-padding-right-sm" style="margin-left: -10rpx;"></text>
+          <text class="tn-text-bold">228</text>
+        </view>
+        <view class="tn-padding-top-xs" style="color: #888CA0;">
+          ￥30.00
+        </view>
+      </view>
+      <view class="tn-padding-sm tn-text-center tag-select-no">
+        <view class="tn-text-xl tn-padding-top-sm">
+          <text class="tn-icon-rabbit tn-padding-right-sm" style="margin-left: -10rpx;"></text>
+          <text class="tn-text-bold">428</text>
+        </view>
+        <view class="tn-padding-top-xs" style="color: #888CA0;">
+          ￥50.00
+        </view>
+      </view>
+      <view class="tn-padding-sm tn-text-center tag-select-no">
+        <view class="tn-text-xl tn-padding-top-sm">
+          <text class="tn-icon-rabbit tn-padding-right-sm" style="margin-left: -10rpx;"></text>
+          <text class="tn-text-bold">1488</text>
+        </view>
+        <view class="tn-padding-top-xs" style="color: #888CA0;">
+          ￥168.00
+        </view>
+      </view>
+      
+    </view>
+
+
+    <view class="tn-margin tn-padding-top tn-color-white tn-text-lg tn-text-bold">
+      或输入充值金额
+    </view>
+    
+    <view class="tn-margin tn-padding-top-xs">
+      <view class="tn-flex" style="border-radius: 10rpx;padding: 20rpx 30rpx;background-color: #FFFFFF30;">
+        <text class="tn-flex tn-text-lg tn-padding-right-xs tn-color-white">￥</text>
+      	<input placeholder="请输入充值金额" name="input" placeholder-style="color:#AAAAAA" style="width: 100%;color: #FFFFFF;"></input>
+      </view>
+    </view>
+    
+
+    <!-- 悬浮按钮-->
+    <view class="tn-flex tn-footerfixed">
+      <view class="tn-flex-1 justify-content-item tn-margin tn-text-center">
+        <view class="tn-padding-xl">
+          <text class="tn-icon-tip tn-padding-right-xs tn-color-gray"></text> 
+          <text class="tn-color-gray">点击充值即表示你已同意</text>
+          <text class="tn-color-blue--disabled">《充值协议》</text>
+        </view>
+        <tn-button backgroundColor="#4327DF" padding="40rpx 0" shape="round" width="80%">
+          <text class="tn-color-white">立 即 充 值</text>
+        </tn-button>
+      </view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'TemplatePay',
+    mixins: [template_page_mixin],
+    data(){
+      return {
+      }
+    },
+    methods: {
+      // 跳转
+      tn(e) {
+      	uni.navigateTo({
+      		url: e,
+      	});
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* 胶囊*/
+  .tn-custom-nav-bar__back {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    box-sizing: border-box;
+    background-color: rgba(0, 0, 0, 0.15);
+    border-radius: 1000rpx;
+    border: 1rpx solid rgba(255, 255, 255, 0.5);
+    color: #FFFFFF;
+    font-size: 18px;
+    
+    .icon {
+      display: block;
+      flex: 1;
+      margin: auto;
+      text-align: center;
+    }
+    
+    &:before {
+      content: " ";
+      width: 1rpx;
+      height: 110%;
+      position: absolute;
+      top: 22.5%;
+      left: 0;
+      right: 0;
+      margin: auto;
+      transform: scale(0.5);
+      transform-origin: 0 0;
+      pointer-events: none;
+      box-sizing: border-box;
+      opacity: 0.7;
+      background-color: #FFFFFF;
+    }
+  }
+  
+  .template-pay{
+    height: 100vh;
+    background-color: #161324;
+  }
+  
+  /* 底部悬浮按钮 start*/
+  .tn-tabbar-height {
+  	min-height: 100rpx;
+  	height: calc(120rpx + env(safe-area-inset-bottom) / 2);
+  }
+  .tn-footerfixed {
+    position: fixed;
+    width: 100%;
+    bottom: calc(60rpx + env(safe-area-inset-bottom));
+    z-index: 1024;
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
+    
+  }
+  /* 底部悬浮按钮 end*/
+  
+  /* 卡 */
+  .button-vip {
+    width: 100%;
+    height: 300rpx;
+    border-radius: 15rpx;
+    position: relative;
+    z-index: 1;
+    
+    &::after {
+      content: " ";
+      position: absolute;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      bottom: 0;
+      border-radius: inherit;
+      opacity: 1;
+      transform: scale(1, 1);
+      background-size: 100% 100%;
+      background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg4.png);
+    }    
+  }
+  
+  .tag-select{
+    width: 31%;
+    border: 4rpx solid #4327DF;
+    margin: 8rpx 1%;
+    border-radius: 20rpx;
+    background-color: #211E2F50;
+  }
+  .tag-select-no{
+    width: 31%;
+    border: 4rpx solid #211E2F;
+    margin: 8rpx 1%;
+    border-radius: 20rpx;
+    background-color: #211E2F;
+  }
+  
+</style>

tuniao-ui/components/tn-picker/tn-picker.vue

@@ -12,7 +12,7 @@
     >
       <view class="tn-picker__content" :style="{ zIndex: elZIndex }">
         <!-- 顶部 -->
-        <view class="tn-picker__content__header tn-border-solid-bottom" @touchmove.stop.prevent>
+        <view class="tn-picker__content__header" @touchmove.stop.prevent>
           <!-- 取消按钮 -->
           <view
             class="tn-picker__content__header__btn tn-picker__content__header--cancel"
@@ -242,7 +242,7 @@
       // 取消按钮的文字
       cancelText: {
         type: String,
-        default: '取消'
+        default: '取 消'
       },
       // 取消按钮的颜色
       cancelColor: {
@@ -252,7 +252,7 @@
       // 确认按钮的文字
       confirmText: {
         type: String,
-        default: '确认'
+        default: '确 认'
       },
       // 确认按钮的演示
       confirmColor: {
@@ -665,7 +665,8 @@
         flex-direction: row;
         width: 100%;
         height: 90rpx;
-        padding: 0 40rpx;
+        margin-top: 10rpx;
+        padding: 0 30rpx;
         align-items: center;
         justify-content: space-between;
         box-sizing: border-box;
@@ -688,7 +689,10 @@
         }
         
         &--confirm {
-          color: $tn-main-color;
+          background-color: #07C160;
+          color: #FFFFFF;
+          padding: 10rpx 25rpx;
+          border-radius: 10rpx;
         }
       }