6 changed files with 444 additions and 26 deletions
Unified View
Diff Options
-
+28 -20components/bottom/bottomBtn.vue
-
+3 -0pages.json
-
+6 -4pages/index/center.vue
-
+401 -0pages_order/auth/loginAndRegisterAndForgetPassword.vue
-
+5 -2pages_order/order/refundsOrExchange.vue
-
+1 -0static/image/center/11.svg
+ 28
- 20
components/bottom/bottomBtn.vue
View File
+ 3
- 0
pages.json
View File
+ 6
- 4
pages/index/center.vue
View File
+ 401
- 0
pages_order/auth/loginAndRegisterAndForgetPassword.vue
View File
| @ -0,0 +1,401 @@ | |||||
| <template> | |||||
| <view class="refundsOrExchange"> | |||||
| <navbar :title="titleList[titleIndex]" leftClick @leftClick="$utils.navigateBack" /> | |||||
| <view class="frame"> | |||||
| <!-- 登录和注册 --> | |||||
| <view class="loginRegister" v-if='titleIndex!=2'> | |||||
| <!-- 标题 --> | |||||
| <view class="title">{{title}}</view> | |||||
| <!-- 头像 --> | |||||
| <view class="userIamge"> | |||||
| <view> | |||||
| <img src="../../static/image/center/11.svg" alt="" style="width: 100%;height: 100%;"> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 用户名&密码&隐私条款 --> | |||||
| <view class="form"> | |||||
| <view> | |||||
| <uv-input v-model="form.userName" placeholder="请输入手机号/用户/邮箱" border="surround" shape='circle' | |||||
| clearable :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input> | |||||
| </view> | |||||
| <view> | |||||
| <uv-input v-model="form.password" password placeholder="请输入密码" border="surround" shape='circle' | |||||
| clearable :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input> | |||||
| </view> | |||||
| <view> | |||||
| <uv-checkbox-group v-model="form.checkboxValue" shape="circle"> | |||||
| <view class="content"> | |||||
| <view style="display: flex;"> | |||||
| <uv-checkbox size="30rpx" :name="1"></uv-checkbox> | |||||
| 请你阅读并同意我们的<span style="color: #fd5100">《隐私条款》</span>和<span | |||||
| style="color: #fd5100">《服务协议》</span> | |||||
| </view> | |||||
| </view> | |||||
| </uv-checkbox-group> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 按钮 --> | |||||
| <view class="btn"> | |||||
| <button class='a'>{{btnText}}</button> | |||||
| </view> | |||||
| <!-- tab --> | |||||
| <view class="bottomTab"> | |||||
| <span :class="titleIndex==0 ? 'tabbarItemActive' : 'tabbarItemNoActive'" | |||||
| @click='changePage(0)'>注册账号</span> | |||||
| <span style="color: #9c9fa4">|</span> | |||||
| <span :class="titleIndex==1 ? 'tabbarItemActive' : 'tabbarItemNoActive'" | |||||
| @click='changePage(1)'>账号登录</span> | |||||
| <span style="color: #9c9fa4">|</span> | |||||
| <span :class="titleIndex==2 ? 'tabbarItemActive' : 'tabbarItemNoActive'" | |||||
| @click='changePage(2)'>忘记密码</span> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 忘记密码 --> | |||||
| <view class='forgetPassword' v-if='titleIndex==2'> | |||||
| <!-- 标题 --> | |||||
| <view class="title">{{title}}</view> | |||||
| <!-- 表单 --> | |||||
| <view class="form1"> | |||||
| <view class="userName"> | |||||
| <uv-input v-model="form1.userName" placeholder="请输入手机号/用户/邮箱" border="surround" shape='circle' | |||||
| clearable :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input> | |||||
| </view> | |||||
| <view class="code"> | |||||
| <view class="left"> | |||||
| <uv-input v-model="form1.code" placeholder="请输入验证码" border="surround" shape='circle' | |||||
| clearable :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input> | |||||
| </view> | |||||
| <view class="right"> | |||||
| <view> | |||||
| <uv-toast ref="toast"></uv-toast> | |||||
| <uv-code :seconds="seconds" @end="end" @start="start" ref="code" | |||||
| @change="codeChange"></uv-code> | |||||
| <uv-button @tap="getCode" iconSize='10rpx' color='#fd5100' | |||||
| shape='circle'>{{tips}}</uv-button> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="password1"> | |||||
| <uv-input v-model="form1.password1" placeholder="设置您的新密码(6到50个字符)" password clearable | |||||
| border="surround" shape='circle' :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input> | |||||
| </view> | |||||
| <view class="password2"> | |||||
| <uv-input v-model="form1.password2" placeholder="重新确认密码" password clearable border="surround" | |||||
| shape='circle' :customStyle="{ backgroundColor: '#f6f6f6'}"></uv-input> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 按钮 --> | |||||
| <view class="btn"> | |||||
| <button class='a'>{{btnText}}</button> | |||||
| </view> | |||||
| <!-- tab --> | |||||
| <view class="bottomTab"> | |||||
| <span :class="titleIndex==0 ? 'tabbarItemActive' : 'tabbarItemNoActive'" | |||||
| @click='changePage(0)'>注册账号</span> | |||||
| <span style="color: #9c9fa4">|</span> | |||||
| <span :class="titleIndex==1 ? 'tabbarItemActive' : 'tabbarItemNoActive'" | |||||
| @click='changePage(1)'>账号登录</span> | |||||
| <span style="color: #9c9fa4">|</span> | |||||
| <span :class="titleIndex==2 ? 'tabbarItemActive' : 'tabbarItemNoActive'" | |||||
| @click='changePage(2)'>忘记密码</span> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import bottomBtn from "../../components/bottom/bottomBtn.vue" | |||||
| export default { | |||||
| components: { | |||||
| bottomBtn | |||||
| }, | |||||
| onLoad(option) { | |||||
| this.titleIndex = option.index | |||||
| this.title = option.index == 0 ? '注册' : option.index == 1 ? '登录' : '忘记密码' | |||||
| this.btnText = option.index == 0 ? '注册' : option.index == 1 ? '登录' : '重置密码' | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| titleIndex: 0, | |||||
| titleList: ['注册账号', '账号密码登录', '重置密码'], | |||||
| checkboxValue: ['apple'], | |||||
| form: { | |||||
| userName: '', | |||||
| password: '', | |||||
| checkboxValue: 'apple', | |||||
| }, | |||||
| form1: { | |||||
| userName: '', | |||||
| code: '', | |||||
| password1: '', | |||||
| password2: '', | |||||
| }, | |||||
| bottomBtnStyle: { | |||||
| color: '#FFF', | |||||
| backgroundColor: '#fd5100', | |||||
| fontSize: '34rpx', | |||||
| width: '400rpx', | |||||
| height: '80rpx', | |||||
| borderRadius: '100rpx', | |||||
| bottom: '42%' | |||||
| }, | |||||
| title: "", //标题 | |||||
| btnText: "", //按钮文字, | |||||
| tips: '获取验证码', | |||||
| seconds: 60, | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| // 切换页面 | |||||
| changePage(index) { | |||||
| this.titleIndex = index | |||||
| this.title = index == 0 ? '注册' : index == 1 ? '登录' : '忘记密码' | |||||
| this.btnText = index == 0 ? '注册' : index == 1 ? '登录' : '重置密码' | |||||
| }, | |||||
| confirm() { | |||||
| }, | |||||
| codeChange(text) { | |||||
| this.tips = text; | |||||
| }, | |||||
| getCode() { | |||||
| if (this.$refs.code.canGetCode) { | |||||
| // 模拟向后端请求验证码 | |||||
| uni.showLoading({ | |||||
| title: '正在获取验证码' | |||||
| }) | |||||
| setTimeout(() => { | |||||
| uni.hideLoading(); | |||||
| // 这里此提示会被this.start()方法中的提示覆盖 | |||||
| uni.$uv.toast('验证码已发送'); | |||||
| // 通知验证码组件内部开始倒计时 | |||||
| this.$refs.code.start(); | |||||
| }, 2000); | |||||
| } else { | |||||
| uni.$uv.toast('请勿重复发送'); | |||||
| } | |||||
| }, | |||||
| end() { | |||||
| // uni.$uv.toast('倒计时结束'); | |||||
| }, | |||||
| start() { | |||||
| // uni.$uv.toast('倒计时开始'); | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| * { | |||||
| box-sizing: border-box; | |||||
| } | |||||
| .refundsOrExchange { | |||||
| background-color: #FFF; | |||||
| height: 100vh; | |||||
| .frame { | |||||
| background-color: #FFF; | |||||
| .loginRegister { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| gap: 40rpx; | |||||
| .title { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: flex-end; | |||||
| height: 10vh; | |||||
| color: #000; | |||||
| font-size: 40rpx; | |||||
| font-weight: 700; | |||||
| } | |||||
| .userIamge { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| height: 10vh; | |||||
| >view:nth-of-type(1) { | |||||
| width: 25%; | |||||
| height: 100%; | |||||
| border-radius: 50%; | |||||
| overflow: hidden; | |||||
| } | |||||
| } | |||||
| .form { | |||||
| height: 12vh; | |||||
| >view:nth-of-type(1) { | |||||
| padding: 20rpx 100rpx; | |||||
| } | |||||
| >view:nth-of-type(2) { | |||||
| padding: 0 100rpx; | |||||
| } | |||||
| >view:nth-of-type(3) { | |||||
| display: flex; | |||||
| padding: 30rpx 100rpx 0 100rpx; | |||||
| font-size: 22rpx | |||||
| } | |||||
| } | |||||
| .btn { | |||||
| // height: 5vh; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| margin: 50rpx 0 0 0; | |||||
| .a { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| width: 70%; | |||||
| height: 80rpx; | |||||
| color: #FFF; | |||||
| background-color: #fd5100; | |||||
| border: 1px solid red; | |||||
| border-radius: 100rpx; | |||||
| font-size: 30rpx; | |||||
| } | |||||
| } | |||||
| .bottomTab { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| height: 10vh; | |||||
| padding: 0 80rpx; | |||||
| .tabbarItemActive { | |||||
| color: #fd5100; | |||||
| } | |||||
| .tabbarItemNoActive { | |||||
| color: #9c9fa4; | |||||
| } | |||||
| } | |||||
| } | |||||
| .forgetPassword { | |||||
| padding: 100rpx 40rpx 0 40rpx; | |||||
| .title { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: flex-end; | |||||
| height: 10vh; | |||||
| color: #000; | |||||
| font-size: 40rpx; | |||||
| font-weight: 700; | |||||
| } | |||||
| .form1 { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| gap: 30rpx; | |||||
| margin-top: 20rpx; | |||||
| padding: 20rpx 80rpx; | |||||
| .userName { | |||||
| // padding: 20rpx 100 rpx; | |||||
| } | |||||
| .code { | |||||
| display: flex; | |||||
| width: 100%; | |||||
| .left { | |||||
| width: 55%; | |||||
| } | |||||
| .right { | |||||
| width: 45%; | |||||
| height: 100%; | |||||
| >view:nth-of-type(1) { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| width: 100%; | |||||
| } | |||||
| } | |||||
| } | |||||
| .password1 {} | |||||
| .password2 {} | |||||
| } | |||||
| .btn { | |||||
| // height: 5vh; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| margin: 30rpx 0 0 0; | |||||
| .a { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| width: 70%; | |||||
| height: 80rpx; | |||||
| color: #FFF; | |||||
| background-color: #fd5100; | |||||
| border: 1px solid red; | |||||
| border-radius: 100rpx; | |||||
| font-size: 30rpx; | |||||
| } | |||||
| } | |||||
| .bottomTab { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| margin: 50rpx 0 0 0; | |||||
| padding: 0 80rpx; | |||||
| .tabbarItemActive { | |||||
| color: #fd5100; | |||||
| } | |||||
| .tabbarItemNoActive { | |||||
| color: #9c9fa4; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
+ 5
- 2
pages_order/order/refundsOrExchange.vue
View File
+ 1
- 0
static/image/center/11.svg
View File
| @ -0,0 +1 @@ | |||||
| <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1726157567630" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6220" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M513.536 628.6336c101.6832 0 280.8832 38.7072 310.8864 193.7408 77.5168-77.5168 124.928-185.9584 124.928-305.0496 0-241.152-194.6624-435.8144-435.8144-435.8144S77.7216 277.0944 77.7216 517.2224c0 119.0912 47.4112 227.6352 124.928 306.0736 30.0032-154.9312 209.2032-194.6624 310.8864-194.6624z m0-439.7056c112.3328 0 204.3904 91.0336 204.3904 204.3904 0 112.3328-91.0336 204.3904-204.3904 204.3904a203.776 203.776 0 0 1-204.3904-204.3904c0.1024-112.4352 92.0576-204.3904 204.3904-204.3904z m0 0" fill="#cdcdcd" p-id="6221"></path><path d="M515.4816 1006.8992c-65.8432 0-129.8432-12.9024-189.952-38.4-58.1632-24.576-110.2848-59.8016-155.136-104.5504A485.56032 485.56032 0 0 1 65.8432 708.8128c-25.6-60.2112-38.5024-124.1088-38.5024-189.952 0-65.8432 12.9024-129.8432 38.4-189.952 24.576-58.1632 59.8016-110.2848 104.5504-155.136 44.8512-44.8512 96.9728-79.9744 155.136-104.5504C385.6384 43.6224 449.536 30.72 515.4816 30.72c65.8432 0 129.8432 12.9024 189.952 38.4 58.1632 24.576 110.2848 59.8016 155.136 104.5504 44.8512 44.8512 79.9744 96.9728 104.5504 155.136C990.6176 389.0176 1003.52 452.9152 1003.52 518.8608c0 65.8432-12.9024 129.8432-38.4 189.952-24.576 58.1632-59.8016 110.2848-104.5504 155.136a485.56032 485.56032 0 0 1-155.136 104.5504 484.39296 484.39296 0 0 1-189.952 38.4z m0-936.8576c-60.6208 0-119.3984 11.8784-174.6944 35.2256a447.76448 447.76448 0 0 0-142.6432 96.1536A444.42624 444.42624 0 0 0 101.9904 344.064a446.70976 446.70976 0 0 0-35.2256 174.6944c0 60.6208 11.8784 119.3984 35.2256 174.6944 22.6304 53.4528 54.9888 101.4784 96.1536 142.6432 41.1648 41.2672 89.1904 73.6256 142.6432 96.1536 55.296 23.3472 114.0736 35.2256 174.6944 35.2256 60.6208 0 119.3984-11.8784 174.6944-35.2256 53.4528-22.6304 101.4784-54.9888 142.6432-96.1536 41.2672-41.1648 73.6256-89.1904 96.1536-142.6432 23.3472-55.296 35.2256-114.0736 35.2256-174.6944 0-60.6208-11.8784-119.3984-35.2256-174.6944a447.76448 447.76448 0 0 0-96.1536-142.6432 444.42624 444.42624 0 0 0-142.6432-96.1536 447.44704 447.44704 0 0 0-174.6944-35.2256z m0 0" fill="#cdcdcd" p-id="6222"></path></svg> | |||||