281 lines
6.0 KiB
Vue
281 lines
6.0 KiB
Vue
<template>
|
||
<view class="hole-page">
|
||
<view class="nav-bar"></view>
|
||
<view class="pic">
|
||
<image :src="picUrl" mode=""></image>
|
||
</view>
|
||
<h2>
|
||
<span style="font-size: 16px;">{{ name }}</span>
|
||
<span style="font-size: 14px; color: #7E7E7E;">剩余库存：{{ sum }}件</span>
|
||
</h2>
|
||
<h3 style="justify-content: flex-start;">
|
||
<span style="color: red; font-size: 22px; font-weight: bold; letter-spacing: 3rpx; padding-right: 5rpx;">
|
||
{{ point }}
|
||
</span>
|
||
分
|
||
<!-- <span style="padding-left: 20rpx;">(剩余积分：{{ myPoint }}分)</span> -->
|
||
</h3>
|
||
<view class="good-detail">
|
||
<span style="color: #868686;">商品描述：</span>
|
||
{{ use }}
|
||
</view>
|
||
<h3 style="justify-content: flex-start;">
|
||
兑换数量：
|
||
<uni-number-box
|
||
v-model="changeNum"
|
||
:min="0"
|
||
:max="
|
||
Math.floor(myPoint / point) > sum
|
||
?
|
||
sum
|
||
:
|
||
Math.floor(myPoint / point)
|
||
"
|
||
/>
|
||
</h3>
|
||
<!-- <button @click="toggleGift">兑换奖品</button> -->
|
||
<view class="btm">
|
||
<view class="btm-lef">
|
||
<h4>总计：</h4>
|
||
<span>{{ changeNum * point }}积分</span>
|
||
</view>
|
||
<view class="btm-rig" @click="toggleGift">
|
||
立即兑换
|
||
</view>
|
||
</view>
|
||
<uni-popup ref="popup" type="center">
|
||
<view
|
||
class="pop"
|
||
>
|
||
<view class="pop-upper">
|
||
<view class="img-area">
|
||
<image src="/static/smile.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="pop-lower">
|
||
<span style="font-size: 14px;">兑换成功</span>
|
||
<span style="font-size: 12px; color: #7A7A7A;">继续赚取积分，兑换更多奖品</span>
|
||
<view class="con-btn" @click="refresh">确定</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { publicPath } from '../../public.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
id: '',
|
||
name: '',
|
||
use: '',
|
||
picUrl: '',
|
||
sum: '',
|
||
point: '',
|
||
myPoint: uni.getStorageSync('point'),
|
||
changeNum: 0,
|
||
yr: new Date().getFullYear(),
|
||
month: new Date().getMonth() + 1,
|
||
day: new Date().getDate(),
|
||
hr: new Date().getHours(),
|
||
min: new Date().getMinutes(),
|
||
sec: new Date().getSeconds(),
|
||
height: ''
|
||
}
|
||
},
|
||
methods: {
|
||
toggleGift () {
|
||
let that = this
|
||
console.log(that.changeNum);
|
||
if (that.changeNum == 0) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '未选择商品添加数量！'
|
||
})
|
||
} else {
|
||
uni.request({
|
||
url: publicPath + '/backstage/appshoping/getExchange',
|
||
method: 'POST',
|
||
header: {
|
||
'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
|
||
},
|
||
data: {
|
||
userId: uni.getStorageSync('id'),
|
||
shopId: that.id,
|
||
shopTime: that.yr + '-' + that.month + '-' + that.day + ' ' + that.hr + ':' + that.min + ':' + that.sec,
|
||
shopSum: that.changeNum,
|
||
changePoint: Number(that.point) * Number(that.changeNum),
|
||
pointResource: '兑换了' + that.name
|
||
},
|
||
success: (res) => {
|
||
console.log(res);
|
||
if (res.data.code == 200) {
|
||
/* uni.showToast({
|
||
icon: 'none',
|
||
title: '兑换商品成功！',
|
||
success: () => {
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
}
|
||
}) */
|
||
that.$refs.popup.open()
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '兑换商品失败，请稍后再试！'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
refresh () {
|
||
this.$refs.popup.close()
|
||
/* uni.redirectTo({
|
||
url: '/pages/giftDetail/giftDetail'
|
||
}) */
|
||
uni.navigateBack()
|
||
}
|
||
},
|
||
onLoad(params) {
|
||
let that = this
|
||
console.log(params);
|
||
// 获取商品详情
|
||
that.id = params.id
|
||
that.name = params.name
|
||
that.use = params.use
|
||
that.picUrl = params.url
|
||
that.sum = params.sum
|
||
that.point = params.point
|
||
// 获取当前高低
|
||
that.height = uni.getSystemInfoSync().windowHeight
|
||
},
|
||
onShow() {
|
||
console.log(uni.getStorageSync('point'));
|
||
if (this.min < 10) {
|
||
this.min = '0' + this.min
|
||
}
|
||
if (this.sec < 10) {
|
||
this.sec = '0' + this.sec
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.hole-page{
|
||
.nav-bar{
|
||
width: 100%;
|
||
height: var(--status-bar-height);
|
||
padding-top: var(--status-bar-height);
|
||
}
|
||
.pic{
|
||
width: 90%;
|
||
height: 400rpx;
|
||
margin: 0 auto;
|
||
border-radius: 15rpx;
|
||
image{
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 15rpx;
|
||
}
|
||
}
|
||
h2, h3{
|
||
width: 90%;
|
||
margin: 30rpx auto;
|
||
font-weight: normal;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
}
|
||
.good-detail{
|
||
width: 90%;
|
||
margin: 30rpx auto;
|
||
font-weight: normal;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
}
|
||
.btm{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 20rpx;
|
||
margin-top: 40vh;
|
||
bottom: 0;
|
||
left: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-top: 2px solid #f4f8fc;
|
||
.btm-lef{
|
||
display: flex;
|
||
h4{
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
padding-right: 5rpx;
|
||
}
|
||
span{
|
||
font-size: 14px;
|
||
color: red;
|
||
}
|
||
}
|
||
.btm-rig{
|
||
box-sizing: border-box;
|
||
padding: 10rpx 20rpx;
|
||
font-size: 14px;
|
||
background-color: #219ef8;
|
||
color: #fff;
|
||
border-radius: 15rpx;
|
||
}
|
||
}
|
||
.pop{
|
||
width: 70vw;
|
||
height: 40vh;
|
||
border-radius: 15rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
background-color: #fff;
|
||
.pop-upper{
|
||
width: 100%;
|
||
height: 55%;
|
||
background-color: #1F9EF7;
|
||
display: flex;
|
||
.img-area{
|
||
width: 50%;
|
||
height: 70%;
|
||
margin: auto;
|
||
image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.pop-lower{
|
||
flex: 1;
|
||
box-sizing: border-box;
|
||
padding: 2vh 4vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
.con-btn{
|
||
width: 50%;
|
||
box-sizing: border-box;
|
||
padding: 10rpx 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #1F9EF7;
|
||
color: #fff;
|
||
border-radius: 15rpx;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|