shoppingCar.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400
  1. <template>
  2. <view class="container">
  3. <view :class="navBtn?'footer-block-act':'footer-block'">
  4. <view v-if="!is_business" class="content-gice-is_business flex-center">
  5. 店铺不在营业时间
  6. </view>
  7. <view v-else class="content-gice flex flex-y-center" >
  8. <view class="car-block flex flex-x-center flex-y-center" @click="showCarGoods">
  9. <uni-icons type="cart" size="20"></uni-icons>
  10. <view class="car-num" v-if="carNum>0">{{carNum}}</view>
  11. </view>
  12. <view class="money-block" v-if="carNum>0">
  13. <view class="flex-y-center">
  14. <view class="txt">预计到手:</view>
  15. <view class="sign">¥</view>
  16. <view class="money">{{carTotal}}</view>
  17. </view>
  18. <view class="ft22" v-if="teen_index==2" style="color: #F1F1F1">
  19. 另需配送费¥{{deliveryPrice}}
  20. </view>
  21. </view>
  22. <view class="no-goods" v-if="carNum == 0">
  23. 购物车空空如也呢!
  24. </view>
  25. <view v-if="isDistance==2&&teen_index==2" class="sub-btn flex-center"
  26. style="background:#999;width:300rpx;">
  27. <view>
  28. 超出配送范围
  29. </view>
  30. </view>
  31. <view v-if="isDistance==3&&teen_index==2" class="sub-btn flex-center"
  32. style="background:#999;width:300rpx;">
  33. <view @click="getWechatAddress">
  34. 请选择地址
  35. </view>
  36. </view>
  37. <view v-else class="sub-btn flex-center">
  38. <view style="width: 100%;height: 100%;">
  39. <view class="sub-btn-font flex-center" style="background:#999;width:300rpx;"
  40. v-if="teen_index==2&&Number(carTotal)<Number(systemInfo.set.delivery_price)">
  41. ¥{{systemInfo.set.delivery_price}}起送
  42. </view>
  43. <view v-else class="sub-btn-settlement flex-center" @click="onCreatOrder">
  44. 去结算
  45. </view>
  46. </view>
  47. </view>
  48. </view>
  49. </view>
  50. <view class="footer-mask" v-if="carGoodsPop" @click="showCarGoods"></view>
  51. <view :class="navBtn?'car-goods-block1':'car-goods-block'" class="car-goods-block" v-if="carGoodsPop">
  52. <view class="top flex flex-x-between flex-y-center">
  53. <view class="title">已选商品</view>
  54. <view class="clear-btn flex flex-nowarp flex-y-center" @click="clearCar">
  55. <image src="../static/icon_3.png" mode="aspectFit" class="icon-3"></image>
  56. <view class="btn-text">清空购物车</view>
  57. </view>
  58. </view>
  59. <scroll-view scroll-y class="car-goods-list">
  60. <view class="list">
  61. <block>
  62. <view v-for="(goods,idx) in carGoods" :key="idx">
  63. <view class="flex-y-center radio" @click="chooseBag(goods.pocket)">
  64. <view class="radio__inner"
  65. :style="is_checked == goods.pocket?('border: 1rpx solid' + getColorItem):''">
  66. <view :style="is_checked== goods.pocket?('background:'+ getColorItem):''"
  67. class="radio__inner-icon radio__inner-icon is-default-checked">
  68. </view>
  69. </view>
  70. 装入口袋{{goods.pocket}}
  71. <block v-if="teen_index==2 && goods.packing_fee">(包装费 <text
  72. style="color: red;">¥{{goods.packing_fee}}</text> )</block>
  73. </view>
  74. <view class="item flex flex-y-center flex-nowarp" v-for="(item,index) in goods.list"
  75. :key="index" v-if="item.num>0">
  76. <image :src="getImgSrc(item.spec_image)" mode="aspectFill" class="img"></image>
  77. <view class="goods-info">
  78. <view class="name">{{item.name}}</view>
  79. <view class="unit">{{item.spec}}</view>
  80. <view class="price flex-y-bottom">
  81. <block v-if="item.is_rebate==1">
  82. <view>¥{{item.first_price}}</view>
  83. <view class="textDecoration">¥{{item.price}}</view>
  84. </block>
  85. <block v-else>
  86. <view>¥{{item.price}}</view>
  87. </block>
  88. </view>
  89. </view>
  90. <view class="goods-num-block " :style="{color:getColorItem}">
  91. <view class="flex flex-x-between flex-y-center">
  92. <view class="num-btn num-btn-1 iconfont icon-jian1"
  93. @click="changeNum(item.category_id,item.goods_id,1,'car',index,'',item.many_rebate,item.is_rebate,goods.pocket)">
  94. </view>
  95. <view class="num">{{item.num}}</view>
  96. <view class="num-btn num-btn-2 iconfont icon-jia1"
  97. @click="changeNum(item.category_id,item.goods_id,2,'car',index,'',item.many_rebate,item.is_rebate,goods.pocket)">
  98. </view>
  99. </view>
  100. <view class="ft24 many_rebate" v-if="item.many_rebate>0 && item.is_rebate==1">
  101. {{item.many_rebate}}{{item.unit}}起购
  102. </view>
  103. </view>
  104. </view>
  105. </view>
  106. <view class="flex-y-center radio" style="padding-bottom: 10rpx;"
  107. @click="chooseBag(carGoods[carGoods.length-1].pocket+1)">
  108. <view class="radio__inner"
  109. :style="is_checked==(carGoods[carGoods.length-1].pocket+1)?('border: 1rpx solid' + getColorItem):''">
  110. <view
  111. :style="is_checked==(carGoods[carGoods.length-1].pocket+1)?('background:'+ getColorItem):''"
  112. class="radio__inner-icon radio__inner-icon is-default-checked">
  113. </view>
  114. </view>
  115. 装入口袋{{carGoods[carGoods.length-1].pocket+1}} <text class="radio_tip">选用后,加购商品将自动放入该口袋</text>
  116. </view>
  117. </block>
  118. <!--
  119. <block v-else>
  120. <view class="item flex flex-y-center flex-nowarp" v-for="(item,index) in carGoods" :key="index"
  121. v-if="item.num>0">
  122. <image :src="getImgSrc(item.spec_image)" mode="aspectFill" class="img"></image>
  123. <view class="goods-info">
  124. <view class="name">{{item.name}}</view>
  125. <view class="unit">{{item.spec}}</view>
  126. <view class="price flex-y-bottom">
  127. <block v-if="item.is_rebate==1">
  128. <view>¥{{item.first_price}}</view>
  129. <view class="textDecoration">¥{{item.price}}</view>
  130. </block>
  131. <block v-else>
  132. <view>¥{{item.price}}</view>
  133. </block>
  134. </view>
  135. </view>
  136. <view class="goods-num-block " :style="{color:getColorItem}">
  137. <view class="flex flex-x-between flex-y-center">
  138. <view class="num-btn num-btn-1 iconfont icon-jian1"
  139. @click="changeNum(item.category_id,item.goods_id,1,'car',index,'',item.many_rebate,item.is_rebate)">
  140. </view>
  141. <view class="num">{{item.num}}</view>
  142. <view class="num-btn num-btn-2 iconfont icon-jia1"
  143. @click="changeNum(item.category_id,item.goods_id,2,'car',index,'',item.many_rebate,item.is_rebate)">
  144. </view>
  145. </view>
  146. <view class="ft24 many_rebate" v-if="item.many_rebate>0 && item.is_rebate==1">
  147. {{item.many_rebate}}{{item.unit}}起购
  148. </view>
  149. </view>
  150. </view>
  151. </block> -->
  152. </view>
  153. </scroll-view>
  154. </view>
  155. </view>
  156. </template>
  157. <script>
  158. import {
  159. mapState,
  160. mapGetters,
  161. mapMutations
  162. } from 'vuex'
  163. export default {
  164. props: {
  165. carNum: {
  166. type: Number,
  167. default: 0,
  168. },
  169. isDistance: {
  170. type: Number,
  171. default: 1,
  172. },
  173. carGoods: {
  174. type: Array,
  175. default: function() {
  176. return []
  177. }
  178. },
  179. carTotal: {
  180. type: [Number, String],
  181. default: 0
  182. },
  183. deliveryPrice: {
  184. type: [Number, String],
  185. default: '0.00'
  186. },
  187. userInfo: {
  188. type: Object,
  189. default: function() {
  190. return {}
  191. }
  192. },
  193. navBtn: {
  194. type: Boolean,
  195. default: false,
  196. },
  197. //选择就餐人数
  198. eat_people: {
  199. type: [Number, String],
  200. default: 0
  201. },
  202. checked: {
  203. type: [Number, String],
  204. default: 0
  205. }
  206. },
  207. data() {
  208. return {
  209. // store_id: '',
  210. table_id: '',
  211. carGoodsPop: false,
  212. distance: 1,
  213. is_checked: 1
  214. };
  215. },
  216. mounted() {
  217. // this.store_id = uni.getStorageSync('store_id')
  218. this.table_id = uni.getStorageSync('table_id')
  219. // this.systemInfo = uni.getStorageSync('systemInfo')
  220. // console.log(this.systemInfo.set,"this.systemInfo")
  221. },
  222. computed: {
  223. ...mapState(['teen_index', 'store_id', 'is_business']),
  224. getColorItem() {
  225. return this.$store.state.setColor
  226. },
  227. systemInfo() {
  228. if (this.$store.state.systemInfo) {
  229. return this.$store.state.systemInfo
  230. }
  231. }
  232. },
  233. watch: {
  234. carNum: function(newNum, oldNum) {
  235. if (newNum == 0) {
  236. this.carGoodsPop = false
  237. }
  238. },
  239. checked: {
  240. handler(newName, oldName) {
  241. console.log(newName, "is_checked")
  242. this.is_checked = newName
  243. },
  244. // 开启深度监听
  245. deep: true
  246. }
  247. },
  248. methods: {
  249. chooseBag(index) {
  250. this.is_checked = index;
  251. this.$emit("choosebag", index)
  252. },
  253. // 选择外卖地址
  254. getWechatAddress: function(e) {
  255. uni.navigateTo({
  256. url: '/pages/address/address?teen_index=1'
  257. })
  258. },
  259. //去创建订单
  260. onCreatOrder() {
  261. // 示例
  262. // #ifdef MP-ALIPAY
  263. my.getAuthCode({
  264. // 订单服务授权:order_service。如需同时获取用户多项授权,可在 scopes 中传入多个 scope 值。
  265. scopes: ['order_service'],
  266. success: (res) => {
  267. console.log(res, "res")
  268. // 订单服务授权成功
  269. this.fastTake();
  270. },
  271. fail: (res) => {
  272. // 订单服务授权失败,根据自己的业务场景来进行错误处理
  273. this.fastTake();
  274. },
  275. });
  276. // #endif
  277. // #ifdef MP-WEIXIN
  278. this.fastTake();
  279. // #endif
  280. // #ifdef H5
  281. //仅供测试使用
  282. this.fastTake();
  283. // #endif
  284. },
  285. fastTake() {
  286. // console.log("jiesuan")
  287. if (this.carNum == 0) {
  288. uni.showToast({
  289. title: '请先选择商品',
  290. icon: 'none'
  291. })
  292. return false
  293. }
  294. //获取购物车数据
  295. this.$http.request('xcx/fastTake', {
  296. store_id: this.store_id,
  297. user_id: uni.getStorageSync('user_id'),
  298. state: Number(this.teen_index),
  299. }, "", "", true).then(res => {
  300. this.$store.commit('SET_CREAT', false)
  301. //重置购物车
  302. uni.navigateTo({
  303. // url: `/pages/creatOrder/creatOrder?teen_index=${this.teen_index}`
  304. //新增点餐人数
  305. url: '/pages/creatOrder/creatOrder?teen_index=' + this.teen_index +
  306. '&eat_people=' + this.eat_people
  307. })
  308. }).catch(err => {
  309. console.log(err)
  310. })
  311. },
  312. //拼接图片全路径
  313. getImgSrc(src) {
  314. return this.$utils.getImgSrc(src)
  315. },
  316. //显示购物车列表
  317. showCarGoods() {
  318. if (this.carGoods.length == 0) {
  319. return
  320. }
  321. this.carGoodsPop = !this.carGoodsPop
  322. },
  323. /**
  324. * 改变商品数量
  325. * @category_id:分类id
  326. * @goods_id:商品id
  327. * @type:1减少 2增加
  328. * @data_from 购物车列表传 'car' 规格弹窗传 'spec' 无规格传 'goods' 否则不传
  329. * @car_index 购物车下标 data_form = 'car'传
  330. * @goods_price 商品价格 data_from = 'goods' 传
  331. * */
  332. changeNum(category_id, goods_id, type, data_from, car_index, goods_price, many_rebate = '', is_rebate = '',
  333. pocket = '') {
  334. console.log(this.carGoods, goods_price, many_rebate, is_rebate, pocket)
  335. this.$parent.changeNum(category_id, goods_id, type, data_from, car_index, goods_price, many_rebate,
  336. is_rebate, pocket);
  337. },
  338. //清空购物车
  339. clearCar() {
  340. uni.showModal({
  341. content: "确定清空购物车",
  342. success: (r) => {
  343. if (r.confirm) {
  344. var url, data;
  345. if (this.$store.state.systemInfo.is_qian_many == 1 && getApp().globalData
  346. .readyReset == 1) {
  347. url = 'xcx/delete_carta';
  348. data = {
  349. user_id: this.userInfo.id,
  350. table_id: this.systemInfo.table_id,
  351. }
  352. } else {
  353. url = 'xcx/delete_cart';
  354. data = {
  355. user_id: this.userInfo.id,
  356. }
  357. }
  358. this.$http.request(url, data).then(res => {
  359. this.carGoodsPop = false
  360. this.$parent.clearCar()
  361. }).catch(err => {
  362. console.log(err)
  363. })
  364. }
  365. }
  366. })
  367. },
  368. },
  369. }
  370. </script>
  371. <style lang="scss" scoped>
  372. @import './shoppingCart.scss'
  373. </style>