123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400 |
- <template>
- <view class="container">
- <view :class="navBtn?'footer-block-act':'footer-block'">
- <view v-if="!is_business" class="content-gice-is_business flex-center">
- 店铺不在营业时间
- </view>
- <view v-else class="content-gice flex flex-y-center" >
- <view class="car-block flex flex-x-center flex-y-center" @click="showCarGoods">
-
- <uni-icons type="cart" size="20"></uni-icons>
-
- <view class="car-num" v-if="carNum>0">{{carNum}}</view>
- </view>
- <view class="money-block" v-if="carNum>0">
- <view class="flex-y-center">
- <view class="txt">预计到手:</view>
- <view class="sign">¥</view>
- <view class="money">{{carTotal}}</view>
- </view>
- <view class="ft22" v-if="teen_index==2" style="color: #F1F1F1">
- 另需配送费¥{{deliveryPrice}}
- </view>
- </view>
- <view class="no-goods" v-if="carNum == 0">
- 购物车空空如也呢!
- </view>
- <view v-if="isDistance==2&&teen_index==2" class="sub-btn flex-center"
- style="background:#999;width:300rpx;">
- <view>
- 超出配送范围
- </view>
- </view>
- <view v-if="isDistance==3&&teen_index==2" class="sub-btn flex-center"
- style="background:#999;width:300rpx;">
- <view @click="getWechatAddress">
- 请选择地址
- </view>
- </view>
- <view v-else class="sub-btn flex-center">
- <view style="width: 100%;height: 100%;">
- <view class="sub-btn-font flex-center" style="background:#999;width:300rpx;"
- v-if="teen_index==2&&Number(carTotal)<Number(systemInfo.set.delivery_price)">
- ¥{{systemInfo.set.delivery_price}}起送
- </view>
- <view v-else class="sub-btn-settlement flex-center" @click="onCreatOrder">
- 去结算
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class="footer-mask" v-if="carGoodsPop" @click="showCarGoods"></view>
- <view :class="navBtn?'car-goods-block1':'car-goods-block'" class="car-goods-block" v-if="carGoodsPop">
- <view class="top flex flex-x-between flex-y-center">
- <view class="title">已选商品</view>
- <view class="clear-btn flex flex-nowarp flex-y-center" @click="clearCar">
- <image src="../static/icon_3.png" mode="aspectFit" class="icon-3"></image>
- <view class="btn-text">清空购物车</view>
- </view>
- </view>
- <scroll-view scroll-y class="car-goods-list">
- <view class="list">
- <block>
- <view v-for="(goods,idx) in carGoods" :key="idx">
- <view class="flex-y-center radio" @click="chooseBag(goods.pocket)">
- <view class="radio__inner"
- :style="is_checked == goods.pocket?('border: 1rpx solid' + getColorItem):''">
- <view :style="is_checked== goods.pocket?('background:'+ getColorItem):''"
- class="radio__inner-icon radio__inner-icon is-default-checked">
- </view>
- </view>
- 装入口袋{{goods.pocket}}
- <block v-if="teen_index==2 && goods.packing_fee">(包装费 <text
- style="color: red;">¥{{goods.packing_fee}}</text> )</block>
- </view>
- <view class="item flex flex-y-center flex-nowarp" v-for="(item,index) in goods.list"
- :key="index" v-if="item.num>0">
- <image :src="getImgSrc(item.spec_image)" mode="aspectFill" class="img"></image>
- <view class="goods-info">
- <view class="name">{{item.name}}</view>
- <view class="unit">{{item.spec}}</view>
- <view class="price flex-y-bottom">
- <block v-if="item.is_rebate==1">
- <view>¥{{item.first_price}}</view>
- <view class="textDecoration">¥{{item.price}}</view>
- </block>
- <block v-else>
- <view>¥{{item.price}}</view>
- </block>
- </view>
- </view>
- <view class="goods-num-block " :style="{color:getColorItem}">
- <view class="flex flex-x-between flex-y-center">
- <view class="num-btn num-btn-1 iconfont icon-jian1"
- @click="changeNum(item.category_id,item.goods_id,1,'car',index,'',item.many_rebate,item.is_rebate,goods.pocket)">
- </view>
- <view class="num">{{item.num}}</view>
- <view class="num-btn num-btn-2 iconfont icon-jia1"
- @click="changeNum(item.category_id,item.goods_id,2,'car',index,'',item.many_rebate,item.is_rebate,goods.pocket)">
- </view>
- </view>
- <view class="ft24 many_rebate" v-if="item.many_rebate>0 && item.is_rebate==1">
- {{item.many_rebate}}{{item.unit}}起购
- </view>
- </view>
- </view>
- </view>
- <view class="flex-y-center radio" style="padding-bottom: 10rpx;"
- @click="chooseBag(carGoods[carGoods.length-1].pocket+1)">
- <view class="radio__inner"
- :style="is_checked==(carGoods[carGoods.length-1].pocket+1)?('border: 1rpx solid' + getColorItem):''">
- <view
- :style="is_checked==(carGoods[carGoods.length-1].pocket+1)?('background:'+ getColorItem):''"
- class="radio__inner-icon radio__inner-icon is-default-checked">
- </view>
- </view>
- 装入口袋{{carGoods[carGoods.length-1].pocket+1}} <text class="radio_tip">选用后,加购商品将自动放入该口袋</text>
- </view>
- </block>
- <!--
- <block v-else>
- <view class="item flex flex-y-center flex-nowarp" v-for="(item,index) in carGoods" :key="index"
- v-if="item.num>0">
- <image :src="getImgSrc(item.spec_image)" mode="aspectFill" class="img"></image>
- <view class="goods-info">
- <view class="name">{{item.name}}</view>
- <view class="unit">{{item.spec}}</view>
- <view class="price flex-y-bottom">
- <block v-if="item.is_rebate==1">
- <view>¥{{item.first_price}}</view>
- <view class="textDecoration">¥{{item.price}}</view>
- </block>
- <block v-else>
- <view>¥{{item.price}}</view>
- </block>
- </view>
- </view>
- <view class="goods-num-block " :style="{color:getColorItem}">
- <view class="flex flex-x-between flex-y-center">
- <view class="num-btn num-btn-1 iconfont icon-jian1"
- @click="changeNum(item.category_id,item.goods_id,1,'car',index,'',item.many_rebate,item.is_rebate)">
- </view>
- <view class="num">{{item.num}}</view>
- <view class="num-btn num-btn-2 iconfont icon-jia1"
- @click="changeNum(item.category_id,item.goods_id,2,'car',index,'',item.many_rebate,item.is_rebate)">
- </view>
- </view>
- <view class="ft24 many_rebate" v-if="item.many_rebate>0 && item.is_rebate==1">
- {{item.many_rebate}}{{item.unit}}起购
- </view>
- </view>
- </view>
- </block> -->
- </view>
- </scroll-view>
- </view>
- </view>
- </template>
- <script>
- import {
- mapState,
- mapGetters,
- mapMutations
- } from 'vuex'
- export default {
- props: {
- carNum: {
- type: Number,
- default: 0,
- },
- isDistance: {
- type: Number,
- default: 1,
- },
- carGoods: {
- type: Array,
- default: function() {
- return []
- }
- },
- carTotal: {
- type: [Number, String],
- default: 0
- },
- deliveryPrice: {
- type: [Number, String],
- default: '0.00'
- },
- userInfo: {
- type: Object,
- default: function() {
- return {}
- }
- },
- navBtn: {
- type: Boolean,
- default: false,
- },
- //选择就餐人数
- eat_people: {
- type: [Number, String],
- default: 0
- },
- checked: {
- type: [Number, String],
- default: 0
- }
- },
- data() {
- return {
- // store_id: '',
- table_id: '',
- carGoodsPop: false,
- distance: 1,
- is_checked: 1
- };
- },
- mounted() {
- // this.store_id = uni.getStorageSync('store_id')
- this.table_id = uni.getStorageSync('table_id')
- // this.systemInfo = uni.getStorageSync('systemInfo')
- // console.log(this.systemInfo.set,"this.systemInfo")
- },
- computed: {
- ...mapState(['teen_index', 'store_id', 'is_business']),
- getColorItem() {
- return this.$store.state.setColor
- },
- systemInfo() {
- if (this.$store.state.systemInfo) {
- return this.$store.state.systemInfo
- }
- }
- },
- watch: {
- carNum: function(newNum, oldNum) {
- if (newNum == 0) {
- this.carGoodsPop = false
- }
- },
- checked: {
- handler(newName, oldName) {
- console.log(newName, "is_checked")
- this.is_checked = newName
- },
- // 开启深度监听
- deep: true
- }
- },
- methods: {
- chooseBag(index) {
- this.is_checked = index;
- this.$emit("choosebag", index)
- },
- // 选择外卖地址
- getWechatAddress: function(e) {
- uni.navigateTo({
- url: '/pages/address/address?teen_index=1'
- })
- },
- //去创建订单
- onCreatOrder() {
- // 示例
- // #ifdef MP-ALIPAY
- my.getAuthCode({
- // 订单服务授权:order_service。如需同时获取用户多项授权,可在 scopes 中传入多个 scope 值。
- scopes: ['order_service'],
- success: (res) => {
- console.log(res, "res")
- // 订单服务授权成功
- this.fastTake();
- },
- fail: (res) => {
- // 订单服务授权失败,根据自己的业务场景来进行错误处理
- this.fastTake();
- },
- });
- // #endif
- // #ifdef MP-WEIXIN
- this.fastTake();
- // #endif
-
- // #ifdef H5
- //仅供测试使用
- this.fastTake();
- // #endif
- },
- fastTake() {
- // console.log("jiesuan")
- if (this.carNum == 0) {
- uni.showToast({
- title: '请先选择商品',
- icon: 'none'
- })
- return false
- }
- //获取购物车数据
- this.$http.request('xcx/fastTake', {
- store_id: this.store_id,
- user_id: uni.getStorageSync('user_id'),
- state: Number(this.teen_index),
- }, "", "", true).then(res => {
- this.$store.commit('SET_CREAT', false)
- //重置购物车
- uni.navigateTo({
- // url: `/pages/creatOrder/creatOrder?teen_index=${this.teen_index}`
- //新增点餐人数
- url: '/pages/creatOrder/creatOrder?teen_index=' + this.teen_index +
- '&eat_people=' + this.eat_people
- })
- }).catch(err => {
- console.log(err)
- })
- },
- //拼接图片全路径
- getImgSrc(src) {
- return this.$utils.getImgSrc(src)
- },
- //显示购物车列表
- showCarGoods() {
- if (this.carGoods.length == 0) {
- return
- }
- this.carGoodsPop = !this.carGoodsPop
- },
- /**
- * 改变商品数量
- * @category_id:分类id
- * @goods_id:商品id
- * @type:1减少 2增加
- * @data_from 购物车列表传 'car' 规格弹窗传 'spec' 无规格传 'goods' 否则不传
- * @car_index 购物车下标 data_form = 'car'传
- * @goods_price 商品价格 data_from = 'goods' 传
- * */
- changeNum(category_id, goods_id, type, data_from, car_index, goods_price, many_rebate = '', is_rebate = '',
- pocket = '') {
- console.log(this.carGoods, goods_price, many_rebate, is_rebate, pocket)
- this.$parent.changeNum(category_id, goods_id, type, data_from, car_index, goods_price, many_rebate,
- is_rebate, pocket);
- },
- //清空购物车
- clearCar() {
- uni.showModal({
- content: "确定清空购物车",
- success: (r) => {
- if (r.confirm) {
- var url, data;
- if (this.$store.state.systemInfo.is_qian_many == 1 && getApp().globalData
- .readyReset == 1) {
- url = 'xcx/delete_carta';
- data = {
- user_id: this.userInfo.id,
- table_id: this.systemInfo.table_id,
- }
- } else {
- url = 'xcx/delete_cart';
- data = {
- user_id: this.userInfo.id,
- }
- }
- this.$http.request(url, data).then(res => {
- this.carGoodsPop = false
- this.$parent.clearCar()
- }).catch(err => {
- console.log(err)
- })
- }
- }
- })
- },
- },
- }
- </script>
- <style lang="scss" scoped>
- @import './shoppingCart.scss'
- </style>
|