Skip to content

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

修改购物车部分样式

parent d46d0a6e
Hide 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;
</view> align-items: center;
<view style="width: 100%;height: 30rpx;background: #F7F7F7;margin: 20rpx 0;"></view> justify-content: space-between;
<u-empty v-if="list.length==0" text="购物车还是空的哦" mode="car"></u-empty> padding: 0 15rpx;
"
<view style="padding: 25rpx;border-bottom: 1rpx solid #E4E4E4;" v-if="list.length>0"> >
<u-checkbox-group @change='SelectAll'> <Text class="grid-text">商品库存有限，请尽快下单哦</Text>
<u-checkbox v-model="allchecked" shape="circle" active-color="red">赞羊严选</u-checkbox> <Text @click="edit" v-if="editType == false" class="grid-text_r"
</u-checkbox-group> >编辑</Text
</view> >
<view class="cartList" <Text @click="edit" v-if="editType == true" class="grid-text_r"
:style="{'margin-bottom':listbottom}" >完成</Text
v-if="list.length>0" >
> </view>
<view class="cartList_item" <view
v-for="(item, index) in list" :key="index" style="width: 100%; height: 30rpx; background: #f7f7f7; margin: 20rpx 0;"
:name="item.name"> ></view>
<u-checkbox-group @change='clickcheckbox(item.checked,item.goods.price,index)'> <u-empty
<u-checkbox v-model="item.checked" shape="circle" active-color="red"></u-checkbox> v-if="list.length == 0"
</u-checkbox-group> text="购物车还是空的哦"
<image mode="car"
:src="item.attrs.pic_url ? item.attrs.pic_url:item.goods.cover_pic" ></u-empty>
mode="aspectFit"
style="width: 150rpx; height: 150rpx;margin-left: 30rpx;" <view
/> style="padding: 0 12px 12px 12px; border-bottom: 1rpx solid #f5f5f5;"
<view style="display: flex;flex-direction: column;justify-content: space-between;width: 460rpx;height: 150rpx;margin-left: 20rpx;"> v-if="list.length > 0"
<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;'> <u-checkbox-group @change="SelectAll">
<view v-for="(attr, inde2x) in item.attrs.attr" :key="index2" > <u-checkbox v-model="allchecked" shape="circle" :active-color="mc"
<Text style='color: #A0A09D;font-size: 24rpx;margin-right: 5rpx;'>{{attr.attr_group_name}}:{{attr.attr_name}}</Text> >赞羊严选</u-checkbox
</view> >
</view> </u-checkbox-group>
<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> <view
<view class="item_input"> class="cartList"
<view class="item_input_l" :style="{ 'margin-bottom': listbottom }"
:style="{ v-if="list.length > 0"
color: item.num == 1 ? '#E2E2E2' : '#9B9B9B', >
}" <view
@click="reduce(index,item.goods.price)">-</view> class="cartList_item"
<input type="number" class="item_input_c" :value="item.num" > v-for="(item, index) in list"
<view class="item_input_r" style="color: #9B9B9B;" @click="plus(index,item.goods.price)">+</view> :key="index"
</view> :name="item.name"
</view> >
</view> <u-checkbox-group
@change="clickcheckbox(item.checked, item.goods.price, index)"
</view> >
</view> <u-checkbox
v-model="item.checked"
<view class="box_bottom" shape="circle"
:style="{'margin-bottom':bottommargin}" :active-color="mc"
></u-checkbox>
> </u-checkbox-group>
<div style='margin-left: 30rpx;'> <image
<u-checkbox-group @change='SelectAll'> :src="item.attrs.pic_url ? item.attrs.pic_url : item.goods.cover_pic"
<u-checkbox v-model="allchecked" shape="circle" active-color="red">全选</u-checkbox> mode="aspectFill"
</u-checkbox-group> style="
<Text style='color: #ff4544;font-size:30rpx ;' v-if='editType==false'>￥{{TotalPrice}}</Text> width: 150rpx;
</div> height: 150rpx;
<div class='bottom_btn' margin-left: 30rpx;
:style="{'background':TotalPrice>0 ? '#ff4544':'#989898'}" border-radius: 5px;
v-if='editType==false' "
@click='settlement' />
> <view
<Text style='font-size: 28rpx;color: white;' >去结算</Text> style="
</div> display: flex;
<u-button v-if='editType==true&& cart_id_list.length ==0' shape="circle" size="medium" class='Deletestyle'>删除</u-button> flex-direction: column;
<u-button v-if='editType==true&& cart_id_list.length >0' shape="circle" size="medium" class='Deletestyle' @click='Delete' type="error">删除</u-button> justify-content: space-between;
width: 460rpx;
height: 150rpx;
</view> margin-left: 20rpx;
"
<tabbars></tabbars> >
</div> <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
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_l"
:style="{
color: item.num == 1 ? '#E2E2E2' : '#9B9B9B',
}"
@click="reduce(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 class="box_bottom" :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
>
</u-checkbox-group>
<Text
style="font-size: 30rpx;"
:style="{ color: mc }"
v-if="editType == false"
>￥{{ TotalPrice }}</Text
>
</div>
<div class="bottom_btn" v-if="!editType">
<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>
<tabbars></tabbars>
</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.cstyle = uni.getStorageSync("basedata") this.mc = this.$uiConfig.mainColor;
? uni.getStorageSync("basedata").cat_style this.secondary = this.$uiConfig.secondary;
: []; this.cstyle = uni.getStorageSync("basedata")
? uni.getStorageSync("basedata").cat_style
if (this.cstyle.cat_style == "4") { : [];
// this.searchStyle.p = {
// position: "fixed", if (this.cstyle.cat_style == "4") {
// top: this.navHeight, // this.searchStyle.p = {
// width: "100%", // position: "fixed",
// left: "0", // top: this.navHeight,
// }; // width: "100%",
} // left: "0",
}, // };
mounted() { }
let currentPages = getCurrentPages(); },
let c = this.$uiConfig.is_bang ? 80 : 52; mounted() {
this.bottommargin = (c-2)+'px'; let currentPages = getCurrentPages();
this.listbottom = (c-2+50)+'px'; let c = this.$uiConfig.is_bang ? 80 : 52;
this.contentHeight = this.$utils.calcContentHeight(c); this.bottommargin = c - 2 + "px";
let u = "/" + currentPages[currentPages.length - 1].route; this.listbottom = c - 2 + 50 + "px";
let pages = wx.getStorageSync("basedata") this.contentHeight = this.$utils.calcContentHeight(c);
? wx.getStorageSync("basedata").bar_title let u = "/" + currentPages[currentPages.length - 1].route;
: []; let pages = wx.getStorageSync("basedata")
pages.forEach((x) => { ? wx.getStorageSync("basedata").bar_title
if (x.value == u) { : [];
this.pageTitle = x.new_name ? x.new_name : x.name; pages.forEach((x) => {
} if (x.value == u) {
}); this.pageTitle = x.new_name ? x.new_name : x.name;
this.init(); }
}, });
methods:{ this.init();
goHome() { },
uni.redirectTo({ url: "/pages/index/main" }); methods: {
}, goHome() {
init() { uni.redirectTo({ url: "/pages/index/main" });
uni.showNavigationBarLoading(); },
let h = this.apiheader(); init() {
uni.showNavigationBarLoading();
this.request( let h = this.apiheader();
{
url: "", this.request(
header:h, {
data: { url: "",
r: "api/cart/list", header: h,
}, data: {
r: "api/cart/list",
}, },
},
(res) => {
uni.hideNavigationBarLoading() (res) => {
this.isloading = false; uni.hideNavigationBarLoading();
if(res.data.list.length>0){ this.isloading = false;
let goods_list = res.data.list[0].goods_list; if (res.data.list.length > 0) {
goods_list.forEach((x) => { let goods_list = res.data.list[0].goods_list;
x.checked = false goods_list.forEach((x) => {
}); x.checked = false;
this.list =goods_list; });
console.log(this.list) this.list = goods_list;
}else{ console.log(this.list);
this.list=[] } else {
} this.list = [];
}
}
);
} },
);
},
clickcheckbox(checked,price,index){
if(checked==true){
this.TotalPrice += price*this.list[index].num;
let all = true;
this.list.forEach((x)=>{
if(x.checked==false){
all=false
}
})
if(all==true){
this.allchecked = true
}
if(this.editType==true){
let obj = {
'mch_id':0,
'id':this.list[index].id
}
this.cart_id_list.push(obj)
}
}else{
this.TotalPrice -= price*this.list[index].num
this.allchecked = false;
if(this.editType==true){
this.cart_id_list.forEach((x)=>{
if(x.id==this.list[index].id){
this.cart_id_list.splice(x,1)
}
})
}
}
},
SelectAll(){
if(this.allchecked==true){
this.TotalPrice= 0;
this.cart_id_list=[];
this.list.forEach((x)=>{
x.checked=true;
this.TotalPrice += x.goods.price*x.num;
if(this.editType==true){
this.cart_id_list.push({
'mch_id':0,
'id':x.id
})
}
})
}else { clickcheckbox(checked, price, index) {
this.list.forEach((x)=>{ if (checked == true) {
x.checked=false; this.checkCount += 1;
this.TotalPrice =0; this.TotalPrice += price * this.list[index].num;
if(this.editType==true){ let all = true;
this.cart_id_list=[] this.list.forEach((x) => {
} if (x.checked == false) {
}) all = false;
} }
});
if (all == true) {
}, this.allchecked = true;
}
reduce(index,price){//减 if (this.editType == true) {
if(this.list[index].num>1){ let obj = {
this.list[index].num = this.list[index].num -1; mch_id: 0,
if(this.list[index].checked==true){ id: this.list[index].id,
this.TotalPrice -= price*1 };
} this.cart_id_list.push(obj);
}
} } else {
}, this.TotalPrice -= price * this.list[index].num;
plus(index,price){//加 this.checkCount -= 1;
this.list[index].num = this.list[index].num +1; this.allchecked = false;
if(this.list[index].checked==true){ if (this.editType == true) {
this.TotalPrice += price*1 this.cart_id_list.forEach((x) => {
} if (x.id == this.list[index].id) {
this.cart_id_list.splice(x, 1);
}, }
edit(){ });
this.editType=!this.editType; }
this.allchecked =false; }
this.TotalPrice= 0 },
this.list.forEach((x)=>{ SelectAll() {
x.checked=false if (this.allchecked == true) {
}) this.checkCount = this.list.length;
this.TotalPrice = 0;
}, this.cart_id_list = [];
Delete(){ this.list.forEach((x) => {
x.checked = true;
this.TotalPrice += x.goods.price * x.num;
uni.showNavigationBarLoading(); if (this.editType == true) {
let h = this.apiheader(); this.cart_id_list.push({
h['content-type']='application/x-www-form-urlencoded' mch_id: 0,
id: x.id,
this.request( });
{ }
url: "", });
method:"POST", } else {
header:h, this.checkCount = 0;
data: { this.list.forEach((x) => {
r: "api/cart/delete", x.checked = false;
cart_id_list:JSON.stringify(this.cart_id_list) , this.TotalPrice = 0;
}, if (this.editType == true) {
this.cart_id_list = [];
}, }
});
(res) => { }
this.init() },
this.TotalPrice= 0
this.editType=false; reduce(index, price) {
this.allchecked =false; //减
uni.hideNavigationBarLoading() if (this.list[index].num > 1) {
} this.list[index].num = this.list[index].num - 1;
); if (this.list[index].checked == true) {
}, this.TotalPrice -= price * 1;
settlement(){ }
}
} },
plus(index, price) {
//加
this.list[index].num = this.list[index].num + 1;
if (this.list[index].checked == true) {
} this.TotalPrice += price * 1;
} }
},
edit() {
this.editType = !this.editType;
this.allchecked = false;
this.TotalPrice = 0;
this.list.forEach((x) => {
x.checked = false;
});
},
Delete() {
if (this.cart_id_list.length > 0) {
uni.showNavigationBarLoading();
let h = this.apiheader();
h["content-type"] = "application/x-www-form-urlencoded";
this.request(
{
url: "",
method: "POST",
header: h,
data: {
r: "api/cart/delete",
cart_id_list: JSON.stringify(this.cart_id_list),
},
},
(res) => {
this.init();
this.TotalPrice = 0;
this.editType = false;
this.allchecked = false;
uni.hideNavigationBarLoading();
}
);
} else {
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,
width: 50rpx; .item_input_r {
height: 60rpx; width: 50rpx;
font-size: 28rpx; height: 60rpx;
display: flex; font-size: 28rpx;
align-items: center; display: flex;
justify-content: center; align-items: 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