index.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. <template>
  2. <view class="content">
  3. <view v-for="item in orderList" class="order-content">
  4. <view class="item-userInfo item1" @click="itemChange(item)">
  5. <view class="userInfo">
  6. <u-image src="/static/order_avatar_rider.png" width="72" height="72" shape="circle"></u-image>
  7. <view class="userInfo-nameOrPhone">
  8. <view class="name">{{item.contactName}}</view>
  9. <view class="phone"><u-icon name="phone"></u-icon><text>{{item.contactMobile}}</text></view>
  10. </view>
  11. </view>
  12. <view>
  13. <u-icon v-show="item.isUp" name="arrow-up" color="#999" size="28"></u-icon>
  14. <u-icon v-show="!item.isUp" name="arrow-down" color="#999" size="28"></u-icon>
  15. </view>
  16. </view>
  17. <view v-show="item.isUp">
  18. <u-line color="#e5e5e5" />
  19. <view class="item-userInfo-detail">
  20. <view class="detail-title">用户信息</view>
  21. <view class="detail-title coucntinfo"><text class="coucntname">{{item.contactName}}</text><text>{{item.contactMobile}}</text></view>
  22. <view class="detail-title address">{{item.contactAddress}}</view>
  23. </view>
  24. <u-line color="#e5e5e5"/>
  25. <view class="item-userInfo-detail detail-title">订单信息</view>
  26. <u-line color="#e5e5e5"/>
  27. <view class="item-userInfo item-userInfo-detail"><text class="address">订单编号</text><text class="detail-title">{{item.orderReserveNo}}</text></view>
  28. <u-line color="#e5e5e5"/>
  29. <view class="item-userInfo item-userInfo-detail"><text class="address">预约时间</text><text class="detail-title">{{item.reserveTimeType}}</text></view>
  30. <u-line color="#e5e5e5"/>
  31. <view class="item-userInfo item-userInfo-detail"><text class="address">下单时间</text><text class="detail-title">{{item.createDate}}</text></view>
  32. <u-line color="#e5e5e5"/>
  33. <view class="item-userInfo item-userInfo-detail"><text class="address">预约品类</text><text class="detail-title">{{item.type}}</text></view>
  34. <view class="item-userInfo-detail-image">
  35. <u-image :src="img" v-for=" img in item.imgList" width="120" height="120" class="detail-image"></u-image>
  36. </view>
  37. <u-line color="#e5e5e5"/>
  38. <view class="userInfo cancelBtn"><u-button :custom-style="cancelBtn" :hair-line="false" @click="cancelOrder">取消订单</u-button></view>
  39. <!-- <v-select ref="AddressType" placeholder="请选择取消原因" @itemChange="chooseType" v-if="!showCancelBtn" code="ORDER_ADDRESS_TYPE" style="width: 100%"></v-select> -->
  40. </view>
  41. </view>
  42. <view class="nodata" v-if="!hasLogin && orderList.length==[] ">
  43. <u-empty :text="noDataText" mode="data"></u-empty>
  44. </view>
  45. <!-- <u-popup ref="openModal" type="center">
  46. <v-select ref="AddressType" placeholder="请选择取消原因" @itemChange="chooseType" v-if="!showCancelBtn" code="ORDER_ADDRESS_TYPE" style="width: 100%"></v-select>
  47. </u-popup> -->
  48. <!-- <uni-popup ref="openModal" type="center">
  49. <v-select ref="AddressType" placeholder="请选择取消原因" @itemChange="chooseType" code="ORDER_ADDRESS_TYPE" style="width: 100%"></v-select>
  50. <uni-popup-dialog @confirm="onOk" :title="title"></uni-popup-dialog>
  51. </uni-popup> -->
  52. </view>
  53. </template>
  54. <script>
  55. import vSelect from '@/components/select/v-select.vue'
  56. import uniPopup from '@/components/uni-popup/uni-popup.vue'
  57. import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
  58. import {getOrderList} from '@/api/order.js'
  59. export default{
  60. components: {
  61. uniPopup,uniPopupDialog,vSelect
  62. },
  63. data(){
  64. return{
  65. title:'提示',
  66. noDataText:'',
  67. showCancelBtn:true,
  68. cancelBtn:{
  69. width: '106px',
  70. height: '38px',
  71. background: '#E5E5E5',
  72. borderRadius:' 6px'
  73. },
  74. orderList:[]
  75. }
  76. },
  77. onLoad() {
  78. this.getOrderListData()
  79. },
  80. onShow() {
  81. checkLogin().then(res => {
  82. this.hasLogin=res.status==200
  83. if(this.hasLogin){
  84. this.pageInit()
  85. }else{
  86. this.noDataText="您尚未登录或登录已过期,完成登录后可查看数据信息!"
  87. }
  88. })
  89. },
  90. methods:{
  91. // 数据展开收起
  92. itemChange(item) {
  93. console.log('点击收起隐藏')
  94. // item.isUp = !item.isUp
  95. this.$nextTick(function(){
  96. item.isUp = !item.isUp
  97. })
  98. },
  99. // 获取订单列表
  100. getOrderListData(){
  101. getOrderList({orderStatus:'CONFIRM'}).then(res=>{
  102. if(res.status==200){
  103. if(res.data){
  104. res.data.forEach(item => {
  105. item.isUp = false
  106. })
  107. }
  108. this.$nextTick(function(){
  109. this.orderList=res.data || []
  110. })
  111. console.log(this.orderList,'------------this.orderList')
  112. }
  113. })
  114. },
  115. // 选择用户类型
  116. chooseType(v){
  117. this.form.AddressType = v
  118. },
  119. // 取消订单
  120. cancelOrder(){
  121. this.$refs.openModal.open()
  122. },
  123. onOk() {
  124. this.$refs.openModal.close()
  125. }
  126. }
  127. }
  128. </script>
  129. <style lang="less">
  130. .content{
  131. width: 100%;
  132. height: 100vh;
  133. padding: 20upx 30upx;
  134. background-color: #f5f5f5;
  135. .order-content{
  136. padding: 30upx;
  137. background-color: #fff;
  138. display: flex;
  139. flex-direction: column;
  140. border-radius: 12px;
  141. font-family: PingFang SC;
  142. margin-bottom: 20upx;
  143. .item-userInfo{
  144. display: flex;
  145. align-items: center;
  146. justify-content: space-between;
  147. .userInfo{
  148. display: flex;
  149. .userInfo-nameOrPhone{
  150. margin-left: 20upx;
  151. font-size: 28upx;
  152. .name{
  153. font-weight: bold;
  154. color: #222;
  155. }
  156. .phone{
  157. font-weight: 400;
  158. color: #999;
  159. }
  160. }
  161. }
  162. }
  163. .item1{
  164. padding-bottom: 20upx;
  165. }
  166. .item-userInfo-detail{
  167. padding: 30upx 0;
  168. view:not(last-child){
  169. padding-bottom: 10upx;
  170. }
  171. .detail-title{
  172. font-size: 32upx;
  173. font-weight: 400;
  174. color:#222
  175. }
  176. .coucntinfo{
  177. font-size: 28upx;
  178. .coucntname{
  179. display: inline-block;
  180. margin-right: 20upx;
  181. }
  182. }
  183. .address{
  184. font-size: 28upx;
  185. color: #999;
  186. }
  187. }
  188. .item-userInfo-detail-image{
  189. display: flex;
  190. padding-bottom: 30upx;
  191. .detail-image{
  192. margin-right: 20upx;
  193. }
  194. }
  195. .cancelBtn{
  196. display: flex;
  197. justify-content: flex-end;
  198. padding-top: 30upx;
  199. }
  200. }
  201. }
  202. </style>