.

src/locales/zh.json

@@ -20,7 +20,8 @@
         "payMethodName": {
             "balance": "余额支付"
         },
-        "payNow": "立即支付"
+        "payNow": "立即支付",
+        "totalPayment": "实际支付"
     },
     "balance": {
         "symbol": "¥",
@@ -32,7 +33,8 @@
         "recharge": "充值"
     },
     "user": {
-        "wallet": "我的钱包"
+        "wallet": "我的钱包",
+        "profile": "编辑资料"
     },
     "product": {
         "detail": "商品详情",

src/main.js

@@ -9,6 +9,7 @@ import i18n from './locales'
 import Vant from 'vant'
 import { ConfigProvider } from 'vant'
 import { useDark } from '@vueuse/core'
+import toast from '@/utils/toast'
 
 import 'normalize.css/normalize.css'
 
@@ -43,6 +44,7 @@ app.use(router)
 app.use(http)
 app.use(Vant)
 app.use(ConfigProvider)
+app.use(toast)
 app.mixin(common)
 
 // ionic components

src/styles/main.less

@@ -18,12 +18,11 @@ body {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
-*::-webkit-scrollbar {
-    display: none;
-}
+
 ion-content {
     &::-webkit-scrollbar {
         display: none;
+        scrollbar-width: none;
     }
 }
 
@@ -36,8 +35,8 @@ ion-toast.error-toast {
     --color: var(--ion-color-light);
 }
 
-.in-toolbar {
-    --border-color: #fff;
+ion-toolbar {
+    --border-style: none;
 }
 
 .van-button--primary {

src/styles/theme/variables.less

@@ -4,6 +4,31 @@ http://ionicframework.com/docs/theming/ */
 /** Ionic CSS Variables **/
 :root {
     --ion-background-color: #F5F7FA;
+	--ion-background-color-rgb: 245,247,250;
+
+	--ion-text-color: #000000;
+	--ion-text-color-rgb: 0,0,0;
+
+    --ion-color-step-0: #ffffff;
+	--ion-color-step-50: #f2f2f2;
+	--ion-color-step-100: #e6e6e6;
+	--ion-color-step-150: #d9d9d9;
+	--ion-color-step-200: #cccccc;
+	--ion-color-step-250: #bfbfbf;
+	--ion-color-step-300: #b3b3b3;
+	--ion-color-step-350: #a6a6a6;
+	--ion-color-step-400: #999999;
+	--ion-color-step-450: #8c8c8c;
+	--ion-color-step-500: #808080;
+	--ion-color-step-550: #737373;
+	--ion-color-step-600: #666666;
+	--ion-color-step-650: #595959;
+	--ion-color-step-700: #4d4d4d;
+	--ion-color-step-750: #404040;
+	--ion-color-step-800: #333333;
+	--ion-color-step-850: #262626;
+	--ion-color-step-900: #191919;
+	--ion-color-step-950: #0d0d0d;
     
     /** primary **/
     --ion-color-primary: #4078de;
@@ -160,6 +185,7 @@ http://ionicframework.com/docs/theming/ */
         --ion-text-color: #ffffff;
         --ion-text-color-rgb: 255, 255, 255;
 
+        --ion-color-step-0: #000000;
         --ion-color-step-50: #0d0d0d;
         --ion-color-step-100: #1a1a1a;
         --ion-color-step-150: #262626;
@@ -205,6 +231,7 @@ http://ionicframework.com/docs/theming/ */
 
         --ion-border-color: #222222;
 
+        --ion-color-step-0: #000000;
         --ion-color-step-50: #1e1e1e;
         --ion-color-step-100: #2a2a2a;
         --ion-color-step-150: #363636;

src/utils/toast.js

@@ -1,88 +1,83 @@
 import { toastController, loadingController } from '@ionic/vue'
 import { checkmarkOutline, closeOutline } from 'ionicons/icons'
-const q = []
-export default {
-    async showToast(msg) {
-        if (this.toastInstance) {
-            this.toastInstance.dismiss()
+let toastInstance = null
+let loadingInstance = null
+const Toast = async function (options) {
+    options = options || {}
+    if (typeof options === 'string') {
+        options = {
+            message: options
         }
-        if (this.loadingInstance) {
-            this.loadingInstance.dismiss()
-        }
-        const toast = await toastController.create({
-            message: msg,
-            duration: 1500
-        })
-        this.toastInstance = toast
-        toast.present()
-    },
-    async info(msg) {
-        if (this.toastInstance) {
-            this.toastInstance.dismiss()
-        }
-        if (this.loadingInstance) {
-            this.loadingInstance.dismiss()
-        }
-        const toast = await toastController.create({
-            message: msg,
-            duration: 1500
-        })
-        this.toastInstance = toast
-        toast.present()
-    },
-    async success(msg) {
-        if (this.toastInstance) {
-            this.toastInstance.dismiss()
-        }
-        if (this.loadingInstance) {
-            this.loadingInstance.dismiss()
-        }
-        const toast = await toastController.create({
-            message: msg,
-            duration: 1500,
-            cssClass: 'success-toast',
-            icon: checkmarkOutline
-        })
-        this.toastInstance = toast
-        toast.present()
-    },
-    async error(msg) {
-        if (this.toastInstance) {
-            this.toastInstance.dismiss()
-        }
-        if (this.loadingInstance) {
-            this.loadingInstance.dismiss()
-        }
-        const toast = await toastController.create({
-            message: msg,
-            duration: 1500,
-            cssClass: 'error-toast',
-            icon: closeOutline
-        })
-        this.toastInstance = toast
-        toast.present()
-    },
-    async loading(msg) {
-        if (this.toastInstance) {
-            this.toastInstance.dismiss()
-        }
-        if (this.loadingInstance) {
-            this.loadingInstance.dismiss()
-        }
-        const loading = await loadingController.create({
-            message: msg,
-            duration: 0,
-            cssClass: 'custom-loading'
-        })
-        this.loadingInstance = loading
-        loading.present()
-    },
-    async dismiss() {
-        if (this.toastInstance) {
-            this.toastInstance.dismiss()
+    }
+    options.type = options.type || 'info'
+    if (toastInstance) {
+        toastInstance.dismiss()
+    }
+    if (loadingInstance) {
+        loadingInstance.dismiss()
+    }
+    let toastOps = {
+        message: options.message,
+        duration: 1500
+    }
+    switch (options.type) {
+        case 'info':
+            break
+        case 'success':
+            toastOps.cssClass = 'success-toast'
+            toastOps.icon = checkmarkOutline
+            break
+        case 'error':
+            toastOps.cssClass = 'error-toast'
+            toastOps.icon = closeOutline
+            break
+    }
+    const toast = await toastController.create(toastOps)
+    toastInstance = toast
+    toast.present()
+}
+;['success', 'info', 'error'].forEach(type => {
+    Toast[type] = async options => {
+        options = options || {}
+        if (typeof options === 'string') {
+            options = {
+                message: options
+            }
         }
-        if (this.loadingInstance) {
-            this.loadingInstance.dismiss()
+        options.type = type
+        return await Toast(options)
+    }
+})
+Toast.loading = async function (options) {
+    if (toastInstance) {
+        toastInstance.dismiss()
+    }
+    if (loadingInstance) {
+        loadingInstance.dismiss()
+    }
+    options = options || {}
+    if (typeof options === 'string') {
+        options = {
+            message: options
         }
     }
+    const loading = await loadingController.create({
+        message: options.message,
+        duration: options.duration || 0,
+        cssClass: 'custom-loading'
+    })
+    loadingInstance = loading
+    loading.present()
+}
+Toast.dismiss = async () => {
+    if (toastInstance) {
+        toastInstance.dismiss()
+    }
+    if (loadingInstance) {
+        loadingInstance.dismiss()
+    }
+}
+Toast.install = (app, options) => {
+    app.config.globalProperties.$toast = Toast
 }
+export default Toast

src/views/ChangeTextPage.vue

@@ -1,6 +1,13 @@
 <template>
     <ion-page>
-        <ion-content :fullscreen="true">
+        <ion-header>
+            <ion-toolbar>
+                <ion-buttons slot="start">
+                    <ion-back-button default-href="#" @click="$router.back()"></ion-back-button>
+                </ion-buttons>
+            </ion-toolbar>
+        </ion-header>
+        <ion-content>
             <div class="change" v-if="type === 'nickname'">
                 <van-field
                     label="昵称"

src/views/LoginPage.vue

@@ -1,6 +1,13 @@
 <template>
     <ion-page>
-        <ion-content :fullscreen="true" class="login">
+        <ion-header>
+            <ion-toolbar>
+                <ion-buttons slot="start">
+                    <ion-back-button text="" default-href="#" @click="$router.back()"></ion-back-button>
+                </ion-buttons>
+            </ion-toolbar>
+        </ion-header>
+        <ion-content class="login">
             <van-form @submit="onSubmit">
                 <div class="title">密码登录</div>
                 <van-cell-group :border="false">
@@ -95,22 +102,20 @@ export default {
             this.login(this.formData.phone, this.formData.password)
                 .then(() => {
                     this.$toast.success('登录成功')
-                    setTimeout(() => {
-                        if (
-                            !fromRoute.name ||
-                            fromRoute.name === 'register' ||
-                            fromRoute.name === 'login' ||
-                            fromRoute.name === 'loginPhone'
-                        ) {
-                            this.$router.replace('/home')
-                        } else {
-                            this.$router.back()
-                        }
-                    }, 1500)
+                    if (
+                        !fromRoute.name ||
+                        fromRoute.name === 'register' ||
+                        fromRoute.name === 'login' ||
+                        fromRoute.name === 'loginPhone'
+                    ) {
+                        this.$router.replace('/home')
+                    } else {
+                        this.$router.back()
+                    }
                 })
                 .catch(e => {
                     if (e) {
-                        this.$toast(e.error)
+                        this.$toast.error(e.error)
                     }
                 })
         }
@@ -119,8 +124,15 @@ export default {
 </script>
 
 <style lang="less" scoped>
+ion-toolbar {
+    --background: var(--ion-color-step-0);
+}
+ion-back-button {
+    --color: var(--ion-color-step-950);
+}
+
 .login {
-    --ion-background-color: #fff;
+    --ion-background-color: var(--ion-color-step-0);
 }
 
 .van-form {

src/views/LoginPhonePage.vue

@@ -1,6 +1,13 @@
 <template>
     <ion-page>
-        <ion-content :fullscreen="true" class="login">
+        <ion-header>
+            <ion-toolbar>
+                <ion-buttons slot="start">
+                    <ion-back-button text="" default-href="#" @click="$router.back()"></ion-back-button>
+                </ion-buttons>
+            </ion-toolbar>
+        </ion-header>
+        <ion-content class="login">
             <van-form ref="form" @submit="onSubmit">
                 <div class="title">密码登录</div>
                 <van-cell-group :border="false">
@@ -61,6 +68,7 @@
 <script>
 import phone from '../mixins/phone'
 import { ref } from 'vue'
+import { closeOutline } from 'ionicons/icons'
 export default {
     mixins: [phone],
     setup() {
@@ -73,7 +81,7 @@ export default {
 
         const showPsd = ref(false)
 
-        return { form, checked, showPsd }
+        return { form, checked, showPsd, closeOutline }
     },
     methods: {
         sendPhone(e) {
@@ -89,8 +97,15 @@ export default {
 </script>
 
 <style lang="less" scoped>
+ion-toolbar {
+    --background: var(--ion-color-step-0);
+}
+ion-back-button {
+    --color: var(--ion-color-step-950);
+}
+
 .login {
-    --ion-background-color: #fff;
+    --ion-background-color: var(--ion-color-step-0);
 }
 
 .van-form {

src/views/OrderDetailPage.vue

@@ -104,8 +104,9 @@
             <div class="bottom">
                 <div>
                     <div class="order-button" v-if="orderInfo.status == 'NOT_PAID'">
-                        <!-- <van-button color="#FF8F00" round plain @click="confirmPayment">我已付款</van-button> -->
-                        <div class="btn-pay" round @click="pay">{{ $t('order.payNow') }}</div>
+                        <span> {{ $t('balance.symbol') }}</span>
+                        <span> {{ $t('order.totalPayment') }}</span>
+                        <van-button class="btn-pay" type="primary" @click="pay">{{ $t('order.payNow') }}</van-button>
                     </div>
 
                     <div

src/views/ProductDetailPage.vue

@@ -124,7 +124,7 @@ onMounted(() => {
         .f();
         .badge {
             font-size: 10px;
-            background: var(--ion-color-step-900);
+            background: #e9effb;
             color: #4078de;
             line-height: 16px;
             padding: 0 2px;
@@ -167,7 +167,7 @@ onMounted(() => {
 
     .creator {
         .f();
-        background: var(--ion-color-step-950);
+        background: var(--ion-color-step-50);
         border-radius: 4px;
         padding: 7px 12px;
         margin-top: 16px;
@@ -214,8 +214,7 @@ onMounted(() => {
 }
 ion-footer {
     ion-toolbar {
-        --border-style: 10px solid red;
-        --ion-toolbar-background: var(--ion-color-dark-contrast);
+        --background: var(--ion-color-step-0);
     }
 }
 

src/views/RegisterPage.vue

@@ -1,5 +1,12 @@
 <template>
     <ion-page>
+        <ion-header>
+            <ion-toolbar>
+                <ion-buttons slot="start">
+                    <ion-back-button text="" default-href="#" @click="$router.back()"></ion-back-button>
+                </ion-buttons>
+            </ion-toolbar>
+        </ion-header>
         <ion-content :fullscreen="true" class="login">
             <van-form ref="form" @submit="onSubmit">
                 <div class="title">注册账号</div>
@@ -184,8 +191,15 @@ export default {
 </script>
 
 <style lang="less" scoped>
+ion-toolbar {
+    --background: var(--ion-color-step-0);
+}
+ion-back-button {
+    --color: var(--ion-color-step-950);
+}
+
 .login {
-    --ion-background-color: #fff;
+    --ion-background-color: var(--ion-color-step-0);
 }
 
 .van-form {

src/views/SettingPage.vue

@@ -1,5 +1,13 @@
 <template>
     <ion-page>
+        <ion-header>
+            <ion-toolbar>
+                <ion-buttons slot="start">
+                    <ion-back-button default-href="#" @click="$router.back()"></ion-back-button>
+                </ion-buttons>
+                <ion-title>{{ $t('user.profile') }}</ion-title>
+            </ion-toolbar>
+        </ion-header>
         <ion-content :fullscreen="true">
             <div class="setting">
                 <van-cell-group :border="false">
@@ -89,6 +97,7 @@ export default {
     setup() {
         //性别
         const show = ref(false)
+        const showConsole = ref(false)
         const actions = [{ name: '男' }, { name: '女' }]
         const userStore = useUserStore()
 
@@ -103,7 +112,8 @@ export default {
             timeout: null,
             defaultLogo,
             userStore,
-            cityName
+            cityName,
+            showConsole
         }
     },
     methods: {
@@ -234,7 +244,7 @@ export default {
     bottom: 0;
 }
 
-/deep/ .van-cell {
+:deep(.van-cell) {
     align-items: center;
     height: 70px;
     position: relative;