mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-11-20 01:23:47 +08:00
831 lines
20 KiB
Vue
831 lines
20 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" style="visibility: hidden;">
|
||
<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" style="visibility: hidden;">
|
||
<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 style="visibility: hidden;">
|
||
<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) {
|
||
let leftAllotment = this.cartData[index].leftAllotment;
|
||
if(this.cartData[index].buyCount >= leftAllotment) {
|
||
this.$message({
|
||
type: "error",
|
||
message: "已达到本品最大购买上限",
|
||
});
|
||
return;
|
||
}
|
||
|
||
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> |