添加充值页面，添加地址管理

Liuyi

2024-09-25 21222d0795e3cb26a6116311e367022687298ea3

添加充值页面，添加地址管理

 pages.json

@@ -20,9 +20,26 @@
        },
        {
            "path" : "pages/recharge/index",
            "style" : 
            {
                "navigationBarTitleText" : ""
            "style": {
                "navigationStyle":"custom"
            }
        },
        {
            "path" : "pages/sendWater/index",
            "style": {
                "navigationStyle":"custom"
            }
        },
        {
            "path" : "pages/preSendWater/index",
            "style": {
                "navigationStyle":"custom"
            }
        },
        {
            "path" : "pages/address/index",
            "style": {
                "navigationStyle":"custom"
            }
        }
    ],

 pages/addCard/index.vue

@@ -2,7 +2,7 @@
import { onMounted,ref} from 'vue';

const form = ref({
    waterCardNumber:'',
    waterwaterCardNumber:'',
    userName:'',
    userPhone:'',
    address:'',
@@ -23,28 +23,28 @@
                <view class="form">
                    <view class="form-item card-item">
                        <text>卡号：</text>
                        <input v-model="form.cardNumber" placeholder="请输入卡号"/>
                        <input v-model="form.waterCardNumber" placeholder="请输入卡号"/>
                        <image src="../../static/images/addCard/code.png" alt=""></image>
                    </view>
                    <view class="form-item">
                        <text>姓名：</text>
                        <input v-model="form.cardNumber" placeholder="请输入姓名"/>
                        <input v-model="form.waterCardNumber" placeholder="请输入姓名"/>
                    </view>
                    <view class="form-item">
                        <text>联系方式：</text>
                        <input v-model="form.cardNumber" placeholder="请输入手机号"/>
                        <input v-model="form.waterCardNumber" placeholder="请输入手机号"/>
                    </view>
                    <view class="form-item">
                        <text>区域：</text>
                        <input v-model="form.cardNumber" placeholder="请选择区域"/>
                        <input v-model="form.waterCardNumber" placeholder="请选择区域"/>
                    </view>
                    <view class="form-item">
                        <text>地址：</text>
                        <input v-model="form.cardNumber" placeholder="请输入地址"/>
                        <input v-model="form.waterCardNumber" placeholder="请输入地址"/>
                    </view>
                    <view class="form-item">
                        <text>备注：</text>
                        <input v-model="form.cardNumber" placeholder="请输入内容"/>
                        <input v-model="form.waterCardNumber" placeholder="请输入内容"/>
                    </view>
                </view>
                <view class="tips">

 pages/address/index.vue

对比新文件
@@ -0,0 +1,30 @@
<script setup>
	
</script>
<template>
    <view class="container">
        <navbar title = '地址管理'></navbar>
        <view class="content">
            <view class="main"></view>
        </view>
    </view>
</template>

<style lang="scss">
    .container{
        width: 100%;
        height: 100vh;
        .content{
            width: 100%;
            height:calc(100vh - 176rpx);
            background:linear-gradient(to top,#FFFFFF,#E8EFFF);
            padding-top:20rpx;
            .main{
                width: 686rpx;
                height:1262rpx;
                background: #ffaaff;
                margin:0 auto;
            }
       }
   }
</style>

 pages/index/index.vue

@@ -25,24 +25,18 @@
            isVip.value = false
        }
    }
    function navToAddCard(){
        uni.navigateTo({
            url:'/pages/addCard/index'
        })
    }
    /**
     * 功能列表相关
     */
	
    const functionList = ref([
        {text:'余额记录',icon:'../../static/images/index/icon31.png',url:''},
        {text:'余额记录',icon:'../../static/images/index/icon31.png',url:'/pages/balanceRecord/index'},
        {text:'消费记录',icon:'../../static/images/index/icon32.png',url:''},
        {text:'充值记录',icon:'../../static/images/index/icon33.png',url:''},
        {text:'账户共享',icon:'../../static/images/index/icon34.png',url:''},
        {text:'优惠卷',icon:'../../static/images/index/icon35.png',url:''},
        {text:'电子发票',icon:'../../static/images/index/icon36.png',url:''},
        {text:'联系客服',icon:'../../static/images/index/icon37.png',url:''},
        {text:'推广分佣',icon:'../../static/images/index/icon38.png',url:'/pages/login/index'},
        {text:'推广分佣',icon:'../../static/images/index/icon38.png',url:''},
    ])
    function navTo(itemUrl){
        if(itemUrl){
@@ -85,7 +79,7 @@
                            <image src="../../static/images/index/code1.png" alt=""></image>
                        </view>
                        <view v-else class="card-add">
                            <view @click="navToAddCard()">
                            <view @click="navTo('/pages/addCard/index')">
                                <image src="../../static/images/index/vip-add.png" alt=""></image>
                                <text>添加会员卡</text>
                            </view>
@@ -109,7 +103,7 @@
                </view>
            </view>
            <view class="function-box1">
                <view class="box1-bg box1-one">
                <view class="box1-bg box1-one" @click="navTo('/pages/sendWater/index')">
                    <image src="../../static/images/index/home21.png" alt=""></image>
                    <view>送水到家</view>
                </view>
@@ -119,13 +113,13 @@
                        <text>￥</text>
                        <text>120.00</text>
                    </view>
                    <view>
                    <view @click="navTo('/pages/recharge/index')">
                        充值
                    </view>
                </view>
                <view class="box1-bg box1-three">
                    <image src="../../static/images/index/icon23.png" alt=""></image>
                    <view>送水到家</view>
                    <view>扫码取水</view>
                </view>
            </view>
            <view class="function-box2">

 pages/preSendWater/index.vue

对比新文件
@@ -0,0 +1,39 @@
<script setup>
    function navTo(){
        uni.navigateTo({
            url:'/pages/address/index'
        })
    }
</script>
<template>
    <view class="container">
        <navbar title = '预约下单'></navbar>
        <view class="content">
            <view class="add-address" @click="navTo()">地址管理</view>
        </view>
    </view>
</template>

<style lang="scss">
    .container{
        width: 100%;
        height: 100vh;
        .content{
            width: 100%;
            height:calc(100vh - 176rpx);
            background:linear-gradient(to top,#FFFFFF,#E8EFFF);
            .add-address{
                width: 100%;
                padding-right:32rpx;
                box-sizing:border-box;
                height:94rpx;
                line-height:60rpx;
                font-size:26rpx;
                font-weight:600;
                color: #5EA1FA;
                display: flex;
                justify-content: flex-end;
            }
       }
   }
</style>

 pages/recharge/index.vue

@@ -1,13 +1,242 @@
<script setup>
    import{ ref ,onMounted} from 'vue'
	
    const choosedMoney = ref()
    const disabled = ref(true)
    //选择金额
    const moneyList = ref([
        {value:50,active:true},
        {value:100,active:false},
        {value:200,active:false},
        {value:500,active:false},
        {value:1000,active:false},
        {value:'其他金额',active:false},
    ])
    const activeStyle = ref({
        backgroundColor:'#5EADFF',
        color:'#fff'
    })
    function chooseMoney(index1){
        moneyList.value.forEach((item,index) =>{
            if(item.active == true){
                item.active = false
            }
        })
        moneyList.value[index1].active = true
        if(index1 == 5){
            disabled.value = false
            choosedMoney.value = ''
        }else{
            choosedMoney.value = moneyList.value[index1].value
            otherMoney.value = ''
            disabled.value = true
        }
    }
    //输入金额
    const otherMoney = ref()
    //支付方式
    const payMethod = ref()
    const payList = ref([
        {text:"支付宝支付",value:1,checked:true,img:'../../static/images/recharge/pay.png'},
        {text:"微信支付",value:2,checked:false,img:'../../static/images/recharge/wx.png'},
        {text:"余额",value:3,checked:false,img:'../../static/images/recharge/balance.png'},
    ])
    function choosePay(index1){
        payList.value.forEach((item,index) =>{
            if(item.checked == true){
                item.checked = false
            }
        })
        payList.value[index1].checked = true
        payMethod.value = payList.value[index1].value
    }
    function submit(){
        let money = ''
        if(disabled.value){
            money = choosedMoney.value
        }else{
            money = otherMoney.value
        }
        console.log('money',money)
    }
</script>
<template>
    <view class="container">
        <navbar title="绑定会员卡"></navbar>
        <navbar title="账户充值"></navbar>
        <view class="content">
            <view class="main">
                <view class="money">
                    <view class="money-title">
                        <view class="title-icon"></view>
                        <view class="title-text">充值金额</view>
                    </view>
                    <view class="money-list">
                        <block v-for="(item,index) in moneyList" :key="index">
                            <view class="money-box" :style="item.active ? activeStyle : ''" @click="chooseMoney(index)">￥{{item.value}}</view>
                        </block>
                    </view>
                </view>
                <view class="other-money">
                    <view class="money-title">
                        <view class="title-icon"></view>
                        <view class="title-text">其他金额</view>
                    </view>
                    <view class="money-input">
                        <input :disabled = 'disabled' :focus = '!disabled'  placeholder="请输入其他金额" v-model="otherMoney"/>
                    </view>
                </view>
                <view class="pay-methods">
                    <view class="money-title">
                        <view class="title-icon"></view>
                        <view class="title-text">请选择支付方式</view>
                    </view>
                    <view class="methods-list">
                        <block v-for="(item,index) in payList">
                            <view class="pay-item">
                                <view class="pay-item-right">
                                    <image :src="item.img" alt=""></image>
                                    <view>{{item.text}}</view>
                                </view>
                                <radio :value="item.value" :checked="item.checked" @click="choosePay(index)"/>
                            </view>
                        </block>
                    </view>
                </view>
            </view>
            <view class="submit-btn" @click="submit()">立即充值</view>
        </view>
    </view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	       
    .container{
        width: 100%;
        height: 100vh;
        .content{
            width: 100%;
            height:calc(100vh - 176rpx);
            background:linear-gradient(to top,#FFFFFF,#E8EFFF);
            overflow-y: scroll;
            .main{
                width: 686rpx;
                height:1262rpx;
                background: #FFFFFF;
                border-top-right-radius: 24rpx;
                border-top-left-radius: 24rpx;
                margin: 20rpx auto 0;
                padding:0 25rpx;
                box-sizing: border-box;
                .money{
                    width: 100%;
                    height:378rpx;
                    padding-top: 58rpx;
                    // background: #65ffb2;
                    box-sizing: border-box;
                    .money-list{
                        margin-top:40rpx;
                        width:100%;
                        height: 240rpx;
                        padding: 0 20rpx;
                        box-sizing: border-box;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        flex-wrap: wrap;
                        .money-box{
                            width:160rpx;
                            height: 100rpx;
                            border:2rpx solid #75C8EB;
                            border-radius: 8rpx;
                            font-weight: 300;
                            font-size: 28rpx;
                            color: #4EB6E3;
                            text-align: center;
                            line-height: 100rpx;
                        }
                    }
                }
                .other-money{
                    width: 100%;
                    height:164rpx;
                    margin-top:58rpx;
                    .money-input{
                        margin:40rpx auto 0;
                        width:calc(100% - 40rpx);
                        height: 80rpx;
                        box-sizing: border-box;
                        border-radius:8rpx;
                        border: 2rpx solid #75C8EB;
                        input{
                            width:94%;
                            height: 80rpx;
                            margin-left:6%;
                        }
                    }
                }
                .pay-methods{
                    width: 100%;
                    margin-top:58rpx;
                    .methods-list{
                        margin-top:40rpx;
                        width: 100%;
                        padding: 0 20rpx;
                        box-sizing: border-box;
                        // background: #49B4E3;
                        height:216rpx;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        align-items: flex-start;
                        .pay-item{
                            width:100%;
                            display: flex;
                            justify-content:space-between;
                            align-items: center;
                            .pay-item-right{
                                display: flex;
                                image{
                                    width: 42rpx;
                                    height: 42rpx;
                                    margin-right:34rpx;
                                }
                                view{
                                    font-weight: 300;
                                    font-size: 28rpx;
                                    color: #111111;
                                }
                            }
                        }
                    }
                }
            }
        }
        .submit-btn{
            width: 686rpx;
            height: 98rpx;
            background:#5EA1FA;
            border-radius:50rpx;
            text-align: center;
            line-height: 98rpx;
            letter-spacing:3rpx;
            margin:0 auto;
            font-weight: 300;
            font-size: 36rpx;
            color: #FFFFFF;
        }
    }
    .money-title{
        display: flex;
        align-items: center;
        .title-icon{
            width:8rpx;
            height:36rpx;
            background:#49B4E3;
            margin-right:12rpx;
        }
        .title-text{
            font-weight: 300;
            font-size: 28rpx;
            color: #000000;
        }
    }
</style>

 pages/sendWater/index.vue

对比新文件
@@ -0,0 +1,73 @@
<script setup>
    function navTo(){
        uni.navigateTo({
            url:'/pages/preSendWater/index'
        })
    }
</script>
<template>
    <view class="container">
        <navbar title = '送水到家'></navbar>
        <view class="content">
            <view class="nav-container">
                <view class="nav-title">
                    <view class="title-one" @click="navTo()">立即预约</view>
                    <view class="title-text">待配送</view>
                    <view class="title-text">已完成</view>
                </view>
                <view class="main1"></view>
            </view>
        </view>
    </view>
</template>

<style lang='scss'>
    .container{
        width: 100%;
        height: 100vh;
        .content{
            width: 100%;
            height:calc(100vh - 176rpx);
            background:linear-gradient(to top,#FFFFFF,#E8EFFF);
            .nav-container{
                height: 160rpx;
                width:100%;
                padding: 20rpx 0;
                box-sizing: border-box;
                .nav-title{
                    width: 100%;
                    background: #FFF;
                    padding: 0 32rpx;
                    box-sizing: border-box;
                    height: 120rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .title-one{
                        height: 60rpx;
                        width: 160rpx;
                        background: #DEEDFF;
                        border: 2rpx solid #4AA3FF;
                        text-align: center;
                        line-height:60rpx;
                        border-radius:24rpx;
                        font-weight: 300;
                        font-size: 28rpx;
                        color: #007EFF;
                    }
                    .title-text{
                        font-weight: 300;
                        font-size: 28rpx;
                        color: #000000;
                        width:120rpx;
                        height:88rpx;
                        text-align: center;
                        line-height:88rpx;
                        border-bottom:6rpx solid #226AC9;
                    }
                }
            }
			
        }
    }       
</style>

 static/images/recharge/balance.png

 static/images/recharge/pay.png

 static/images/recharge/wx.png

 unpackage/dist/dev/mp-weixin/app.js

@@ -7,6 +7,9 @@
  "./pages/addCard/index.js";
  "./pages/balanceRecord/index.js";
  "./pages/recharge/index.js";
  "./pages/sendWater/index.js";
  "./pages/preSendWater/index.js";
  "./pages/address/index.js";
}
const _sfc_main = {
  __name: "App",

 unpackage/dist/dev/mp-weixin/app.json

@@ -3,7 +3,10 @@
    "pages/index/index",
    "pages/addCard/index",
    "pages/balanceRecord/index",
    "pages/recharge/index"
    "pages/recharge/index",
    "pages/sendWater/index",
    "pages/preSendWater/index",
    "pages/address/index"
  ],
  "window": {
    "navigationStyle": "custom"

 unpackage/dist/dev/mp-weixin/common/vendor.js

@@ -75,8 +75,8 @@
  return str.charAt(0).toUpperCase() + str.slice(1);
});
const toHandlerKey = cacheStringFunction((str) => {
  const s = str ? `on${capitalize(str)}` : ``;
  return s;
  const s2 = str ? `on${capitalize(str)}` : ``;
  return s2;
});
const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
const invokeArrayFns$1 = (fns, arg) => {
@@ -99,6 +99,36 @@
const getGlobalThis = () => {
  return _globalThis || (_globalThis = typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : {});
};
function normalizeStyle(value) {
  if (isArray(value)) {
    const res = {};
    for (let i = 0; i < value.length; i++) {
      const item = value[i];
      const normalized = isString(item) ? parseStringStyle(item) : normalizeStyle(item);
      if (normalized) {
        for (const key in normalized) {
          res[key] = normalized[key];
        }
      }
    }
    return res;
  } else if (isString(value) || isObject(value)) {
    return value;
  }
}
const listDelimiterRE = /;(?![^(]*\))/g;
const propertyDelimiterRE = /:([^]+)/;
const styleCommentRE = /\/\*[^]*?\*\//g;
function parseStringStyle(cssText) {
  const ret = {};
  cssText.replace(styleCommentRE, "").split(listDelimiterRE).forEach((item) => {
    if (item) {
      const tmp = item.split(propertyDelimiterRE);
      tmp.length > 1 && (ret[tmp[0].trim()] = tmp[1].trim());
    }
  });
  return ret;
}
const toDisplayString = (val) => {
  return isString(val) ? val : val == null ? "" : isArray(val) || isObject(val) && (val.toString === objectToString || !isFunction(val.toString)) ? JSON.stringify(val, replacer, 2) : String(val);
};
@@ -6744,8 +6774,25 @@
  }
  return ret;
}
function stringifyStyle(value) {
  if (isString(value)) {
    return value;
  }
  return stringify(normalizeStyle(value));
}
function stringify(styles) {
  let ret = "";
  if (!styles || isString(styles)) {
    return ret;
  }
  for (const key in styles) {
    ret += `${key.startsWith(`--`) ? key : hyphenate(key)}:${styles[key]};`;
  }
  return ret;
}
const o = (value, key) => vOn(value, key);
const f = (source, renderItem) => vFor(source, renderItem);
const s = (value) => stringifyStyle(value);
const e = (target, ...sources) => extend(target, ...sources);
const t = (val) => toDisplayString(val);
const p = (props) => renderProps(props);
@@ -7599,5 +7646,6 @@
exports.p = p;
exports.ref = ref;
exports.resolveComponent = resolveComponent;
exports.s = s;
exports.t = t;
exports.wx$1 = wx$1;

 unpackage/dist/dev/mp-weixin/pages/addCard/index.js

@@ -13,7 +13,7 @@
  __name: "index",
  setup(__props) {
    const form = common_vendor.ref({
      waterCardNumber: "",
      waterwaterCardNumber: "",
      userName: "",
      userPhone: "",
      address: "",
@@ -29,19 +29,19 @@
        a: common_vendor.p({
          title: "绑定会员卡"
        }),
        b: form.value.cardNumber,
        c: common_vendor.o(($event) => form.value.cardNumber = $event.detail.value),
        b: form.value.waterCardNumber,
        c: common_vendor.o(($event) => form.value.waterCardNumber = $event.detail.value),
        d: common_assets._imports_0$2,
        e: form.value.cardNumber,
        f: common_vendor.o(($event) => form.value.cardNumber = $event.detail.value),
        g: form.value.cardNumber,
        h: common_vendor.o(($event) => form.value.cardNumber = $event.detail.value),
        i: form.value.cardNumber,
        j: common_vendor.o(($event) => form.value.cardNumber = $event.detail.value),
        k: form.value.cardNumber,
        l: common_vendor.o(($event) => form.value.cardNumber = $event.detail.value),
        m: form.value.cardNumber,
        n: common_vendor.o(($event) => form.value.cardNumber = $event.detail.value),
        e: form.value.waterCardNumber,
        f: common_vendor.o(($event) => form.value.waterCardNumber = $event.detail.value),
        g: form.value.waterCardNumber,
        h: common_vendor.o(($event) => form.value.waterCardNumber = $event.detail.value),
        i: form.value.waterCardNumber,
        j: common_vendor.o(($event) => form.value.waterCardNumber = $event.detail.value),
        k: form.value.waterCardNumber,
        l: common_vendor.o(($event) => form.value.waterCardNumber = $event.detail.value),
        m: form.value.waterCardNumber,
        n: common_vendor.o(($event) => form.value.waterCardNumber = $event.detail.value),
        o: common_vendor.o(($event) => submit())
      };
    };

 unpackage/dist/dev/mp-weixin/pages/address/index.js

对比新文件
@@ -0,0 +1,20 @@
"use strict";
const common_vendor = require("../../common/vendor.js");
const _sfc_main = {};
if (!Array) {
  const _easycom_navbar2 = common_vendor.resolveComponent("navbar");
  _easycom_navbar2();
}
const _easycom_navbar = () => "../../components/navbar/navbar.js";
if (!Math) {
  _easycom_navbar();
}
function _sfc_render(_ctx, _cache) {
  return {
    a: common_vendor.p({
      title: "地址管理"
    })
  };
}
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
wx.createPage(MiniProgramPage);

 unpackage/dist/dev/mp-weixin/pages/address/index.json

对比新文件
@@ -0,0 +1,6 @@
{
  "navigationStyle": "custom",
  "usingComponents": {
    "navbar": "../../components/navbar/navbar"
  }
}

 unpackage/dist/dev/mp-weixin/pages/address/index.wxml

对比新文件
@@ -0,0 +1 @@
<view class="container"><navbar wx:if="{{a}}" u-i="696da406-0" bind:__l="__l" u-p="{{a}}"></navbar><view class="content"><view class="main"></view></view></view>

 unpackage/dist/dev/mp-weixin/pages/address/index.wxss

对比新文件
@@ -0,0 +1,41 @@
/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */
/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */
/* 颜色变量 */
/* 行为相关颜色 */
/* 文字基本颜色 */
/* 背景颜色 */
/* 边框颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
/* 透明度 */
/* 文章场景相关 */
.container {
  width: 100%;
  height: 100vh;
}
.container .content {
  width: 100%;
  height: calc(100vh - 176rpx);
  background: linear-gradient(to top, #FFFFFF, #E8EFFF);
  padding-top: 20rpx;
}
.container .content .main {
  width: 686rpx;
  height: 1262rpx;
  background: #ffaaff;
  margin: 0 auto;
}

 unpackage/dist/dev/mp-weixin/pages/index/index.js

@@ -23,20 +23,15 @@
        isVip.value = false;
      }
    }
    function navToAddCard() {
      common_vendor.index.navigateTo({
        url: "/pages/addCard/index"
      });
    }
    const functionList = common_vendor.ref([
      { text: "余额记录", icon: "../../static/images/index/icon31.png", url: "" },
      { text: "余额记录", icon: "../../static/images/index/icon31.png", url: "/pages/balanceRecord/index" },
      { text: "消费记录", icon: "../../static/images/index/icon32.png", url: "" },
      { text: "充值记录", icon: "../../static/images/index/icon33.png", url: "" },
      { text: "账户共享", icon: "../../static/images/index/icon34.png", url: "" },
      { text: "优惠卷", icon: "../../static/images/index/icon35.png", url: "" },
      { text: "电子发票", icon: "../../static/images/index/icon36.png", url: "" },
      { text: "联系客服", icon: "../../static/images/index/icon37.png", url: "" },
      { text: "推广分佣", icon: "../../static/images/index/icon38.png", url: "/pages/login/index" }
      { text: "推广分佣", icon: "../../static/images/index/icon38.png", url: "" }
    ]);
    function navTo(itemUrl) {
      if (itemUrl) {
@@ -56,14 +51,16 @@
        b: common_assets._imports_0$1
      } : {
        c: common_assets._imports_1,
        d: common_vendor.o(($event) => navToAddCard())
        d: common_vendor.o(($event) => navTo("/pages/addCard/index"))
      }, {
        e: common_assets._imports_2,
        f: common_assets._imports_3,
        g: topHeight.value + "rpx",
        h: common_assets._imports_4,
        i: common_assets._imports_5,
        j: common_vendor.f(functionList.value, (item, index, i0) => {
        i: common_vendor.o(($event) => navTo("/pages/sendWater/index")),
        j: common_vendor.o(($event) => navTo("/pages/recharge/index")),
        k: common_assets._imports_5,
        l: common_vendor.f(functionList.value, (item, index, i0) => {
          return {
            a: item.icon,
            b: common_vendor.t(item.text),
@@ -71,11 +68,11 @@
            d: index
          };
        }),
        k: common_assets._imports_6,
        l: common_assets._imports_7,
        m: common_assets._imports_8,
        n: common_assets._imports_9,
        o: common_assets._imports_8
        m: common_assets._imports_6,
        n: common_assets._imports_7,
        o: common_assets._imports_8,
        p: common_assets._imports_9,
        q: common_assets._imports_8
      });
    };
  }

 unpackage/dist/dev/mp-weixin/pages/index/index.wxml

@@ -1 +1 @@
<view class="container data-v-1cf27b2a"><view class="content data-v-1cf27b2a"><view class="card-box data-v-1cf27b2a" style="{{'padding-top:' + g}}"><view class="card data-v-1cf27b2a"><view class="card-content data-v-1cf27b2a"><view wx:if="{{a}}" class="card-title data-v-1cf27b2a"><view class="data-v-1cf27b2a">会员卡</view><image class="data-v-1cf27b2a" src="{{b}}" alt=""></image></view><view wx:else class="card-add data-v-1cf27b2a"><view class="data-v-1cf27b2a" bindtap="{{d}}"><image class="data-v-1cf27b2a" src="{{c}}" alt=""></image><text class="data-v-1cf27b2a">添加会员卡</text></view></view><view class="card-info data-v-1cf27b2a"><view class="info-head data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{e}}" alt=""></image></view><view class="info-content data-v-1cf27b2a"><view class="info-content-top data-v-1cf27b2a"><view class="data-v-1cf27b2a">张大左</view><view class="data-v-1cf27b2a">vip1</view></view><view class="info-content-bottom data-v-1cf27b2a">YL123654987521</view></view><view class="info-more data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{f}}"></image></view></view><view class="card-bottom data-v-1cf27b2a"><view class="data-v-1cf27b2a">我的积分：200</view><view class="data-v-1cf27b2a">消费折扣：9.9折</view></view></view></view></view><view class="function-box1 data-v-1cf27b2a"><view class="box1-bg box1-one data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{h}}" alt=""></image><view class="data-v-1cf27b2a">送水到家</view></view><view class="box1-bg box1-two data-v-1cf27b2a"><view class="data-v-1cf27b2a">账户余额（元)</view><view class="recharge data-v-1cf27b2a"><text class="data-v-1cf27b2a">￥</text><text class="data-v-1cf27b2a">120.00</text></view><view class="data-v-1cf27b2a"> 充值 </view></view><view class="box1-bg box1-three data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{i}}" alt=""></image><view class="data-v-1cf27b2a">送水到家</view></view></view><view class="function-box2 data-v-1cf27b2a"><view class="box2-title data-v-1cf27b2a"><text class="data-v-1cf27b2a">功能列表</text></view><view class="box2-content data-v-1cf27b2a"><block wx:for="{{j}}" wx:for-item="item" wx:key="d"><view class="box2-item data-v-1cf27b2a" bindtap="{{item.c}}"><image class="data-v-1cf27b2a" src="{{item.a}}" alt=""></image><view class="box2-item-text data-v-1cf27b2a">{{item.b}}</view></view></block></view></view><view class="advertisement-box data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{k}}" alt=""></image></view><view class="service-box data-v-1cf27b2a"><view class="service-title data-v-1cf27b2a"><text class="data-v-1cf27b2a">服务指南</text></view><view class="service-content data-v-1cf27b2a"><view class="service-bg data-v-1cf27b2a"><view class="data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{l}}" alt=""></image><text class="data-v-1cf27b2a">附近站点</text></view><view class="service-info data-v-1cf27b2a">蔡家供水服务中心正在营业中……</view><view class="data-v-1cf27b2a"><text class="data-v-1cf27b2a">查看更多</text><image class="data-v-1cf27b2a" src="{{m}}" alt=""></image></view></view><view class="service-bg data-v-1cf27b2a"><view class="data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{n}}" alt=""></image><text class="data-v-1cf27b2a">公示公告</text></view><view class="service-info data-v-1cf27b2a">停水公告的部分摘要的内容展示……</view><view class="data-v-1cf27b2a"><text class="data-v-1cf27b2a">查看更多</text><image class="data-v-1cf27b2a" src="{{o}}" alt=""></image></view></view></view></view></view></view>
<view class="container data-v-1cf27b2a"><view class="content data-v-1cf27b2a"><view class="card-box data-v-1cf27b2a" style="{{'padding-top:' + g}}"><view class="card data-v-1cf27b2a"><view class="card-content data-v-1cf27b2a"><view wx:if="{{a}}" class="card-title data-v-1cf27b2a"><view class="data-v-1cf27b2a">会员卡</view><image class="data-v-1cf27b2a" src="{{b}}" alt=""></image></view><view wx:else class="card-add data-v-1cf27b2a"><view class="data-v-1cf27b2a" bindtap="{{d}}"><image class="data-v-1cf27b2a" src="{{c}}" alt=""></image><text class="data-v-1cf27b2a">添加会员卡</text></view></view><view class="card-info data-v-1cf27b2a"><view class="info-head data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{e}}" alt=""></image></view><view class="info-content data-v-1cf27b2a"><view class="info-content-top data-v-1cf27b2a"><view class="data-v-1cf27b2a">张大左</view><view class="data-v-1cf27b2a">vip1</view></view><view class="info-content-bottom data-v-1cf27b2a">YL123654987521</view></view><view class="info-more data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{f}}"></image></view></view><view class="card-bottom data-v-1cf27b2a"><view class="data-v-1cf27b2a">我的积分：200</view><view class="data-v-1cf27b2a">消费折扣：9.9折</view></view></view></view></view><view class="function-box1 data-v-1cf27b2a"><view class="box1-bg box1-one data-v-1cf27b2a" bindtap="{{i}}"><image class="data-v-1cf27b2a" src="{{h}}" alt=""></image><view class="data-v-1cf27b2a">送水到家</view></view><view class="box1-bg box1-two data-v-1cf27b2a"><view class="data-v-1cf27b2a">账户余额（元)</view><view class="recharge data-v-1cf27b2a"><text class="data-v-1cf27b2a">￥</text><text class="data-v-1cf27b2a">120.00</text></view><view class="data-v-1cf27b2a" bindtap="{{j}}"> 充值 </view></view><view class="box1-bg box1-three data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{k}}" alt=""></image><view class="data-v-1cf27b2a">扫码取水</view></view></view><view class="function-box2 data-v-1cf27b2a"><view class="box2-title data-v-1cf27b2a"><text class="data-v-1cf27b2a">功能列表</text></view><view class="box2-content data-v-1cf27b2a"><block wx:for="{{l}}" wx:for-item="item" wx:key="d"><view class="box2-item data-v-1cf27b2a" bindtap="{{item.c}}"><image class="data-v-1cf27b2a" src="{{item.a}}" alt=""></image><view class="box2-item-text data-v-1cf27b2a">{{item.b}}</view></view></block></view></view><view class="advertisement-box data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{m}}" alt=""></image></view><view class="service-box data-v-1cf27b2a"><view class="service-title data-v-1cf27b2a"><text class="data-v-1cf27b2a">服务指南</text></view><view class="service-content data-v-1cf27b2a"><view class="service-bg data-v-1cf27b2a"><view class="data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{n}}" alt=""></image><text class="data-v-1cf27b2a">附近站点</text></view><view class="service-info data-v-1cf27b2a">蔡家供水服务中心正在营业中……</view><view class="data-v-1cf27b2a"><text class="data-v-1cf27b2a">查看更多</text><image class="data-v-1cf27b2a" src="{{o}}" alt=""></image></view></view><view class="service-bg data-v-1cf27b2a"><view class="data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{p}}" alt=""></image><text class="data-v-1cf27b2a">公示公告</text></view><view class="service-info data-v-1cf27b2a">停水公告的部分摘要的内容展示……</view><view class="data-v-1cf27b2a"><text class="data-v-1cf27b2a">查看更多</text><image class="data-v-1cf27b2a" src="{{q}}" alt=""></image></view></view></view></view></view></view>

 unpackage/dist/dev/mp-weixin/pages/preSendWater/index.js

对比新文件
@@ -0,0 +1,29 @@
"use strict";
const common_vendor = require("../../common/vendor.js");
if (!Array) {
  const _easycom_navbar2 = common_vendor.resolveComponent("navbar");
  _easycom_navbar2();
}
const _easycom_navbar = () => "../../components/navbar/navbar.js";
if (!Math) {
  _easycom_navbar();
}
const _sfc_main = {
  __name: "index",
  setup(__props) {
    function navTo() {
      common_vendor.index.navigateTo({
        url: "/pages/address/index"
      });
    }
    return (_ctx, _cache) => {
      return {
        a: common_vendor.p({
          title: "预约下单"
        }),
        b: common_vendor.o(($event) => navTo())
      };
    };
  }
};
wx.createPage(_sfc_main);

 unpackage/dist/dev/mp-weixin/pages/preSendWater/index.json

对比新文件
@@ -0,0 +1,6 @@
{
  "navigationStyle": "custom",
  "usingComponents": {
    "navbar": "../../components/navbar/navbar"
  }
}

 unpackage/dist/dev/mp-weixin/pages/preSendWater/index.wxml

对比新文件
@@ -0,0 +1 @@
<view class="container"><navbar wx:if="{{a}}" u-i="0c68eff9-0" bind:__l="__l" u-p="{{a}}"></navbar><view class="content"><view class="add-address" bindtap="{{b}}">地址管理</view></view></view>

 unpackage/dist/dev/mp-weixin/pages/preSendWater/index.wxss

对比新文件
@@ -0,0 +1,46 @@
/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */
/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */
/* 颜色变量 */
/* 行为相关颜色 */
/* 文字基本颜色 */
/* 背景颜色 */
/* 边框颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
/* 透明度 */
/* 文章场景相关 */
.container {
  width: 100%;
  height: 100vh;
}
.container .content {
  width: 100%;
  height: calc(100vh - 176rpx);
  background: linear-gradient(to top, #FFFFFF, #E8EFFF);
}
.container .content .add-address {
  width: 100%;
  padding-right: 32rpx;
  box-sizing: border-box;
  height: 94rpx;
  line-height: 60rpx;
  font-size: 26rpx;
  font-weight: 600;
  color: #5EA1FA;
  display: flex;
  justify-content: flex-end;
}

 unpackage/dist/dev/mp-weixin/pages/recharge/index.js

@@ -1,6 +1,5 @@
"use strict";
const common_vendor = require("../../common/vendor.js");
const _sfc_main = {};
if (!Array) {
  const _easycom_navbar2 = common_vendor.resolveComponent("navbar");
  _easycom_navbar2();
@@ -9,12 +8,94 @@
if (!Math) {
  _easycom_navbar();
}
function _sfc_render(_ctx, _cache) {
  return {
    a: common_vendor.p({
      title: "绑定会员卡"
    })
  };
}
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
const _sfc_main = {
  __name: "index",
  setup(__props) {
    const choosedMoney = common_vendor.ref();
    const disabled = common_vendor.ref(true);
    const moneyList = common_vendor.ref([
      { value: 50, active: true },
      { value: 100, active: false },
      { value: 200, active: false },
      { value: 500, active: false },
      { value: 1e3, active: false },
      { value: "其他金额", active: false }
    ]);
    const activeStyle = common_vendor.ref({
      backgroundColor: "#5EADFF",
      color: "#fff"
    });
    function chooseMoney(index1) {
      moneyList.value.forEach((item, index) => {
        if (item.active == true) {
          item.active = false;
        }
      });
      moneyList.value[index1].active = true;
      if (index1 == 5) {
        disabled.value = false;
        choosedMoney.value = "";
      } else {
        choosedMoney.value = moneyList.value[index1].value;
        otherMoney.value = "";
        disabled.value = true;
      }
    }
    const otherMoney = common_vendor.ref();
    const payMethod = common_vendor.ref();
    const payList = common_vendor.ref([
      { text: "支付宝支付", value: 1, checked: true, img: "../../static/images/recharge/pay.png" },
      { text: "微信支付", value: 2, checked: false, img: "../../static/images/recharge/wx.png" },
      { text: "余额", value: 3, checked: false, img: "../../static/images/recharge/balance.png" }
    ]);
    function choosePay(index1) {
      payList.value.forEach((item, index) => {
        if (item.checked == true) {
          item.checked = false;
        }
      });
      payList.value[index1].checked = true;
      payMethod.value = payList.value[index1].value;
    }
    function submit() {
      let money = "";
      if (disabled.value) {
        money = choosedMoney.value;
      } else {
        money = otherMoney.value;
      }
      console.log("money", money);
    }
    return (_ctx, _cache) => {
      return {
        a: common_vendor.p({
          title: "账户充值"
        }),
        b: common_vendor.f(moneyList.value, (item, index, i0) => {
          return {
            a: common_vendor.t(item.value),
            b: common_vendor.s(item.active ? activeStyle.value : ""),
            c: common_vendor.o(($event) => chooseMoney(index), index),
            d: index
          };
        }),
        c: disabled.value,
        d: !disabled.value,
        e: otherMoney.value,
        f: common_vendor.o(($event) => otherMoney.value = $event.detail.value),
        g: common_vendor.f(payList.value, (item, index, i0) => {
          return {
            a: item.img,
            b: common_vendor.t(item.text),
            c: item.value,
            d: item.checked,
            e: common_vendor.o(($event) => choosePay(index))
          };
        }),
        h: common_vendor.o(($event) => submit())
      };
    };
  }
};
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-f06186df"]]);
wx.createPage(MiniProgramPage);

 unpackage/dist/dev/mp-weixin/pages/recharge/index.json

@@ -1,5 +1,5 @@
{
  "navigationBarTitleText": "",
  "navigationStyle": "custom",
  "usingComponents": {
    "navbar": "../../components/navbar/navbar"
  }

 unpackage/dist/dev/mp-weixin/pages/recharge/index.wxml

@@ -1 +1 @@
<view class="container"><navbar wx:if="{{a}}" u-i="a5181a58-0" bind:__l="__l" u-p="{{a}}"></navbar></view>
<view class="container data-v-f06186df"><navbar wx:if="{{a}}" class="data-v-f06186df" u-i="f06186df-0" bind:__l="__l" u-p="{{a}}"></navbar><view class="content data-v-f06186df"><view class="main data-v-f06186df"><view class="money data-v-f06186df"><view class="money-title data-v-f06186df"><view class="title-icon data-v-f06186df"></view><view class="title-text data-v-f06186df">充值金额</view></view><view class="money-list data-v-f06186df"><block wx:for="{{b}}" wx:for-item="item" wx:key="d"><view class="money-box data-v-f06186df" style="{{item.b}}" bindtap="{{item.c}}">￥{{item.a}}</view></block></view></view><view class="other-money data-v-f06186df"><view class="money-title data-v-f06186df"><view class="title-icon data-v-f06186df"></view><view class="title-text data-v-f06186df">其他金额</view></view><view class="money-input data-v-f06186df"><input class="data-v-f06186df" disabled="{{c}}" focus="{{d}}" placeholder="请输入其他金额" value="{{e}}" bindinput="{{f}}"/></view></view><view class="pay-methods data-v-f06186df"><view class="money-title data-v-f06186df"><view class="title-icon data-v-f06186df"></view><view class="title-text data-v-f06186df">请选择支付方式</view></view><view class="methods-list data-v-f06186df"><block wx:for="{{g}}" wx:for-item="item"><view class="pay-item data-v-f06186df"><view class="pay-item-right data-v-f06186df"><image class="data-v-f06186df" src="{{item.a}}" alt=""></image><view class="data-v-f06186df">{{item.b}}</view></view><radio class="data-v-f06186df" value="{{item.c}}" checked="{{item.d}}" bindtap="{{item.e}}"/></view></block></view></view></view><view class="submit-btn data-v-f06186df" bindtap="{{h}}">立即充值</view></view></view>

 unpackage/dist/dev/mp-weixin/pages/recharge/index.wxss

@@ -0,0 +1,153 @@
/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */
/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */
/* 颜色变量 */
/* 行为相关颜色 */
/* 文字基本颜色 */
/* 背景颜色 */
/* 边框颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
/* 透明度 */
/* 文章场景相关 */
.container.data-v-f06186df {
  width: 100%;
  height: 100vh;
}
.container .content.data-v-f06186df {
  width: 100%;
  height: calc(100vh - 176rpx);
  background: linear-gradient(to top, #FFFFFF, #E8EFFF);
  overflow-y: scroll;
}
.container .content .main.data-v-f06186df {
  width: 686rpx;
  height: 1262rpx;
  background: #FFFFFF;
  border-top-right-radius: 24rpx;
  border-top-left-radius: 24rpx;
  margin: 20rpx auto 0;
  padding: 0 25rpx;
  box-sizing: border-box;
}
.container .content .main .money.data-v-f06186df {
  width: 100%;
  height: 378rpx;
  padding-top: 58rpx;
  box-sizing: border-box;
}
.container .content .main .money .money-list.data-v-f06186df {
  margin-top: 40rpx;
  width: 100%;
  height: 240rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.container .content .main .money .money-list .money-box.data-v-f06186df {
  width: 160rpx;
  height: 100rpx;
  border: 2rpx solid #75C8EB;
  border-radius: 8rpx;
  font-weight: 300;
  font-size: 28rpx;
  color: #4EB6E3;
  text-align: center;
  line-height: 100rpx;
}
.container .content .main .other-money.data-v-f06186df {
  width: 100%;
  height: 164rpx;
  margin-top: 58rpx;
}
.container .content .main .other-money .money-input.data-v-f06186df {
  margin: 40rpx auto 0;
  width: calc(100% - 40rpx);
  height: 80rpx;
  box-sizing: border-box;
  border-radius: 8rpx;
  border: 2rpx solid #75C8EB;
}
.container .content .main .other-money .money-input input.data-v-f06186df {
  width: 94%;
  height: 80rpx;
  margin-left: 6%;
}
.container .content .main .pay-methods.data-v-f06186df {
  width: 100%;
  margin-top: 58rpx;
}
.container .content .main .pay-methods .methods-list.data-v-f06186df {
  margin-top: 40rpx;
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
  height: 216rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.container .content .main .pay-methods .methods-list .pay-item.data-v-f06186df {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container .content .main .pay-methods .methods-list .pay-item .pay-item-right.data-v-f06186df {
  display: flex;
}
.container .content .main .pay-methods .methods-list .pay-item .pay-item-right image.data-v-f06186df {
  width: 42rpx;
  height: 42rpx;
  margin-right: 34rpx;
}
.container .content .main .pay-methods .methods-list .pay-item .pay-item-right view.data-v-f06186df {
  font-weight: 300;
  font-size: 28rpx;
  color: #111111;
}
.container .submit-btn.data-v-f06186df {
  width: 686rpx;
  height: 98rpx;
  background: #5EA1FA;
  border-radius: 50rpx;
  text-align: center;
  line-height: 98rpx;
  letter-spacing: 3rpx;
  margin: 0 auto;
  font-weight: 300;
  font-size: 36rpx;
  color: #FFFFFF;
}
.money-title.data-v-f06186df {
  display: flex;
  align-items: center;
}
.money-title .title-icon.data-v-f06186df {
  width: 8rpx;
  height: 36rpx;
  background: #49B4E3;
  margin-right: 12rpx;
}
.money-title .title-text.data-v-f06186df {
  font-weight: 300;
  font-size: 28rpx;
  color: #000000;
}

 unpackage/dist/dev/mp-weixin/pages/sendWater/index.js

对比新文件
@@ -0,0 +1,29 @@
"use strict";
const common_vendor = require("../../common/vendor.js");
if (!Array) {
  const _easycom_navbar2 = common_vendor.resolveComponent("navbar");
  _easycom_navbar2();
}
const _easycom_navbar = () => "../../components/navbar/navbar.js";
if (!Math) {
  _easycom_navbar();
}
const _sfc_main = {
  __name: "index",
  setup(__props) {
    function navTo() {
      common_vendor.index.navigateTo({
        url: "/pages/preSendWater/index"
      });
    }
    return (_ctx, _cache) => {
      return {
        a: common_vendor.p({
          title: "送水到家"
        }),
        b: common_vendor.o(($event) => navTo())
      };
    };
  }
};
wx.createPage(_sfc_main);

 unpackage/dist/dev/mp-weixin/pages/sendWater/index.json

对比新文件
@@ -0,0 +1,6 @@
{
  "navigationStyle": "custom",
  "usingComponents": {
    "navbar": "../../components/navbar/navbar"
  }
}

 unpackage/dist/dev/mp-weixin/pages/sendWater/index.wxml

对比新文件
@@ -0,0 +1 @@
<view class="container"><navbar wx:if="{{a}}" u-i="5d3da990-0" bind:__l="__l" u-p="{{a}}"></navbar><view class="content"><view class="nav-container"><view class="nav-title"><view class="title-one" bindtap="{{b}}">立即预约</view><view class="title-text">待配送</view><view class="title-text">已完成</view></view><view class="main1"></view></view></view></view>

 unpackage/dist/dev/mp-weixin/pages/sendWater/index.wxss

对比新文件
@@ -0,0 +1,72 @@
/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */
/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */
/* 颜色变量 */
/* 行为相关颜色 */
/* 文字基本颜色 */
/* 背景颜色 */
/* 边框颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
/* 透明度 */
/* 文章场景相关 */
.container {
  width: 100%;
  height: 100vh;
}
.container .content {
  width: 100%;
  height: calc(100vh - 176rpx);
  background: linear-gradient(to top, #FFFFFF, #E8EFFF);
}
.container .content .nav-container {
  height: 160rpx;
  width: 100%;
  padding: 20rpx 0;
  box-sizing: border-box;
}
.container .content .nav-container .nav-title {
  width: 100%;
  background: #FFF;
  padding: 0 32rpx;
  box-sizing: border-box;
  height: 120rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container .content .nav-container .nav-title .title-one {
  height: 60rpx;
  width: 160rpx;
  background: #DEEDFF;
  border: 2rpx solid #4AA3FF;
  text-align: center;
  line-height: 60rpx;
  border-radius: 24rpx;
  font-weight: 300;
  font-size: 28rpx;
  color: #007EFF;
}
.container .content .nav-container .nav-title .title-text {
  font-weight: 300;
  font-size: 28rpx;
  color: #000000;
  width: 120rpx;
  height: 88rpx;
  text-align: center;
  line-height: 88rpx;
  border-bottom: 6rpx solid #226AC9;
}

 unpackage/dist/dev/mp-weixin/static/images/recharge/balance.png

 unpackage/dist/dev/mp-weixin/static/images/recharge/pay.png

 unpackage/dist/dev/mp-weixin/static/images/recharge/wx.png