login.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365
  1. <template>
  2. <view class="content">
  3. <view class="loginbg">
  4. <view class="statues_bar"></view>
  5. <view class="logobox">
  6. <image src="/static/logo.png" mode="aspectFill"></image>
  7. </view>
  8. </view>
  9. <view class="checkbox flex1">
  10. <view class="business " @click="checked=0" :class="checked==0 ? 'bnesper' : 'actbnes' ">业务人员</view>
  11. <view class="business " @click="checked=1" :class="checked==1 ? 'applyper' : 'actapp' ">供应商</view>
  12. </view>
  13. <view class="acountbox">
  14. <view class="inacount">
  15. <text class="acoutitle">账户</text>
  16. <input type="text" v-model="form.account" class="checkword" placeholder="请输入您的账户"
  17. placeholder-style="font-size:30rpx;color:#BEBDBB" />
  18. </view>
  19. <view class="inacount">
  20. <text class="acoutitle">密码</text>
  21. <input type="text" v-model="form.password" :password="true" class="checkword" placeholder="至少6位数的字母数字组合"
  22. placeholder-style="font-size:30rpx;color:#BEBDBB" />
  23. </view>
  24. </view>
  25. <view class="otherbt flex2">
  26. <text class="regbt" @click="registerNew">新用户注册</text>
  27. <text @click="show = true">忘记密码?</text>
  28. </view>
  29. <view class="logininbtn" @click="loginIn">
  30. <text>登录</text>
  31. </view>
  32. <view class="flex1 checkag">
  33. <u-checkbox-group @change="checkboxChange">
  34. <u-checkbox name="gou" activeColor="#D8AB5A" :size="20">
  35. </u-checkbox>
  36. </u-checkbox-group>
  37. <text>我已阅读并同意</text><text style="color: #D05C39;" @click="moveAgreement">用户协议</text><text>和</text><text
  38. style="color: #D05C39;" @click="privacyPolicy">隐私政策</text>
  39. </view>
  40. <u-popup :show="show" @close="close" @open="open" mode="center">
  41. <view class="forgetbox">
  42. <!-- <view class="ciclebg">
  43. <image src="../../static/img/forpwdbg.png" mode="aspectFill"></image>
  44. </view> -->
  45. <view class="keybox">
  46. <image src="../../static/img/foricon.png" mode="aspectFill"></image>
  47. </view>
  48. <text class="keytitle">忘记密码</text>
  49. <text class="remindtitle">请电联系管理员,进行密码确定</text>
  50. <view class="surebtn" @click="close()">好的</view>
  51. </view>
  52. </u-popup>
  53. </view>
  54. </template>
  55. <script>
  56. export default {
  57. data() {
  58. return {
  59. form: {
  60. account: '',
  61. password: '',
  62. },
  63. checked: 0,
  64. show: false,
  65. gou:false,
  66. }
  67. },
  68. onLoad() {
  69. },
  70. methods: {
  71. checkboxChange(n){
  72. if(n.length>0){
  73. this.gou=true
  74. }else{
  75. this.gou=false
  76. }
  77. },
  78. close() {
  79. this.show = false
  80. },
  81. open(){
  82. this.show = true
  83. },
  84. loginIn() {
  85. if(!this.gou){
  86. this.$toast("清先阅读用户协议和隐私协议")
  87. return
  88. }
  89. let form=this.form
  90. form.loginType=this.checked+1
  91. uni.showLoading({
  92. title:'加载中',
  93. icon:'none'
  94. })
  95. uni.$u.http.post('/api/Account/login',
  96. form
  97. , {
  98. custom: {
  99. auth: true
  100. }
  101. }).then((res) => {
  102. uni.hideLoading()
  103. uni.setStorageSync('token', res.token)
  104. uni.setStorageSync('supplierId', res.userInfo.id)
  105. uni.hideLoading()
  106. this.$toast("登录成功")
  107. this.$store.commit("getAdmin", this.checked)
  108. setTimeout(() => {
  109. uni.reLaunch({
  110. url: "/pages/index/index"
  111. })
  112. }, 500)
  113. }).catch((err) => {
  114. uni.hideLoading()
  115. this.$toast(err.msg)
  116. })
  117. },
  118. moveAgreement(){
  119. uni.navigateTo({
  120. url:"/pages/bsinessadmin/useragreement"
  121. })
  122. },
  123. privacyPolicy(){
  124. uni.navigateTo({
  125. url:"/pages/bsinessadmin/privacypolicy"
  126. })
  127. },
  128. registerNew() {
  129. if (this.checked == 0) {
  130. uni.navigateTo({
  131. url: "/pages/bsinessadmin/register?checked=" + this.checked
  132. })
  133. } else {
  134. uni.navigateTo({
  135. url: "/pages/bsinessadmin/supplierges"
  136. })
  137. }
  138. }
  139. }
  140. }
  141. </script>
  142. <style lang="scss" scoped>
  143. /* uni.scss */
  144. @import 'uview-ui/theme.scss';
  145. .content {
  146. display: flex;
  147. flex-direction: column;
  148. align-items: center;
  149. justify-content: center;
  150. }
  151. .loginbg {
  152. background-image: url("https://t39.9026.com/web/uploads/thumbs/mall10000/20220629/e01b927c95ee1f05364f5e456f281388.png");
  153. height: 559rpx;
  154. width: 750rpx;
  155. background-size: 100% 100%;
  156. // display: flex;
  157. // align-items: center;
  158. // justify-content: center;
  159. }
  160. .logo {
  161. margin: 0 auto;
  162. height: 200rpx;
  163. width: 200rpx;
  164. margin-left: auto;
  165. margin-right: auto;
  166. margin-bottom: 50rpx;
  167. }
  168. .text-area {
  169. display: flex;
  170. justify-content: center;
  171. }
  172. .title {
  173. font-size: 36rpx;
  174. color: #8f8f94;
  175. }
  176. .logobox {
  177. margin: 0 auto;
  178. margin-top: 212rpx;
  179. width: 269rpx;
  180. height: 191rpx;
  181. // background-color: #F1F1F1;
  182. image {
  183. width: 100%;
  184. height: 100%;
  185. }
  186. }
  187. .checkbox {}
  188. .business {
  189. width: 305rpx;
  190. height: 90rpx;
  191. display: flex;
  192. align-items: center;
  193. justify-content: center;
  194. text-align: center;
  195. // background-color: #D8AB5A;
  196. border-raotherdius: 20rpx;
  197. color: #FFFFFF;
  198. margin-top: 57rpx;
  199. }
  200. .bnesper {
  201. background-size: 100%;
  202. background-image: url("@/static/img/loginbtn4.png");
  203. padding-top: 10rpx;
  204. color: #FFF1D8;
  205. line-height: 90rpx;
  206. }
  207. .applyper {
  208. background-image: url("@/static/img/loginbt1.png");
  209. background-size: 100%;
  210. padding-top: 10rpx;
  211. color: #FFF1D8;
  212. }
  213. .actapp {
  214. background-image: url("@/static/img/loginbtn3.png");
  215. background-size: 100%;
  216. color: #D05C39;
  217. }
  218. .actbnes {
  219. background-image: url("@/static/img/loginbt2.png");
  220. background-size: 100%;
  221. color: #D05C39;
  222. }
  223. .acountbox {
  224. .inacount {
  225. display: flex;
  226. padding: 35rpx 20rpx;
  227. box-sizing: border-box;
  228. width: 606rpx;
  229. margin-top: 40rpx;
  230. background-color: #F6F6F6;
  231. border-radius: 20rpx;
  232. font-size: 30rpx;
  233. color: #1F242A;
  234. input {
  235. width: 360rpx;
  236. }
  237. }
  238. .acoutitle {
  239. font-weight: 600;
  240. }
  241. .checkword {
  242. padding-left: 20rpx;
  243. color: #1F242A;
  244. font-size: 30rpx;
  245. }
  246. }
  247. .otherbt {
  248. width: 606rpx;
  249. display: flex;
  250. justify-content: space-between;
  251. font-size: 24rpx;
  252. padding-top: 30rpx;
  253. }
  254. .regbt {
  255. color: $uni-all-theme;
  256. }
  257. .logininbtn {
  258. box-sizing: border-box;
  259. margin-top: 80rpx;
  260. width: 606rpx;
  261. border-radius: 20rpx;
  262. background: linear-gradient(to right, #FFE1AD, #D07539);
  263. height: 100rpx;
  264. text-align: center;
  265. color: #fff;
  266. line-height: 100rpx;
  267. }
  268. .checkag {
  269. margin-top: 200rpx;
  270. font-size: 28rpx;
  271. padding-bottom: 130rpx;
  272. }
  273. .forgetbox {
  274. width: 600rpx;
  275. height: 600rpx;
  276. background-color: #fff;
  277. display: flex;
  278. flex-direction: column;
  279. align-items: center;
  280. position: relative;
  281. background-image: url("@/static/img/forpwdbg.png");
  282. background-repeat: no-repeat;
  283. background-position: right 0 top 0;
  284. background-size: 367rpx 225rpx;
  285. .ciclebg {
  286. position: relative;
  287. right: 0;
  288. top: 0;
  289. width: 367rpx;
  290. height: 225rpx;
  291. }
  292. .keybox {
  293. margin-top: 84rpx;
  294. width: 196rpx;
  295. height: 161rpx;
  296. image {
  297. width: 100%;
  298. height: 100%;
  299. }
  300. }
  301. .keytitle {
  302. color: #1F242A;
  303. padding-top: 50rpx;
  304. font-size: 36rpx;
  305. font-weight: 600;
  306. }
  307. .remindtitle {
  308. color: #68625B;
  309. font-size: 28rpx;
  310. padding-top: 30rpx;
  311. }
  312. .surebtn {
  313. width: 314rpx;
  314. height: 84rpx;
  315. line-height: 84rpx;
  316. border-radius: 43rpx;
  317. background: linear-gradient(to right, #FFE1AD, #D8AB5A);
  318. color: #412900;
  319. margin-top: 86rpx;
  320. text-align: center;
  321. }
  322. }
  323. </style>