order.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014
  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" @tap="toChoose">
  8. <text class="localicon iconfont icon-dingweixiao"></text>
  9. <view class="other" v-if="address._id">
  10. <view class="name">
  11. <text>{{address.name}},</text>{{address.phone}}
  12. </view>
  13. <view class="other_1">
  14. <text>{{address.province}}</text><text>{{address.city}}</text>
  15. <text>{{address.area}}</text><text>{{address.address}}</text>
  16. </view>
  17. </view>
  18. <view class="address" v-else><text>请选择一个收货地址</text></view>
  19. <text class="iconfont icon-jiantouyou"></text>
  20. </view>
  21. <view class="one_2">
  22. <view class="list" v-for="(item,index) in orderList" :key="index">
  23. <view class="list_1">
  24. <view class="l">
  25. <text class="iconfont icon-shangdian"></text>
  26. <text>{{item.shop_name}}</text>
  27. </view>
  28. </view>
  29. <view class="list_2" v-for="(tag,index) in item.goods" :key="index">
  30. <view class="list_2_1">
  31. <view class="l">
  32. <image class="image" :src="tag.file&&tag.file.length>0?tag.file[0].url:''"
  33. mode=""></image>
  34. </view>
  35. <view class="c">
  36. <view class="name">
  37. {{tag.goods_name}}
  38. </view>
  39. <view class="Spec">
  40. 规格:{{tag.goodsSpec_name}}
  41. </view>
  42. </view>
  43. <view class="r">
  44. <view class="price" v-if="type=='0'">
  45. ¥{{tag.price}}
  46. </view>
  47. <view v-else class="price">
  48. ¥{{tag.group_sell_money}}
  49. </view>
  50. <view class="num">
  51. ×{{tag.num}}
  52. </view>
  53. </view>
  54. </view>
  55. <view class="list_2_2" v-if="tag.gift.length>0">赠品</view>
  56. <view class="list_2_3" v-if="tag.gift.length>0" v-for="(tags,indexx) in tag.gift"
  57. :key="indexx">
  58. <view class="left">
  59. <view class="name">
  60. {{tags.goods_name}}
  61. </view>
  62. <view class="Spec">
  63. 规格:{{tags.spec_name}}
  64. </view>
  65. <view class="Spec">
  66. 说明:{{tags.desc}}
  67. </view>
  68. </view>
  69. <view class="right">
  70. <view class="price">
  71. ¥{{tags.money||0}}
  72. </view>
  73. <view class="num">
  74. ×{{tags.num}}
  75. </view>
  76. </view>
  77. </view>
  78. </view>
  79. <view class="list_3">
  80. <view class="other">
  81. <view class="other_1">配送方式</view>
  82. <view class="other_2"><text class="iconfont icon-duihao"></text>快递配送</view>
  83. </view>
  84. <view class="other">
  85. <view class="other_1">运费</view>
  86. <view class="other_2" v-if="!item.freight_total==0">¥{{item.freight_total}}
  87. </view>
  88. <view class="other_2" v-else>包邮</view>
  89. </view>
  90. <view class="other">
  91. <view class="other_1">订单备注</view>
  92. <view class="other_3">
  93. <input type="text" v-model="item.remarks" placeholder="选填,可填写您与卖家达成一致的要求" />
  94. </view>
  95. </view>
  96. </view>
  97. </view>
  98. <view class="other" v-for="(item,index) in total_detail" :key="index">
  99. <view class="other_1">{{item.zh}}</view>
  100. <view class="other_2">¥{{item.money}}</view>
  101. </view>
  102. <view class="other" v-if="type=='0'">
  103. <view class="other_1">优惠劵</view>
  104. <view class="other_2" @click="toCoupon" v-if="couponList.length">
  105. {{coupon_name||'请选择优惠劵'}}
  106. </view>
  107. <view class="other_2" v-else>暂无优惠劵使用</view>
  108. </view>
  109. <view class="other" v-if="total>0&&actInfo" @tap="toAddGoods">
  110. <view class="other_1">加购商品</view>
  111. <view class="other_4">去加购></view>
  112. </view>
  113. <view class="act" v-if="plus_goods.length>0">
  114. <view class="act_1">您已选择商品为</view>
  115. <view class="act_2">
  116. <view class="plusList" v-for="(item,index) in plusList" :key="index">
  117. <image class="image" :src="item.file.length>0?item.file[0].url:item.file[0].url"
  118. mode="aspectFill"></image>
  119. <view class="name">{{item.goods_name}}</view>
  120. <view class="money">
  121. <text class="text_1">¥{{item.flow_money}}</text>
  122. <text class="text_2">¥{{item.config.plus_money||item.sell_money}}</text>
  123. </view>
  124. </view>
  125. <view class="bottom" @tap="toOpen">
  126. <text v-if="plus_goods.length>3"
  127. :class="[change==false?'iconfont icon-xiajiantou-copy':'iconfont icon-shangjiantou-copy']"></text>
  128. </view>
  129. </view>
  130. </view>
  131. </view>
  132. </view>
  133. </scroll-view>
  134. </view>
  135. <view class="two">
  136. <view class="two_1">
  137. <view>实付金额:</view>
  138. <view>¥{{goods_total}}</view>
  139. </view>
  140. <view class="two_2">
  141. <text @tap="toSubmit">提交订单</text>
  142. </view>
  143. </view>
  144. </view>
  145. <uni-popup ref="popup" background-color="#fff" type="bottom">
  146. <view class="popup" v-if="popup.type=='1'">
  147. <scroll-view scroll-y="true" class="scroll-view">
  148. <discount :Style="Style" :couponList="couponList" @toDiscount="toDiscount"></discount>
  149. </scroll-view>
  150. </view>
  151. </uni-popup>
  152. <uni-drawer ref="showRight" :mask="false" :width="width" mode="right" :mask-click="false">
  153. <scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
  154. <view class="act">
  155. <view class="act_1">
  156. 订单已满<text>{{actInfo.plus_money}}</text>元,为你推荐优惠商品搭配
  157. </view>
  158. <view class="act_2">
  159. <checkbox-group @change="checkboxChange">
  160. <label class="actList" v-for="(item,index) in actList" :key="index">
  161. <image class="image" :src="item.file.length>0?item.file[0].url:item.file[0].url"
  162. mode="aspectFill"></image>
  163. <view class="name">
  164. <view class="some">{{item.goods_name}}</view>
  165. <view class="some">店铺:{{item.shop_name}}</view>
  166. <view class="some">规格:{{item.spec_name}}</view>
  167. </view>
  168. <view class="money">
  169. <text class="text_1">¥{{item.flow_money||0}}</text>
  170. <text class="text_2">¥{{item.config.plus_money||item.sell_money}}</text>
  171. </view>
  172. <view class="checkbox">
  173. <checkbox color="#FB1438" style="transform:scale(0.7)" :value="item._id"
  174. :checked="item.checked" />
  175. </view>
  176. </label>
  177. </checkbox-group>
  178. </view>
  179. <view class="bottom">
  180. <button @click="closeDrawer('define')" size="mini">确认加购</button>
  181. <button @click="closeDrawer('cancel')" size="mini">取消加购</button>
  182. </view>
  183. </view>
  184. </scroll-view>
  185. </uni-drawer>
  186. </mobile-frame>
  187. </template>
  188. <script>
  189. import discount from '@/components/discount/index.vue';
  190. export default {
  191. components: {
  192. discount
  193. },
  194. data() {
  195. return {
  196. // 设备平台信息
  197. system: {},
  198. popup: {
  199. type: '1'
  200. },
  201. Style: {
  202. btn: true
  203. },
  204. user: {},
  205. key: '',
  206. address: {},
  207. orderList: [],
  208. shop: [],
  209. goods_total: 0,
  210. // 金额明细
  211. total_detail: [],
  212. // 收货地址
  213. addressList: [],
  214. // 优惠劵
  215. couponList: [],
  216. coupon: [],
  217. // 优惠劵名称
  218. coupon_name: '',
  219. // 是否开团
  220. type: '0',
  221. // 团id
  222. group_id: '',
  223. // 分享人id
  224. inviter: '',
  225. // 活动商品
  226. actList: [],
  227. // 加价购活动
  228. actInfo: {},
  229. // 加购商品
  230. plus_goods: [],
  231. total: 0,
  232. page: 0,
  233. skip: 0,
  234. limit: 10,
  235. // 抽屉
  236. width: '100%',
  237. change: false,
  238. // 显示加购商品
  239. plus_total: 3,
  240. };
  241. },
  242. onLoad: function(e) {
  243. const that = this;
  244. uni.$on("id", async (id) => {
  245. let arr = await that.$api(`/address/${id}`, `GET`)
  246. if (arr.errcode == '0') {
  247. that.$set(that, `address`, arr.data)
  248. }
  249. })
  250. that.$set(that, `key`, e.key || '');
  251. that.$set(that, `group_id`, e.group_id || '');
  252. that.watchLogin()
  253. },
  254. computed: {
  255. plusList() { // 计算属性使用切片生成新数组
  256. let data = [];
  257. // 大于三条,使用切片,返回新数组
  258. if (this.plus_goods.length > 3) {
  259. data = this.plus_goods.slice(0, this.plus_total);
  260. return data;
  261. } else {
  262. // 否则使用原来数组,不进行切片处理
  263. data = this.plus_goods
  264. return data;
  265. }
  266. },
  267. },
  268. methods: {
  269. // 监听用户是否登录
  270. watchLogin() {
  271. const that = this;
  272. uni.getStorage({
  273. key: 'token',
  274. success: function(res) {
  275. let user = that.$jwt(res.data);
  276. that.$set(that, `user`, user);
  277. // 设备平台信息
  278. let config = that.$config;
  279. that.$set(that, `system`, config.system);
  280. that.search()
  281. },
  282. fail: function(err) {
  283. uni.navigateTo({
  284. url: `/pages/login/index`
  285. })
  286. }
  287. })
  288. },
  289. // 查询列表
  290. async search() {
  291. const that = this;
  292. let user = that.user;
  293. const res = await that.$api(`/address`, 'GET', {
  294. customer: user._id
  295. })
  296. if (res.errcode == '0') {
  297. that.$set(that, `addressList`, res.data.reverse());
  298. }
  299. const arr = await that.$api(`/order/toMakeOrder`, 'POST', {
  300. key: that.key
  301. })
  302. if (arr.errcode == '0') {
  303. // 查询活动商品列表
  304. let act;
  305. act = arr.data.actList.find(i => i.platform_act_type == '4')
  306. if (act) {
  307. that.searchAct(act);
  308. that.$set(that, `actInfo`, act);
  309. arr.data.orderTotal.push({
  310. zh: "加购总价",
  311. key: 'plus',
  312. money: 0
  313. })
  314. }
  315. // 分享人id
  316. that.$set(that, `inviter`, arr.data.inviter);
  317. // 地址
  318. that.$set(that, `address`, arr.data.address);
  319. // 订单
  320. that.$set(that, `orderList`, arr.data.goodsData);
  321. // 总价
  322. that.$set(that, `total_detail`, arr.data.orderTotal);
  323. that.$set(that, `type`, arr.data.type);
  324. this.computedTotal();
  325. // 优惠劵
  326. that.$set(that, `couponList`, arr.data.couponList);
  327. }
  328. },
  329. // 查询活动商品列表
  330. async searchAct(e) {
  331. const that = this;
  332. let platform_act = e.platform_act;
  333. let info = {
  334. skip: that.skip,
  335. limit: that.limit,
  336. platform_act: platform_act,
  337. goods_type: 'plus'
  338. }
  339. let res = await that.$api(`/goodsJoinAct`, 'GET', {
  340. ...info,
  341. })
  342. if (res.errcode == '0') {
  343. let list = [...that.actList, ...res.data];
  344. that.$set(that, `actList`, list)
  345. that.$set(that, `total`, res.total)
  346. }
  347. },
  348. // 使用优惠劵
  349. toDiscount(e) {
  350. const that = this;
  351. that.$set(that, 'coupon_name', e.name)
  352. that.coupon.push(e._id)
  353. that.$refs.popup.close();
  354. that.computedTotal();
  355. },
  356. // 选择收货地址
  357. toChoose() {
  358. const that = this;
  359. if (that.address?._id) {
  360. uni.navigateTo({
  361. url: `/pagesMy/address/index?type=${"shopping"}&id=${that.address._id}`
  362. })
  363. } else {
  364. uni.navigateTo({
  365. url: `/pagesMy/address/index?type=${"shopping"}`
  366. })
  367. }
  368. },
  369. // 选择优惠劵
  370. toCoupon() {
  371. const that = this;
  372. that.$set(that.popup, 'type', '1')
  373. that.$set(that, 'coupon', [])
  374. that.$refs.popup.open();
  375. },
  376. // 选择活动商品
  377. checkboxChange(e) {
  378. const that = this;
  379. var actList = that.actList,
  380. values = e.detail.value;
  381. for (var i = 0, lenI = actList.length; i < lenI; ++i) {
  382. const item = actList[i]
  383. if (values.includes(item._id)) that.$set(item, 'checked', true)
  384. else that.$set(item, 'checked', false)
  385. }
  386. },
  387. // 选择加购产品
  388. toAddGoods() {
  389. const that = this;
  390. that.$set(that, 'plus_goods', [])
  391. that.$refs.showRight.open();
  392. },
  393. // 关闭抽屉
  394. closeDrawer(e) {
  395. const that = this;
  396. if (e == 'cancel') {
  397. for (let val of that.actList) {
  398. if (val.checked == true) val.checked = false
  399. }
  400. for (let arr of that.total_detail) {
  401. if (arr.key == 'plus') arr.money = 0
  402. }
  403. that.$set(that, 'plus_goods', []);
  404. that.computedTotal();
  405. that.$refs.showRight.close();
  406. } else {
  407. // 选购中商品
  408. let plus_goods = that.actList.filter(item => item.checked == true)
  409. if (plus_goods) {
  410. let plus_total = 0;
  411. for (let arr of that.total_detail) {
  412. if (arr.key == 'plus') {
  413. for (let val of plus_goods) {
  414. if (val.config.plus_money) plus_total = that.$plus(plus_total, val.config.plus_money)
  415. else plus_total = that.$plus(plus_total, val.sell_money)
  416. }
  417. arr.money = plus_total
  418. }
  419. }
  420. }
  421. that.$set(that, 'plus_goods', plus_goods);
  422. that.computedTotal();
  423. that.$refs.showRight.close();
  424. }
  425. },
  426. // 显示
  427. toOpen() {
  428. const that = this;
  429. if (that.plus_goods.length > that.plus_total) {
  430. // 每次点击加三条
  431. that.plus_total += 3;
  432. that.$set(that, 'change', true);
  433. } else {
  434. that.$set(that, `plus_total`, 3)
  435. that.$set(that, `change`, false)
  436. }
  437. },
  438. // 分页
  439. toPage() {
  440. const that = this;
  441. let list = that.actList;
  442. let actInfo = that.actInfo;
  443. let limit = that.limit;
  444. if (that.total > list.length) {
  445. uni.showLoading({
  446. title: '加载中',
  447. mask: true
  448. })
  449. let page = that.page + 1;
  450. that.$set(that, `page`, page)
  451. let skip = page * limit;
  452. that.$set(that, `skip`, skip)
  453. that.searchAct(actInfo);
  454. uni.hideLoading();
  455. }
  456. },
  457. // 提交订单
  458. async toSubmit() {
  459. const that = this;
  460. let system = that.system;
  461. if (that.address) {
  462. let obj = {
  463. address: that.address,
  464. goods: that.orderList,
  465. total_detail: that.total_detail,
  466. coupon: that.coupon,
  467. type: that.type,
  468. inviter: that.inviter,
  469. plus_goods: that.plus_goods
  470. }
  471. if (that.group_id) obj.group = that.group_id;
  472. // 创建订单
  473. let p1 = await that.$api(`/order`, 'POST', obj);
  474. if (p1.errcode == '0') {
  475. if (system.uniPlatform == "mp-weixin") {
  476. // 微信支付
  477. uni.showLoading({
  478. title: '加载中'
  479. })
  480. // 支付信息
  481. let p2 = await that.$api('/pay/toPayOrder', 'POST', {
  482. order_id: p1.data,
  483. type: '0'
  484. })
  485. if (p2.errcode == '0' && p2.data.paySign) {
  486. uni.requestPayment({
  487. "provider": "wxpay",
  488. ...p2.data,
  489. success: async function(res) {
  490. // 获取团信息
  491. let p3 = await that.$api('/group/getGroup', 'GET', {
  492. order_id: p1.data,
  493. })
  494. if (p3.errcode == '0') {
  495. uni.hideLoading();
  496. if (p3.data) {
  497. uni.reLaunch({
  498. url: `/pagesHome/group/share?id=${p3.data}`
  499. })
  500. } else {
  501. uni.reLaunch({
  502. url: `/pagesMy/order/index?status=${'1'}`
  503. })
  504. }
  505. } else {
  506. uni.showToast({
  507. title: p3.errmsg,
  508. icon: 'none'
  509. })
  510. }
  511. },
  512. fail: function(err) {
  513. uni.showToast({
  514. title: `支付失败`,
  515. icon: 'none'
  516. })
  517. uni.hideLoading();
  518. uni.reLaunch({
  519. url: `/pagesMy/order/index?status=${'0'}`
  520. })
  521. }
  522. })
  523. } else {
  524. uni.showToast({
  525. title: p2.errmsg,
  526. icon: 'none'
  527. })
  528. }
  529. } else if (system.uniPlatform == "app") {
  530. uni.requestPayment({
  531. provider: 'alipay',
  532. orderInfo: 'orderInfo',
  533. success: function(res) {
  534. console.log('success:' + JSON.stringify(res));
  535. },
  536. fail: function(err) {
  537. console.log('fail:' + JSON.stringify(err));
  538. }
  539. });
  540. } else {
  541. uni.showToast({
  542. title: `平台不支持支付`,
  543. icon: 'none'
  544. })
  545. }
  546. } else {
  547. uni.showToast({
  548. title: p1.errmsg,
  549. icon: 'none'
  550. })
  551. }
  552. } else {
  553. uni.showToast({
  554. title: `没有收货地址`,
  555. icon: 'none'
  556. })
  557. }
  558. },
  559. // 计算优惠券
  560. async computedTotal() {
  561. const total_detail = this.total_detail;
  562. let total = 0;
  563. for (let val of total_detail) total = this.$plus(total, val.money)
  564. if (this.coupon.length > 0) {
  565. let discount = 0;
  566. for (const coupon of this.coupon) {
  567. const r = this.couponList.find(f => f._id === coupon)
  568. if (!r) continue;
  569. const {
  570. discount_config,
  571. discount_type
  572. } = r;
  573. if (discount_type === 'min') {
  574. const min = discount_config.min;
  575. discount = this.$plus(discount, min)
  576. } else if (discount_type === 'discount') {
  577. const min = discount_config.min || 0;
  578. let discount_money = 0;
  579. const max = discount_config.max || 0;
  580. // TODO 现在是平台发放的优惠券,所以可以直接用总价*折扣,如果是店铺的折扣券,则需要将金额分开,对应店铺计算折扣
  581. // const dm = min / 10 * total;
  582. const dm = this.$multiply(this.divide(min, 10), total)
  583. if (max !== 0) {
  584. if (max > dm) discount_money = dm;
  585. else discount_money = max
  586. }
  587. discount += discount_money
  588. }
  589. }
  590. total = this.$minus(total, discount)
  591. }
  592. if (total >= 0) {
  593. this.$set(this, `goods_total`, total);
  594. } else {
  595. uni.showToast({
  596. title: `实付金额不能为负数 不能使用该优惠劵`,
  597. icon: 'none'
  598. })
  599. }
  600. }
  601. }
  602. }
  603. </script>
  604. <style lang="scss">
  605. .main {
  606. display: flex;
  607. flex-direction: column;
  608. width: 100vw;
  609. height: 100vh;
  610. .one {
  611. position: relative;
  612. flex-grow: 1;
  613. background-color: var(--f1Color);
  614. .one_1 {
  615. display: flex;
  616. justify-content: space-between;
  617. align-items: center;
  618. width: 100vw;
  619. padding: 2vw;
  620. border-bottom: 1vw dashed var(--fcColor);
  621. .address {
  622. flex-grow: 1;
  623. margin: 0 0 0 2vw;
  624. font-size: var(--font14Size);
  625. color: var(--f85Color);
  626. }
  627. .iconfont {
  628. font-size: var(--font20Szie);
  629. }
  630. .other {
  631. width: 82vw;
  632. padding: 0 2vw;
  633. .name {
  634. font-size: var(--font16Size);
  635. }
  636. .other_1 {
  637. font-size: var(--font14Size);
  638. color: var(--f85Color);
  639. text {
  640. margin: 0 1vw 0 0;
  641. }
  642. }
  643. }
  644. }
  645. .one_2 {
  646. .list {
  647. width: 100vw;
  648. margin: 2vw 0;
  649. .list_1 {
  650. padding: 2vw;
  651. background-color: var(--mainColor);
  652. border-bottom: 0.1vw solid var(--fcColor);
  653. text {
  654. padding: 0 0 0 1vw;
  655. }
  656. }
  657. .list_2 {
  658. padding: 2vw;
  659. background-color: var(--mainColor);
  660. .list_2_1 {
  661. display: flex;
  662. .l {
  663. width: 20vw;
  664. .image {
  665. width: 100%;
  666. height: 20vw;
  667. border-radius: 5px;
  668. }
  669. }
  670. .c {
  671. width: 60vw;
  672. padding: 0 2vw;
  673. .Spec {
  674. font-size: var(--font12Size);
  675. color: var(--f85Color);
  676. }
  677. }
  678. .r {
  679. width: 15vw;
  680. text-align: right;
  681. }
  682. }
  683. .list_2_2 {
  684. padding: 0 1vw 1vw 0;
  685. font-size: var(--font14Size);
  686. }
  687. .list_2_3 {
  688. display: flex;
  689. justify-content: space-between;
  690. border: 1px solid var(--fcColor);
  691. border-radius: 5px;
  692. margin: 0 0 1vw 0;
  693. padding: 1vw;
  694. .left {
  695. .name {
  696. font-size: 14px;
  697. }
  698. .Spec {
  699. font-size: var(--font12Size);
  700. color: var(--f85Color);
  701. }
  702. }
  703. }
  704. }
  705. .list_3 {
  706. width: 96vw;
  707. padding: 2vw;
  708. background-color: var(--mainColor);
  709. .other {
  710. display: flex;
  711. justify-content: space-between;
  712. border-bottom: 0.1vw solid var(--fcColor);
  713. margin: 0 0 2vw 0;
  714. padding: 2vw 0;
  715. .other_1 {
  716. font-size: var(--font16Size);
  717. color: var(--f85Color);
  718. }
  719. .other_3 {
  720. flex-grow: 1;
  721. margin: 0 0 0 2vw;
  722. font-size: var(--font12Size);
  723. }
  724. text {
  725. padding: 0 1vw 0 0;
  726. font-size: var(--font20Szie);
  727. }
  728. }
  729. }
  730. }
  731. .other {
  732. display: flex;
  733. justify-content: space-between;
  734. background-color: var(--mainColor);
  735. border-bottom: 0.1vw solid var(--fcColor);
  736. width: 96vw;
  737. padding: 2vw;
  738. .other_1 {
  739. font-size: var(--font16Size);
  740. color: var(--f85Color);
  741. }
  742. .other_3 {
  743. flex-grow: 1;
  744. margin: 0 0 0 2vw;
  745. font-size: var(--font12Size);
  746. }
  747. .other_4 {
  748. color: var(--fFB1Color);
  749. }
  750. text {
  751. padding: 0 1vw 0 0;
  752. font-size: var(--font20Szie);
  753. }
  754. }
  755. .act {
  756. background-color: var(--mainColor);
  757. border-bottom: 0.1vw solid var(--fcColor);
  758. margin: 0 0 2vw 0;
  759. width: 96vw;
  760. padding: 2vw;
  761. .act_1 {
  762. font-size: var(--font14Size);
  763. font-weight: bold;
  764. text {
  765. color: #FFA500;
  766. }
  767. }
  768. .act_2 {
  769. .plusList {
  770. display: flex;
  771. margin: 2vw 0;
  772. .image {
  773. width: 12vw;
  774. height: 10vw;
  775. border: 1px solid #ffffff;
  776. }
  777. .name {
  778. width: 60vw;
  779. font-size: 12px;
  780. margin: 0 0 0 1vw;
  781. }
  782. .money {
  783. width: 25vw;
  784. .text_1 {
  785. font-size: 12px;
  786. color: #858585;
  787. text-decoration: line-through;
  788. }
  789. .text_2 {
  790. font-size: 14px;
  791. color: #ff0000;
  792. }
  793. }
  794. }
  795. }
  796. .bottom {
  797. text-align: center;
  798. }
  799. }
  800. }
  801. }
  802. .two {
  803. display: flex;
  804. justify-content: space-between;
  805. border-top: 0.1vw solid var(--fcColor);
  806. .two_1 {
  807. display: flex;
  808. align-items: center;
  809. padding: 0 2vw;
  810. font-size: var(--font16Size);
  811. view:last-child {
  812. margin: 0 0 0 2vw;
  813. color: var(--ff0Color);
  814. font-weight: bold;
  815. }
  816. }
  817. .two_2 {
  818. padding: 3vw 4vw;
  819. color: var(--mainColor);
  820. font-size: var(--font16Size);
  821. background-color: var(--ff0Color);
  822. }
  823. }
  824. }
  825. .scroll-view {
  826. position: absolute;
  827. top: 0;
  828. left: 0;
  829. right: 0;
  830. bottom: 0;
  831. .list-scroll-view {
  832. display: flex;
  833. flex-direction: row;
  834. flex-wrap: wrap;
  835. }
  836. }
  837. .popup {
  838. display: flex;
  839. flex-direction: column;
  840. height: 100vw;
  841. overflow-x: hidden;
  842. background-color: var(--f5Color);
  843. padding: 2vw;
  844. .list {
  845. .one {
  846. display: flex;
  847. justify-content: space-between;
  848. margin: 2vw 0 0 0;
  849. padding: 2vw;
  850. background-color: var(--mainColor);
  851. .name {
  852. font-size: var(--font16Size);
  853. }
  854. .address {
  855. font-size: var(--font14Size);
  856. }
  857. .iconfont {
  858. line-height: 15vw;
  859. font-size: var(--font20Szie);
  860. }
  861. }
  862. .two {
  863. display: flex;
  864. justify-content: space-between;
  865. border-top: 0.1vw solid var(--fcColor);
  866. padding: 2vw;
  867. background-color: var(--mainColor);
  868. font-size: var(--font14Size);
  869. .text {
  870. margin: 0 2vw 0 0;
  871. border: 0.1vw solid var(--fFB1Color);
  872. padding: 1vw;
  873. font-size: var(--font12Size);
  874. border-radius: 2vw;
  875. color: var(--fFB1Color);
  876. }
  877. }
  878. }
  879. }
  880. .act {
  881. background-color: var(--mainColor);
  882. width: 96vw;
  883. padding: 2vw;
  884. .act_1 {
  885. font-size: var(--font14Size);
  886. font-weight: bold;
  887. text {
  888. color: #FFA500;
  889. }
  890. }
  891. .act_2 {
  892. margin: 1vw 0;
  893. .actList {
  894. display: flex;
  895. align-items: center;
  896. margin: 2vw 0;
  897. border: 0.1vw solid var(--fcColor);
  898. border-radius: 5px;
  899. padding: 1vw 0;
  900. .image {
  901. width: 12vw;
  902. height: 10vw;
  903. border: 1px solid #ffffff;
  904. }
  905. .name {
  906. width: 52vw;
  907. font-size: 12px;
  908. margin: 0 0 0 1vw;
  909. .some {
  910. display: inline-block;
  911. white-space: nowrap;
  912. width: 100%;
  913. overflow: hidden;
  914. text-overflow: ellipsis;
  915. }
  916. }
  917. .money {
  918. width: 20vw;
  919. .text_1 {
  920. font-size: 12px;
  921. color: #858585;
  922. text-decoration: line-through;
  923. }
  924. .text_2 {
  925. font-size: 13px;
  926. color: #ff0000;
  927. }
  928. }
  929. .checkbox {
  930. width: 7vw;
  931. }
  932. }
  933. }
  934. .bottom {
  935. text-align: center;
  936. button:first-child {
  937. margin: 0 1vw 0 0;
  938. background-color: #ff0000;
  939. color: #ffffff;
  940. }
  941. }
  942. }
  943. </style>