feat: add change password in with mobile page

CHANGELOG.md

@@ -2,6 +2,7 @@
 ## v3.2.8
 * 功能优化：SD 绘画页面采用 websocket 替换 http 轮询机制，节省带宽
 * 功能优化：移动端聊天页面图片支持预览和放大功能
+* 功能新增：移动端支持充值
 
 ## v3.2.7
 * 功能重构：采用 Vant 重构移动页面，新增 MidJourney 功能

api/handler/user_handler.go

@@ -329,7 +329,7 @@ func (h *UserHandler) UpdatePass(c *gin.Context) {
 	}
 
 	password := utils.GenPassword(data.OldPass, user.Salt)
-	logger.Info(user.Salt, ",", user.Password, ",", password, ",", data.OldPass)
+	logger.Debugf(user.Salt, ",", user.Password, ",", password, ",", data.OldPass)
 	if password != user.Password {
 		resp.ERROR(c, "原密码错误")
 		return

web/src/assets/css/member.css

@@ -5,6 +5,12 @@
 .member .el-dialog .el-dialog__body {
   padding-top: 10px;
 }
+.member .el-dialog .el-dialog__body .pay-container .amount {
+  text-align: center;
+}
+.member .el-dialog .el-dialog__body .pay-container .amount span {
+  color: #f56c6c;
+}
 .member .el-dialog .el-dialog__body .pay-container .count-down {
   display: flex;
   justify-content: center;

web/src/assets/css/member.styl

@@ -7,6 +7,14 @@
       padding-top 10px
 
       .pay-container {
+        .amount {
+          text-align center
+
+          span {
+            color #f56c6c
+          }
+        }
+
         .count-down {
           display flex
           justify-content center

web/src/views/Member.vue

@@ -139,6 +139,7 @@
         @close="closeOrder"
         title="充值订单支付">
       <div class="pay-container">
+        <h3 class="amount">实付金额：<span>￥{{ amount }}</span></h3>
         <div class="count-down">
           <count-down :second="orderTimeout" @timeout="refreshPayCode" ref="countDownRef"/>
         </div>
@@ -208,6 +209,7 @@ const vipMonthCalls = ref(0)
 const vipMonthImgCalls = ref(0)
 
 const payWays = ref({})
+const amount = ref(0)
 const payName = ref("支付宝")
 const curPay = ref("alipay") // 当前支付方式
 
@@ -279,6 +281,7 @@ const genPayQrcode = () => {
 const alipay = (row) => {
   payName.value = "支付宝"
   curPay.value = "alipay"
+  amount.value = (row.price - row.discount).toFixed(2)
   if (!user.value.id) {
     showLoginDialog.value = true
     return
@@ -293,6 +296,7 @@ const alipay = (row) => {
 const huPiPay = (row) => {
   payName.value = payWays.value["hupi"]["name"] === "wechat" ? '微信' : '支付宝'
   curPay.value = "hupi"
+  amount.value = (row.price - row.discount).toFixed(2)
   if (!user.value.id) {
     showLoginDialog.value = true
     return
@@ -307,6 +311,7 @@ const huPiPay = (row) => {
 const PayJs = (row) => {
   payName.value = '微信'
   curPay.value = "payjs"
+  amount.value = (row.price - row.discount).toFixed(2)
   if (!user.value.id) {
     showLoginDialog.value = true
     return

web/src/views/mobile/Profile.vue

@@ -3,7 +3,7 @@
     <van-nav-bar :title="title"/>
 
     <div class="content">
-      <van-form @submit="save">
+      <van-form>
         <van-cell-group inset v-model="form">
           <van-field
               v-model="form.username"
@@ -40,7 +40,69 @@
           </van-field>
         </van-cell-group>
       </van-form>
+
+      <div class="modify-pass">
+        <van-button round block type="primary" @click="showPasswordDialog = true">修改密码</van-button>
+      </div>
+
+      <div class="product-list">
+        <h3>充值套餐</h3>
+        <div class="item" v-for="item in products" :key="item.id">
+          <h4 class="title">
+            <span>{{ item.name }}</span>
+            <van-button type="primary" size="small" icon="cart">立即购买</van-button>
+          </h4>
+
+          <van-cell-group>
+            <van-cell title="商品价格">
+              <span class="price">
+                ￥{{ (item.price - item.discount).toFixed(2) }}
+              </span>
+              （
+              <del>￥{{ item.price }}</del>
+              ）
+            </van-cell>
+            <van-cell title="有效期">
+              <span v-if="item.days > 0">{{ item.days }}天</span>
+              <van-tag type="primary" v-else>长期有效</van-tag>
+            </van-cell>
+            <van-cell title="对话次数">
+              <span v-if="item.calls > 0">{{ item.calls }}</span>
+              <span v-else>{{ vipMonthCalls }}</span>
+            </van-cell>
+            <van-cell title="绘图次数">
+              <span v-if="item.img_calls > 0">{{ item.img_calls }}</span>
+              <span v-else>{{ vipMonthImgCalls }}</span>
+            </van-cell>
+          </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-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-cell-group>
+      </van-form>
+    </van-dialog>
   </div>
 </template>
 
@@ -49,6 +111,7 @@ import {onMounted, ref} from "vue";
 import {showFailToast, showNotify, showSuccessToast} from "vant";
 import {httpGet, httpPost} from "@/utils/http";
 import Compressor from 'compressorjs';
+import {ElMessage} from "element-plus";
 
 const title = ref('用户设置')
 const form = ref({
@@ -66,6 +129,10 @@ const fileList = ref([
   }
 ]);
 
+const products = ref([])
+const vipMonthCalls = ref(0)
+const vipMonthImgCalls = ref(0)
+
 onMounted(() => {
   httpGet('/api/user/profile').then(res => {
     form.value = res.data
@@ -74,6 +141,20 @@ onMounted(() => {
     console.log(e.message)
     showFailToast('获取用户信息失败')
   });
+
+  // 获取产品列表
+  httpGet("/api/product/list").then((res) => {
+    products.value = res.data
+  }).catch(e => {
+    showFailToast("获取产品套餐失败：" + e.message)
+  })
+
+  httpGet("/api/admin/config/get?key=system").then(res => {
+    vipMonthCalls.value = res.data['vip_month_calls']
+    vipMonthImgCalls.value = res.data['vip_month_img_calls']
+  }).catch(e => {
+    showFailToast("获取系统配置失败：" + e.message)
+  })
 })
 
 const afterRead = (file) => {
@@ -102,10 +183,44 @@ const afterRead = (file) => {
       console.log(err.message);
     },
   });
-};
+}
 
-const save = () => {
+const showPasswordDialog = ref(false)
+const pass = ref({
+  old: "",
+  new: "",
+  renew: ""
+})
 
+const beforeClose = (action) => {
+  new Promise((resolve) => {
+    resolve(action === 'confirm');
+  });
+}
+
+
+// 提交修改密码
+const updatePass = () => {
+  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个字符"})
+  }
+  if (pass.value.renew !== pass.value.new) {
+    return showNotify({type: "danger", message: "两次输入密码不一致"})
+  }
+  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
+  })
 }
 </script>
 
@@ -116,6 +231,37 @@ const save = () => {
       width 100px
       text-align right
     }
+
+    .modify-pass {
+      padding 10px 15px
+    }
+
+    .product-list {
+      padding 0 15px
+
+      .item {
+        border 1px solid #e5e5e5
+        border-radius 10px
+        margin-bottom 15px
+        overflow hidden
+
+        .title {
+          padding 0 12px
+          position relative
+
+          .van-button {
+            position absolute
+            top -5px
+            right 10px
+          }
+        }
+
+        .price {
+          font-size 18px
+          color #f56c6c
+        }
+      }
+    }
   }
 }
 </style>