verification.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  1. <template>
  2. <view class="verification">
  3. <view class="nav">
  4. <!-- 搜索栏 -->
  5. <view class="navbox">
  6. <view class="search">
  7. <u-input placeholder="搜索" border='none' v-model="search" @input="searchText">
  8. <template slot="suffix" style='margin-right:40rpx;'>
  9. <u-image :showLoading="true" :showError='true' src="/static/icon/search.png" width="40rpx"
  10. height="32rpx"></u-image>
  11. </template>
  12. </u-input>
  13. </view>
  14. <view>
  15. <image src="/static/icon/scan.png" style="width: 48rpx ;height: 48rpx;" @click="scanCode"></image>
  16. </view>
  17. </view>
  18. <!-- 分段器 -->
  19. <view class="segmented">
  20. <view class="tab_nav">
  21. <view class="navTitle" v-for="(item,index) in items" :key="index">
  22. <view :class="{'active':isActive == index}" @click="checked(index)">
  23. {{item}}
  24. </view>
  25. </view>
  26. </view>
  27. </view>
  28. </view>
  29. <!-- 未核销列表 -->
  30. <view v-if="isActive === 0">
  31. <view class="card" v-for="item in orderList" >
  32. <view class="toptitle">
  33. <view>洲际天堂大饭店</view>
  34. <view>未核销</view>
  35. </view>
  36. <view class="shopCard">
  37. <image src="/static/icon/Kudosbg.png"></image>
  38. <view style="margin-left: 24rpx;">
  39. <text class="name">端午佳节五香肉粽子,仅限前</text>
  40. <text class="tag">礼盒装 2000积分</text>
  41. </view>
  42. </view>
  43. <view class="points">
  44. <text class="totalName">共计:</text>
  45. <text class="totalContent">2000积分</text>
  46. </view>
  47. <view class="btn" @click="goOrderVF">
  48. <text>核销</text>
  49. </view>
  50. </view>
  51. </view>
  52. <!-- 已核销列表 -->
  53. <view v-if="isActive === 1">
  54. <view class="card" v-for="item in orderList" @click="goDetail">
  55. <view class="toptitle">
  56. <view>洲际天堂大饭店</view>
  57. <view>未核销</view>
  58. </view>
  59. <view class="shopCard">
  60. <image src="/static/icon/Kudosbg.png"></image>
  61. <view style="margin-left: 24rpx;">
  62. <text class="name">端午佳节五香肉粽子,仅限前</text>
  63. <text class="tag">礼盒装 2000积分</text>
  64. </view>
  65. </view>
  66. <view class="points">
  67. <text class="totalName">共计:</text>
  68. <text class="totalContent">2000积分</text>
  69. </view>
  70. <view class="btn" v-if="false">
  71. <text>核销</text>
  72. </view>
  73. </view>
  74. </view>
  75. <!-- 我的列表 -->
  76. <view v-if="isActive === 2" >
  77. <view class="card" v-for="item in orderList" @click="goDetail">
  78. <view class="toptitle">
  79. <view>洲际天堂大饭店</view>
  80. <view>未核销</view>
  81. </view>
  82. <view class="shopCard">
  83. <image src="http://t9.9026.com/imgs/Kudosbg.png"></image>
  84. <view style="margin-left: 24rpx;">
  85. <text class="name">端午佳节五香肉粽子,仅限前</text>
  86. <text class="tag">礼盒装 2000积分</text>
  87. </view>
  88. </view>
  89. <view class="points">
  90. <text class="totalName">共计:</text>
  91. <text class="totalContent">2000积分</text>
  92. </view>
  93. <view class="btn" v-if="false">
  94. <text>核销</text>
  95. </view>
  96. </view>
  97. </view>
  98. <!-- 已经到底啦 -->
  99. <view class="home-bottom">
  100. <uni-load-more :status="status" color="#CCCCCC" :content-text="contentText"/>
  101. </view>
  102. </view>
  103. </template>
  104. <script>
  105. import util from './../../../utils/util.js'
  106. export default{
  107. data(){
  108. return{
  109. // 搜索
  110. search:'',
  111. // 分段器标题
  112. items: ['未核销', '已核销', '我的'],
  113. isActive: 0,
  114. // 组件uni-load-more
  115. status: 'noMore',
  116. contentText: {
  117. contentdown: '查看更多',
  118. contentrefresh: '加载中',
  119. contentnomore: '—— 已经到底啦 ——'
  120. },
  121. // 订单列表
  122. orderList:[],
  123. }
  124. },
  125. onLoad() {
  126. this.getMyOrder(1)
  127. },
  128. methods:{
  129. // 获取订单列表
  130. getMyOrder(type){
  131. this.$api.orders.getOrderList({
  132. page:1,
  133. confirm_status:type||'',
  134. keyword:this.search
  135. }).then(res=>{
  136. console.log(res,type,"订单列表")
  137. if(res.code==0){
  138. this.orderList=res.data.data
  139. }
  140. })
  141. },
  142. //菜单index切换
  143. checked(index) {
  144. console.log(index)
  145. this.isActive = index
  146. this.getMyOrder(index+1)
  147. },
  148. // 搜索防抖
  149. searchText:util.debounce(function(){
  150. this.goSearch()
  151. },1000),
  152. // 搜索
  153. goSearch(){
  154. this.$api.orders.getOrderList({
  155. confirm_status:this.isActive+1,
  156. page:1,
  157. keyword:this.search
  158. }).then(res=>{
  159. console.log(res,"搜索活动项目列表")
  160. if(res.code==0){
  161. this.orderList=res.data.data
  162. }
  163. })
  164. },
  165. // 跳转核销订单
  166. goOrderVF(){
  167. uni.navigateTo({
  168. url:'/pages/my/verification/orderVerification'
  169. })
  170. },
  171. // 跳转核销详情
  172. goDetail(){
  173. uni.navigateTo({
  174. url:'/pages/my/verification/verificationDetail'
  175. })
  176. },
  177. // 扫码
  178. scanCode(){
  179. uni.scanCode({
  180. success: function (res) {
  181. console.log('条码类型:' + res.scanType);
  182. console.log('条码内容:' + res.result);
  183. }
  184. });
  185. }
  186. }
  187. }
  188. </script>
  189. <style lang="scss" scoped>
  190. $pageColor:#F9F9F9;
  191. $bgColor:#FFFFFF;
  192. // flex布局居中对齐
  193. @mixin flexlayout {
  194. display: flex;
  195. align-items: center;
  196. justify-content: center;
  197. }
  198. .verification {
  199. height: 100%;
  200. background: $pageColor;
  201. }
  202. // ::v-deep .segmented-control__item{
  203. // justify-content: center !important;
  204. // margin: 0 30rpx;
  205. // }
  206. .nav {
  207. height: 216rpx;
  208. width: 750rpx;
  209. background: $bgColor;
  210. box-shadow: 0px 4rpx 8rpx 0px rgba(0,0,0,0.04);
  211. border-radius: 0px 0px 16rpx 16rpx;
  212. .navbox {
  213. display: flex;
  214. align-items: center;
  215. justify-content: space-between;
  216. padding: 0 30rpx;
  217. box-sizing: border-box;
  218. margin-bottom: 15rpx;
  219. // 搜索
  220. .search {
  221. height: 124rpx;
  222. width: 614rpx;
  223. background-color: $bgColor;
  224. @include flexlayout;
  225. ::v-deep .u-input {
  226. width: 690rpx !important;
  227. height: 68rpx !important;
  228. background: #F1F1F1;
  229. border-radius: 74rpx;
  230. }
  231. ::v-deep .u-input__content__field-wrapper {
  232. padding-left: 36rpx;
  233. }
  234. ::v-deep .u-input__content__field-wrapper__field{
  235. color:#999999 !important;
  236. font-size: 28rpx !important;
  237. }
  238. }
  239. }
  240. .segmented {
  241. width: 750rpx;
  242. box-sizing: border-box;
  243. //菜单切换
  244. .tab_nav {
  245. width: 750rpx;
  246. display: flex;
  247. justify-content: space-between;
  248. align-items: center;
  249. padding:0 30rpx;
  250. font-family: PingFang-SC-Heavy, PingFang-SC;
  251. }
  252. .tab_nav .navTitle {
  253. @include flexlayout()
  254. width: 128rpx;
  255. flex: none;
  256. height: 28rpx;
  257. font-size: 32rpx;
  258. color: #666;
  259. position: relative;
  260. }
  261. .active {
  262. color: #D9A94D;
  263. font-weight: bold;
  264. box-sizing: border-box;
  265. &::after {
  266. display: inline-block;
  267. content: '';
  268. width: 48rpx;
  269. height: 12rpx;
  270. background: linear-gradient(90deg, #F3D69F 0%, #D9A94D 100%);
  271. border-radius: 6px;
  272. position: absolute;
  273. bottom: -28rpx;
  274. left: 42rpx;
  275. }
  276. }
  277. }
  278. }
  279. .card{
  280. margin-top: 24rpx;
  281. // width: 750rpx;
  282. // height: 426rpx;
  283. background: $bgColor;
  284. border-radius: 16rpx;
  285. padding:32rpx 28rpx 24rpx 28rpx;
  286. box-sizing: border-box;
  287. .toptitle{
  288. display: flex;
  289. justify-content: space-between;
  290. align-items: center;
  291. font-size: 28rpx;
  292. font-family: PingFang-SC-Bold, PingFang-SC;
  293. font-weight: bold;
  294. color: #080F18;
  295. }
  296. .shopCard{
  297. margin-top: 28rpx;
  298. width: 694rpx;
  299. height: 164rpx;
  300. background: #F4F5F6;
  301. border-radius: 10rpx;
  302. display: flex;
  303. align-items: center;
  304. image{
  305. width: 132rpx;
  306. height: 132rpx;
  307. margin-left: 16rpx;
  308. display: inline-block;
  309. border-radius: 12rpx;
  310. }
  311. .name{
  312. font-size: 28rpx;
  313. font-family: PingFangSC-Medium, PingFang SC;
  314. font-weight: 500;
  315. color: #080F18;
  316. display: block;
  317. }
  318. .tag{
  319. font-size: 24rpx;
  320. font-family: PingFang-SC-Medium, PingFang-SC;
  321. font-weight: 500;
  322. color: #666666;
  323. }
  324. }
  325. .points{
  326. display: flex;
  327. justify-content: flex-end;
  328. align-items: center;
  329. margin-top: 30rpx;
  330. .totalName{
  331. font-size: 22rpx;
  332. font-family: PingFang-SC-Medium, PingFang-SC;
  333. font-weight: 500;
  334. color: #080F18;
  335. margin-right: 10rpx;
  336. }
  337. .totalContent{
  338. font-size: 30rpx;
  339. font-family: PingFang-SC-Heavy, PingFang-SC;
  340. font-weight: 800;
  341. color: #080F18;
  342. }
  343. }
  344. .btn{
  345. width: 170rpx;
  346. height: 60rpx;
  347. background: #FFFFFF;
  348. border-radius: 30rpx;
  349. border: 2rpx solid #D0D0D0;
  350. margin-left: 524rpx;
  351. margin-top: 15rpx;
  352. @include flexlayout()
  353. text{
  354. font-size: 26rpx;
  355. font-family: PingFang-SC-Medium, PingFang-SC;
  356. font-weight: 500;
  357. color: #080F18;
  358. }
  359. }
  360. }
  361. .home-bottom {
  362. padding-top: 80rpx;
  363. background-color: #f9f9f9;
  364. }
  365. </style>