144 lines
3.4 KiB
Vue
144 lines
3.4 KiB
Vue
<template>
|
|
<div class="detail">
|
|
<div class="goods-img">
|
|
<u-swiper :list="list" mode="none" img-mode="aspectFit" height="750" bg-color="#fff" @click="imgClick"></u-swiper>
|
|
</div>
|
|
<div class="goods-title">{{goodsInfo.merchandiseName}}</div>
|
|
<div class="goods-point">
|
|
<h3>{{goodsInfo.merchandiseIntegral}}<span>积分</span></h3>
|
|
<div>库存:{{goodsInfo.merchandiseNumber}}</div>
|
|
</div>
|
|
<div class="goods-btn status-lack">
|
|
<div class="text">积分余额:{{userIntegral}}</div>
|
|
<div class="btn" @click="toOrder()" v-if="goodsInfo.status == 0 && userIntegral >= goodsInfo.merchandiseIntegral">立即兑换</div>
|
|
<div class="btn lack-btn" v-if="goodsInfo.status == 0 && userIntegral < goodsInfo.merchandiseIntegral">积分不足</div>
|
|
<div class="btn lack-btn" v-if="goodsInfo.status != 0">缺货</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from "vuex";
|
|
|
|
export default {
|
|
name: 'detail',
|
|
data() {
|
|
return {
|
|
list: [],
|
|
userIntegral: '',
|
|
id: '',
|
|
goodsInfo: {}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
},
|
|
onLoad(option) {
|
|
this.userIntegral = option.userIntegral
|
|
this.id = option.id
|
|
this.getDetail()
|
|
},
|
|
onShow() {
|
|
document.title = '商品详情'
|
|
},
|
|
methods: {
|
|
toOrder() {
|
|
uni.navigateTo({url:`./order?userIntegral=${this.userIntegral}&id=${this.id}`})
|
|
},
|
|
getDetail() {
|
|
this.$http.post(`/app/appintegralmerchandise/queryDetailById?id=${this.id}`).then((res) => {
|
|
if (res.code == 0) {
|
|
this.goodsInfo = res.data
|
|
this.list = [{image: res.data.imageUrl}]
|
|
}
|
|
})
|
|
},
|
|
imgClick(index) {
|
|
this.previewImages(this.list, this.list[index].image)
|
|
},
|
|
previewImages(images, img) {
|
|
uni.previewImage({
|
|
urls: images.map(v => v.image),
|
|
current: img
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
uni-page-body {
|
|
background-color: #fff;
|
|
}
|
|
.detail {
|
|
.goods-img {
|
|
width: 100%;
|
|
}
|
|
.goods-title {
|
|
padding: 32px;
|
|
font-family: PingFangSC-Medium;
|
|
font-weight: 500;
|
|
font-size: 32px;
|
|
color: #333;
|
|
word-break: break-all;
|
|
}
|
|
.goods-point{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 32px;
|
|
h3 {
|
|
line-height: 60px;
|
|
font-family: PingFangSC-SNaNpxibold;
|
|
font-weight: 600;
|
|
font-size: 44px;
|
|
color: #FF6900;
|
|
span {
|
|
font-family: PingFangSC-Medium;
|
|
font-weight: 500;
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
div {
|
|
font-family: PingFangSC-Regular;
|
|
font-size: 26px;
|
|
color: #999;
|
|
}
|
|
}
|
|
.goods-btn {
|
|
width: 100%;
|
|
height: 112px;
|
|
line-height: 112px;
|
|
background: #FFF;
|
|
border-top: 1px solid #ddd;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 32px;
|
|
box-sizing: border-box;
|
|
.text {
|
|
font-family: PingFangSC-Regular;
|
|
font-size: 28px;
|
|
color: #CA906A;
|
|
}
|
|
.btn {
|
|
height: 80px;
|
|
line-height: 80px;
|
|
width: 224px;
|
|
text-align: center;
|
|
background-image: linear-gradient(90deg, #FFA044 0%, #FF8436 100%);
|
|
border-radius: 52px;
|
|
font-family: PingFangSC-Medium;
|
|
font-weight: 500;
|
|
font-size: 32px;
|
|
color: #FFF;
|
|
margin-top: 16px;
|
|
}
|
|
.lack-btn {
|
|
background-image: linear-gradient(90deg, #ddd 0%, #ddd 100%);
|
|
}
|
|
}
|
|
}
|
|
</style>
|