index.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850
  1. <template>
  2. <view>
  3. <view class='shoppingCart copy-data'>
  4. <view class='nav acea-row row-between-wrapper'>
  5. <view>订单号:<text class='num'>{{ list.order_id }}</text></view>
  6. <view v-if="lets != 1" class='administrate acea-row row-center-wrapper' @click="switchs">切换</view>
  7. </view>
  8. <view class="content">
  9. <view class="list_top">共<span class="bluefont">{{ list.total_num }}</span>件<span class="garyfont">(已核销 {{ list.writeoff_count }} 件)</span>
  10. </view>
  11. <view class='list'>
  12. <view>
  13. <block v-for="(item,index) in list.cart_info" :key="index">
  14. <view v-if="item.is_writeoff == 1" class='item acea-row row-between-wrapper writeoff'>
  15. <div class="xuan q" type="checkbox" v-model="checkModel" :value="item.id">
  16. <view class="iconfont icon-duihao dui"></view>
  17. </div>
  18. <view class='picTxt acea-row row-between-wrapper'>
  19. <view class='pictrue'>
  20. <image :src="item.cart_info.productInfo.attrInfo?item.cart_info.productInfo.attrInfo.image:item.cart_info.productInfo.image" mode=""></image>
  21. </view>
  22. <view class='text'>
  23. <view class="title">
  24. <view class='line1 top' :class="item.attrStatus?'':'reColor'">
  25. {{ item.cart_info.productInfo.store_name }}
  26. </view>
  27. <view v-if="item.is_writeoff == 1" class="txt">已核销{{parseInt(lists.cart_info[index].cart_num-lists.cart_info[index].surplus_num)}}件</view>
  28. </view>
  29. <view class='infor line1'>
  30. 属性:{{ item.cart_info.productInfo.attrInfo.suk }}</view>
  31. <view class='money he'>
  32. <view>¥{{ item.cart_info.productInfo.attrInfo?item.cart_info.productInfo.attrInfo.price:item.cart_info.productInfo.price }}</view>
  33. <view v-if="item.is_writeoff == 1" class="txt">
  34. <view class='carnum acea-row row-center-wrapper'>
  35. <view class="reduce">-</view>
  36. <view class='num0'>0</view>
  37. <view class="plus">+</view>
  38. </view>
  39. </view>
  40. </view>
  41. </view>
  42. </view>
  43. </view>
  44. <view v-else class='item acea-row row-between-wrapper'>
  45. <!-- <input type="checkbox" v-model="checkModel" :value="item.id" :value="(item.id).toString()" :checked="item.checked" color="#007AFF"/> -->
  46. <div class="xuan" :class="item.checked?'q':''" type="checkbox" v-model="checkModel" :value="item.id" @click="dan(item.cart_id,index)">
  47. <view :class="item.checked?'iconfont icon-duihao dui':''"></view>
  48. </div>
  49. <view class='picTxt acea-row row-between-wrapper'>
  50. <view class='pictrue'>
  51. <image :src="item.cart_info.productInfo.attrInfo?item.cart_info.productInfo.attrInfo.image:item.cart_info.productInfo.image" mode=""></image>
  52. </view>
  53. <view class='text'>
  54. <view class="title">
  55. <view class='line1' :class="item.attrStatus?'':'reColor'">
  56. {{ item.cart_info.productInfo.store_name }}
  57. </view>
  58. <view v-if="item.is_writeoff == 1" class="txt">已核销</view>
  59. <view v-if="item.is_writeoff == 0 && lists.cart_info[index].surplus_num == lists.cart_info[index].cart_num" class="txt bluecol">未核销</view>
  60. <view v-if="item.is_writeoff == 0 && lists.cart_info[index].surplus_num != lists.cart_info[index].cart_num" class="txt orangcol">已核销{{parseInt(lists.cart_info[index].cart_num-lists.cart_info[index].surplus_num)}}件</view>
  61. </view>
  62. <view class='infor line1'>
  63. 属性:{{ item.cart_info.productInfo.attrInfo.suk }}</view>
  64. <view class='money he'>
  65. <view>¥{{ item.cart_info.productInfo.attrInfo?item.cart_info.productInfo.attrInfo.price:item.cart_info.productInfo.price }}</view>
  66. <view v-if="item.is_writeoff == 1" class="txt">
  67. <view class='carnum acea-row row-center-wrapper'>
  68. <view class="reduce">-</view>
  69. <view class='num0'>0</view>
  70. <view class="plus">+</view>
  71. </view>
  72. </view>
  73. <view v-else class="txt">
  74. <view class='carnum acea-row row-center-wrapper'>
  75. <view v-if="item.surplus_num == 1" class="reduce bggary">-</view>
  76. <view v-else class="reduce" @click.stop='subCart(item,index)'>-</view>
  77. <!-- <view class='nums'>{{parseInt(item.surplus_num)}}</view> -->
  78. <input class="nums" type="number" v-model="item.surplus_num"
  79. data-name="surplus_num"
  80. @input="bindCode($event,item,index)"></input>
  81. <view v-if="item.surplus_num == item.surplus_num+nums[index].num" class="plus bggary">+</view>
  82. <view v-else class="plus" @click.stop='addCart(item,index)'>+</view>
  83. </view>
  84. </view>
  85. </view>
  86. </view>
  87. </view>
  88. </view>
  89. </block>
  90. </view>
  91. </view>
  92. </view>
  93. <view class='footer acea-row row-between-wrapper'>
  94. <view>
  95. <view style="display: flex;" @change="checkboxAllChange">
  96. <!-- <input type="checkbox" @click="checkboxAllChange" v-model="isAllSelect"> -->
  97. <div class="xuan" :class="checked?'q':''" @click="checkAll" v-model="checked">
  98. <view class="iconfont icon-duihao dui"></view>
  99. </div>
  100. <!-- <div v-if="lengt == 0" class="xuan noxuan ">
  101. <view class="iconfont icon-jingyanzhi dui"></view>
  102. </div> -->
  103. <text class='checkAll'>全选</text>
  104. </view>
  105. </view>
  106. <view >
  107. <button class='money' type="primary" @click="verification">立即核销</button>
  108. </view>
  109. </view>
  110. </view>
  111. <view v-if="box">
  112. <view class="box">
  113. <view class="small_box">
  114. <image src="../../../static/decorate.png" mode=""></image>
  115. <view class="content">
  116. <view class="font">核销成功</view>
  117. <view v-if="list.total_num == parseInt(list.writeoff_count)+writeOffNum" class="small_font">当前订单已完成核销</view>
  118. <view v-else class="small_font">当前订单仍有未核销商品</view>
  119. </view>
  120. <view v-if="lets == 1 && list.total_num == parseInt(list.writeoff_count)+writeOffNum" class="btn" @click="ok(1)">好的</view>
  121. <view v-if="list.total_num != parseInt(list.writeoff_count)+writeOffNum" class="btn" @click="ok(0)">继续核销其他商品</view>
  122. <navigator v-if="lets > 1 && list.total_num == parseInt(list.writeoff_count)+writeOffNum" :url='"/pages/admin/distribution/scanning/index?code="+attr.code' open-type="redirect" hover-class='none' class="btn">核销其他订单</navigator>
  123. <navigator v-if="lets > 1 && list.total_num != parseInt(list.writeoff_count)+writeOffNum" :url='"/pages/admin/distribution/scanning/index?code="+attr.code' hover-class='none' open-type="redirect" class="btn_no">返回列表</navigator>
  124. <navigator v-if="(lets > 1 && list.total_num == parseInt(list.writeoff_count)+writeOffNum)||(lets==1&&list.total_num != parseInt(list.writeoff_count)+writeOffNum)" url="/pages/admin/distribution/index" hover-class='none' open-type="redirect" class="btn_no">返回首页</navigator>
  125. </view>
  126. </view>
  127. </view>
  128. <writeOffSwitching ref="writeOff" :attr="attr" :isShow='1' :iSplus='1' :iScart='1' @dataId = "onDataId" @myevent="onMyEvent" id='product-window'></writeOffSwitching>
  129. </view>
  130. </template>
  131. <script>
  132. import writeOffSwitching from '../../../components/writeOffSwitching/index.vue';
  133. import { orderCartInfo, orderWriteoff } from '@/api/admin'
  134. export default {
  135. components: {
  136. writeOffSwitching
  137. },
  138. data() {
  139. return {
  140. nums:[],
  141. newList:[],
  142. reduce_show:-1,
  143. plus_show:-1,
  144. ids: [],//选定需要核销的id
  145. lets: 0, //判断订单的数量
  146. listlet: 0, //判断订单商品的数量
  147. attr: { //切换组件传值
  148. cartAttr: false,
  149. id: [],
  150. code: '',
  151. type: 0
  152. },
  153. id: 0, //订单ID
  154. list: [],
  155. lists: [],
  156. lengt: 0,
  157. box: false,
  158. checked: false,
  159. checkModel: [],
  160. isAllSelect: false,
  161. data:[{id:'1',value:'aaa'},{id:'2',value:'bbb'},{id:'3',value:'ccc'}],
  162. writeOffNum:0 //每次核销商品数量
  163. };
  164. },
  165. watch:{
  166.   checkModel(){
  167.     if(this.lengt==this.checkModel.length){
  168.       this.checked=true;
  169.     }else{
  170.       this.checked=false;
  171.     }
  172.   }
  173. },
  174. onLoad: function(options) {
  175. this.id = options.id
  176. this.attr.code = options.code
  177. this.lets = options.let
  178. this.getList(this.id)
  179. },
  180. onShow: function() {
  181. },
  182. methods: {
  183. bindCode: function(e,item,index) {
  184. let value = e.target.value
  185. if(item.surplus_num == '' || item.surplus_num == undefined || item.surplus_num<1){
  186. this.list.cart_info[index].surplus_num = 1;
  187. }
  188. if(value>=item.cart_num){
  189. this.$nextTick(function(){
  190. this.list.cart_info[index].surplus_num = item.cart_num;
  191. })
  192. }
  193. this.$nextTick(function(){
  194. this.nums[index].num = parseInt(item.surplus_num) - parseInt(item.cart_num)
  195. })
  196. },
  197. //处理每一条数据的最大值
  198. num(){
  199. for (let index = 0; index < this.lists.cart_info.length; index++) {
  200. this.nums.push({ num: 0 });
  201. }
  202. },
  203. subCart(item,index){
  204. if(item.surplus_num == 1) {
  205. this.reduce_show = index;
  206. }else{
  207. this.nums[index].num --
  208. item.surplus_num--
  209. }
  210. },
  211. addCart(item,index){
  212. if(item.surplus_num == item.surplus_num+this.nums[index].num) {
  213. this.plus_show = index;
  214. }
  215. else{
  216. item.surplus_num++
  217. this.nums[index].num ++
  218. }
  219. },
  220. checkAll(){
  221. var items = this.list.cart_info,
  222. data = [];
  223.     if(this.checked){
  224.       this.checkModel=[];
  225. for (var i = 0, lenI = this.list.cart_info.length; i < lenI; ++i) {
  226. const item = items[i]
  227. this.$set(item,'checked',false)
  228. }
  229.     }else{
  230. this.checkModel=[];
  231. for (var i = 0, lenI = this.list.cart_info.length; i < lenI; ++i) {
  232. const item = items[i]
  233. this.$set(item,'checked',true)
  234. if(item.is_writeoff == 1){
  235. this.checkModel =this.checkModel.filter(item => item != item.cart_id)
  236. }else{
  237. this.checkModel.push(item.cart_id)
  238. }
  239. }
  240. this.lengt = this.checkModel.length
  241.     }
  242.   },
  243. dan(id,index){
  244. if(this.checkModel.indexOf(id) == -1){
  245. this.$set(this.list.cart_info[index],'checked',true)
  246. this.checkModel.push(id)
  247. }
  248. else{
  249. this.$set(this.list.cart_info[index],'checked',false)
  250. this.checkModel =this.checkModel.filter(item => item != id)
  251. }
  252. },
  253. getList:function(id) {
  254. orderCartInfo(2,{oid:id}).then(res=>{
  255. this.list = res.data
  256. this.lists = JSON.parse(JSON.stringify(res.data))
  257. this.listlet = res.data.cart_info.length
  258. this.$set(this.attr, 'id',this.list.id);
  259. this.checkAll()
  260. this.num()
  261. })
  262. },
  263. onDataId: function(id) {
  264. this.nums.forEach((item)=>{
  265. item.num = 0
  266. })
  267. this.id = id;
  268. this.getList(id)
  269. },
  270. switchs(){
  271. this.attr.cartAttr = true;
  272. this.$refs.writeOff.getList(2)
  273. },
  274. onMyEvent(){
  275. this.attr.cartAttr = false;
  276. },
  277. verification(){
  278. let that = this
  279. let obj = {};
  280. // 将数组转化为对象
  281. for (let key in this.checkModel) {
  282. obj[key] = this.checkModel[key];
  283. };
  284. let newObj = Object.keys(obj).map(val => ({
  285. cart_id: obj[val],
  286. }));
  287. //处理列表内对应的核销数的数值
  288. for(var i =0 ;i<newObj.length;i++){
  289. for(var j = 0; j< this.list.cart_info.length;j++){
  290. if(newObj[i].cart_id == this.list.cart_info[j].cart_id){
  291. newObj[i].cart_num= this.list.cart_info[j].surplus_num;
  292. }
  293. }
  294. }
  295. this.newList = newObj
  296. if(that.checkModel.length == 0){
  297. that.$util.Tips({
  298. title: '请选择商品'
  299. });
  300. }else{
  301. uni.showLoading({
  302. title: '加载中',
  303. });
  304. let num = 0;
  305. newObj.forEach((item)=>{
  306. num = num+ parseInt(item.cart_num)
  307. })
  308. this.writeOffNum = num;
  309. setTimeout(function () {
  310. orderWriteoff(2,{oid:that.id,cart_ids:that.newList}).then(res=>{
  311. uni.hideLoading();
  312. that.box = true
  313. }).catch(err=>{
  314. that.$util.Tips({
  315. title: err
  316. });
  317. uni.hideLoading();
  318. })
  319. }, 1000);
  320. }
  321. },
  322. // 所有订单核销完成
  323. ok(type){
  324. this.box = false
  325. this.nums.forEach((item)=>{
  326. item.num = 0
  327. })
  328. this.getList(this.id)
  329. if(type){
  330. uni.redirectTo({
  331. url:'/pages/admin/distribution/index'
  332. })
  333. }
  334. }
  335. }
  336. }
  337. </script>
  338. <style scoped lang="scss">
  339. /deep/checkbox .uni-checkbox-input.uni-checkbox-input-checked{
  340. border: 1px solid #007aff !important;
  341. background-color: #007aff !important;
  342. }
  343. .bggary{
  344. background-color: #dfdfdf;
  345. }
  346. .page-footer {
  347. position: fixed;
  348. bottom: 0;
  349. z-index: 30;
  350. display: flex;
  351. align-items: center;
  352. justify-content: space-around;
  353. width: 100%;
  354. height: calc(98upx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  355. height: calc(98upx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  356. box-sizing: border-box;
  357. border-top: solid 1upx #F3F3F3;
  358. background-color: #fff;
  359. box-shadow: 0px 0px 17upx 1upx rgba(206, 206, 206, 0.32);
  360. padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
  361. padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
  362. .foot-item {
  363. display: flex;
  364. width: max-content;
  365. align-items: center;
  366. justify-content: center;
  367. flex-direction: column;
  368. position: relative;
  369. .count-num {
  370. position: absolute;
  371. display: flex;
  372. justify-content: center;
  373. align-items: center;
  374. width: 40upx;
  375. height: 40upx;
  376. top: 0upx;
  377. right: -15upx;
  378. color: #fff;
  379. font-size: 20upx;
  380. background-color: #FD502F;
  381. border-radius: 50%;
  382. padding: 4upx;
  383. }
  384. }
  385. .foot-item image {
  386. height: 50upx;
  387. width: 50upx;
  388. text-align: center;
  389. margin: 0 auto;
  390. }
  391. .foot-item .txt {
  392. font-size: 24upx;
  393. &.active {}
  394. }
  395. }
  396. .shoppingCart {
  397. /* #ifdef H5 */
  398. // padding-bottom: 0;
  399. // padding-bottom: constant(safe-area-inset-bottom);
  400. // padding-bottom: env(safe-area-inset-bottom);
  401. /* #endif */
  402. }
  403. .shoppingCart .labelNav {
  404. height: 76upx;
  405. padding: 0 30upx;
  406. font-size: 22upx;
  407. color: #8c8c8c;
  408. position: fixed;
  409. left: 0;
  410. width: 100%;
  411. box-sizing: border-box;
  412. background-color: #f5f5f5;
  413. z-index: 5;
  414. top: 0;
  415. }
  416. .shoppingCart .labelNav .item .iconfont {
  417. font-size: 25upx;
  418. margin-right: 10upx;
  419. }
  420. .shoppingCart .nav {
  421. // width: 100%;
  422. background-color: #fff;
  423. margin: 20upx 28upx;
  424. padding: 30upx 24upx;
  425. font-size: 28upx;
  426. color: #282828;
  427. z-index: 5;
  428. border-radius: 12upx;
  429. }
  430. .shoppingCart .nav .num {
  431. margin-left: 12upx;
  432. }
  433. .shoppingCart .nav .administrate {
  434. font-size: 26upx;
  435. color: #282828;
  436. width: 110upx;
  437. height: 46upx;
  438. border-radius: 24upx;
  439. border: 1px solid #CCCCCC;
  440. }
  441. .shoppingCart .noCart {
  442. margin-top: 171upx;
  443. background-color: #fff;
  444. padding-top: 0.1upx;
  445. }
  446. .shoppingCart .noCart .pictrue {
  447. width: 414upx;
  448. height: 336upx;
  449. margin: 78upx auto 56upx auto;
  450. }
  451. .shoppingCart .noCart .pictrue image {
  452. width: 100%;
  453. height: 100%;
  454. }
  455. .shoppingCart .list {
  456. // margin: 20upx 28upx;
  457. }
  458. .shoppingCart .list .item {
  459. padding: 25upx 30upx;
  460. background-color: #fff;
  461. // margin-bottom: 15upx;
  462. }
  463. .shoppingCart .list .item .picTxt {
  464. // width: 627upx;
  465. position: relative;
  466. }
  467. .shoppingCart .list .item .picTxt .pictrue {
  468. width: 132upx;
  469. height: 132upx;
  470. }
  471. .shoppingCart .list .item .picTxt .pictrue image {
  472. width: 100%;
  473. height: 100%;
  474. border-radius: 6upx;
  475. }
  476. .shoppingCart .list .item .picTxt .text {
  477. width: 420upx;
  478. font-size: 28upx;
  479. color: #282828;
  480. margin-left: 20upx;
  481. }
  482. .shoppingCart .list .item .picTxt .text .reColor {
  483. color: #999;
  484. width: 60%;
  485. }
  486. .shoppingCart .list .item .picTxt .text .title {
  487. display: flex;
  488. justify-content: space-between;
  489. font-size: 20upx;
  490. font-weight: 600;
  491. .bluecol{
  492. color: #1890FF;
  493. }
  494. .orangcol{
  495. color: #FF7E00;
  496. }
  497. .graycol{
  498. color: #CCCCCC;
  499. }
  500. }
  501. .shoppingCart .list .item .picTxt .text .title .top {
  502. width: 70%;
  503. white-space: nowrap;
  504. overflow: hidden;
  505. text-overflow: ellipsis;
  506. white-space: nowrap;
  507. font-size: 28upx;
  508. font-weight: 400;
  509. }
  510. .shoppingCart .list .item .picTxt .text .reElection {
  511. margin-top: 20upx;
  512. }
  513. .shoppingCart .list .item .picTxt .text .reElection .title {
  514. font-size: 24upx;
  515. }
  516. .shoppingCart .list .item .picTxt .text .reElection .reBnt {
  517. width: 120upx;
  518. height: 46upx;
  519. border-radius: 23upx;
  520. font-size: 26upx;
  521. }
  522. .shoppingCart .list .item .picTxt .text .infor {
  523. font-size: 24upx;
  524. color: #868686;
  525. margin-top: 8upx;
  526. }
  527. .shoppingCart .list .item .picTxt .text .money {
  528. font-size: 30upx;
  529. color: #282828;
  530. margin-top: 20upx;
  531. font-weight: 600;
  532. font-family: PingFangSC-Semibold, PingFang SC;
  533. }
  534. .shoppingCart .list .item .picTxt .carnum {
  535. height: 47upx;
  536. position: absolute;
  537. bottom: 7upx;
  538. right: 0;
  539. }
  540. .shoppingCart .list .item .picTxt .carnum view {
  541. border: 1upx solid #a4a4a4;
  542. width: 66upx;
  543. text-align: center;
  544. height: 100%;
  545. line-height: 40upx;
  546. font-size: 28upx;
  547. color: #a4a4a4;
  548. }
  549. .shoppingCart .list .item .picTxt .carnum .reduce {
  550. border-right: 0;
  551. border-radius: 30upx 0 0 30upx;
  552. }
  553. .shoppingCart .list .item .picTxt .carnum .reduce.on {
  554. border-color: #e3e3e3;
  555. color: #dedede;
  556. }
  557. .shoppingCart .list .item .picTxt .carnum .plus {
  558. border-left: 0;
  559. border-radius: 0 30upx 30upx 0;
  560. }
  561. .shoppingCart .list .item .picTxt .carnum .num {
  562. color: #282828;
  563. }
  564. .shoppingCart .list .item .picTxt .carnum .num0 {
  565. color: #a4a4a4;
  566. }
  567. .shoppingCart .list .item .picTxt .carnum .nums {
  568. color: #282828;
  569. width: 66rpx;
  570. text-align: center;
  571. height: 40rpx;
  572. border: 1rpx solid #a4a4a4;
  573. }
  574. .shoppingCart .invalidGoods {
  575. background-color: #fff;
  576. }
  577. .shoppingCart .invalidGoods .goodsNav {
  578. width: 100%;
  579. height: 66upx;
  580. padding: 0 30upx;
  581. box-sizing: border-box;
  582. font-size: 28upx;
  583. color: #282828;
  584. }
  585. .shoppingCart .invalidGoods .goodsNav .iconfont {
  586. color: #424242;
  587. font-size: 28upx;
  588. margin-right: 17upx;
  589. }
  590. .shoppingCart .invalidGoods .goodsNav .del {
  591. font-size: 26upx;
  592. color: #999;
  593. }
  594. .shoppingCart .invalidGoods .goodsNav .del .icon-shanchu1 {
  595. color: #999;
  596. font-size: 33upx;
  597. vertical-align: -2upx;
  598. margin-right: 8upx;
  599. }
  600. .shoppingCart .invalidGoods .goodsList .item {
  601. padding: 20upx 30upx;
  602. border-top: 1upx solid #f5f5f5;
  603. }
  604. .shoppingCart .invalidGoods .goodsList .item .invalid {
  605. font-size: 22upx;
  606. color: #fff;
  607. width: 70upx;
  608. height: 36upx;
  609. background-color: #aaa;
  610. border-radius: 3upx;
  611. text-align: center;
  612. line-height: 36upx;
  613. }
  614. .shoppingCart .invalidGoods .goodsList .item .pictrue {
  615. width: 140upx;
  616. height: 140upx;
  617. }
  618. .shoppingCart .invalidGoods .goodsList .item .pictrue image {
  619. width: 100%;
  620. height: 100%;
  621. border-radius: 6upx;
  622. }
  623. .shoppingCart .invalidGoods .goodsList .item .text {
  624. width: 433upx;
  625. font-size: 28upx;
  626. color: #999;
  627. height: 140upx;
  628. }
  629. .shoppingCart .invalidGoods .goodsList .item .text .name {
  630. width: 100%;
  631. }
  632. .shoppingCart .invalidGoods .goodsList .item .text .infor {
  633. font-size: 24upx;
  634. }
  635. .shoppingCart .invalidGoods .goodsList .item .text .end {
  636. font-size: 26upx;
  637. color: #bbb;
  638. }
  639. .shoppingCart .footer {
  640. // z-index: 999;
  641. width: 100%;
  642. height: 100upx;
  643. background-color: #fafafa;
  644. position: fixed;
  645. padding: 0 30upx;
  646. box-sizing: border-box;
  647. border-top: 1upx solid #eee;
  648. bottom: 0upx;
  649. height: calc(100upx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  650. height: calc(100upx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  651. padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
  652. padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
  653. }
  654. .shoppingCart .footer.on {
  655. // #ifndef H5
  656. bottom: 0upx;
  657. // #endif
  658. }
  659. .shoppingCart .footer .checkAll {
  660. font-size: 28upx;
  661. color: #282828;
  662. margin-left: 16upx;
  663. }
  664. // .shoppingCart .footer checkbox .wx-checkbox-input{background-color:#fafafa;}
  665. .shoppingCart .footer .money {
  666. font-size: 30upx;
  667. width: 214upx;
  668. height: 70upx;
  669. background: #1890FF;
  670. border-radius: 50upx;
  671. font-weight: 400;
  672. color: #FFFFFF;
  673. line-height: 70upx;
  674. }
  675. .shoppingCart .footer .placeOrder {
  676. color: #fff;
  677. font-size: 30upx;
  678. width: 226upx;
  679. height: 70upx;
  680. border-radius: 50upx;
  681. text-align: center;
  682. line-height: 70upx;
  683. margin-left: 22upx;
  684. }
  685. .shoppingCart .footer .button .bnt {
  686. font-size: 28upx;
  687. color: #999;
  688. border-radius: 50upx;
  689. border: 1px solid #999;
  690. width: 160upx;
  691. height: 60upx;
  692. text-align: center;
  693. line-height: 60upx;
  694. }
  695. .shoppingCart .footer .button form~form {
  696. margin-left: 17upx;
  697. }
  698. .uni-p-b-96 {
  699. height: 96upx;
  700. }
  701. </style>
  702. <style scoped lang="scss">
  703. .writeoff{
  704. opacity: 0.6;
  705. }
  706. .he{
  707. display: flex;
  708. justify-content: space-between;
  709. .txt{
  710. font-size: 22upx;
  711. }
  712. }
  713. .xuan{
  714. width: 40upx;
  715. height: 40upx;
  716. border: 2upx solid #CCCCCC;
  717. border-radius: 30upx;
  718. }
  719. .noxuan{
  720. cursor: not-allowed;
  721. }
  722. .q{background-color: #4276F6;line-height: 40upx;color: #FFF; font-size:24upx;text-align: center;}
  723. .dui{line-height: 40upx;color: #FFF; font-size:24upx;text-align: center;}
  724. .box{
  725. position: fixed;
  726. top: 0;
  727. bottom: 0;
  728. width: 100%;
  729. height: 100%;
  730. z-index: 10;
  731. background-color: #78797a;
  732. .small_box{
  733. padding-bottom: 46upx;
  734. width: 480upx;
  735. background: #FFFFFF;
  736. border-radius: 12upx;
  737. margin-top: 360upx;
  738. margin-left: 136upx;
  739. image{width: 100%;height: 228upx;}
  740. .content{
  741. // height: 200upx;
  742. text-align: center;
  743. .font{
  744. margin-top: 52upx;
  745. margin-bottom: 8upx;
  746. font-size: 36upx;
  747. font-weight: 600;
  748. color: #333333;
  749. }
  750. .small_font{
  751. font-size: 28upx;
  752. font-weight: 400;
  753. color: #666666;
  754. margin-bottom: 50upx;
  755. }
  756. }
  757. .btn{
  758. width: 398upx;
  759. margin: 0 auto;
  760. text-align: center;
  761. height: 80upx;
  762. line-height: 80upx;
  763. font-size: 30upx;
  764. color: #FFFFFF;
  765. background: linear-gradient(270deg, #4276F6 0%, #00ACF8 100%);
  766. border-radius: 20px;
  767. }
  768. .btn_no{
  769. color: #999999;
  770. margin-top: 28upx;
  771. text-align: center;
  772. font-size: 30upx;
  773. }
  774. }
  775. }
  776. .shoppingCart .content{
  777. margin: 20upx 28upx;
  778. border-radius: 12upx;
  779. margin-bottom: 200upx;
  780. .list_top{
  781. background-color: #FFFFFF;
  782. font-size: 28upx;
  783. color: #333333;
  784. height: 90upx;
  785. line-height: 90upx;
  786. padding-left: 24upx;
  787. border-bottom: 2upx solid #EEEEEE;
  788. .bluefont{color: #1890FF;display: inline-block;margin: 0upx 10upx;}
  789. .garyfont{color: #999999;}
  790. }
  791. }
  792. </style>