|
|
@@ -1,81 +1,107 @@
|
|
|
<template>
|
|
|
<view :style="vuex_skin">
|
|
|
- <view class="goods">
|
|
|
- <image @click="$util.preview(detail.imgUrl)" :src="detail.imgUrl" style="width: 100vw;" mode="widthFix"></image>
|
|
|
- <view class="title">
|
|
|
- <view class="text-bold" style="color: #353535;font-family: PingFang-SC-Bold;font-size: 34rpx;">{{detail.name}}</view>
|
|
|
- <view class=" text-base" style="padding: 20rpx 0;">
|
|
|
- <view class="text-bold text-lg">
|
|
|
- {{detail.point}}
|
|
|
- <text style="padding-left: 6rpx;">积分</text>
|
|
|
+ <view>
|
|
|
+ <view class="goods">
|
|
|
+ <image @click="$util.preview(detail.imgUrl)" :src="detail.imgUrl" style="width: 100vw;" mode="widthFix">
|
|
|
+ </image>
|
|
|
+ <view class="title">
|
|
|
+ <view class="text-bold" style="color: #353535;font-family: PingFang-SC-Bold;font-size: 34rpx;">
|
|
|
+ <text>{{detail.name}}</text>
|
|
|
+ <text class="red" v-if="detail.isLimit">(每人限购{{detail.limitBuy}}个)</text>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <block v-if="!$u.test.isEmpty(detail.content)">
|
|
|
- <view class="text-sm" style="color: #888888;line-height: 42rpx;">产品说明:{{detail.content}}</view>
|
|
|
- </block>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <block v-if="exchangeShow">
|
|
|
- <view hover-class="none" class="container flex align-center justify-between"
|
|
|
- style="border-bottom: 1rpx solid #efefef;">
|
|
|
- <view class="flex padding align-center">
|
|
|
- <image src="@/static/mine/address.png" style="width: 65upx;height: 65upx;"></image>
|
|
|
- <view class="padding-left text-sm" v-if="!$u.test.isEmpty(address)">
|
|
|
- <view style="font-size: 28upx;font-family: PingFang SC;font-weight: 800;color: #000000;">
|
|
|
- {{address.consignee}} {{address.phone}}
|
|
|
+ <view class=" text-base" style="padding: 20rpx 0;">
|
|
|
+ <view class="text-bold text-lg">
|
|
|
+ {{detail.point || 0}}
|
|
|
+ <text style="padding-left: 6rpx;">积分</text>
|
|
|
</view>
|
|
|
- <view class="text-gray">{{address.address}}</view>
|
|
|
</view>
|
|
|
- <view class="padding-left"
|
|
|
- style="font-size: 28upx;font-family: PingFang SC;font-weight: 800;color: #000000;" v-else>
|
|
|
- 请选择收货地址</view>
|
|
|
- </view>
|
|
|
- <view class="padding">
|
|
|
- <u-icon name="arrow-right" color="#d4d4d4"></u-icon>
|
|
|
+ <block v-if="!$u.test.isEmpty(detail.content)">
|
|
|
+ <view class="text-sm" style="color: #888888;line-height: 42rpx;">产品说明:
|
|
|
+ <u-parse :html="detail.content"></u-parse>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view v-if="exchangeShow" style="padding: 60rpx da;">
|
|
|
+ <navigator url="/pages/address/address" hover-class="none"
|
|
|
+ class="container flex align-center justify-between" style="border-bottom: 1rpx solid #efefef;">
|
|
|
+ <view class="flex padding align-center">
|
|
|
+ <image src="@/static/mine/address.png" style="width: 65upx;height: 65upx;"></image>
|
|
|
+ <view class="padding-left text-sm" v-if="!$u.test.isEmpty(address)">
|
|
|
+ <view style="font-size: 28upx;font-family: PingFang SC;font-weight: 800;color: #000000;">
|
|
|
+ {{address.consignee}} {{address.phone}}
|
|
|
+ </view>
|
|
|
+ <view class="text-gray">{{address.address}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="padding-left"
|
|
|
+ style="font-size: 28upx;font-family: PingFang SC;font-weight: 800;color: #000000;" v-else>
|
|
|
+ 请选择收货地址</view>
|
|
|
+ </view>
|
|
|
+ <view class="padding">
|
|
|
+ <u-icon name="arrow-right" color="#d4d4d4"></u-icon>
|
|
|
+ </view>
|
|
|
+ </navigator>
|
|
|
|
|
|
- <view class="padding-sm">
|
|
|
- <view class="flex padding-xs">
|
|
|
- <text class="flex justify-center align-center">积分数:</text>
|
|
|
- <u-number-box :disabled="$u.test.isEmpty(userInfo.pufaPoint)" @change="pufaPointChange"
|
|
|
- :input-width="200" :min="0" v-model="data.pufaPoint">
|
|
|
- </u-number-box>
|
|
|
+ <view class="padding-sm">
|
|
|
+ <view class="flex padding-xs">
|
|
|
+ <text class="flex justify-center align-center">兑换数量:</text>
|
|
|
+ <u-number-box :step="1" :disabled="$u.test.isEmpty(detail.remain)" @change="numChange"
|
|
|
+ :input-width="150" :min="1" :max="maxNum" v-model="exChangeData.num">
|
|
|
+ </u-number-box>
|
|
|
+ <view class="center" style="color: #888888;margin-left: 20rpx;font-family: PingFang-SC-Medium;">
|
|
|
+ <text>剩余库存: {{detail.remain || 0}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex padding-xs">
|
|
|
+ <text class="flex justify-center align-center">积分数量:</text>
|
|
|
+ <u-number-box :step="10" :disabled="$u.test.isEmpty(userData.userPufaPoint)"
|
|
|
+ @change="pufaPointChange" :input-width="150" :min="0" :max="maxValue"
|
|
|
+ v-model="exChangeData.point">
|
|
|
+ </u-number-box>
|
|
|
+ <view class="center" style="color: #888888;margin-left: 20rpx;font-family: PingFang-SC-Medium;">
|
|
|
+ <text>可用积分: {{userData.userPufaPoint || 0}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </block>
|
|
|
-
|
|
|
- <view class="" style="height: 140rpx;">
|
|
|
+ <view class="" style="height: 300rpx;">
|
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
|
-
|
|
|
- <view v-if="!exchangeShow" class="footer-fixed flex align-center justify-end padding bg-white"
|
|
|
- style="padding: 30rpx;;border-top: 1rpx solid #e5e5e5;z-index: 9;">
|
|
|
- <button class="cu-btn round text-white bg-base" style="width: 180upx;height: 80upx;"
|
|
|
- @click="$refs.toast.info('暂未开放')">兑换</button>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view v-else class="footer-fixed flex align-center justify-between bg-white"
|
|
|
- style="border-top: 1rpx solid #e5e5e5;padding: 30rpx;z-index: 9;">
|
|
|
- <view class="text-red">
|
|
|
- <text>需支付</text>
|
|
|
- <text>¥</text>
|
|
|
- <text>{{cashValue}}</text>
|
|
|
+ <view class="bottom-change">
|
|
|
+ <view v-if="!exchangeShow" class="footer-fixed flex align-center justify-end bg-white"
|
|
|
+ style="padding:30rpx;;border-top: 1rpx solid #e5e5e5;z-index: 9;">
|
|
|
+ <button class="cu-btn round text-white bg-base" style="width: 180upx;height: 80upx;"
|
|
|
+ @click="login">兑换</button>
|
|
|
</view>
|
|
|
- <view>
|
|
|
- <button class="cu-btn round text-white bg-base" style="width: 180upx;height: 80upx;margin-right: 10upx;"
|
|
|
- @click="confirm">兑换</button>
|
|
|
- <button @click="exchangeShow = false" class="cu-btn round line-gray"
|
|
|
- style="width: 180upx;height: 80upx;z-index: 99;">取消</button>
|
|
|
+ <view v-else class="footer-fixed flex align-center justify-between bg-white"
|
|
|
+ style="border-top: 1rpx solid #e5e5e5;padding: 30rpx;z-index: 9;">
|
|
|
+ <view class="text-red flex-direction flex" v-if="pointValue>0">
|
|
|
+ <text>仍需{{pointValue}}积分</text>
|
|
|
+ </view>
|
|
|
+ <view class="" v-else>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <button class="cu-btn round text-white bg-base"
|
|
|
+ style="width: 180upx;height: 80upx;margin-right: 10upx;" @click="confirm">兑换</button>
|
|
|
+ <button @click="exchangeShow=false" class="cu-btn round line-gray"
|
|
|
+ style="width: 180upx;height: 80upx;z-index: 99;">取消</button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<login ref="login" @signIn="signIn" @phoneSuccess="phoneSuccess"></login>
|
|
|
- <toast ref="toast" ></toast>
|
|
|
+ <toast ref="toast"></toast>
|
|
|
+ <exchange-success ref="exchangeSuccess"></exchange-success>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import exchangeSuccess from "@/components/alert/exchangeSuccess.vue"
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ exchangeSuccess
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
id: '',
|
|
|
@@ -83,15 +109,19 @@
|
|
|
detail: {},
|
|
|
//商品地址
|
|
|
address: {},
|
|
|
- //用户信息
|
|
|
- userInfo: {},
|
|
|
//点击兑换
|
|
|
exchangeShow: false,
|
|
|
- //兑换的积分数
|
|
|
- cashValue: 0,
|
|
|
- data: {
|
|
|
- pufaPoint: 0
|
|
|
+ //我的积分数
|
|
|
+ userData: {
|
|
|
+ userPufaPoint: ''
|
|
|
},
|
|
|
+ maxNum:1,
|
|
|
+ maxValue: 0,
|
|
|
+ //兑换的数据
|
|
|
+ exChangeData: {
|
|
|
+ num: 1,
|
|
|
+ point: 0
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
@@ -101,64 +131,165 @@
|
|
|
return
|
|
|
}
|
|
|
this.fetchGoodsDetail()
|
|
|
- this.fetchUserInfo()
|
|
|
},
|
|
|
onShow() {
|
|
|
- this.getAddress()
|
|
|
+ this.address = this.$util.getBackParams('addressData')
|
|
|
+ if (this.$isEmpty(this.address)) {
|
|
|
+ this.getAddress()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ pointValue: {
|
|
|
+ get() {
|
|
|
+ let m = this.$digital.floatMul(this.detail.point, this.exChangeData.num)
|
|
|
+ let n = this.exChangeData.point
|
|
|
+ let val = this.$digital.floatSub(m, n)
|
|
|
+ if (val < 0) {
|
|
|
+ val = 0
|
|
|
+ this.$u.toast('不可以超过商品所需积分')
|
|
|
+ return val
|
|
|
+ }
|
|
|
+ return val
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
- pufaPointChange(e) {
|
|
|
-
|
|
|
+ resetData() {
|
|
|
+ this.userData = {
|
|
|
+ userPufaPoint: ''
|
|
|
+ }
|
|
|
+ this.exChangeData = {
|
|
|
+ num: 1,
|
|
|
+ point: 0
|
|
|
+ }
|
|
|
},
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
/**
|
|
|
- * 获取用户信息
|
|
|
+ * 确认兑换
|
|
|
*/
|
|
|
- fetchUserInfo() {
|
|
|
- if (this.$cache.get('userInfo')) {
|
|
|
- this.userInfo = this.$cache.get('userInfo')
|
|
|
+ async confirm() {
|
|
|
+ if (this.detail.remain < this.exChangeData.num) {
|
|
|
+ this.$refs.toast.error('库存不足')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.$isEmpty(this.address)) {
|
|
|
+ this.$refs.toast.error('请选择收货地址')
|
|
|
return
|
|
|
}
|
|
|
if (this.$isEmpty(this.vuex_userId)) {
|
|
|
- this.showLogin()
|
|
|
+ this.$refs.toast.error('用户未登录')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.$isEmpty(this.userData.userPufaPoint)) {
|
|
|
+ this.$refs.toast.error('无可用积分')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.pointValue > 0) {
|
|
|
+ this.$refs.toast.error('积分不足')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.pointValue < 0) {
|
|
|
+ this.$refs.toast.error('不可以超过商品所需积分')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.exChangeData.point > this.userData.userPufaPoint) {
|
|
|
+ this.$refs.toast.error('积分有误')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let params = {
|
|
|
+ type: 1,
|
|
|
+ phone: this.vuex_phone,
|
|
|
+ goodsId: this.id,
|
|
|
+ addressId: this.address.id,
|
|
|
+ num: this.exChangeData.num
|
|
|
+ }
|
|
|
+ let res = await this.$api.pointgoods.exchange(params)
|
|
|
+ if (res.data.success) {
|
|
|
+ this.resetData()
|
|
|
+ this.init()
|
|
|
+ this.$refs.exchangeSuccess.showSuccess(this.detail.imgUrl)
|
|
|
+ }
|
|
|
+ console.log(res.data);
|
|
|
+ },
|
|
|
+ pufaPointChange(e) {
|
|
|
+ this.exChangeData.point = e.value
|
|
|
+ },
|
|
|
+ numChange(e) {
|
|
|
+ this.exChangeData.num = e.value
|
|
|
+ this.getMaxValue()
|
|
|
+ },
|
|
|
+ async init() {
|
|
|
+ await this.fetchUserData()
|
|
|
+ this.getMaxValue()
|
|
|
+ this.getAddress()
|
|
|
+ this.fetchGoodsDetail()
|
|
|
+ this.exchangeShow = true
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 获取最大购买数量
|
|
|
+ */
|
|
|
+ getMaxNum(){
|
|
|
+ // 是否限购
|
|
|
+ if (!this.detail.isLimit) {
|
|
|
+ //不限购,返回库存量
|
|
|
+ this.maxNum=this.detail.remain
|
|
|
+ return
|
|
|
+ }
|
|
|
+ //限购
|
|
|
+ if (this.detail.remain > this.detail.limitBuy) {
|
|
|
+ this.maxNum=this.detail.limitBuy
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.maxNum=this.detail.remain
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取步进器的最大值
|
|
|
+ */
|
|
|
+ getMaxValue() {
|
|
|
+ let userPoint = parseInt(this.userData.userPufaPoint)
|
|
|
+ let detailPoint = this.$digital.floatMul(parseInt(this.detail.point), this.exChangeData.num)
|
|
|
+ if (userPoint > detailPoint) {
|
|
|
+ this.maxValue = detailPoint
|
|
|
+ } else {
|
|
|
+ this.maxValue = userPoint
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取用户可用积分
|
|
|
+ */
|
|
|
+ async fetchUserData() {
|
|
|
+ if (!this.vuex_phone) {
|
|
|
return
|
|
|
}
|
|
|
let params = {
|
|
|
- id: this.vuex_userId
|
|
|
+ phone: this.vuex_phone
|
|
|
}
|
|
|
- this.$api.loginUser.detail(params).then(res => {
|
|
|
- this.userInfo = res.data.data
|
|
|
- })
|
|
|
+ let res = await this.$api.loginUser.userHeatValueAndPufaPoint(params)
|
|
|
+ this.userData = res.data.data
|
|
|
},
|
|
|
/**
|
|
|
* 获取用户地址
|
|
|
*/
|
|
|
- getAddress() {
|
|
|
- this.$api.address.list({
|
|
|
+ async getAddress() {
|
|
|
+ if (this.$isEmpty(this.vuex_userId)) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let params = {
|
|
|
userId: this.vuex_userId
|
|
|
- }).then(res => {
|
|
|
- this.address = res.data.data.records[0];
|
|
|
- })
|
|
|
+ }
|
|
|
+ let res = await this.$api.address.list(params)
|
|
|
+ this.address = res.data.data.records[0];
|
|
|
},
|
|
|
/**
|
|
|
* 获取商品详情
|
|
|
*/
|
|
|
- fetchGoodsDetail() {
|
|
|
+ async fetchGoodsDetail() {
|
|
|
let params = {
|
|
|
id: this.id
|
|
|
}
|
|
|
- this.$api.pointgoods.list(params).then(res=>{
|
|
|
- this.detail=res.data.data.records[0]
|
|
|
- })
|
|
|
+ let res=await this.$api.pointgoods.list(params)
|
|
|
+ this.detail = res.data.data.records[0]
|
|
|
+ this.getMaxNum()
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -169,13 +300,17 @@
|
|
|
background-color: #FFFFFF;
|
|
|
}
|
|
|
|
|
|
+ .red {
|
|
|
+ color: #e72226;
|
|
|
+ }
|
|
|
+
|
|
|
.goods {
|
|
|
- padding-bottom: 20rpx;
|
|
|
+ padding-bottom: 40rpx;
|
|
|
border-bottom: 1rpx solid #efefef;
|
|
|
|
|
|
.title {
|
|
|
padding-top: 20rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
+ margin: 0 20rpx;
|
|
|
font-size: 32rpx;
|
|
|
color: #363636;
|
|
|
}
|