contract.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927
  1. <template>
  2. <view class="center">
  3. <view v-for="(item , index) in lists" :Key="index" class="region">
  4. <view>
  5. <view class="c-row ">
  6. <text class="tit" v-if="item.orderType == '采购'">{{item.orderType}}</text>
  7. <text class="tit2" v-if="item.orderType == '销售'">{{item.orderType}}</text>
  8. <view class="enterprise">
  9. 编号{{item.contractNo}}({{item.procurementPlanType}})
  10. </view>
  11. <!-- <text class="status status1" v-if="item.status == '已挂单'">{{item.status}}</text>
  12. <text class="status status2" v-if="item.status == '已成交'">{{item.status}}</text>
  13. <text class="status status3" v-if="item.status == '已完成'">{{item.status}}</text>
  14. <text class="status status1" v-if="item.status == '审核中'">{{item.status}}</text>
  15. <text class="status status1" v-if="item.status == '执行中'">{{item.status}}</text> -->
  16. <text class="status status1">{{item.status}}</text>
  17. </view>
  18. </view>
  19. <view>
  20. <view class="c-row ">
  21. <text class="tit1" v-if="item.orderType == '采购'">买方</text>
  22. <text class="tit1" v-if="item.orderType == '销售'">卖方</text>
  23. <view class="enterprise">
  24. {{item.contracter}}
  25. </view>
  26. </view>
  27. </view>
  28. <view class="forList flex">
  29. <view class="title">{{item.goodsName}}:<text>{{item.transactionsNumber}}</text></view>
  30. <view class="title">单价:¥<text>{{item.unitPrice}}</text></view>
  31. <view class="title">基差:¥<text>{{item.basis}}</text></view>
  32. </view>
  33. <view class="c-row flex annius">
  34. <text class="anniu" @click="commit(item)"> 附件</text>
  35. <text class="anniu" @click="someprice(item)"
  36. v-if="item.procurementPlanType == '期货' && (item.status == '已成交' || item.status == '已挂单')"> 点价</text>
  37. <text class="anniu1" @click="commit1(item)" v-if="item.orderType == '采购'"> 发货</text>
  38. <text class="anniu1" @click="commit2(item)" v-if="item.orderType == '销售'"> 收货</text>
  39. </view>
  40. </view>
  41. <view v-if='pricestatus' class='shade'>
  42. <view class='shade-content'>
  43. <view class="titles1">点价</view>
  44. <view class='shade-content-item flex'>
  45. <input v-model='price' placeholder="请输入点价价格" type="number" class="pointprice">
  46. <text style="font-size: 16px; color: #AFB3BF;margin-top: -3px;">元/吨</text>
  47. </view>
  48. <view class="flex">
  49. <view class="btns btn1" @click='pricestatus=false'>取消</view>
  50. <view class="btns btn2" @click='amendprice'>确定</view>
  51. </view>
  52. </view>
  53. </view>
  54. <view v-if='shadestatus' class='shade'>
  55. <view class='shade-content'>
  56. <view class='shade-content-item'>
  57. <view class="titles">请于以下时间段进行点价操作:</view>
  58. <view class="timeslot">11:30 ~ 12:30</view>
  59. <view class="timeslot">15:20 ~ 20:00</view>
  60. <view class="timeslot">23:00 ~ 08:00</view>
  61. </view>
  62. <view class="cancel" @click='shadestatus=false'>知道了</view>
  63. </view>
  64. </view>
  65. <view class="padding flex flex-direction">
  66. <!-- <button class="cu-btn commit margin-tb-sm lg" @click="commit">提交</button> -->
  67. </view>
  68. <!-- </block> -->
  69. </view>
  70. </template>
  71. <script>
  72. import uploadImage from '@/components/ossutil/uploadFile.js';
  73. import {
  74. mapState
  75. } from 'vuex';
  76. export default {
  77. name: "trust",
  78. data() {
  79. return {
  80. lists: [],
  81. shadestatus: false,
  82. pricestatus: false,
  83. goods: {
  84. pageSize: 10,
  85. currentPage: 1,
  86. // pcFlag : 0,
  87. },
  88. procurementPlanInfo: {
  89. pageSize: 10,
  90. currentPage: 1
  91. },
  92. price: "",
  93. tran: {
  94. total: 0,
  95. price: 0,
  96. startPlace: undefined,
  97. endPlace: undefined,
  98. goodsName: undefined,
  99. sender: '',
  100. senderPhone: '',
  101. status: 0,
  102. receiver: '',
  103. receiverPhone: '',
  104. verifyCode: '',
  105. driver: '',
  106. driverPhone: '',
  107. carNo: '',
  108. personNoImg: '',
  109. personNoImg1: '',
  110. driverNoImg: '',
  111. driverNoImg1: '',
  112. carNoImg: '',
  113. carNoImg1: ''
  114. },
  115. id: 0,
  116. PageCur: "trust",
  117. TabCur: 0,
  118. priceTypeIndex: -1,
  119. priceType: ['库内价', '到库价', '到港价'],
  120. unitPrice: 0,
  121. seller: '',
  122. sellerPhone: '',
  123. minSale: '',
  124. exsitCount: 0,
  125. origin: '',
  126. stock: '',
  127. goodsName: '',
  128. verifyCode: '',
  129. sendText0: '获取验证码',
  130. sendText1: '获取验证码',
  131. sendText2: '获取验证码',
  132. sendText3: '获取验证码',
  133. sendDisabled0: false,
  134. sendDisabled1: false,
  135. sendDisabled2: false,
  136. sendDisabled3: false,
  137. buyer: '',
  138. buyerPhone: '',
  139. level: '',
  140. sender: '',
  141. senderPhone: '',
  142. receiver: '',
  143. receiverPhone: '',
  144. total: 0,
  145. startPlace: '',
  146. endPlace: '',
  147. driver: '',
  148. driverPhone: '',
  149. carNo: '',
  150. personNoImg: '',
  151. personNoImg1: '',
  152. driverNoImg: '',
  153. driverNoImg1: '',
  154. carNoImg: '',
  155. carNoImg1: '',
  156. showTran: true
  157. };
  158. },
  159. computed: {
  160. ...mapState(['hasLogin', 'userInfo'])
  161. },
  162. // onShow() {
  163. // this.loadData()
  164. // },
  165. onLoad() {
  166. this.getList()
  167. },
  168. methods: {
  169. amendprice() {
  170. this.$api.doRequest('post', '/purchaseOrder/api/pointPrice', {
  171. id: this.id,
  172. unitPrice: Number(this.price)
  173. }).then(res => {
  174. if (res.data.code == 200) {
  175. this.pricestatus = false
  176. } else {
  177. uni.showToast({
  178. title: res.data.message,
  179. icon: 'none',
  180. duration: 2000
  181. })
  182. }
  183. })
  184. .catch(res => {
  185. uni.showToast({
  186. title: res.errmsg,
  187. icon: 'none',
  188. duration: 2000
  189. })
  190. });
  191. },
  192. someprice(item) {
  193. var time = new Date().getTime()
  194. var time1 = new Date(new Date(new Date().toLocaleDateString()).getTime() - (1 * 60 * 60 * 1000))
  195. var time2 = new Date()
  196. time2.setHours(8);
  197. time2.setMinutes(0);
  198. time2.setSeconds(0);
  199. var time3 = new Date()
  200. time3.setHours(11);
  201. time3.setMinutes(30);
  202. time3.setSeconds(0);
  203. var time4 = new Date()
  204. time4.setHours(12);
  205. time4.setMinutes(30);
  206. time4.setSeconds(0);
  207. var time5 = new Date()
  208. time5.setHours(15);
  209. time5.setMinutes(30);
  210. time5.setSeconds(0);
  211. var time6 = new Date()
  212. time6.setHours(20);
  213. time6.setMinutes(0);
  214. time6.setSeconds(0);
  215. if (time < time2.getTime() && time > time1 || time < time4.getTime() && time > time3.getTime() || time <
  216. time6.getTime() && time > time5.getTime()) {
  217. this.id = item.id
  218. this.pricestatus = true
  219. } else {
  220. this.shadestatus = true
  221. }
  222. },
  223. commit(item) {
  224. uni.navigateTo({
  225. url: `/pageB/contract/enclosures?id=${item.id}`
  226. })
  227. },
  228. commit1(item) {
  229. uni.navigateTo({
  230. url: `/pageB/contract/look?id=${item.id}&contractNo=${item.contractNo}&contracter=${item.contracter}&goodsName=${item.goodsName}`
  231. })
  232. },
  233. commit2(item) {
  234. uni.navigateTo({
  235. url: `/pageB/contract/collectLook?id=${item.id}&contractNo=${item.contractNo}&customer=${item.customer}&goodsName=${item.goodsName}&contracter=${item.contracter}`
  236. })
  237. },
  238. getList() {
  239. this.goods.commonId = this.userInfo.id
  240. // this.goods.pcFlag = 0
  241. this.$api.doRequest('get', '/purchaseOrder/selectPurchaseOrderApp', this.goods).then(res => {
  242. if (res.data.code == 200) {
  243. this.lists = res.data.data.records
  244. } else {
  245. uni.showToast({
  246. title: res.data.message,
  247. icon: 'none',
  248. duration: 2000
  249. })
  250. }
  251. })
  252. .catch(res => {
  253. uni.showToast({
  254. title: res.errmsg,
  255. icon: 'none',
  256. duration: 2000
  257. })
  258. });
  259. },
  260. ChooseImageCar() {
  261. uni.chooseImage({
  262. count: 1, //默认9
  263. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  264. sourceType: ['album', 'camera'], //从相册选择
  265. success: (res) => {
  266. //上传图片
  267. //图片路径可自行修改
  268. uploadImage(res.tempFilePaths[0], 'carNoImg/',
  269. result => {
  270. if (this.carNoImg.length != 0) {
  271. this.carNoImg1 = result
  272. } else {
  273. this.carNoImg = result
  274. }
  275. uni.hideLoading();
  276. }
  277. )
  278. }
  279. });
  280. },
  281. ViewImage(e) {
  282. var img = [];
  283. img = e.currentTarget.dataset.url.split(' ')
  284. uni.previewImage({
  285. current: 0,
  286. urls: img
  287. });
  288. },
  289. // DelImg(e) {
  290. // uni.showModal({
  291. // title: '提示',
  292. // content: '确定要删除该照片吗?',
  293. // cancelText: '取消',
  294. // confirmText: '确定',
  295. // success: res => {
  296. // if (res.confirm) {
  297. // if (e.currentTarget.dataset.index == 0) {
  298. // this.personNoImg = "";
  299. // } else if (e.currentTarget.dataset.index == 1) {
  300. // this.personNoImg1 = "";
  301. // } else if (e.currentTarget.dataset.index == 2) {
  302. // this.driverNoImg = "";
  303. // } else if (e.currentTarget.dataset.index == 3) {
  304. // this.driverNoImg1 = "";
  305. // } else if (e.currentTarget.dataset.index == 4) {
  306. // this.carNoImg = "";
  307. // } else if (e.currentTarget.dataset.index == 5) {
  308. // this.carNoImg1 = "";
  309. // }
  310. // }
  311. // }
  312. // })
  313. // },
  314. commit11() {
  315. if (this.hasLogin) {
  316. uni.showModal({
  317. title: '登录提示',
  318. content: '您尚未登录,是否立即登录?',
  319. showCancel: true,
  320. confirmText: '登录',
  321. success: (e) => {
  322. if (e.confirm) {
  323. uni.navigateTo({
  324. url: '/pagesB/contract/look'
  325. })
  326. }
  327. },
  328. fail: () => {},
  329. complete: () => {}
  330. })
  331. } else {
  332. const that = this
  333. if (this.TabCur == 0) {
  334. // if (!that.seller) {
  335. // this.$api.msg('请填写卖方');
  336. // return;
  337. // }
  338. // if (!that.sellerPhone) {
  339. // this.$api.msg('请填写手机号码');
  340. // return;
  341. // }
  342. // if (!that.exsitCount) {
  343. // this.$api.msg('请填写库存量');
  344. // return;
  345. // }
  346. // if (!that.minSale) {
  347. // this.$api.msg('请填写最小成交量');
  348. // return;
  349. // }
  350. // if (!that.goodsName) {
  351. // this.$api.msg('请填写货名');
  352. // return;
  353. // }
  354. // if (!that.verifyCode) {
  355. // this.$api.msg('请填写验证码');
  356. // return;
  357. // }
  358. // if (!that.price) {
  359. // that.$api.msg('请选择价格类型')
  360. // return
  361. // }
  362. // if (!that.unitPrice) {
  363. // that.$api.msg('请填写协议价格(元/吨)');
  364. // return
  365. // }
  366. // if (!that.origin) {
  367. // this.$api.msg('请填写产地');
  368. // return;
  369. // }
  370. // if (!that.stock) {
  371. // this.$api.msg('请填写库存地');
  372. // return;
  373. // }
  374. // if (!that.level) {
  375. // this.$api.msg('请填写国标等级');
  376. // return;
  377. // }
  378. // that.saleInfo.seller = that.seller
  379. // that.saleInfo.sellerPhone = that.sellerPhone
  380. // that.saleInfo.priceType = that.price
  381. // that.saleInfo.unitPrice = that.unitPrice
  382. // that.saleInfo.minSale = that.minSale
  383. // that.saleInfo.exsitCount = that.exsitCount
  384. // that.saleInfo.origin = that.origin
  385. // that.saleInfo.stock = that.stock
  386. // that.saleInfo.verifyCode = that.verifyCode
  387. // that.saleInfo.goodsName = that.goodsName
  388. // that.saleInfo.buyer = that.buyer
  389. // that.saleInfo.buyerPhone = that.buyerPhone
  390. // that.saleInfo.level = that.level
  391. } else if (this.TabCur == 1) {
  392. if (!that.buyer) {
  393. this.$api.msg('请填写买方');
  394. return;
  395. }
  396. if (!that.buyerPhone) {
  397. this.$api.msg('请填写手机号码');
  398. return;
  399. }
  400. if (!that.goodsName) {
  401. this.$api.msg('请填写货名');
  402. return;
  403. }
  404. if (!that.verifyCode) {
  405. this.$api.msg('请填写验证码');
  406. return;
  407. }
  408. if (!that.price) {
  409. that.$api.msg('请选择价格类型')
  410. return
  411. }
  412. if (!that.unitPrice) {
  413. that.$api.msg('请填写协议价格(元/吨)');
  414. return
  415. }
  416. if (!that.origin) {
  417. this.$api.msg('请填写产地');
  418. return;
  419. }
  420. if (!that.stock) {
  421. this.$api.msg('请填写库存地');
  422. return;
  423. }
  424. if (!that.level) {
  425. this.$api.msg('请填写国标等级');
  426. return;
  427. }
  428. that.saleInfo.seller = that.seller
  429. that.saleInfo.sellerPhone = that.sellerPhone
  430. that.saleInfo.priceType = that.price
  431. that.saleInfo.unitPrice = that.unitPrice
  432. that.saleInfo.minSale = that.minSale
  433. that.saleInfo.exsitCount = that.exsitCount
  434. that.saleInfo.origin = that.origin
  435. that.saleInfo.stock = that.stock
  436. that.saleInfo.verifyCode = that.verifyCode
  437. that.saleInfo.goodsName = that.goodsName
  438. that.saleInfo.buyer = that.buyer
  439. that.saleInfo.buyerPhone = that.buyerPhone
  440. that.saleInfo.level = that.level
  441. } else if (this.TabCur == 2) {
  442. if (!that.sender) {
  443. this.$api.msg('请填写发货方');
  444. return;
  445. }
  446. if (!that.senderPhone) {
  447. this.$api.msg('请填写发货方手机号码');
  448. return;
  449. }
  450. if (!that.receiver) {
  451. this.$api.msg('请填写收货方');
  452. return;
  453. }
  454. if (!that.receiverPhone) {
  455. this.$api.msg('请填写收货方手机号码');
  456. return;
  457. }
  458. if (!that.goodsName) {
  459. this.$api.msg('请填写货名');
  460. return;
  461. }
  462. if (!that.verifyCode) {
  463. this.$api.msg('请填写验证码');
  464. return;
  465. }
  466. that.tran.sender = that.sender
  467. that.tran.senderPhone = that.senderPhone
  468. that.tran.receiver = that.receiver
  469. that.tran.receiverPhone = that.receiverPhone
  470. that.tran.verifyCode = that.verifyCode
  471. that.tran.goodsName = that.goodsName
  472. that.tran.total = that.total
  473. that.tran.price = that.price
  474. that.tran.startPlace = that.startPlace
  475. that.tran.endPlace = that.endPlace
  476. } else if (this.TabCur == 3) {
  477. if (!that.startPlace) {
  478. this.$api.msg('请填写起始地');
  479. return;
  480. }
  481. if (!that.endPlace) {
  482. this.$api.msg('请填写目的地');
  483. return;
  484. }
  485. if (!that.driver) {
  486. this.$api.msg('请填写承运人');
  487. return;
  488. }
  489. if (!that.driverPhone) {
  490. this.$api.msg('请填写承运人手机号码');
  491. return;
  492. }
  493. if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(that.driverPhone)) {
  494. that.$api.msg('请输入正确的承运人手机号码');
  495. return
  496. }
  497. if (!that.carNo) {
  498. this.$api.msg('请填写车牌号');
  499. return;
  500. }
  501. if (!that.verifyCode) {
  502. this.$api.msg('请填写验证码');
  503. return;
  504. }
  505. if (!that.personNoImg || !that.personNoImg1) {
  506. that.$api.msg('请上传身份证正、反面照片');
  507. return
  508. }
  509. if (!that.driverNoImg || !that.driverNoImg1) {
  510. that.$api.msg('请上传驾驶证主、副页照片');
  511. return
  512. }
  513. if (!that.carNoImg || !that.carNoImg1) {
  514. that.$api.msg('请上传行车证主、副页照片');
  515. return
  516. }
  517. that.tran.driver = that.driver
  518. that.tran.driverPhone = that.driverPhone
  519. that.tran.verifyCode = that.verifyCode
  520. that.tran.price = that.price
  521. that.tran.startPlace = that.startPlace
  522. that.tran.endPlace = that.endPlace
  523. that.tran.carNo = that.carNo
  524. that.tran.personNoImg = that.personNoImg
  525. that.tran.personNoImg1 = that.personNoImg1
  526. that.tran.driverNoImg = that.driverNoImg
  527. that.tran.driverNoImg1 = that.driverNoImg1
  528. that.tran.carNoImg = that.carNoImg
  529. that.tran.carNoImg1 = that.carNoImg1
  530. }
  531. // 获取用户的当前设置,判断是否点击了“总是保持以上,不在询问”
  532. wx.getSetting({
  533. // withSubscriptions: true,//是否获取用户订阅消息的订阅状态,默认false不返回
  534. success(res) {
  535. if (res.authSetting['scope.subscribeMessage']) {
  536. uni.openSetting({ // 打开设置页
  537. success(res) {
  538. console.log(res.authSetting)
  539. }
  540. });
  541. } else { // 用户没有点击“总是保持以上,不再询问”则每次都会调起订阅消息
  542. uni.requestSubscribeMessage({
  543. tmplIds: ['8cVkckXi_8zfHeScXRHhjN6cgZFYYCWIMPDTiPWagXY'], //
  544. success(res) {
  545. if (res['8cVkckXi_8zfHeScXRHhjN6cgZFYYCWIMPDTiPWagXY'] ==
  546. "accept") { // 字段就是tmplIds模板id
  547. uni.showLoading({
  548. title: '正在提交',
  549. mask: true
  550. })
  551. if (that.TabCur == 0) {
  552. that.$api.request('sale', 'addSale', that.saleInfo,
  553. failres => {
  554. uni.hideLoading()
  555. that.$api.msg(failres.errmsg);
  556. }).then(res => {
  557. uni.hideLoading()
  558. uni.showModal({
  559. title: '提示',
  560. content: "发布提交成功,工作人员会尽快联系该号码:" +
  561. that.sellerPhone,
  562. showCancel: false,
  563. confirmText: '确定',
  564. success: () => {
  565. uni.navigateBack()
  566. }
  567. })
  568. // that.$api.prePage().refreshList(data, that.manageType);
  569. })
  570. } else if (that.TabCur == 1) {
  571. that.$api.request('sale', 'addBuy', that.saleInfo,
  572. failres => {
  573. uni.hideLoading()
  574. that.$api.msg(failres.errmsg);
  575. }).then(res => {
  576. uni.hideLoading()
  577. uni.showModal({
  578. title: '提示',
  579. showCancel: false,
  580. content: "发布提交成功,工作人员会尽快联系该号码:" +
  581. that.buyerPhone,
  582. confirmText: '确定',
  583. success: () => {
  584. uni.navigateBack()
  585. }
  586. })
  587. // that.$api.prePage().refreshList(data, that.manageType);
  588. })
  589. } else if (that.TabCur == 2) {
  590. that.$api.request('tran', 'addTran', that.tran,
  591. failres => {
  592. uni.hideLoading()
  593. that.$api.msg(failres.errmsg);
  594. }).then(res => {
  595. uni.hideLoading()
  596. uni.showModal({
  597. title: '提示',
  598. showCancel: false,
  599. content: "发布提交成功,工作人员会尽快联系该号码:" +
  600. that.senderPhone,
  601. confirmText: '确定',
  602. success: () => {
  603. uni.navigateBack()
  604. }
  605. })
  606. // that.$api.prePage().refreshList(data, that.manageType);
  607. })
  608. } else if (that.TabCur == 3) {
  609. that.$api.request('tran', 'addCarDriver', that.tran,
  610. failres => {
  611. uni.hideLoading()
  612. that.$api.msg(failres.errmsg);
  613. }).then(res => {
  614. uni.hideLoading()
  615. uni.showModal({
  616. title: '提示',
  617. showCancel: false,
  618. content: "发布提交成功,工作人员会尽快联系该号码:" +
  619. that.driverPhone,
  620. confirmText: '确定',
  621. success: () => {
  622. uni.navigateBack()
  623. }
  624. })
  625. // that.$api.prePage().refreshList(data, that.manageType);
  626. })
  627. }
  628. }
  629. }
  630. })
  631. }
  632. }
  633. })
  634. }
  635. }
  636. },
  637. }
  638. </script>
  639. <style scoped>
  640. .center {
  641. padding: 10px 20px;
  642. background-color: #F5F6FA;
  643. }
  644. .region {
  645. background-color: #FFFFFF;
  646. border-radius: 20px;
  647. margin-top: 10px;
  648. }
  649. .zan-dialog__mask {
  650. position: fixed;
  651. top: 0;
  652. left: 0;
  653. right: 0;
  654. bottom: 0;
  655. z-index: 10;
  656. background: rgba(0, 0, 0, 0);
  657. /*设置阴影半透明背景如: background: rgba(0, 0, 0, 0.4);*/
  658. display: none;
  659. }
  660. .zan-dialog__container {
  661. position: fixed;
  662. bottom: 400rpx;
  663. width: 650rpx;
  664. /*弹窗布局宽*/
  665. height: 350rpx;
  666. /*弹窗布局高,与下面弹出距离transform有关*/
  667. margin-left: 50rpx;
  668. background: #f8f8f8;
  669. transform: translateY(300%);
  670. /*弹框弹出距离,与弹框布局高度有关,如300%表示弹起距离为3倍弹窗高度 */
  671. transition: all 0.4s ease;
  672. z-index: 12;
  673. border-radius: 20rpx;
  674. box-shadow: 0px 3px 3px 2px gainsboro;
  675. /*弹框的悬浮阴影效果,如不需要可注释该行*/
  676. }
  677. .zan-dialog--show .zan-dialog__container {
  678. transform: translateY(0);
  679. }
  680. .zan-dialog--show .zan-dialog__mask {
  681. display: block;
  682. }
  683. .container {
  684. padding-bottom: 160rpx;
  685. }
  686. .cu-form-group input {
  687. text-align: right;
  688. }
  689. .text-white text {
  690. background: linear-gradient(45deg, #3DC146, #B2D612);
  691. padding: 5px 10px;
  692. border-radius: 38rpx;
  693. }
  694. .cu-form-group textarea {
  695. text-align: right;
  696. }
  697. .commit {
  698. background: linear-gradient(45deg, #DF331C, #DA611A);
  699. color: #fff;
  700. }
  701. .shade {
  702. position: fixed;
  703. top: 0;
  704. left: 0;
  705. width: 100%;
  706. background: rgba(0, 0, 0, 0.5);
  707. height: 100%;
  708. z-index: 999999;
  709. }
  710. .shade-content {
  711. background: #fff;
  712. position: absolute;
  713. top: 50%;
  714. left: 50%;
  715. border-radius: 20px;
  716. transform: translateX(-50%) translateY(-50%);
  717. z-index: 999999;
  718. text-align: center;
  719. }
  720. .shade-content-item {
  721. width: 277px;
  722. text-align: center;
  723. height: 121px;
  724. padding: 35px 10px;
  725. }
  726. .c-row {
  727. display: -webkit-box;
  728. display: -webkit-flex;
  729. display: flex;
  730. -webkit-box-align: center;
  731. -webkit-align-items: center;
  732. align-items: center;
  733. padding: 20rpx 30rpx;
  734. position: relative;
  735. }
  736. .con-list {
  737. -webkit-box-flex: 1;
  738. -webkit-flex: 1;
  739. flex: 1;
  740. display: -webkit-box;
  741. display: -webkit-flex;
  742. display: flex;
  743. -webkit-box-orient: vertical;
  744. -webkit-box-direction: normal;
  745. -webkit-flex-direction: column;
  746. flex-direction: column;
  747. color: #303133;
  748. line-height: 40rpx;
  749. text-align: right;
  750. padding-right: 20rpx;
  751. font-size: 14px;
  752. }
  753. .forList {
  754. width: 90%;
  755. height: 30px;
  756. margin: 0 auto;
  757. background-color: #F9F9FA;
  758. border-radius: 10px;
  759. }
  760. .forList .title {
  761. line-height: 30px;
  762. margin-left: 25px;
  763. color: #9698A2;
  764. }
  765. .tit {
  766. width: 34px;
  767. height: 24px;
  768. background-color: #E9F8F0;
  769. color: #22C572;
  770. padding: 2px 3px;
  771. border-radius: 5px;
  772. }
  773. .tit1 {
  774. width: 34px;
  775. height: 24px;
  776. background-color: #FEECE6;
  777. color: #FE6430;
  778. padding: 2px 3px;
  779. border-radius: 5px;
  780. }
  781. .tit2 {
  782. width: 34px;
  783. height: 24px;
  784. background-color: #EBEEFA;
  785. color: #5C76DF;
  786. padding: 2px 3px;
  787. border-radius: 5px;
  788. }
  789. .enterprise {
  790. font-size: 16px;
  791. font-weight: 600;
  792. margin-left: 20px;
  793. }
  794. .annius {
  795. width: 70%;
  796. margin-left: 110px;
  797. justify-content: flex-end;
  798. }
  799. .anniu {
  800. width: 50px;
  801. font-size: 16px;
  802. border: 1px solid #CDCDCD;
  803. border-radius: 12px;
  804. position: relative;
  805. margin-right: 10px;
  806. text-align: center;
  807. line-height: 30px;
  808. }
  809. .anniu1 {
  810. width: 50px;
  811. font-size: 16px;
  812. border: 1px solid #22C572;
  813. border-radius: 15px;
  814. color: #22C572;
  815. position: relative;
  816. margin-right: 10px;
  817. text-align: center;
  818. line-height: 30px;
  819. }
  820. .titles {
  821. color: #333333;
  822. font-size: 16px;
  823. font-weight: 600;
  824. margin-top: -16px;
  825. margin-bottom: 10px;
  826. }
  827. .timeslot {
  828. font-size: 14px;
  829. color: #333333;
  830. height: 20px;
  831. }
  832. .cancel {
  833. text-align: center;
  834. width: 100%;
  835. color: #22C572;
  836. border-top: 1px solid #EEEEEE;
  837. margin-bottom: 6px;
  838. font-size: 18px;
  839. line-height: 40px;
  840. display: inline-block;
  841. }
  842. .pointprice {
  843. border-bottom: 1px solid #EEEEEE;
  844. text-align: left;
  845. padding-left: 10px;
  846. width: 70%;
  847. margin: 0 auto;
  848. }
  849. .titles1 {
  850. color: #333333;
  851. font-size: 16px;
  852. font-weight: 600;
  853. margin-top: 10px;
  854. }
  855. .btns {
  856. width: 50%;
  857. line-height: 50px;
  858. font-size: 18px;
  859. border-top: 1px solid #EEEEEE;
  860. margin-top: -20px;
  861. }
  862. .btn1 {
  863. color: #AFB3BF;
  864. border-right: 1px solid #EEEEEE;
  865. }
  866. .btn2 {
  867. color: #22C572;
  868. }
  869. .status {
  870. right: 20px;
  871. position: absolute;
  872. }
  873. .status1 {
  874. color: #FE6430;
  875. }
  876. .status2 {
  877. color: #22C572;
  878. }
  879. .status3 {
  880. color: #AFB3BF;
  881. }
  882. </style>