You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
579 lines
15 KiB
579 lines
15 KiB
<template>
|
|
<div class="integral_goods_detail wrapper_1200">
|
|
<div class="crumbs">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item :to="{ path: '/integral' }">全部商品</el-breadcrumb-item>
|
|
<el-breadcrumb-item>其他</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
<div class="top">
|
|
<div class="top_left_img">
|
|
<img :src="imgUrl + goodsList.image" alt />
|
|
</div>
|
|
<div class="top_right">
|
|
<div class="top_right_title">{{ goodsList.name }}</div>
|
|
<p class="top_right_txt">
|
|
{{ goodsList.content }}
|
|
</p>
|
|
<div class="l">
|
|
<img src="../../assets/images/integral_exchange.png" alt />
|
|
<p v-if="goodsList.type == 1">
|
|
{{ goodsList.point }}积分+{{ goodsList.price }}元
|
|
</p>
|
|
<p v-if="goodsList.type == 2">{{ goodsList.point }}积分</p>
|
|
</div>
|
|
|
|
<div class="r">库存：{{ goodsList.stock }}</div>
|
|
<div class="r">限定兑换：{{ goodsList.limit_num }}件</div>
|
|
<div class="r">已兑换：{{ goodsList.ready_num }}件</div>
|
|
<p class="r">兑换规则：{{ goodsList.rule }}</p>
|
|
<div class="top_right_btn">
|
|
<el-button
|
|
v-if="goodsList.ready_num < goodsList.limit_num"
|
|
size="small"
|
|
type="primary"
|
|
icon="el-icon-goods"
|
|
@click="exchange"
|
|
>立即兑换</el-button
|
|
>
|
|
<el-button v-else size="small" type="info" icon="el-icon-goods" disabled
|
|
>已兑换</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="bottom">
|
|
<div class="bottom_title">商品详情</div>
|
|
|
|
<p class="goods_detail_option_text">
|
|
<span>商品型号：28g/袋</span>
|
|
<span>产地：山东</span>
|
|
<span>规格：28g/袋</span>
|
|
<span>执行标准：《中国药典》2022年版一部</span>
|
|
<span>生产企业：安国市远光药业有限公司</span>
|
|
</p>
|
|
|
|
<div class="goods_detail_option_banner">
|
|
<img :src="imgUrl+goodsList.image" alt />
|
|
</div>
|
|
</div> -->
|
|
|
|
<!-- 立即兑换 -->
|
|
<DialogSlot
|
|
:dialogSlotShow.sync="exchangeDialog"
|
|
@done="reload"
|
|
:titleShow="false"
|
|
:cancelText="'返回'"
|
|
:confirmText="'确认兑换'"
|
|
@clickConfirm="exchangeSubmit"
|
|
>
|
|
<template v-slot:contentSlot>
|
|
<div class="integraldialog">
|
|
<div class="nav">
|
|
<div class="nav_img">
|
|
<img :src="imgUrl + goodsList.image" alt />
|
|
</div>
|
|
<div class="nav_txt">
|
|
<div class="nav_title">{{ goodsList.name }}</div>
|
|
<div class="nav_num">
|
|
<img src="../../assets/images/integral_exchange.png" alt />
|
|
<p v-if="goodsList.type == 1">
|
|
{{ goodsList.point }}积分
|
|
<span v-if="Number(goodsList.price)">+{{ goodsList.price }}元</span>
|
|
</p>
|
|
<p v-if="goodsList.type == 2">{{ goodsList.point }}积分</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<!-- <div class="content_Service">
|
|
<div class="content_title">服务</div>
|
|
<div style="color: #999999">不支持退换</div>
|
|
</div> -->
|
|
<div class="content_num">
|
|
<div class="content_title">购买数量</div>
|
|
<div style="color: #999999">商品限购{{ goodsList.limit_num }}件</div>
|
|
<div>
|
|
<el-input-number
|
|
size="mini"
|
|
:max="goodsList.limit_num"
|
|
:min="0"
|
|
v-model="integralNum"
|
|
></el-input-number>
|
|
</div>
|
|
</div>
|
|
<div class="content_address" v-if="goodsList.type == 1">
|
|
<div class="content_title">收货地址</div>
|
|
<div class="content_address_user">
|
|
<div>{{ addressList.name }} {{ addressList.mobile }}</div>
|
|
<div>
|
|
<span style="color: #999999"
|
|
>{{ addressList.full_address }}{{ addressList.address }}</span
|
|
>
|
|
<span style="color: var(--themeColor)">
|
|
<i class="el-icon-edit" @click="changeAddress"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content_num" v-if="Number(goodsList.price)">
|
|
账户余额:{{ balance }}元
|
|
</div>
|
|
<div style="color: #ff7d02">
|
|
<p>
|
|
<span>需支付:{{ integralNum * Number(goodsList.point) }}积分 </span>
|
|
<span v-if="Number(goodsList.price)">
|
|
+{{ integralNum * Number(goodsList.price) }}元</span
|
|
>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</DialogSlot>
|
|
|
|
<!-- 更换地址 -->
|
|
<DialogSlot
|
|
:dialogSlotShow.sync="exchangeAddress"
|
|
@done="reload"
|
|
:tipsText="'选择地址'"
|
|
:cancelText="'返回'"
|
|
@clickConfirm="changeAddressBtn"
|
|
>
|
|
<template v-slot:contentSlot>
|
|
<div class="select_address">
|
|
<el-radio-group v-model="defaultAddress">
|
|
<el-radio
|
|
class="select_address_list"
|
|
:label="item.id"
|
|
v-for="(item, index) in allAddressList"
|
|
:key="index"
|
|
@change="changeAddressRadio(item)"
|
|
>
|
|
<div class="select_address_txt">
|
|
<div style="color: #222">
|
|
<span>{{ item.name }}</span>
|
|
<span>{{ item.mobile }}</span>
|
|
</div>
|
|
<div style="color: #999">{{ item.full_address }}{{ item.address }}</div>
|
|
</div>
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
</template>
|
|
</DialogSlot>
|
|
|
|
<!-- 兑换成功 -->
|
|
<DialogSlot
|
|
:dialogSlotShow.sync="exchangeSuccess"
|
|
@done="reload"
|
|
:titleShow="false"
|
|
:cancelText="'返回首页'"
|
|
:confirmText="'查看订单'"
|
|
@clickCancel="successCancel"
|
|
>
|
|
<template v-slot:contentSlot>
|
|
<div class="changeSuccess">
|
|
<img src="../../assets/images/paySuccess.png" alt />
|
|
<p>兑换成功</p>
|
|
</div>
|
|
</template>
|
|
</DialogSlot>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Setting from "~/setting";
|
|
export default {
|
|
auth: false,
|
|
data() {
|
|
return {
|
|
imgUrl: Setting.uplodBaseURL,
|
|
userInfo: JSON.parse(localStorage.getItem("userInfo")),
|
|
// 是否为虚拟商品
|
|
isFictitious: false,
|
|
|
|
phoneNumber: "",
|
|
goodsList: {},
|
|
// 立即兑换弹框
|
|
exchangeDialog: false,
|
|
integralNum: 0,
|
|
// 更改地址弹框
|
|
exchangeAddress: false,
|
|
defaultAddress: 0,
|
|
allAddressList: [],
|
|
addressList: {},
|
|
// 兑换成功
|
|
exchangeSuccess: false,
|
|
balance: 0,
|
|
};
|
|
},
|
|
created() {
|
|
// this.goodsList = this.$route.query;
|
|
this.init();
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.getData();
|
|
this.getAddressList({ isALL: false });
|
|
this.getBalance();
|
|
},
|
|
getData() {
|
|
let obj = {
|
|
id: this.$route.query.id,
|
|
};
|
|
this.$axios
|
|
.post(`/goodsexchange/detail`, obj)
|
|
.then((res) => {
|
|
console.log(res.data, `goodsList`);
|
|
this.goodsList = res.data;
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
// api/memberaccount/info
|
|
getBalance() {
|
|
let obj = {
|
|
account_type: "balance",
|
|
};
|
|
this.$axios
|
|
.post(`/memberaccount/info`, obj)
|
|
.then((res) => {
|
|
console.log(res.data, `getBalance`);
|
|
this.balance = res.data.balance;
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
// 获取默认地址
|
|
getAddressList(OBJ) {
|
|
let obj = {
|
|
member_id: this.userInfo.member_id,
|
|
};
|
|
this.$axios
|
|
.post(`/memberaddress/page`, obj)
|
|
.then((res) => {
|
|
if (!OBJ.isALL) {
|
|
this.addressList = [];
|
|
res.data.list.forEach((item) => {
|
|
if (item.is_default) {
|
|
this.addressList = item;
|
|
}
|
|
});
|
|
} else {
|
|
res.data.list.forEach((item) => {
|
|
if (item.is_default) {
|
|
this.defaultAddress = item.id;
|
|
}
|
|
});
|
|
this.allAddressList = [];
|
|
this.allAddressList = res.data.list;
|
|
}
|
|
console.log(this.addressList);
|
|
console.log(this.allAddressList);
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
// 修改默认地址
|
|
changeAddressRadio(val) {
|
|
this.addressList = val;
|
|
},
|
|
// 修改默认地址确认按钮
|
|
changeAddressBtn() {
|
|
this.exchangeAddress = false;
|
|
this.$axios
|
|
.post("/memberaddress/setdefault", {
|
|
id: this.addressList.id,
|
|
})
|
|
.then((res) => {
|
|
this.init();
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
reload(e) {
|
|
console.log(e, "0000");
|
|
},
|
|
// 立即兑换弹框
|
|
exchange() {
|
|
this.exchangeDialog = true;
|
|
},
|
|
// 更改地址弹框
|
|
changeAddress() {
|
|
this.exchangeAddress = true;
|
|
this.getAddressList({ isALL: true });
|
|
},
|
|
// 兑换成功
|
|
exchangeSubmit() {
|
|
let obj = {
|
|
goods_id: this.goodsList.id,
|
|
num: this.integralNum,
|
|
store_id: JSON.parse(localStorage.getItem("drugstoreObj")).id,
|
|
member_address: JSON.stringify(this.addressList),
|
|
};
|
|
if (this.goodsList.type == 2) {
|
|
obj.member_address = null;
|
|
}
|
|
console.log(obj);
|
|
this.$axios
|
|
.post("/goodsexchange/doExchange", obj)
|
|
.then((res) => {
|
|
this.exchangeDialog = false;
|
|
// this.exchangeSuccess = true;
|
|
this.$message({
|
|
message: "兑换成功",
|
|
type: "success",
|
|
});
|
|
this.init();
|
|
console.log(res, `兑换成功`);
|
|
})
|
|
.catch((err) => {
|
|
this.$message({
|
|
message: err,
|
|
type: "error",
|
|
});
|
|
});
|
|
},
|
|
successCancel() {
|
|
this.$router.push({ path: "/" });
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.integral_goods_detail {
|
|
.crumbs {
|
|
margin: 20px 0;
|
|
}
|
|
.top {
|
|
width: 1200px;
|
|
height: 380px;
|
|
background: #ffffff;
|
|
border-radius: 4px;
|
|
margin-bottom: 20px;
|
|
padding: 30px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.top_left_img {
|
|
width: 510px;
|
|
height: 320px;
|
|
background: #ffffff;
|
|
border-radius: 1px;
|
|
}
|
|
.top_right {
|
|
width: 670px;
|
|
height: 320px;
|
|
margin-left: 20px;
|
|
|
|
.top_right_title {
|
|
height: 28px;
|
|
font-size: 20px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 28px;
|
|
}
|
|
.top_right_txt {
|
|
height: 50px;
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #585858;
|
|
line-height: 22px;
|
|
margin: 20px 0;
|
|
}
|
|
.l {
|
|
height: 40px;
|
|
font-size: 18px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
line-height: 40px;
|
|
display: flex;
|
|
color: #ff7d02;
|
|
margin-top: 20px;
|
|
img {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-top: 12px;
|
|
}
|
|
}
|
|
.r {
|
|
height: 20px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 20px;
|
|
}
|
|
.top_right_btn {
|
|
margin-top: 30px;
|
|
/deep/ .el-button {
|
|
width: 142px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.bottom {
|
|
width: 1200px;
|
|
height: 655px;
|
|
background: #ffffff;
|
|
border-radius: 4px;
|
|
margin-bottom: 20px;
|
|
padding: 30px;
|
|
.bottom_title {
|
|
height: 22px;
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 22px;
|
|
padding-bottom: 40px;
|
|
margin-bottom: 20px;
|
|
border-bottom: #eaeaea solid 1px;
|
|
}
|
|
.goods_detail_option_text {
|
|
margin-bottom: 15px;
|
|
span {
|
|
margin-right: 20px;
|
|
height: 22px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
line-height: 22px;
|
|
}
|
|
}
|
|
.goods_detail_option_banner {
|
|
width: 1140px;
|
|
height: 488px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
/deep/ .el-dialog__wrapper {
|
|
.integraldialog {
|
|
.nav {
|
|
display: flex;
|
|
.nav_img {
|
|
img {
|
|
width: 140px;
|
|
height: 100px;
|
|
}
|
|
}
|
|
.nav_txt {
|
|
width: 300px;
|
|
|
|
.nav_title {
|
|
height: 25px;
|
|
font-size: 18px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 25px;
|
|
}
|
|
.nav_num {
|
|
height: 20px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #ff7d02;
|
|
line-height: 20px;
|
|
display: flex;
|
|
margin: 20px 0;
|
|
img {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
}
|
|
.nav_remarks {
|
|
height: 20px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
}
|
|
.content {
|
|
width: 100%;
|
|
height: 150px;
|
|
.content_Service,
|
|
.content_num,
|
|
.content_address {
|
|
display: flex;
|
|
margin: 15px 0;
|
|
div {
|
|
margin-right: 40px;
|
|
}
|
|
.content_title {
|
|
width: 56px;
|
|
height: 20px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 20px;
|
|
}
|
|
.content_address_user {
|
|
div {
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.select_address {
|
|
display: flex;
|
|
|
|
padding: 30px;
|
|
/deep/.el-radio-group {
|
|
.select_address_list {
|
|
width: 280px;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
.el-radio__input {
|
|
.el-radio__inner {
|
|
margin-top: 23px;
|
|
}
|
|
}
|
|
.select_address_txt {
|
|
width: 320px;
|
|
div {
|
|
line-height: 30px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.changeSuccess {
|
|
img {
|
|
width: 127px;
|
|
height: 127px;
|
|
margin: 10px auto;
|
|
}
|
|
p {
|
|
text-align: center;
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #222222;
|
|
line-height: 50px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|