109 lines
3.0 KiB
Vue
109 lines
3.0 KiB
Vue
<template>
|
|
<view>
|
|
<view class="banner">
|
|
<swiper class="swiper-box" >
|
|
<swiper-item v-for="(item ,index) in details.images" :key="index">
|
|
<view class="swiper-item">
|
|
<image :src="item" mode="aspectFill"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="text-details fsz36 ">
|
|
<view class="">{{details.name}}</view>
|
|
<view class="qishu fsz28 ">
|
|
<view class="fsz36 tprice">{{details.point}}积分+{{details.price}}元</view>
|
|
<view style="font-size: 12px;position: absolute;right: 25px;">库存:{{details.stock}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="fr" style="height:40px;width: 100%;">
|
|
<view style="float:right">
|
|
<uni-number-box v-model="numbers" min="1" max="99" background="#eee" @change="changeValue" /></view>
|
|
</view>
|
|
<view class="product">
|
|
<view class="mainwidth2">
|
|
<uni-segmented-control :current="tab" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#f50"></uni-segmented-control>
|
|
<view class="content fsz30" >
|
|
<rich-text :nodes="strings"></rich-text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="button-bottom">
|
|
<button class="btn btn-primary " v-if="user_point < details.point " >积分不足</button>
|
|
<button class="btn btn-primary " v-else-if=" details.stock ==0 " >库存不足</button>
|
|
<button class="btn btn-success" v-else @click="exchange()" >兑换</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
details:{point:0},
|
|
id:'',
|
|
strings:'',
|
|
user_point:0,
|
|
items: ['商品详情'],
|
|
numbers:1
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
|
|
this.id = options.id
|
|
this.getdata()
|
|
|
|
},
|
|
methods: {
|
|
changeValue(value) {
|
|
},
|
|
getdata(){
|
|
this.$api.exchangegoodsinfo({id:this.id},res=>{
|
|
if(res.code == '1'){
|
|
this.details = res.data
|
|
var jsonDa = JSON.stringify(this.details.content);
|
|
var newResData = JSON.parse(jsonDa);
|
|
this.strings = newResData
|
|
}
|
|
})
|
|
this.$api.userInfo({},res=>{
|
|
if(res.code == '1'){
|
|
this.user_point = res.data.user.user_point
|
|
}
|
|
})
|
|
},
|
|
exchange(){
|
|
if(this.details.stock ==0 ){
|
|
uni.showToast({ title: "库存不足" , icon: 'none' })
|
|
return false;
|
|
}
|
|
uni.navigateTo({
|
|
url:'/pages/exchange/createorder?goods_id=' + this.id+'&number='+this.numbers
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page{background-color: #fff;}
|
|
.banner{position: relative;}
|
|
.swiper-box{height: 450upx;}
|
|
.swiper-box image{height: 450upx;width: 100%;}
|
|
.text-details view:nth-child(1){font-weight: 700;}
|
|
.text-details{color: #333;
|
|
background: #fff;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;}
|
|
.text-details .qishu{margin-top: 20rpx;display: flex;}
|
|
.tprice{color: #ff5a68;}
|
|
.text-details .qishu text:nth-child(2){margin-left: 16rpx;font-weight: normal;color: #777;}
|
|
.product image{width: 100%;}
|
|
|
|
.product{background: #fff;overflow: hidden;padding: 0px 10px;}
|
|
.product .mainwidth2{ padding-bottom: 100rpx;}
|
|
|
|
</style>
|