index.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381
  1. <template>
  2. <view class="content">
  3. <view class="top">
  4. <view>
  5. <image class="logo" :src="userDetail.avatar"></image>
  6. </view>
  7. <view class="topRight">
  8. <view class="wxName">{{userDetail.name}}</view>
  9. <view class="titleBox">
  10. <view class="title" v-for="(item,index) in customerInfo.lables">{{item.name}}</view>
  11. </view>
  12. </view>
  13. </view>
  14. <view class="tabBox">
  15. <view class="tabline" :class="{tabActive:tabIndex==1}" @click="tabFn(1)">客户信息</view>
  16. <view class="tabline" :class="{tabActive:tabIndex==2}" @click="tabFn(2)">车辆信息</view>
  17. <view class="tabline" :class="{tabActive:tabIndex==3}" @click="tabFn(3)">套餐余额</view>
  18. <view class="tabline" :class="{tabActive:tabIndex==4}" @click="tabFn(4)">优惠券</view>
  19. <view class="tabline" :class="{tabActive:tabIndex==5}" @click="tabFn(5)">消费历史</view>
  20. </view>
  21. <custom ref="customView" :token="token" v-show="tabIndex==1"></custom>
  22. <car ref="carView" v-show="tabIndex==2"></car>
  23. <packageV ref="packageView" v-show="tabIndex==3"></packageV>
  24. <coupon ref="couponView" v-show="tabIndex==4"></coupon>
  25. <consumption ref="consumptionView" v-show="tabIndex==5"></consumption>
  26. <view>{{code}}</view>
  27. <view @click="copy(code)">复制code</view>
  28. <view style="color: red;">{{userId}}</view>
  29. <view @click="copy(userId)">复制userId</view>
  30. <view @click="oAuth">重新授权</view>
  31. <view @click="copy(token)">{{token}}</view>
  32. </view>
  33. </template>
  34. <script>
  35. import custom from './custom.vue'
  36. import car from './car.vue'
  37. import packageV from './package.vue'
  38. import coupon from './coupon.vue'
  39. import consumption from './consumption.vue'
  40. export default {
  41. components: {
  42. custom,car,packageV,coupon,consumption
  43. },
  44. data() {
  45. return {
  46. title: 'Hello',
  47. tabIndex:1,
  48. token:'',
  49. code:'',
  50. userId:'',
  51. userDetail:'',
  52. customerInfo:'',
  53. }
  54. },
  55. onLoad() {
  56. this.code=uni.getStorageSync('code')
  57. this.token=uni.getStorageSync('token')
  58. if(!this.token){
  59. this.authUserInfo()
  60. }else{
  61. this.extCustomerInfo()
  62. // this.$refs.customView.getdata()
  63. }
  64. this.init()
  65. this.extUserDetail()
  66. },
  67. methods: {
  68. tabFn(num){
  69. this.tabIndex=num
  70. if(num==1){
  71. this.$refs.customView.getdata()
  72. }
  73. if(num==4){
  74. this.$refs.couponView.getdata()
  75. }
  76. },
  77. extCustomerInfo(){
  78. var that=this;
  79. this.$http('enterprise/wechat/extCustomerInfo', {
  80. corpID:'wpMGjbBgAA_zIu6wbKy48zFSbGiGeP8g',
  81. extUserId:'wmMGjbBgAA0JAbGD5Vu8BzEuYgZhvhOA',
  82. token:this.token
  83. }, 'GET').then(res => {
  84. this.customerInfo=res.data.data.customerInfo
  85. })
  86. },
  87. extUserDetail(){
  88. var that=this;
  89. this.$http('enterpriseWechat/auth/extUserDetail', {
  90. corpID:'wpMGjbBgAA_zIu6wbKy48zFSbGiGeP8g',
  91. extUserId:'wmMGjbBgAA0JAbGD5Vu8BzEuYgZhvhOA'
  92. }, 'GET').then(res => {
  93. this.userDetail=res.data
  94. this.$refs.customView.getdata()
  95. })
  96. },
  97. authUserInfo(){
  98. var that=this;
  99. this.$http('enterpriseWechat/auth/authUserInfo', {
  100. corpID:'wpMGjbBgAA_zIu6wbKy48zFSbGiGeP8g',
  101. code:'F1IuIOqKSe_jNMQrCghvVnyyUSN0YKnNHr3pYoBXTPY'
  102. }, 'GET').then(res => {
  103. this.token=res.data.token
  104. uni.setStorage({
  105. key: 'token',
  106. data: that.token,
  107. success: function () { }
  108. });
  109. })
  110. },
  111. init(){
  112. /* if(this.$wx.agentConfig){
  113. uni.showToast({
  114. title: 'agentConfig',
  115. icon: 'none',
  116. duration: 3000
  117. });
  118. }else{
  119. uni.showToast({
  120. title: 'agentConfig失败',
  121. icon: 'none',
  122. duration: 3000
  123. });
  124. } */
  125. var that=this
  126. this.$http('enterpriseWechat/auth/getAgentConfig', {
  127. corpID:'wpMGjbBgAA_zIu6wbKy48zFSbGiGeP8g',
  128. url:'http://qw.66km.com.cn/'
  129. }, 'GET').then(res => {
  130. console.log(11)
  131. that.$wx.agentConfig({
  132. corpid: 'wpMGjbBgAA_zIu6wbKy48zFSbGiGeP8g', // 必填,企业微信的corpid,必须与当前登录的企业一致
  133. agentid: '1000040', // 必填,企业微信的应用id (e.g. 1000247)
  134. timestamp: res.data.timestamp, // 必填,生成签名的时间戳
  135. nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
  136. signature: res.data.signature,// 必填,签名,见附录-JS-SDK使用权限签名算法
  137. jsApiList: ['getCurExternalContact','getContext'], //必填,传入需要使用的接口名称
  138. success: function(res) {
  139. console.log(res)
  140. /* uni.showToast({
  141. title: 'agentConfig成功',
  142. icon: 'none',
  143. duration: 3000
  144. }); */
  145. // 回调
  146. that.getContext()
  147. },
  148. fail: function(err) {
  149. console.log(err)
  150. uni.showToast({
  151. title: 'agentConfig失败11',
  152. icon: 'none',
  153. duration: 3000
  154. });
  155. if(res.errMsg.indexOf('function not exist') > -1){
  156. alert('版本过低请升级')
  157. }
  158. }
  159. });
  160. })
  161. },
  162. getContext(){
  163. var that=this;
  164. this.$wx.invoke('getContext', {
  165. }, function(res){
  166. if(res.err_msg == "getContext:ok"){
  167. // entry = res.entry ; //返回进入H5页面的入口类型,目前有normal、contact_profile、single_chat_tools、group_chat_tools、chat_attachment
  168. //shareTicket = res.shareTicket; //可用于调用getShareInfo接口
  169. that.getCurExternalContact()
  170. }else {
  171. //错误处理
  172. uni.showToast({
  173. title: '入口不对',
  174. icon: 'none',
  175. duration: 3000
  176. });
  177. }
  178. });
  179. },
  180. getCurExternalContact(){
  181. var that=this;
  182. this.$wx.invoke('getCurExternalContact', {
  183. }, function(res){
  184. if(res.err_msg == "getCurExternalContact:ok"){
  185. that.userId = res.userId ; //返回当前外部联系人userId
  186. that.extUserDetail()
  187. }else {
  188. //错误处理
  189. uni.showToast({
  190. title: 'userId获取失败',
  191. icon: 'none',
  192. duration: 3000
  193. });
  194. }
  195. });
  196. },
  197. init2(){
  198. var that=this;
  199. console.log(this.$wx.config)
  200. if(this.code){
  201. if(that.$wx.config){
  202. }else{
  203. uni.showToast({
  204. title: 'agentConfig失败',
  205. icon: 'none',
  206. duration: 3000
  207. });
  208. }
  209. }else{
  210. uni.navigateTo({
  211. url:'auto'
  212. })
  213. }
  214. uni.showLoading({
  215. title: '加载中'
  216. });
  217. /* this.$http('enterpriseWechat/auth/oAuth2', {
  218. corpID:'wpMGjbBgAA_zIu6wbKy48zFSbGiGeP8g',
  219. redirectUri:'http://qw.66km.com.cn/#/',
  220. agentId:'1000036'
  221. }, 'GET').then(res => {
  222. uni.hideLoading();
  223. console.log(res.data)
  224. }).catch(err=>{
  225. uni.hideLoading();
  226. }) */
  227. this.$http('enterpriseWechat/auth/getAgentConfig', {
  228. corpID:'wpMGjbBgAA_zIu6wbKy48zFSbGiGeP8g',
  229. url:'http://qw.66km.com.cn/'
  230. }, 'GET').then(res => {
  231. uni.hideLoading();
  232. console.log(this.$wx)
  233. this.$wx.config({
  234. debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  235. appId: 'wpMGjbBgAA_zIu6wbKy48zFSbGiGeP8g', // 必填,公众号的唯一标识
  236. timestamp: res.data.timestamp, // 必填,生成签名的时间戳
  237. nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
  238. signature: res.data.signature,// 必填,签名
  239. jsApiList: [getCurExternalContact] // 必填,需要使用的JS接口列表
  240. });
  241. that.$wx.ready(() => {
  242. if(that.$wx.agentConfig){
  243. }else{
  244. uni.showToast({
  245. title: 'agentConfig失败',
  246. icon: 'none',
  247. duration: 3000
  248. });
  249. }
  250. // that.agentConfigFn()
  251. that.$wx.agentConfig({
  252. corpid: 'wpMGjbBgAA_zIu6wbKy48zFSbGiGeP8g', // 必填,企业微信的corpid,必须与当前登录的企业一致
  253. agentid: '1000040', // 必填,企业微信的应用id (e.g. 1000247)
  254. timestamp: res.data.timestamp, // 必填,生成签名的时间戳
  255. nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
  256. signature: res.data.signature,// 必填,签名,见附录-JS-SDK使用权限签名算法
  257. jsApiList: ['getCurExternalContact'], //必填,传入需要使用的接口名称
  258. success: function(res) {
  259. console.log(res)
  260. uni.showToast({
  261. title: 'agentConfig成功',
  262. icon: 'none',
  263. duration: 3000
  264. });
  265. // 回调
  266. taht.getContext()
  267. },
  268. fail: function(res) {
  269. console.log(res)
  270. uni.showToast({
  271. title: 'agentConfig失败',
  272. icon: 'none',
  273. duration: 3000
  274. });
  275. if(res.errMsg.indexOf('function not exist') > -1){
  276. alert('版本过低请升级')
  277. }
  278. }
  279. });
  280. })
  281. }).catch(err=>{
  282. uni.hideLoading();
  283. })
  284. },
  285. agentConfigFn(){
  286. },
  287. oAuth(){
  288. uni.navigateTo({
  289. url:'auto'
  290. })
  291. },
  292. copy(e){
  293. uni.setClipboardData({
  294. data: e,
  295. success: function () {
  296. uni.showToast({
  297. title: '复制成功',
  298. icon: 'success',
  299. duration: 2000
  300. });
  301. },
  302. fail: function () {
  303. console.log('复制失败');
  304. }
  305. });
  306. }
  307. }
  308. }
  309. </script>
  310. <style scoped>
  311. .top{
  312. background: #fff;
  313. }
  314. .top{
  315. display: flex;
  316. padding: 30rpx 24rpx;
  317. }
  318. .logo{
  319. width: 98rpx;height: 98rpx;
  320. }
  321. .topRight{
  322. padding-left: 20rpx;
  323. }
  324. .wxName{
  325. font-weight: 500;
  326. font-size: 32rpx;
  327. color: #333333;
  328. line-height: 45rpx;
  329. }
  330. .titleBox{
  331. display: flex;
  332. padding-top: 10rpx;
  333. display: flex; flex-wrap: wrap;
  334. width: 500rpx;
  335. }
  336. .title{
  337. height: 36rpx;
  338. border-radius: 4rpx;
  339. border: 1px solid #FF8113;
  340. line-height: 34rpx;
  341. font-size: 24rpx;
  342. color: #FF8113;
  343. padding: 0 8rpx;
  344. margin-right: 10rpx;
  345. }
  346. .tabBox{
  347. display: flex;justify-content: space-between;
  348. background: #fff;
  349. margin-top: 16rpx;
  350. padding: 30rpx 24rpx;
  351. font-size: 30rpx;
  352. color: #333333;
  353. line-height: 42rpx;
  354. }
  355. .tabActive{
  356. color: #FF8113;font-weight: 500;
  357. border-bottom: 2px solid #FF8113;
  358. }
  359. .tabline{
  360. padding-bottom: 8rpx;
  361. }
  362. </style>