task.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011
  1. <template>
  2. <view class="container">
  3. <view class="detail-desc">
  4. <view class="d-header">
  5. <text>派车单</text>
  6. </view>
  7. <view class="c-list">
  8. <view class="c-row b-b">
  9. <text class="tit">出发地</text>
  10. <view class="con-list">
  11. <text>{{carInfo.startPlace}}</text>
  12. </view>
  13. </view>
  14. <view class="c-row b-b">
  15. <text class="tit">目的地</text>
  16. <view class="con-list">
  17. <text>{{carInfo.startInPlace}}</text>
  18. </view>
  19. </view>
  20. <view class="c-row b-b">
  21. <text class="tit">任务量</text>
  22. <view class="con-list">
  23. <text>{{numFilter(carInfo.num)}}</text>
  24. </view>
  25. </view>
  26. <view class="c-row b-b">
  27. <text class="tit">已发运量</text>
  28. <view class="con-list">
  29. <text>{{numFilter(carInfo.tranCount)}}</text>
  30. </view>
  31. </view>
  32. <view class="c-row b-b">
  33. <text class="tit">货名</text>
  34. <view class="con-list">
  35. <text>{{carInfo.goodsName}}</text>
  36. </view>
  37. </view>
  38. </view>
  39. <view class="d-header">
  40. <text>发运数据</text>
  41. </view>
  42. <view class="c-list">
  43. <view class="c-row b-b">
  44. <text class="tit">车号</text>
  45. <view class="con-list">
  46. <input placeholder="请填写车号" name="input" v-model="carNo" @input="carNoInput"></input>
  47. </view>
  48. </view>
  49. <view class="c-row b-b">
  50. <text class="tit">毛重(吨)</text>
  51. <view class="con-list">
  52. <input placeholder="请填写毛重" name="input" v-model="grossWeight" @input="grossWeightInput"></input>
  53. </view>
  54. </view>
  55. <view class="c-row b-b">
  56. <text class="tit">皮重(吨)</text>
  57. <view class="con-list">
  58. <input placeholder="请填写皮重" name="input" v-model="skinWeight" @input="skinWeightInput"></input>
  59. </view>
  60. </view>
  61. <view class="c-row b-b">
  62. <text class="tit">净重(自动计算)</text>
  63. <view class="con-list">
  64. <text>{{numFilter(netWeight)}}</text>
  65. </view>
  66. </view>
  67. <view class="cu-bar bg-white">
  68. <view class="action">
  69. 磅单照片
  70. </view>
  71. </view>
  72. <view class="cu-form-group">
  73. <view class="grid col-2 grid-square flex-sub">
  74. <view class="bg-img" v-if="poundImg != ''" @tap="ViewImage" :data-url="poundImg">
  75. <image :src="poundImg" mode="aspectFit"></image>
  76. <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="0">
  77. <text class='cuIcon-close'></text>
  78. </view>
  79. </view>
  80. <view class="solids" @tap="ChooseImagePound" v-if="poundImg == ''">
  81. <text class='cuIcon-cameraadd'></text>
  82. </view>
  83. </view>
  84. </view>
  85. </view>
  86. <view class="cu-modal" :class="modalName=='userModal'?'show':''" @tap="hideModal">
  87. <scroll-view scroll-y class="cu-dialog" :style="userStyle" @tap.stop="">
  88. <view class="cu-list menu text-center" >
  89. <view class="cu-item" v-for="(item,index) in userList" :key="index" @click="mygaipai(item.id)">
  90. <label class="flex justify-between align-center flex-sub">
  91. <view class="flex-sub">{{item.userName}}</view>
  92. </label>
  93. </view>
  94. </view>
  95. </scroll-view>
  96. </view>
  97. <view class="cu-modal" :class="modalName=='workModal'?'show':''" @tap="hideModal">
  98. <scroll-view scroll-y class="cu-dialog" :style="userStyle" @tap.stop="">
  99. <view class="cu-list menu text-center" >
  100. <view class="cu-item" v-for="(item,index) in fieldList" :key="index" @click="nextPerson2(item.id)">
  101. <label class="flex justify-between align-center flex-sub">
  102. <view class="flex-sub">{{item.userName}}</view>
  103. </label>
  104. </view>
  105. </view>
  106. </scroll-view>
  107. </view>
  108. <view v-if="taskStatus == 1" class="page-bottom">
  109. <view class="action-btn-group">
  110. <button type="primary" class=" action-btn no-border add-cart-btn" @click="finish">完成</button>
  111. <button type="primary" class=" action-btn no-border add-cart-btn" @click="gaipai">改派</button>
  112. </view>
  113. </view>
  114. <view class="cu-modal" :class="modalName=='inModal'?'show':''" @tap="hideModal">
  115. <scroll-view scroll-y class="cu-dialog" :style="userStyle" @tap.stop="">
  116. <view class="cu-list menu text-center" >
  117. <view class="cu-item" v-for="(item,index) in userList" :key="index" @click="selectInPerson(item)">
  118. <label class="flex justify-between align-center flex-sub">
  119. <view class="flex-sub">{{item.carNo}} ———— {{item.tranCount}}</view>
  120. </label>
  121. </view>
  122. </view>
  123. </scroll-view>
  124. </view>
  125. </view>
  126. </view>
  127. </template>
  128. <script>
  129. import uploadImage from '@/components/ossutil/uploadFile.js';
  130. import Handwriting from '@/components/ossutil/signature.js';
  131. import {
  132. mapState
  133. } from 'vuex';
  134. export default {
  135. data() {
  136. return {
  137. carInfo:[],
  138. trainImg:'',
  139. otherImg:'',
  140. grossWeight:'',
  141. skinWeight:'',
  142. fee:'',
  143. otherFee:'',
  144. carSkinNo:'',
  145. boxNo:'',
  146. taskStatus:'',
  147. userStyle:'',
  148. fieldList:[],
  149. modalName:'',
  150. modalfieldName:'',
  151. taskType:'',
  152. taskId:'',
  153. goodsValue:'',
  154. addNumStatus:false,
  155. wechatNo:'',
  156. lineColor:'black',
  157. slideValue:50,
  158. handwriting:'',
  159. selectColor:'black',
  160. color:'',
  161. insuranceFee:'',
  162. rentboxFee:'',
  163. loadingFee:'',
  164. userList:[],
  165. inPersonName:'',
  166. carlist:[],
  167. suttleWeight2:'',
  168. taskInfo:[],
  169. poundImg:'',
  170. grossWeight:'',
  171. skinWeight:'',
  172. netWeight:'',
  173. carNo:'',
  174. taskStatus:'',
  175. userStyle:'',
  176. modalName:'',
  177. taskType:'',
  178. taskId:'',
  179. boxImg:'',
  180. boxNoImg:'',
  181. titleNoImg:'',
  182. titleNo:'',
  183. nextUserId:''
  184. };
  185. },
  186. computed: {
  187. ...mapState(['hasLogin','userInfo']),
  188. suttleWeight(){
  189. let num=0
  190. if(this.carlist.length>0){
  191. for(var i=0;i<this.carlist.length;i++){
  192. num=Number(num+Number(this.carlist[i].count))
  193. }
  194. }else{
  195. num=this.suttleWeight2
  196. }
  197. return num
  198. }
  199. },
  200. onShow() {
  201. },
  202. onLoad(options) {
  203. const that = this
  204. this.taskId = options.taskId
  205. this.taskType = options.taskType
  206. this.taskStatus = options.taskStatus
  207. uni.showLoading({
  208. title: '正在加载',
  209. mask:true
  210. })
  211. that.$api.request('tran', 'getTrainDetailInfo', {
  212. id: options.taskId
  213. }, failres => {
  214. that.$api.msg(failres.errmsg)
  215. uni.hideLoading()
  216. }).then(res => {
  217. that.carInfo = res.data
  218. console.log(that.carInfo)
  219. // that.inPersonName = res.data.receiver
  220. that.fee = that.carInfo.fee
  221. that.carNo = that.carInfo.carNos
  222. that.grossWeight = that.carInfo.grossWeight
  223. that.skinWeight=that.carInfo.skinWeight
  224. that.netWeight=that.carInfo.netWeight
  225. that.poundImg= that.carInfo.poundImg
  226. uni.hideLoading()
  227. })
  228. },
  229. onReady(){
  230. },
  231. methods: {
  232. ChooseImageBox() {
  233. var that = this
  234. uni.chooseImage({
  235. count: 1, //默认9
  236. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  237. sourceType: ['album','camera'], //从相册选择
  238. success: (res) => {
  239. //上传图片
  240. //图片路径可自行修改
  241. uploadImage(res.tempFilePaths[0], 'boxImg/',
  242. result => {
  243. that.boxImg = result
  244. uni.hideLoading();
  245. }
  246. )
  247. }
  248. });
  249. },
  250. ChooseImageBoxNo() {
  251. var that = this
  252. uni.chooseImage({
  253. count: 1, //默认9
  254. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  255. sourceType: ['album','camera'], //从相册选择
  256. success: (res) => {
  257. //上传图片
  258. //图片路径可自行修改
  259. uploadImage(res.tempFilePaths[0], 'boxNoImg/',
  260. result => {
  261. that.boxNoImg = result
  262. uni.hideLoading();
  263. }
  264. )
  265. }
  266. });
  267. },
  268. nextPerson2(id){
  269. var that = this
  270. that.$api.request('tran', 'finishTrainCarInfo', {
  271. taskId:that.taskId,
  272. grossWeight:!that.grossWeight?'':that.grossWeight,
  273. skinWeight:!that.skinWeight?'':that.skinWeight,
  274. netWeight:!that.netWeight?'':that.netWeight,
  275. poundImg:!that.poundImg?'':that.poundImg,
  276. carNo:!that.carNo?'':that.carNo,
  277. nextUserId: id
  278. }, failres => {
  279. that.$api.msg(failres.errmsg)
  280. uni.hideLoading()
  281. }).then(res => {
  282. uni.hideLoading()
  283. that.$api.msg('完成成功')
  284. setTimeout(()=>{uni.navigateBack({})},1000);
  285. })
  286. },
  287. ChooseImageTitleNo() {
  288. var that = this
  289. uni.chooseImage({
  290. count: 1, //默认9
  291. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  292. sourceType: ['album','camera'], //从相册选择
  293. success: (res) => {
  294. //上传图片
  295. //图片路径可自行修改
  296. uploadImage(res.tempFilePaths[0], 'titleNoImg/',
  297. result => {
  298. that.titleNoImg = result
  299. uni.hideLoading();
  300. }
  301. )
  302. }
  303. });
  304. },
  305. hideModal(e) {
  306. this.modalName = null
  307. },
  308. ViewImage(e) {
  309. var img = [];
  310. img = e.currentTarget.dataset.url.split(' ')
  311. uni.previewImage({
  312. current:0,
  313. urls: img
  314. });
  315. },
  316. DelImg(e) {
  317. uni.showModal({
  318. title: '提示',
  319. content: '确定要删除该照片吗?',
  320. cancelText: '取消',
  321. confirmText: '确定',
  322. success: res => {
  323. if (res.confirm) {
  324. if(e.currentTarget.dataset.index == 0){
  325. this.poundImg = "";
  326. }
  327. else if(e.currentTarget.dataset.index == 1){
  328. this.boxImg = "";
  329. }
  330. else if(e.currentTarget.dataset.index == 2){
  331. this.boxNoImg = "";
  332. }
  333. else if(e.currentTarget.dataset.index == 3){
  334. this.titleNoImg = "";
  335. }
  336. }
  337. }
  338. })
  339. },
  340. ChooseImagePound() {
  341. uni.chooseImage({
  342. count: 1, //默认9
  343. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  344. sourceType: ['album','camera'], //从相册选择
  345. success: (res) => {
  346. //上传图片
  347. //图片路径可自行修改
  348. uploadImage(res.tempFilePaths[0], 'poundImg/',
  349. result => {
  350. this.poundImg = result
  351. uni.hideLoading();
  352. }
  353. )
  354. }
  355. });
  356. },
  357. grossWeightInput(e) {
  358. this.grossWeight = e.detail.value
  359. if(this.grossWeight && this.skinWeight){
  360. this.netWeight = this.grossWeight - this.skinWeight
  361. }
  362. },
  363. skinWeightInput(e) {
  364. this.skinWeight = e.detail.value
  365. if(this.grossWeight && this.skinWeight){
  366. this.netWeight = this.grossWeight - this.skinWeight
  367. }
  368. },
  369. carNoInput(e) {
  370. this.carNo = e.detail.value
  371. },
  372. boxNoInput(e) {
  373. this.boxNo = e.detail.value
  374. },
  375. titleNoInput(e) {
  376. this.titleNo = e.detail.value
  377. },
  378. finish(){
  379. const that = this
  380. if(!that.grossWeight){
  381. this.$api.msg('请填写毛重');
  382. return;
  383. }
  384. if(!that.skinWeight){
  385. this.$api.msg('请填写皮重');
  386. return;
  387. }
  388. if(!that.carNo){
  389. this.$api.msg('请填写车牌号');
  390. return;
  391. }
  392. if(!that.poundImg){
  393. this.$api.msg('请上传磅单照片');
  394. return;
  395. }
  396. uni.showModal({
  397. title: '温馨提示',
  398. content: '是否指派外勤继续完成发运任务',
  399. confirmText:"是",
  400. cancelText:"否",
  401. success: function (res) {
  402. if (res.confirm) {
  403. uni.showLoading({
  404. title: '正在加载',
  405. mask:true
  406. })
  407. that.$api.request('user', 'getUserList', {
  408. role:'外勤'
  409. }, failres => {
  410. that.$api.msg(failres.errmsg)
  411. uni.hideLoading()
  412. }).then(res => {
  413. that.fieldList = res.data
  414. if(that.fieldList.length == 0){
  415. that.$api.msg('暂无外勤信息')
  416. }
  417. else{
  418. var height = that.fieldList.length * 100
  419. var width = 500
  420. that.userStyle = "height:"+height+"rpx;width:" + width+"rpx"
  421. that.modalName = 'workModal'
  422. }
  423. uni.hideLoading()
  424. })
  425. } else if (res.cancel) {
  426. uni.showLoading({
  427. title: '正在加载',
  428. mask:true
  429. })
  430. that.$api.request('tran', 'finishTrainCarInfo', {
  431. taskId: that.taskId,
  432. grossWeight:!that.grossWeight?'':that.grossWeight,
  433. skinWeight:!that.skinWeight?'':that.skinWeight,
  434. netWeight:!that.netWeight?'':that.netWeight,
  435. poundImg:!that.poundImg?'':that.poundImg,
  436. carNo:!that.carNo?'':that.carNo,
  437. nextUserId: -1
  438. }, failres => {
  439. that.$api.msg(failres.errmsg)
  440. uni.hideLoading()
  441. }).then(res => {
  442. uni.hideLoading()
  443. that.$api.msg('完成成功')
  444. setTimeout(()=>{uni.navigateBack({})},1000);
  445. })
  446. }
  447. }
  448. });
  449. },
  450. priceInput(e){
  451. this.price = e.detail.value
  452. },
  453. otherPriceInput(e){
  454. this.otherPrice = e.detail.value
  455. },
  456. insuranceFeeInput(e){
  457. this.insuranceFee = e.detail.value
  458. },
  459. netWeightInput(e){
  460. this.netWeight = e.detail.value
  461. },
  462. carNoInput(e){
  463. this.carNo = e.detail.value
  464. },
  465. rentboxFeeInput(e){
  466. this.rentboxFee = e.detail.value
  467. },
  468. loadingFeeInput(e){
  469. this.loadingFee = e.detail.value
  470. },
  471. boxNoInput(e){
  472. this.boxNo = e.detail.value
  473. },
  474. numFilter (value) {
  475. if(!value){
  476. return 0
  477. }
  478. // 截取当前数据到小数点后两位
  479. let realVal = parseFloat(value).toFixed(2)
  480. return realVal
  481. },
  482. carInput(item,e){
  483. if(item.count>item.tranCount){
  484. uni.showToast({
  485. title: `当前车辆可载吨数为${item.tranCount},请不要超过`,
  486. icon:'none',
  487. duration: 2000
  488. })
  489. item.count = 0
  490. }else{
  491. item.count = e.detail.value
  492. }
  493. },
  494. selectInPerson(item){
  495. if(JSON.stringify(this.carlist).indexOf(JSON.stringify(item.id))==-1){
  496. this.carlist.push(item)
  497. }else{
  498. for(var i=0;i<this.carlist.length;i++){
  499. if(this.carlist[i].id==item.id){
  500. this.carlist[i].count=item.count
  501. }
  502. }
  503. }
  504. this.modalName = null
  505. },
  506. ChooseSignImage() {
  507. this.handwriting = new Handwriting({
  508. lineColor: this.lineColor,
  509. slideValue: this.slideValue, // 0, 25, 50, 75, 100
  510. canvasName: 'handWriting',
  511. })
  512. this.showAutograph = true
  513. },
  514. uploadScaleStart(event){
  515. this.handwriting.uploadScaleStart(event)
  516. },
  517. uploadScaleMove(event){
  518. this.handwriting.uploadScaleMove(event)
  519. },
  520. uploadScaleEnd(event){
  521. this.handwriting.uploadScaleEnd(event)
  522. },
  523. retDraw() {
  524. this.handwriting.retDraw()
  525. },
  526. hideModal(e) {
  527. this.modalName = null
  528. },
  529. ViewImage(e) {
  530. var img = [];
  531. img = e.currentTarget.dataset.url.split(' ')
  532. uni.previewImage({
  533. current:0,
  534. urls: img
  535. });
  536. },
  537. selectPerson(){
  538. const that = this
  539. uni.showLoading({
  540. title: '正在加载',
  541. mask:true
  542. })
  543. that.$api.request('tran', 'getCarList', {
  544. tranNo:that.carInfo.tranNo,
  545. taskId:that.taskId
  546. }, failres => {
  547. that.$api.msg(failres.errmsg)
  548. uni.hideLoading()
  549. }).then(res => {
  550. for(var i=0;i<res.data.length;i++){
  551. console.log(res.data[i].tranCount)
  552. res.data[i].count = res.data[i].tranCount
  553. }
  554. that.userList = res.data
  555. if(that.userList.length == 0){
  556. that.$api.msg('暂无汽车号')
  557. }
  558. else{
  559. var height = that.userList.length * 100
  560. var width = 500
  561. that.userStyle = "height:"+height+"rpx;width:" + width+"rpx"
  562. that.modalName = 'inModal'
  563. }
  564. uni.hideLoading()
  565. })
  566. },
  567. DelImg(e) {
  568. uni.showModal({
  569. title: '提示',
  570. content: '确定要删除该照片吗?',
  571. cancelText: '取消',
  572. confirmText: '确定',
  573. success: res => {
  574. if (res.confirm) {
  575. if(e.currentTarget.dataset.index == 0){
  576. this.trainImg = "";
  577. }
  578. else if(e.currentTarget.dataset.index == 1){
  579. this.otherImg = "";
  580. }
  581. }
  582. }
  583. })
  584. },
  585. ChooseImage() {
  586. uni.chooseImage({
  587. count: 1, //默认9
  588. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  589. sourceType: ['album','camera'], //从相册选择
  590. success: (res) => {
  591. //上传图片
  592. //图片路径可自行修改
  593. uploadImage(res.tempFilePaths[0], 'trainImg/',
  594. result => {
  595. this.trainImg = result
  596. uni.hideLoading();
  597. }
  598. )
  599. }
  600. });
  601. },
  602. ChooseImageOther() {
  603. uni.chooseImage({
  604. count: 1, //默认9
  605. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  606. sourceType: ['album','camera'], //从相册选择
  607. success: (res) => {
  608. //上传图片
  609. //图片路径可自行修改
  610. uploadImage(res.tempFilePaths[0], 'otherImg/',
  611. result => {
  612. this.otherImg = result
  613. uni.hideLoading();
  614. }
  615. )
  616. }
  617. });
  618. },
  619. goodsValueInput(e){
  620. this.goodsValue = e.detail.value
  621. },
  622. numInput(e){
  623. this.addNum = e.detail.value
  624. },
  625. wechatNoInput(e) {
  626. this.wechatNo = e.detail.value
  627. },
  628. gaipai(){
  629. console.log(1111)
  630. const that = this
  631. uni.showLoading({
  632. title: '正在加载',
  633. mask:true
  634. })
  635. that.$api.request('user', 'getUserList', {
  636. role:'外勤'
  637. }, failres => {
  638. that.$api.msg(failres.errmsg)
  639. uni.hideLoading()
  640. }).then(res => {
  641. that.userList = res.data
  642. if(that.userList.length == 0){
  643. that.$api.msg('暂无外勤信息')
  644. }
  645. else{
  646. var height = that.userList.length * 100
  647. var width = 500
  648. that.userStyle = "height:"+height+"rpx;width:" + width+"rpx"
  649. that.modalName = 'userModal'
  650. }
  651. uni.hideLoading()
  652. })
  653. },
  654. mygaipai(id){
  655. this.nextUserId=id
  656. var that = this
  657. that.$api.request('tran', 'gaipai',{
  658. taskId: that.taskId,
  659. outPersonId:id,
  660. taskType:that.taskType
  661. },failres => {
  662. that.$api.msg(failres.errmsg)
  663. that.modalName = null
  664. uni.hideLoading()
  665. }).then(res => {
  666. that.modalName = null
  667. uni.navigateBack({
  668. delta: 2
  669. })
  670. uni.hideLoading()
  671. })
  672. },
  673. },
  674. }
  675. </script>
  676. <style lang='scss' scoped="true">
  677. .container{
  678. padding-bottom: 160upx;
  679. }
  680. .carwrap{
  681. font-size:20rpx;
  682. }
  683. .detail-desc {
  684. background: #fff;
  685. margin-top: 16upx;
  686. width: 750upx;
  687. .d-header {
  688. display: flex;
  689. justify-content: center;
  690. align-items: center;
  691. height: 80upx;
  692. font-size: $font-base + 2upx;
  693. color: $font-color-dark;
  694. position: relative;
  695. text {
  696. padding: 0 20upx;
  697. background: #fff;
  698. position: relative;
  699. z-index: 1;
  700. }
  701. &:after {
  702. position: absolute;
  703. left: 50%;
  704. top: 50%;
  705. transform: translateX(-50%);
  706. width: 300upx;
  707. height: 0;
  708. content: '';
  709. border-bottom: 1px solid #ccc;
  710. }
  711. }
  712. }
  713. .carwrap{
  714. display: flex;
  715. justify-content: space-between;
  716. padding: 10px 40px;
  717. border-bottom:1px solid #f0f0f0;
  718. }
  719. .trancount{
  720. display: inline-block;
  721. vertical-align: middle;
  722. text-align: right;
  723. width: 100rpx;
  724. }
  725. .c-list {
  726. font-size: $font-sm + 2upx;
  727. color: $font-color-base;
  728. background: #fff;
  729. .c-row {
  730. display: flex;
  731. align-items: center;
  732. padding: 20upx 30upx;
  733. position: relative;
  734. }
  735. .tit {
  736. width: 220upx;
  737. }
  738. .con {
  739. flex: 1;
  740. color: $font-color-dark;
  741. .selected-text {
  742. margin-right: 10upx;
  743. }
  744. }
  745. .bz-list {
  746. height: 40upx;
  747. font-size: $font-sm+2upx;
  748. color: $font-color-dark;
  749. text {
  750. display: inline-block;
  751. margin-right: 30upx;
  752. }
  753. }
  754. .con-list {
  755. flex: 1;
  756. display: flex;
  757. flex-direction: column;
  758. color: $font-color-dark;
  759. line-height: 40upx;
  760. text-align: right;
  761. padding-right: 20upx;
  762. }
  763. .red {
  764. color: $uni-color-primary;
  765. }
  766. }
  767. /* 底部操作菜单 */
  768. .page-bottom {
  769. position: fixed;
  770. left: 30upx;
  771. bottom: 30upx;
  772. z-index: 95;
  773. display: flex;
  774. justify-content: center;
  775. align-items: center;
  776. width: 690upx;
  777. height: 100upx;
  778. background: rgba(255, 255, 255, .9);
  779. box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
  780. border-radius: 16upx;
  781. .p-b-btn {
  782. display: flex;
  783. flex-direction: column;
  784. align-items: center;
  785. justify-content: center;
  786. font-size: $font-sm;
  787. color: $font-color-base;
  788. width: 96upx;
  789. height: 80upx;
  790. .yticon {
  791. font-size: 40upx;
  792. line-height: 48upx;
  793. color: $font-color-light;
  794. }
  795. &.active,
  796. &.active .yticon {
  797. color: $uni-color-primary;
  798. }
  799. .icon-fenxiang2 {
  800. font-size: 42upx;
  801. transform: translateY(-2upx);
  802. }
  803. .icon-shoucang {
  804. font-size: 46upx;
  805. }
  806. }
  807. }
  808. @mixin playcenter {
  809. display: flex;
  810. align-items: center;
  811. justify-content: center;
  812. }
  813. .xsh-start {
  814. width: 105rpx;
  815. height: 105rpx;
  816. background: #FFFFFF;
  817. border-radius: 50%;
  818. font-size: 29rpx;
  819. color: #4135EB;
  820. @include playcenter;
  821. flex-wrap: wrap;
  822. }
  823. .x-modal {
  824. width: 100%;
  825. .x-m-title {
  826. width: 100%;
  827. height: 90rpx;
  828. padding: 0 38rpx 0 31rpx;
  829. box-sizing: border-box;
  830. font-size: 29rpx;
  831. color: #333333;
  832. border-bottom: 1px dashed #999;
  833. @include playcenter;
  834. justify-content: space-between;
  835. .xm-t-clear {
  836. font-size: 25rpx;
  837. color: #341DB7;
  838. @include playcenter;
  839. >image {
  840. width: 28rpx;
  841. height: 28rpx;
  842. display: block;
  843. margin-right: 8rpx;
  844. }
  845. }
  846. }
  847. .x-m-con {
  848. width: 100%;
  849. padding: 0 31rpx 18rpx;
  850. margin-top: 5rpx;
  851. box-sizing: border-box;
  852. }
  853. }
  854. .wrapper {
  855. width: 100%;
  856. height: 100%;
  857. margin: 30upx 0;
  858. overflow: hidden;
  859. display: flex;
  860. align-content: center;
  861. flex-direction: column;
  862. justify-content: center;
  863. font-size: 28upx;
  864. }
  865. .handWriting {
  866. background: #fff;
  867. width: 100%;
  868. height: 350upx;
  869. }
  870. .handRight {
  871. align-items: center;
  872. }
  873. .handCenter {
  874. border: 4upx dashed #e9e9e9;
  875. flex: 5;
  876. overflow: hidden;
  877. box-sizing: border-box;
  878. width: 90%;
  879. margin: 0 auto;
  880. }
  881. .handTitle {
  882. flex: 1;
  883. color: #666;
  884. justify-content: center;
  885. font-size: 30upx;
  886. }
  887. .handBtn {
  888. flex-direction: column;
  889. padding: 40upx 20upx;
  890. }
  891. .buttons{
  892. width: 100%;
  893. margin-top: 20upx;
  894. justify-content: space-between;
  895. }
  896. .buttons>button{
  897. font-size: 30upx;
  898. height: 80upx;
  899. }
  900. .delBtn {
  901. background: #23df02;
  902. color: #fff;
  903. }
  904. .color{
  905. align-items: center;
  906. }
  907. .color>text{
  908. margin-right: 20upx;
  909. }
  910. .subBtn {
  911. background: #008ef6;
  912. color: #fff;
  913. text-align: center;
  914. justify-content: center;
  915. }
  916. .black-select {
  917. width: 60upx;
  918. height: 60upx;
  919. }
  920. .black-select.color_select {
  921. width: 90upx;
  922. height: 90upx;
  923. }
  924. .red-select {
  925. width: 60upx;
  926. height: 60upx;
  927. }
  928. .red-select.color_select {
  929. width: 90upx;
  930. height: 90upx;
  931. }
  932. .slide-wrapper {
  933. align-items: center;
  934. margin-bottom: 20upx;
  935. }
  936. .slider{
  937. width: 400upx;
  938. padding-left: 20upx;
  939. }
  940. .drop {
  941. width: 50upx;
  942. height: 50upx;
  943. border-radius: 50%;
  944. background: #FFF;
  945. position: absolute;
  946. left: 0upx;
  947. top: -10upx;
  948. box-shadow: 0px 1px 5px #888888;
  949. }
  950. .slide {
  951. width: 250upx;
  952. height: 30upx;
  953. }
  954. .showimg{
  955. border: 4upx solid #e9e9e9;
  956. overflow: hidden;
  957. width: 90%;
  958. margin: 0 auto;
  959. background: #eee;
  960. height: 350upx;
  961. margin-top: 40upx;
  962. align-items: center;
  963. justify-content: center;
  964. }
  965. .showimg>image{
  966. width: 100%;
  967. height: 100%;
  968. }
  969. .showimg>text{
  970. font-size: 40upx;
  971. color: #888;
  972. }
  973. .indexFixed{
  974. position: fixed;
  975. left:0;
  976. bottom:0;
  977. right:0;
  978. }
  979. </style>