|
|
@@ -0,0 +1,194 @@
|
|
|
+<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>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <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>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+
|
|
|
+ <view class="" style="height: 140rpx;">
|
|
|
+
|
|
|
+ </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="exchange">兑换</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>
|
|
|
+ <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>
|
|
|
+ <login ref="login" @signIn="signIn" @phoneSuccess="phoneSuccess"></login>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: '',
|
|
|
+ //商品详情
|
|
|
+ detail: {},
|
|
|
+ //商品地址
|
|
|
+ address: {},
|
|
|
+ //用户信息
|
|
|
+ userInfo: {},
|
|
|
+ //点击兑换
|
|
|
+ exchangeShow: false,
|
|
|
+ //兑换的积分数
|
|
|
+ cashValue: 0,
|
|
|
+ data: {
|
|
|
+ pufaPoint: 0
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.id = options.id;
|
|
|
+ if (this.$u.test.isEmpty(this.id)) {
|
|
|
+ this.$u.toast('商品id不能为空')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.fetchGoodsDetail()
|
|
|
+ this.fetchUserInfo()
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getAddress()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ pufaPointChange(e) {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 获取用户信息
|
|
|
+ */
|
|
|
+ fetchUserInfo() {
|
|
|
+ if (this.$cache.get('userInfo')) {
|
|
|
+ this.userInfo = this.$cache.get('userInfo')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.$isEmpty(this.vuex_userId)) {
|
|
|
+ this.showLogin()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let params = {
|
|
|
+ id: this.vuex_userId
|
|
|
+ }
|
|
|
+ this.$api.loginUser.detail(params).then(res => {
|
|
|
+ this.userInfo = res.data.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取用户地址
|
|
|
+ */
|
|
|
+ getAddress() {
|
|
|
+ this.$api.address.list({
|
|
|
+ userId: this.vuex_userId
|
|
|
+ }).then(res => {
|
|
|
+ this.address = res.data.data.records[0];
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取商品详情
|
|
|
+ */
|
|
|
+ fetchGoodsDetail() {
|
|
|
+ let params = {
|
|
|
+ id: this.id
|
|
|
+ }
|
|
|
+ this.$api.pointgoods.list(params).then(res=>{
|
|
|
+ this.detail=res.data.data.records[0]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ page {
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods {
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ border-bottom: 1rpx solid #efefef;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ padding-top: 20rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #363636;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|