|
|
@@ -3,12 +3,12 @@
|
|
|
<u-navbar title="兑换详情" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
|
|
|
<view class="detail">
|
|
|
<view class="detail-top">
|
|
|
- <u-swiper :list="picUrlArr" height="348" :indicator="true" :circular="true"></u-swiper>
|
|
|
+ <u-swiper :list="picUrlArr" height="348" radius="0" :indicator="true" :circular="true"></u-swiper>
|
|
|
</view>
|
|
|
<view class="detail-title">
|
|
|
<view class="txt">{{ info.title }}</view>
|
|
|
<view class="coin">
|
|
|
- <image src="../../static/logo.png" mode=""></image>
|
|
|
+ <image src="../../static/icon/bean.png" mode=""></image>
|
|
|
<view>x {{ info.exchangePrice }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -33,10 +33,10 @@
|
|
|
<view class="info">
|
|
|
<view class="info-title">{{ info.title }}</view>
|
|
|
<view class="info-coin">
|
|
|
- <image src="../../static/logo.png" mode=""></image>
|
|
|
- <view>x {{ info.value }}</view>
|
|
|
+ <image src="../../static/icon/bean.png" mode=""></image>
|
|
|
+ <view>x {{ payInfo.exValue }}</view>
|
|
|
</view>
|
|
|
- <view class="info-stock">库存：{{ info.quantity }}</view>
|
|
|
+ <view class="info-stock">库存：{{ payInfo.quantity }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="sku" v-for="(item, index) in skuList" :key="index">
|
|
|
@@ -44,30 +44,45 @@
|
|
|
<view class="flex sku-list">
|
|
|
<view
|
|
|
:class="{'action': item.actionIndex == indexs, 'sku-list-item': item.actionIndex != indexs}"
|
|
|
- v-for="(ele, indexs) in item.vals" :key="indexs" @click="getSku(ele, item, indexs)">
|
|
|
- {{ ele }}</view>
|
|
|
+ v-for="(ele, indexs) in item.value" :key="indexs" @click="getSku(ele, item, indexs)">
|
|
|
+ {{ ele }}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="flex quantity">
|
|
|
<view class="quantity-title">兑换数量</view>
|
|
|
<view class="quantity-title">
|
|
|
- <u-number-box v-model="value" :min="1" :disabledInput="true" @change="valChange"></u-number-box>
|
|
|
+ <u-number-box v-model="orderNum" :min="1" :disabledInput="true"
|
|
|
+ @change="valChange($event, payInfo)"></u-number-box>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="flex btn">
|
|
|
<view class="flex btn-left">
|
|
|
<view class="title">应付：</view>
|
|
|
<view class="flex coin">
|
|
|
- <image src="../../static/logo.png" mode=""></image>
|
|
|
- <view>x {{ info.value }}</view>
|
|
|
+ <image src="../../static/icon/bean.png" mode=""></image>
|
|
|
+ <view>x {{ payInfo.value }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="btn-right">
|
|
|
- <view class="confirm">立即兑换</view>
|
|
|
+ <view class="confirm" @click="confirmPrize">立即兑换</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
+
|
|
|
+ <u-popup :show="tipShow" mode="center">
|
|
|
+ <view class="tip-show">
|
|
|
+ <view class="flex tip-show-title">
|
|
|
+ <u-icon name="checkmark-circle" color="#EB7009" size="24"></u-icon>
|
|
|
+ <text>兑换成功，已放入奖品库</text>
|
|
|
+ </view>
|
|
|
+ <view class="flex tip-show-btn">
|
|
|
+ <view class="close" @click="tipShow = false">关闭</view>
|
|
|
+ <navigator class="prize" :url="`/pages/prize/index`" hover-class="navigator-hover" @click="tipShow = false">前往查看</navigator>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -77,24 +92,38 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ goodsId: '',
|
|
|
boxId: '',
|
|
|
picUrlArr: [],
|
|
|
info: {},
|
|
|
prizeList: [],
|
|
|
description: '',
|
|
|
choiceShow: false,
|
|
|
- value: 1,
|
|
|
- skuList: []
|
|
|
+ initData: {},
|
|
|
+ orderNum: 1,
|
|
|
+ skuList: [],
|
|
|
+ skuListInit: [],
|
|
|
+ payInfo: {},
|
|
|
+ tipShow: false
|
|
|
};
|
|
|
},
|
|
|
onLoad(opthios) {
|
|
|
- this.getDetail(opthios.id)
|
|
|
+ this.goodsId = opthios.id
|
|
|
+ },
|
|
|
+ onShow(){
|
|
|
+ this.getDetail()
|
|
|
+ this.getBean()
|
|
|
},
|
|
|
methods: {
|
|
|
- getDetail(id) {
|
|
|
+ getDetail() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
$http.post('/api/v1/mp/user/exchange/goods/detail', {
|
|
|
- goodsId: id
|
|
|
+ goodsId: this.goodsId,
|
|
|
+ noToken: true
|
|
|
}).then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
if (res.code == 0) {
|
|
|
this.info = res.data
|
|
|
let picUrlArr = res.data.picUrl.split(',')
|
|
|
@@ -103,31 +132,49 @@
|
|
|
})
|
|
|
// 处理富文本
|
|
|
this.description = this.formatRichText(res.data.description);
|
|
|
-
|
|
|
- let specObj = {}
|
|
|
- res.data.skuList.forEach(item => {
|
|
|
- item.properties.split(';').forEach(p => {
|
|
|
- const key = p.split(':')[0]
|
|
|
- // console.log(specObj[key] instanceof Array)
|
|
|
- if (!specObj[key]) {
|
|
|
- specObj[key] = []
|
|
|
- // console.log(specObj[key])
|
|
|
- }
|
|
|
- specObj[key].push(p.split(':')[1])
|
|
|
+ this.skuListInit = res.data.skuList
|
|
|
+ if (res.data.skuList.length) {
|
|
|
+ let skuProp = JSON.parse(res.data.skuProp)
|
|
|
+ skuProp.forEach(item => {
|
|
|
+ item.actionIndex = 0,
|
|
|
+ item.txt = `${item.name}:${item.value[0]}`
|
|
|
})
|
|
|
- })
|
|
|
- this.skuList = Object.keys(specObj).map(key => {
|
|
|
- return {
|
|
|
- name: key,
|
|
|
- vals: [...new Set(specObj[key])],
|
|
|
- actionVals: false,
|
|
|
- actionIndex: 0
|
|
|
+ let actionSku = skuProp.map(item => {
|
|
|
+ return item.txt
|
|
|
+ }).join(';')
|
|
|
+ let sku = res.data.skuList.find(item => {
|
|
|
+ return item.properties == actionSku
|
|
|
+ })
|
|
|
+ this.payInfo = {
|
|
|
+ ...sku,
|
|
|
+ exValue: sku.value,
|
|
|
+ picUrl: env.filePublic + sku.picUrl
|
|
|
}
|
|
|
- })
|
|
|
+ this.skuList = skuProp
|
|
|
+ } else {
|
|
|
+ this.payInfo = {
|
|
|
+ ...res.data,
|
|
|
+ exValue: this.info.value,
|
|
|
+ picUrl: this.picUrlArr[0]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
- console.log(this.skuList);
|
|
|
- // console.log(this.info);
|
|
|
+ getBean() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ $http.post('/api/v1/mp/user/mine/init', {}).then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.initData = res.data
|
|
|
}
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
})
|
|
|
},
|
|
|
|
|
|
@@ -139,16 +186,52 @@
|
|
|
this.choiceShow = false
|
|
|
},
|
|
|
|
|
|
- valChange(e) {
|
|
|
- console.log(e);
|
|
|
+ valChange(e, item) {
|
|
|
+ let value = e.value
|
|
|
+ this.$set(item, 'value', value * item.exValue)
|
|
|
+ console.log(value, item);
|
|
|
},
|
|
|
|
|
|
getSku(e, item, indexs) {
|
|
|
this.$set(item, 'txt', `${item.name}:${e}`)
|
|
|
this.$set(item, 'actionIndex', indexs)
|
|
|
- console.log(e);
|
|
|
- console.log(item);
|
|
|
- console.log(indexs);
|
|
|
+ this.orderNum = 1
|
|
|
+ let actionSku = this.skuList.map(item => {
|
|
|
+ return item.txt
|
|
|
+ }).join(';')
|
|
|
+ let sku = this.skuListInit.find(item => {
|
|
|
+ return item.properties == actionSku
|
|
|
+ })
|
|
|
+ this.payInfo = {
|
|
|
+ ...sku,
|
|
|
+ exValue: sku.value,
|
|
|
+ picUrl: env.filePublic + sku.picUrl
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ confirmPrize() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '兑换中'
|
|
|
+ });
|
|
|
+ let data = {
|
|
|
+ goodsId: this.payInfo.goodsId,
|
|
|
+ skuId: this.payInfo.skuId,
|
|
|
+ orderNum: this.orderNum,
|
|
|
+ }
|
|
|
+ console.log(data);
|
|
|
+ if (this.initData.coinNum < this.payInfo.value) {
|
|
|
+ uni.$u.toast('盲豆余额不足');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ $http.post('/api/v1/mp/user/exchange/submit', data).then(res=>{
|
|
|
+ uni.hideLoading();
|
|
|
+ if(res.code == 0){
|
|
|
+ this.choiceShow = false
|
|
|
+ this.tipShow = true
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ })
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
@@ -365,6 +448,48 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .tip-show{
|
|
|
+ width: 80vw;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 60rpx 40rpx;
|
|
|
+
|
|
|
+ &-title{
|
|
|
+ margin-bottom: 64rpx;
|
|
|
+ text{
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-btn{
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .close{
|
|
|
+ width: 160rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ color: rgba(235, 112, 9, 100);
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid rgba(235, 112, 9, 100);
|
|
|
+ }
|
|
|
+
|
|
|
+ .prize{
|
|
|
+ width: 160rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ color: rgba(235, 112, 9, 100);
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-align: center;
|
|
|
+ background-color: rgba(235, 112, 9, 100);
|
|
|
+ color: rgba(255, 255, 255, 100);
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.footer-fixed {
|
|
|
position: fixed;
|
hwb0
