mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 02:06:38 +08:00
392 lines
12 KiB
Vue
392 lines
12 KiB
Vue
<template>
|
|
<div class="settlement">
|
|
<Myheader></Myheader>
|
|
<div class="rc-main">
|
|
<tabs></tabs>
|
|
</div>
|
|
<div class="rc_contline"></div>
|
|
<div class="rc-main">
|
|
<div class="address-list">
|
|
<div
|
|
class="mypersonal"
|
|
v-for="(item, index) in useraddress"
|
|
:key="index"
|
|
:class="item.isDefault ? 'active' : ''"
|
|
@click="selectAddress(item)"
|
|
>
|
|
<div class="arrow_ph" v-if="item.isDefault" @click="popGetList()">
|
|
<i class="el-icon-arrow-right"></i>
|
|
</div>
|
|
<div class="edit" @click="editAddress(item)">
|
|
<i class="el-icon-edit"></i>编辑
|
|
</div>
|
|
<div class="my-delivery">
|
|
<span>{{ item.recipient }}</span>
|
|
<i>{{ item.recipientPhone }}</i>
|
|
</div>
|
|
<div class="per-delivery">
|
|
<span>{{ item.address }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="mypersonal add">
|
|
<div
|
|
class="my-delivery"
|
|
@click="addAddress"
|
|
style="justify-content: center"
|
|
>
|
|
<i class="el-icon-plus"></i>
|
|
<span>添加收货地址</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rc_contline">1</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%" :title="dialogAddTitle">
|
|
<div class="tc dl_cont" v-if="dialogAdd">
|
|
<myAddress
|
|
@isClose="dialogCtrl"
|
|
:editAddressData="editAddressData"
|
|
></myAddress>
|
|
</div>
|
|
</el-dialog>
|
|
<el-dialog
|
|
:visible.sync="dialogPopList"
|
|
class="diallog_width"
|
|
width="'100%"
|
|
title="选择收货地址"
|
|
>
|
|
<div class="tc dl_cont" style="padding-bottom: 50px;position: relative;">
|
|
<div class="pop_list">
|
|
<el-row
|
|
class="mypersonal"
|
|
v-for="(item, index) in useraddress"
|
|
:key="index"
|
|
:class="item.isDefault ? 'active' : ''"
|
|
>
|
|
<el-col :span="4"
|
|
><input type="checkbox" v-model="item.checked" @click="selectPopAddress(item)"
|
|
/></el-col>
|
|
<el-col :span="16" class="tl">
|
|
<div >
|
|
<p class="inline">{{ item.recipient }}</p>
|
|
<p class="inline">{{ item.recipientPhone }}</p>
|
|
</div>
|
|
<p> {{ item.address }}</p>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<i @click="editAddress(item)" class="el-icon-edit"></i>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="popnewaddr">
|
|
<span class="btn" @click="addAddress">新增收货地址</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Myheader from "~/components/header.vue";
|
|
import { userin, memberAddress, generateOrderWX } from "../../ajax/getData";
|
|
import tabs from "@/components/tabs.vue";
|
|
import myAddress from "~/components/address.vue";
|
|
|
|
import itemMixin from "../../../smart-admin-web/src/components/main/components/side-menu/item-mixin";
|
|
export default {
|
|
middleware: "metaTitle",
|
|
meta: { title: "订单结算" },
|
|
data() {
|
|
return {
|
|
goldmedal: [],
|
|
dialogAddTitle:"",
|
|
addressstype: null,
|
|
orderstatus: "",
|
|
userisdelivery: "待收货",
|
|
userdelivery: "派送中",
|
|
isshow: true,
|
|
leftico: require("../../assets/image/rc-left.png"),
|
|
orderNumber: "",
|
|
dialogAdd: false,
|
|
dialogPopList: false,
|
|
editAddressData: {},
|
|
curAddress: {},
|
|
saveType: "",
|
|
useraddress: [
|
|
// {
|
|
// state: "李某某",
|
|
// tel: "15124117917",
|
|
// address: "广东省 广州市 天河区 天河客运站118号",
|
|
// isdefault: true,
|
|
// },
|
|
// {
|
|
// state: "李某某",
|
|
// tel: "15124117917",
|
|
// address: "广东省 广州市 天河区 天河客运站118号",
|
|
// isdefault: false,
|
|
// },
|
|
],
|
|
shopprice: {
|
|
price: "标准快递",
|
|
distribution: "限时折扣全场商品8折",
|
|
promotion: "￥167.00",
|
|
payment: "￥0.00 ",
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
// 总价计算
|
|
sumPrice() {
|
|
return this.goldmedal.reduce((pre, cur) => {
|
|
console.log(pre);
|
|
return pre + cur.buyCount * cur.productPrice;
|
|
}, 0);
|
|
},
|
|
},
|
|
methods: {
|
|
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.dialogAddTitle='修改收货地址'
|
|
this.editAddressData = {
|
|
memberId: item.memberId,
|
|
name: item.recipient,
|
|
tel: item.recipientPhone,
|
|
detailAddress: item.detailAddress,
|
|
id: item.id,
|
|
cityId: item.cityId,
|
|
districtId: item.districtId,
|
|
provinceId:item.provinceId,
|
|
provinceName: item.provinceName,
|
|
cityName: item.cityName,
|
|
districtName: item.districtName,
|
|
saveType: "edit",
|
|
};
|
|
this.dialogAdd = true;
|
|
},
|
|
addAddress() {
|
|
this.dialogAddTitle='新增收货地址'
|
|
this.editAddressData = {};
|
|
this.dialogAdd = true;
|
|
},
|
|
selectAddress(cur) {
|
|
this.useraddress.forEach((item) => {
|
|
if (item.id == cur.id) {
|
|
item.isDefault = true;
|
|
item.checked=true
|
|
} else {
|
|
item.checked=false
|
|
item.isDefault = false;
|
|
}
|
|
});
|
|
},
|
|
selectPopAddress(cur) {
|
|
this.useraddress.forEach((item) => {
|
|
if (item.id == cur.id) {
|
|
item.isDefault = true;
|
|
item.checked=true
|
|
} else {
|
|
item.checked=false
|
|
item.isDefault = false;
|
|
}
|
|
});
|
|
},
|
|
popGetList() {
|
|
this.dialogPopList = true;
|
|
},
|
|
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: this.sumPrice,
|
|
userinformation:
|
|
postData[0].orderAddress.addressUserName +
|
|
" " +
|
|
postData[0].orderAddress.addressPhoneNumber,
|
|
wxPay: "weixin://wxpay/bizpayurl?pr=4RJbokxzz",
|
|
};
|
|
this.$router.push({
|
|
path: "/personal/userpay",
|
|
query: {
|
|
userPayData: JSON.stringify(userPayData),
|
|
},
|
|
});
|
|
}else{
|
|
this.$message({
|
|
type: "warning",
|
|
message: res.msg,
|
|
});
|
|
}
|
|
},
|
|
async canceldanhao(orderNumber) {
|
|
let data = await userin(orderNumber);
|
|
console.log(data);
|
|
// this.goldmedal=data;
|
|
console.log(this.goldmedal);
|
|
},
|
|
},
|
|
mounted() {
|
|
this.goldmedal = JSON.parse(this.$route.query.list);
|
|
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,
|
|
myAddress,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
@import url("../../assets/css/global.less");
|
|
@import "./settlement.less";
|
|
// @import url("../../assets/css/settlement.less");
|
|
|
|
</style> |