You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
569 lines
17 KiB
569 lines
17 KiB
<template>
|
|
<view class="shopping-cart flex-1 flex flex-column justify-between">
|
|
<view>
|
|
<view class="">
|
|
<view class="shopping-cart-address flex align-center p-l-28 p-r-28">
|
|
<view class="m-r-14">
|
|
<u-icon size="40" name="map-fill" color="#000"></u-icon>
|
|
</view>
|
|
<view class="shopping-cart-address-name text-ellipsis">{{location.type === 'shop' ? `站点：${location.name}` : location.shippingAddress}}</view>
|
|
<view class="shopping-cart-address-switch flex align-center text-black font-28">
|
|
<text class="p-l-30">|</text>
|
|
<view class="p-l-30 p-r-30 text-black font-28" @click="isEdit = !isEdit">{{ isEdit ? '返回购物' : '删除订单' }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<scroll-view scroll-y class="shopping-cart-scroll">
|
|
<view class="w-100 h-100" v-if="!goodsProducts.length">
|
|
<u-empty icon-size="100" mode="car" text="购物车空空如也"></u-empty>
|
|
</view>
|
|
<view v-else>
|
|
<view class="shopping-cart-scroll-item bg-white m-b-20" v-for="item in goodsProducts" :key="item.id">
|
|
|
|
<view class="flex align-center">
|
|
<u-checkbox class="shopping-cart-scroll-item-checkbox flex align-center" v-model="item.checked" shape="circle" @change="handleChekChange" />
|
|
<view class="flex-1 shopping-cart-scroll-item-goods flex align-start" >
|
|
<view class="m-r-10" >
|
|
<image class="shopping-cart-scroll-item-goods-image" :src="item.pic" mode="aspectFill" ></image>
|
|
</view>
|
|
<view class="shopping-cart-scroll-item-goods-info flex-1 flex flex-column justify-between" @click="toGoodsInfo(item)">
|
|
<view class="shopping-cart-scroll-item-goods-info-title ">{{ item.shopId_dictText }}</view>
|
|
|
|
<view class="shopping-cart-scroll-item-goods-info-specs">
|
|
{{item.shopSkuParam}}
|
|
</view>
|
|
|
|
<view class="shopping-cart-scroll-item-goods-info-specs2 font-32" v-if="item.goods.giveType==1">
|
|
<!-- <text v-if="userInfo.level == 1 && (item.goods.oneMomey !== 0 )">
|
|
返消费金￥{{item.goods.oneMomey}} {{'兑购金'+item.goods.oneInteger}}
|
|
</text>
|
|
<text v-if="userInfo.level == 2 && (item.goods.twoMomey !== 0 )">
|
|
返消费金￥{{item.goods.twoMomey}} {{'兑购金'+item.goods.twoInteger}}
|
|
</text>
|
|
<text v-if="userInfo.level == 3 && (item.goods.threeMomey !== 0 )">
|
|
返消费金￥{{item.goods.threeMomey}} {{'兑购金'+item.goods.threeInteger}}
|
|
</text>
|
|
<text v-if="userInfo.level == 4 && (item.goods.fourMomey !== 0 )">
|
|
返消费金￥{{item.goods.fourMomey}} {{'兑购金'+item.goods.fourInteger}}
|
|
</text> -->
|
|
<text v-if="userInfo.level == 1 && !(item.goods.oneMomey == 0 && item.goods.oneInteger == 0)">
|
|
{{ item.goods.oneMomey == 0 ? '' : '返消费金￥'+item.goods.oneMomey }} {{ item.goods.oneInteger == 0 ? '' : '返兑购金'+item.goods.oneInteger +"元" }}
|
|
</text>
|
|
<text v-if="userInfo.level == 2 && !(item.goods.twoMomey == 0 && item.goods.twoInteger == 0)" >
|
|
|
|
{{ item.goods.twoMomey == 0 ? '' : '返消费金￥'+item.goods.twoMomey }} {{ item.goods.twoInteger == 0 ? '' : '返兑购金'+item.goods.twoInteger +"元"}}
|
|
</text>
|
|
<text v-if="userInfo.level == 3 && !(item.goods.threeMomey == 0 && item.goods.threeInteger == 0)">
|
|
|
|
{{item.goods.threeMomey == 0 ? '' : '返消费金￥'+item.goods.threeMomey }} {{ item.goods.threeInteger == 0 ? '' : '返兑购金'+item.goods.threeInteger +"元"}}
|
|
</text>
|
|
<text v-if="userInfo.level == 4 && !(item.goods.fourMomey == 0 && item.goods.fourInteger == 0)">
|
|
|
|
{{item.goods.fourMomey == 0 ? '' : '返消费金￥'+item.goods.fourMomey }} {{ item.goods.fourInteger == 0 ? '' : '返兑购金'+item.goods.fourInteger +"元"}}
|
|
</text>
|
|
</view>
|
|
<view class="shopping-cart-scroll-item-goods-info-specs2 font-32" v-else>
|
|
<text v-if="!(item.goods.allMoney == 0 && item.goods.allInteger == 0) ">
|
|
{{ item.goods.allMoney == 0 ? '' : '返消费金￥'+item.goods.allMoney }} {{ item.goods.allInteger == 0 ? '' : '返兑购金'+item.goods.allInteger +"元"}}
|
|
</text>
|
|
</view>
|
|
|
|
<view class="flex align-center justify-between">
|
|
<view class="font-32 text-red flex align-end">
|
|
<text>￥</text>
|
|
<text class="font-32">{{ item.price }}</text>
|
|
</view>
|
|
|
|
<view class="shopping-cart-scroll-item-goods-number-box" @click.stop="">
|
|
<u-number-box v-model="item.shopNum" min="1" @minus="e => goodsNumberChange(e.value, item)" @plus="e => goodsNumberChange(e.value, item)"></u-number-box>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
|
|
<view class="shopping-cart-footer p-24 bg-white">
|
|
<view class="flex justify-end">
|
|
<text class="sum_back_momey m-l-30 font-32">总返消费金￥{{totalMoney| numberFormat}} 总返兑购金{{totalInteger| numberFormat}}元</text>
|
|
</view>
|
|
<view class="bg-white flex align-center justify-between m-t-20">
|
|
<u-checkbox-group active-color="#01AEEA">
|
|
<u-checkbox v-model="allCheck" shape="circle" @change="handleAllChekChange">
|
|
<view class="font-28">
|
|
全选
|
|
</view>
|
|
</u-checkbox>
|
|
</u-checkbox-group>
|
|
|
|
<view class="flex align-center" v-if="!isEdit">
|
|
<view class="flex align-end font-32">
|
|
<text>合计：</text>
|
|
<view class="font-24 text-red flex align-end">
|
|
<text>￥</text>
|
|
<text class="font-32">{{ totalPrice | numberFormat }}</text>
|
|
</view>
|
|
</view>
|
|
<u-button :disabled="btnDisabled" type="primary" shape="circle" class="shopping-cart-footer-button" @click="confirmOrder">去结算</u-button>
|
|
</view>
|
|
<view class="flex align-center" v-else>
|
|
<u-button :disabled="btnDisabled" type="error" shape="circle" class="shopping-cart-footer-button" @click="delModal = true">删除</u-button>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<u-modal v-model="delModal" confirm-color="#fa3534" confirm-text="删除" show-cancel-button content="确定将选中的商品删除吗？" @confirm="delGoods"></u-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { IMG_URL } from '@/env.js'
|
|
import { mapState } from 'vuex';
|
|
export default {
|
|
data() {
|
|
return {
|
|
delModal: false,
|
|
allCheck: true,
|
|
goodsNumber: 1,
|
|
isEdit: false,
|
|
goodsProducts: [],
|
|
// giveMoneySum: 0, // 消费金
|
|
// giveIntegerSum: 0, // 兑购金
|
|
userInfo:{}
|
|
};
|
|
},
|
|
// onLoad() {
|
|
// this.getShoppingCartList()
|
|
// uni.$on('updateShoppingCartList', () => {
|
|
// console.log('-------')
|
|
// this.getShoppingCartList()
|
|
|
|
// })
|
|
// },
|
|
|
|
onShow() {
|
|
this.getShoppingCartList();
|
|
uni.$on('updateShoppingCartList', () => {
|
|
console.log('-------')
|
|
this.getShoppingCartList()
|
|
|
|
})
|
|
},
|
|
onUnload() {
|
|
uni.$off('updateShoppingCartList')
|
|
},
|
|
computed: {
|
|
// ...mapState({
|
|
// userToken: state => state.userToken,
|
|
// userInfo: state => state.userInfo
|
|
// }),
|
|
location () {
|
|
return this.$store.state.location
|
|
},
|
|
btnDisabled () {
|
|
return this.goodsProducts.findIndex(item => item.checked) !== -1 ? false : true
|
|
},
|
|
totalPrice () {
|
|
let price = 0
|
|
let arr = this.goodsProducts.filter(item => item.checked)
|
|
arr.forEach(item => {
|
|
price += (item.price * item.shopNum);
|
|
})
|
|
return price
|
|
},
|
|
|
|
totalPrice () {
|
|
let price = 0
|
|
let arr = this.goodsProducts.filter(item => item.checked)
|
|
arr.forEach(item => {
|
|
price += (item.price * item.shopNum);
|
|
})
|
|
return price
|
|
},
|
|
|
|
|
|
totalMoney () {
|
|
let price = 0
|
|
let arr = this.goodsProducts.filter(item => item.checked)
|
|
let that = this;
|
|
arr.forEach((item,index) => {
|
|
if(item.goods.giveType==1){
|
|
if(that.userInfo.level == 1){
|
|
price += item.goods.oneMomey * item.shopNum;
|
|
}
|
|
if(that.userInfo.level == 2){
|
|
price += item.goods.twoMomey * item.shopNum;
|
|
}
|
|
if(that.userInfo.level == 3){
|
|
price += item.goods.threeMomey * item.shopNum;
|
|
}
|
|
if(that.userInfo.level == 4){
|
|
price += item.goods.fourMomey * item.shopNum;
|
|
}
|
|
}else{
|
|
price += item.goods.allMoney * item.shopNum;
|
|
}
|
|
})
|
|
return price
|
|
},
|
|
|
|
totalInteger () {
|
|
let price = 0
|
|
let arr = this.goodsProducts.filter(item => item.checked)
|
|
let that = this;
|
|
arr.forEach(item => {
|
|
if(item.goods.giveType==1){
|
|
if(that.userInfo.level == 1){
|
|
price += (item.goods.oneInteger * item.shopNum);
|
|
}
|
|
if(that.userInfo.level == 2){
|
|
price += (item.goods.twoInteger * item.shopNum);
|
|
}
|
|
if(that.userInfo.level == 3){
|
|
price += (item.goods.threeInteger * item.shopNum);
|
|
}
|
|
if(that.userInfo.level == 4){
|
|
price += (item.goods.fourInteger * item.shopNum);
|
|
}
|
|
}else{
|
|
price += (item.goods.allInteger * item.shopNum);
|
|
}
|
|
})
|
|
return price
|
|
},
|
|
|
|
|
|
// giveMoneySum () {
|
|
// let price = 0
|
|
// let arr = this.goodsProducts.filter(item => item.checked)
|
|
// arr.forEach(item => {
|
|
// price += item.giveMoneySum;
|
|
// })
|
|
// return price
|
|
// },
|
|
// giveIntegerSum () {
|
|
// let price = 0
|
|
// let arr = this.goodsProducts.filter(item => item.checked)
|
|
// arr.forEach(item => {
|
|
// price += item.giveIntegerSum;
|
|
// })
|
|
// return price
|
|
// },
|
|
gridData () {
|
|
return this.$store.state.gridData
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
this.getShoppingCartList();
|
|
|
|
},
|
|
onReachBottom() {
|
|
|
|
},
|
|
methods: {
|
|
toGoodsInfo (item) {
|
|
let idx = this.gridData.findIndex(obj => obj.id === item.bottonId)
|
|
let key = idx > -1 ? this.gridData[idx].key : 'home'
|
|
this.$tools.navigateTo({
|
|
url: `/pagesC/goodsInfo/goodsInfo?id=${item.shopId}&type=${key}`
|
|
})
|
|
},
|
|
getShoppingCartList () {
|
|
// this.$api('getUserInfo')
|
|
// .then(res => {
|
|
// let { code, result, message } = res
|
|
// if (code === 200) {
|
|
// // const userInfo = {...result.userInfo,...result.account}
|
|
|
|
// this.userInfo = result.userInfo;
|
|
// console.log(userInfo)
|
|
// } else {
|
|
// this.$Toast(message)
|
|
|
|
// }
|
|
// })
|
|
console.log(this.$storage.getStorage("__user_info"),"userInfo-----")
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// this.getUserInfo ();
|
|
this.$api('getShoppingCartList')
|
|
.then(res => {
|
|
uni.hideLoading()
|
|
let { code, message, result } = res
|
|
if (code === 200) {
|
|
let arr = result.records.map(item => ({ ...item, checked: true, shopParam: JSON.parse(item.shopParam)}))
|
|
arr.forEach(item => {
|
|
console.log(item)
|
|
item.pic = item.shopImage.split(',')[0]
|
|
})
|
|
this.goodsProducts = arr
|
|
console.log(this.goodsProducts)
|
|
this.userInfo = this.$storage.getStorage("__user_info");
|
|
|
|
} else {
|
|
this.$Toast(message)
|
|
}
|
|
uni.stopPullDownRefresh();
|
|
})
|
|
.catch(err => {
|
|
uni.stopPullDownRefresh();
|
|
uni.hideLoading()
|
|
// this.$Toast(err.message || '服务错误,请联系客服')
|
|
})
|
|
},
|
|
// 获取用户信息
|
|
getUserInfo () {
|
|
uni.showLoading();
|
|
this.$api('getUserInfo')
|
|
.then(res => {
|
|
let { code, result, message } = res
|
|
uni.hideLoading();
|
|
if (code === 200) {
|
|
const userInfo = {...result.userInfo,...result.account}
|
|
this.$storage.setStorage("__user_info",userInfo)
|
|
this.userInfo = result.userInfo;
|
|
console.log(userInfo)
|
|
} else {
|
|
this.$Toast(message)
|
|
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$Toast(err.message)
|
|
uni.hideLoading();
|
|
})
|
|
},
|
|
// 获取地址
|
|
getAddress() {
|
|
uni.authorize({
|
|
scope: 'scope.userLocation',
|
|
success: () => {
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: res => {
|
|
|
|
this.qqmapsdk.reverseGeocoder({
|
|
location: {
|
|
latitude: res.latitude,
|
|
longitude: res.longitude
|
|
},
|
|
success: (location) => {
|
|
this.userLocation = true
|
|
let {result} = location
|
|
let userInfo = { ...this.$store.state.userInfo, address: result.formatted_addresses.recommend, longitude: res.longitude, latitude: res.latitude, }
|
|
this.$store.commit('set_userInfo', userInfo)
|
|
this.getStationmasterList(res.longitude, res.latitude);
|
|
},
|
|
})
|
|
},
|
|
fail: () => {
|
|
this.userLocation = false
|
|
}
|
|
});
|
|
},
|
|
fail: () => {
|
|
uni.showModal({
|
|
title: '位置授权失败',
|
|
content: '请允许使用您的位置，否则无法获取附件站点',
|
|
confirmText: '去设置',
|
|
success: res => {
|
|
if (res.confirm) {
|
|
uni.openSetting({
|
|
success: openSttingInfo => {
|
|
if (openSttingInfo.authSetting['scope.userLocation']) {
|
|
this.getAddress()
|
|
this.userLocation = true
|
|
} else {
|
|
this.userLocation = false
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
this.userLocation = false
|
|
this.isLogin && this.getAddressList()
|
|
}
|
|
},
|
|
fail: () => {
|
|
this.userLocation = false
|
|
this.isLogin && this.getAddressList()
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
handleChekChange (e) {
|
|
let { value } = e
|
|
setTimeout(() => {
|
|
let isAllCheck = this.goodsProducts.findIndex(item => !item.checked) !== -1
|
|
this.allCheck = value && !isAllCheck ? true : false
|
|
})
|
|
},
|
|
handleAllChekChange(e) {
|
|
let { value } = e
|
|
// this.allCheck = !this.allCheck
|
|
this.goodsProducts.forEach(item => {
|
|
item.checked = value
|
|
})
|
|
},
|
|
goodsNumberChange(num, item) {
|
|
this.$u.debounce(() => {
|
|
this.$api('setShoppingCartNum', {id: item.id, num})
|
|
.then(res => {
|
|
if (res.code !== 200) {
|
|
this.$Toast(res.message)
|
|
}
|
|
})
|
|
}, 500)
|
|
},
|
|
delGoods() {
|
|
let copyArr = JSON.parse(JSON.stringify(this.goodsProducts))
|
|
let arr = copyArr.filter(item => item.checked)
|
|
let idArr = arr.map(item => item.id)
|
|
let ids = idArr.join(',')
|
|
this.goodsProducts = this.goodsProducts.filter(item => !item.checked)
|
|
this.$api('delShoppingCart', {ids})
|
|
.then(res => {
|
|
|
|
})
|
|
},
|
|
confirmOrder () {
|
|
let arr = this.goodsProducts.filter(item => item.checked)
|
|
console.log(arr)
|
|
let idArr = arr.map(item => item.id)
|
|
let ids = idArr.join(',')
|
|
let isZone = arr.findIndex(item => item.bottonType) > -1 ? 1 : 0
|
|
console.log(isZone)
|
|
this.$tools.navigateTo({
|
|
url: `/pagesC/confirmOrder/confirmOrder?ids=${ids}&orderType=${0}&payType=${0}&isZone=${isZone}`
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.shopping-cart {
|
|
&-address {
|
|
height: 80rpx;
|
|
&-name {
|
|
width: 60%;
|
|
color: #000;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
&-switch {
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
&-scroll {
|
|
box-sizing: border-box;
|
|
height: calc(100vh - 180rpx);
|
|
padding: 0 28rpx;
|
|
background: #F5F6F8;
|
|
padding-bottom: 170rpx;
|
|
&-item {
|
|
border-radius: 20rpx;
|
|
padding: 16rpx;
|
|
|
|
&-checkbox {
|
|
height: 100%;
|
|
}
|
|
|
|
&-goods {
|
|
&-image {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
&-number-box {
|
|
/deep/.u-icon-plus {
|
|
background: $u-type-primary!important;
|
|
color: #fff!important;
|
|
}
|
|
}
|
|
|
|
&-info {
|
|
min-height: 200rpx;
|
|
|
|
&-specs {
|
|
font-size: 32rpx;
|
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
|
color: #6c6c6c;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;/*设置对齐模式：垂直对齐*/
|
|
-webkit-line-clamp: 2;/*设置多行的行数*/
|
|
}
|
|
|
|
&-specs2 {
|
|
// font-size: 24rpx;
|
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
|
color: #FFA952;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;/*设置对齐模式：垂直对齐*/
|
|
-webkit-line-clamp: 2;/*设置多行的行数*/
|
|
}
|
|
|
|
&-title {
|
|
font-size: 32rpx;
|
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
|
color: #000000;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;/*设置对齐模式：垂直对齐*/
|
|
-webkit-line-clamp: 2;/*设置多行的行数*/
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-footer {
|
|
box-shadow: 0 -4rpx 20rpx #ccc;
|
|
position: fixed;
|
|
bottom: 0;
|
|
box-sizing: border-box;
|
|
height: 170rpx;
|
|
width: 100%;
|
|
.sum_back_momey{
|
|
display: inline-block;
|
|
height: 54rpx;
|
|
border-radius: 10rpx;
|
|
padding: 6rpx 8rpx;
|
|
color: #fff;
|
|
box-sizing: border-box;
|
|
background-color: #FFA952;
|
|
// font-size: 26rpx;
|
|
}
|
|
.clear{
|
|
height: 0;
|
|
overflow: hidden;
|
|
clear: both;
|
|
}
|
|
&-button {
|
|
margin-left: 10rpx;
|
|
/deep/.u-btn {
|
|
width: 200rpx;
|
|
height: 70rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|