502 lines
11 KiB
Vue
502 lines
11 KiB
Vue
<template>
|
|
<view class="flex-row relative page">
|
|
<image
|
|
class="image pos"
|
|
:src="good.url"
|
|
/>
|
|
<view class="flex-col section pos_2">
|
|
<view class="flex-row items-baseline self-stretch group">
|
|
<text class="text">{{good.price}}</text>
|
|
<text class="text_2">积分</text>
|
|
</view>
|
|
<text class="mt-10 self-start font text_3">{{good.name}}</text>
|
|
<text class="mt-10 self-start text_4">{{good.type}}</text>
|
|
<view class="mt-10 flex-row justify-between self-stretch group_2">
|
|
<view class="flex-row group_3">
|
|
<text class="font_2 text_6">创客实验室</text>
|
|
<text class="font_2 text_5">权益提供方-</text>
|
|
</view>
|
|
<view class="flex-row items-baseline group_4">
|
|
<text class="font_2 text_7">已兑换</text>
|
|
<text class="ml-4 font_2 text_8">{{good.sales}}</text>
|
|
<text class="ml-4 font_2 text_9">件</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col section_2 pos_3">
|
|
<view class="flex-row justify-between items-center" @click="jumpToChange">
|
|
<view class="flex-row items-baseline">
|
|
<text class="font_3">已选 :</text>
|
|
<text class="font text_10">{{good.name}},</text>
|
|
<text class="font text_11">{{changeCnt}}</text>
|
|
<text class="font">件</text>
|
|
</view>
|
|
<image
|
|
class="image_2"
|
|
:src="PointsMallImgUrl + 'payOrder/yjt.png'"
|
|
/>
|
|
</view>
|
|
<view class="flex-row justify-between items-center mt-27" @click="jumpToAddress">
|
|
<view class="flex-row">
|
|
<text class="font_3 text_12">送至 :</text>
|
|
<text class="ml-14 font_3 text_13">{{tempAddress}}</text>
|
|
</view>
|
|
<image
|
|
class="image_2"
|
|
:src="PointsMallImgUrl + 'payOrder/yjt.png'"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col section_3 pos_4">
|
|
<text class="self-start font text_14">商品详情</text>
|
|
<view class="mt-12 flex-col self-stretch group_5">
|
|
<text class="self-stretch font text_15">
|
|
{{good.detail}}
|
|
</text>
|
|
<image
|
|
mode="aspectFit"
|
|
class="shrink-0 self-center image_3"
|
|
:src="good.url"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col justify-start section_4 pos_5">
|
|
<view class="flex-row justify-center items-center button section_5" @click="cPop">
|
|
<text class="text_16">{{changePrice}}</text>
|
|
<text class="ml-4 font text_17">积分兑换</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<uni-popup ref="popup" background-color="#fff" @change="change">
|
|
<view class="popup-content">
|
|
<addressVue></addressVue>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<uni-popup ref="change" background-color="#fff" @change="change">
|
|
<view class="popup-content">
|
|
<changeVue :good="good"></changeVue>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<uni-popup ref="alertDialog" type="dialog">
|
|
<view class="pop">
|
|
<popupVue></popupVue>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<uni-popup ref="cAlertDialog" type="dialog">
|
|
<view class="pop">
|
|
<cPopupVue :changePrice="changePrice"></cPopupVue>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<uni-popup ref="success" type="dialog">
|
|
<view class="pop">
|
|
<changeSuccessVue></changeSuccessVue>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { DomainName, PointsMallImgUrl } from '../../../common/global';
|
|
import {onMounted, ref} from 'vue'
|
|
import addressVue from '../component/address.vue'
|
|
import emitter from '../../../utils/emitter'
|
|
import popupVue from '../component/popup.vue';
|
|
import changeVue from '../component/change.vue';
|
|
import cPopupVue from '../component/cPopup.vue';
|
|
import changeSuccessVue from '../component/changeSuccess.vue';
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
import { userInfoStore } from '../../../store/user';
|
|
const userStore = userInfoStore()
|
|
|
|
const good = ref([])
|
|
|
|
const changePrice = ref(0)
|
|
const changeCnt = ref(1)
|
|
|
|
const tempAddress = ref('请输入/选择地址')
|
|
|
|
const realAddress = ref('')
|
|
|
|
const addId = ref(0)
|
|
|
|
onLoad((options) => {
|
|
good.value = JSON.parse(options.good)
|
|
changePrice.value = good.value.price
|
|
console.log(good.value)
|
|
})
|
|
|
|
const getDefaultAddress = async () => {
|
|
const res = await uni.request({
|
|
url: DomainName + '/change/queryUserDefaultAddress',
|
|
method: 'GET',
|
|
data: {
|
|
id: userStore.user.id
|
|
}
|
|
})
|
|
if(res.data.data != null){
|
|
addId.value = res.data.data.id
|
|
realAddress.value = (res.data.data.region + ' ' + res.data.data.detailAddress).split('/').join('')
|
|
tempAddress.value = (res.data.data.region + ' ' + res.data.data.detailAddress).split('/').join('')
|
|
if(tempAddress.value.length > 14)
|
|
tempAddress.value = tempAddress.value.slice(0, 14) + '...'
|
|
}
|
|
|
|
}
|
|
|
|
|
|
const pointsChangeGoods = async () => {
|
|
if(tempAddress.value == '请输入/选择地址'){
|
|
uni.showToast({
|
|
title: '请选择地址',
|
|
icon: 'fail'
|
|
})
|
|
return ;
|
|
}
|
|
const res = await uni.request({
|
|
url: DomainName + '/change/pointsChangeGoods',
|
|
method: 'POST',
|
|
data: {
|
|
orderDate: getDate(),
|
|
goodId: good.value.id,
|
|
addressId: addId.value,
|
|
quantity: changeCnt.value,
|
|
userId: userStore.user.id
|
|
}
|
|
})
|
|
console.log(res)
|
|
if(res.data.code == '200'){
|
|
successPop()
|
|
}else{
|
|
uni.showToast({
|
|
title: '积分不足',
|
|
icon: 'fail'
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
emitter.on('open', () => {
|
|
open()
|
|
})
|
|
emitter.on('close', () => {
|
|
close()
|
|
})
|
|
emitter.on('pop', () => {
|
|
pop()
|
|
})
|
|
emitter.on('cClose', (obj:any) => {
|
|
cClose(obj)
|
|
})
|
|
emitter.on('cPopClose', () => {
|
|
cPopClose()
|
|
})
|
|
emitter.on('successPop', () => {
|
|
successPop()
|
|
})
|
|
emitter.on('popClose', () => {
|
|
popClose()
|
|
})
|
|
emitter.on('cPop', () => {
|
|
cPop()
|
|
})
|
|
|
|
emitter.on('changeGoods', () => {
|
|
pointsChangeGoods()
|
|
})
|
|
|
|
emitter.on('addId', (val:any) => {
|
|
addId.value = val
|
|
})
|
|
|
|
emitter.on('addAddressOrder', (val:any) => {
|
|
realAddress.value = val
|
|
tempAddress.value = val
|
|
if(tempAddress.value.length > 14)
|
|
tempAddress.value = tempAddress.value.slice(0, 14) + '...'
|
|
})
|
|
|
|
getDefaultAddress()
|
|
|
|
})
|
|
|
|
const jumpToAddress = () => {
|
|
open()
|
|
}
|
|
const popup = ref(null)
|
|
|
|
const open = () => {
|
|
popup.value.open('bottom')
|
|
}
|
|
const close = () => {
|
|
popup.value.close()
|
|
}
|
|
|
|
|
|
const jumpToChange = () => {
|
|
cOpen()
|
|
}
|
|
|
|
const change = ref(null)
|
|
const cOpen = () => {
|
|
change.value.open('bottom')
|
|
}
|
|
const cClose = (obj:any) => {
|
|
if(obj.confirm){
|
|
changePrice.value = obj.cnt * good.value.price
|
|
changeCnt.value = obj.cnt
|
|
}
|
|
change.value.close()
|
|
}
|
|
|
|
|
|
|
|
const alertDialog = ref(null)
|
|
const cAlertDialog = ref(null)
|
|
const success = ref(null)
|
|
|
|
const successPop = () => {
|
|
success.value.open()
|
|
}
|
|
|
|
const pop = () => {
|
|
alertDialog.value.open()
|
|
}
|
|
|
|
const popClose = () => {
|
|
alertDialog.value.close()
|
|
}
|
|
|
|
const cPop = () => {
|
|
cAlertDialog.value.open()
|
|
}
|
|
|
|
const cPopClose = () => {
|
|
cAlertDialog.value.close()
|
|
}
|
|
|
|
const getDate = () => {
|
|
let now = new Date()
|
|
let year = now.getFullYear()
|
|
let month = (now.getMonth() + 1).toString().padStart(2, 0)
|
|
let date = now.getDate().toString().padStart(2, 0)
|
|
return year + '-' + month + '-' + date
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.pop{
|
|
height: 500rpx;
|
|
}
|
|
|
|
.popup-content {
|
|
height: 392px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 30rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.section, .section_2, .section_3{
|
|
margin-top: 50rpx;
|
|
}
|
|
.mt-27 {
|
|
margin-top: 63.28rpx;
|
|
}
|
|
.page {
|
|
padding: 614.06rpx 37.5rpx 173.44rpx;
|
|
background-color: #f3f3f6;
|
|
mix-blend-mode: LUMINOSITY;
|
|
height: 2135.16rpx;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
.image {
|
|
width: 100vw;
|
|
height: 81.875vw;
|
|
}
|
|
.pos {
|
|
position: absolute;
|
|
left: 0;
|
|
right: -2.34rpx;
|
|
top: 0;
|
|
}
|
|
.section {
|
|
padding-top: 37.5rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 23.44rpx;
|
|
.group {
|
|
padding: 0 37.5rpx;
|
|
.text {
|
|
color: #00ba9c;
|
|
font-size: 56.25rpx;
|
|
font-family: Times New Roman;
|
|
font-weight: 700;
|
|
line-height: 38.79rpx;
|
|
}
|
|
.text_2 {
|
|
color: #00ba9c;
|
|
font-size: 30.47rpx;
|
|
font-family: Rockwell Condensed;
|
|
line-height: 27.91rpx;
|
|
}
|
|
}
|
|
.text_3 {
|
|
margin-left: 28.13rpx;
|
|
line-height: 34.64rpx;
|
|
}
|
|
.text_4 {
|
|
margin-left: 28.13rpx;
|
|
color: #454e6c;
|
|
font-size: 32.81rpx;
|
|
font-family: Open Sans;
|
|
line-height: 30.33rpx;
|
|
}
|
|
.group_2 {
|
|
padding: 37.5rpx 18.75rpx;
|
|
border-top: solid 2.34rpx #e5e5e5;
|
|
.group_3 {
|
|
width: 295.29rpx;
|
|
margin-top: 0;
|
|
.text_6 {
|
|
margin-left: 150rpx;
|
|
color: #000000;
|
|
}
|
|
.text_5 {
|
|
margin-left: -295.31rpx;
|
|
}
|
|
}
|
|
.group_4 {
|
|
margin-right: 9.38rpx;
|
|
.text_7 {
|
|
line-height: 25.97rpx;
|
|
}
|
|
.text_8 {
|
|
line-height: 20.67rpx;
|
|
}
|
|
.text_9 {
|
|
line-height: 25.76rpx;
|
|
}
|
|
}
|
|
.font_2 {
|
|
font-size: 28.13rpx;
|
|
font-family: Open Sans;
|
|
line-height: 26.04rpx;
|
|
color: #454e6c;
|
|
}
|
|
}
|
|
}
|
|
.pos_2 {
|
|
position: absolute;
|
|
left: 37.5rpx;
|
|
right: 35.16rpx;
|
|
top: 614.06rpx;
|
|
}
|
|
.section_2 {
|
|
padding: 28.13rpx 23.44rpx 32.81rpx 32.81rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 23.44rpx;
|
|
.font_3 {
|
|
font-size: 30.5rpx;
|
|
font-family: Open Sans;
|
|
line-height: 34.36rpx;
|
|
color: #9ca1b1;
|
|
}
|
|
.text_10 {
|
|
margin-left: 23.44rpx;
|
|
line-height: 36.49rpx;
|
|
}
|
|
.text_11 {
|
|
margin-left: 9.38rpx;
|
|
line-height: 27.16rpx;
|
|
}
|
|
.image_2 {
|
|
width: 30.47rpx;
|
|
height: 30.47rpx;
|
|
}
|
|
.text_12 {
|
|
line-height: 34.2rpx;
|
|
}
|
|
.text_13 {
|
|
line-height: 34.69rpx;
|
|
}
|
|
}
|
|
.pos_3 {
|
|
position: absolute;
|
|
left: 37.5rpx;
|
|
right: 35.16rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.font {
|
|
// font-size: 37.5rpx;
|
|
font-family: Open Sans;
|
|
line-height: 34.36rpx;
|
|
color: #000000;
|
|
}
|
|
.section_3 {
|
|
padding: 37.5rpx 37.5rpx 42.19rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 23.44rpx;
|
|
.text_14 {
|
|
line-height: 34.62rpx;
|
|
}
|
|
.group_5 {
|
|
margin-right: 14.06rpx;
|
|
.text_15 {
|
|
line-height: 46.88rpx;
|
|
word-break: break-all;
|
|
}
|
|
.image_3 {
|
|
margin-top: -9.38rpx;
|
|
width: 349.22rpx;
|
|
height: 339.84rpx;
|
|
}
|
|
}
|
|
}
|
|
.pos_4 {
|
|
position: absolute;
|
|
left: 37.5rpx;
|
|
right: 35.16rpx;
|
|
top: 1200rpx;
|
|
}
|
|
.section_4 {
|
|
padding: 25.78rpx 0 39.84rpx;
|
|
background-color: #ffffff;
|
|
.button {
|
|
margin: 0 46.88rpx;
|
|
.text_16 {
|
|
color: #ffffff;
|
|
font-size: 37.5rpx;
|
|
font-family: Times New Roman;
|
|
font-weight: 700;
|
|
line-height: 25.85rpx;
|
|
}
|
|
.text_17 {
|
|
color: #ffffff;
|
|
font-weight: 700;
|
|
line-height: 35.55rpx;
|
|
}
|
|
}
|
|
.section_5 {
|
|
padding: 23.44rpx 0;
|
|
background-color: #00ba9c;
|
|
border-radius: 117.19rpx;
|
|
}
|
|
}
|
|
.pos_5 {
|
|
position: fixed;
|
|
left: 0;
|
|
right: -2.34rpx;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
@import url('../css/global2.css');
|
|
|
|
</style>
|