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 @@
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
"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"
},
......@@ -29,12 +33,6 @@
{
"path": "pages/address/address_chosen"
},
{
"path": "pages/cart/cart"
},
{
"path": "pages/cats/cats"
},
{
"path": "pages/address/AddAddress"
},
......
pages/cart/cart.vue
View file @ 2c4edcd2
<template>
<div class='cartStyle' v-if="!isloading">
<view style="display: flex;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 style="width: 100%;height: 30rpx;background: #F7F7F7;margin: 20rpx 0;"></view>
<u-empty v-if="list.length==0" text="购物车还是空的哦" mode="car"></u-empty>
<view style="padding: 25rpx;border-bottom: 1rpx solid #E4E4E4;" v-if="list.length>0">
<u-checkbox-group @change='SelectAll'>
<u-checkbox v-model="allchecked" shape="circle" active-color="red">赞羊严选</u-checkbox>
</u-checkbox-group>
</view>
<view class="cartList"
: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)'>
<u-checkbox v-model="item.checked" shape="circle" active-color="red"></u-checkbox>
</u-checkbox-group>
<image
:src="item.attrs.pic_url ? item.attrs.pic_url:item.goods.cover_pic"
mode="aspectFit"
style="width: 150rpx; height: 150rpx;margin-left: 30rpx;"
/>
<view style="display: flex;flex-direction: column;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="index2" >
<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='color: #E35943;font-size:30rpx ;'>￥<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='color: #ff4544;font-size:30rpx ;' v-if='editType==false'>￥{{TotalPrice}}</Text>
</div>
<div class='bottom_btn'
:style="{'background':TotalPrice>0 ? '#ff4544':'#989898'}"
v-if='editType==false'
@click='settlement'
>
<Text style='font-size: 28rpx;color: white;' >去结算</Text>
</div>
<u-button v-if='editType==true&& cart_id_list.length ==0' shape="circle" size="medium" class='Deletestyle'>删除</u-button>
<u-button v-if='editType==true&& cart_id_list.length >0' shape="circle" size="medium" class='Deletestyle' @click='Delete' type="error">删除</u-button>
</view>
<tabbars></tabbars>
</div>
<div class="cartStyle" v-if="!isloading">
<view
style="
display: flex;
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
style="width: 100%; height: 30rpx; background: #f7f7f7; margin: 20rpx 0;"
></view>
<u-empty
v-if="list.length == 0"
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>
</view>
<view
class="cartList"
: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)"
>
<u-checkbox
v-model="item.checked"
shape="circle"
:active-color="mc"
></u-checkbox>
</u-checkbox-group>
<image
:src="item.attrs.pic_url ? item.attrs.pic_url : item.goods.cover_pic"
mode="aspectFill"
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;
"
>
<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>
<script>
import tabbars from "@/components/tabbar/index";
export default {
data(){
return{
isloading: true,
pageTitle: "购物车",
navHeight: 0,
contentHeight:0,
cstyle:{},
allchecked:false,
TotalPrice:0,//总价格
bottommargin:0,
listbottom:0,
editType:false,
list:[],
cart_id_list:[],
}
},
created(){
},
components:{
tabbars,
},
onLoad() {
this.navHeight = this.$navHeight - 2;
this.cstyle = uni.getStorageSync("basedata")
? uni.getStorageSync("basedata").cat_style
: [];
if (this.cstyle.cat_style == "4") {
// this.searchStyle.p = {
// position: "fixed",
// top: this.navHeight,
// width: "100%",
// left: "0",
// };
}
},
mounted() {
let currentPages = getCurrentPages();
let c = this.$uiConfig.is_bang ? 80 : 52;
this.bottommargin = (c-2)+'px';
this.listbottom = (c-2+50)+'px';
this.contentHeight = this.$utils.calcContentHeight(c);
let u = "/" + currentPages[currentPages.length - 1].route;
let pages = wx.getStorageSync("basedata")
? wx.getStorageSync("basedata").bar_title
: [];
pages.forEach((x) => {
if (x.value == u) {
this.pageTitle = x.new_name ? x.new_name : x.name;
}
});
this.init();
},
methods:{
goHome() {
uni.redirectTo({ url: "/pages/index/main" });
},
init() {
uni.showNavigationBarLoading();
let h = this.apiheader();
this.request(
{
url: "",
header:h,
data: {
r: "api/cart/list",
},
},
(res) => {
uni.hideNavigationBarLoading()
this.isloading = false;
if(res.data.list.length>0){
let goods_list = res.data.list[0].goods_list;
goods_list.forEach((x) => {
x.checked = false
});
this.list =goods_list;
console.log(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
})
}
})
import tabbars from "@/components/tabbar/index";
export default {
data() {
return {
isloading: true,
pageTitle: "购物车",
navHeight: 0,
contentHeight: 0,
cstyle: {},
allchecked: false,
TotalPrice: 0, //总价格
bottommargin: 0,
listbottom: 0,
editType: false,
list: [],
cart_id_list: [],
mc: "",
secondary: "",
checkCount: 0,
};
},
created() {},
components: {
tabbars,
},
onLoad() {
this.navHeight = this.$navHeight - 2;
this.mc = this.$uiConfig.mainColor;
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",
// top: this.navHeight,
// width: "100%",
// left: "0",
// };
}
},
mounted() {
let currentPages = getCurrentPages();
let c = this.$uiConfig.is_bang ? 80 : 52;
this.bottommargin = c - 2 + "px";
this.listbottom = c - 2 + 50 + "px";
this.contentHeight = this.$utils.calcContentHeight(c);
let u = "/" + currentPages[currentPages.length - 1].route;
let pages = wx.getStorageSync("basedata")
? wx.getStorageSync("basedata").bar_title
: [];
pages.forEach((x) => {
if (x.value == u) {
this.pageTitle = x.new_name ? x.new_name : x.name;
}
});
this.init();
},
methods: {
goHome() {
uni.redirectTo({ url: "/pages/index/main" });
},
init() {
uni.showNavigationBarLoading();
let h = this.apiheader();
this.request(
{
url: "",
header: h,
data: {
r: "api/cart/list",
},
},
(res) => {
uni.hideNavigationBarLoading();
this.isloading = false;
if (res.data.list.length > 0) {
let goods_list = res.data.list[0].goods_list;
goods_list.forEach((x) => {
x.checked = false;
});
this.list = goods_list;
console.log(this.list);
} else {
this.list = [];
}
}
);
},
}else {
this.list.forEach((x)=>{
x.checked=false;
this.TotalPrice =0;
if(this.editType==true){
this.cart_id_list=[]
}
})
}
},
reduce(index,price){//减
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
}
}
},
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(){
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()
}
);
},
settlement(){
}
}
}
clickcheckbox(checked, price, index) {
if (checked == true) {
this.checkCount += 1;
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.checkCount -= 1;
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.checkCount = this.list.length;
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 {
this.checkCount = 0;
this.list.forEach((x) => {
x.checked = false;
this.TotalPrice = 0;
if (this.editType == true) {
this.cart_id_list = [];
}
});
}
},
reduce(index, price) {
//减
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;
}
}
},
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>
<style>
.cartStyle{
height: 100%;
position: relative;
}
.cartStyle .grid-text {
.cartStyle {
height: 100%;
position: relative;
font-family: "oswald";
}
.cartStyle .u-checkbox__label {
margin-left: 12px;
}
.cartStyle .grid-text {
font-size: 24rpx;
margin-top: 4rpx;
color: #939393;
}
.cartStyle .grid-text_r{
margin-top: 4rpx;
margin-right: 10rpx;
.cartStyle .grid-text_r {
margin-top: 4rpx;
margin-right: 10rpx;
}
.cartStyle .cartList{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
overflow-y: hidden;
.cartStyle .cartList {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
overflow-y: hidden;
}
.cartStyle .cartList .cartList_item{
width: 100%;
padding:40rpx 30rpx;
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1rpx solid #E4E4E4;
.cartStyle .cartList .cartList_item {
width: 100%;
padding: 40rpx 30rpx;
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1rpx solid #f5f5f5;
}
.cartList .cartList_item .item_input{
width: 200rpx;
height: 60rpx;
background: #F7F7F7;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.cartList .cartList_item .item_input {
width: 200rpx;
height: 60rpx;
background: #f7f7f7;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.cartList .item_input .item_input_l,.item_input_r{
width: 50rpx;
height: 60rpx;
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: center;
.cartList .item_input .item_input_l,
.item_input_r {
width: 50rpx;
height: 60rpx;
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: center;
}
.cartStyle .item_input .item_input_c{
text-align: center;
width: 50rpx;
height: 60rpx;
.cartStyle .item_input .item_input_c {
text-align: center;
width: 50rpx;
height: 60rpx;
}
.cartStyle .box_bottom{
width: 100%;
height: 50px;
position: fixed;
background: #FFF;
left: 0;
bottom: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-top: 1rpx solid #E4E4E4;
z-index: 999;
.cartStyle .box_bottom {
width: 100%;
height: 50px;
position: fixed;
background: #fff;
left: 0;
bottom: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-top: 1rpx solid #f5f5f5;
z-index: 999;
}
.cartStyle .bottom_btn{
display: flex;
align-items: center;
justify-content: center;
width: 250rpx;
height: 50px;
.cartStyle .bottom_btn {
display: flex;
align-items: center;
justify-content: center;
width: 250rpx;
height: 50px;
}
.cartStyle .Deletestyle{
margin-right: 40rpx;
.cartStyle .Deletestyle {
margin-right: 40rpx;
}
</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