index.vue 22 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114
  1. <template>
  2. <view class="pages" :style="{'min-height':(h+mt)+'px','padding-top':(mt)+'px'}">
  3. <!-- <view class="pages" :style="{'min-height':h+'px'}"> -->
  4. <c-nav-bar title="商品管理"></c-nav-bar>
  5. <view class="tb">
  6. <view class="tabs">
  7. <view v-for="(item,index) in tabList" :key="index" @tap="changeTab1(index)">
  8. <text :class="index==current?'active':''">{{item.name}}</text>
  9. <text v-if="index==current">({{roomType.length}})</text>
  10. </view>
  11. </view>
  12. </view>
  13. <!-- 房型数量 -->
  14. <view class="">
  15. <view class="typeNum">
  16. <view class="left" style="font-size: 24rpx; color: #777;" @click="areaShowed()">
  17. <text :class="areaShow==true?'active':''" style="margin-right: 20rpx;">上架时间</text>
  18. <u-icon name="arrow-down-fill" bold='true' v-if="areaShow==false" size="20" labelPos="left"
  19. labelSize="26"></u-icon>
  20. <u-icon name="arrow-up-fill" bold='true' v-else color="#007a68" labelColor='#007a68' size="20"
  21. labelPos="left" labelSize="26"></u-icon>
  22. </view>
  23. <view class="right" @click="showList">
  24. <view class="image">
  25. <image src="https://i.ringzle.com/file/20240313/f3d301b3bc4544ffaf5a0d96a761dd00.png" mode="">
  26. </image>
  27. </view>
  28. <view class="text">
  29. 批量操作
  30. </view>
  31. </view>
  32. </view>
  33. <!-- 区域筛选 -->
  34. <view class="contented" :style="{'height':(h-mt)+'px'}" v-show="areaShow">
  35. <view class="custom_popup">
  36. <view class="types">
  37. <view class="pricequjian" style="height: 240rpx;">
  38. <view class="jiage" v-for="(item, index) in list1" :key="index"
  39. @click="clickareaShow(item, index)">
  40. <view class="contentpeice">
  41. <view class="title" :class="{'Doublactive': areaShowIndex == index}">
  42. {{item.name}}
  43. </view>
  44. <view class="image" v-if="areaShowIndex == index">
  45. <image
  46. src="https://i.ringzle.com/file/20240316/16dd69efb40242de83da8207539ec73e.png"
  47. mode=""></image>
  48. </view>
  49. </view>
  50. </view>
  51. </view>
  52. </view>
  53. </view>
  54. </view>
  55. </view>
  56. <view class="" style="padding-bottom: 160rpx;">
  57. <!-- 房型选择 -->
  58. <view class="type" v-for="item,index in roomType" :key="index" style="">
  59. <view class="left" v-if="Selected==true">
  60. <view class="image">
  61. <!-- <image @tap="selectPerson(item,index)"
  62. :src="isSelect?'https://i.ringzle.com/file/20240228/c741a340e19642c59473e6f4a6d2f4be.png':'https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png'">
  63. </image> -->
  64. <image @tap="selectPerson(item,index)"
  65. :src="selectedTags.includes(item)?'https://i.ringzle.com/file/20240228/c741a340e19642c59473e6f4a6d2f4be.png':'https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png'">
  66. </image>
  67. </view>
  68. </view>
  69. <!-- <view @click="goEditTypeInfo(item.houseBaseId)" style="width: 100%;"> -->
  70. <view style="width: 100%;">
  71. <view class="right">
  72. <view class="right-left">
  73. <image :src="item.cover" mode=""></image>
  74. </view>
  75. <view class="right-right">
  76. <view class="top">
  77. <text style="font-size: 30rpx; color: #333;">{{item.comboName}}</text>
  78. </view>
  79. <view class="under">
  80. <view style="font-size: 24rpx; color: #777;">销量:{{item.saleNums}}</view>
  81. <view style="font-size: 36rpx; color: #FF4141; font-weight: Bold; margin-top: 16rpx;">
  82. ¥{{item.price}}</view>
  83. </view>
  84. </view>
  85. </view>
  86. <view class="type-btn">
  87. <view class="type-btn-left">
  88. </view>
  89. <view class="type-btn-right">
  90. <view class="" @click="del(item)">
  91. 删除
  92. </view>
  93. <view @click="gaijia(item,index)">
  94. 改价格
  95. </view>
  96. <view class="" @click="Undered(item)" v-if="item.status==1">
  97. 下架
  98. </view>
  99. <view class="" @click="Undered(item)" v-else>
  100. 上架
  101. </view>
  102. </view>
  103. </view>
  104. </view>
  105. </view>
  106. </view>
  107. <!-- 批量按钮 -->
  108. <view class="btn-btn" v-if="Selected==true">
  109. <view class="bottom-btn">
  110. <view class="left">
  111. <view class="image">
  112. <!-- <image
  113. :src="isSelect?'https://i.ringzle.com/file/20240228/c741a340e19642c59473e6f4a6d2f4be.png':'https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png'">
  114. </image> -->
  115. <image
  116. :src="selectedTags.length>0?'https://i.ringzle.com/file/20240228/c741a340e19642c59473e6f4a6d2f4be.png':'https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png'">
  117. </image>
  118. </view>
  119. <view class="text">
  120. 已选:{{selectedTags.length}}
  121. </view>
  122. </view>
  123. <view class="right">
  124. <view class="right-btn" @click="piliangxiajia()">
  125. <!-- 批量下架 -->
  126. {{fromData.status==1?'批量下架':'批量上架'}}
  127. </view>
  128. <view class="right-btn" @click="Pricinged()">
  129. 批量删除
  130. </view>
  131. </view>
  132. </view>
  133. </view>
  134. <!-- 新增按钮 -->
  135. <view class="btn-btn" @click="addType()" v-else>
  136. <view class="btn">
  137. 添加商品
  138. </view>
  139. </view>
  140. <u-popup :show="showPricing" @close="close" :round="30">
  141. <view class="pop-pop">
  142. <view class="hander-one">
  143. <view class="image">
  144. <image src="https://i.ringzle.com/file/20240317/fdb4de4c4413429bb5a98b3f6c2bd856.png" mode="">
  145. </image>
  146. </view>
  147. <view class="text">
  148. <view class="text1">
  149. 删除选中的商品
  150. </view>
  151. <view class="text2">
  152. 删除后的商品不可在前台继续售卖,是否继续
  153. </view>
  154. </view>
  155. </view>
  156. <view class="hander-two">
  157. <view class="pop-btn-del" @click="showPricing=false">
  158. 取消
  159. </view>
  160. <view class="pop-btn-add" @click="GoOndel()">
  161. 继续提交
  162. </view>
  163. </view>
  164. </view>
  165. </u-popup>
  166. <u-popup :show="showPricingUnder" @close="close" :round="30">
  167. <view class="pop-pop">
  168. <view class="hander-one">
  169. <view class="image">
  170. <image src="https://i.ringzle.com/file/20240317/fdb4de4c4413429bb5a98b3f6c2bd856.png" mode="">
  171. </image>
  172. </view>
  173. <view class="text">
  174. <view class="text1" v-if="Shelves==false">
  175. 下架选中的商品
  176. </view>
  177. <view class="text1" v-else>
  178. 上架选中的商品
  179. </view>
  180. <view class="text2" v-if="Shelves==false">
  181. 下架后商品不可在前台继续售卖,是否继续?
  182. </view>
  183. <view class="text2" v-else>
  184. 确定上架售卖吗?是否继续?
  185. </view>
  186. </view>
  187. </view>
  188. <view class="hander-two">
  189. <view class="pop-btn-del" @click="showPricingUnder=false">
  190. 取消
  191. </view>
  192. <view class="pop-btn-add" @click="GoOnUnder()">
  193. 继续提交
  194. </view>
  195. </view>
  196. </view>
  197. </u-popup>
  198. <u-popup :show="showPricinggaijia" @close="close" :round="10">
  199. <view class="gaijiadiv">
  200. <view class="toubu">
  201. 改价格
  202. <view class="toubux" @click="closegaijia">
  203. <u-icon name="close" color="#000000" size="40"></u-icon>
  204. </view>
  205. </view>
  206. <view class="jiainput">
  207. <u--input type='number' v-model="newprice" placeholder="请输入价格" border="surround"
  208. clearable></u--input>
  209. </view>
  210. <view class="queding">
  211. <view class="queding1" @click="showPricinggaijia=false">
  212. 取消
  213. </view>
  214. <view class="queding2" @click="quedingjiae">
  215. 确定
  216. </view>
  217. </view>
  218. </view>
  219. </u-popup>
  220. <view class="mainContain">
  221. <!-- <view class="nodata" v-if='dataList.length==0'>
  222. <NoData></NoData>
  223. </view> -->
  224. </view>
  225. </view>
  226. </template>
  227. <script>
  228. import TopTabs from '@/components/TopTabs/topTabs.vue';
  229. // import NoData from '../../components/NoData/index.vue';
  230. export default {
  231. components: {
  232. TopTabs,
  233. // NoData
  234. },
  235. data() {
  236. return {
  237. h: uni.getSystemInfoSync().windowHeight,
  238. mt: uni.getSystemInfoSync().statusBarHeight + 44,
  239. current: 0,
  240. tabList: [{
  241. name: '出售中'
  242. },
  243. {
  244. name: '待上架'
  245. },
  246. ],
  247. homestayId: uni.getStorageSync('homestayId') || 0,
  248. roomType: [],
  249. selectedTags: [],
  250. isSelect: false,
  251. Selected: false,
  252. showPricing: false,
  253. showPricingUnder: false,
  254. Shelves: false,
  255. areaShow: false,
  256. list1: [{
  257. name: '创建时间'
  258. },
  259. {
  260. name: '上架时间'
  261. },
  262. {
  263. name: '价格从高到低'
  264. },
  265. {
  266. name: '价格从低到高'
  267. },
  268. // {
  269. // name: '销量从高到低'
  270. // },
  271. ],
  272. areaShowIndex: null,
  273. fromData: {
  274. homestayId: uni.getStorageSync('homestayId'),
  275. limit: 10,
  276. page: 1,
  277. order: '',
  278. orderField: "",
  279. status: 1
  280. },
  281. ids: [],
  282. obj: {},
  283. showPricinggaijia: false,
  284. newprice: '',
  285. id: '',
  286. from: {}
  287. }
  288. },
  289. onLoad(option) {
  290. // if (uni.getStorageSync('merchantType') == 4) {
  291. this.getRepast()
  292. // } else {
  293. // }
  294. },
  295. methods: {
  296. Pricinged() {
  297. this.$api.del('/merchant/hotel/repast', this.ids).then(res => {
  298. if (res.data.code == 0) {
  299. this.getRepast()
  300. this.showPricing = false
  301. this.ids = []
  302. } else this.$showToast(res.data.msg);
  303. })
  304. },
  305. piliangxiajia() {
  306. this.$api.post('/merchant/hotel/repast/batchPutAway', this.from).then(res => {
  307. this.selectedTags = [];
  308. this.Selected = false;
  309. this.getRepast(); //获取商品列表
  310. })
  311. },
  312. quedingjiae() {
  313. let obj = {
  314. price: this.newprice,
  315. id: this.id
  316. }
  317. this.$api.put('/merchant/hotel/repast', obj).then(res => {
  318. this.getRepast(); //获取商品列表
  319. this.showPricinggaijia = false;
  320. })
  321. },
  322. closegaijia() {
  323. this.showPricing = false;
  324. this.newprice = '';
  325. },
  326. gaijia(e, i) {
  327. this.showPricinggaijia = true;
  328. this.id = e.id
  329. },
  330. selectPerson(e, i) {
  331. if (this.selectedTags.includes(e)) {
  332. this.selectedTags = this.selectedTags.filter(t => t !== e);
  333. this.ids.splice(i, 1)
  334. } else {
  335. this.selectedTags.push(e);
  336. this.ids.push(e.id)
  337. this.from = {
  338. ids: this.ids,
  339. status: e.status == 1 ? 0 : 1
  340. }
  341. }
  342. },
  343. // 添加商品
  344. addType() {
  345. uni.navigateTo({
  346. url: '/pages/HotelMerchandise/addCommodity'
  347. })
  348. },
  349. close() {
  350. this.showPricing = false
  351. this.showPricingUnder = false
  352. this.showPricinggaijia = false
  353. },
  354. // 删除商品
  355. del(item) {
  356. // let ids = []
  357. this.ids.push(item.id)
  358. this.showPricing = true
  359. },
  360. GoOndel() {
  361. this.$api.del('/merchant/hotel/repast', this.ids).then(res => {
  362. if (res.data.code == 0) {
  363. this.getRepast()
  364. this.showPricing = false
  365. this.ids = []
  366. } else this.$showToast(res.data.msg);
  367. })
  368. },
  369. // 上下架商品
  370. Undered(item) {
  371. this.ids.push(item.id)
  372. this.showPricingUnder = true
  373. if (item.status == 1) {
  374. this.obj = {
  375. ids: this.ids,
  376. status: 0
  377. }
  378. } else {
  379. this.Shelves = true
  380. this.obj = {
  381. ids: this.ids,
  382. status: 1
  383. }
  384. }
  385. },
  386. GoOnUnder() {
  387. this.$api.post('/merchant/hotel/repast/batchPutAway', this.obj).then(res => {
  388. if (res.data.code == 0) {
  389. this.getRepast()
  390. this.showPricingUnder = false
  391. this.ids = []
  392. } else this.$showToast(res.data.msg);
  393. })
  394. },
  395. getRepast() {
  396. this.Shelves = false
  397. this.$api.get('/merchant/hotel/repast/page', this.fromData).then(res => {
  398. this.roomType = res.data.data.list
  399. })
  400. },
  401. // 区域筛选
  402. clickareaShow(e, i) {
  403. this.areaShowIndex = i
  404. },
  405. // 上架时间
  406. areaShowed() {
  407. this.areaShow = !this.areaShow
  408. },
  409. changeTab1(index) {
  410. this.current = index;
  411. if (index == 0) {
  412. this.fromData.status = 1
  413. this.getRepast()
  414. } else {
  415. this.fromData.status = 0
  416. this.getRepast()
  417. }
  418. },
  419. // 批量显示
  420. showList() {
  421. this.Selected = !this.Selected
  422. },
  423. }
  424. }
  425. </script>
  426. <style lang="scss" scoped>
  427. .queding {
  428. width: 750rpx;
  429. height: 140rpx;
  430. display: flex;
  431. justify-content: space-around;
  432. align-items: center;
  433. .queding1 {
  434. width: 330rpx;
  435. height: 88rpx;
  436. background: #F0F2F5;
  437. border-radius: 44rpx;
  438. font-family: PingFangSC, PingFang SC;
  439. font-weight: 400;
  440. font-size: 32rpx;
  441. color: #333333;
  442. line-height: 88rpx;
  443. text-align: center;
  444. font-style: normal;
  445. }
  446. .queding2 {
  447. width: 330rpx;
  448. height: 88rpx;
  449. background: #007A69;
  450. border-radius: 44rpx;
  451. font-family: PingFangSC, PingFang SC;
  452. font-weight: 400;
  453. font-size: 32rpx;
  454. color: #FFFFFF;
  455. line-height: 88rpx;
  456. text-align: center;
  457. font-style: normal;
  458. }
  459. }
  460. .jiainput {
  461. width: 690rpx;
  462. height: 100rpx;
  463. margin: 0 auto;
  464. }
  465. .gaijiadiv {
  466. width: 750rpx;
  467. height: 950rpx;
  468. .toubu {
  469. width: 750rpx;
  470. height: 110rpx;
  471. font-family: PingFang-SC, PingFang-SC;
  472. font-weight: bold;
  473. font-size: 36rpx;
  474. color: #333333;
  475. line-height: 110rpx;
  476. text-align: center;
  477. font-style: normal;
  478. position: relative;
  479. .toubux {
  480. position: absolute;
  481. top: 33rpx;
  482. right: 30rpx;
  483. }
  484. }
  485. }
  486. .Doublactive {
  487. // background-color: #F0F7F6 !important;
  488. color: #007A69 !important;
  489. // border: 1px solid #007A69 !important;
  490. }
  491. .contented {
  492. width: 100%;
  493. padding: 0 24rpx;
  494. box-sizing: border-box;
  495. position: relative;
  496. }
  497. .custom_popup {
  498. width: 100%;
  499. height: 100%;
  500. background: rgba(0, 0, 0, .4);
  501. top: 0;
  502. left: 0;
  503. position: absolute;
  504. z-index: 999;
  505. .types {
  506. width: 100%;
  507. padding: 30rpx 30rpx 56rpx;
  508. box-sizing: border-box;
  509. background: #FFFFFF;
  510. .pricequjian {
  511. width: 100%;
  512. .contentpeice {
  513. width: 100%;
  514. display: flex;
  515. justify-content: space-between;
  516. margin: 15rpx 0;
  517. .title {
  518. font-weight: Regular;
  519. font-size: 28rpx;
  520. color: #333333;
  521. }
  522. .image {
  523. width: 28rpx;
  524. height: 20rpx;
  525. image {
  526. width: 100%;
  527. height: 100%;
  528. }
  529. }
  530. }
  531. }
  532. }
  533. }
  534. .pages {
  535. background: #F5F8FA;
  536. box-sizing: border-box;
  537. .tb {
  538. width: 100%;
  539. top: 0;
  540. left: 0;
  541. z-index: 999;
  542. .searchBoxParent {
  543. width: 100%;
  544. background: #fff;
  545. padding: 20rpx 24rpx 6rpx;
  546. box-sizing: border-box;
  547. .searchBox {
  548. width: 100%;
  549. background-color: #fff;
  550. }
  551. }
  552. .tabs {
  553. background: #fff;
  554. padding: 26rpx 0;
  555. display: flex;
  556. align-items: center;
  557. width: 100%;
  558. &>view {
  559. width: 25%;
  560. font-size: 28rpx;
  561. font-family: PingFangSC-Regular, PingFang SC;
  562. font-weight: 400;
  563. color: black;
  564. line-height: 40rpx;
  565. position: relative;
  566. text-align: center;
  567. }
  568. .active {
  569. font-size: 32rpx;
  570. font-family: PingFang-SC-Bold, PingFang-SC;
  571. font-weight: bold;
  572. color: black;
  573. line-height: 45rpx;
  574. }
  575. .active::after {
  576. position: absolute;
  577. content: '';
  578. width: 50rpx;
  579. height: 8rpx;
  580. background: #007A69;
  581. bottom: -26rpx;
  582. left: 60%;
  583. margin-left: -42rpx;
  584. }
  585. }
  586. }
  587. .green {}
  588. .mainContain {
  589. display: flex;
  590. flex-direction: column;
  591. padding: 0 20rpx;
  592. .nodata {
  593. background: white;
  594. }
  595. .card {
  596. background: #fff;
  597. border-radius: 16rpx;
  598. margin: 20rpx 0;
  599. padding: 20rpx;
  600. .header {
  601. display: flex;
  602. justify-content: space-between;
  603. border-bottom: 1px #f3f3f3 solid;
  604. padding: 20rpx;
  605. .red {
  606. color: indianred;
  607. }
  608. .green {
  609. color: #999999;
  610. }
  611. .blue {
  612. color: #1372FF;
  613. }
  614. .grey {
  615. color: #4C5F76;
  616. }
  617. .orange {
  618. color: #FF9100;
  619. }
  620. }
  621. .mainContent {
  622. // border-bottom: 1px #f3f3f3 solid;
  623. display: flex;
  624. padding: 20rpx 0;
  625. // justify-content: space-evenly;
  626. .image {
  627. background-repeat: no-repeat;
  628. background-size: cover;
  629. width: 198rpx;
  630. height: 180rpx;
  631. border-radius: 16rpx;
  632. }
  633. .middle {
  634. padding-top: 16rpx;
  635. color: #777777;
  636. // display: flex;
  637. // flex-direction: column;
  638. // justify-content: space-between;
  639. margin-left: 25rpx;
  640. width: 100%;
  641. .title {
  642. font-weight: 700;
  643. font-size: 32rpx;
  644. color: black;
  645. }
  646. .info {
  647. padding-top: 30rpx;
  648. color: #777777;
  649. // display: flex;
  650. // flex-direction: column;
  651. &>span {
  652. margin-top: 10rpx;
  653. }
  654. }
  655. }
  656. .price {
  657. color: red;
  658. text-align: center;
  659. height: 100%;
  660. align-items: center;
  661. align-self: center;
  662. font-size: 29rpx;
  663. font-weight: 700;
  664. }
  665. }
  666. .bottom {
  667. // padding: 30rpx 20rpx;
  668. display: flex;
  669. justify-content: flex-end;
  670. .detail {
  671. // border: 1rpx solid darkgrey;
  672. border-radius: 16rpx;
  673. color: darkgrey;
  674. padding: 13rpx 34rpx;
  675. background-color: #F6F6F6;
  676. font-size: 26rpx;
  677. color: #333333;
  678. font-weight: Regular;
  679. }
  680. .del {
  681. border-radius: 16rpx;
  682. color: darkgrey;
  683. padding: 13rpx 34rpx;
  684. background-color: #007A69;
  685. font-size: 26rpx;
  686. color: #fff;
  687. font-weight: Regular;
  688. }
  689. }
  690. }
  691. }
  692. }
  693. .u-input__content {
  694. margin-top: 22rpx !important;
  695. }
  696. .uicon-arrow-right,
  697. .uicon-close-circle-fill {
  698. margin-top: 32rpx !important;
  699. margin-right: 20rpx !important;
  700. }
  701. .pop-pop {
  702. height: 30vh;
  703. padding: 46rpx 20rpx 0;
  704. border-radius: 16rpx 16rpx 0 0;
  705. .hander-one {
  706. // display: flex;
  707. // justify-content: space-between;
  708. text-align: center;
  709. .image {
  710. margin: 0 auto;
  711. width: 64rpx;
  712. height: 64rpx;
  713. image {
  714. width: 100%;
  715. height: 100%;
  716. }
  717. }
  718. .text {
  719. .text1 {
  720. margin-top: 24rpx;
  721. font-size: 32rpx;
  722. color: #111111;
  723. font-weight: bold;
  724. }
  725. .text2 {
  726. font-size: 28rpx;
  727. color: #999999;
  728. font-weight: Regular;
  729. margin: 23rpx 0 64rpx;
  730. }
  731. }
  732. }
  733. .hander-two {
  734. display: flex;
  735. justify-content: space-between;
  736. align-items: center;
  737. margin: 30rpx 0;
  738. .pop-btn-del {
  739. margin: 0 15rpx;
  740. padding: 22rpx 136rpx;
  741. font-size: 32rpx;
  742. color: #111111;
  743. font-weight: Regular;
  744. background-color: #F0F2F5;
  745. border-radius: 50rpx;
  746. }
  747. .pop-btn-add {
  748. border-radius: 50rpx;
  749. margin: 0 15rpx;
  750. background-color: #1372FF;
  751. padding: 22rpx 100rpx;
  752. font-size: 32rpx;
  753. color: #FFFFFF;
  754. font-weight: Regular;
  755. }
  756. }
  757. .hander-three {
  758. display: flex;
  759. border: 1rpx solid #CCCCCC;
  760. border-radius: 16rpx;
  761. justify-content: space-between;
  762. height: 102rpx;
  763. line-height: 102rpx;
  764. .hander-three-text {
  765. width: 200rpx;
  766. text-align: left;
  767. display: flex;
  768. justify-content: space-between;
  769. margin: 0 20rpx;
  770. }
  771. .hander-three-input {
  772. width: 55%;
  773. }
  774. .hander-three-icon {
  775. height: 102rpx;
  776. line-height: 102rpx;
  777. }
  778. }
  779. .hander-four {
  780. margin-top: 30rpx;
  781. display: flex;
  782. border-radius: 16rpx;
  783. justify-content: space-between;
  784. border: 1rpx solid #CCCCCC;
  785. height: 102rpx;
  786. line-height: 102rpx;
  787. .hander-three-text {
  788. width: 200rpx;
  789. text-align: center;
  790. display: flex;
  791. justify-content: space-between;
  792. margin: 0 20rpx;
  793. }
  794. .hander-three-input {
  795. width: 55%;
  796. }
  797. .hander-three-icon {
  798. height: 102rpx;
  799. line-height: 102rpx;
  800. }
  801. }
  802. }
  803. .page {
  804. background: #F3F4F4;
  805. padding-bottom: 260rpx;
  806. box-sizing: border-box;
  807. overflow-y: auto;
  808. overflow-x: auto;
  809. }
  810. .typeNum {
  811. // width: 100%;
  812. height: 73rpx;
  813. display: flex;
  814. justify-content: space-between;
  815. padding: 23rpx 24rpx;
  816. align-items: center;
  817. .left {
  818. display: flex;
  819. align-items: center;
  820. .active {
  821. color: #007A69;
  822. }
  823. }
  824. .right {
  825. display: flex;
  826. align-items: center;
  827. .image {
  828. margin: 0 10rpx;
  829. width: 30rpx;
  830. height: 30rpx;
  831. image {
  832. width: 100%;
  833. height: 100%;
  834. }
  835. }
  836. .text {
  837. font-size: 28rpx;
  838. font-weight: Regular;
  839. color: #333333;
  840. }
  841. }
  842. }
  843. .type {
  844. margin: 0 auto;
  845. border-radius: 10rpx 10rpx 10rpx 10rpx;
  846. width: 86%;
  847. // height: 114rpx;
  848. background-color: #fff;
  849. padding: 30rpx;
  850. margin-bottom: 20rpx;
  851. display: flex;
  852. .left {
  853. height: 114rpx;
  854. line-height: 200rpx;
  855. margin-right: 20rpx;
  856. .image {
  857. margin: 0 10rpx;
  858. width: 30rpx;
  859. height: 30rpx;
  860. image {
  861. width: 100%;
  862. height: 100%;
  863. }
  864. }
  865. }
  866. .right {
  867. width: 100%;
  868. display: flex;
  869. .right-left {
  870. width: 172rpx;
  871. height: 172rpx;
  872. border-radius: 16rpx;
  873. margin-right: 22rpx;
  874. image {
  875. width: 100%;
  876. height: 100%;
  877. border-radius: 16rpx;
  878. }
  879. }
  880. .right-right {}
  881. }
  882. .type-btn {
  883. width: 100%;
  884. display: flex;
  885. justify-content: space-between;
  886. .type-btn-left {
  887. width: 50rpx;
  888. }
  889. .type-btn-right {
  890. display: flex;
  891. view {
  892. padding: 15rpx 23rpx;
  893. background-color: #F6F6F6;
  894. font-size: 24rpx;
  895. color: #333;
  896. font-weight: Regular;
  897. margin-right: 20rpx;
  898. border-radius: 50rpx;
  899. }
  900. }
  901. }
  902. }
  903. .top {
  904. display: flex;
  905. justify-content: space-between;
  906. }
  907. .under {
  908. margin-top: 20rpx;
  909. // display: flex;
  910. // justify-content: space-between;
  911. }
  912. .btn-btn {
  913. width: 100%;
  914. height: 136rpx;
  915. background-color: #fff;
  916. position: fixed;
  917. bottom: 0;
  918. padding: 30rpx 0 0;
  919. // margin: 0 auto;
  920. z-index: 9;
  921. // margin-top: 30rpx;
  922. // margin-left: 30rpx;
  923. .bottom-btn {
  924. display: flex;
  925. justify-content: space-between;
  926. margin: 0 24rpx;
  927. .left {
  928. width: 25%;
  929. display: flex;
  930. align-items: center;
  931. .image {
  932. width: 38rpx;
  933. height: 38rpx;
  934. margin: 0 10rpx;
  935. image {
  936. width: 100%;
  937. height: 100%;
  938. }
  939. }
  940. }
  941. .right {
  942. width: 75%;
  943. display: flex;
  944. justify-content: space-evenly;
  945. .right-btn {
  946. width: 148rpx;
  947. height: 80rpx;
  948. line-height: 80rpx;
  949. background-color: #1372FF;
  950. border-radius: 16rpx;
  951. font-size: 26rpx;
  952. color: #fff;
  953. font-weight: Regular;
  954. text-align: center;
  955. }
  956. }
  957. }
  958. }
  959. .btn {
  960. margin: 0 auto;
  961. width: 690rpx;
  962. height: 96rpx;
  963. background-color: #1372FF;
  964. color: #fff;
  965. display: flex;
  966. justify-content: center;
  967. align-items: center;
  968. font-size: 34rpx;
  969. border-radius: 48rpx;
  970. }
  971. </style>