初始化代码
This commit is contained in:
256
uniapp/uni-app/shop/pages/car.vue
Normal file
256
uniapp/uni-app/shop/pages/car.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user