<template>
<a-spin :spinning="spinning">
<div class="logo-top">
<img class="img" src="../assets/images/cj2.png" alt="" />
<!-- 商城 -->
<div :style="{marginTop: height*220/707 + 'px'}" class="nav-title">仙品商城</div>
<div class="immortal-products" :style="{top:height*285/707 + 'px'}">
<div class="immortal-nav">
<span @click="num = 0" :class="{ span: num == 0 }">实物商品</span>
<span>|</span
><span @click="num = 1" :class="{ span: num == 1 }">虚拟商品</span>
</div>
<!-- 实物 -->
<div :style="{width: width*340/360 + 'px',height:height*330/707 + 'px'}" v-show="num == 0" class="xianpin-mall">
<div
v-for="(item, index) in physicalGoods"
:key="index"
class="commodity"
>
<div class="material">
<div class="img">
<img :src="item.prizeImg" alt="" />
</div>
<p>{{ item.prizeName }}</p>
</div>
<!-- 弹框 -->
<!-- <button>积分不足</button> -->
<button @click="postExchange(wxuser, item.prizeId)">
{{ item.exchangePoints }}积分兑换</button>
</div>
</div>
<!-- 虚拟 -->
<div :style="{width: width*340/360 + 'px',height:height*330/707 + 'px'}" v-show="num == 1" class="xianpin-mall">
<div
v-for="(item, index) in virtualGoods"
:key="index"
class="commodity"
>
<div class="material">
<div class="fictitious">
<img :src="item.prizeImg" alt="" />
</div>
<p>{{ item.prizeName }}</p>
</div>
<button @click="postExchange(wxuser, item.prizeId)">
{{ item.exchangePoints }}积分兑换</button>
</div>
</div>
</div>
</div>
</a-spin>
</template>
<script>
import http from "../services/http-service";
export default {
name: "HelloWorld",
props: {},
data() {
return {
spinning: true, // 加载
wxuser: window.localStorage.getItem("wxUser"),
prizeid: '', // 商品id
integral: [], // 兑换积分传参
physicalGoods: [], // 实物商品
virtualGoods: [], // 虚拟商品
num: 0,
width: window.innerWidth,
height: window.innerHeight,
phoneCache: window.localStorage.getItem("phone"), // 本地电话缓存
residualIntegral: window.localStorage.getItem("residualIntegral"), // 本地用户账号缓存
visible: false, // 兑换实物弹框
visibles: false, // 兑换虚拟弹框
codes: null,
code: null,
};
},
created() {
this.getPrize();
},
mounted() {
// this.postExchange()
},
methods: {
// 兑换虚拟/实物商品
async postExchange (User, commodityId) {
let temp =await http.exchange(User, commodityId)
// alert(temp)
console.log(temp)
if (temp === 500) {
alert('积分不足')
} else if (temp === 400) {
alert('商品数量不足')
}else if (temp === 200) {
alert('兑换成功')
}else if (temp === 404) {
alert('请填写收货地址')
}
},
// 虚拟/实物商品
async getPrize() {
let temp = await http.Prize();
temp.forEach((item) => {
if (item.prizeType === "实物商品") {
this.physicalGoods.push(item);
} else if (item.prizeType === "虚拟商品") {
this.virtualGoods.push(item);
}
this.spinning = false
});
// console.log(this.physicalGoods);
// console.log(this.virtualGoods);
console.log(temp);
},
// 兑换实物弹框
showModal(e) {
this.integral = e
this.visible = true;
console.log(this.integral)
},
// 兑换虚拟弹框
showModals() {
this.visibles = true;
},
// 兑换实物弹框
hideModal(e,v) {
console.log(e)
console.log(v)
this.visible = false
},
// 兑换虚拟弹框
hideModals() {
this.visible = false;
},
},
};
</script>
<style scoped lang="less">
// @import '../style/PointsMall';
.immortal-products {
// border: 1px solid red;
overflow: hidden;
top: 8rem;
// top: 285px;
position: absolute;
.immortal-nav {
margin-bottom: 0.1rem;
span {
font-size: 0.5rem;
display: inline-block;
padding: 0.2rem 0.1rem;
color: #666666;
}
.span {
color: #9b2816;
}
}
.xianpin-mall {
padding: 0.3rem;
box-sizing: border-box;
display: flex;
overflow-x: hidden;
flex-wrap: wrap;
border-radius: 0.3rem;
background-color: #e3b97f;
}
}
.commodity {
width: 4rem;
margin-bottom: 0.2rem;
.material {
background-color: #f0e5c8;
width: 4rem;
height: 4rem;
padding-top: 0.7rem;
border-radius: 0.2rem;
.img {
margin: 0 auto;
width: 3rem;
height: 2rem;
// border: 1px solid red;
img {
width: 3rem;
height: 2rem;
object-fit: contain;
}
}
.fictitious {
margin: 0 auto;
width: 2.7rem;
background-size: 8.5rem;
background-repeat: no-repeat;
img {
width: 2.7rem;
object-fit: contain;
}
}
p {
margin-top: 0.2rem;
font-size: 0.4rem;
text-align: center;
color: #9b2816;
}
}
button,
.p {
width: 100%;
border: none;
color: white;
font-size: 0.4rem;
margin-top: 0.3rem;
border-radius: 0.1rem;
text-align: center;
padding: 0.2rem;
background-color: #9b2816;
}
}
.commodity:nth-child(odd) {
margin-right: 0.4rem;
}
// 弹框
/deep/.ant-modal-content {
width: 80%;
margin: 2.5rem auto;
}
/deep/.ant-modal-body {
padding: 0.2rem;
text-align: center;
p:nth-child(1) {
color: rgb(90, 88, 88);
font-size: 0.7rem;
margin: 0.5rem 0 0.1rem 0;
}
p:nth-child(2) {
color: rgb(138, 133, 133);
font-size: 0.4rem;
margin: 0;
}
}
</style>