更新移动端 Dalle 绘图页面，支持模型选择

web/src/views/mobile/Profile.vue

@@ -4,24 +4,14 @@
       <van-form v-if="isLogin">
         <div class="avatar">
           <van-image :src="fileList[0].url" size="80" width="80" fit="cover" round />
-<!--          <van-uploader v-model="fileList"-->
-<!--                        reupload max-count="1"-->
-<!--                        :deletable="false"-->
-<!--                        :after-read="afterRead"/>-->
+          <!--          <van-uploader v-model="fileList"-->
+          <!--                        reupload max-count="1"-->
+          <!--                        :deletable="false"-->
+          <!--                        :after-read="afterRead"/>-->
         </div>
         <van-cell-group inset v-model="form">
-          <van-field
-              v-model="form.username"
-              label="账号"
-              readonly
-              disabled
-          />
-          <van-field
-              v-model="form.nickname"
-              label="昵称"
-              readonly
-              disabled
-          />
+          <van-field v-model="form.username" label="账号" readonly />
+          <van-field v-model="form.nickname" label="昵称" readonly />
 
           <van-field label="算力">
             <template #input>
@@ -34,7 +24,6 @@
               {{ dateFormat(form.expired_time) }}
             </template>
           </van-field>
-
         </van-cell-group>
       </van-form>
 
@@ -59,14 +48,10 @@
           <div class="title">
             <span class="name">{{ item.name }}</span>
             <div class="pay-btn">
-              <div v-for="payWay in payWays" @click="pay(item,payWay)" :key="payWay">
+              <div v-for="payWay in payWays" @click="pay(item, payWay)" :key="payWay">
                 <span>
-                  <van-button type="primary" size="small" v-if="payWay.pay_type==='alipay'" >
-                    <i class="iconfont icon-alipay"></i> 支付宝
-                  </van-button>
-                  <van-button type="success" size="small" v-if="payWay.pay_type==='wxpay'" >
-                    <i class="iconfont icon-wechat-pay"></i> 微信支付
-                  </van-button>
+                  <van-button type="primary" size="small" v-if="payWay.pay_type === 'alipay'"> <i class="iconfont icon-alipay"></i> 支付宝 </van-button>
+                  <van-button type="success" size="small" v-if="payWay.pay_type === 'wxpay'"> <i class="iconfont icon-wechat-pay"></i> 微信支付 </van-button>
                 </span>
               </div>
             </div>
@@ -74,9 +59,7 @@
 
           <van-cell-group>
             <van-cell title="商品价格">
-              <span class="price">
-                ￥{{ item.discount }}
-              </span>
+              <span class="price"> ￥{{ item.discount }} </span>
               （
               <del>￥{{ item.price }}</del>
               ）
@@ -92,29 +75,21 @@
           </van-cell-group>
         </div>
       </div>
-
     </div>
 
-    <van-dialog v-model:show="showPasswordDialog" title="修改密码" show-cancel-button
-                @confirm="updatePass"
-                @cancel="showPasswordDialog = false"
-                :before-close="beforeClose">
+    <van-dialog
+      v-model:show="showPasswordDialog"
+      title="修改密码"
+      show-cancel-button
+      @confirm="updatePass"
+      @cancel="showPasswordDialog = false"
+      :before-close="beforeClose"
+    >
       <van-form>
         <van-cell-group inset>
-          <van-field
-              v-model="pass.old"
-              placeholder="旧密码"
-          />
-          <van-field
-              v-model="pass.new"
-              type="password"
-              placeholder="新密码"
-          />
-          <van-field
-              v-model="pass.renew"
-              type="password"
-              placeholder="确认密码"
-          />
+          <van-field v-model="pass.old" placeholder="旧密码" />
+          <van-field v-model="pass.new" type="password" placeholder="新密码" />
+          <van-field v-model="pass.renew" type="password" placeholder="确认密码" />
         </van-cell-group>
       </van-form>
     </van-dialog>
@@ -125,13 +100,13 @@
           <van-cell-group inset>
             <van-field name="switch" label="暗黑主题">
               <template #input>
-                <van-switch v-model="dark" @change="(val) => store.setTheme(val?'dark':'light')"/>
+                <van-switch v-model="dark" @change="(val) => store.setTheme(val ? 'dark' : 'light')" />
               </template>
             </van-field>
 
             <van-field name="switch" label="流式输出">
               <template #input>
