更新

mallApp/src/pages/login/index.vue

@@ -1,25 +1,55 @@
 <template>
-  <view class="app-content">
-    <view>
-      <form>
-        <view class="module-com input-line-wrap">
-          <view class="btn-wrap" style="margin-top:50upx;">
+  <view class="login-container">
+    <!-- 背景装饰光晕 -->
+    <view class="bg-decor-top"></view>
+    <view class="bg-decor-bottom"></view>
 
-            <view style="color:black;font-size:32upx;margin-top:15upx;">这里是花店的商城，需获取你的手机号登录</view>
-					  <view style="color:black;font-size:32upx;margin-top:15upx;">才能使用相应功能，请谅解</view>
-					  <view style="color:black;font-size:32upx;margin-top:15upx;margin-bottom:50upx;">如不需要，您可以点击<text style="color:#3385FF;font-size:36upx;font-weight:bold;margin-left:15upx;" @click="goBack()">拒绝使用</text></view>
+    <view class="login-content">
 
-            <button class="admin-button-com blue big" style="border:none;height:110upx;line-height:60upx;" open-type="getPhoneNumber" @getphonenumber="getWxMobile">
-            手机号一键登录
-            </button>
 
+      <!-- 登录主体卡片 -->
+      <view class="login-card">
+        <view class="card-tips">
+          <text class="tips-title">欢迎登录</text>
+          <text class="tips-desc">这里是花店配套的线上商城，您需要通过授权手机号登录，以便我们为您提供完整的下单、物流与会员服务，感谢您的理解与支持。</text>
+        </view>
+
+        <!-- 授权功能亮点 -->
+        <view class="benefit-list">
+          <view class="benefit-item">
+            <view class="check-dot"></view>
+            <text class="benefit-text">选购高品质鲜花、精品绿植</text>
+          </view>
+          <view class="benefit-item">
+            <view class="check-dot"></view>
+            <text class="benefit-text">实时跟踪您的订单与配送状态</text>
+          </view>
+          <view class="benefit-item">
+            <view class="check-dot"></view>
+            <text class="benefit-text">尊享专属于您的会员权益与积分</text>
           </view>
-          <view style="float:right;font-size:36upx;margin-right:40upx;color:#333333;" @click="accountLogin()"><text>使用账号密码登录</text></view>
         </view>
-      </form>
+
+        <!-- 一键登录按钮 -->
+        <button 
+          class="login-btn-primary" 
+          open-type="getPhoneNumber" 
+          @getphonenumber="getWxMobile"
+        >
+          <text class="btn-text">手机号一键登录</text>
+        </button>
+
+        <!-- 辅助操作 -->
+        <view class="action-footer">
+          <text class="action-link reject" @click="goBack()">拒绝使用</text>
+          <text class="action-divider">|</text>
+          <text class="action-link account" @click="accountLogin()">密码登录</text>
+        </view>
+      </view>
     </view>
   </view>
 </template>
+
 <script>
 import TuiListCell from "@/components/plugin/list-cell"
 const form = require("@/utils/formValidation.js")
@@ -27,6 +57,7 @@ import { getWxInfo, getWxPhone } from "@/api/mini"
 import { create } from "@/api/user"
 import store from '@/store'
 import { TOKEN_STORAGE_KEY } from "@/constant/storageKeys";
