移动端
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 

433 行
12 KiB

  1. <template>
  2. <div class="home_wrapper">
  3. <!-- 头部开始 -->
  4. <van-nav-bar
  5. title="订单详情"
  6. fixed
  7. placeholder
  8. left-arrow
  9. @click-left="onClickLeft"
  10. />
  11. <!-- 头部结束 -->
  12. <!-- 内容开始 -->
  13. <div class="main">
  14. <div class="main_content_right_list">
  15. <div class="main_content_right_list_header">
  16. <p class="on">商品信息</p>
  17. <p>{{supplyDemand.productType}}</p>
  18. <p>服务</p>
  19. </div>
  20. <div class="main_content_right_list_center">
  21. <template v-if="supplyDemand.supplyDemand!=null">
  22. <img v-if="supplyDemand.supplyDemand.supplyMasterMap" :src="supplyDemand.supplyDemand.supplyMasterMap" style="width: 25vw;height: 25vw;">
  23. <img v-else src="../../../../static/images/agriculturalTrusteeship/zwtp.png" style="width: 25vw;height: 25vw;">
  24. </template>
  25. <img v-else src="../../../../static/images/agriculturalTrusteeship/zwtp.png" style="width: 25vw;height: 25vw;">
  26. <div class="main_content_right_list_content">
  27. <p class="tt">{{supplyDemand.contractionName}}</p>
  28. <div class="tab">
  29. <p>¥<span>{{supplyDemand.unitPrice}}</span>.00/{{supplyDemand.unit}}</p>
  30. </div>
  31. </div>
  32. </div>
  33. <van-cell title="买方名称" :border="false" :value="supplyDemand.bookName" />
  34. <van-cell title="联系人" :border="false" :value="supplyDemand.linkera" />
  35. <van-cell title="联系电话" :border="false" :value="supplyDemand.phonea" />
  36. </div>
  37. <div class="main_content_right_list">
  38. <div class="main_content_right_list_header">
  39. <p class="on">买家信息</p>
  40. </div>
  41. <van-cell title="联系人" :border="false" :value="supplyDemand.linkera" />
  42. <van-cell title="联系电话" :border="false" :value="supplyDemand.phonea" />
  43. <van-cell title="服务地点" :border="false" :value="supplyDemand.serviceAddress" />
  44. </div>
  45. <div class="main_content_right_list">
  46. <div class="main_content_right_list_header">
  47. <p class="on">订单信息</p>
  48. </div>
  49. <van-cell title="接单时间" :border="false" value="接单时间" />
  50. <van-cell title="服务合同" :border="false" :value="supplyDemand.contractionName" />
  51. <van-cell title="服务作物" :border="false" :value="supplyDemand.cropType" />
  52. <van-cell title="下单时间" :border="false" :value="supplyDemand.orderAt" />
  53. <van-cell title="服务时间" :border="false" :value="supplyDemand.serviceAt" />
  54. <van-cell title="服务数量" :border="false" :value="supplyDemand.serviceNum" />
  55. <van-cell title="成交金额" :border="false" :value="supplyDemand.realityServiceMoney" />
  56. <van-cell title="备注" :border="false" :value="supplyDemand.serviceRemark" />
  57. </div>
  58. </div>
  59. <!-- 内容结束 -->
  60. <div class="footer">
  61. <p>温馨提示:请在服务完成后进行评分</p>
  62. <img src="../../../../static/images/agriculturalTrusteeship/buyer/buyer_icon_02.png" @click="$router.push({name:'agriculturalTrusteeshipEvaluate',query:{id:supplyDemand.id}})">
  63. </div>
  64. </div>
  65. </template>
  66. <script>
  67. import Cookies from "js-cookie";
  68. import {productTypes, supplyorderGet} from "@/api/agriculturalTrusteeship";
  69. export default {
  70. name: "agriculturalTrusteeshipIndex",
  71. data() {
  72. return {
  73. activeKey: 0,
  74. active: 0,
  75. loading: false,
  76. finished: false,
  77. show:true,
  78. activeNames:[],
  79. cropTypeOptions:[],
  80. orderStatusOptions:[],
  81. productList:[],
  82. supplyDemand:{}
  83. };
  84. },
  85. created() {
  86. let query = {
  87. parentId : null,
  88. tree:false
  89. }
  90. productTypes(query).then(response => {
  91. this.productList = response.data;
  92. });
  93. this.getDicts("crop_type").then(response => {
  94. this.cropTypeOptions = response.data;
  95. });
  96. this.getDicts("service_order_status").then(response => {
  97. this.orderStatusOptions = response.data;
  98. });
  99. this.getDetail();
  100. },
  101. methods: {
  102. getDetail(){
  103. supplyorderGet(this.$route.query.id).then(response => {
  104. response.data.cropType = this.selectDictLabel(this.cropTypeOptions, response.data.cropType);
  105. response.data.orderStatus = this.selectDictLabel(this.orderStatusOptions, response.data.orderStatus);
  106. var that = this ;
  107. setTimeout(function () {
  108. response.data.productType = that.productList.filter(function (e) { return e.id == response.data.productType; })[0].dictName;
  109. },1000)
  110. if (response.data.supplyDemand!=null){
  111. if (response.data.supplyDemand.supplyMasterMap){
  112. var attachement = response.data.supplyDemand.supplyMasterMap.split( "," );
  113. response.data.supplyDemand.supplyMasterMap = '/api' + attachement[0];
  114. }
  115. }
  116. this.supplyDemand = response.data;
  117. });
  118. },
  119. },
  120. }
  121. </script>
  122. <style scoped lang="scss">
  123. .home_wrapper{
  124. }
  125. /*头部*/
  126. .header{
  127. display: flex;
  128. align-items: center;
  129. justify-content: space-between;
  130. padding: 2vh 4% 0vh;
  131. }
  132. .search{
  133. display: flex;
  134. justify-content: space-between;
  135. align-items: center;
  136. border: 1px solid #6E93F3;
  137. padding: 1PX 1PX 1PX 12PX ;
  138. border-radius: 50PX;
  139. margin-right: 30PX;
  140. flex: 1;
  141. input{
  142. flex: 1;
  143. background: transparent;
  144. margin-left: 10PX;
  145. }
  146. }
  147. /*导航栏目*/
  148. .nav{
  149. width: 94%;
  150. margin: 0 auto;
  151. margin-top: 2vh;
  152. padding: 1.5vh 3%;
  153. background: #ffffff;
  154. border-radius: 10PX;
  155. box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
  156. .date{
  157. display: flex;
  158. justify-content: space-around;
  159. align-items: center;
  160. p{
  161. border-radius: 1rem;
  162. padding: 5PX 0PX 5PX 5%;
  163. width: 40%;
  164. text-align: center;
  165. color: #334281;
  166. box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
  167. background:#D6D9E6 url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_date.png") 20% center no-repeat;
  168. }
  169. }
  170. .billCount {
  171. display: flex;
  172. text-align: center;
  173. margin-top: 3vh;
  174. .billCount_left{
  175. width: 50%;
  176. color: #1B5DEA;
  177. p{
  178. &:nth-child(1){
  179. font-size: .45rem;
  180. }
  181. }
  182. }
  183. .billCount_right{
  184. width: 50%;
  185. color: #FF5E00;
  186. p{
  187. &:nth-child(1){
  188. font-size: .45rem;
  189. }
  190. }
  191. }
  192. }
  193. }
  194. /*内容*/
  195. .main{
  196. width: 94%;
  197. margin: 0 auto;
  198. padding-bottom: 15vh;
  199. .main_content_right_list{
  200. margin-top: 2vh;
  201. padding: 1.5vh 3%;
  202. background: #ffffff;
  203. border-radius: 10PX;
  204. /*box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);*/
  205. /deep/ .van-cell{
  206. padding: 0;
  207. margin-top: 10PX;
  208. }
  209. .main_content_right_list_header{
  210. display: flex;
  211. margin-bottom: 1vh;
  212. align-items: center;
  213. p{
  214. padding: 3PX 10PX;
  215. border-radius: 8PX;
  216. &:nth-child(2){background: #2B7EEC;color: #ffffff;margin-left: auto;}
  217. &:nth-child(3){background: #E2E9FD;color: #497CE8;margin-left: 10PX;}
  218. }
  219. .on{
  220. color: #334281;
  221. border-radius: initial;
  222. padding:0 0 0 20PX;
  223. font-size: 0.35rem;
  224. background: url("../../../../static/images/agriculturalTrusteeship/socialization/bill_icon_01.png") no-repeat left center
  225. }
  226. .off{
  227. color: #E60505;
  228. border-radius: initial;
  229. margin-left: auto;
  230. padding:0 0 0 15PX;
  231. background: url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_off.png") no-repeat left center
  232. }
  233. }
  234. .main_content_right_list_center{
  235. display: flex;
  236. img{
  237. border-radius: 15PX;
  238. margin-right: 4%;
  239. }
  240. .main_content_right_list_content{
  241. display: flex;
  242. flex-direction:column;
  243. justify-content: space-between;
  244. .tt{
  245. color: #333333;
  246. font-size: .35rem;
  247. }
  248. .tab{
  249. display: flex;
  250. justify-content: space-between;
  251. p{
  252. &:nth-child(1){
  253. flex: 1;
  254. color: #FF5E00;
  255. span{
  256. font-size: .4rem;
  257. }
  258. }
  259. &:nth-child(2){
  260. span{
  261. display: inline-block;
  262. text-align: center;
  263. padding: 2PX 5PX;
  264. &:nth-child(1){
  265. color: #497CE8;
  266. background: #E2E9FD;
  267. border-top-left-radius: 10PX;
  268. }
  269. &:nth-child(2){
  270. color: #ffffff;
  271. background-image: linear-gradient(to right , #5D87FA , #5FD5F5);
  272. border-bottom-right-radius: 10PX;
  273. }
  274. }
  275. }
  276. }
  277. }
  278. .name{
  279. color: #7A7A7A;
  280. span{
  281. &:nth-child(2){
  282. margin-left: 5PX;
  283. }
  284. }
  285. }
  286. }
  287. }
  288. }
  289. }
  290. /*弹出层*/
  291. .popup_header{
  292. display: flex;
  293. align-items: center;
  294. color: #334281;
  295. font-size: .38rem;
  296. margin-bottom: 15PX;
  297. img{
  298. margin-right: 10PX;
  299. display: block;
  300. }
  301. p{
  302. line-height: 1;
  303. }
  304. }
  305. .popup_content{
  306. .selected{
  307. .on{
  308. font-size: .35rem;
  309. padding: 10PX 20PX;
  310. color: #334281;
  311. background: url("../../../../static/images/agriculturalTrusteeship/socialization/down.png")left center no-repeat;
  312. }
  313. .off{
  314. font-size: .35rem;
  315. padding: 10PX 20PX;
  316. color: #334281;
  317. background: url("../../../../static/images/agriculturalTrusteeship/socialization/right.png")left center no-repeat;
  318. }
  319. .options{
  320. display: flex;
  321. justify-content: space-between;
  322. flex-wrap: wrap;
  323. p{
  324. background: #F5F5F5;
  325. color: #8F8F8F;
  326. width: 30%;
  327. padding: 5PX 0;
  328. border-radius: 5PX;
  329. text-align: center;
  330. &.active{
  331. background: #E2E9FD;
  332. color: #1B5DEA;
  333. }
  334. }
  335. }
  336. }
  337. }
  338. .popup_date{
  339. display: flex;
  340. justify-content: space-around;
  341. align-items: center;
  342. p{
  343. border-radius: 1rem;
  344. padding: 5PX 0PX 5PX 5%;
  345. width: 45%;
  346. text-align: center;
  347. color: #1B5DEA;
  348. background:#E2E9FD url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_date.png") 15% center no-repeat;
  349. }
  350. }
  351. .popup_btn{
  352. position: fixed;
  353. bottom: 5vh;
  354. display: flex;
  355. align-items: center;
  356. justify-content: space-between;
  357. width: 94%;
  358. left: 3%;
  359. p{
  360. width: 30%;
  361. padding: 7PX 0;
  362. border-radius: 5rem;
  363. text-align: center;
  364. font-size: .35rem;
  365. box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
  366. &:nth-child(1){
  367. background: #1B5DEA;
  368. color: #ffffff;
  369. }
  370. &:nth-child(2){
  371. border: 1PX solid #1B5DEA;
  372. color: #1B5DEA;
  373. }
  374. &:nth-child(3){
  375. background-image: linear-gradient(to right , #6E93F3 , #54C6E4);
  376. color: #ffffff;
  377. }
  378. }
  379. }
  380. .main_btn{
  381. display: flex;
  382. justify-content: space-around;
  383. padding: 4vh 0;
  384. p{
  385. font-size: .4rem;
  386. width: 35%;
  387. text-align: center;
  388. padding: 10PX 0;
  389. border-radius: 5rem;
  390. box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
  391. &:nth-child(1){
  392. background: #334281;
  393. color: #ffffff;
  394. }
  395. &:nth-child(2){
  396. background: #D1D5E4;
  397. color: #334281;
  398. }
  399. }
  400. }
  401. .footer{
  402. display: flex;
  403. justify-content: space-between;
  404. align-items: center;
  405. background: #ffffff;
  406. position: fixed;
  407. bottom: 0;
  408. padding: 1vh 4%;
  409. width: 100%;
  410. p{
  411. color: #989898;
  412. background: #F2F2F2;
  413. padding: 5PX 10PX;
  414. text-align: center;
  415. border-radius: 8PX;
  416. }
  417. }
  418. </style>