mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-11-21 18:06:52 +08:00
购物车
This commit is contained in:
summation
@@ -1,168 +1,145 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="settlement">
|
||||
<Myheader></Myheader>
|
||||
<tabs></tabs>
|
||||
<div class="online"></div>
|
||||
|
||||
<div class="rc-main" v-for="(item,index) in goldmedal" :key="index" >
|
||||
<div class="rc-border"></div>
|
||||
|
||||
<div class="rc-main">
|
||||
<tabs></tabs>
|
||||
|
||||
<div class="address-list">
|
||||
<div
|
||||
class="mypersonal"
|
||||
v-for="(dataaddress, index) in useraddress"
|
||||
v-for="(item, index) in useraddress"
|
||||
:key="index"
|
||||
:class="item.isDefault ? 'active' : ''"
|
||||
@click="selectAddress(item)"
|
||||
>
|
||||
<div class="edit" @click="editAddress(item)">
|
||||
<i class="el-icon-edit"></i>编辑
|
||||
</div>
|
||||
<div class="my-delivery">
|
||||
<span>{{ dataaddress.state }}</span>
|
||||
<i>{{ dataaddress.tel }}</i>
|
||||
<span>{{ item.recipient }}</span>
|
||||
<i>{{ item.recipientPhone }}</i>
|
||||
</div>
|
||||
<div class="per-delivery">
|
||||
<span>{{ dataaddress.address }}</span>
|
||||
<span>{{ item.address }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="online" style="height:3px;width:100%;background:#DDDDDD;"></div>
|
||||
<div>
|
||||
<div class="rc-center">
|
||||
<div class="rc-usermain">
|
||||
<div class="rc-image">
|
||||
<img :src="item.catimage" alt="" />
|
||||
</div>
|
||||
<div class="rc-right">
|
||||
<div class="rc-usercenter">
|
||||
<em>{{ item.usereat }}</em>
|
||||
<div class="rc-userright">
|
||||
<span>规格:{{ item.num }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rc-userbottom">
|
||||
<span>数量:{{ item.specification }}件</span>
|
||||
<i>￥{{ item.userprice }}</i>
|
||||
<div class="rc-bottom">
|
||||
<span>联系客服申请售后</span>
|
||||
<div class="mypersonal">
|
||||
<div
|
||||
class="my-delivery"
|
||||
@click="addAddress"
|
||||
style="justify-content: center"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
<span>添加收货地址</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rc-bottomm">
|
||||
<span>联系客服申请售后</span>
|
||||
</div>
|
||||
<!-- <div class="rc-userbottomm">
|
||||
<i>￥{{ item.userprice }}</i>
|
||||
<span>{{ item.orderstype }}</span>
|
||||
<i>￥{{ item.userprice }}</i>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="rc-merchandise">
|
||||
<ul>
|
||||
<li>
|
||||
<span>配送方式:</span>
|
||||
<i>{{ shopprice.price }}</i>
|
||||
</li>
|
||||
<li>
|
||||
<span> 活动促销:</span>
|
||||
<i>{{ shopprice.distribution }}</i>
|
||||
</li>
|
||||
<li>
|
||||
<span>商品总价:</span>
|
||||
<i>{{ shopprice.promotion }}</i>
|
||||
</li>
|
||||
<li>
|
||||
<span>配送费用:</span>
|
||||
<i>{{ shopprice.payment }}</i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="rc-foot">
|
||||
<div class="rc-foo">
|
||||
<div style="padding-top:55px">
|
||||
<i>合计金额:</i>
|
||||
<em>￥167.00</em>
|
||||
</div>
|
||||
<div style="padding-bottom:40px">
|
||||
<span>再次购买</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rc-button">
|
||||
<div class="rc-left">
|
||||
<span>总计：</span>
|
||||
<em>￥167.00</em>
|
||||
</div>
|
||||
<strong ref="rccolor" @click="jiesuan">结算</strong>
|
||||
|
||||
</div>
|
||||
<div class="rc-contline"></div>
|
||||
<div class="rc-main" v-for="(item, index) in goldmedal" :key="index">
|
||||
<div class="rc-usermain">
|
||||
<div class="rc-image">
|
||||
<img :src="item.productImg" alt="" />
|
||||
</div>
|
||||
<div class="rc-right">
|
||||
<div class="rc-usercenter">
|
||||
<h3>{{ item.productName }}</h3>
|
||||
<p>规格:{{ item.specifications }}</p>
|
||||
</div>
|
||||
<div class="rc-userbottom">
|
||||
<p>￥{{ item.productPrice }}</p>
|
||||
<p>X{{ item.buyCount }}</p>
|
||||
<p class="price">￥{{ item.productPrice }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rc-contline"></div>
|
||||
<div class="rc-main">
|
||||
<div class="rc-merchandise">
|
||||
<ul>
|
||||
<li>
|
||||
<span>配送方式:</span>
|
||||
<i>{{ shopprice.price }}</i>
|
||||
</li>
|
||||
<li>
|
||||
<span> 活动促销:</span>
|
||||
<i>{{ shopprice.distribution }}</i>
|
||||
</li>
|
||||
<li>
|
||||
<span>商品总价:</span>
|
||||
<i class="red">{{ sumPrice }}</i>
|
||||
</li>
|
||||
<li>
|
||||
<span>配送费用:</span>
|
||||
<i class="red">{{ shopprice.payment }}</i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rc-contline"></div>
|
||||
<div class="rc-main">
|
||||
<div class="rc-foot">
|
||||
<div class="rc-foo">
|
||||
<div>
|
||||
<i>合计金额:</i>
|
||||
<em>{{ sumPrice }}</em>
|
||||
</div>
|
||||
<div style="font-weight: bold">
|
||||
<span @click="jiesuan()">提交订单</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog :visible.sync="dialogAdd" class="diallog_width" width="'100%">
|
||||
<div class="tc dl_cont" v-if="dialogAdd">
|
||||
<!-- <myAddress
|
||||
@isClose="dialogCtrl"
|
||||
:editAddressData="editAddressData"
|
||||
></myAddress> -->
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Myheader from "~/components/header.vue";
|
||||
import {userin} from "../../ajax/getData";
|
||||
import tabs from "@/components/tabs.vue";
|
||||
import { userin, memberAddress, generateOrderWX } from "../../ajax/getData";
|
||||
import tabs from "@/components/tabs.vue";
|
||||
// import myAddress from "../address/address.vue";
|
||||
import itemMixin from "../../../smart-admin-web/src/components/main/components/side-menu/item-mixin";
|
||||
export default {
|
||||
middleware: 'metaTitle',
|
||||
meta: {title: '订单结算'},
|
||||
middleware: "metaTitle",
|
||||
meta: { title: "订单结算" },
|
||||
data() {
|
||||
return {
|
||||
goldmedal:[],
|
||||
goldmedal: [],
|
||||
addressstype: null,
|
||||
orderstatus: '',
|
||||
userisdelivery:'待收货',
|
||||
orderstatus: "",
|
||||
userisdelivery: "待收货",
|
||||
userdelivery: "派送中",
|
||||
isshow:true,
|
||||
isshow: true,
|
||||
leftico: require("../../assets/image/rc-left.png"),
|
||||
orderNumber:'',
|
||||
|
||||
// delivery: [
|
||||
// {
|
||||
// state: "派送中",
|
||||
// time: "2021-11-21",
|
||||
// address: "广州天河—刘某某【15124617917】正在派送中",
|
||||
// },
|
||||
// ],
|
||||
|
||||
orderNumber: "",
|
||||
dialogAdd: false,
|
||||
editAddressData: {},
|
||||
curAddress: {},
|
||||
saveType: "",
|
||||
useraddress: [
|
||||
{
|
||||
state: "李某某",
|
||||
tel: "15124117917",
|
||||
address: "广东省 广州市 天河区 天河客运站118号",
|
||||
},
|
||||
{
|
||||
state: "李某某",
|
||||
tel: "15124117917",
|
||||
address: "广东省 广州市 天河区 天河客运站118号",
|
||||
},
|
||||
{
|
||||
state: "李某某",
|
||||
tel: "15124117917",
|
||||
address: "广东省 广州市 天河区 天河客运站118号",
|
||||
},
|
||||
{
|
||||
state: "李某某",
|
||||
tel: "15124117917",
|
||||
address: "广东省 广州市 天河区 天河客运站118号",
|
||||
},
|
||||
],
|
||||
|
||||
goldmedal: [
|
||||
{
|
||||
ordernumber: "1111111111111111111",
|
||||
orderstype: 1,
|
||||
index:0,
|
||||
usereat: "英国短毛猫成猫全价湿粮",
|
||||
num: "5kg",
|
||||
specification: "1",
|
||||
userprice: "167.00",
|
||||
catimage: require("../../assets/image/rc-win.png"),
|
||||
},
|
||||
// {
|
||||
// state: "李某某",
|
||||
// tel: "15124117917",
|
||||
// address: "广东省 广州市 天河区 天河客运站118号",
|
||||
// isdefault: true,
|
||||
// },
|
||||
// {
|
||||
// state: "李某某",
|
||||
// tel: "15124117917",
|
||||
// address: "广东省 广州市 天河区 天河客运站118号",
|
||||
// isdefault: false,
|
||||
// },
|
||||
],
|
||||
shopprice: {
|
||||
price: "标准快递",
|
||||
@@ -170,49 +147,177 @@ export default {
|
||||
promotion: "￥167.00",
|
||||
payment: "￥0.00 ",
|
||||
},
|
||||
information: {
|
||||
reference: "1111111111111111",
|
||||
ordertime: "2012-12-01 11:20:00",
|
||||
paymentmethod: "微信支付",
|
||||
distribution: "快递",
|
||||
trackingnumber: "11111111111111",
|
||||
catimage: require("../../assets/image/rc-left.png"),
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 总价计算
|
||||
sumPrice() {
|
||||
return this.goldmedal.reduce((pre, cur) => {
|
||||
console.log(pre);
|
||||
return pre + cur.buyCount * cur.productPrice;
|
||||
}, 0);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
jiesuan(){
|
||||
// let userdata=this.$route.query.wxdata
|
||||
async getAddressList() {
|
||||
let memberId = JSON.parse(localStorage.getItem("userInfo")).data.id;
|
||||
let { data } = await memberAddress("getAll", { memberId: memberId });
|
||||
data.forEach((item) => {
|
||||
item.address =
|
||||
item.provinceName +
|
||||
item.cityName +
|
||||
item.districtName +
|
||||
item.detailAddress;
|
||||
});
|
||||
this.useraddress = data;
|
||||
},
|
||||
editAddress(item) {
|
||||
this.editAddressData = {
|
||||
memberId: item.memberId,
|
||||
name: item.recipient,
|
||||
tel: item.recipientPhone,
|
||||
detailAddress: item.detailAddress,
|
||||
id: item.id,
|
||||
city: item.cityName,
|
||||
districtId: item.districtName,
|
||||
saveType: "edit",
|
||||
};
|
||||
this.dialogAdd = true;
|
||||
},
|
||||
addAddress() {
|
||||
this.editAddressData = {};
|
||||
this.dialogAdd = true;
|
||||
},
|
||||
selectAddress(cur) {
|
||||
this.useraddress.forEach((item) => {
|
||||
if (item.id == cur.id) {
|
||||
item.isDefault = true;
|
||||
} else {
|
||||
item.isDefault = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
dialogCtrl(parm) {
|
||||
this.dialogAdd = parm;
|
||||
this.getAddressList();
|
||||
},
|
||||
async jiesuan() {
|
||||
let orderAddress = this.useraddress.filter((item) => item.isDefault);
|
||||
let postData = [];
|
||||
this.goldmedal.forEach((item) => {
|
||||
let oneProduct = {
|
||||
productName: item.productName,
|
||||
buyCount: item.buyCount,
|
||||
productId: item.productCode,
|
||||
payAmount: item.productPrice,
|
||||
memberId: item.memberId,
|
||||
phoneNumber: item.mobile,
|
||||
// couponId: "NGQ2022P12",
|
||||
// couponTypeId: "4",
|
||||
// couponName: "内购券",
|
||||
// couponAmount: "0.3175",
|
||||
// couponCode: "0007792402",
|
||||
orderAddress: {
|
||||
addressPhoneNumber: orderAddress[0].recipientPhone,
|
||||
addressUserName: orderAddress[0].recipient,
|
||||
addressProvinceName: orderAddress[0].provinceName,
|
||||
addressCityName: orderAddress[0].cityName,
|
||||
addressCountyName: orderAddress[0].districtName,
|
||||
addressDetailInfo: orderAddress[0].detailAddress,
|
||||
},
|
||||
};
|
||||
postData.push(oneProduct);
|
||||
});
|
||||
// let postData = [
|
||||
// {
|
||||
// productName: this.goldmedal.productName,
|
||||
// buyCount: "2",
|
||||
// productId: "20030200",
|
||||
// payAmount: "147.00",
|
||||
// memberId: "844350",
|
||||
// phoneNumber: "18112621098",
|
||||
// couponId: "NGQ2022P12",
|
||||
// couponTypeId: "4",
|
||||
// couponName: "内购券",
|
||||
// couponAmount: "0.3175",
|
||||
// couponCode: "0007792402",
|
||||
// orderAddress: {
|
||||
// addressPhoneNumber:orderAddress[0].recipientPhone,
|
||||
// addressUserName:orderAddress[0].recipient,
|
||||
// addressProvinceName: orderAddress[0].provinceName,
|
||||
// addressCityName:orderAddress[0].cityName,
|
||||
// addressCountyName: orderAddress[0].districtName,
|
||||
// addressDetailInfo: orderAddress[0].detailAddress,
|
||||
// },
|
||||
// },
|
||||
// // {
|
||||
// // productName: "幼猫全价粮",
|
||||
// // buyCount: "2",
|
||||
// // productId: "20030200",
|
||||
// // payAmount: "147.00",
|
||||
// // memberId: "844350",
|
||||
// // phoneNumber: "18112621098",
|
||||
// // couponId: "NGQ2022P12",
|
||||
// // couponTypeId: "4",
|
||||
// // couponName: "内购券",
|
||||
// // couponAmount: "0.3175",
|
||||
// // couponCode: "0007792402",
|
||||
// // orderAddress: {
|
||||
// // addressPhoneNumber: "13602898745",
|
||||
// // addressUserName: "张三",
|
||||
// // addressProvinceName: "江苏省",
|
||||
// // addressCityName: "无锡市",
|
||||
// // addressCountyName: "江阴市",
|
||||
// // addressDetailInfo: "东苑一村",
|
||||
// // },
|
||||
// // },
|
||||
// ];
|
||||
let res = await generateOrderWX(postData);
|
||||
if (res.success) {
|
||||
let userPayData = {
|
||||
orderId: res.data,
|
||||
userprice: postData[0].payAmount,
|
||||
userinformation:
|
||||
postData[0].orderAddress.addressUserName +
|
||||
" " +
|
||||
postData[0].orderAddress.addressPhoneNumber,
|
||||
wxPay: "weixin://wxpay/bizpayurl?pr=4RJbokxzz",
|
||||
};
|
||||
this.$router.push({
|
||||
path: "/personal/userpay",
|
||||
query: {
|
||||
wxdata:userdata
|
||||
},
|
||||
|
||||
});
|
||||
},
|
||||
async canceldanhao(orderNumber){
|
||||
let data=await userin(orderNumber);
|
||||
console.log(data);
|
||||
// this.goldmedal=data;
|
||||
console.log(this.goldmedal);
|
||||
},
|
||||
path: "/personal/userpay",
|
||||
query: {
|
||||
userPayData:JSON.stringify(userPayData),
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
async canceldanhao(orderNumber) {
|
||||
let data = await userin(orderNumber);
|
||||
console.log(data);
|
||||
// this.goldmedal=data;
|
||||
console.log(this.goldmedal);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.addressstype = this.$route.query.stype;
|
||||
this.orderNumber=this.$route.query.orderNumber;
|
||||
this.canceldanhao(this.orderNumber)
|
||||
console.log(this.$refs.rccolor)
|
||||
this.$refs.rccolor.style.background='gray';
|
||||
this.goldmedal = JSON.parse(this.$route.query.list);
|
||||
console.log(this.$route);
|
||||
this.getAddressList();
|
||||
// this.addressstype = this.$route.query.stype;
|
||||
// this.orderNumber = this.$route.query.orderNumber;
|
||||
// this.canceldanhao(this.orderNumber);
|
||||
// console.log(this.$refs.rccolor);
|
||||
// this.$refs.rccolor.style.background = "gray";
|
||||
},
|
||||
components: {
|
||||
Myheader,
|
||||
tabs
|
||||
tabs,
|
||||
// myAddress,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "./settlement.less";
|
||||
@import url("../../assets/css/global.less");
|
||||
@import url("../../assets/css/settlement.less");
|
||||
// @import url("../../assets/css/settlement.less");
|
||||
</style>
|
||||
Reference in New Issue
Block a user