mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 02:06:38 +08:00
822 lines
19 KiB
Vue
822 lines
19 KiB
Vue
<template>
|
|
<div>
|
|
<Myheader></Myheader>
|
|
<div class="rc-top"></div>
|
|
<tabs :crumbs="crumbs"></tabs>
|
|
|
|
<div class="rc-main rc-max-width--xl">
|
|
<div class="cart-list">
|
|
<div class="header">
|
|
<div class="list-left">
|
|
<label class="check-label">
|
|
<input type="checkbox" v-model="checkAll" />
|
|
</label>
|
|
<span class="name">商品</span>
|
|
</div>
|
|
<ul>
|
|
<li>单价</li>
|
|
<li>数量</li>
|
|
<li>操作</li>
|
|
</ul>
|
|
</div>
|
|
<div class="header_ph">
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<div class="list-left">
|
|
<label class="check-label">
|
|
<input type="checkbox" v-model="checkAll" />
|
|
</label>
|
|
<span class="name">全选</span>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12" class="tr">
|
|
<span @click="editList()"
|
|
><i class="el-icon-edit"></i>{{ editState }}</span
|
|
></el-col
|
|
>
|
|
</el-row>
|
|
</div>
|
|
<div class="list" v-for="(item, index) in cartData" :key="index">
|
|
<div class="list-left">
|
|
<label class="check-label">
|
|
<input type="checkbox" v-model="item.checked" />
|
|
</label>
|
|
<div class="product">
|
|
<div class="product-img">
|
|
<img :src="item.productImg" alt="" />
|
|
</div>
|
|
<div class="right">
|
|
<p class="product-title" v-text="item.productName"></p>
|
|
<p class="specifications">规格：{{ item.specifications }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ul>
|
|
<li class="product-price">￥{{ item.productPrice }}</li>
|
|
<li>
|
|
<div class="rc-jia">
|
|
<img
|
|
src="../../assets/image/userjian.png"
|
|
alt=""
|
|
@click="sub(item.buyCount, index)"
|
|
/>
|
|
<input type="text" v-model="item.buyCount" />
|
|
<img
|
|
src="../../assets/image/userjia.png"
|
|
alt=""
|
|
@click="plus(item.buyCount, index)"
|
|
/>
|
|
</div>
|
|
</li>
|
|
<li class="del"><em @click="userdele(item)">删除</em></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rc-footera">
|
|
<div class="rc-foote">
|
|
<div class="rc-shop">
|
|
<label>
|
|
<input type="checkbox" v-model="checkAll" />
|
|
全选
|
|
</label>
|
|
</div>
|
|
<div class="rc-delete">
|
|
<div class="rc-num">
|
|
<div class="rc-usernum">
|
|
<div class="rc-usea">
|
|
<i>总计:</i>
|
|
<span>{{ sumPrice }}</span>
|
|
</div>
|
|
<em>共选择{{ sumlength }}件商品</em>
|
|
</div>
|
|
|
|
<strong @click="usejiesuan()">{{ mustpay }}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="rc-shop">
|
|
<i>总计:</i>
|
|
<span>{{ ordersum }}</span>
|
|
</div>
|
|
<div class="rc-delete">
|
|
<span>
|
|
{{ userdelete }}
|
|
</span>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<MyFooter></MyFooter>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Myheader from "~/components/header.vue";
|
|
import MyFooter from '~/components/rc-footer.vue'
|
|
import tabs from "@/components/tabs.vue";
|
|
import { mapMutations } from "vuex";
|
|
import { isexistCart, generateOrderWX, deleteCart } from "../../ajax/getData";
|
|
export default {
|
|
middleware: "metaTitle",
|
|
meta: { title: "购物车" },
|
|
data() {
|
|
return {
|
|
crumbs:[
|
|
{
|
|
path:'/productdetails/productlist/',
|
|
},
|
|
{
|
|
path:'/myorder/userrecord/'
|
|
}
|
|
],
|
|
ordersum: 1,
|
|
usercheckbox: false,
|
|
shopnum: 0,
|
|
checkAllFlag: false, //是否全选
|
|
checkone: false,
|
|
ys1: true,
|
|
ys2: true,
|
|
userdelete: "结算",
|
|
orderprice: "￥199.00",
|
|
mustpay: "立即结算",
|
|
editState: "编辑",
|
|
dellist: [],
|
|
totalMoney: "",
|
|
allChecked: false,
|
|
userid: null,
|
|
cartData: [
|
|
// {
|
|
// buyCount: 3,
|
|
// id: 1,
|
|
// memberId: "1",
|
|
// productCode: "432434",
|
|
// productImg: require("../../assets/image/rc-select.png"),
|
|
// productName: "测试商品",
|
|
// productPrice: 399.0,
|
|
// specifications: "5KG",
|
|
// checked: false,
|
|
// },
|
|
// {
|
|
// buyCount: 1,
|
|
// id: 2,
|
|
// memberId: "2",
|
|
// productCode: "432434",
|
|
// productImg: require("../../assets/image/rc-select.png"),
|
|
// productName: "测试商品222",
|
|
// productPrice: "199.00",
|
|
// specifications: "5KG",
|
|
// checked: true,
|
|
// },
|
|
// {
|
|
// buyCount: 4,
|
|
// id: 3,
|
|
// memberId: "3",
|
|
// productCode: "432434",
|
|
// productImg: require("../../assets/image/rc-select.png"),
|
|
// productName: "测试商品3333",
|
|
// productPrice: 69.01,
|
|
// specifications: "5KG",
|
|
// checked: true,
|
|
// },
|
|
],
|
|
};
|
|
},
|
|
mounted() {
|
|
this.carmessage();
|
|
this.checkIsLogin();
|
|
},
|
|
|
|
components: {
|
|
Myheader,
|
|
tabs,
|
|
MyFooter
|
|
},
|
|
methods: {
|
|
//请求猫
|
|
...mapMutations(["checkIsLogin"]),
|
|
async carmessage() {
|
|
let user = this.$store.state.userInfo;
|
|
this.userid = user.data.id;
|
|
let data = await isexistCart(user.data.id);
|
|
this.cartData = data;
|
|
// this.goldmedal = data;
|
|
},
|
|
async userjie(list) {
|
|
let user = this.$store.state.userInfo;
|
|
this.userid = user.data.id;
|
|
let data = await generateOrderWX(list);
|
|
if (data) {
|
|
this.$message({
|
|
type: "warning",
|
|
message: data.msg,
|
|
});
|
|
this.$router.push({
|
|
path: "/personal/settlement",
|
|
query: {
|
|
wxdata: data.data,
|
|
},
|
|
});
|
|
}
|
|
},
|
|
|
|
//删除购物车
|
|
async deletsmessage(productCode) {
|
|
let user = this.$store.state.userInfo;
|
|
this.userid = user.data.id;
|
|
let data = await deleteCart( productCode);
|
|
if (data) {
|
|
this.$message({
|
|
type: "warning",
|
|
message: data.msg,
|
|
});
|
|
this.carmessage();
|
|
}
|
|
},
|
|
|
|
editList() {
|
|
if (this.editState == "完成") {
|
|
this.mustpay = "立即结算";
|
|
this.editState = " 编辑";
|
|
} else {
|
|
this.mustpay = "删除";
|
|
this.editState = "完成";
|
|
}
|
|
},
|
|
// checkBox(){
|
|
|
|
// console.log(event.target.checked)
|
|
// this.usercheckbox=event.target.checked;
|
|
// this.goldmedal.forEach(item => {
|
|
// item.checked = this.usercheckbox
|
|
// });
|
|
// },
|
|
|
|
userdele(item) {
|
|
let delform = [];
|
|
if (item.length > 0) {
|
|
delform = item;
|
|
} else {
|
|
delform = [item.productCode];
|
|
}
|
|
this.$confirm("确定删除", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "success",
|
|
callback: (action) => {
|
|
if (action === "confirm") {
|
|
this.deletsmessage(delform);
|
|
}
|
|
},
|
|
});
|
|
// this.$message({
|
|
// type: "warning",
|
|
// message: data.msg,
|
|
// });
|
|
},
|
|
plus(num, index) {
|
|
this.cartData[index].buyCount =
|
|
parseInt(this.cartData[index].buyCount) + 1;
|
|
},
|
|
// 数量减方法
|
|
sub(num, index) {
|
|
if (parseInt(num) <= 1) {
|
|
this.cartData[index].buyCount = 1;
|
|
} else {
|
|
this.cartData[index].buyCount =
|
|
parseInt(this.cartData[index].buyCount) - 1;
|
|
}
|
|
},
|
|
|
|
// 求总价
|
|
|
|
useredit(e) {
|
|
this.ys1 = !this.ys1;
|
|
if (this.ys1 == false) {
|
|
this.$nextTick(() => {
|
|
this.userdelete = "删除";
|
|
});
|
|
} else if (this.ys1 == true) {
|
|
this.$nextTick(() => {
|
|
this.userdelete = "结算";
|
|
|
|
console.log(this.userdelete);
|
|
});
|
|
}
|
|
|
|
if (this.userdelete == "删除") {
|
|
}
|
|
},
|
|
usejiesuan() {
|
|
// let procode = [];
|
|
// let list = [];
|
|
// let menulist = [];
|
|
// this.cartData.filter((item) => {
|
|
// if (item.checked) {
|
|
// list.push(item);
|
|
// console.log(item);
|
|
// procode.push(item.productCode);
|
|
// } else {
|
|
// list.splice(index, 1);
|
|
// }
|
|
// });
|
|
// let list = [];
|
|
// list = this.cartData.filter((item) => item.checked);
|
|
|
|
// list.forEach((item) => {
|
|
// menulist.push({
|
|
// productName: item.productName,
|
|
// buyCount: item.buyCount,
|
|
// productId: item.productCode,
|
|
// payAmount: item.productPrice,
|
|
// memberId: item.memberId,
|
|
// phoneNumber: item.mobile,
|
|
// });
|
|
// });
|
|
let list = [];
|
|
list = this.cartData.filter((item) => item.checked);
|
|
if (list.length == 0) {
|
|
this.$message({
|
|
type: "warning",
|
|
message: "你还未选择商品",
|
|
});
|
|
return;
|
|
} else {
|
|
if (this.editState == "完成") {
|
|
let delList = [];
|
|
list.forEach((item) => {
|
|
delList.push(item.productCode);
|
|
});
|
|
this.userdele(delList);
|
|
|
|
} else {
|
|
this.$router.push({
|
|
path: "/personal/settlement",
|
|
query: {
|
|
list: JSON.stringify(list),
|
|
},
|
|
// params: { test:'222'},
|
|
});
|
|
}
|
|
}
|
|
|
|
// list=[
|
|
// {
|
|
// "productName":"幼猫全价粮",
|
|
// "buyCount":"2",
|
|
// "productId":"210352",
|
|
// "payAmount":"517",
|
|
// "memberId":"844350",
|
|
// "phoneNumber":"18112621098"
|
|
// },
|
|
// {
|
|
// "productName":"幼猫全价粮",
|
|
// "buyCount":"2",
|
|
// "productId":"210352",
|
|
// "payAmount":"517",
|
|
// "memberId":"844350",
|
|
// "phoneNumber":"18112621098"
|
|
// }
|
|
// ]
|
|
|
|
// instance
|
|
// .post(`generateOrderWX`, list, configs)
|
|
// .then((res) => {
|
|
// console.log(res);
|
|
// });
|
|
},
|
|
|
|
// async userdelete(item) {
|
|
|
|
// let data = await isexistCart( this.userid,);
|
|
|
|
// },
|
|
},
|
|
computed: {
|
|
checkAll: {
|
|
// 设置值,当点击全选按钮的时候触发
|
|
set(v) {
|
|
this.cartData.forEach((item) => {
|
|
item.checked = v;
|
|
});
|
|
},
|
|
// 取值,当列表中的选择改变之后触发
|
|
get() {
|
|
return (
|
|
this.cartData.length ===
|
|
this.cartData.filter((item) => item.checked == true).length
|
|
);
|
|
},
|
|
},
|
|
// 总价计算
|
|
sumPrice() {
|
|
return this.cartData
|
|
.filter((item) => item.checked)
|
|
.reduce((pre, cur) => {
|
|
console.log(pre);
|
|
return pre + cur.buyCount * cur.productPrice;
|
|
}, 0);
|
|
},
|
|
|
|
sumlength() {
|
|
return this.cartData.filter((item) => item.checked == true).length;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.rc-footer {
|
|
display: none;
|
|
}
|
|
.rc-footera {
|
|
background: #f6f6f6;
|
|
border: 1px solid #d7d7d7;
|
|
margin-bottom:40px;
|
|
.rc-foote {
|
|
margin: 0 auto;
|
|
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
|
|
height: 102px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.rc-shop {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 24px;
|
|
img {
|
|
width: 24px;
|
|
height: 24px;
|
|
display: block;
|
|
}
|
|
|
|
span {
|
|
font-style: normal;
|
|
font-size: 18px;
|
|
color: #333333;
|
|
margin-left: 16px;
|
|
display: block;
|
|
}
|
|
}
|
|
.rc-delete {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 32px;
|
|
.rc-num {
|
|
display: flex;
|
|
align-items: center;
|
|
.rc-usernum {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-right: 25px;
|
|
.rc-usea {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
i {
|
|
font-size: 18px;
|
|
font-style: normal;
|
|
color: #333333;
|
|
margin-right: 8px;
|
|
display: block;
|
|
}
|
|
span {
|
|
font-size: 20px;
|
|
color: #e1001a;
|
|
}
|
|
em {
|
|
font-style: normal;
|
|
margin-top: 8px;
|
|
|
|
color: #333333;
|
|
|
|
font-size: 16px;
|
|
}
|
|
strong {
|
|
cursor: pointer;
|
|
width: 164px;
|
|
height: 48px;
|
|
background: #e2001a;
|
|
border-radius: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
margin-right: 40px;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
.rc-main {
|
|
.cart-list {
|
|
width: 100%;
|
|
border: 1px solid #d7d7d7;
|
|
font-size: 16px;
|
|
color: #666666;
|
|
p {
|
|
margin: 0;
|
|
}
|
|
.header {
|
|
background: #f6f6f6;
|
|
border-radius: 3px 3px 0px 0px;
|
|
border-bottom: 1px solid #d7d7d7;
|
|
height: 64px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.header_ph {
|
|
display: none;
|
|
}
|
|
.check-label {
|
|
display: block;
|
|
margin-left: 24px;
|
|
}
|
|
.name {
|
|
display: block;
|
|
margin-left: 56px;
|
|
}
|
|
.list-left {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 50%;
|
|
}
|
|
ul {
|
|
display: flex;
|
|
width: 50%;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
.list {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #d7d7d7;
|
|
padding: 15px 0;
|
|
.del{
|
|
em{ font-style: normal;}
|
|
}
|
|
.product-price {
|
|
color: #e1001a;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
width: 60px;
|
|
}
|
|
|
|
.del{
|
|
em{
|
|
color: #e1001a;
|
|
border-bottom: 1px solid #e1001a;
|
|
cursor:pointer ;
|
|
}
|
|
}
|
|
.product {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-left: 56px;
|
|
.product-title {
|
|
color: #e1001a;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
}
|
|
.product-img {
|
|
margin-right: 15px;
|
|
width: 96px;
|
|
height: 96px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.rc-jia {
|
|
display: flex;
|
|
align-items: center;
|
|
img,
|
|
input {
|
|
width: 30px;
|
|
height: 30px;
|
|
text-align: center;
|
|
margin: 0 5px;
|
|
}
|
|
input {
|
|
border: 1px solid #d7d7d7;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.rc-select {
|
|
border-bottom: 1px solid #d8d8d8;
|
|
height: 56px;
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
display: none;
|
|
justify-content: space-between;
|
|
.select-left {
|
|
display: flex;
|
|
align-items: center;
|
|
img {
|
|
width: 24px;
|
|
height: 24px;
|
|
display: block;
|
|
}
|
|
span {
|
|
font-size: 14px;
|
|
color: #333333;
|
|
display: block;
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
.select-right {
|
|
display: flex;
|
|
align-items: center;
|
|
img {
|
|
width: 16px;
|
|
height: 16px;
|
|
display: block;
|
|
margin-right: 8px;
|
|
}
|
|
span {
|
|
font-size: 14px;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rc-userdemand {
|
|
width: 100%;
|
|
height: 180px;
|
|
border-bottom: 1px solid #d8d8d8;
|
|
display: flex;
|
|
.rc-userdeman {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 24px;
|
|
height: 24px;
|
|
display: block;
|
|
margin-left: 24px;
|
|
}
|
|
.re-message {
|
|
width: 96px;
|
|
height: 96px;
|
|
display: block;
|
|
border: 1px solid #d8d8d8;
|
|
margin-left: 56px;
|
|
}
|
|
}
|
|
.rc-userdem {
|
|
display: flex;
|
|
width: 100%;
|
|
margin-left: 8px;
|
|
span {
|
|
font-size: 18px;
|
|
color: #e1001a;
|
|
display: block;
|
|
font-weight: bold;
|
|
}
|
|
em {
|
|
font-style: normal;
|
|
font-size: 16px;
|
|
display: block;
|
|
margin-top: 8px;
|
|
|
|
color: #666666;
|
|
}
|
|
.rc-userdema {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
width: 10%;
|
|
}
|
|
.rc-userd {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 87%;
|
|
justify-content: space-around;
|
|
.rc-jia {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
i {
|
|
font-size: 20px;
|
|
font-style: normal;
|
|
color: #e1001a;
|
|
}
|
|
img {
|
|
width: 23px;
|
|
height: 23px;
|
|
display: block;
|
|
margin-right: 5px;
|
|
}
|
|
img:last-child {
|
|
width: 23px;
|
|
height: 23px;
|
|
display: block;
|
|
margin-left: 10px;
|
|
}
|
|
em {
|
|
font-style: normal;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid #e2001a;
|
|
display: block;
|
|
margin-left: 40px;
|
|
color: #e1001a;
|
|
}
|
|
strong {
|
|
font-style: normal;
|
|
display: flex;
|
|
justify-content: center;
|
|
list-style: none;
|
|
align-items: center;
|
|
width: 24px;
|
|
|
|
color: #666666;
|
|
height: 24px;
|
|
border: 1px solid #d7d7d7;
|
|
font-size: 12px;
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//手机端
|
|
@media screen and (max-width: 768px) {
|
|
.rc-main {
|
|
padding: 0;
|
|
width: 100%;
|
|
.cart-list {
|
|
border: none;
|
|
margin-bottom: 130px;
|
|
.header {
|
|
display: none;
|
|
}
|
|
.header_ph {
|
|
display: block;
|
|
border-bottom: 2px solid #d8d8d8;
|
|
padding: 20px 10px 20px 0;
|
|
border-top: 5px solid #f6f6f6;
|
|
}
|
|
.check-label {
|
|
margin-left: 10px;
|
|
}
|
|
.name {
|
|
margin-left: 16px;
|
|
}
|
|
.list {
|
|
display: block;
|
|
.product {
|
|
margin-left: 16px;
|
|
}
|
|
.list-left{
|
|
width: 100%;
|
|
}
|
|
ul {
|
|
margin-top: -2rem;
|
|
margin-left: 9.75rem;
|
|
width: 50%;
|
|
.del {
|
|
display: none;
|
|
}
|
|
}
|
|
.product-title{
|
|
width: 225px;
|
|
text-overflow: ellipsis;
|
|
white-space:nowrap;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.rc-footera {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
z-index: 10;
|
|
margin-bottom:0;
|
|
.rc-shop {
|
|
display: none;
|
|
}
|
|
.rc-delete {
|
|
margin-right: 0;
|
|
width: 100%;
|
|
.rc-num {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
padding: 10px;
|
|
}
|
|
strong {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
.el-message-box {
|
|
width: 300px;
|
|
}
|
|
}
|
|
</style> |