integral_order.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774
  1. <template>
  2. <view :style="colorStyle">
  3. <view class='order-submission'>
  4. <view class="allAddress" :style="store_self_mention ? '':'padding-top:10rpx'">
  5. <view class='address acea-row row-between-wrapper' @tap='onAddress' v-if='shippingType == 0'>
  6. <view class='addressCon' v-if="addressInfo.real_name">
  7. <view class='name'>{{addressInfo.real_name}}
  8. <text class='phone'>{{addressInfo.phone}}</text>
  9. </view>
  10. <view class="line1">
  11. <text class='default font-num'
  12. v-if="addressInfo.is_default">{{$t(`[默认]`)}}</text>{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}{{addressInfo.detail}}
  13. </view>
  14. <!-- <view class='setaddress'>设置收货地址</view> -->
  15. </view>
  16. <view class='addressCon' v-else>
  17. <view class='setaddress'>{{$t(`设置收货地址`)}}</view>
  18. </view>
  19. <view class='iconfont icon-jiantou'></view>
  20. </view>
  21. <view class='line'>
  22. <image src='/static/images/line.jpg'></image>
  23. </view>
  24. </view>
  25. <view class="orderGoods">
  26. <view class='total'>{{$t(`共`)}}{{resData.num}}{{$t(`件商品`)}}</view>
  27. <view class='goodWrapper'>
  28. <view class='item acea-row row-between-wrapper' @click="jumpCon(cartInfo.product_id)">
  29. <view class='pictrue'>
  30. <image :src='cartInfo.image'></image>
  31. </view>
  32. <view class='text'>
  33. <view class='acea-row row-between-wrapper'>
  34. <view class='name line1'>{{cartInfo.store_name}}</view>
  35. <view class='num'>x {{resData.num}}</view>
  36. </view>
  37. <view class='attr line1' v-if="cartInfo.suk">{{cartInfo.suk}}
  38. </view>
  39. <view class='money font-color'>
  40. {{cartInfo.price}} {{$t(`积分`)}}
  41. </view>
  42. </view>
  43. </view>
  44. </view>
  45. </view>
  46. <view class='wrapper'>
  47. <view class='item acea-row row-between-wrapper'>
  48. <view>{{$t(`可用积分`)}}</view>
  49. <view class='discount'>{{resData.integral}}
  50. </view>
  51. </view>
  52. <view class='item acea-row row-between-wrapper'>
  53. <view>{{$t(`快递费用`)}}</view>
  54. <view class='discount'>{{$t(`免运费`)}}
  55. </view>
  56. </view>
  57. <view class='item' v-if="textareaStatus">
  58. <view>{{$t(`备注信息`)}}</view>
  59. <view class="placeholder-textarea">
  60. <textarea ref='getFocus' v-if="coupon.coupon===false" :focus="textFocus" @input='bindHideKeyboard' value=""
  61. name="mark">
  62. </textarea>
  63. <view class="placeholder" @click="clickTextArea" v-show="!mark">
  64. {{$t(`请添加备注(150字以内)`)}}
  65. </view>
  66. </view>
  67. </view>
  68. </view>
  69. <view style='height:120rpx;'></view>
  70. <view class='footer acea-row row-between-wrapper'>
  71. <view>{{$t(`合计`)}}
  72. <text class='font-color'>{{resData.total_price || 0}}{{$t(`积分`)}}</text>
  73. </view>
  74. <view class='settlement' style='z-index:100' @tap="goPay">{{$t(`立即兑换`)}}</view>
  75. </view>
  76. </view>
  77. <view class="alipaysubmit" v-html="formContent"></view>
  78. <couponListWindow :coupon='coupon' @ChangCouponsClone="ChangCouponsClone" :openType='openType' :cartId='cartId'
  79. @ChangCoupons="ChangCoupons"></couponListWindow>
  80. <addressWindow ref="addressWindow" @changeTextareaStatus="changeTextareaStatus" :news='news' :address='address'
  81. :pagesUrl="pagesUrl" @OnChangeAddress="OnChangeAddress" @changeClose="changeClose"></addressWindow>
  82. <!-- #ifdef MP -->
  83. <!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
  84. <!-- #endif -->
  85. <home v-show="!invShow"></home>
  86. </view>
  87. </template>
  88. <script>
  89. import {
  90. integralOrderConfirm,
  91. integralOrderCreate,
  92. } from '@/api/activity.js';
  93. import {
  94. getAddressDefault,
  95. getAddressDetail,
  96. invoiceList,
  97. invoiceOrder
  98. } from '@/api/user.js';
  99. import {
  100. storeListApi
  101. } from '@/api/store.js';
  102. import {
  103. CACHE_LONGITUDE,
  104. CACHE_LATITUDE
  105. } from '@/config/cache.js';
  106. import couponListWindow from '@/components/couponListWindow';
  107. import addressWindow from '@/components/addressWindow';
  108. import orderGoods from '@/components/orderGoods';
  109. import home from '@/components/home';
  110. import {
  111. toLogin
  112. } from '@/libs/login.js';
  113. import {
  114. mapGetters
  115. } from "vuex";
  116. // #ifdef MP
  117. import authorize from '@/components/Authorize';
  118. // #endif
  119. import colors from "@/mixins/color";
  120. export default {
  121. components: {
  122. couponListWindow,
  123. addressWindow,
  124. orderGoods,
  125. home,
  126. // #ifdef MP
  127. authorize
  128. // #endif
  129. },
  130. mixins: [colors],
  131. data() {
  132. return {
  133. textFocus:false,
  134. textareaStatus: true,
  135. //支付方式
  136. cartArr: [{
  137. "name": this.$t(`微信支付`),
  138. "icon": "icon-weixin2",
  139. value: 'weixin',
  140. title: this.$t(`使用微信快捷支付`),
  141. payStatus: 1,
  142. },
  143. {
  144. "name": this.$t(`支付宝支付`),
  145. "icon": "icon-zhifubao",
  146. value: 'alipay',
  147. title: this.$t(`使用线上支付宝支付`),
  148. payStatus: 1,
  149. },
  150. {
  151. "name": this.$t(`余额支付`),
  152. "icon": "icon-yuezhifu",
  153. value: 'yue',
  154. title: this.$t(`可用余额:`),
  155. payStatus: 1,
  156. },
  157. {
  158. "name": this.$t(`线下支付`),
  159. "icon": "icon-yuezhifu1",
  160. value: 'offline',
  161. title: this.$t(`选择线下付款方式`),
  162. payStatus: 2,
  163. }
  164. ],
  165. formContent: '',
  166. payType: 'weixin', //支付方式
  167. openType: 1, //优惠券打开方式 1=使用
  168. active: 0, //支付方式切换
  169. coupon: {
  170. coupon: false,
  171. list: [],
  172. statusTile: this.$t(`立即使用`)
  173. }, //优惠券组件
  174. address: {
  175. address: false
  176. }, //地址组件
  177. addressInfo: {}, //地址信息
  178. pinkId: 0, //拼团id
  179. addressId: 0, //地址id
  180. couponId: 0, //优惠券id
  181. cartId: '', //购物车id
  182. BargainId: 0,
  183. combinationId: 0,
  184. seckillId: 0,
  185. userInfo: {}, //用户信息
  186. coupon_price: 0, //优惠券抵扣金额
  187. useIntegral: false, //是否使用积分
  188. integral_price: 0, //积分抵扣金额
  189. integral: 0,
  190. ChangePrice: 0, //使用积分抵扣变动后的金额
  191. formIds: [], //收集formid
  192. status: 0,
  193. is_address: false,
  194. toPay: false, //修复进入支付时页面隐藏从新刷新页面
  195. shippingType: 0,
  196. system_store: {},
  197. storePostage: 0,
  198. contacts: '',
  199. contactsTel: '',
  200. mydata: {},
  201. storeList: [],
  202. store_self_mention: 0,
  203. cartInfo: {},
  204. priceGroup: {},
  205. animated: false,
  206. totalPrice: 0,
  207. integralRatio: "0",
  208. pagesUrl: "",
  209. orderKey: "",
  210. // usableCoupon: {},
  211. offlinePostage: "",
  212. isAuto: false, //没有授权的不会自动授权
  213. isShowAuth: false, //是否隐藏授权
  214. from: '',
  215. news: 1,
  216. invTitle: this.$t(`不开发票`),
  217. special_invoice: false,
  218. invoice_func: false,
  219. header_type: '',
  220. invShow: false,
  221. invList: [],
  222. invChecked: '',
  223. urlQuery: '',
  224. pay_close: false,
  225. resData: {},
  226. mark: ''
  227. };
  228. },
  229. computed: mapGetters(['isLogin']),
  230. onLoad: function(options) {
  231. // #ifdef H5
  232. this.from = this.$wechat.isWeixin() ? 'weixin' : 'weixinh5'
  233. // #endif
  234. // #ifdef MP
  235. this.from = 'routine'
  236. // #endif
  237. if (!options.unique) return this.$util.Tips({
  238. title: this.$t(`请选择要购买的商品`)
  239. }, {
  240. tab: 3,
  241. url: 1
  242. });
  243. this.unique = options.unique
  244. this.num = options.num
  245. this.couponId = options.couponId || 0;
  246. this.pinkId = options.pinkId ? parseInt(options.pinkId) : 0;
  247. this.addressId = options.addressId || 0;
  248. this.cartId = options.cartId;
  249. this.is_address = options.is_address ? true : false;
  250. this.news = !options.new || options.new === '0' ? 0 : 1;
  251. this.invChecked = options.invoice_id || '';
  252. this.header_type = options.header_type || '1';
  253. this.couponTitle = options.couponTitle || this.$t(`请选择`)
  254. // #ifndef APP-PLUS
  255. this.textareaStatus = true;
  256. // #endif
  257. if (this.isLogin && this.toPay == false) {
  258. this.getaddressInfo();
  259. this.getConfirm();
  260. this.$nextTick(function() {
  261. this.$refs.addressWindow.getAddressList();
  262. })
  263. } else {
  264. toLogin();
  265. }
  266. },
  267. /**
  268. * 生命周期函数--监听页面显示
  269. */
  270. onShow: function() {
  271. let _this = this
  272. uni.$on("handClick", res => {
  273. if (res) {
  274. _this.system_store = res.address
  275. }
  276. // 清除监听
  277. uni.$off('handClick');
  278. })
  279. },
  280. methods: {
  281. getInvoiceList() {
  282. uni.showLoading({
  283. title: this.$t(`正在加载…`)
  284. })
  285. invoiceList().then(res => {
  286. uni.hideLoading();
  287. this.invList = res.data.map(item => {
  288. item.id = item.id.toString();
  289. return item;
  290. });
  291. const result = this.invList.find(item => item.id == this.invChecked);
  292. if (result) {
  293. let name = '';
  294. name += result.header_type === 1 ? this.$t(`个人`) : this.$t(`企业`);
  295. name += result.type === 1 ? this.$t(`普通`) : this.$t(`专用`);
  296. name += this.$t(`发票`);
  297. this.invTitle = name;
  298. }
  299. }).catch(err => {
  300. uni.showToast({
  301. title: err,
  302. icon: 'none'
  303. });
  304. });
  305. },
  306. /**
  307. * 事件回调
  308. *
  309. */
  310. onChangeFun: function(e) {
  311. let opt = e;
  312. let action = opt.action || null;
  313. let value = opt.value != undefined ? opt.value : null;
  314. action && this[action] && this[action](value);
  315. },
  316. payClose: function() {
  317. this.pay_close = false;
  318. },
  319. goPay() {
  320. let that = this
  321. if (!that.addressId) {
  322. return that.$util.Tips({
  323. title: that.$t(`请选择收货地址`)
  324. });
  325. }
  326. if (parseFloat(that.resData.integral) < parseFloat(that.cartInfo.price))
  327. return that.$util.Tips({
  328. title: that.$t(`可用积分不足!`)
  329. });
  330. let data = {
  331. addressId: that.addressId,
  332. mark: that.mark,
  333. unique: this.cartInfo.unique,
  334. num: this.resData.num
  335. }
  336. integralOrderCreate(data).then(res => {
  337. uni.redirectTo({
  338. url: `/pages/points_mall/integral_order_status?order_id=${res.data.result.orderId}`
  339. })
  340. }).catch(err => {
  341. uni.hideLoading();
  342. return that.$util.Tips({
  343. title: err
  344. });
  345. });
  346. },
  347. // 关闭地址弹窗;
  348. changeClose: function() {
  349. this.$set(this.address, 'address', false);
  350. },
  351. computedPrice: function() {
  352. let shippingType = this.shippingType;
  353. postOrderComputed(this.orderKey, {
  354. addressId: this.addressId,
  355. useIntegral: this.useIntegral ? 1 : 0,
  356. couponId: this.couponId,
  357. shipping_type: parseInt(shippingType) + 1,
  358. payType: this.payType
  359. }).then(res => {
  360. let result = res.data.result;
  361. if (result) {
  362. this.totalPrice = result.pay_price;
  363. this.integral_price = result.deduction_price;
  364. this.coupon_price = result.coupon_price;
  365. this.integral = this.useIntegral ? result.SurplusIntegral : this.userInfo.integral;
  366. this.$set(this.priceGroup, 'storePostage', shippingType == 1 ? 0 : result.pay_postage);
  367. this.$set(this.priceGroup, 'storePostageDiscount', result.storePostageDiscount);
  368. }
  369. })
  370. },
  371. ChangCouponsClone: function() {
  372. this.$set(this.coupon, 'coupon', false);
  373. },
  374. changeTextareaStatus: function() {
  375. for (let i = 0, len = this.coupon.list.length; i < len; i++) {
  376. this.coupon.list[i].use_title = '';
  377. this.coupon.list[i].is_use = 0;
  378. }
  379. this.textareaStatus = true;
  380. this.status = 0;
  381. this.$set(this.coupon, 'list', this.coupon.list);
  382. },
  383. /**
  384. * 选择地址后改变事件
  385. * @param object e
  386. */
  387. OnChangeAddress: function(e) {
  388. this.textareaStatus = true;
  389. this.addressId = e;
  390. this.address.address = false;
  391. this.getaddressInfo();
  392. },
  393. bindHideKeyboard: function(e) {
  394. this.mark = e.detail.value;
  395. },
  396. /**
  397. * 获取当前订单详细信息
  398. *
  399. */
  400. getConfirm: function() {
  401. let that = this;
  402. // return;
  403. integralOrderConfirm({
  404. unique: this.unique,
  405. num: this.num
  406. }).then(res => {
  407. that.$set(that, 'resData', res.data);
  408. that.$set(that, 'cartInfo', res.data.productInfo);
  409. }).catch(err => {
  410. return this.$util.Tips({
  411. title: err
  412. });
  413. });
  414. },
  415. /*
  416. * 提取砍价和拼团id
  417. */
  418. getBargainId: function() {
  419. let that = this;
  420. let cartINfo = that.cartInfo;
  421. let BargainId = 0;
  422. let combinationId = 0;
  423. cartINfo.forEach(function(value, index, cartINfo) {
  424. BargainId = cartINfo[index].bargain_id,
  425. combinationId = cartINfo[index].combination_id
  426. })
  427. that.$set(that, 'BargainId', parseInt(BargainId));
  428. that.$set(that, 'combinationId', parseInt(combinationId));
  429. if (that.cartArr.length == 3 && (BargainId || combinationId || that.seckillId)) {
  430. that.cartArr[2].payStatus = 0;
  431. that.$set(that, 'cartArr', that.cartArr);
  432. }
  433. },
  434. /*
  435. * 获取默认收货地址或者获取某条地址信息
  436. */
  437. getaddressInfo: function() {
  438. let that = this;
  439. if (that.addressId) {
  440. getAddressDetail(that.addressId).then(res => {
  441. res.data.is_default = parseInt(res.data.is_default);
  442. that.addressInfo = res.data || {};
  443. that.addressId = res.data.id || 0;
  444. that.address.addressId = res.data.id || 0;
  445. })
  446. } else {
  447. getAddressDefault().then(res => {
  448. res.data.is_default = parseInt(res.data.is_default);
  449. that.addressInfo = res.data || {};
  450. that.addressId = res.data.id || 0;
  451. that.address.addressId = res.data.id || 0;
  452. })
  453. }
  454. },
  455. couponTap: function() {
  456. this.coupon.coupon = true;
  457. this.coupon.list.forEach((item, index) => {
  458. if (item.id == this.couponId) {
  459. item.is_use = 1
  460. } else {
  461. item.is_use = 0
  462. }
  463. })
  464. this.$set(this.coupon, 'list', this.coupon.list);
  465. },
  466. car: function() {
  467. let that = this;
  468. that.animated = false;
  469. },
  470. onAddress: function() {
  471. let that = this;
  472. that.textareaStatus = false;
  473. that.address.address = true;
  474. that.pagesUrl = `/pages/points_mall/user_address?unique=${this.unique}&num=${this.num}`
  475. },
  476. clickTextArea() {
  477. this.textFocus = true
  478. // this.$nextTick(() => {
  479. // this.$refs.getFocus.focus()
  480. // })
  481. },
  482. }
  483. }
  484. </script>
  485. <style lang="scss" scoped>
  486. /deep/uni-checkbox[disabled] .uni-checkbox-input {
  487. background-color: #eee;
  488. }
  489. .alipaysubmit {
  490. display: none;
  491. }
  492. .order-submission .line {
  493. width: 100%;
  494. height: 3rpx;
  495. }
  496. .order-submission .line image {
  497. width: 100%;
  498. height: 100%;
  499. display: block;
  500. }
  501. .order-submission .address {
  502. padding: 28rpx 30rpx;
  503. background-color: #fff;
  504. box-sizing: border-box;
  505. }
  506. .order-submission .address .addressCon {
  507. width: 610rpx;
  508. font-size: 26rpx;
  509. color: #666;
  510. }
  511. .order-submission .address .addressCon .name {
  512. font-size: 30rpx;
  513. color: #282828;
  514. font-weight: bold;
  515. margin-bottom: 10rpx;
  516. }
  517. .order-submission .address .addressCon .name .phone {
  518. margin-left: 50rpx;
  519. }
  520. .order-submission .address .addressCon .default {
  521. margin-right: 12rpx;
  522. }
  523. .order-submission .address .addressCon .setaddress {
  524. color: #333;
  525. font-size: 28rpx;
  526. }
  527. .order-submission .address .iconfont {
  528. font-size: 35rpx;
  529. color: #707070;
  530. }
  531. .order-submission .allAddress {
  532. width: 100%;
  533. background: linear-gradient(to bottom, var(--view-theme) 0%, #f5f5f5 100%);
  534. padding-top: 100rpx;
  535. }
  536. .order-submission .allAddress .nav {
  537. width: 710rpx;
  538. margin: 0 auto;
  539. }
  540. .order-submission .allAddress .nav .item {
  541. width: 355rpx;
  542. }
  543. .order-submission .allAddress .nav .item.on {
  544. position: relative;
  545. width: 250rpx;
  546. }
  547. .order-submission .allAddress .nav .item.on::before {
  548. position: absolute;
  549. bottom: 0;
  550. content: "快递配送";
  551. font-size: 28rpx;
  552. display: block;
  553. height: 0;
  554. width: 336rpx;
  555. border-width: 0 20rpx 80rpx 0;
  556. border-style: none solid solid;
  557. border-color: transparent transparent #fff;
  558. z-index: 2;
  559. border-radius: 7rpx 30rpx 0 0;
  560. text-align: center;
  561. line-height: 80rpx;
  562. }
  563. .order-submission .allAddress .nav .item:nth-of-type(2).on::before {
  564. content: "到店自提";
  565. border-width: 0 0 80rpx 20rpx;
  566. border-radius: 30rpx 7rpx 0 0;
  567. }
  568. .order-submission .allAddress .nav .item.on2 {
  569. position: relative;
  570. }
  571. .order-submission .allAddress .nav .item.on2::before {
  572. position: absolute;
  573. bottom: 0;
  574. content: "到店自提";
  575. font-size: 28rpx;
  576. display: block;
  577. height: 0;
  578. width: 400rpx;
  579. border-width: 0 0 60rpx 60rpx;
  580. border-style: none solid solid;
  581. border-color: transparent transparent #f7c1bd;
  582. border-radius: 40rpx 6rpx 0 0;
  583. text-align: center;
  584. line-height: 60rpx;
  585. }
  586. .order-submission .allAddress .nav .item:nth-of-type(1).on2::before {
  587. content: "快递配送";
  588. border-width: 0 60rpx 60rpx 0;
  589. border-radius: 6rpx 40rpx 0 0;
  590. }
  591. .order-submission .allAddress .address {
  592. width: 710rpx;
  593. height: 150rpx;
  594. margin: 0 auto;
  595. }
  596. .order-submission .allAddress .line {
  597. width: 710rpx;
  598. margin: 0 auto;
  599. }
  600. .order-submission .wrapper .item .discount .placeholder {
  601. color: #ccc;
  602. }
  603. .placeholder-textarea {
  604. position: relative;
  605. .placeholder {
  606. position: absolute;
  607. color: #ccc;
  608. top: 26rpx;
  609. left: 30rpx;
  610. }
  611. }
  612. .order-submission .wrapper {
  613. background-color: #fff;
  614. margin-top: 13rpx;
  615. }
  616. .order-submission .wrapper .item {
  617. padding: 27rpx 30rpx;
  618. font-size: 30rpx;
  619. color: #282828;
  620. border-bottom: 1px solid #f0f0f0;
  621. }
  622. .order-submission .wrapper .item .discount {
  623. font-size: 30rpx;
  624. color: #999;
  625. }
  626. .order-submission .wrapper .item .discount input {
  627. text-align: end;
  628. }
  629. .order-submission .wrapper .item .discount .iconfont {
  630. color: #515151;
  631. font-size: 30rpx;
  632. margin-left: 15rpx;
  633. }
  634. .order-submission .wrapper .item .discount .num {
  635. font-size: 32rpx;
  636. margin-right: 20rpx;
  637. }
  638. .order-submission .wrapper .item .shipping {
  639. font-size: 30rpx;
  640. color: #999;
  641. position: relative;
  642. padding-right: 58rpx;
  643. }
  644. .order-submission .wrapper .item .shipping .iconfont {
  645. font-size: 35rpx;
  646. color: #707070;
  647. position: absolute;
  648. right: 0;
  649. top: 50%;
  650. transform: translateY(-50%);
  651. margin-left: 30rpx;
  652. }
  653. .order-submission .wrapper .item textarea {
  654. background-color: #f9f9f9;
  655. width: 690rpx;
  656. height: 140rpx;
  657. border-radius: 3rpx;
  658. margin-top: 30rpx;
  659. padding: 25rpx 28rpx;
  660. box-sizing: border-box;
  661. }
  662. .order-submission .wrapper .item .placeholder {
  663. color: #ccc;
  664. }
  665. .order-submission .wrapper .item .list {
  666. margin-top: 35rpx;
  667. }
  668. .order-submission .moneyList {
  669. margin-top: 12rpx;
  670. background-color: #fff;
  671. padding: 30rpx;
  672. }
  673. .order-submission .moneyList .item {
  674. font-size: 28rpx;
  675. color: #282828;
  676. }
  677. .order-submission .moneyList .item~.item {
  678. margin-top: 20rpx;
  679. }
  680. .order-submission .moneyList .item .money {
  681. color: #868686;
  682. }
  683. .order-submission .footer {
  684. width: 100%;
  685. height: 100rpx;
  686. background-color: #fff;
  687. padding: 0 30rpx;
  688. font-size: 28rpx;
  689. color: #333;
  690. box-sizing: border-box;
  691. position: fixed;
  692. bottom: 0;
  693. left: 0;
  694. }
  695. .order-submission .footer .settlement {
  696. font-size: 30rpx;
  697. color: #fff;
  698. width: 240rpx;
  699. height: 70rpx;
  700. background-color: var(--view-theme);
  701. border-radius: 50rpx;
  702. text-align: center;
  703. line-height: 70rpx;
  704. }
  705. .footer .transparent {
  706. opacity: 0
  707. }
  708. .orderGoods {
  709. background-color: #fff;
  710. margin-top: 12rpx;
  711. }
  712. .orderGoods .total {
  713. width: 100%;
  714. height: 86rpx;
  715. padding: 0 30rpx;
  716. border-bottom: 2rpx solid #f0f0f0;
  717. font-size: 30rpx;
  718. color: #282828;
  719. line-height: 86rpx;
  720. box-sizing: border-box;
  721. }
  722. .pictrue image {
  723. width: 130rpx;
  724. height: 130rpx;
  725. }
  726. </style>