myself.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <template>
  2. <view class="content">
  3. <view class="person">
  4. <image class="person_touxiang" src="../../static/my/touxiang.svg"></image>
  5. <view class="person_name">李老师</view>
  6. <view class="person_phone">13279845567</view>
  7. </view>
  8. <!-- 第二部分,我的订单 -->
  9. <view class="my_order">
  10. <view class="order_title">我的订单</view>
  11. <view class="order_all" @click="navigateToAll">全部></view>
  12. <view class="item-list">
  13. <view class="item-list-one" @click="navigateToDaizhifu">
  14. <image src="../../static/my/no_zhifu.svg" class="img-btn"></image>
  15. <text class="list-txt">待支付</text>
  16. </view>
  17. <view class="item-list-one" @click="navigateToDairuzhu">
  18. <image src="../../static/my/dairuzhu.svg" class="img-btn"></image>
  19. <text class="list-txt">待入住</text>
  20. </view>
  21. <view class="item-list-one" @click="navigateToYiruzhu">
  22. <image src="../../static/my/yiruzhu.svg" class="img-btn"></image>
  23. <text class="list-txt">已入住</text>
  24. </view>
  25. <view class="item-list-one" @click="navigateToYiquxiao">
  26. <image src="../../static/my/yiquxiao.svg" class="img-btn"></image>
  27. <text class="list-txt">已取消</text>
  28. </view>
  29. </view>
  30. <view class="item-list">
  31. <view class="item-list-one" @click="navigateToDaijiezhang">
  32. <image src="../../static/my/no_pay.svg" class="img-btn"></image>
  33. <text class="list-txt">待结账</text>
  34. </view>
  35. <view class="item-list-one" @click="navigateToYiwancheng">
  36. <image src="../../static/my/wancheng.svg" class="img-btn"></image>
  37. <text class="list-txt">已完成</text>
  38. </view>
  39. </view>
  40. </view>
  41. <!-- 第三部分,我的服务 -->
  42. <view class="my_help">
  43. <view class="help_title">我的服务</view>
  44. <view class="item-list">
  45. <view class="item-list-one" @click="telphone(phone)">
  46. <image src="../../static/my/person_phone.svg" class="img-btn"></image>
  47. <text class="list-txt">人工热线</text>
  48. </view>
  49. <view class="item-list-one" @click="navigateToCard">
  50. <image src="../../static/my/baoxiu.svg" class="img-btn"></image>
  51. <text class="list-txt">房间报修</text>
  52. </view>
  53. </view>
  54. </view>
  55. </view>
  56. </template>
  57. <script>
  58. export default {
  59. data() {
  60. return {
  61. sheshiList:[
  62. {id:1,list:'免费洗刷用品'},
  63. {id:2,list:'24小时热水'},
  64. {id:3,list:'客房wifi覆盖'},
  65. {id:4,list:'电视'},
  66. {id:5,list:'电吹风'},
  67. {id:6,list:'分体式空调'},
  68. ],
  69. sheshiList2:[
  70. {id:1,list:'吹风机'},
  71. {id:2,list:'宽带上网接口'},
  72. {id:3,list:'独立卫生间'},
  73. {id:4,list:'拖鞋'},
  74. {id:5,list:'电水壶'},
  75. {id:6,list:'免费瓶装水'},
  76. ],
  77. phone:'15079248859',//电话
  78. }
  79. },
  80. onLoad() {
  81. },
  82. methods: {
  83. //跳转到全部订单
  84. navigateToAll(){
  85. uni.navigateTo({
  86. url:"../my_orderlist/my_orderlist?Inv=0"
  87. })
  88. },
  89. //跳转到待支付订单
  90. navigateToDaizhifu(){
  91. uni.navigateTo({
  92. url: "../my_orderlist/my_orderlist?Inv=1",
  93. success: res => {console.log("调用成功")},
  94. fail: () => {console.log("调用失败")},
  95. complete: () => {console.log("调用完成")}
  96. })
  97. },
  98. //跳转到待入住订单
  99. navigateToDairuzhu(){
  100. uni.navigateTo({
  101. url: "../my_orderlist/my_orderlist?Inv=2",
  102. success: res => {console.log("调用成功")},
  103. fail: () => {console.log("调用失败")},
  104. complete: () => {console.log("调用完成")}
  105. })
  106. },
  107. //跳转到已入住订单
  108. navigateToYiruzhu(){
  109. uni.navigateTo({
  110. url: "../my_orderlist/my_orderlist?Inv=3",
  111. success: res => {console.log("调用成功")},
  112. fail: () => {console.log("调用失败")},
  113. complete: () => {console.log("调用完成")}
  114. })
  115. },
  116. //跳转到已取消订单
  117. navigateToYiquxiao(){
  118. uni.navigateTo({
  119. url: "../my_orderlist/my_orderlist?Inv=4",
  120. success: res => {console.log("调用成功")},
  121. fail: () => {console.log("调用失败")},
  122. complete: () => {console.log("调用完成")}
  123. })
  124. },
  125. //跳转到待结账订单
  126. navigateToDaijiezhang(){
  127. uni.navigateTo({
  128. url: "../my_orderlist/my_orderlist?Inv=5",
  129. success: res => {console.log("调用成功")},
  130. fail: () => {console.log("调用失败")},
  131. complete: () => {console.log("调用完成")}
  132. })
  133. },
  134. //跳转到已完成订单
  135. navigateToYiwancheng(){
  136. uni.navigateTo({
  137. url: "../my_orderlist/my_orderlist?Inv=6",
  138. success: res => {console.log("调用成功")},
  139. fail: () => {console.log("调用失败")},
  140. complete: () => {console.log("调用完成")}
  141. })
  142. },
  143. //拨打人工热线
  144. telphone(phone){
  145. uni.makePhoneCall({ phoneNumber: phone }) // 传参带入号码即可
  146. // 获取设备平台
  147. // let platform = uni.getSystemInfoSync().platform
  148. // switch (platform) {
  149. // case 'android':
  150. // uni.showActionSheet({
  151. // itemList: [phone,'呼叫'],
  152. // success:function(res){
  153. // console.log(res);
  154. // if(res.tapIndex==1){
  155. // plus.device.dial(phone,true)
  156. // }
  157. // },
  158. // complete: function(res) {
  159. // console.log("安卓失败",res)
  160. // }
  161. // })
  162. // break;
  163. // case 'ios':
  164. // // 使用uni-app提供的借口
  165. // uni.makePhoneCall({
  166. // phoneNumber: phone
  167. // })
  168. // break;
  169. // default:
  170. // 调试器工具
  171. // }
  172. }
  173. }
  174. }
  175. </script>
  176. <style>
  177. @import url("./css/myself.css");
  178. </style>