-                <van-switch v-model="stream" @change="(val) => store.setChatStream(val)"/>
+                <van-switch v-model="stream" @change="(val) => store.setChatStream(val)" />
               </template>
             </van-field>
             <!--            <van-field-->
@@ -151,81 +126,87 @@
         </van-form>
       </div>
     </van-action-sheet>
-
   </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue";
-import {showFailToast, showLoadingToast, showNotify, showSuccessToast} from "vant";
-import {httpGet, httpPost} from "@/utils/http";
-import {dateFormat, showLoginDialog} from "@/utils/libs";
-import {ElMessage} from "element-plus";
-import {checkSession, getSystemInfo} from "@/store/cache";
-import {useRouter} from "vue-router";
-import {removeUserToken} from "@/store/session";
-import {useSharedStore} from "@/store/sharedata";
+import { onMounted, ref } from "vue";
+import { showFailToast, showLoadingToast, showNotify, showSuccessToast } from "vant";
+import { httpGet, httpPost } from "@/utils/http";
+import { dateFormat, showLoginDialog } from "@/utils/libs";
+import { ElMessage } from "element-plus";
+import { checkSession, getSystemInfo } from "@/store/cache";
+import { useRouter } from "vue-router";
+import { removeUserToken } from "@/store/session";
+import { useSharedStore } from "@/store/sharedata";
 
 const form = ref({
-  username: 'GeekMaster',
-  nickname: '极客学长@001',
-  mobile: '1300000000',
-  avatar: '',
+  username: "GeekMaster",
+  nickname: "极客学长@001",
+  mobile: "1300000000",
+  avatar: "",
   power: 0,
-})
+});
 const fileList = ref([
   {
-    url: '/images/user-info.png',
-    message: '上传中...',
-  }
+    url: "/images/user-info.png",
+    message: "上传中...",
+  },
 ]);
 
-const products = ref([])
-const vipMonthPower = ref(0)
-const payWays = ref({})
-const router = useRouter()
-const userId = ref(0)
-const isLogin = ref(false)
-const showSettings = ref(false)
-const store = useSharedStore()
-const stream = ref(store.chatStream)
-const dark = ref(store.theme === 'dark')
+const products = ref([]);
+const vipMonthPower = ref(0);
+const payWays = ref({});
+const router = useRouter();
+const userId = ref(0);
+const isLogin = ref(false);
+const showSettings = ref(false);
+const store = useSharedStore();
+const stream = ref(store.chatStream);
+const dark = ref(store.theme === "dark");
 
 onMounted(() => {
-  checkSession().then(user => {
-    userId.value = user.id
-    isLogin.value = true
-    httpGet('/api/user/profile').then(res => {
-      form.value = res.data
-      fileList.value[0].url = form.value.avatar
-    }).catch((e) => {
-      console.log(e.message)
-      showFailToast('获取用户信息失败')
-    });
-  }).catch(() => {
-
-  })
+  checkSession()
+    .then((user) => {
+      userId.value = user.id;
+      isLogin.value = true;
+      httpGet("/api/user/profile")
+        .then((res) => {
+          form.value = res.data;
+          fileList.value[0].url = form.value.avatar;
+        })
+        .catch((e) => {
+          console.log(e.message);
+          showFailToast("获取用户信息失败");
+        });
+    })
+    .catch(() => {});
 
   // 获取产品列表
-  httpGet("/api/product/list").then((res) => {
-    products.value = res.data
-  }).catch(e => {
-    showFailToast("获取产品套餐失败：" + e.message)
-  })
+  httpGet("/api/product/list")
+    .then((res) => {
+      products.value = res.data;
+    })
+    .catch((e) => {
+      showFailToast("获取产品套餐失败：" + e.message);
+    });
 
-  getSystemInfo().then(res => {
-    vipMonthPower.value = res.data['vip_month_power']
-  }).catch(e => {
-    showFailToast("获取系统配置失败：" + e.message)
-  })
+  getSystemInfo()
+    .then((res) => {
+      vipMonthPower.value = res.data["vip_month_power"];
+    })
+    .catch((e) => {
+      showFailToast("获取系统配置失败：" + e.message);
+    });
 
-  httpGet("/api/payment/payWays").then(res => {
-    payWays.value = res.data
-  }).catch(e => {
-    ElMessage.error("获取支付方式失败：" + e.message)
-  })
-
-})
+  httpGet("/api/payment/payWays")
+    .then((res) => {
+      payWays.value = res.data;
+    })
+    .catch((e) => {
+      ElMessage.error("获取支付方式失败：" + e.message);
+    });
+});
 
 // const afterRead = (file) => {
 //   file.status = 'uploading';
