You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

320 lines
6.8 KiB

10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
  1. <!-- 注册页面 -->
  2. <template>
  3. <view class="register bx">
  4. <div class="language">
  5. <image @click="showSelectLanguageProp" src="@/static/login/language.png" mode="aspectFit"></image>
  6. </div>
  7. <!-- 加载效果 -->
  8. <!-- <loading :loading="loading" @close="closeLoading"></loading> -->
  9. <view v-if="!loading" class="main">
  10. <!-- 登录标题 -->
  11. <view class="register-title">
  12. <view class="title">TikTok shop</view>
  13. <view class="shop-desc">Online rebate mall.</view>
  14. </view>
  15. <!-- 输入框列表 -->
  16. <view class="input-list">
  17. <input v-model="form.account" type="text" :placeholder="$t('page.register.username-placeholder')" />
  18. <input v-model="form.password" type="password"
  19. :placeholder="$t('page.register.password-placeholder')" />
  20. <input v-model="form.okPassword" type="password" :placeholder="$t('page.register.confirm-password')" />
  21. <input v-model="form.payPass" type="password"
  22. :placeholder="$t('page.register.PaymentPassword-placeholder')" />
  23. <input v-model="form.okPayPass" type="password"
  24. :placeholder="$t('page.register.PaymentPassword-placeholder')" />
  25. <input v-model="form.invitationCode" :placeholder="$t('page.register.invitation-code')" />
  26. </view>
  27. <!-- 勾选协议 -->
  28. <!-- <view class="check-box">
  29. <u-checkbox-group v-model="agree" @change="$play">
  30. <u-checkbox activeColor="#B0C73B" shape="circle" :label="$t('page.register.agreen')"
  31. name="agree"></u-checkbox>
  32. </u-checkbox-group>
  33. <view @click.stop="toAgreement" class="agreement-content">{{ $t('page.register.agreement') }}</view>
  34. </view> -->
  35. <!-- 按钮组 -->
  36. <view class="btns">
  37. <view @click.stop="register" class="now-register-btn">{{ $t('page.register.register') }}</view>
  38. <view @click.stop="toLogin" class="now-login-btn">{{ $t('page.register.login') }}</view>
  39. </view>
  40. </view>
  41. <!-- 切换语言 -->
  42. <changeLanguage :show.sync="showSelectLanguage" @close="closeSelectLanguageProp"></changeLanguage>
  43. <!-- 初始页面 -->
  44. <!-- <pageInit></pageInit> -->
  45. </view>
  46. </template>
  47. <script>
  48. import changeLanguage from '../../components/changeLanguage/changeLanguage.vue';
  49. import pageInit from '@/components/pageInit/pageInit.vue'
  50. import loading from '@/components/pageInit/loading.vue'
  51. export default {
  52. components: {
  53. changeLanguage,
  54. pageInit,
  55. loading
  56. },
  57. data() {
  58. return {
  59. form: {
  60. account: '',
  61. password: '',
  62. okPassword: '',
  63. payPass: '',
  64. okPayPass: '',
  65. invitationCode: ''
  66. },
  67. agree: [],
  68. showSelectLanguage: false,
  69. loading: false
  70. }
  71. },
  72. onShow() {
  73. },
  74. methods: {
  75. //注册
  76. register() {
  77. this.$play()
  78. if (this.verify()) {
  79. this.request('register', {}, this.form).then(res => {
  80. if (res.code == 200) {
  81. this.toLogin(false)
  82. }
  83. })
  84. }
  85. },
  86. //跳转登录页面
  87. toLogin(sound) { //是否发出声音
  88. if (sound) {
  89. this.$play()
  90. }
  91. uni.navigateTo({
  92. url: '/pages/login/login'
  93. })
  94. },
  95. //校验必填项
  96. verify() {
  97. let {
  98. account,
  99. password,
  100. okPassword,
  101. payPass,
  102. okPayPass
  103. } = this.form
  104. if (account.trim() == '') {
  105. uni.showToast({
  106. title: this.$t('page.register.accountEmpty'),
  107. icon: 'none'
  108. });
  109. return false;
  110. }
  111. if (password.trim() == '') {
  112. uni.showToast({
  113. title: this.$t('page.register.passEmpty'),
  114. icon: 'none'
  115. });
  116. return false;
  117. }
  118. if (okPassword.trim() == '') {
  119. uni.showToast({
  120. title: this.$t('page.register.okPassEmpty'),
  121. icon: 'none'
  122. });
  123. return false;
  124. }
  125. if (password.trim() != okPassword.trim()) {
  126. uni.showToast({
  127. title: this.$t('page.register.passInconsistency'),
  128. icon: 'none'
  129. });
  130. return false;
  131. }
  132. if (payPass.trim() == '') {
  133. uni.showToast({
  134. title: this.$t('page.register.payPassEmpty'),
  135. icon: 'none'
  136. });
  137. return false;
  138. }
  139. if (okPayPass.trim() == '') {
  140. uni.showToast({
  141. title: this.$t('page.register.okPayPassEmpty'),
  142. icon: 'none'
  143. });
  144. return false;
  145. }
  146. if (payPass.trim() != okPayPass.trim()) {
  147. uni.showToast({
  148. title: this.$t('page.register.payPassInconsistency'),
  149. icon: 'none'
  150. });
  151. return false;
  152. }
  153. if (this.agree.length <= 0 && this.agree[0] != 'agree') {
  154. uni.showToast({
  155. title: this.$t('page.register.tickProtocol'),
  156. icon: 'none'
  157. });
  158. return false;
  159. }
  160. return true
  161. },
  162. //显示选择语言弹框
  163. showSelectLanguageProp() {
  164. this.$play()
  165. this.showSelectLanguage = true
  166. },
  167. //关闭语言选择弹框
  168. closeSelectLanguageProp() {
  169. this.showSelectLanguage = false
  170. },
  171. //关闭加载效果
  172. closeLoading() {
  173. this.loading = false;
  174. },
  175. //跳转用户协议
  176. toAgreement() {
  177. this.$play()
  178. uni.navigateTo({
  179. url: '/pages/instructions/instructions?index=4'
  180. })
  181. }
  182. }
  183. }
  184. </script>
  185. <style lang="scss" scoped>
  186. .register {
  187. width: 750rpx;
  188. height: 100vh;
  189. margin: 0px auto;
  190. background: linear-gradient(to bottom, #fcedff 0%, #ffffff 100%);
  191. background-size: 100%;
  192. background-repeat: no-repeat;
  193. box-sizing: border-box;
  194. padding: 0rpx 20rpx;
  195. .language {
  196. display: flex;
  197. justify-content: flex-end;
  198. align-items: center;
  199. height: 160rpx;
  200. image {
  201. width: 60rpx;
  202. height: 60rpx;
  203. }
  204. }
  205. .register-title {
  206. padding: 0rpx 10rpx;
  207. box-sizing: border-box;
  208. text-align: center;
  209. .title {
  210. font-size: 30rpx;
  211. color: $uni-bg-color-app;
  212. margin-bottom: 10rpx;
  213. font-weight: bold;
  214. }
  215. .shop-desc {
  216. font-size: 28rpx;
  217. color: #333;
  218. margin-bottom: 20rpx;
  219. }
  220. }
  221. .input-list {
  222. padding: 0rpx 10rpx;
  223. box-sizing: border-box;
  224. margin: 40rpx 0rpx;
  225. input {
  226. display: block;
  227. width: 90%;
  228. margin: 0rpx auto;
  229. color: $uni-bg-color-app;
  230. border: 1px solid #eeeeee;
  231. height: 80rpx;
  232. border-radius: 40rpx;
  233. background: #fff;
  234. margin-bottom: 20rpx;
  235. text-align: center;
  236. text-indent: 1em;
  237. padding: 0rpx 15rpx;
  238. &:focus {
  239. border-color: #6d00be !important;
  240. background: pink !important;
  241. }
  242. }
  243. }
  244. .forgot-password {
  245. color: #B0C73B;
  246. text-align: center;
  247. text {
  248. border-bottom: 1rpx solid #ccc;
  249. }
  250. }
  251. .check-box {
  252. display: flex;
  253. color: rgb(96, 98, 102);
  254. .agreement-content {
  255. text-decoration: underline;
  256. font-size: 28rpx;
  257. }
  258. }
  259. .btns {
  260. padding: 0rpx 10rpx;
  261. margin-top: 40rpx;
  262. color: $uni-bg-color;
  263. .now-register-btn {
  264. background: $uni-bg-color-app;
  265. border-radius: 60rpx;
  266. display: flex;
  267. align-items: center;
  268. justify-content: center;
  269. margin-bottom: 20rpx;
  270. font-weight: bold;
  271. height: 90rpx;
  272. font-size: 40rpx;
  273. }
  274. .now-login-btn {
  275. display: flex;
  276. justify-content: center;
  277. align-items: center;
  278. color: $uni-bg-color-app;
  279. }
  280. }
  281. }
  282. </style>