|
|
@@ -0,0 +1,257 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="兑换"></u-navbar>
|
|
|
+ <view class="settlement">
|
|
|
+ <!-- 商品 -->
|
|
|
+ <view class="settlement-goods" style="background-color: #fff">
|
|
|
+ <view class="settlement-goods-item">
|
|
|
+ <image :src="list.picUrl" mode="aspectFit"></image>
|
|
|
+ <view class="info">
|
|
|
+ <view class="info-title ells">{{ list.title }}</view>
|
|
|
+ <view class="info-num flex">
|
|
|
+ <view class="info-num-sku ells-one">规格：{{ list.properties || '-' }}</view>
|
|
|
+ <view class="info-num-goods">剩余数量：{{ list.goodsNum }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex numbtn">
|
|
|
+ <view class="type"></view>
|
|
|
+ <view class="btn" @click="toRecovery">兑换数量：<view style="display: inline-block;">
|
|
|
+ <u-number-box input-width="25" disabledInput :max="list.goodsNum" button-size="26" color="#999999" bg-color="#F5F6F8"
|
|
|
+ v-model="value" @change="valChange"></u-number-box>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="settlement-tip">
|
|
|
+ <view>1. 不喜欢的商品可回收兑换为盲豆<br>2. 盲豆可用于在平台商城中兑换商品<br>3. 盲豆的所属解释权归平台所有，有疑问请联系客服</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="footer-fixed">
|
|
|
+ <view class="content">
|
|
|
+ <view class="content-btn flex">
|
|
|
+ <view class="content-btn-left">
|
|
|
+ <view class="money">
|
|
|
+ <text>总价：</text>
|
|
|
+ <text class="value">{{ list.returnCoin }}盲豆</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content-btn-right">
|
|
|
+ <text class="save" @click="save">确定兑换</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import env from '../../config/env.js'
|
|
|
+ import $http from '@/utils/request.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [],
|
|
|
+ value: '',
|
|
|
+ recovery: {},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opthios) {
|
|
|
+ if(opthios){
|
|
|
+ this.value = opthios.num
|
|
|
+ this.recovery = {
|
|
|
+ goodsId: opthios.goodsId,
|
|
|
+ num: opthios.num,
|
|
|
+ properties: opthios.properties,
|
|
|
+ skuId: opthios.skuId=="null"?null:opthios.skuId,
|
|
|
+ storageId: opthios.storageId,
|
|
|
+ }
|
|
|
+ this.getDetail()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getDetail()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getDetail() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ $http.post('/api/v1/mp/user/prize/recovery/settle', this.recovery).then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code == 0) {
|
|
|
+ res.data.picUrl = env.filePublic + res.data.picUrl.split(',')[0] + '?imageView2/2/w/170'
|
|
|
+ this.list = res.data
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ valChange(e) {
|
|
|
+ this.recovery.num = e.value
|
|
|
+ this.getDetail()
|
|
|
+ },
|
|
|
+ //确定兑
|
|
|
+ save() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ $http.post('/api/v1/mp/user/prize/recovery/submit',{}).then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.toRecoveryDetail()
|
|
|
+ }else {
|
|
|
+
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ toRecoveryDetail() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/packageGoods/recovery/detail'
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .settlement {
|
|
|
+ margin: 34rpx;
|
|
|
+ padding-bottom: 100rpx;
|
|
|
+
|
|
|
+ // 商品
|
|
|
+ &-goods {
|
|
|
+ margin-bottom: 34rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 22rpx;
|
|
|
+ box-shadow: 0px 0px 8px 0px rgba(26, 35, 113, 0.08);
|
|
|
+
|
|
|
+ // 商品列表
|
|
|
+ &-item {
|
|
|
+ display: flex;
|
|
|
+ padding: 34rpx 32rpx 34rpx 22rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 176rpx;
|
|
|
+ height: 176rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ margin-right: 22rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex: 1;
|
|
|
+ padding: 8rpx 0;
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-num {
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ &-sku {
|
|
|
+ flex: 1;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-goods {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 留言、运费
|
|
|
+ &-tip {
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin-bottom: 34rpx;
|
|
|
+ background-color: #EEEEEE;
|
|
|
+ padding: 34rpx;
|
|
|
+ border-radius: 22rpx;
|
|
|
+ color: #666666;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .numbtn {
|
|
|
+ margin: 0 50rpx;
|
|
|
+ border-top: #E5E5E5 2rpx solid;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 100rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-fixed {
|
|
|
+ position: fixed;
|
|
|
+ bottom: var(--window-bottom);
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 11;
|
|
|
+ box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
|
|
|
+ background: #fff;
|
|
|
+ // 设置ios刘海屏底部横线安全区域
|
|
|
+ padding-bottom: constant(safe-area-inset-bottom);
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
+
|
|
|
+ .content {
|
|
|
+ padding: 20rpx 0;
|
|
|
+ font-size: 30rpx;
|
|
|
+
|
|
|
+ // 不发货提示
|
|
|
+ &-not {
|
|
|
+ justify-content: flex-start;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #F9832E;
|
|
|
+ margin: 0 0 30rpx;
|
|
|
+ padding: 0 40rpx 24rpx;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 提交按钮
|
|
|
+ &-btn {
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 40rpx;
|
|
|
+
|
|
|
+ &-left {
|
|
|
+ .value {
|
|
|
+ color: #FF4208;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ .save {
|
|
|
+ width: 210rpx;
|
|
|
+ height: 82rpx;
|
|
|
+ line-height: 82rpx;
|
|
|
+ background: #F9822C;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .not {
|
|
|
+ background-color: #6c6c6c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
