index.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965
  1. <template>
  2. <view class="" :style="colorStyle">
  3. <!-- #ifdef MP -->
  4. <view :style="{ height: `${statusBarHeight + navBarHeight}px` }"></view>
  5. <view class="nav-bar">
  6. <view :style="{ height: `${statusBarHeight}px` }"></view>
  7. <view :style="{ height: `${navBarHeight}px` }" class="content">
  8. <button class="button" hover-class="none" @tap="goBack">
  9. <text class="iconfont icon-fanhui2"></text>
  10. </button>
  11. 拼单详情
  12. </view>
  13. </view>
  14. <!-- #endif -->
  15. <image class="header" :src="header"></image>
  16. <template v-if="status != -1">
  17. <view class="simple">
  18. <view class="seller">
  19. <view class="head acea-row row-between">
  20. <view class="acea-row headCon">
  21. <view class="tag">{{ delivery_type == 3 ? '配送' : '自提' }}</view>
  22. <view class="name">{{ storeInfo.name }}</view>
  23. </view>
  24. <view>距您{{ storeInfo.range || 0 }}km</view>
  25. </view>
  26. <view>{{ storeInfo.detailed_address }}</view>
  27. </view>
  28. <view class="buyer">
  29. <view v-if="plainPartake.length" class="avatar-group">
  30. <template v-for="(item, index) in plainPartake">
  31. <image v-if="index <= 6" :key="item.userInfo.uid" class="avatar" :src="item.userInfo.avatar || '/static/images/f.png'" mode="aspectFill"></image>
  32. </template>
  33. <view v-if="plainPartake.length > 7" class="gengduo"><text class="iconfont icon-gengduo"></text></view>
  34. </view>
  35. <view>{{ plainPartake.length }}人已点单</view>
  36. <!-- #ifdef MP -->
  37. <button v-if="status != 2" class="button" hover-class="none" @tap="refresh"><text class="iconfont icon-shuaxin"></text>刷新</button>
  38. <!-- #endif -->
  39. <!-- #ifdef H5 -->
  40. <button v-if="$wechat.isWeixin() && status != 2" class="button" hover-class="none" @tap="refresh"><text class="iconfont icon-shuaxin"></text>刷新</button>
  41. <!-- #endif -->
  42. </view>
  43. <view v-if="collage_uid == uid && status != 2" class="button-group">
  44. <button class="button" hover-class="none" @tap="onCancel">取消拼单</button>
  45. <!-- #ifdef MP -->
  46. <button class="button primary" hover-class="none" open-type="share">邀请好友</button>
  47. <!-- #endif -->
  48. <!-- #ifdef H5 -->
  49. <button v-if="$wechat.isWeixin()" class="button primary" hover-class="none" @tap="onShare">邀请好友</button>
  50. <!-- #endif -->
  51. </view>
  52. </view>
  53. <view v-if="collage_uid != uid" class="status">
  54. <view class="head">当前拼单进度</view>
  55. <view class="body">
  56. <view v-for="(item, index) in statusList" :key="item.value" :class="{ active: item.value == status }" class="item">
  57. <view class="number">{{ index + 1 }}</view>
  58. <view class="">{{ item.name }}</view>
  59. </view>
  60. </view>
  61. </view>
  62. <view v-if="collagePartake.length" class="choice">
  63. <view v-for="item in collagePartake" :key="item.userInfo.uid" class="wrapper">
  64. <view class="head">
  65. <view>
  66. <image class="avatar" :src="item.userInfo.avatar || '/static/images/f.png'" mode="aspectFill"></image>
  67. </view>
  68. <view class="name">{{ item.userInfo.nickname }}
  69. <text v-if="item.userInfo.uid == uid">(我)</text>
  70. <text v-else-if="item.userInfo.uid == collage_uid">(发起人)</text>
  71. </view>
  72. <template v-if="status != 2">
  73. <button v-if="item.userInfo.uid == uid && item.goods.length" class="button remove" hover-class="none" @tap="onRemove">清空</button>
  74. <button v-if="item.userInfo.uid == uid && item.goods.length" class="button" hover-class="none" @tap="onChange">修改</button>
  75. <button v-if="item.userInfo.uid != uid && item.goods.length" class="button" hover-class="none" @tap="onCopy(item.userInfo.uid)">跟TA选一样</button>
  76. <button v-if="item.userInfo.uid == uid && !item.goods.length" class="button select" hover-class="none" @tap="onChange">立即选购</button>
  77. </template>
  78. </view>
  79. <view v-if="item.goods.length" class="body">
  80. <view v-for="goods in item.goods" :key="goods.id" :class="{ gray: !goods.is_true_stock }" class="item">
  81. <view>
  82. <image class="image" :src="goods.productInfo.attrInfo.image" mode="aspectFill"></image>
  83. </view>
  84. <view class="text">
  85. <view class="name">{{ goods.productInfo.store_name }}</view>
  86. <view class="attr">{{ goods.productInfo.attrInfo.suk }}</view>
  87. </view>
  88. <view>
  89. <view>{{ goods.truePrice }}</view>
  90. <view class="number">x{{ goods.cart_num }}</view>
  91. </view>
  92. </view>
  93. <view class="total">小计<text class="money">{{ item.sumPrice }}</text></view>
  94. </view>
  95. </view>
  96. </view>
  97. <view v-if="collage_uid == uid && status != 2" class="footer">
  98. <view class="footer-wrap">
  99. <view class="total">最终优惠价:<text class="money">{{ total }}</text></view>
  100. <button class="button primary" hover-class="none" @tap="getCollagePartake(onSettle)">去结算</button>
  101. </view>
  102. </view>
  103. </template>
  104. <view v-else class="empty">
  105. <image class="image" :src="`${imgHost}/statics/images/no-thing.png`" mode="aspectFill"></image>
  106. <view class="tips">该订单已被发起人取消,返回重新选购</view>
  107. <button class="button" hover-class="none" @tap="goStore">返回门店</button>
  108. </view>
  109. <!-- 发送给朋友图片 -->
  110. <view class="share-box" v-if="H5ShareBox">
  111. <image :src="imgHost + '/statics/images/share-info.png'" @click="H5ShareBox = false">
  112. </image>
  113. </view>
  114. <!-- #ifdef MP -->
  115. <!-- <authorize v-if="isShowAuth" @authColse="authColse" @onLoadFun="onLoadFun"></authorize> -->
  116. <!-- #endif -->
  117. </view>
  118. </template>
  119. <script>
  120. import home from '@/components/home';
  121. import {
  122. getnearbyStore
  123. } from '@/api/new_store.js';
  124. import {
  125. getCollage,
  126. cancelCollage,
  127. settleCollage,
  128. getCollagePartake,
  129. emptyCollagePartake,
  130. duplicateCollagePartake
  131. } from '@/api/store.js'
  132. import colors from '@/mixins/color.js';
  133. import {
  134. mapGetters
  135. } from 'vuex';
  136. import {
  137. HTTP_REQUEST_URL
  138. } from '@/config/app';
  139. const themeMap = new Map([
  140. ['#42ca4d', 'group-green.png'],
  141. ['#e93323', 'group-red.png'],
  142. ['#1db0fc', 'group-blue.png'],
  143. ['#ff448f', 'group-pink.png'],
  144. ['#fe5c2d', 'group-orange.png'],
  145. ['#e0a558', 'group-golden.png'],
  146. ]);
  147. export default {
  148. components: {
  149. home
  150. },
  151. mixins: [colors],
  152. data() {
  153. return {
  154. storeInfo: {},
  155. delivery_type: 2,
  156. where: {
  157. latitude: 0,
  158. longitude: 0,
  159. store_id: 0
  160. },
  161. collage_uid: 0,
  162. status: null,
  163. statusBarHeight: 0,
  164. navBarHeight: 0,
  165. collagePartake: [],
  166. isShowAuth: false,
  167. imgHost: HTTP_REQUEST_URL,
  168. statusList: [{
  169. name: '完成选购',
  170. value: 0,
  171. },
  172. {
  173. name: '提交订单',
  174. value: 1,
  175. },
  176. {
  177. name: '完成拼单',
  178. value: 2,
  179. }
  180. ],
  181. H5ShareBox: false
  182. }
  183. },
  184. computed: {
  185. ...mapGetters(['uid', 'isLogin']),
  186. total() {
  187. return this.collagePartake.reduce((total, {
  188. sum_price
  189. }) => {
  190. return this.$util.$h.Add(total, sum_price);
  191. }, 0);
  192. },
  193. header() {
  194. let colorStyle = this.colorStyle.split(';');
  195. let colorStyleObj = {};
  196. let header = '';
  197. colorStyle.forEach(item => {
  198. if (item) {
  199. item = item.split(':');
  200. colorStyleObj[item[0].trim()] = item[1].trim();
  201. }
  202. });
  203. header = themeMap.get(colorStyleObj['--view-theme'].toLocaleLowerCase())
  204. return `${HTTP_REQUEST_URL}/statics/images/${header}`;
  205. },
  206. plainPartake() {
  207. let partake = this.collagePartake.filter(item => {
  208. return item.goods.length;
  209. });
  210. return partake;
  211. },
  212. canCheckUser() {
  213. return {
  214. status: this.status,
  215. collagePartake: this.collagePartake
  216. }
  217. }
  218. },
  219. watch: {
  220. canCheckUser(value) {
  221. if (value.status == 2 || !value.collagePartake.length) {
  222. return;
  223. }
  224. let hasUser = false;
  225. for (let partakeItem of this.collagePartake) {
  226. hasUser = this.uid == partakeItem.userInfo.uid;
  227. if (hasUser) {
  228. break;
  229. }
  230. }
  231. if (!hasUser) {
  232. this.$util.Tips({
  233. title: '请去个人中心登录'
  234. });
  235. }
  236. }
  237. },
  238. onLoad(options) {
  239. this.collage_id = options.collage_id;
  240. // #ifdef MP
  241. let {
  242. top,
  243. height
  244. } = uni.getMenuButtonBoundingClientRect();
  245. uni.getSystemInfo({
  246. success: (res) => {
  247. const {
  248. statusBarHeight
  249. } = res;
  250. this.statusBarHeight = statusBarHeight;
  251. this.navBarHeight = (top - statusBarHeight) * 2 + height;
  252. }
  253. });
  254. // #endif
  255. },
  256. onShow() {
  257. if (this.isLogin) {
  258. this.getLocation();
  259. } else {
  260. toLogin();
  261. }
  262. },
  263. methods: {
  264. getLocation() {
  265. // #ifdef H5
  266. if (this.$wechat.isWeixin()) {
  267. this.$wechat.location().then(res => {
  268. try {
  269. uni.setStorageSync('user_latitude', res.latitude);
  270. uni.setStorageSync('user_longitude', res.longitude);
  271. this.getCollage();
  272. this.getCollagePartake();
  273. } catch (e) {
  274. //TODO handle the exception
  275. }
  276. }).catch(() => {
  277. this.getCollage();
  278. this.getCollagePartake();
  279. });
  280. }
  281. // #endif
  282. // #ifdef MP
  283. uni.getLocation({
  284. type: 'gcj02',
  285. success: (res) => {
  286. try {
  287. uni.setStorageSync('user_latitude', res.latitude);
  288. uni.setStorageSync('user_longitude', res.longitude);
  289. } catch (e) {
  290. //TODO handle the exception
  291. }
  292. },
  293. fail: (err) => {
  294. this.$util.Tips({
  295. title: err
  296. });
  297. },
  298. complete: () => {
  299. this.getCollage();
  300. this.getCollagePartake();
  301. }
  302. });
  303. // #endif
  304. },
  305. // 授权回调
  306. onLoadFun() {
  307. this.isShowAuth = false;
  308. this.getLocation();
  309. },
  310. // 授权关闭
  311. authColse: function(e) {
  312. this.isShowAuth = e
  313. },
  314. getCollage() {
  315. getCollage({
  316. collage_id: this.collage_id
  317. }).then(res => {
  318. const {
  319. shipping_type,
  320. address_id,
  321. status,
  322. uid,
  323. store_id
  324. } = res.data.collage;
  325. this.delivery_type = shipping_type;
  326. this.address_id = address_id;
  327. this.status = status;
  328. this.collage_uid = uid;
  329. this.where.store_id = store_id;
  330. this.getnearbyStore();
  331. });
  332. },
  333. // 获取门店信息
  334. getnearbyStore() {
  335. try {
  336. this.where.latitude = uni.getStorageSync('user_latitude');
  337. this.where.longitude = uni.getStorageSync('user_longitude');
  338. } catch (e) {
  339. //TODO handle the exception
  340. }
  341. getnearbyStore(this.where).then(res => {
  342. this.storeInfo = res.data.info;
  343. // #ifdef H5
  344. if (this.$wechat.isWeixin()) {
  345. let configAppMessage = {
  346. desc: this.storeInfo.detailed_address,
  347. title: this.storeInfo.name,
  348. link: window.location.href,
  349. imgUrl: this.header,
  350. };
  351. this.$wechat.wechatEvevt(['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline'], configAppMessage);
  352. }
  353. // #endif
  354. });
  355. },
  356. // 拼单商品信息
  357. getCollagePartake(callback) {
  358. if (!callback) {
  359. uni.showLoading({
  360. title: '加载中'
  361. });
  362. }
  363. getCollagePartake({
  364. collage_id: this.collage_id
  365. }).then(res => {
  366. this.collagePartake = res.data;
  367. if (!callback) {
  368. return uni.hideLoading();
  369. }
  370. let is_true_stock = true;
  371. for (let partakeItem of this.collagePartake) {
  372. if (!is_true_stock) {
  373. break;
  374. }
  375. for (let goodsItem of partakeItem.goods) {
  376. is_true_stock = goodsItem.is_true_stock;
  377. if (!is_true_stock) {
  378. break;
  379. }
  380. }
  381. }
  382. if (!is_true_stock) {
  383. return this.$util.Tips({
  384. title: '存在库存不足的商品,请检查'
  385. });
  386. }
  387. callback();
  388. }).catch(() => {
  389. uni.hideLoading();
  390. });
  391. },
  392. // 清空
  393. onRemove() {
  394. emptyCollagePartake({
  395. collage_id: this.collage_id
  396. }).then(res => {
  397. this.$util.Tips({
  398. title: '清空成功',
  399. success: () => {
  400. this.getCollagePartake();
  401. }
  402. });
  403. });
  404. },
  405. // 修改、立即选购
  406. onChange() {
  407. uni.navigateTo({
  408. url: `/pages/store/group_cart/index?id=${this.where.store_id}&collage_id=${this.collage_id}&delivery_type=${this.delivery_type}`
  409. });
  410. },
  411. // 跟TA选一样
  412. onCopy(c_uid) {
  413. duplicateCollagePartake({
  414. collage_id: this.collage_id,
  415. c_uid
  416. }).then(res => {
  417. this.$util.Tips({
  418. title: '跟TA选一样成功',
  419. success: () => {
  420. this.getCollagePartake();
  421. }
  422. });
  423. }).catch(err => {
  424. this.$util.Tips({
  425. title: err
  426. });
  427. });
  428. },
  429. // 取消拼单
  430. onCancel() {
  431. cancelCollage({
  432. collage_id: this.collage_id
  433. }).then(res => {
  434. this.$util.Tips({
  435. title: '取消拼单成功'
  436. }, {
  437. tab: 3
  438. });
  439. });
  440. },
  441. // 去结算
  442. onSettle() {
  443. if (!this.plainPartake.length) {
  444. return this.$util.Tips({
  445. title: '暂无人点单'
  446. });
  447. }
  448. uni.showModal({
  449. title: '确定要结算吗?',
  450. content: '结算后,其他人无法再加入或修改商品',
  451. success: (res) => {
  452. if (res.confirm) {
  453. settleCollage({
  454. collage_id: this.collage_id
  455. }).then(res => {
  456. uni.navigateTo({
  457. url: `/pages/goods/order_confirm/index?new=1&collage_id=${this.collage_id}&addressId=${this.address_id}&cartId=${res.data.cartIds}&delivery_type=${this.delivery_type}&store_id=${this.where.store_id}&store_name=${this.storeInfo.name}`
  458. });
  459. }).catch(err => {
  460. this.$util.Tips({
  461. title: err
  462. });
  463. });
  464. }
  465. }
  466. });
  467. },
  468. goStore() {
  469. uni.reLaunch({
  470. url: `/pages/store_cate/store_cate?id=${this.where.store_id}`
  471. })
  472. },
  473. goBack() {
  474. let pages = getCurrentPages();
  475. if (pages.length > 1) {
  476. uni.navigateBack();
  477. } else {
  478. this.goStore();
  479. }
  480. },
  481. // 刷新
  482. refresh() {
  483. this.getCollage();
  484. this.getCollagePartake();
  485. },
  486. onShare() {
  487. this.H5ShareBox = true;
  488. }
  489. },
  490. }
  491. </script>
  492. <style>
  493. page {
  494. padding-bottom: 100rpx;
  495. padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
  496. padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  497. background-color: #F5F5F5;
  498. }
  499. </style>
  500. <style scoped lang="scss">
  501. .nav-bar {
  502. position: fixed;
  503. top: 0;
  504. right: 0;
  505. left: 0;
  506. z-index: 9;
  507. background-color: var(--view-theme);
  508. .content {
  509. position: relative;
  510. display: flex;
  511. justify-content: center;
  512. align-items: center;
  513. height: 100rpx;
  514. font-size: 30rpx;
  515. color: #FFFFFF;
  516. }
  517. .button {
  518. position: absolute;
  519. top: 0;
  520. bottom: 0;
  521. left: 0;
  522. display: flex;
  523. align-items: center;
  524. padding: 0 30rpx;
  525. background-color: transparent;
  526. font-size: 24rpx;
  527. color: #FFFFFF;
  528. }
  529. }
  530. .header {
  531. display: block;
  532. width: 100%;
  533. height: 320rpx;
  534. }
  535. .simple {
  536. position: relative;
  537. padding: 26rpx 26rpx 40rpx;
  538. border-radius: 14rpx;
  539. margin: -50rpx 30rpx 0;
  540. background-color: #FFFFFF;
  541. .seller {
  542. font-size: 24rpx;
  543. line-height: 32rpx;
  544. color: #999999;
  545. .head {
  546. display: flex;
  547. margin-bottom: 18rpx;
  548. color: #666666;
  549. .headCon{
  550. width: 500rpx;
  551. }
  552. }
  553. .tag {
  554. padding: 0 6rpx;
  555. border: 1rpx solid var(--view-theme);
  556. border-radius: 5rpx;
  557. font-size: 22rpx;
  558. line-height: 32rpx;
  559. height: 34rpx;
  560. color: var(--view-theme);
  561. }
  562. .name {
  563. flex: 1;
  564. min-width: 0;
  565. margin: 0 10rpx;
  566. font-weight: 500;
  567. font-size: 28rpx;
  568. color: #333333;
  569. }
  570. }
  571. .buyer {
  572. display: flex;
  573. align-items: center;
  574. margin-top: 34rpx;
  575. font-size: 26rpx;
  576. color: #888888;
  577. .avatar-group {
  578. margin-right: 10rpx;
  579. font-size: 0;
  580. .gengduo {
  581. display: inline-flex;
  582. justify-content: center;
  583. align-items: center;
  584. width: 40rpx;
  585. height: 40rpx;
  586. border-radius: 50%;
  587. margin-left: -12rpx;
  588. background-color: #EEEEEE;
  589. vertical-align: middle;
  590. .iconfont {
  591. font-size: 26rpx;
  592. color: #8E8E8E;
  593. }
  594. }
  595. }
  596. .avatar {
  597. width: 40rpx;
  598. height: 40rpx;
  599. border-radius: 50%;
  600. vertical-align: middle;
  601. +.avatar {
  602. margin-left: -12rpx;
  603. }
  604. }
  605. .button {
  606. display: flex;
  607. justify-content: center;
  608. align-items: center;
  609. width: 88rpx;
  610. height: 32rpx;
  611. border: 1px solid #CCCCCC;
  612. border-radius: 16rpx;
  613. margin-left: 20rpx;
  614. font-size: 20rpx;
  615. color: #666666;
  616. .iconfont {
  617. margin-right: 8rpx;
  618. font-size: 16rpx;
  619. color: #666666;
  620. }
  621. }
  622. }
  623. .button-group {
  624. display: flex;
  625. justify-content: center;
  626. margin-top: 34rpx;
  627. .button {
  628. display: flex;
  629. justify-content: center;
  630. align-items: center;
  631. width: 192rpx;
  632. height: 68rpx;
  633. border-radius: 34rpx;
  634. background-color: #EEEEEE;
  635. font-size: 26rpx;
  636. color: #666666;
  637. +.button {
  638. margin-left: 28rpx;
  639. }
  640. &.primary {
  641. background-color: var(--view-theme);
  642. color: #FFFFFF;
  643. }
  644. }
  645. }
  646. }
  647. .choice {
  648. .wrapper {
  649. border-radius: 14rpx;
  650. margin: 20rpx 30rpx;
  651. background-color: #FFFFFF;
  652. }
  653. .head {
  654. display: flex;
  655. align-items: center;
  656. height: 108rpx;
  657. padding: 0 26rpx;
  658. .name {
  659. flex: 1;
  660. min-width: 0;
  661. margin: 0 20rpx;
  662. overflow: hidden;
  663. white-space: nowrap;
  664. text-overflow: ellipsis;
  665. font-size: 28rpx;
  666. color: #333333;
  667. }
  668. }
  669. .avatar {
  670. display: block;
  671. width: 42rpx;
  672. height: 42rpx;
  673. border-radius: 50%;
  674. }
  675. .button {
  676. transform: rotateZ(360deg);
  677. padding: 15rpx 26rpx;
  678. border: 1rpx solid #CCCCCC;
  679. border-radius: 26rpx;
  680. font-size: 24rpx;
  681. line-height: 24rpx;
  682. color: #333333;
  683. +.button {
  684. margin-left: 10rpx;
  685. }
  686. &.remove {
  687. color: #888888;
  688. }
  689. &.select {
  690. border-color: var(--view-theme);
  691. background-color: var(--view-minorColorT);
  692. color: var(--view-theme);
  693. }
  694. &.primary {
  695. border-color: var(--view-theme);
  696. background-color: var(--view-minorColorT);
  697. color: var(--view-theme);
  698. }
  699. }
  700. .body {
  701. position: relative;
  702. padding: 15rpx 0;
  703. font-size: 28rpx;
  704. line-height: 42rpx;
  705. color: #333333;
  706. &::before {
  707. content: "";
  708. position: absolute;
  709. top: 0;
  710. right: 26rpx;
  711. left: 26rpx;
  712. border-top: 1rpx solid #EEEEEE;
  713. }
  714. .text {
  715. flex: 1;
  716. min-width: 0;
  717. margin: 0 22rpx;
  718. .name {
  719. overflow: hidden;
  720. white-space: nowrap;
  721. text-overflow: ellipsis;
  722. font-size: 28rpx;
  723. }
  724. .attr {
  725. margin-top: 8rpx;
  726. font-size: 20rpx;
  727. color: #999999;
  728. }
  729. }
  730. }
  731. .item {
  732. display: flex;
  733. padding: 15rpx 26rpx;
  734. +.item {
  735. // margin-top: 30rpx;
  736. }
  737. &.gray {
  738. background-color: #EEEEEE;
  739. }
  740. }
  741. .image {
  742. width: 120rpx;
  743. height: 120rpx;
  744. border-radius: 6rpx;
  745. }
  746. .number {
  747. text-align: right;
  748. color: #999999;
  749. }
  750. .total {
  751. display: flex;
  752. justify-content: flex-end;
  753. align-items: center;
  754. padding: 0 26rpx;
  755. margin-top: 30rpx;
  756. }
  757. .money {
  758. font-weight: 600;
  759. color: var(--view-theme);
  760. }
  761. }
  762. .footer {
  763. position: fixed;
  764. right: 0;
  765. bottom: 0;
  766. left: 0;
  767. z-index: 9;
  768. padding-bottom: constant(safe-area-inset-bottom);
  769. padding-bottom: env(safe-area-inset-bottom);
  770. background-color: #FFFFFF;
  771. .footer-wrap {
  772. display: flex;
  773. align-items: center;
  774. height: 100rpx;
  775. padding: 0 30rpx 0 26rpx;
  776. }
  777. .total {
  778. flex: 1;
  779. min-width: 0;
  780. font-size: 28rpx;
  781. color: #333333;
  782. }
  783. .money {
  784. color: var(--view-theme);
  785. }
  786. .button {
  787. display: flex;
  788. justify-content: center;
  789. align-items: center;
  790. width: 192rpx;
  791. height: 70rpx;
  792. border-radius: 35rpx;
  793. background-color: var(--view-theme);
  794. font-size: 28rpx;
  795. color: #FFFFFF;
  796. }
  797. }
  798. .status {
  799. padding: 34rpx 0 32rpx;
  800. border-radius: 14rpx;
  801. margin: 20rpx 30rpx;
  802. background-color: #FFFFFF;
  803. .head {
  804. display: flex;
  805. justify-content: center;
  806. align-items: center;
  807. font-size: 28rpx;
  808. line-height: 28rpx;
  809. color: #333333;
  810. }
  811. .body {
  812. display: flex;
  813. .item {
  814. flex: 1;
  815. min-width: 0;
  816. margin-top: 40rpx;
  817. text-align: center;
  818. font-size: 24rpx;
  819. line-height: 24rpx;
  820. color: #888888;
  821. &:first-child .number::before {
  822. display: none;
  823. }
  824. &.active {
  825. color: #333333;
  826. .number {
  827. border-color: var(--view-theme);
  828. background-color: var(--view-theme);
  829. color: #FFFFFF;
  830. }
  831. }
  832. }
  833. .number {
  834. position: relative;
  835. display: inline-flex;
  836. justify-content: center;
  837. align-items: center;
  838. width: 36rpx;
  839. height: 36rpx;
  840. border: 1rpx solid #CCCCCC;
  841. border-radius: 50%;
  842. margin-bottom: 20rpx;
  843. &::before {
  844. content: "";
  845. position: absolute;
  846. top: 50%;
  847. right: 100%;
  848. width: 160rpx;
  849. height: 1rpx;
  850. border-top: 1rpx dashed #D8D8D8;
  851. margin-right: 18rpx;
  852. }
  853. }
  854. }
  855. }
  856. .empty {
  857. height: 928rpx;
  858. padding-top: 120rpx;
  859. border-radius: 12rpx;
  860. margin: -50rpx 30rpx 40rpx;
  861. background-color: #FFFFFF;
  862. .image {
  863. display: block;
  864. width: 414rpx;
  865. height: 256rpx;
  866. margin: 0 auto;
  867. }
  868. .tips {
  869. margin-top: 54rpx;
  870. text-align: center;
  871. font-size: 26rpx;
  872. line-height: 36rpx;
  873. color: #999999;
  874. }
  875. .button {
  876. transform: rotateZ(360deg);
  877. display: flex;
  878. justify-content: center;
  879. align-items: center;
  880. width: 507rpx;
  881. height: 85rpx;
  882. border: 1rpx solid var(--view-theme);
  883. border-radius: 43rpx;
  884. margin: 160rpx auto 0;
  885. font-size: 30rpx;
  886. color: var(--view-theme);
  887. }
  888. }
  889. .share-box {
  890. z-index: 1000;
  891. position: fixed;
  892. left: 0;
  893. top: 0;
  894. width: 100%;
  895. height: 100%;
  896. image {
  897. width: 100%;
  898. height: 100%;
  899. }
  900. }
  901. </style>