orderShareLogin.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. <template>
  2. <view class="container login">
  3. <!-- logo区域 -->
  4. <view class="login-main"> <image class="logo" :src="imagePath" mode=""></image> </view>
  5. <!-- 输入框 -->
  6. <view class="login-input">
  7. <input
  8. type="number"
  9. v-model="shareCode"
  10. maxlength="6"
  11. class="input"
  12. placeholder="请输入分享码"
  13. />
  14. </view>
  15. <!-- 提示信息 -->
  16. <view class="logo-message" v-if="false"
  17. ><text>分享码错误,请联系对方获取分享码</text>
  18. </view>
  19. <!-- 登录按钮 -->
  20. <button class="login-btn" :disabled="!canSubmit" @click="goLogin">查看订单</button>
  21. </view>
  22. </template>
  23. <script>
  24. import authorize from '@/common/config/authorize.js'
  25. export default {
  26. data() {
  27. return {
  28. imagePath: '/static/ws/logo.png',
  29. shareCode: '', //获取用户登录的邀请码
  30. isUserInfo: false, //控制显示授权弹窗
  31. nickName: '', //存储用户名
  32. userInfo: '', //存储微信用户授权信息
  33. orderId: 0, //订单ID
  34. organizeId: 0, //分享人的用户ID
  35. isShareStatus: false
  36. }
  37. },
  38. onLoad(e) {
  39. // this.orderId = e.orderId || '13140'
  40. // this.organizeId = e.organizeId || '13914'
  41. this.orderId = e.orderId
  42. this.organizeId = e.organizeId
  43. },
  44. computed: {
  45. canSubmit() {
  46. return this.shareCode.trim().length > 0
  47. }
  48. },
  49. methods: {
  50. initQueryUser(){
  51. authorize.getCode('weixin').then(wechatcode =>{
  52. let params ={
  53. code:wechatcode,
  54. orderId:this.orderId,
  55. organizeId:this.organizeId,
  56. shareCode:this.shareCode
  57. }
  58. this.OrderService.OrderShareCode(params).then(response =>{
  59. console.log(response.code)
  60. if(response.code === 2){
  61. this.$api.navigateTo(`/pages/user/order/order-details?type=share&orderId=${this.orderId}`)
  62. }else if(response.code === 0) {
  63. console.log(response.data)
  64. if(response.data == true){//同为会所运营人员查看订单详情
  65. this.$api.navigateTo(`/pages/user/order/order-details?type=share&orderId=${this.orderId}`)
  66. }else{//游客第二次查看订单详情
  67. this.$api.redirectTo(`/pages/user/order/order-sharedetails?orderId=${this.orderId}`)
  68. }
  69. }else if(response.code === -2){
  70. this.$util.modal('提示',response.msg,'确定','',false,() =>{})
  71. }
  72. })
  73. })
  74. },
  75. goLogin() {
  76. if (this.shareCode == '') {
  77. this.$util.msg('请联系分享人获取分享码', 2000)
  78. return
  79. }
  80. if (!this.$api.isNumber(this.shareCode)) {
  81. this.$util.msg('分享码格式不正确', 2000)
  82. return
  83. }
  84. authorize.getCode('weixin').then(wechatcode => {
  85. let params = {
  86. code: wechatcode,
  87. orderId: this.orderId,
  88. organizeId: this.organizeId,
  89. shareCode: this.shareCode
  90. }
  91. this.OrderService.OrderShareCode(params).then(response => {
  92. if (response.code === 0) {
  93. //游客第一次查看订单详情
  94. this.$api.redirectTo(
  95. '/pages/user/order/order-sharedetails?orderId=' + this.orderId
  96. )
  97. } else {
  98. this.$util.msg(response.msg, 2000)
  99. }
  100. })
  101. })
  102. }
  103. },
  104. onShow() {
  105. this.initQueryUser()
  106. }
  107. }
  108. </script>
  109. <style lang="scss">
  110. .login {
  111. width: 100%;
  112. height: 100%;
  113. background: #ffffff;
  114. .model-warp.none {
  115. display: none;
  116. }
  117. .model-warp.show {
  118. display: block;
  119. }
  120. .login-main {
  121. width: 100%;
  122. display: flex;
  123. flex-direction: column;
  124. align-items: center;
  125. padding: 178rpx 0 140rpx;
  126. .logo {
  127. width: 152rpx;
  128. height: 152rpx;
  129. display: block;
  130. }
  131. }
  132. .login-input {
  133. width: 550rpx;
  134. height: 40rpx;
  135. padding: 24rpx 0;
  136. margin: 0 auto;
  137. margin-bottom: 30rpx;
  138. background: #ffffff;
  139. border-bottom: 1px solid #e1e1e1;
  140. .input {
  141. width: 100%;
  142. height: 100%;
  143. background: #ffffff;
  144. font-size: $font-size-28;
  145. line-height: 40rpx;
  146. color: #333333;
  147. }
  148. }
  149. .login-btn {
  150. width: 600rpx;
  151. height: 90rpx;
  152. font-size: $font-size-30;
  153. line-height: 90rpx;
  154. color: #ffffff;
  155. margin: 0 auto;
  156. margin-top: 64rpx;
  157. text-align: center;
  158. background: $btn-confirm;
  159. border-radius: 44rpx;
  160. }
  161. .model-authorization {
  162. width: 100%;
  163. height: 100%;
  164. position: fixed;
  165. top: 0;
  166. left: 0;
  167. z-index: 999;
  168. .authorization {
  169. width: 518rpx;
  170. height: 320rpx;
  171. position: absolute;
  172. background: rgba(255, 255, 255, 0.7);
  173. left: 0;
  174. right: 0;
  175. bottom: 0;
  176. top: 0;
  177. margin: auto;
  178. .to-btn {
  179. position: absolute;
  180. top: 0;
  181. left: 0;
  182. right: 0;
  183. bottom: 0;
  184. margin: auto;
  185. width: 70%;
  186. height: 88rpx;
  187. font-size: $font-size-28;
  188. line-height: 88rpx;
  189. color: #ffffff;
  190. text-align: center;
  191. border-radius: 44rpx;
  192. }
  193. }
  194. }
  195. .logo-message {
  196. font-size: 24rpx;
  197. line-height: 33rpx;
  198. color: #ff2a2a;
  199. display: flex;
  200. justify-content: center;
  201. align-items: center;
  202. &::before {
  203. content: '!';
  204. display: block;
  205. width: 22rpx;
  206. height: 22rpx;
  207. border: 1px solid #ff2a2a;
  208. border-radius: 50%;
  209. color: #ff2a2a;
  210. text-align: center;
  211. line-height: 22rpx;
  212. margin-right: 6rpx;
  213. }
  214. }
  215. }
  216. </style>