257 lines
6.7 KiB
Vue
257 lines
6.7 KiB
Vue
<template>
|
||
<view class="pages-shop" v-if="isLoad">
|
||
<view class="item-child mb-md ml-sm mr-sm pt-lg pl-lg pr-lg fill-base radius-24" :class="[{'mt-md':index==0}]"
|
||
v-for="(item,index) in shopCarList.list" :key="index">
|
||
<view @tap="goDetail(index)" class="flex-y-center mb-lg">
|
||
<i class="iconfont icon-dianpu mr-sm"></i>
|
||
<view class="f-title c-title text-bold ellipsis">{{item.farmer_info.title}}</view>
|
||
<i class="iconfont icon-right"></i>
|
||
</view>
|
||
<view @tap.stop="toUpdateStatus(index,aindex)" class="flex-warp pb-lg b-1px-b"
|
||
:class="[{'pt-lg':aindex!=0}]" v-for="(aitem,aindex) in item.goods_list" :key="aindex">
|
||
<i class="iconfont flex-y-center mr-md"
|
||
:class="[{'icon-xuanze':!aitem.status},{'icon-xuanze-fill':aitem.status}]"
|
||
:style="{color:aitem.status?primaryColor:''}"></i>
|
||
<image mode="aspectFill" lazy-load class="goods-img radius-16" :src="aitem.cover">
|
||
</image>
|
||
<view class="flex-1 ml-md">
|
||
<view class="goods-title f-title c-title text-bold ellipsis">
|
||
{{aitem.goods_name}}
|
||
</view>
|
||
<view class="flex-between mt-sm">
|
||
<view class="goods-spe pl-sm pr-sm f-caption c-paragraph ellipsis radius-4">
|
||
{{aitem.spe_name}}
|
||
</view>
|
||
<view class="flex-1"></view>
|
||
</view>
|
||
<view class="f-desc c-warning mt-sm" v-if="aitem.integral_id">
|
||
{{aitem.i_price*1>0?`${aitem.integral}积分+${aitem.i_price}元`:`${aitem.integral}积分`}}
|
||
</view>
|
||
<view class="flex-between" :class="[{'mt-md':!aitem.integral_id}]">
|
||
<view class="flex-y-baseline f-caption c-warning">
|
||
<view class="f-caption c-caption mr-sm" v-if="aitem.integral_id">商城价</view>
|
||
¥<view class="f-title text-bold"> {{aitem.price}} </view>
|
||
</view>
|
||
<view class="flex-warp">
|
||
<view class="add-remove-item flex-center">
|
||
<i @tap.stop="toUpdateCar(aitem.farmer_id,aitem.id,aitem.spe_id,-1)"
|
||
class="iconfont icon-remove-circle c-caption"></i>
|
||
<view class="number flex-center f-desc pl-sm pr-sm">{{aitem.goods_num}}
|
||
</view>
|
||
<i @tap.stop="toUpdateCar(aitem.farmer_id,aitem.goods_id,aitem.spe_id,1)"
|
||
class="iconfont icon-add-circle" :style="{color:primaryColor}"></i>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<abnor v-if="shopCarList.list.length<=0"></abnor>
|
||
<view class="space-footer"></view>
|
||
<view class="fix footer-info flex-center" v-if="shopCarList.list.length > 0">
|
||
<view class="item-height flex-1 flex-between fill-base pl-lg pr-lg">
|
||
<view @tap="toUpdateStatus(-1)" class="flex-y-center">
|
||
<i class="iconfont mr-md"
|
||
:class="[{'icon-xuanze':!shopCarList.selectAll},{'icon-xuanze-fill':shopCarList.selectAll}]"
|
||
:style="{color:shopCarList.selectAll?primaryColor:''}"></i>全选
|
||
</view>
|
||
<view class="flex-y-baseline f-paragraph c-title" style="line-height: 35rpx;">
|
||
合计：
|
||
<view class="f-title c-warning text-bold">
|
||
¥{{shopCarList.car_price || 0}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view @tap="goOrder" class="item-height pay-btn flex-center f-sm-title c-base"
|
||
:style="{background:primaryColor}">去付款
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState,
|
||
mapActions,
|
||
mapMutations
|
||
} from "vuex"
|
||
export default {
|
||
components: {},
|
||
data() {
|
||
return {
|
||
isLoad: false,
|
||
options: {},
|
||
lockTap: false
|
||
}
|
||
},
|
||
computed: mapState({
|
||
primaryColor: state => state.config.configInfo.primaryColor,
|
||
subColor: state => state.config.configInfo.subColor,
|
||
configInfo: state => state.config.configInfo,
|
||
userInfo: state => state.user.userInfo,
|
||
shopCarList: state => state.order.shopCarList,
|
||
}),
|
||
async onLoad(options) {
|
||
this.$util.showLoading()
|
||
this.options = options
|
||
await this.initIndex()
|
||
},
|
||
onPullDownRefresh() {
|
||
// #ifndef APP-PLUS
|
||
uni.showNavigationBarLoading()
|
||
// #endif
|
||
this.initRefresh()
|
||
uni.stopPullDownRefresh()
|
||
},
|
||
methods: {
|
||
...mapActions(['getConfigInfo', 'updateCommonOptions', 'getShopCarList']),
|
||
...mapMutations(['updateUserItem']),
|
||
async initIndex() {
|
||
await this.getShopCarList()
|
||
this.$util.hideAll()
|
||
this.isLoad = true
|
||
},
|
||
initRefresh() {
|
||
this.initIndex()
|
||
},
|
||
// 修改购物车数量
|
||
// id 增加数量时传商品goods_id
|
||
async toUpdateCar(store_id, id, spe_id, goods_num, isCar = 1) {
|
||
let methodModel = goods_num > 0 ? 'addCar' : 'delCar'
|
||
let param = goods_num > 0 ? {
|
||
store_id,
|
||
goods_id: id,
|
||
spe_id,
|
||
goods_num,
|
||
} : {
|
||
id,
|
||
goods_num: 1
|
||
}
|
||
if (this.lockTap) return;
|
||
this.lockTap = true;
|
||
try {
|
||
await this.$api.shop[methodModel](param)
|
||
this.lockTap = false
|
||
await this.getShopCarList()
|
||
} catch (e) {
|
||
this.lockTap = false
|
||
}
|
||
},
|
||
// 修改购物车数据选择状态
|
||
async toUpdateStatus(index, aindex) {
|
||
let param = {}
|
||
if (index === -1) {
|
||
let selectAll = !this.shopCarList.selectAll
|
||
this.selectAll = selectAll
|
||
param = {
|
||
status: selectAll ? 1 : 0
|
||
}
|
||
} else {
|
||
let {
|
||
id,
|
||
status
|
||
} = this.shopCarList.list[index].goods_list[aindex]
|
||
param = {
|
||
id: [id],
|
||
status: status == 1 ? 0 : 1
|
||
}
|
||
}
|
||
if (this.lockTap) return;
|
||
this.lockTap = true;
|
||
try {
|
||
await this.$api.shop.carUpdate(param)
|
||
this.lockTap = false
|
||
await this.getShopCarList()
|
||
} catch (e) {
|
||
this.lockTap = false
|
||
}
|
||
},
|
||
// 清空购物车
|
||
async toDelCar() {
|
||
await this.$api.shop.delSomeCar()
|
||
this.$util.showToast({
|
||
title: `清空成功`
|
||
})
|
||
this.$refs.show_car_item.close()
|
||
await this.getCarInfo()
|
||
},
|
||
goDetail(index) {
|
||
let {
|
||
farmer_id: id
|
||
} = this.shopCarList.list[index]
|
||
let url = `/shop/pages/store?id=${id}`
|
||
this.$util.goUrl({
|
||
url
|
||
})
|
||
},
|
||
// 去结算
|
||
goOrder() {
|
||
let {
|
||
car_count
|
||
} = this.shopCarList
|
||
if (car_count < 1) {
|
||
this.$util.showToast({
|
||
title: `请选择商品`
|
||
})
|
||
return
|
||
}
|
||
this.$util.goUrl({
|
||
url: `/shop/pages/order`
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss">
|
||
.pages-shop {
|
||
|
||
|
||
.icon-xuanze,
|
||
.icon-xuanze-fill {
|
||
font-size: 38rpx;
|
||
}
|
||
|
||
.item-child {
|
||
|
||
.icon-xuanze,
|
||
.icon-xuanze-fill {
|
||
height: 172rpx;
|
||
}
|
||
|
||
.goods-img {
|
||
width: 172rpx;
|
||
height: 172rpx;
|
||
}
|
||
|
||
.goods-title {
|
||
max-width: 420rpx;
|
||
}
|
||
|
||
.goods-spe {
|
||
height: 44rpx;
|
||
line-height: 44rpx;
|
||
background: #F7F7F7;
|
||
max-width: 420rpx;
|
||
}
|
||
}
|
||
|
||
.footer-info {
|
||
width: 100%;
|
||
left: 0;
|
||
bottom: 0;
|
||
|
||
.item-height {
|
||
height: 90rpx;
|
||
height: calc(90rpx + env(safe-area-inset-bottom) / 2);
|
||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||
}
|
||
|
||
.pay-btn {
|
||
width: 200rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|