Skip to content

M
mallapp
Commit 2c4edcd2 authored by 罗超's avatar 罗超
Browse files
Options

修改购物车部分样式

parent d46d0a6e
Show whitespace changes
Inline Side-by-side
Showing with 503 additions and 373 deletions
pages.json
View file @ 2c4edcd2
...@@ -3,11 +3,15 @@ ...@@ -3,11 +3,15 @@
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}, },
"pages": [{ "pages": [{
"path": "pages/index/index" "path": "pages/cart/cart"
},
{
"path": "pages/cats/cats"
}, },
{ {
"path": "pages/order-submit/order-submit" "path": "pages/index/index"
}, },
{ {
"path": "pages/goods/goods" "path": "pages/goods/goods"
}, },
...@@ -29,12 +33,6 @@ ...@@ -29,12 +33,6 @@
{ {
"path": "pages/address/address_chosen" "path": "pages/address/address_chosen"
}, },
{
"path": "pages/cart/cart"
},
{
"path": "pages/cats/cats"
},
{ {
"path": "pages/address/AddAddress" "path": "pages/address/AddAddress"
}, },
......
pages/cart/cart.vue
View file @ 2c4edcd2
<template> <template>
<div class='cartStyle' v-if="!isloading"> <div class="cartStyle" v-if="!isloading">
<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;padding: 0 15rpx;"> <view
<Text class='grid-text'>商品库存有限，请尽快下单</Text> style="
<Text @click='edit' v-if='editType==false' class='grid-text_r'>编辑</Text> display: flex;
<Text @click='edit' v-if='editType==true' class='grid-text_r'>完成</Text> flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 15rpx;
"
>
<Text class="grid-text">商品库存有限，请尽快下单哦</Text>
<Text @click="edit" v-if="editType == false" class="grid-text_r"
>编辑</Text
>
<Text @click="edit" v-if="editType == true" class="grid-text_r"
>完成</Text
>
</view> </view>
<view style="width: 100%;height: 30rpx;background: #F7F7F7;margin: 20rpx 0;"></view> <view
<u-empty v-if="list.length==0" text="购物车还是空的哦" mode="car"></u-empty> style="width: 100%; height: 30rpx; background: #f7f7f7; margin: 20rpx 0;"
></view>
<view style="padding: 25rpx;border-bottom: 1rpx solid #E4E4E4;" v-if="list.length>0"> <u-empty
<u-checkbox-group @change='SelectAll'> v-if="list.length == 0"
<u-checkbox v-model="allchecked" shape="circle" active-color="red">赞羊严选</u-checkbox> text="购物车还是空的哦"
mode="car"
></u-empty>
<view
style="padding: 0 12px 12px 12px; border-bottom: 1rpx solid #f5f5f5;"
v-if="list.length > 0"
>
<u-checkbox-group @change="SelectAll">
<u-checkbox v-model="allchecked" shape="circle" :active-color="mc"
>赞羊严选</u-checkbox
>
</u-checkbox-group> </u-checkbox-group>
</view> </view>
<view class="cartList" <view
:style="{'margin-bottom':listbottom}" class="cartList"
v-if="list.length>0" :style="{ 'margin-bottom': listbottom }"
v-if="list.length > 0"
>
<view
class="cartList_item"
v-for="(item, index) in list"
:key="index"
:name="item.name"
>
<u-checkbox-group
@change="clickcheckbox(item.checked, item.goods.price, index)"
> >
<view class="cartList_item" <u-checkbox
v-for="(item, index) in list" :key="index" v-model="item.checked"
:name="item.name"> shape="circle"
<u-checkbox-group @change='clickcheckbox(item.checked,item.goods.price,index)'> :active-color="mc"
<u-checkbox v-model="item.checked" shape="circle" active-color="red"></u-checkbox> ></u-checkbox>
</u-checkbox-group> </u-checkbox-group>
<image <image
:src="item.attrs.pic_url ? item.attrs.pic_url:item.goods.cover_pic" :src="item.attrs.pic_url ? item.attrs.pic_url : item.goods.cover_pic"
mode="aspectFit" mode="aspectFill"
style="width: 150rpx; height: 150rpx;margin-left: 30rpx;" style="
width: 150rpx;
height: 150rpx;
margin-left: 30rpx;
border-radius: 5px;
"
/> />
<view style="display: flex;flex-direction: column;justify-content: space-between;width: 460rpx;height: 150rpx;margin-left: 20rpx;"> <view
<Text style='font-size: 28rpx;width: 460rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;'>{{item.goods.name}}</Text> style="
<view style='width: 460rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;'> display: flex;
<view v-for="(attr, inde2x) in item.attrs.attr" :key="index2" > flex-direction: column;
<Text style='color: #A0A09D;font-size: 24rpx;margin-right: 5rpx;'>{{attr.attr_group_name}}:{{attr.attr_name}}</Text> justify-content: space-between;
width: 460rpx;
height: 150rpx;
margin-left: 20rpx;
"
>
<Text
style="
font-size: 28rpx;
width: 460rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
"
>{{ item.goods.name }}</Text
>
<view
style="
width: 460rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
"
>
<view v-for="(attr, inde2x) in item.attrs.attr" :key="inde2x">
<Text
style="color: #a0a09d; font-size: 24rpx; margin-right: 5rpx;"
>{{ attr.attr_group_name }}:{{ attr.attr_name }}</Text
>
</view> </view>
</view> </view>
<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;"> <view
<Text style='color: #E35943;font-size:30rpx ;'>￥<Text style='40rpx'>{{item.goods.price}}</Text></Text> style="
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
"
>
<Text style="font-size: 30rpx;" :style="{ color: mc }"
>￥<Text style="40rpx">{{ item.goods.price }}</Text></Text
>
<view class="item_input"> <view class="item_input">
<view class="item_input_l" <view
class="item_input_l"
:style="{ :style="{
color: item.num == 1 ? '#E2E2E2' : '#9B9B9B', color: item.num == 1 ? '#E2E2E2' : '#9B9B9B',
}" }"
@click="reduce(index,item.goods.price)">-</view> @click="reduce(index, item.goods.price)"
<input type="number" class="item_input_c" :value="item.num" > >-</view
<view class="item_input_r" style="color: #9B9B9B;" @click="plus(index,item.goods.price)">+</view> >
<input type="number" class="item_input_c" :value="item.num" />
<view
class="item_input_r"
style="color: #9b9b9b;"
@click="plus(index, item.goods.price)"
>+</view
>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="box_bottom" <view class="box_bottom" :style="{ 'margin-bottom': bottommargin }">
:style="{'margin-bottom':bottommargin}" <div style="margin-left: 30rpx;">
<u-checkbox-group @change="SelectAll">
<u-checkbox v-model="allchecked" shape="circle" active-color="red"
>全选</u-checkbox
> >
<div style='margin-left: 30rpx;'>
<u-checkbox-group @change='SelectAll'>
<u-checkbox v-model="allchecked" shape="circle" active-color="red">全选</u-checkbox>
</u-checkbox-group> </u-checkbox-group>
<Text style='color: #ff4544;font-size:30rpx ;' v-if='editType==false'>￥{{TotalPrice}}</Text> <Text
</div> style="font-size: 30rpx;"
<div class='bottom_btn' :style="{ color: mc }"
:style="{'background':TotalPrice>0 ? '#ff4544':'#989898'}" v-if="editType == false"
v-if='editType==false' >￥{{ TotalPrice }}</Text
@click='settlement'
> >
<Text style='font-size: 28rpx;color: white;' >去结算</Text>
</div> </div>
<u-button v-if='editType==true&& cart_id_list.length ==0' shape="circle" size="medium" class='Deletestyle'>删除</u-button> <div class="bottom_btn" v-if="!editType">
<u-button v-if='editType==true&& cart_id_list.length >0' shape="circle" size="medium" class='Deletestyle' @click='Delete' type="error">删除</u-button> <u-button
size="80"
:ripple="true"
shape="circle"
@click="settlement"
:custom-style="{
backgroundColor: mc,
height: '80rpx',
color: '#FFF',
fontSize: '14px',
}"
>去结算({{ checkCount }})
</u-button>
</div>
<u-button
v-if="editType"
size="80"
:ripple="true"
shape="circle"
@click="Delete"
:custom-style="{
backgroundColor: secondary,
height: '80rpx',
color: '#FFF',
fontSize: '14px',
marginRight: '12px',
}"
>删除
</u-button>
</view> </view>
<tabbars></tabbars> <tabbars></tabbars>
</div> </div>
</template> </template>
<script> <script>
import tabbars from "@/components/tabbar/index"; import tabbars from "@/components/tabbar/index";
export default { export default {
data(){ data() {
return{ return {
isloading: true, isloading: true,
pageTitle: "购物车", pageTitle: "购物车",
navHeight: 0, navHeight: 0,
contentHeight:0, contentHeight: 0,
cstyle:{}, cstyle: {},
allchecked:false, allchecked: false,
TotalPrice:0,//总价格 TotalPrice: 0, //总价格
bottommargin:0, bottommargin: 0,
listbottom:0, listbottom: 0,
editType:false, editType: false,
list:[], list: [],
cart_id_list:[], cart_id_list: [],
mc: "",
} secondary: "",
checkCount: 0,
};
}, },
created(){ created() {},
components: {
},
components:{
tabbars, tabbars,
}, },
onLoad() { onLoad() {
this.navHeight = this.$navHeight - 2; this.navHeight = this.$navHeight - 2;
this.mc = this.$uiConfig.mainColor;
this.secondary = this.$uiConfig.secondary;
this.cstyle = uni.getStorageSync("basedata") this.cstyle = uni.getStorageSync("basedata")
? uni.getStorageSync("basedata").cat_style ? uni.getStorageSync("basedata").cat_style
: []; : [];
...@@ -124,8 +230,8 @@ ...@@ -124,8 +230,8 @@
mounted() { mounted() {
let currentPages = getCurrentPages(); let currentPages = getCurrentPages();
let c = this.$uiConfig.is_bang ? 80 : 52; let c = this.$uiConfig.is_bang ? 80 : 52;
this.bottommargin = (c-2)+'px'; this.bottommargin = c - 2 + "px";
this.listbottom = (c-2+50)+'px'; this.listbottom = c - 2 + 50 + "px";
this.contentHeight = this.$utils.calcContentHeight(c); this.contentHeight = this.$utils.calcContentHeight(c);
let u = "/" + currentPages[currentPages.length - 1].route; let u = "/" + currentPages[currentPages.length - 1].route;
let pages = wx.getStorageSync("basedata") let pages = wx.getStorageSync("basedata")
...@@ -138,7 +244,7 @@ ...@@ -138,7 +244,7 @@
}); });
this.init(); this.init();
}, },
methods:{ methods: {
goHome() { goHome() {
uni.redirectTo({ url: "/pages/index/main" }); uni.redirectTo({ url: "/pages/index/main" });
}, },
...@@ -149,202 +255,230 @@ ...@@ -149,202 +255,230 @@
this.request( this.request(
{ {
url: "", url: "",
header:h, header: h,
data: { data: {
r: "api/cart/list", r: "api/cart/list",
}, },
}, },
(res) => { (res) => {
uni.hideNavigationBarLoading() uni.hideNavigationBarLoading();
this.isloading = false; this.isloading = false;
if(res.data.list.length>0){ if (res.data.list.length > 0) {
let goods_list = res.data.list[0].goods_list; let goods_list = res.data.list[0].goods_list;
goods_list.forEach((x) => { goods_list.forEach((x) => {
x.checked = false x.checked = false;
}); });
this.list =goods_list; this.list = goods_list;
console.log(this.list) console.log(this.list);
}else{ } else {
this.list=[] this.list = [];
} }
} }
); );
}, },
clickcheckbox(checked,price,index){ clickcheckbox(checked, price, index) {
if (checked == true) {
if(checked==true){ this.checkCount += 1;
this.TotalPrice += price*this.list[index].num; this.TotalPrice += price * this.list[index].num;
let all = true; let all = true;
this.list.forEach((x)=>{ this.list.forEach((x) => {
if(x.checked==false){ if (x.checked == false) {
all=false all = false;
} }
}) });
if(all==true){ if (all == true) {
this.allchecked = true this.allchecked = true;
} }
if(this.editType==true){ if (this.editType == true) {
let obj = { let obj = {
'mch_id':0, mch_id: 0,
'id':this.list[index].id id: this.list[index].id,
} };
this.cart_id_list.push(obj) this.cart_id_list.push(obj);
} }
}else{ } else {
this.TotalPrice -= price*this.list[index].num this.TotalPrice -= price * this.list[index].num;
this.checkCount -= 1;
this.allchecked = false; this.allchecked = false;
if(this.editType==true){ if (this.editType == true) {
this.cart_id_list.forEach((x)=>{ this.cart_id_list.forEach((x) => {
if(x.id==this.list[index].id){ if (x.id == this.list[index].id) {
this.cart_id_list.splice(x,1) this.cart_id_list.splice(x, 1);
} }
}) });
} }
} }
}, },
SelectAll(){ SelectAll() {
if (this.allchecked == true) {
if(this.allchecked==true){ this.checkCount = this.list.length;
this.TotalPrice= 0; this.TotalPrice = 0;
this.cart_id_list=[]; this.cart_id_list = [];
this.list.forEach((x)=>{ this.list.forEach((x) => {
x.checked=true; x.checked = true;
this.TotalPrice += x.goods.price*x.num; this.TotalPrice += x.goods.price * x.num;
if(this.editType==true){ if (this.editType == true) {
this.cart_id_list.push({ this.cart_id_list.push({
'mch_id':0, mch_id: 0,
'id':x.id id: x.id,
}) });
} }
}) });
} else {
this.checkCount = 0;
}else { this.list.forEach((x) => {
this.list.forEach((x)=>{ x.checked = false;
x.checked=false; this.TotalPrice = 0;
this.TotalPrice =0; if (this.editType == true) {
if(this.editType==true){ this.cart_id_list = [];
this.cart_id_list=[]
} }
}) });
} }
}, },
reduce(index,price){//减 reduce(index, price) {
if(this.list[index].num>1){ //减
this.list[index].num = this.list[index].num -1; if (this.list[index].num > 1) {
if(this.list[index].checked==true){ this.list[index].num = this.list[index].num - 1;
this.TotalPrice -= price*1 if (this.list[index].checked == true) {
this.TotalPrice -= price * 1;
} }
} }
}, },
plus(index,price){//加 plus(index, price) {
this.list[index].num = this.list[index].num +1; //加
if(this.list[index].checked==true){ this.list[index].num = this.list[index].num + 1;
this.TotalPrice += price*1 if (this.list[index].checked == true) {
this.TotalPrice += price * 1;
} }
}, },
edit(){ edit() {
this.editType=!this.editType; this.editType = !this.editType;
this.allchecked =false; this.allchecked = false;
this.TotalPrice= 0 this.TotalPrice = 0;
this.list.forEach((x)=>{ this.list.forEach((x) => {
x.checked=false x.checked = false;
}) });
}, },
Delete(){ Delete() {
if (this.cart_id_list.length > 0) {
uni.showNavigationBarLoading(); uni.showNavigationBarLoading();
let h = this.apiheader(); let h = this.apiheader();
h['content-type']='application/x-www-form-urlencoded' h["content-type"] = "application/x-www-form-urlencoded";
this.request( this.request(
{ {
url: "", url: "",
method:"POST", method: "POST",
header:h, header: h,
data: { data: {
r: "api/cart/delete", r: "api/cart/delete",
cart_id_list:JSON.stringify(this.cart_id_list) , cart_id_list: JSON.stringify(this.cart_id_list),
}, },
}, },
(res) => { (res) => {
this.init() this.init();
this.TotalPrice= 0 this.TotalPrice = 0;
this.editType=false; this.editType = false;
this.allchecked =false; this.allchecked = false;
uni.hideNavigationBarLoading() uni.hideNavigationBarLoading();
} }
); );
}, } else {
settlement(){ uni.showToast({
title: "请选择需要删除的商品",
position: "bottom",
icon: "none",
duration: 2000,
});
} }
},
settlement() {
if (this.checkCount > 0) {
let goods = [];
this.list.forEach((x) => {
if (x.checked) {
let g = {
id: x.goods_id,
num: x.num,
cart_id: x.id,
goods_attr_id: x.attr_id,
attr: [],
};
x.attrs.attr.forEach((x) => {
g.attr.push({
attr_id: x.attr_id,
attr_group_id: x.attr_group_id,
});
});
goods.push(g);
} }
});
uni.navigateTo({
url:
"/pages/order-submit/order-submit?goods=" +
encodeURIComponent(JSON.stringify(goods))
});
} else {
uni.showToast({
title: "请选择购买商品",
position: "bottom",
icon: "none",
duration: 2000,
});
} }
},
},
};
</script> </script>
<style> <style>
.cartStyle{ .cartStyle {
height: 100%; height: 100%;
position: relative; position: relative;
} font-family: "oswald";
.cartStyle .grid-text { }
.cartStyle .u-checkbox__label {
margin-left: 12px;
}
.cartStyle .grid-text {
font-size: 24rpx; font-size: 24rpx;
margin-top: 4rpx; margin-top: 4rpx;
color: #939393; color: #939393;
} }
.cartStyle .grid-text_r{ .cartStyle .grid-text_r {
margin-top: 4rpx; margin-top: 4rpx;
margin-right: 10rpx; margin-right: 10rpx;
} }
.cartStyle .cartList{ .cartStyle .cartList {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow-y: hidden; overflow-y: hidden;
} }
.cartStyle .cartList .cartList_item{ .cartStyle .cartList .cartList_item {
width: 100%; width: 100%;
padding:40rpx 30rpx; padding: 40rpx 30rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
border-bottom: 1rpx solid #E4E4E4; border-bottom: 1rpx solid #f5f5f5;
} }
.cartList .cartList_item .item_input{ .cartList .cartList_item .item_input {
width: 200rpx; width: 200rpx;
height: 60rpx; height: 60rpx;
background: #F7F7F7; background: #f7f7f7;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.cartList .item_input .item_input_l,.item_input_r{ .cartList .item_input .item_input_l,
.item_input_r {
width: 50rpx; width: 50rpx;
height: 60rpx; height: 60rpx;
font-size: 28rpx; font-size: 28rpx;
...@@ -352,35 +486,33 @@ ...@@ -352,35 +486,33 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.cartStyle .item_input .item_input_c{ .cartStyle .item_input .item_input_c {
text-align: center; text-align: center;
width: 50rpx; width: 50rpx;
height: 60rpx; height: 60rpx;
} }
.cartStyle .box_bottom{ .cartStyle .box_bottom {
width: 100%; width: 100%;
height: 50px; height: 50px;
position: fixed; position: fixed;
background: #FFF; background: #fff;
left: 0; left: 0;
bottom: 0; bottom: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border-top: 1rpx solid #E4E4E4; border-top: 1rpx solid #f5f5f5;
z-index: 999; z-index: 999;
} }
.cartStyle .bottom_btn{ .cartStyle .bottom_btn {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 250rpx; width: 250rpx;
height: 50px; height: 50px;
} }
.cartStyle .Deletestyle{ .cartStyle .Deletestyle {
margin-right: 40rpx; margin-right: 40rpx;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment