storeData.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359
  1. <template>
  2. <view class="content">
  3. <view class="headr">
  4. <picker mode="date" :value="now_date" @change="bindDateChange" :fields="'month'" :end="now_date">
  5. <view class="uni-input choose-time">{{now_date}} ></view>
  6. </picker>
  7. <view class="month">
  8. <image src="../../static/icon/sdata.png" mode=""></image>
  9. <view class="store-data">
  10. <view class="data">
  11. 3000
  12. </view>
  13. <view class="tit">
  14. 本月订单
  15. </view>
  16. </view>
  17. </view>
  18. </view>
  19. <view class="search-wrapper" @click="showInput" v-if="!is_show">
  20. <image src="../../static/icon/sousuo.png" mode=""></image>
  21. <view class="">
  22. 输入关键字
  23. </view>
  24. </view>
  25. <view class="search-wrapper" v-if="is_show">
  26. <input type="text" value="" v-model="keyword" focus />
  27. <view class="btn" @click="search">
  28. 搜索
  29. </view>
  30. </view>
  31. <view class="list-wrapper">
  32. <scroll-view scroll-y="true" :style="{'height': height}" class="swiper-box" @scrolltolower="loadData">
  33. <!-- 空白页 -->
  34. <empty v-if=" loaded && dataList.length == 0"></empty>
  35. <view v-for="(item,index) in dataList" class="item">
  36. <view class="item-top flex">
  37. <view class="user-name clamp">
  38. 用户ID:{{'hello wordhello wordhellhello wordhello wordhellhello wordhello '}}
  39. </view>
  40. <view class="top-status">
  41. 待发货
  42. </view>
  43. </view>
  44. <view class="item-body flex">
  45. <image src="" mode=""></image>
  46. <view class="goods-info">
  47. <view class="good-name clamp">
  48. 满园春无患子跨店联盟洗护满园春无患子跨店联盟洗护
  49. </view>
  50. <view class="good-id">
  51. 订单编号:{{'55648785545'}}
  52. </view>
  53. <view class="tag">
  54. 本店订单
  55. </view>
  56. <view class="good-price">
  57. ¥24000.9
  58. </view>
  59. <view class="good-num">
  60. x 1
  61. </view>
  62. </view>
  63. </view>
  64. <view class="item-btm">
  65. 共一件商品 合计:¥24.9
  66. </view>
  67. </view>
  68. <uni-load-more :status="loadingType"></uni-load-more>
  69. </scroll-view>
  70. </view>
  71. </view>
  72. </template>
  73. <script>
  74. import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
  75. import empty from '@/components/empty';
  76. export default {
  77. data() {
  78. let arr = []
  79. for (let i = 0; i < 10; i++) {
  80. arr.push(i)
  81. }
  82. let a = new Date()
  83. let month = a.getMonth() + 1 + ''
  84. let year = a.getFullYear() + ''
  85. return {
  86. is_show: false, //搜索是否显示
  87. keyword: '', //搜索关键字
  88. height: '', //滚动区域高度
  89. dataList: arr, //月订单
  90. loaded: true,
  91. loadingType: 'more',
  92. page: 1,
  93. limit: 10,
  94. now_date: '2021-10',
  95. }
  96. },
  97. components: {
  98. empty,
  99. uniLoadMore
  100. },
  101. onReady(res) {
  102. var _this = this;
  103. uni.getSystemInfo({
  104. success: resu => {
  105. const query = uni.createSelectorQuery();
  106. query.select('.list-wrapper').boundingClientRect();
  107. query.exec(function(res) {
  108. console.log(res, 'ddddddddddddd');
  109. _this.height = resu.windowHeight - res[0].top + 'px';
  110. console.log('打印页面的剩余高度', _this.height);
  111. });
  112. },
  113. fail: res => {}
  114. });
  115. },
  116. methods: {
  117. showInput() {
  118. this.is_show = true
  119. },
  120. search() {
  121. console.log('search')
  122. },
  123. loadData() {
  124. let obj = this
  125. console.log('加载数据')
  126. if (obj.loadingType == 'noMore' || obj.loadingType == 'loading') {
  127. return
  128. }
  129. },
  130. bindDateChange(e) {
  131. console.log(e.detail,'dddddddddddd')
  132. this.now_date = e.detail.value
  133. }
  134. }
  135. }
  136. </script>
  137. <style lang="scss" scoped>
  138. page {
  139. background-color: #f5f5f5;
  140. }
  141. .headr {
  142. height: 357rpx;
  143. background-color: #72E3B4;
  144. position: relative;
  145. .month {
  146. position: absolute;
  147. top: 0;
  148. bottom: 0;
  149. left: 0;
  150. right: 0;
  151. margin: auto;
  152. height: 275rpx;
  153. width: 275rpx;
  154. image {
  155. width: 100%;
  156. height: 100%;
  157. }
  158. .store-data {
  159. position: absolute;
  160. height: 275rpx;
  161. width: 275rpx;
  162. text-align: center;
  163. color: #fff;
  164. top: 0;
  165. display: flex;
  166. flex-direction: column;
  167. align-items: center;
  168. justify-content: center;
  169. .data {
  170. font-size: 50rpx;
  171. font-family: PingFang SC;
  172. font-weight: bold;
  173. color: #FFFFFF;
  174. padding-bottom: 20rpx;
  175. }
  176. .tit {
  177. font-size: 30rpx;
  178. font-family: PingFang SC;
  179. font-weight: 500;
  180. color: #FFFFFF;
  181. }
  182. }
  183. }
  184. }
  185. .search-wrapper {
  186. width: 702rpx;
  187. height: 66rpx;
  188. background: #FFFFFF;
  189. box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
  190. border-radius: 33px;
  191. margin: 20rpx auto;
  192. display: flex;
  193. justify-content: center;
  194. align-items: center;
  195. font-size: 28rpx;
  196. font-family: PingFang SC;
  197. font-weight: 500;
  198. color: #999999;
  199. // line-height: 35px;
  200. image {
  201. height: 33rpx;
  202. width: 33rpx;
  203. margin-right: 22rpx;
  204. }
  205. input {
  206. width: auto;
  207. flex-grow: 1;
  208. padding-left: 30rpx;
  209. }
  210. .btn {
  211. width: 150rpx;
  212. text-align: center;
  213. //background-color: red;
  214. color: #72E3B4;
  215. }
  216. }
  217. .list-wrapper {
  218. .swiper-box {
  219. // background-color: #bfa;
  220. .item {
  221. width: 702rpx;
  222. height: 304rpx;
  223. padding: 0 28rpx;
  224. background: #FFFFFF;
  225. box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
  226. border-radius: 10rpx;
  227. margin: 0 auto 15rpx;
  228. &:last-of-type {
  229. margin: 0 auto;
  230. }
  231. .item-top {
  232. line-height: 83rpx;
  233. max-height: 83rpx;
  234. .user-name {
  235. flex-grow: 1;
  236. height: 83rpx;
  237. font-size: 24rpx;
  238. font-family: PingFang SC;
  239. font-weight: 400;
  240. color: #666666;
  241. padding-right: 30rpx;
  242. }
  243. .top-status {
  244. width: 100rpx;
  245. flex-shrink: 0;
  246. font-size: 28rpx;
  247. font-family: PingFang SC;
  248. font-weight: 500;
  249. color: #52C696;
  250. }
  251. }
  252. .item-body {
  253. justify-content: flex-start;
  254. image {
  255. width: 160rpx;
  256. height: 160rpx;
  257. border-radius: 15rpx;
  258. background-color: #eee;
  259. flex-shrink: 0;
  260. margin-right: 9rpx;
  261. }
  262. .goods-info {
  263. width: 100%;
  264. height: 160rpx;
  265. position: relative;
  266. .good-name {
  267. width: 311rpx;
  268. line-height: 37rpx;
  269. font-size: 26rpx;
  270. font-family: PingFang SC;
  271. font-weight: 500;
  272. color: #3F454B;
  273. }
  274. .good-id {
  275. // width: 273px;
  276. line-height: 40rpx;
  277. font-size: 24rpx;
  278. font-family: PingFang SC;
  279. font-weight: 400;
  280. color: #666666;
  281. }
  282. .tag {
  283. margin-top: 6rpx;
  284. width: 102rpx;
  285. line-height: 34rpx;
  286. background: #DBF3E9;
  287. border-radius: 5rpx;
  288. text-align: center;
  289. font-size: 20rpx;
  290. font-family: PingFang SC;
  291. font-weight: 500;
  292. color: #52C696;
  293. }
  294. .good-price,
  295. .good-num {
  296. position: absolute;
  297. top: 0;
  298. right: 0;
  299. line-height: 1.5;
  300. text-align: right;
  301. font-size: 26rpx;
  302. font-family: PingFang SC;
  303. font-weight: 500;
  304. color: #333333;
  305. }
  306. .good-num {
  307. color: #666666;
  308. top: 39rpx;
  309. }
  310. }
  311. }
  312. .item-btm {
  313. text-align: right;
  314. font-size: 26rpx;
  315. font-family: PingFang SC;
  316. font-weight: 500;
  317. color: #333333;
  318. }
  319. }
  320. }
  321. }
  322. .choose-time {
  323. line-height: 1.5;
  324. padding-left: 30rpx;
  325. font-size: 28rpx;
  326. font-family: PingFang SC;
  327. font-weight: 500;
  328. color: #FFFFFF;
  329. }
  330. </style>