@@ -255,55 +236,56 @@ onMounted(() => {
 //   });
 // }
 
-const showPasswordDialog = ref(false)
+const showPasswordDialog = ref(false);
 const pass = ref({
   old: "",
   new: "",
-  renew: ""
-})
+  renew: "",
+});
 
 const beforeClose = (action) => {
   new Promise((resolve) => {
-    resolve(action === 'confirm');
+    resolve(action === "confirm");
   });
-}
-
+};
 
 // 提交修改密码
 const updatePass = () => {
-  if (pass.value.old === '') {
-    return showNotify({type: "danger", message: "请输入旧密码"})
+  if (pass.value.old === "") {
+    return showNotify({ type: "danger", message: "请输入旧密码" });
   }
   if (!pass.value.new || pass.value.new.length < 8) {
-    return showNotify({type: "danger", message: "密码的长度为8-16个字符"})
+    return showNotify({ type: "danger", message: "密码的长度为8-16个字符" });
   }
   if (pass.value.renew !== pass.value.new) {
-    return showNotify({type: "danger", message: "两次输入密码不一致"})
+    return showNotify({ type: "danger", message: "两次输入密码不一致" });
   }
-  httpPost('/api/user/password', {
+  httpPost("/api/user/password", {
     old_pass: pass.value.old,
     password: pass.value.new,
-    repass: pass.value.renew
-  }).then(() => {
-    showSuccessToast("更新成功！")
-    showPasswordDialog.value = false
-  }).catch((e) => {
-    showFailToast('更新失败，' + e.message)
-    showPasswordDialog.value = false
+    repass: pass.value.renew,
   })
-}
+    .then(() => {
+      showSuccessToast("更新成功！");
+      showPasswordDialog.value = false;
+    })
+    .catch((e) => {
+      showFailToast("更新失败，" + e.message);
+      showPasswordDialog.value = false;
+    });
+};
 
-const pay = (product,payWay) => {
+const pay = (product, payWay) => {
   if (!isLogin.value) {
-    return showLoginDialog(router)
+    return showLoginDialog(router);
   }
 
   showLoadingToast({
-    message: '正在创建订单',
+    message: "正在创建订单",
     forbidClick: true,
   });
-  let host = process.env.VUE_APP_API_HOST
-  if (host === '') {
+  let host = process.env.VUE_APP_API_HOST;
+  if (host === "") {
     host = `${location.protocol}//${location.host}`;
   }
   httpPost(`${process.env.VUE_APP_API_HOST}/api/payment/doPay`, {
@@ -312,24 +294,27 @@ const pay = (product,payWay) => {
     pay_type: payWay.pay_type,
     user_id: userId.value,
     host: host,
-    device: "wechat"
-  }).then(res => {
-    location.href = res.data
-  }).catch(e => {
-    showFailToast("生成支付订单失败：" + e.message)
+    device: "wechat",
   })
-}
+    .then((res) => {
+      location.href = res.data;
+    })
+    .catch((e) => {
+      showFailToast("生成支付订单失败：" + e.message);
+    });
+};
 
 const logout = function () {
-  httpGet('/api/user/logout').then(() => {
-    removeUserToken();
-    store.setIsLogin(false)
-    router.push('/');
-  }).catch(() => {
-    showFailToast('注销失败！');
-  })
-}
-
+  httpGet("/api/user/logout")
+    .then(() => {
+      removeUserToken();
+      store.setIsLogin(false);
+      router.push("/");
+    })
+    .catch(() => {
+      showFailToast("注销失败！");
+    });
+};
 </script>
 
 <style lang="stylus">
@@ -405,4 +390,4 @@ const logout = function () {
     padding 16px
   }
 }
-</style>
+</style>