zngs.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011
  1. <template>
  2. <view class="content">
  3. <view class="jg"></view>
  4. <!-- #ifdef MP-WEIXIN -->
  5. <view class="" style="position: absolute;backgroun: black;"
  6. :style="{'height':info.height+ 'px','top':info.top+ 'px'}">
  7. <view class="tit" :style="{'height': info.height + 'px'}">
  8. <view class="black" @click="goBlack">
  9. <image src="../../static/icon/fanhui.png" mode=""></image>
  10. </view>
  11. <view class="title">
  12. 智能估算
  13. </view>
  14. <view class="black"></view>
  15. </view>
  16. </view>
  17. <view class="gs-top">
  18. <view class="bw" :style="{'height': (info.height + info.top) + 'px'}"></view>
  19. <view class="flex info">
  20. <view class="">
  21. 基本信息
  22. </view>
  23. <view class="">
  24. 零件厚度
  25. </view>
  26. <view class="">
  27. 价格预估
  28. </view>
  29. </view>
  30. <image :src="`../../static/img/js0${tabcurrent}.png`" mode=""></image>
  31. </view>
  32. <!-- #endif -->
  33. <scroll-view scroll-y="true" :style="{'height': height}" class="scroll-wrap">
  34. <template v-if="tabcurrent == 0">
  35. <view class="list-item flex">
  36. <view class="item-name">
  37. 长(米)
  38. </view>
  39. <input type="digit" placeholder="请填写长度(米)" class="item-val" v-model="chang">
  40. </view>
  41. <view class="list-item flex">
  42. <view class="item-name">
  43. 宽(米)
  44. </view>
  45. <input type="digit" placeholder="请填写宽度(米)" class="item-val" v-model="kuan">
  46. </view>
  47. <view class="list-item flex">
  48. <view class="item-name">
  49. 高(米)
  50. </view>
  51. <picker @change="bindGaodu" :range="gaoduList">
  52. <input type="text" placeholder="请选择" class="item-val" v-model="gao" disabled>
  53. </picker>
  54. </view>
  55. <view class="list-item flex">
  56. <view class="item-name">
  57. 是否保温
  58. </view>
  59. <picker @change="bindBaowen" :range="son">
  60. <input type="text" placeholder="请选择" class="item-val" v-model="isBaowen" disabled>
  61. </picker>
  62. </view>
  63. <view class="list-item flex" v-if="isBaowen == '是'">
  64. <view class="item-name">
  65. 保温材料
  66. </view>
  67. <picker @change="bindBaowenCl" :range="warmList" range-key="name">
  68. <input type="text" placeholder="请选择" class="item-val" v-model="baowenCl" disabled>
  69. </picker>
  70. </view>
  71. <view class="list-item flex">
  72. <view class="item-name">
  73. 是否需要钢槽
  74. </view>
  75. <picker @change="bindGangc" :range="son">
  76. <input type="text" placeholder="请选择" class="item-val" v-model="isGangC" disabled>
  77. </picker>
  78. </view>
  79. <view class="list-item flex" v-if="isGangC == '是'">
  80. <view class="item-name">
  81. 钢槽材料
  82. </view>
  83. <picker @change="bindGangcCl" :range="channelList" range-key="name">
  84. <input type="text" placeholder="请选择" class="item-val" v-model="gangcCl" disabled>
  85. </picker>
  86. </view>
  87. <view class="list-item flex">
  88. <view class="item-name">
  89. 是否需要人梯
  90. </view>
  91. <picker @change="bindRent" :range="son">
  92. <input type="text" placeholder="请选择" class="item-val" v-model="isRent" disabled>
  93. </picker>
  94. </view>
  95. <!-- <view class="list-item flex">
  96. <view class="item-name">
  97. 是否需要隔板
  98. </view>
  99. <picker @change="bindValue" :range="geban" range-key="name" ref="geban">
  100. <input type="text" placeholder="请选择" class="item-val" v-model="gebanname" disabled>
  101. </picker>
  102. </view> -->
  103. <view class="xyb" @click="tot">
  104. 下一步
  105. </view>
  106. </template>
  107. <template v-if="tabcurrent == 1">
  108. <view class="list-item flex">
  109. <view class="item-name">
  110. 顶板厚度
  111. </view>
  112. <picker @change="bindFoof" :range="roofList" range-key="name">
  113. <input type="text" placeholder="请选择" class="item-val" v-model="roof" disabled>
  114. </picker>
  115. </view>
  116. <view class="list-item flex">
  117. <view class="item-name">
  118. 底板厚度
  119. </view>
  120. <picker @change="bindFloor" :range="floorList" range-key="name">
  121. <input type="text" placeholder="请选择" class="item-val" v-model="floor" disabled>
  122. </picker>
  123. </view>
  124. <view class="list-item flex" v-for="(item,index) in (Math.ceil(gao))" :key="'sideplate'+index">
  125. <view class="item-name">
  126. 侧板厚度{{index + 1}}
  127. </view>
  128. <picker @change="bindValue" :range="sideplateList" range-key="name" :id="`sideplate${index}`">
  129. <view class="item-val" :class="{'noact': showValue(index,'sideplate') == '请选择'}">
  130. {{showValue(index,'sideplate')}}
  131. </view>
  132. </picker>
  133. </view>
  134. <view class="list-item flex">
  135. <view class="item-name">
  136. 立柱厚度
  137. </view>
  138. <picker @change="bindColumn" :range="columnList" range-key="name">
  139. <input type="text" placeholder="请选择" class="item-val" v-model="column" disabled>
  140. </picker>
  141. </view>
  142. <view class="list-item flex" v-for="(item,index) in (Math.ceil(gao)-1)" :key="'lacing' + index">
  143. <view class="item-name">
  144. 主拉厚度{{index + 1}}
  145. </view>
  146. <picker @change="bindValue" :range="lacingList" range-key="name" :id="`lacing${index}`">
  147. <view class="item-val" :class="{'noact': showValue(index,'lacing') == '请选择'}">
  148. {{showValue(index,'lacing')}}
  149. </view>
  150. </picker>
  151. </view>
  152. <view class="list-item flex" v-for="(item,index) in (Math.ceil(gao)-1)" :key="'fula' + index">
  153. <view class="item-name">
  154. 辅拉厚度{{index + 1}}
  155. </view>
  156. <picker @change="bindValue" :range="fulaList" range-key="name" :id="`fula${index}`">
  157. <view class="item-val" :class="{'noact': showValue(index,'fula') == '请选择'}">
  158. {{showValue(index,'fula')}}
  159. </view>
  160. </picker>
  161. </view>
  162. <view class="btn-wrap flex">
  163. <view class="xyb syb" @click="too">
  164. 上一步
  165. </view>
  166. <view class="xyb ksjs" @click="toth">
  167. 开始计算
  168. </view>
  169. </view>
  170. </template>
  171. <template v-if="tabcurrent == 2">
  172. <view class="flex jg-jz">
  173. <view class="">
  174. 规格
  175. </view>
  176. <view class="zj">
  177. {{chang}}m*{{kuan}}m*{{gao}}m={{chang*kuan*gao}}吨冷水箱, {{2*(chang*kuan + chang*gao + kuan*gao)}}平方
  178. </view>
  179. </view>
  180. <view class="new-bg">
  181. <view class="bg-line flex">
  182. <view class="title">
  183. 名称
  184. </view>
  185. <view class="name">
  186. 材质/厚度
  187. </view>
  188. <view class="specifications">
  189. 规格
  190. </view>
  191. <view class="number">
  192. 数量
  193. </view>
  194. <view class="unit_price">
  195. 单价
  196. </view>
  197. <view class="ot-price">
  198. 总价格
  199. </view>
  200. </view>
  201. <view class="bg-line flex" v-for="item in jsjg.table">
  202. <view class="title clamp2">
  203. {{item.title}}
  204. </view>
  205. <view class="name">
  206. {{item.name}}
  207. </view>
  208. <view class="specifications">
  209. {{item.specifications}}
  210. </view>
  211. <view class="number">
  212. {{item.number}}
  213. </view>
  214. <view class="unit_price">
  215. {{item.unit_price*1}}
  216. </view>
  217. <view class="ot-price">
  218. {{item.ot_price*1}}
  219. </view>
  220. </view>
  221. </view>
  222. <view class="flex jg-jz">
  223. <view class="">
  224. 总重量:{{(jsjg.zzl*1).toFixed(2)}}kg
  225. </view>
  226. <view class="zj">
  227. 含税总价:{{jsjg.zj*1}}元
  228. </view>
  229. </view>
  230. <!-- <view class="jg-wrap">
  231. <view class="jsjg-wrap flex" v-for="jitem in jsjg.table">
  232. <view class="jg-left">
  233. <view class="left-top">
  234. <text
  235. class="item-tit">{{jitem.title}}</text><text>单价:{{jitem.unit_price}}数量:{{jitem.number}}</text>
  236. </view>
  237. <view class="left-btm">
  238. 规格:{{jitem.specifications}} {{jitem.name}}
  239. </view>
  240. </view>
  241. <view class="jg-right">
  242. ¥{{jitem.ot_price}}元
  243. </view>
  244. </view>
  245. <view class="flex jg-zj">
  246. <view class="">
  247. 总计(元):
  248. </view>
  249. <view class="price">
  250. {{jsjg.zj}}
  251. </view>
  252. </view>
  253. <view class="jg-tip">
  254. *此结果为预估价格 详细请联系我们
  255. </view>
  256. </view> -->
  257. <view class="btn-wrap flex">
  258. <view class="xyb syb" @click="endjs">
  259. 结束计算
  260. </view>
  261. <button open-type="contact" plain="true" class="xyb ksjs" style="color: #fff;border: none;">
  262. 联系我们
  263. </button>
  264. <!-- <view class="xyb ksjs" @click="openKf">
  265. </view> -->
  266. </view>
  267. </template>
  268. </scroll-view>
  269. <!-- 客服 start -->
  270. <uni-popup ref="popupkf" type="center">
  271. <view class="popup-box">
  272. <view class="img">
  273. <image src="../../static/img/img009.png" mode=""></image>
  274. </view>
  275. <view class="mian">
  276. <view class="delivery">
  277. <view class="title">已经为您定制专属客服</view>
  278. <image src="../../static/img/img010.png" mode=""></image>
  279. </view>
  280. <view class="nocancel">客服VX:{{ text }}</view>
  281. <view class="comfirm-box">
  282. <view class="cancel" @click="cancel">取消</view>
  283. <view class="comfirm" @click="comfirm(text)">复制微信</view>
  284. </view>
  285. </view>
  286. </view>
  287. </uni-popup>
  288. <!-- 客服 end -->
  289. </view>
  290. </template>
  291. <script>
  292. let info = ''
  293. import {
  294. getZyList,
  295. calculation,
  296. getDefault
  297. } from '@/api/index.js'
  298. // #ifdef MP-WEIXIN
  299. info = wx.getMenuButtonBoundingClientRect()
  300. // #endif
  301. export default {
  302. data() {
  303. return {
  304. gaoduList: [1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5],
  305. son: ['是', '否'],
  306. isBaowen: '否', //是否保温
  307. warmList: [], //保温材料
  308. baowenCl: '', //选择的保温材料
  309. baowenClId: '', //保温材料id
  310. isGangC: '否', //是否钢槽
  311. channelList: [], //钢槽材料
  312. gangcCl: '', //选择的钢槽材料
  313. gangcClId: '', //钢槽材料id
  314. isRent: '否', //是否人梯
  315. roofList: [], //顶板厚度
  316. roof: '', ///选择的顶板厚度
  317. roofId: '', //顶板厚度idfloor
  318. floorList: [], //底板厚度
  319. floor: '', ///选择的底板厚度
  320. floorId: '', //底板厚度id
  321. sideplateList: [], //侧板厚度
  322. sideplate: [], //选择的侧板
  323. columnList: [], //立柱厚度
  324. column: '', //选择的立柱厚度
  325. columnId: '', //立柱厚度id
  326. lacingList: [], //主拉厚度
  327. lacing: [], //选择的主拉
  328. fulaList: [], //辅拉厚度
  329. fula: [], //选择的辅拉厚度
  330. tabcurrent: 0,
  331. height: '',
  332. info: info,
  333. chang: '',
  334. kuan: '',
  335. gao: '',
  336. loading: false,
  337. type: 0,
  338. jsjg: {},
  339. text: ''
  340. }
  341. },
  342. onLoad(opt) {
  343. if(opt.type) {
  344. this.type = opt.type
  345. }
  346. },
  347. onShow() {
  348. console.log(this.info)
  349. this.getZyList()
  350. },
  351. onReachBottom() {
  352. },
  353. onReady(res) {
  354. var obj = this;
  355. uni.getSystemInfo({
  356. success: resu => {
  357. const query = uni.createSelectorQuery();
  358. query.select('.scroll-wrap').boundingClientRect();
  359. query.exec(function(res) {
  360. obj.height = resu.windowHeight - res[0].top + 'px';
  361. });
  362. },
  363. fail: res => {}
  364. });
  365. },
  366. methods: {
  367. // 获取默认方案
  368. getMr() {
  369. },
  370. // 选择高度
  371. bindGaodu(e) {
  372. console.log(e.detail.value)
  373. this.gao = this.gaoduList[e.detail.value]
  374. },
  375. // 选择是否保温
  376. bindBaowen(e) {
  377. this.isBaowen = this.son[e.detail.value]
  378. },
  379. //选择保温材料
  380. bindBaowenCl(e) {
  381. // this.isBaowen = this.son[e.detail.value]
  382. this.baowenCl = this.warmList[e.detail.value].name
  383. this.baowenClId = this.warmList[e.detail.value].id
  384. },
  385. //选择是否钢槽
  386. bindGangc(e) {
  387. this.isGangC = this.son[e.detail.value]
  388. },
  389. //选择钢槽材料
  390. bindGangcCl(e) {
  391. this.gangcCl = this.channelList[e.detail.value].name
  392. this.gangcClId = this.channelList[e.detail.value].id
  393. },
  394. //是否人梯
  395. bindRent(e) {
  396. this.isRent = this.son[e.detail.value]
  397. },
  398. //选择顶板厚度
  399. bindFoof(e) {
  400. this.roof = this.roofList[e.detail.value].name
  401. this.roofId = this.roofList[e.detail.value].id
  402. },
  403. //选择底板厚度
  404. bindFloor(e) {
  405. this.floor = this.floorList[e.detail.value].name
  406. this.floorId = this.floorList[e.detail.value].id
  407. },
  408. // 显示侧板、主拉、辅拉
  409. showValue(index, tip) {
  410. if (this[tip][index * 1]) {
  411. return this[tip][index * 1].name
  412. } else {
  413. return '请选择'
  414. }
  415. },
  416. //选择立柱厚度
  417. bindColumn(e) {
  418. this.column = this.columnList[e.detail.value].name
  419. this.columnId = this.columnList[e.detail.value].id
  420. },
  421. //选择侧板、主拉、辅拉
  422. bindValue(e) {
  423. let obj = this
  424. console.log(e)
  425. let name = e.currentTarget.id
  426. let index = name.replace(/[^\d]/g, '')
  427. let path = name.replace(/[0-9]/g, '')
  428. console.log(index, 'index')
  429. obj.$set(obj[path], index * 1, {})
  430. obj.$set(obj[path][index * 1], 'name', obj[path + 'List'][e.detail.value].name)
  431. obj.$set(obj[path][index * 1], 'id', obj[path + 'List'][e.detail.value].id)
  432. // obj.$set(obj[path],name,{'name': '','id': ''})
  433. // obj.$set(obj[path][name],'name',obj[path+'List'][e.detail.value].name)
  434. // obj.$set(obj[path][name],'id',obj[path+'List'][e.detail.value].id)
  435. console.log(obj[path], path)
  436. },
  437. goBlack() {
  438. uni.switchTab({
  439. url: '/pages/index/index'
  440. })
  441. },
  442. // bindValue(e) {
  443. // let obj = this
  444. // console.log(e,arguments)
  445. // // let name = e.currentTarget.dataset.ref
  446. // // obj[name + 'name'] = obj[name][e.detail.value].name
  447. // // obj[name + 'id'] = obj[name][e.detail.value].id
  448. // },
  449. tot() {
  450. let obj = this
  451. if (obj.chang == '') {
  452. return obj.$api.msg('请输入长度')
  453. }
  454. if (obj.kuan == '') {
  455. return obj.$api.msg('请输入宽度')
  456. }
  457. if (obj.gao == '') {
  458. return obj.$api.msg('请选择高度')
  459. }
  460. if (obj.isBaowen == '') {
  461. return obj.$api.msg('请选择是否保温')
  462. }
  463. if (obj.isBaowen == '是') {
  464. if (obj.baowenCl == '') {
  465. return obj.$api.msg('请选择保温材料')
  466. }
  467. }
  468. if (obj.isGangC == '') {
  469. return obj.$api.msg('请选择是否需要钢槽')
  470. }
  471. if (obj.isGangC == '是') {
  472. if (obj.gangcCl == '') {
  473. return obj.$api.msg('请选择钢槽材料')
  474. }
  475. }
  476. if (obj.isRent == '') {
  477. return obj.$api.msg('请选择是否需要人梯')
  478. }
  479. if (obj.gebanname == '') {
  480. return obj.$api.msg('请选择是否需要隔板')
  481. }
  482. getDefault({
  483. high: obj.gao
  484. }).then(res => {
  485. console.log(res,'999999',res.data)
  486. // 处理默认值
  487. if(res.data.roof) {
  488. console.log('处理默认值')
  489. console.log(res.data.roof)
  490. obj.roof = res.data.roof.name
  491. obj.roofId = res.data.roof.id
  492. }else {
  493. console.log('清除默认')
  494. obj.roof = ''
  495. obj.roofId = ''
  496. }
  497. if(res.data.floor) {
  498. obj.floor = res.data.floor.name
  499. obj.floorId = res.data.floor.id
  500. }else {
  501. obj.floor = ''
  502. obj.floorId = ''
  503. }
  504. if(res.data.side_plate) {
  505. obj.sideplate = res.data.side_plate
  506. }else {
  507. obj.sideplate = []
  508. }
  509. if(res.data.column) {
  510. obj.column = res.data.column.name
  511. obj.columnId = res.data.column.id
  512. }else {
  513. obj.column = ''
  514. obj.columnId = ''
  515. }
  516. if(res.data.lacing) {
  517. obj.lacing = res.data.lacing
  518. }else {
  519. obj.lacing = []
  520. }
  521. if(res.data.fula) {
  522. obj.fula = res.data.fula
  523. }else {
  524. obj.fula = []
  525. }
  526. })
  527. obj.tabcurrent = 1
  528. },
  529. too() {
  530. let obj = this
  531. obj.tabcurrent = 0
  532. },
  533. toth() {
  534. let obj = this
  535. if (obj.loading) {
  536. return
  537. }
  538. let lacing = obj.lacing.map(item => {
  539. return item.id
  540. })
  541. let fula = obj.fula.map(item => {
  542. return item.id
  543. })
  544. let side_plate = obj.sideplate.map(item => {
  545. return item.id
  546. })
  547. console.log(lacing, 'lacing++++')
  548. obj.loading = true
  549. uni.showLoading({
  550. title: '计算中...'
  551. })
  552. calculation({
  553. long: obj.chang, //长
  554. wide: obj.kuan,
  555. high: obj.gao,
  556. is_warm: obj.isBaowen == '是' ? 1 : 0,
  557. warm: obj.baowenClId,
  558. is_channel: obj.isGangC == '是' ? 1 : 0,
  559. channel: obj.gangcClId,
  560. is_human_ladder: obj.isRent == '是' ? 1 : 0,
  561. is_gc: obj.type,
  562. floor: obj.floorId,
  563. roof: obj.roofId,
  564. column: obj.columnId,
  565. lacing: lacing,
  566. fula: fula,
  567. side_plate: side_plate,
  568. }).then(res => {
  569. console.log(res)
  570. uni.hideLoading()
  571. obj.jsjg = res.data
  572. obj.tabcurrent = 2
  573. }).catch(err => {
  574. uni.hideLoading()
  575. obj.loading = false
  576. })
  577. },
  578. endjs() {
  579. uni.switchTab({
  580. url: '/pages/index/index'
  581. })
  582. },
  583. openKf() {
  584. },
  585. getZyList() {
  586. let obj = this
  587. getZyList({
  588. is_gc: obj.type
  589. }).then(res => {
  590. console.log(res)
  591. obj.warmList = res.data.warm //保温材料
  592. obj.channelList = res.data.channel //钢槽材料
  593. obj.roofList = res.data.roof //顶板厚度
  594. obj.floorList = res.data.floor //底板厚度
  595. obj.sideplateList = res.data.side_plate //侧板厚度
  596. obj.columnList = res.data.column //立柱厚度
  597. obj.lacingList = res.data.lacing //主拉厚度
  598. obj.fulaList = res.data.fula
  599. })
  600. },
  601. // 打开客服
  602. openKf() {
  603. this.$refs.popupkf.open();
  604. },
  605. // 关闭客服
  606. cancel() {
  607. this.$refs.popupkf.close();
  608. },
  609. // 复制客服微信
  610. comfirm(text) {
  611. console.log(text);
  612. const result = this.uniCopy(text);
  613. if (result === false) {
  614. uni.showToast({
  615. title: '不支持'
  616. });
  617. } else {
  618. uni.showToast({
  619. title: '复制成功',
  620. icon: 'none'
  621. });
  622. }
  623. this.$refs.popupkf.close();
  624. },
  625. uniCopy(content) {
  626. /**
  627. * 小程序端 和 app端的复制逻辑
  628. */
  629. //#ifndef H5
  630. uni.setClipboardData({
  631. data: content,
  632. success: function() {
  633. console.log('success');
  634. return true;
  635. }
  636. });
  637. //#endif
  638. /**
  639. * H5端的复制逻辑
  640. */
  641. // #ifdef H5
  642. if (!document.queryCommandSupported('copy')) {
  643. //为了兼容有些浏览器 queryCommandSupported 的判断
  644. // 不支持
  645. return false;
  646. }
  647. let textarea = document.createElement('textarea');
  648. textarea.value = content;
  649. textarea.readOnly = 'readOnly';
  650. document.body.appendChild(textarea);
  651. textarea.select(); // 选择对象
  652. textarea.setSelectionRange(0, content.length); //核心
  653. let result = document.execCommand('copy'); // 执行浏览器复制命令
  654. textarea.remove();
  655. return result;
  656. // #endif
  657. },
  658. }
  659. }
  660. </script>
  661. <style lang="scss">
  662. .jg {
  663. height: var(--status-bar-height);
  664. width: 100%;
  665. background: linear-gradient(-43deg, #3455e3, #0328c7);
  666. }
  667. .gs-top {
  668. width: 750rpx;
  669. // height: 240rpx;
  670. padding-bottom: 40rpx;
  671. background: linear-gradient(-43deg, #4464ED, #0328C7);
  672. // position: relative;
  673. image {
  674. width: 560rpx;
  675. height: 37rpx;
  676. margin: auto;
  677. display: block;
  678. }
  679. .info {
  680. padding-top: 20rpx;
  681. padding-bottom: 15rpx;
  682. view {
  683. width: 33%;
  684. text-align: center;
  685. font-size: 28rpx;
  686. font-weight: 500;
  687. color: #cad0f4;
  688. }
  689. }
  690. }
  691. .tit {
  692. display: flex;
  693. width: 750rpx;
  694. // height: 44px;
  695. align-items: center;
  696. .black {
  697. width: 80rpx;
  698. padding-left: 30rpx;
  699. image {
  700. width: 19rpx;
  701. height: 33rpx;
  702. }
  703. }
  704. .title {
  705. flex-grow: 1;
  706. text-align: center;
  707. font-size: 35rpx;
  708. font-weight: 500;
  709. color: #fff;
  710. }
  711. }
  712. .list-item {
  713. height: 105rpx;
  714. border-bottom: 1px solid #ECECEC;
  715. width: 700rpx;
  716. margin: auto;
  717. align-items: center;
  718. font-size: 30rpx;
  719. font-weight: 500;
  720. color: #222222;
  721. .item-name {
  722. width: 250rpx;
  723. }
  724. .item-val {
  725. // width: 400rpx;
  726. min-width: 400rpx;
  727. // background-color:red;
  728. flex-grow: 1;
  729. text-align: right;
  730. }
  731. .noact {
  732. color: #999;
  733. }
  734. }
  735. .xyb {
  736. width: 520rpx;
  737. height: 88rpx;
  738. line-height: 88rpx;
  739. text-align: center;
  740. background: linear-gradient(270deg, #4464ED, #0328C7);
  741. border-radius: 44rpx;
  742. margin: 60rpx auto 0;
  743. font-size: 32rpx;
  744. font-weight: 500;
  745. color: #FFFFFF;
  746. }
  747. .syb {
  748. width: 318rpx;
  749. height: 88rpx;
  750. background: #ECEFFC;
  751. border: 1px solid #4261E3;
  752. border-radius: 44px;
  753. color: #4261E3;
  754. }
  755. .ksjs {
  756. width: 318rpx;
  757. height: 88rpx;
  758. background: linear-gradient(270deg, #4464ED, #0328C7);
  759. border-radius: 44rpx;
  760. }
  761. .btn-wrap {
  762. padding-bottom: 74rpx;
  763. }
  764. .jg-wrap {
  765. width: 710rpx;
  766. margin: auto;
  767. background: #FFFFFF;
  768. box-shadow: 0px 3rpx 18rpx 0px rgba(114, 136, 231, 0.27);
  769. border-radius: 0px 0px 14rpx 14rpx;
  770. }
  771. .jsjg-wrap {
  772. height: 110rpx;
  773. border-top: 1px solid #EDEDED;
  774. border-bottom: 1px solid #EDEDED;
  775. width: 646rpx;
  776. margin: auto;
  777. font-size: 22rpx;
  778. padding: 0 15rpx;
  779. .jg-left {
  780. .left-top {
  781. .item-tit {
  782. font-size: 30rpx;
  783. font-weight: bold;
  784. color: #0C0C0C;
  785. padding-right: 10rpx;
  786. }
  787. }
  788. }
  789. .jg-right {
  790. flex-shrink: 0;
  791. font-size: 32rpx;
  792. font-weight: 500;
  793. color: #282828;
  794. }
  795. }
  796. .jg-zj {
  797. padding: 35rpx 43rpx 20rpx 40rpx;
  798. font-size: 28rpx;
  799. font-weight: 500;
  800. color: #444444;
  801. .price {
  802. font-size: 60rpx;
  803. font-weight: bold;
  804. color: #444444;
  805. &::before {
  806. content: '¥';
  807. font-size: 32rpx;
  808. padding-right: 10rpx;
  809. }
  810. }
  811. }
  812. .jg-tip {
  813. font-size: 25rpx;
  814. font-weight: 500;
  815. color: #A0A0A0;
  816. text-align: right;
  817. padding-right: 44rpx;
  818. padding-bottom: 50rpx;
  819. }
  820. .popup-box {
  821. width: 522rpx;
  822. height: 605rpx;
  823. background-color: #ffffff;
  824. border-radius: 20rpx;
  825. position: relative;
  826. .img {
  827. position: relative;
  828. top: -56rpx;
  829. left: 0;
  830. width: 522rpx;
  831. height: 132rpx;
  832. display: flex;
  833. justify-content: center;
  834. image {
  835. border-radius: 20rpx 20rpx 0 0;
  836. width: 450rpx;
  837. height: 132rpx;
  838. }
  839. }
  840. .mian {
  841. margin-top: -44rpx;
  842. display: flex;
  843. flex-direction: column;
  844. align-items: center;
  845. // padding: 32rpx 32rpx;
  846. background-color: #ffffff;
  847. border-radius: 0 0 20rpx 20rpx;
  848. text-align: center;
  849. .delivery {
  850. font-size: 40rpx;
  851. color: #333333;
  852. display: flex;
  853. align-items: center;
  854. flex-direction: column;
  855. image {
  856. margin-top: 48rpx;
  857. width: 172rpx;
  858. height: 160rpx;
  859. }
  860. }
  861. .nocancel {
  862. font-size: 32rpx;
  863. color: #333333;
  864. margin-top: 14rpx;
  865. }
  866. .comfirm-box {
  867. margin-top: 52rpx;
  868. display: flex;
  869. // margin-bottom: 32rpx;
  870. // justify-content: space-around;
  871. .cancel {
  872. display: flex;
  873. align-items: center;
  874. justify-content: center;
  875. width: 197rpx;
  876. height: 74rpx;
  877. border: 1px solid #dcc786;
  878. border-radius: 38rpx;
  879. font-size: 32rpx;
  880. color: #605128;
  881. }
  882. .comfirm {
  883. margin-left: 32rpx;
  884. display: flex;
  885. align-items: center;
  886. justify-content: center;
  887. width: 197rpx;
  888. height: 74rpx;
  889. background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
  890. border-radius: 38px;
  891. font-size: 32rpx;
  892. color: #605128;
  893. }
  894. }
  895. }
  896. }
  897. .new-bg {
  898. width: 750rpx;
  899. background-color: #fff;
  900. padding: 0 10rpx;
  901. .bg-line {
  902. height: 90rpx;
  903. font-size: 26rpx;
  904. justify-content: flex-start;
  905. border-bottom: 1px solid #eeeeee;
  906. &:nth-child(odd) {
  907. background-color: #f6f7fb;
  908. }
  909. view {
  910. text-align: center;
  911. height: 90rpx;
  912. display: flex;
  913. align-items: center;
  914. justify-content: center;
  915. border-right: 1px solid #eee;
  916. border-top: 1px solid #eee;
  917. }
  918. .title {
  919. width: 128rpx;
  920. text-align: left;
  921. }
  922. .name {
  923. width: 160rpx;
  924. }
  925. .specifications {
  926. width: 150rpx;
  927. }
  928. .number {
  929. width: 85rpx;
  930. }
  931. .unit_price {
  932. width: 120rpx;
  933. }
  934. .ot-price {
  935. width: 110rpx;
  936. border-right: none;
  937. }
  938. }
  939. }
  940. .jg-jz {
  941. padding: 0 20rpx;
  942. font-size: 30rpx;
  943. height: 90rpx;
  944. line-height: 90rpx;
  945. }
  946. </style>