+
 export default {
   name: "index",
   components: {
@@ -37,43 +68,40 @@ export default {
       form: {
         mobile: ""
       },
-      needBack:0
+      needBack: 0
     };
   },
   methods: {
-		goBack(){
-			uni.navigateBack({})
-		},
-    init(){
-      if(this.option.needBack){
+    goBack() {
+      uni.navigateBack({})
+    },
+    init() {
+      if (this.option && this.option.needBack) {
         this.needBack = this.option.needBack
       }
     },
-    accountLogin(){
-      this.$util.pageTo({url: "/pages/login/account",type:2})
+    accountLogin() {
+      this.$util.pageTo({ url: "/pages/login/account", type: 2 })
     },
     confirmFn() {
       let currentMiniOpenId = uni.getStorageSync('miniOpenId')
       let that = this
-      create({miniOpenId:currentMiniOpenId,...this.form}).then(res => {
-        if(res.code == 1){
+      create({ miniOpenId: currentMiniOpenId, ...this.form }).then(res => {
+        if (res.code == 1) {
           uni.setStorageSync(TOKEN_STORAGE_KEY, res.data.token)
-          if(res.data.user && !that.$util.isEmpty(res.data.user)){
+          if (res.data.user && !that.$util.isEmpty(res.data.user)) {
             store.commit('setLoginInfo', res.data.user)
-            if(this.needBack == 1){
+            if (this.needBack == 1) {
               that.$msg('登录成功')
-              setTimeout(function(){
-                //返回上一页带参数
+              setTimeout(function () {
                 let pages = getCurrentPages();
-                let prevPage = pages[ pages.length - 2 ];
-                //修改上一页data里面的数据
+                let prevPage = pages[pages.length - 2];
                 prevPage.$vm.loginComeBack = 1
-                prevPage.$vm.pageAction = {refresh:1}
-
+                prevPage.$vm.pageAction = { refresh: 1 }
                 uni.navigateBack({})
-              },1100)
-            }else{
-              that.$util.pageTo({url: "/pages/login/result",type:2})
+              }, 1100)
+            } else {
+              that.$util.pageTo({ url: "/pages/login/result", type: 2 })
             }
           }
         }
@@ -82,22 +110,22 @@ export default {
     getWxMobile(e) {
       let that = this
       if (e.detail.errMsg === "getPhoneNumber:ok") {
-		    let currentMiniOpenId = uni.getStorageSync('miniOpenId')
-        getWxPhone({ iv: e.detail.iv, encryptedData: e.detail.encryptedData,miniOpenId:currentMiniOpenId }).then(subRes => {
-            if(subRes.data && subRes.data.hasNoOpenId && subRes.data.hasNoOpenId == 1){
-              uni.showModal({
-                title: '提示',
-                content: '网络异常，请重试一次',
-                success: function (res) {
-                  if (res.confirm) {
-                    console.log('用户点击确定')
-                  }
+        let currentMiniOpenId = uni.getStorageSync('miniOpenId')
+        getWxPhone({ iv: e.detail.iv, encryptedData: e.detail.encryptedData, miniOpenId: currentMiniOpenId }).then(subRes => {
+          if (subRes.data && subRes.data.hasNoOpenId && subRes.data.hasNoOpenId == 1) {
+            uni.showModal({
+              title: '提示',
+              content: '网络异常，请重试一次',
+              success: function (res) {
+                if (res.confirm) {
+                  console.log('用户点击确定')
                 }
-              })
-              return false
-            }
-            this.form.mobile = subRes.data.mobile
-            that.confirmFn()
+              }
+            })
+            return false
+          }
+          this.form.mobile = subRes.data.mobile
+          that.confirmFn()
         })
       } else {
         this.$msg("获取手机失败");
@@ -106,5 +134,250 @@ export default {
   }
 };
 </script>
+
 <style lang="scss" scoped>
-</style>
+.login-container {
+  min-height: 100vh;
+  background-color: #fcfdfe;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+// 装饰性背景圆弧/模糊光晕
+.bg-decor-top {
+  position: absolute;
+  top: -150upx;
+  right: -100upx;
+  width: 500upx;
+  height: 500upx;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 40, 66, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
+  filter: blur(20px);
+  pointer-events: none;
+}
+
+.bg-decor-bottom {
+  position: absolute;
+  bottom: -200upx;
+  left: -150upx;
+  width: 600upx;
+  height: 600upx;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 40, 66, 0.04) 0%, rgba(255, 255, 255, 0) 70%);
+  filter: blur(30px);
+  pointer-events: none;
+}
+
+.login-content {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 120upx 40upx 60upx;
+  box-sizing: border-box;
+}
+
+// 品牌头部
+.brand-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 60upx;
+}
+
+.logo-box {
+  width: 160upx;
+  height: 160upx;
+  background: #ffffff;
+  border-radius: 40upx;
+  box-shadow: 0 16upx 32upx rgba(255, 40, 66, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 24upx;
+}
+
+// 纯CSS花瓣图标
+.flower-icon {
+  width: 80upx;
+  height: 80upx;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .petal {
+    position: absolute;
+    width: 32upx;
+    height: 32upx;
+    background: #ff4d65;
+    border-radius: 50% 50% 0 50%;
+    transform-origin: bottom right;
+  }
+
+  .p1 {
+    transform: rotate(0deg) scale(0.9);
+  }
+  .p2 {
+    transform: rotate(90deg) scale(0.9);
+    background: #ff2842;
+  }
+  .p3 {
+    transform: rotate(180deg) scale(0.9);
+    background: #ff6e82;
+  }
+  .p4 {
+    transform: rotate(270deg) scale(0.9);
+    background: #ff3350;
+  }
+
+  .center-core {
+    position: absolute;
+    width: 20upx;
+    height: 20upx;
+    background: #ffd15c;
+    border-radius: 50%;
+    box-shadow: 0 0 8upx rgba(255, 209, 92, 0.8);
+    z-index: 5;
+  }
+}
+
+.brand-title {
+  font-size: 44upx;
+  font-weight: 700;
+  color: #1a1a1a;
+  letter-spacing: 2upx;
+  line-height: 60upx;
+  margin-bottom: 8upx;
+}
+
+.brand-subtitle {
+  font-size: 26upx;
+  color: #999999;
+  letter-spacing: 4upx;
+}
+
+// 登录主体卡片
+.login-card {
+  width: 100%;
+  background: #ffffff;
+  border-radius: 36upx;
+  box-shadow: 0 20upx 60upx rgba(0, 0, 0, 0.05);
+  padding: 60upx 40upx;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-tips {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 40upx;
+}
+
+.tips-title {
+  font-size: 36upx;
+  font-weight: 600;
+  color: #2b2b2b;
+  margin-bottom: 16upx;
+  text-align: center;
+}
+
+.tips-desc {
+  font-size: 28upx;
+  color: #666666;
+  line-height: 44upx;
+  text-align: justify;
+}
+
+// 亮点展示
+.benefit-list {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 50upx;
+  background-color: #fafbfc;
+  border-radius: 20upx;
+  padding: 24upx 30upx;
+}
+
+.benefit-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 18upx;
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+.check-dot {
+  width: 12upx;
+  height: 12upx;
+  background-color: #ff2842;
+  border-radius: 50%;
+  margin-right: 20upx;
+  flex-shrink: 0;
+}
+
+.benefit-text {
+  font-size: 26upx;
+  color: #555555;
+}
+
+// 一键登录按钮
+.login-btn-primary {
+  width: 100%;
+  height: 96upx;
+  background: linear-gradient(135deg, #ff5e62 0%, #ff2842 100%);
+  border: none;
+  border-radius: 48upx;
+  box-shadow: 0 10upx 24upx rgba(255, 40, 66, 0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 40upx;
+  
+  &::after {
+    border: none;
+  }
+}
+
+.btn-text {
+  color: #ffffff;
+  font-size: 32upx;
+  font-weight: 600;
+  letter-spacing: 2upx;
+}
+
+// 底部操作区
+.action-footer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10upx;
+}
+
+.action-link {
+  font-size: 28upx;
+  padding: 10upx 20upx;
+  
+  &.reject {
+    color: #999999;
+  }
+  
+  &.account {
+    color: #3385ff;
+    font-weight: 600;
+  }
+}
+
+.action-divider {
+  font-size: 24upx;
+  color: #e0e0e0;
+}
+</style>