index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553
  1. <template>
  2. <mobile-frame :frameStyle="frameStyle" @toPath="toPath">
  3. <view class="main">
  4. <view class="top" v-if="list.length !=0">
  5. <view class="text_1">
  6. <checkbox class="checkbox" @click="selectAll(false)" :checked="isAll">全选</checkbox>
  7. </view>
  8. <view class="text_2" v-if="num==0" @click="edit(1)">编辑</view>
  9. <view class="text_2" v-if="num==1" @click="edit(0)">完成</view>
  10. </view>
  11. <view class="one" v-if="!user._id">
  12. <view class="logo">
  13. <text class="iconfont icon-gouwuche"></text>
  14. </view>
  15. <view class="one_1">
  16. 您还没有登录
  17. </view>
  18. <view class="btn">
  19. <button type="primary" size="mini" @click="toCommon('/pages/login/index')">去登录</button>
  20. </view>
  21. </view>
  22. <view class="one" v-if="list.length==0">
  23. <view class="logo">
  24. <text class="iconfont icon-gouwuche"></text>
  25. </view>
  26. <view class="one_1">
  27. 购物车空空如也~
  28. </view>
  29. <view class="btn">
  30. <button type="primary" size="mini" @click="toCommon('/pages/home/index')">去逛逛</button>
  31. </view>
  32. </view>
  33. <view class="two">
  34. <scroll-view scroll-y="true" class="scroll-view">
  35. <view class="list-scroll-view">
  36. <checkbox-group name="checkbox" @change="marketChange">
  37. <view class="lists" v-for="(item, index) in list" :key="index">
  38. <view class="list">
  39. <view class="title">
  40. <checkbox :value="item.id" :checked="item.check">
  41. <text class="iconfont icon-shangdian"></text>
  42. {{item.title}}
  43. </checkbox>
  44. </view>
  45. <checkbox-group name="checkbox" @change="goodsChange">
  46. <view class="content" v-for="(item, indexs) in item.goods" :key="indexs">
  47. <view class="box">
  48. <checkbox :value="item.id" :checked="item.check" />
  49. </view>
  50. <view class="img">
  51. <image src="../../static/logo.png"></image>
  52. <!-- <image class="image" :src="item.url&&item.url.length>0?item.url[0].url:''" mode=""></image> -->
  53. </view>
  54. <view class=" one_1" v-if="num==0" @click="toCommon('/pagesHome/order/detail',item)">
  55. <view class="name">{{item.name}}</view>
  56. <view class="info">
  57. <view class="title_1" v-if="item.kg">
  58. <text>规格:{{item.kg}}</text>
  59. </view>
  60. </view>
  61. </view>
  62. <view class="money" v-if="num==0">
  63. <view>¥{{item.money}}</view>
  64. <view>x{{item.num}}</view>
  65. </view>
  66. <view class="num" v-if="num==1">
  67. <uni-number-box @change="changeValue(item)" name="num" value="item"
  68. :min="1" v-model="item.num" />
  69. </view>
  70. <view class="del" v-if="num==1">
  71. <text class="iconfont icon-del-copy" @click="toDel(item)"></text>
  72. </view>
  73. </view>
  74. </checkbox-group>
  75. </view>
  76. </view>
  77. </checkbox-group>
  78. </view>
  79. </scroll-view>
  80. </view>
  81. <view class="foot" v-if="list.length !=0">
  82. <view class="total">总价:<text>¥{{totalMoney}}(不含运费)</text></view>
  83. <view class="btn">
  84. <button type="primary" size="mini" @click="toSettle()" v-if="num==0">提交订单</button>
  85. <button type="primary" size="mini" @click="toDel()" v-if="num==1">删除</button>
  86. </view>
  87. </view>
  88. </view>
  89. </mobile-frame>
  90. </template>
  91. <script>
  92. export default {
  93. data() {
  94. return {
  95. frameStyle: {
  96. useBar: true
  97. },
  98. user: {
  99. _id: '001'
  100. },
  101. list: [{
  102. id: '001',
  103. title: '商品1店铺',
  104. goods: [{
  105. id: '00001',
  106. name: '商品商品商品商品商品1',
  107. money: 50.00,
  108. num: 2,
  109. kg: '1.5L',
  110. }, {
  111. id: '00002',
  112. name: '商品商品商品商品商品2',
  113. money: 150.00,
  114. num: 2,
  115. kg: '13.5L',
  116. }, ]
  117. }, {
  118. id: '002',
  119. title: '商品1店铺',
  120. goods: [{
  121. id: '00003',
  122. name: '商品商品商品商品商品1',
  123. money: 50.00,
  124. num: 2,
  125. kg: '1.5L',
  126. }, {
  127. id: '00004',
  128. name: '商品商品商品商品商品2',
  129. money: 150.00,
  130. num: 2,
  131. kg: '13.5L',
  132. }, ]
  133. }, ],
  134. isAll: false,
  135. // 编辑/完成按钮传的数字
  136. num: 0,
  137. totalMoney: 0,
  138. };
  139. },
  140. onShow: function() {},
  141. methods: {
  142. toPath(e) {
  143. if (e && e.route) uni.redirectTo({
  144. url: `/${e.route}`
  145. })
  146. },
  147. // 公共跳转
  148. toCommon(route,e) {
  149. uni.navigateTo({
  150. url: `${route}?id=${e && e._id ? e._id : ''}`
  151. })
  152. },
  153. // 转换金额
  154. showMoney(money) {
  155. const that = this;
  156. let moneys = `${money}`.split(".");
  157. if (moneys.length == 1) {
  158. money = money + ".00";
  159. } else if (moneys.length == 2) {
  160. money = money + "0";
  161. }
  162. return money;
  163. },
  164. // 编辑
  165. edit(num) {
  166. const that = this;
  167. that.$set(that, `num`, num)
  168. },
  169. //全选
  170. selectAll(e) {
  171. const that = this;
  172. const list = that.list;
  173. const isAll = that.isAll;
  174. let data = [];
  175. for (const val of list) {
  176. let a = isAll ? false : true;
  177. val.check = a;
  178. for (let s of val.goods) {
  179. s.check = a
  180. }
  181. data.push(val);
  182. }
  183. that.$set(that, `list`, data)
  184. // 计算总额
  185. that.countMoney();
  186. // 赋值是否全选
  187. that.$set(that, `isAll`, isAll ? false : true)
  188. },
  189. // 选择店铺
  190. marketChange(e) {
  191. const that = this;
  192. const list = this.list;
  193. const {
  194. value
  195. } = e.detail;
  196. for (const p1 of list) {
  197. let p2 = value.find((i) => i == p1.id);
  198. let a = p2 ? true : false;
  199. p1.check = a;
  200. for (let s of p1.goods) {
  201. s.check = a
  202. }
  203. }
  204. that.$set(that, `list`, list);
  205. that.marketAllChange();
  206. // 计算总额
  207. that.countMoney();
  208. },
  209. //店铺全部选择true,全选自动选择,
  210. marketAllChange() {
  211. const that = this;
  212. let list = that.list;
  213. for (let val of list) {
  214. if (val.check == true) {
  215. that.$set(that, `isAll`, true)
  216. } else {
  217. that.$set(that, `isAll`, false)
  218. }
  219. }
  220. that.$set(that, `list`, list)
  221. // 计算总额
  222. that.countMoney();
  223. },
  224. //选择商品
  225. goodsChange(e) {
  226. const that = this;
  227. let list = that.list;
  228. const {
  229. value
  230. } = e.detail;
  231. let shop = list.find(f => f.goods.find(i => value.find(s => s == i.id)))
  232. if (shop) {
  233. for (let val of shop.goods) {
  234. let p2 = value.find((i) => i == val.id);
  235. if (p2) val.check = true;
  236. else val.check = false;
  237. }
  238. } else {
  239. list = list.map(i => {
  240. i.goods = i.goods.map(g => ({
  241. ...g,
  242. check: false
  243. }))
  244. return i;
  245. })
  246. }
  247. that.$set(that, `list`, list)
  248. that.goodsAllChange(value);
  249. // 计算总额
  250. that.countMoney();
  251. },
  252. //商品全部选择true,店铺自动选择,
  253. goodsAllChange(value) {
  254. const that = this;
  255. let list = that.list;
  256. let shop = list.find(f => f.goods.find(i => value.find(s => s == i.id)))
  257. if (shop) {
  258. for (let val of shop.goods) {
  259. if (val.check == true) {
  260. shop.check = true;
  261. } else {
  262. shop.check = false;
  263. }
  264. }
  265. } else {
  266. list = list.map(i => {
  267. i.goods = i.goods.map(g => ({
  268. ...g,
  269. check: false
  270. }))
  271. return i;
  272. })
  273. }
  274. // 计算总额
  275. that.countMoney();
  276. },
  277. // 加减商品数量
  278. changeValue(value) {
  279. const that = this;
  280. const list = that.list;
  281. for (const val of list) {
  282. for (let s of val.goods) {
  283. if (s.id == value.id) {
  284. s.num = value.num
  285. }
  286. }
  287. }
  288. that.$set(that, `list`, list)
  289. // 计算总额
  290. that.countMoney(list);
  291. },
  292. // 删除
  293. toDel(e) {
  294. const that = this;
  295. const list = that.list;
  296. let shop = list.find(f => f.goods.find(i => i.check == true))
  297. if (shop) {
  298. uni.showModal({
  299. title: '提示',
  300. content: '确认要删除这些商品吗?',
  301. success: async function(res) {
  302. if (res.confirm) {}
  303. }
  304. });
  305. } else if (e.id) {
  306. uni.showModal({
  307. title: '提示',
  308. content: '是否确认删除该商品',
  309. success: async function(res) {
  310. if (res.confirm) {}
  311. }
  312. });
  313. } else {
  314. uni.showModal({
  315. title: '提示',
  316. content: '请选择要删除的商品',
  317. success: async function(res) {
  318. if (res.confirm) {}
  319. }
  320. });
  321. }
  322. },
  323. // 计算总额
  324. countMoney() {
  325. const that = this;
  326. const list = this.list;
  327. let totalMoney = 0;
  328. // 渲染结束执行下面方法
  329. that.$nextTick(() => {
  330. for (const val of list) {
  331. for (let s of val.goods) {
  332. if (s.check == true) {
  333. let total = Number(s.money) * Number(s.num);
  334. totalMoney += Number(total);
  335. }
  336. }
  337. }
  338. that.$set(that, `totalMoney`, totalMoney.toFixed(2))
  339. })
  340. },
  341. // 去结算
  342. toSettle() {},
  343. }
  344. }
  345. </script>
  346. <style lang="scss">
  347. .main {
  348. display: flex;
  349. flex-direction: column;
  350. width: 100vw;
  351. height: 92vh;
  352. background-color: var(--footColor);
  353. .top {
  354. display: flex;
  355. flex-direction: row;
  356. background-color: var(--mainColor);
  357. height: 35px;
  358. margin: 0 0 4px 0;
  359. padding: 5px 4vw;
  360. .text_1 {
  361. flex-grow: 1;
  362. line-height: 30px;
  363. }
  364. .text_2 {
  365. line-height: 35px;
  366. }
  367. }
  368. .one {
  369. text-align: center;
  370. margin: 2vw 0;
  371. .logo {
  372. margin: 10vw 0 2vw 0;
  373. .iconfont {
  374. font-size: 35vw;
  375. }
  376. }
  377. .one_1 {
  378. margin: 3vw 0;
  379. }
  380. button {
  381. background-color: var(--ff0Color);
  382. }
  383. }
  384. .two {
  385. position: relative;
  386. flex-grow: 1;
  387. margin: 0 2vw;
  388. .list {
  389. background-color: var(--mainColor);
  390. margin: 2vw 0 2vw 0;
  391. padding: 2vw 3vw;
  392. border-radius: 4px;
  393. .title {
  394. border-bottom: 1px solid var(--fcColor);
  395. padding: 0 0 2vw 0;
  396. font-size: var(--font18Size);
  397. text {
  398. margin: 0 1vw;
  399. }
  400. }
  401. .content {
  402. display: flex;
  403. flex-direction: row;
  404. padding: 3vw 0;
  405. font-size: var(--font16Size);
  406. border-bottom: 1px dashed var(--fcColor);
  407. .box {
  408. line-height: 20vw;
  409. }
  410. .img {
  411. width: 20vw;
  412. height: 20vw;
  413. border-radius: 2vw;
  414. border: 1px solid var(--fcColor);
  415. image {
  416. width: 20vw;
  417. height: 20vw;
  418. }
  419. }
  420. .one_1 {
  421. margin: 2.5vw;
  422. flex-grow: 1;
  423. .info {
  424. width: 100%;
  425. display: flex;
  426. flex-direction: row;
  427. .title_1 {
  428. font-size: 12px;
  429. color: #666;
  430. margin-top: 10px;
  431. text {
  432. background-color: #eee;
  433. padding: 5px;
  434. }
  435. }
  436. }
  437. }
  438. .money {
  439. margin-top: 2vw;
  440. text-align: right;
  441. flex-grow: 1;
  442. }
  443. .num {
  444. margin: 6vw 4vw;
  445. font-size: 20px;
  446. }
  447. .del {
  448. margin: 6vw 0;
  449. text-align: right;
  450. flex-grow: 1;
  451. }
  452. }
  453. }
  454. }
  455. .foot {
  456. background-color: var(--fffColor);
  457. display: flex;
  458. flex-direction: row;
  459. justify-content: space-between;
  460. height: 44px;
  461. padding: 0 0 0 6vw;
  462. border-right: 1px solid var(--f99Color);
  463. .total {
  464. flex-grow: 1;
  465. display: flex;
  466. align-content: flex-end;
  467. line-height: 40px;
  468. text {
  469. color: var(--ff0Color);
  470. }
  471. }
  472. .btn {
  473. button {
  474. width: 30vw;
  475. height: 44px;
  476. line-height: 44px;
  477. border-radius: 0px;
  478. background-color: var(--ff0Color);
  479. text-align: center;
  480. font-weight: normal;
  481. font-size: var(--font15Size);
  482. color: var(--fffColor);
  483. }
  484. }
  485. }
  486. }
  487. .scroll-view {
  488. position: absolute;
  489. top: 0;
  490. left: 0;
  491. right: 0;
  492. bottom: 0;
  493. .list-scroll-view {
  494. display: flex;
  495. flex-direction: column;
  496. }
  497. }
  498. // 复选框样式
  499. checkbox .wx-checkbox-input {
  500. width: 40rpx;
  501. height: 40rpx;
  502. border-radius: 50%;
  503. border-color: var(--f99Color);
  504. background-color: var(--mainColor);
  505. }
  506. // 复选框选中样式
  507. checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  508. border-color: var(--ff0Color);
  509. background-color: var(--ff0Color);
  510. }
  511. // 复选框选中之后对号的样式
  512. checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  513. color: var(--fffColor);
  514. }
  515. </style>