orderVerification.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. <template>
  2. <view class="ordersVerification">
  3. <view style="height: 24rpx;width: 100%;background:#F9F9F9 ;"></view>
  4. <!-- 表单 -->
  5. <view class="form">
  6. <uni-forms ref="baseForm" :modelValue="FormData">
  7. <uni-forms-item label="收货人" labelWidth="150rpx">
  8. <uni-easyinput v-model="FormData.name" placeholder="请输入收货人" />
  9. </uni-forms-item>
  10. <uni-forms-item label="联系方式" labelWidth="150rpx">
  11. <uni-easyinput v-model="FormData.contact" placeholder="请输入联系方式" />
  12. </uni-forms-item>
  13. <uni-forms-item label="兑换时间" labelWidth="150rpx">
  14. <uni-easyinput v-model="FormData.date" placeholder="请输入兑换时间" />
  15. </uni-forms-item>
  16. <!-- <uni-forms-item label="兑换时间" labelWidth="150rpx">
  17. <view class="date">
  18. <picker mode="date" :value="FormData.date" :start="startDate" :end="endDate"
  19. @change="bindDateChange">
  20. <view class="uni-input" >
  21. <text v-if="FormData.date==''||FormData.date==null"
  22. style="color: #999999 ;">选择兑换时间</text>
  23. <text v-if="FormData.date!=''">{{FormData.date}}</text>
  24. </view>
  25. </picker>
  26. </view>
  27. </uni-forms-item> -->
  28. </uni-forms>
  29. </view>
  30. <!-- 商品信息 -->
  31. <view class="card" >
  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" >
  48. <text>核销</text>
  49. </view>
  50. </view>
  51. <!-- 核销订单按钮 -->
  52. <view class="bottombtn">
  53. <view class="btnitem" @click="verificationOrder">
  54. <text>核销订单</text>
  55. </view>
  56. </view>
  57. </view>
  58. </template>
  59. <script>
  60. export default{
  61. data(){
  62. const currentDate = this.getDate({
  63. format: true
  64. })
  65. return{
  66. // 表单数据
  67. FormData:{
  68. name:'',
  69. contact:'',
  70. date:'',
  71. },
  72. }
  73. },
  74. computed: {
  75. startDate() {
  76. return this.getDate('start');
  77. },
  78. endDate() {
  79. return this.getDate('end');
  80. }
  81. },
  82. methods:{
  83. // 核销订单
  84. verificationOrder(){
  85. uni.showModal({
  86. title: '提示',
  87. content: '是否核销订单',
  88. cancelColor:'#333333',
  89. confirmColor:'#FF6200',
  90. success: function (res) {
  91. if (res.confirm) {
  92. console.log('用户点击确定');
  93. } else if (res.cancel) {
  94. console.log('用户点击取消');
  95. }
  96. }
  97. });
  98. },
  99. // 选择兑换时间
  100. bindDateChange: function(e) {
  101. this.FormData.date=e.detail.value
  102. },
  103. // 获取时间
  104. getDate(type) {
  105. const date = new Date();
  106. let year = date.getFullYear();
  107. let month = date.getMonth() + 1;
  108. let day = date.getDate();
  109. if (type === 'start') {
  110. year = year - 60;
  111. } else if (type === 'end') {
  112. year = year + 2;
  113. }
  114. month = month > 9 ? month : '0' + month;
  115. day = day > 9 ? day : '0' + day;
  116. return `${year}-${month}-${day}`;
  117. }
  118. },
  119. }
  120. </script>
  121. <style lang="scss" scoped>
  122. $pageColor:#F9F9F9;
  123. $bgColor:#FFFFFF;
  124. // flex布局居中对齐
  125. @mixin flexlayout {
  126. display: flex;
  127. align-items: center;
  128. justify-content: center;
  129. }
  130. .ordersVerification {
  131. height: 100%;
  132. background: $pageColor;
  133. }
  134. ::v-deep .uni-forms-item.is-direction-left{
  135. border-bottom: 2rpx solid #F0F0F0;
  136. }
  137. ::v-deep .uni-forms-item.is-direction-left:last-child{
  138. border-bottom: 0rpx solid #F0F0F0;
  139. }
  140. ::v-deep .is-input-border {
  141. border: none;
  142. }
  143. .form {
  144. width: 750rpx;
  145. height: 328rpx;
  146. background: $bgColor;
  147. border-radius: 16rpx;
  148. padding:10rpx 30rpx;
  149. box-sizing: border-box;
  150. }
  151. .card{
  152. margin-top: 24rpx;
  153. // width: 750rpx;
  154. // height: 426rpx;
  155. background: $bgColor;
  156. border-radius: 16rpx;
  157. padding:32rpx 28rpx 24rpx 28rpx;
  158. box-sizing: border-box;
  159. .toptitle{
  160. display: flex;
  161. justify-content: space-between;
  162. align-items: center;
  163. font-size: 28rpx;
  164. font-family: PingFang-SC-Bold, PingFang-SC;
  165. font-weight: bold;
  166. color: #080F18;
  167. }
  168. .shopCard{
  169. margin-top: 28rpx;
  170. width: 694rpx;
  171. height: 164rpx;
  172. background: #F4F5F6;
  173. border-radius: 10rpx;
  174. display: flex;
  175. align-items: center;
  176. image{
  177. width: 132rpx;
  178. height: 132rpx;
  179. margin-left: 16rpx;
  180. display: inline-block;
  181. }
  182. .name{
  183. font-size: 28rpx;
  184. font-family: PingFangSC-Medium, PingFang SC;
  185. font-weight: 500;
  186. color: #080F18;
  187. display: block;
  188. }
  189. .tag{
  190. font-size: 24rpx;
  191. font-family: PingFang-SC-Medium, PingFang-SC;
  192. font-weight: 500;
  193. color: #666666;
  194. }
  195. }
  196. .points{
  197. display: flex;
  198. justify-content: flex-end;
  199. align-items: center;
  200. margin-top: 30rpx;
  201. .totalName{
  202. font-size: 22rpx;
  203. font-family: PingFang-SC-Medium, PingFang-SC;
  204. font-weight: 500;
  205. color: #080F18;
  206. margin-right: 10rpx;
  207. }
  208. .totalContent{
  209. font-size: 30rpx;
  210. font-family: PingFang-SC-Heavy, PingFang-SC;
  211. font-weight: 800;
  212. color: #080F18;
  213. }
  214. }
  215. .btn{
  216. width: 170rpx;
  217. height: 60rpx;
  218. background: #FFFFFF;
  219. border-radius: 30rpx;
  220. border: 2rpx solid #D0D0D0;
  221. margin-left: 524rpx;
  222. margin-top: 15rpx;
  223. @include flexlayout()
  224. text{
  225. font-size: 26rpx;
  226. font-family: PingFang-SC-Medium, PingFang-SC;
  227. font-weight: 500;
  228. color: #080F18;
  229. }
  230. }
  231. }
  232. .bottombtn{
  233. width: 690rpx;
  234. height: 92rpx;
  235. background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%);
  236. border-radius: 12rpx;
  237. margin-left: 30rpx;
  238. position: fixed;
  239. bottom: 72rpx;
  240. @include flexlayout()
  241. .btnitem{
  242. @include flexlayout()
  243. text{
  244. font-size: 30rpx;
  245. font-family: PingFang-SC-Bold, PingFang-SC;
  246. font-weight: bold;
  247. color: $bgColor;
  248. }
  249. }
  250. }
  251. .date{
  252. width: 545rpx;
  253. height: 74rpx;
  254. background: #FFFFFF;
  255. display: flex;
  256. align-items:center;
  257. padding-left: 20rpx;
  258. box-sizing: border-box;
  259. position: relative;
  260. }
  261. </style>