detail.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  5. <scroll-view scroll-y="true" class="scroll-view">
  6. <view class="list-scroll-view">
  7. <view class="one_1">
  8. <swiper class="swiper" circular :indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#FB1438" :autoplay="true" :interval="3000" :duration="1000">
  9. <swiper-item class="list" v-for="(item,index) in info.goods.file" :key="index">
  10. <image class="image" :src="item.url" mode="aspectFit">
  11. </image>
  12. </swiper-item>
  13. </swiper>
  14. <!-- 是否关注商品 -->
  15. <view class="goodsColect">
  16. <text @tap="toGoodscolect" :class="['iconfont',goodsColect?'icon-yduishoucangshixin-copy':'icon-yduishoucangkongxin']"></text>
  17. </view>
  18. </view>
  19. <view class="one_2">
  20. <text class="money"><text>¥</text>{{info.specs&&info.specs.length>0?info.specs[0].sell_money:0}}</text>
  21. <text class="money"><text>¥</text>{{info.specs&&info.specs.length>0?info.specs[0].flow_money:0}}</text>
  22. </view>
  23. <view class="one_3">
  24. <view class="name">
  25. {{info.goods.name}}
  26. </view>
  27. <view class="brief">
  28. {{info.goods.shot_brief}}
  29. </view>
  30. <view class="money">
  31. <text>运费{{info.specs&&info.specs.length>0?info.specs[0].freight:0}}元</text>
  32. <text>{{info.goods.send_time}}内发货</text>
  33. </view>
  34. </view>
  35. <view class="one_4" @tap="toSpec">
  36. <view class="l">
  37. 选择规格
  38. </view>
  39. <view class="r">
  40. <text class="iconfont icon-jiantouyou"></text>
  41. </view>
  42. </view>
  43. <view class="one_5">
  44. <view class="l">
  45. <text @tap="toEvaluate">{{evaluate_num>0?`商品评价(${evaluate_num})`:`暂无评价`}}</text>
  46. </view>
  47. <view class="r">
  48. <text class="iconfont icon-jiantouyou"></text>
  49. </view>
  50. </view>
  51. <view class="one_6">
  52. <view class="one_6_1">
  53. <view class="shop_1">
  54. <image class="image" :src="info.shop.logo&&info.shop.logo.length>0?info.shop.logo[0].url:''" mode="aspectFit"></image>
  55. </view>
  56. <view class="shop_2">
  57. <view class="name">{{info.shop.name}}</view>
  58. <view class="num"><text>宝贝数:</text>{{info.shop.goods_num||0}}</view>
  59. </view>
  60. </view>
  61. <view class="one_6_2">
  62. <view class="score_1">
  63. <text>商品:</text>
  64. <text>{{info.shop.goods_score||5}}</text>
  65. <text>|</text>
  66. </view>
  67. <view class="score_1">
  68. <text>发货:</text>
  69. <text>{{info.shop.send_score||5}}</text>
  70. <text>|</text>
  71. </view>
  72. <view class="score_1">
  73. <text>服务:</text>
  74. <text>{{info.shop.service_score||5}}</text>
  75. </view>
  76. </view>
  77. <view class="one_6_3">
  78. <button size="mini" @tap="toShop">进入店铺</button>
  79. <button size="mini" @tap="toShopcolect">{{shopColect?'已关注':'关注'}}</button>
  80. </view>
  81. </view>
  82. <view class="one_7">
  83. <rich-text :nodes="info.goods.brief"></rich-text>
  84. </view>
  85. </view>
  86. </scroll-view>
  87. </view>
  88. <view class="two">
  89. <uni-goods-nav :options="options" :button-group="buttonGroup" @click="toNavleft" @buttonClick="toNavright" />
  90. </view>
  91. </view>
  92. <!-- 跳转菜单 -->
  93. <view class="bar_1">
  94. <text @tap="toMenubar" class="iconfont icon-gengduo"></text>
  95. </view>
  96. <view class="bar_2" v-if="is_menu">
  97. <view class="list" v-for="(item,index) in barList" :key="index" v-if="item.is_use=='0'" @click="toPath(item)">
  98. <image class="image" :src="item.normal&&item.normal.length>0?item.normal[0].url:''"></image>
  99. <text class="name"> {{item.name}}</text>
  100. </view>
  101. </view>
  102. <!-- 规格 -->
  103. <uni-popup ref="specShow" background-color="#fff" type="bottom" :is-mask-click="false">
  104. <view class="popup">
  105. <view class="close">
  106. <text @click="toClose" class="iconfont icon-shanchu"></text>
  107. </view>
  108. <view class="info_1" v-if="popupShow=='1'">
  109. <view class="info_1">
  110. <scroll-view scroll-y="true" class="scroll-view">
  111. <view class="list-scroll-view">
  112. <view class="one">
  113. <view class="one_1">
  114. <view class="l">
  115. <image class="image" :src="specsInfo.file.length>0?specsInfo.file[0].url:info.goods.file[0].url" mode="aspectFill" @tap="imageView(specsInfo.file)"></image>
  116. </view>
  117. <view class="r">
  118. <view class="money">
  119. <text class="money_1"><text>¥</text>{{specsInfo.sell_money}}</text>
  120. <text class="money_1"><text>¥</text>{{specsInfo.flow_money}}</text>
  121. </view>
  122. <view class="other_1">
  123. <text>已选:</text>
  124. <text>{{specsInfo.name}}</text>
  125. </view>
  126. </view>
  127. </view>
  128. <view class="one_2">
  129. <view class="one_2_1">
  130. 规格
  131. </view>
  132. <view class="one_2_2">
  133. <view :class="['list',`${item.num==0?'zero_list':''}`,`${is_specs==index?'one_list':''}`]" v-for="(item,index) in info.specs" :key="index" @tap="toSpecs(item)">
  134. <text>{{item.name}}</text>
  135. </view>
  136. </view>
  137. </view>
  138. <view class="one_3">
  139. <view class="one_3_1">
  140. <text>数量</text>
  141. </view>
  142. <view class="one_3_1">
  143. <uni-number-box v-model="buy_num" @change="toCount" :min="1" :max="specsInfo.num">
  144. </uni-number-box>
  145. </view>
  146. <view class="one_3_1">
  147. <text>库存{{specsInfo.num||0}}</text>
  148. </view>
  149. </view>
  150. </view>
  151. </view>
  152. </scroll-view>
  153. </view>
  154. <view class="info_2">
  155. <button size="mini" v-if="btn_type==''||btn_type=='0'" @tap="toMarket">加入购物车</button>
  156. <button size="mini" v-if="btn_type==''||btn_type=='1'" @tap="toBuy">立即购买</button>
  157. <button size="mini" v-if="specsInfo.can_group=='0'" @tap="toGroup">参团</button>
  158. </view>
  159. </view>
  160. </view>
  161. </uni-popup>
  162. </mobile-frame>
  163. </template>
  164. <script>
  165. export default {
  166. data() {
  167. return {
  168. // 商品id
  169. id: '',
  170. // 分享人id
  171. inviter: '',
  172. // 当前用户信息
  173. user: {},
  174. // 是否关注商品
  175. goodsColect: false,
  176. // 是否关注店铺
  177. shopColect: false,
  178. // 评价数
  179. evaluate_num: 2,
  180. // 商品详情
  181. info: {},
  182. // 底部菜单
  183. options: [ //
  184. {
  185. icon: 'shop',
  186. text: '店铺',
  187. type: 'shop',
  188. route: 'pagesHome/shop/index',
  189. },
  190. {
  191. icon: 'cart',
  192. text: '购物车',
  193. type: 'market',
  194. route: 'pages/market/index',
  195. },
  196. ],
  197. buttonGroup: [ //
  198. {
  199. text: '加入购物车',
  200. backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
  201. color: '#fff',
  202. type: '0'
  203. },
  204. {
  205. text: '立即购买',
  206. backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
  207. color: '#fff',
  208. type: '1'
  209. }
  210. ],
  211. // 系统菜单
  212. barList: [],
  213. is_menu: false,
  214. // 规格
  215. popupShow: '1',
  216. // 规格信息
  217. is_specs: 0,
  218. btn_type: '',
  219. specsInfo: {},
  220. // 购买数量
  221. buy_num: 1,
  222. };
  223. },
  224. onLoad: async function(e) {
  225. const that = this;
  226. that.$set(that, `id`, e.id || '635e4b5b42e87c7a2880d0a8');
  227. that.$set(that, `inviter`, e.inviter || '');
  228. await that.searchConfig();
  229. await that.search();
  230. },
  231. onShow: async function() {
  232. const that = this;
  233. await that.watchLogin();
  234. that.configShare();
  235. },
  236. methods: {
  237. // 查询系统设置
  238. searchConfig() {
  239. const that = this;
  240. uni.getStorage({
  241. key: 'config',
  242. success: function(res) {
  243. let data = res.data;
  244. if (data.bottom_menu && data.bottom_menu.list.length > 0) {
  245. let list = data.bottom_menu.list.sort((a, b) => {
  246. return a.sort - b.sort
  247. });
  248. that.$set(that, `barList`, list)
  249. }
  250. }
  251. })
  252. },
  253. // 查询用户信息
  254. watchLogin() {
  255. const that = this;
  256. uni.getStorage({
  257. key: 'token',
  258. success: async function(res) {
  259. let user = that.$jwt(res.data);
  260. if (user) that.$set(that, `user`, user);
  261. await that.searchOther();
  262. },
  263. fail: function(err) {
  264. console.log('暂无用户信息');
  265. }
  266. })
  267. },
  268. // 查询其他信息
  269. async searchOther() {
  270. const that = this;
  271. let user = that.user;
  272. let res;
  273. // 是否关注商品
  274. res = await that.$api(`/storeGoods/check`, `GET`, {
  275. customer: user._id,
  276. goods: that.id
  277. });
  278. if (res.errcode == '0') that.$set(that, `goodsColect`, res.data);
  279. // 是否关注店铺
  280. res = await that.$api(`/storeShop/check`, `GET`, {
  281. customer: user._id,
  282. shop: that.info.shop._id
  283. });
  284. if (res.errcode == '0') that.$set(that, `shopColect`, res.data)
  285. },
  286. // 查询商品信息
  287. async search() {
  288. const that = this;
  289. let id = that.id;
  290. if (id) {
  291. let res;
  292. res = await that.$api(`/viewGoods/goodsDetail`, `POST`, {
  293. id: id
  294. });
  295. if (res.errcode == '0') {
  296. let data = res.data;
  297. if (data.goods.brief) data.goods.brief = data.goods.brief.replace(/\<img/gi, '<img class="rich-img"');
  298. let specs = data.specs.sort((a, b) => {
  299. return a.sell_money - b.sell_money
  300. })
  301. data.specs = specs;
  302. that.$set(that, `info`, data);
  303. // 查询规格
  304. that.searchSpecs(data.specs);
  305. // 查询评价数
  306. that.searchRate(data);
  307. }
  308. } else {
  309. uni.showToast({
  310. title: '暂无商品信息',
  311. icon: 'none'
  312. })
  313. }
  314. },
  315. // 查询规格
  316. searchSpecs(e) {
  317. const that = this;
  318. if (e.length > 0) {
  319. let data = e.find(i => i.num > 0);
  320. let dataIndex = e.findIndex(i => i.id == data.id);
  321. if (data) {
  322. that.$set(that, `specsInfo`, data);
  323. that.$set(that, `is_specs`, dataIndex);
  324. }
  325. }
  326. },
  327. // 选择规格
  328. toSpecs(e) {
  329. const that = this;
  330. let specs = that.info.specs;
  331. if (e.num > 0) {
  332. let dataIndex = specs.findIndex(i => i.id == e.id);
  333. that.$set(that, `is_specs`, dataIndex);
  334. that.$set(that, `specsInfo`, e)
  335. that.$set(that, `buy_num`, 1);
  336. } else {
  337. uni.showToast({
  338. title: '库存量不足',
  339. icon: 'none'
  340. })
  341. }
  342. },
  343. // 计数器
  344. toCount(e) {
  345. const that = this;
  346. that.$set(that, `buy_num`, e)
  347. },
  348. // 查询评价数
  349. async searchRate(e) {
  350. const that = this;
  351. let res = await that.$api(`/goodsRate`, `GET`, {
  352. goods: e.goods._id
  353. })
  354. if (res.errcode == '0') that.$set(that, `evaluate_num`, res.total);
  355. },
  356. // 关注商品
  357. async toGoodscolect() {
  358. const that = this;
  359. let user = that.user;
  360. if (user && user._id) {
  361. let res = await that.$api(`/storeGoods`, `POST`, {
  362. customer: user._id,
  363. goods: that.id
  364. });
  365. if (res.errcode == '0') {
  366. uni.showToast({
  367. title: res.data.msg,
  368. icon: 'none'
  369. })
  370. that.$set(that, `goodsColect`, res.data.result)
  371. }
  372. } else {
  373. uni.showToast({
  374. title: '暂无账号,无法收藏商品',
  375. icon: 'none'
  376. })
  377. }
  378. },
  379. // 选择规格
  380. toSpec() {
  381. const that = this;
  382. this.$set(that, `popupShow`, '1')
  383. that.$refs.specShow.open();
  384. },
  385. // 加入购物车
  386. async toMarket() {
  387. const that = this;
  388. let user = that.user;
  389. let info = that.info;
  390. let specsInfo = that.specsInfo;
  391. if (user && user._id) {
  392. let obj = {
  393. customer: user._id,
  394. shop: info.shop._id,
  395. goods: info.goods._id,
  396. goodsSpec: specsInfo._id,
  397. num: that.buy_num,
  398. inviter: that.inviter
  399. }
  400. let res = await that.$api(`/cart`, 'POST', obj)
  401. if (res.errcode == '0') {
  402. uni.showToast({
  403. title: `加入购物车成功`,
  404. icon: 'none'
  405. })
  406. that.toClose();
  407. } else {
  408. uni.showToast({
  409. title: res.errmsg,
  410. icon: 'none'
  411. })
  412. }
  413. } else {
  414. uni.navigateTo({
  415. url: `/pages/login/index`
  416. })
  417. }
  418. },
  419. // 立即购买
  420. async toBuy() {
  421. const that = this;
  422. let user = that.user;
  423. let info = that.info;
  424. let specsInfo = that.specsInfo;
  425. if (user && user._id) {
  426. let obj = {
  427. customer: user._id,
  428. shop: info.shop._id,
  429. goods: info.goods._id,
  430. goodsSpec: specsInfo._id,
  431. num: that.buy_num,
  432. inviter: that.inviter
  433. }
  434. let res = await that.$api(`/util/checkCanBuy`, 'POST', obj)
  435. if (res.errcode == '0') {
  436. if (res.data.result == true) {
  437. uni.navigateTo({
  438. url: `/pagesHome/order/order?key=${res.data.key}`
  439. })
  440. } else {
  441. uni.showToast({
  442. title: res.data.msg,
  443. icon: 'none'
  444. })
  445. }
  446. } else {
  447. uni.showToast({
  448. title: res.errmsg,
  449. icon: 'none'
  450. })
  451. }
  452. } else {
  453. uni.navigateTo({
  454. url: `/pages/login/index`
  455. })
  456. }
  457. },
  458. // 参团
  459. toGroup() {
  460. const that = this;
  461. let specs_id = that.specsInfo._id;
  462. let id = that.id;
  463. uni.navigateTo({
  464. url: `/pagesHome/group/index?specs_id=${specs_id}&goods_id=${id}`
  465. })
  466. },
  467. // 关闭弹框
  468. toClose() {
  469. const that = this;
  470. that.$set(that, `btn_type`, '');
  471. that.$refs.specShow.close();
  472. },
  473. // 评价
  474. toEvaluate() {
  475. const that = this;
  476. uni.navigateTo({
  477. url: `/pagesHome/order/appraise?id=${that.id}`
  478. })
  479. },
  480. // 进入店铺
  481. toShop() {
  482. const that = this;
  483. let info = that.info;
  484. uni.navigateTo({
  485. url: `/pagesHome/shop/index?id=${info.shop._id}`
  486. })
  487. },
  488. // 关注店铺
  489. async toShopcolect() {
  490. const that = this;
  491. let user = that.user;
  492. if (user && user._id) {
  493. let res = await that.$api(`/storeShop`, `POST`, {
  494. customer: user._id,
  495. shop: that.info.shop._id
  496. });
  497. if (res.errcode == '0') {
  498. uni.showToast({
  499. title: res.data.msg,
  500. icon: 'none'
  501. })
  502. that.$set(that, `shopColect`, res.data.result)
  503. }
  504. } else {
  505. uni.showToast({
  506. title: '暂无账号,无法关注商铺',
  507. icon: 'none'
  508. })
  509. }
  510. },
  511. // 店铺,购物车
  512. toNavleft(e) {
  513. const that = this;
  514. if (e.content.type == 'shop') {
  515. that.toShop();
  516. } else if (e.content.type == 'market') {
  517. let obj = {
  518. route: e.content.route
  519. }
  520. that.toPath(obj)
  521. }
  522. },
  523. // 加入购物车,立即购买
  524. toNavright(e) {
  525. const that = this;
  526. this.$set(that, `popupShow`, '1');
  527. that.$set(that, `btn_type`, e.content.type);
  528. that.$refs.specShow.open();
  529. },
  530. // 右侧菜单
  531. toMenubar() {
  532. const that = this;
  533. that.$set(that, `is_menu`, that.is_menu ? false : true)
  534. },
  535. toPath(e) {
  536. let url = `/${e.route}`;
  537. uni.reLaunch({
  538. url
  539. })
  540. },
  541. // 配置分享内容
  542. configShare() {
  543. const that = this;
  544. let id = that.id;
  545. let inviter = that.user && that.user._id ? that.user._id : '';
  546. let title = that.info && that.info.goods ? that.info.goods.name : '';
  547. let imageUrl = that.info && that.info.goods ? that.info.goods.file[0].url : '';
  548. that.$config.share = {
  549. title: title,
  550. path: `/pagesHome/order/detail?id=${id}&inviter=${inviter}`,
  551. imageUrl: imageUrl
  552. }
  553. },
  554. // 图片预览
  555. imageView(e) {
  556. const that = this;
  557. let goods = that.info.goods;
  558. let file = [];
  559. if (e && e.length > 0) file = e;
  560. else file = goods.file;
  561. file = file.map(i => i.url);
  562. uni.previewImage({
  563. current: 0,
  564. urls: file,
  565. })
  566. }
  567. }
  568. }
  569. </script>
  570. <style lang="scss">
  571. .main {
  572. display: flex;
  573. flex-direction: column;
  574. width: 100vw;
  575. height: 100vh;
  576. .one {
  577. position: relative;
  578. flex-grow: 1;
  579. .one_1 {
  580. border-bottom: 0.5vw solid var(--f9Color);
  581. swiper {
  582. height: 44vh !important;
  583. }
  584. .list {
  585. border-radius: 5px;
  586. .image {
  587. width: 100%;
  588. height: 100%;
  589. border-radius: 5px;
  590. background-color: #fff;
  591. }
  592. }
  593. .goodsColect {
  594. position: fixed;
  595. top: 2vw;
  596. right: 3vw;
  597. background-color: #858585;
  598. border-radius: 90px;
  599. text {
  600. font-size: 30px;
  601. }
  602. }
  603. }
  604. .one_2 {
  605. border-bottom: 0.5vw solid var(--f9Color);
  606. padding: 2vw;
  607. .money {
  608. font-size: 20px;
  609. padding: 0 1vw 0 0;
  610. color: #ff0000;
  611. font-weight: bold;
  612. text {
  613. font-size: 14px;
  614. }
  615. }
  616. .money:last-child {
  617. font-size: 16px;
  618. color: #858585;
  619. text-decoration: line-through;
  620. }
  621. }
  622. .one_3 {
  623. border-bottom: 0.5vw solid var(--f9Color);
  624. padding: 2vw;
  625. .name {
  626. font-size: 17px;
  627. font-weight: bold;
  628. margin: 0 0 2vw 0;
  629. }
  630. .brief {
  631. font-size: 14px;
  632. color: #858585;
  633. margin: 0 0 1vw 0;
  634. }
  635. .money {
  636. font-size: 13px;
  637. color: #858585;
  638. text {
  639. padding: 0 2vw 0 0;
  640. }
  641. }
  642. }
  643. .one_4 {
  644. display: flex;
  645. justify-content: space-between;
  646. padding: 2vw;
  647. border-bottom: 0.5vw solid var(--f9Color);
  648. font-size: 14px;
  649. }
  650. .one_5 {
  651. display: flex;
  652. justify-content: space-between;
  653. padding: 2vw;
  654. border-bottom: 0.5vw solid var(--f9Color);
  655. font-size: 14px;
  656. }
  657. .one_6 {
  658. padding: 2vw;
  659. border-bottom: 0.5vw solid var(--f9Color);
  660. .one_6_1 {
  661. margin: 0 0 1vw 0;
  662. display: flex;
  663. .shop_1 {
  664. width: 15vw;
  665. height: 15vw;
  666. border: 1px solid #f1f1f1;
  667. .image {
  668. width: 100%;
  669. height: 100%;
  670. }
  671. }
  672. .shop_2 {
  673. width: 78vw;
  674. padding: 0 0 0 2vw;
  675. .name {
  676. font-size: 14px;
  677. margin: 0 0 1vw 0;
  678. }
  679. .num {
  680. font-size: 12px;
  681. color: #858585;
  682. text:last-child {
  683. color: #000;
  684. }
  685. }
  686. }
  687. }
  688. .one_6_2 {
  689. margin: 0 0 1vw 0;
  690. display: flex;
  691. justify-content: space-between;
  692. padding: 2vw 0;
  693. .score_1 {
  694. width: 33vw;
  695. text-align: center;
  696. font-size: 14px;
  697. color: #858585;
  698. text:nth-child(2) {
  699. color: #ff0000;
  700. }
  701. text:nth-child(3) {
  702. float: right;
  703. }
  704. }
  705. }
  706. .one_6_3 {
  707. text-align: center;
  708. button {
  709. margin: 0 2vw;
  710. }
  711. }
  712. }
  713. .one_7 {
  714. padding: 2vw;
  715. .rich-img {
  716. width: 100% !important;
  717. display: block;
  718. }
  719. }
  720. }
  721. .two {
  722. width: 100vw;
  723. height: 8vh;
  724. overflow: hidden;
  725. }
  726. }
  727. .scroll-view {
  728. position: absolute;
  729. top: 0;
  730. left: 0;
  731. right: 0;
  732. bottom: 0;
  733. .list-scroll-view {
  734. display: flex;
  735. flex-direction: column;
  736. }
  737. }
  738. .bar_1 {
  739. position: fixed;
  740. right: 2vw;
  741. bottom: 20vw;
  742. text {
  743. background-color: #858585;
  744. border-radius: 90px;
  745. font-size: 30px;
  746. }
  747. }
  748. .bar_2 {
  749. position: fixed;
  750. right: 2vw;
  751. bottom: 28vw;
  752. width: 27vw;
  753. background: #ffffff;
  754. padding: 0 2vw;
  755. box-shadow: 0 0 5px #858585;
  756. .list {
  757. display: flex;
  758. border-bottom: 1px solid #f1f1f1;
  759. padding: 1vw 0;
  760. .image {
  761. width: 8vw;
  762. height: 8vw;
  763. }
  764. .name {
  765. font-size: 14px;
  766. position: relative;
  767. top: 2vw;
  768. left: 2vw;
  769. }
  770. }
  771. .list:last-child {
  772. border-bottom: none;
  773. }
  774. }
  775. .uni-popup {
  776. z-index: 9999 !important;
  777. }
  778. .popup {
  779. display: flex;
  780. flex-direction: column;
  781. width: 100vw;
  782. height: 60vh;
  783. .close {
  784. text-align: right;
  785. padding: 2vw;
  786. }
  787. .info_1 {
  788. position: relative;
  789. display: flex;
  790. flex-direction: column;
  791. height: 54vh;
  792. .info_1 {
  793. position: relative;
  794. flex-grow: 1;
  795. .one {
  796. padding: 2vw;
  797. .one_1 {
  798. display: flex;
  799. margin: 0 0 2vw 0;
  800. padding: 0 0 2vw 0;
  801. border-bottom: 0.5vw solid var(--f9Color);
  802. .l {
  803. width: 25vw;
  804. height: 25vw;
  805. .image {
  806. width: 100%;
  807. height: 100%;
  808. border-radius: 5px;
  809. }
  810. }
  811. .r {
  812. width: 70vw;
  813. padding: 0 0 0 2vw;
  814. .money {
  815. margin: 0 0 2vw 0;
  816. .money_1 {
  817. font-size: 20px;
  818. color: #ff0000;
  819. padding: 0 2vw 0 0;
  820. text {
  821. font-size: 14px;
  822. }
  823. }
  824. .money_1:last-child {
  825. font-size: 16px;
  826. color: #858585;
  827. text-decoration: line-through;
  828. }
  829. }
  830. .other_1 {
  831. font-size: 15px;
  832. color: #858585;
  833. text:last-child {
  834. color: #000000;
  835. }
  836. }
  837. }
  838. }
  839. .one_2 {
  840. margin: 0 0 2vw 0;
  841. border-bottom: 0.5vw solid var(--f9Color);
  842. .one_2_1 {
  843. font-size: 14px;
  844. margin: 0 0 2vw 0;
  845. }
  846. .one_2_2 {
  847. display: flex;
  848. flex-wrap: wrap;
  849. .list {
  850. background-color: #f9f9f9;
  851. margin: 0 2vw 2vw 0;
  852. padding: 0.5vw 1vw;
  853. border-radius: 5px;
  854. text {
  855. font-size: 14px;
  856. color: #000;
  857. }
  858. }
  859. .zero_list {
  860. background-color: #f5f5f5;
  861. text {
  862. color: #858585;
  863. }
  864. }
  865. .one_list {
  866. background-color: red;
  867. text {
  868. color: #fff;
  869. }
  870. }
  871. }
  872. }
  873. .one_3 {
  874. display: flex;
  875. .one_3_1 {
  876. margin: 0 2vw 0 0;
  877. text {
  878. font-size: 14px;
  879. color: #858585;
  880. }
  881. }
  882. }
  883. }
  884. }
  885. .info_2 {
  886. text-align: center;
  887. height: 7vh;
  888. padding: 2vw 0;
  889. border-top: 0.5vw solid var(--f9Color);
  890. button {
  891. line-height: 3;
  892. margin: 0 2vw;
  893. padding: 0.3vw 6vw;
  894. background-color: #ff0000;
  895. color: #fff;
  896. font-weight: bold;
  897. }
  898. }
  899. }
  900. }
  901. </style>