You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
274 lines
8.4 KiB
274 lines
8.4 KiB
<template> |
|
<view class="body-background"></view> |
|
<view class="head-background"> |
|
<image mode="widthFix" :src="staticImage.bg" class="img" width="100%"/> |
|
</view> |
|
<u-navbar |
|
:title="title" |
|
:auto-back="true" |
|
left-icon-size="40rpx" |
|
:safe-area-inset-top="true" |
|
:placeholder="true" |
|
bgColor="transparent" |
|
></u-navbar> |
|
<view class="address-container"> |
|
<view class="cell row address-height" @click="navTo('/pages/Address/index?type=select')"> |
|
<view class="address-background"> |
|
<u-image mode="widthFix" class="img" :src="staticImage.addressBg" height="auto" width="100%"></u-image> |
|
</view> |
|
<view class="left"> |
|
<view class="icon"> |
|
<u-image mode="aspectFill" class="img" :src="staticImage.addressPosition" height="100" width="100"></u-image> |
|
</view> |
|
</view> |
|
<view class="right row col"> |
|
<view class="content no-address"> |
|
<view class="title row col" v-if="(address.address)"> |
|
<view class="name"> |
|
<u-text :text="address.name" color="#020B18" size="32" mode="name" lineHeight="50"></u-text> |
|
</view> |
|
<view class="phone"> |
|
<u-text :text="address.phone" color="#020B18" size="32" mode="phone" lineHeight="50"></u-text> |
|
</view> |
|
</view> |
|
<view class="title" v-else @click="navTo('/pages/Address/index?type=select')"> |
|
<u-text text="请选择收货地址" color="#020B18" size="32"></u-text> |
|
</view> |
|
<view class="desc" v-if="address?.address"> |
|
<u-text :text="address.area + address.address" color="#AFB5BE" size="28"></u-text> |
|
</view> |
|
</view> |
|
|
|
<view class="right-icon"> |
|
<u-icon name="arrow-right" size="32" color="#020B18"></u-icon> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="cell row order-info" :style="{height:size.height+'px'}"> |
|
<view class="cell-label col-12"> |
|
<u-text text="商品信息" color="#3D3D3D" size="32"></u-text> |
|
</view> |
|
<view class="cell-body row col-12"> |
|
<view class="left"> |
|
<view class="icon"> |
|
<u-image mode="aspectFill" class="img" :src="detail.info.image.url" height="180" width="180" radius="20"></u-image> |
|
</view> |
|
</view> |
|
<view class="right row col"> |
|
<view class="content no-address row"> |
|
<view class="title row col" v-if="true"> |
|
<u-text :text="detail.info.name" color="#020B18" size="32" lineHeight="42"></u-text> |
|
</view> |
|
<view class="title" v-else> |
|
<u-text text="请选择收货地址" color="#020B18" size="32"></u-text> |
|
</view> |
|
<view class="desc ext row"> |
|
<view class="item row"> |
|
<view class="label"> |
|
<u-text text="规格" color="#AFB5BE" size="28"></u-text> |
|
</view> |
|
<view class="value"> |
|
<u-text :text="detail.info.spec" color="#AFB5BE" size="28"></u-text> |
|
</view> |
|
</view> |
|
<view class="item row"> |
|
<view class="label"> |
|
<u-text text="数量" color="#AFB5BE" size="28"></u-text> |
|
</view> |
|
<view class="value"> |
|
<u-text :text="detail.number+'件'" color="#AFB5BE" size="28"></u-text> |
|
</view> |
|
</view> |
|
|
|
</view> |
|
</view> |
|
|
|
</view> |
|
</view> |
|
<view class="price-info-container row col-12"> |
|
<view class="label row col"> |
|
<view class="icon"> |
|
<u-image mode="aspectFill" class="img" :src="staticImage.addressPack" height="40" width="40" |
|
radius="20"></u-image> |
|
</view> |
|
<view class="title"> |
|
<u-text text="全暖新币兑换" color="#020B18" size="28" lineHeight="28"></u-text> |
|
</view> |
|
</view> |
|
<view class="price-container row col"> |
|
<view class="label"> |
|
<u-text text="暖新币" color="#020B18" size="28" lineHeight="35" custom-style="margin-right:30rpx;"></u-text> |
|
</view> |
|
<view class="price"> |
|
<u-text :text="detail.info.coin_number * detail.number" color="#FF9545" size="48" lineHeight="48"></u-text> |
|
</view> |
|
<view class="price-label"> |
|
<u-text text="币" color="#FF9545" size="28" lineHeight="35"></u-text> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="foot-button border-box"> |
|
<u-button |
|
type="primary" |
|
text="确认兑换" |
|
shape="circle" |
|
:custom-style="{ |
|
color:'#020B18', |
|
backgroundColor:'#FF9545', |
|
border:'none', |
|
fontSize:'36', |
|
fontWeight:'400', |
|
height:'80rpx' |
|
}" |
|
@click="submit" |
|
></u-button> |
|
</view> |
|
<u-modal :show="modalShow" :content="modalContent" @confirm="modalShow = false"></u-modal> |
|
|
|
</template> |
|
|
|
<script> |
|
import api from "@/utils/functions.js"; |
|
import {goodsDetail, roomDetail} from "@/api/shop"; |
|
import {imghost} from "@/config/host"; |
|
import {submitGoodsOrder, userAddrList} from "@/api/user"; |
|
|
|
export default { |
|
computed: {}, |
|
components: {}, |
|
data() { |
|
return { |
|
title: '订单确认', |
|
size: { |
|
height: 0 |
|
}, |
|
detail: { |
|
number: 1, |
|
spec: 0, |
|
info: {} |
|
}, |
|
address: {}, |
|
staticImage: { |
|
bg: imghost + '/BG.png', |
|
addressBg: imghost + '/order-address-bg.png', |
|
addressPack: imghost + '/order-address-pack.png', |
|
addressPosition: imghost + '/order-address-position.png', |
|
|
|
}, |
|
userInfo: {}, |
|
modalShow:false, |
|
modalContent:'', |
|
} |
|
}, |
|
onLoad(option) { |
|
this.detail = uni.getStorageSync('detailInfo'); |
|
console.log(this.detail) |
|
}, |
|
onReady() { |
|
let that = this; |
|
let height = api.wxSystemInfo().system.windowHeight |
|
let headerHeight = uni.$u.getPx(44) + uni.$u.sys().statusBarHeight |
|
|
|
let info = uni.createSelectorQuery().in(this); |
|
info.select('.foot-button').boundingClientRect(function (data) { |
|
|
|
}).exec(function (res) { |
|
}); |
|
info.select('.address-height').boundingClientRect(function (data) { |
|
|
|
}).exec(function (res) { |
|
let otherHeight = 0; |
|
res.forEach((item, index) => { |
|
otherHeight += item.height; |
|
}); |
|
that.size.height = height - headerHeight - otherHeight - uni.$u.getPx('72rpx'); |
|
}); |
|
}, |
|
methods: { |
|
navTo(url) { |
|
uni.navigateTo({ |
|
url: url |
|
}) |
|
}, |
|
|
|
getDetail(id) { |
|
goodsDetail({ |
|
goods_id: id |
|
}).then(res => { |
|
console.log(res.data) |
|
this.detail.name = res.data.name; |
|
this.detail.cover = res.data.image[0]; |
|
}); |
|
}, |
|
submit() { |
|
let data = { |
|
spec_id:'', |
|
address_id:'', |
|
number:'', |
|
}; |
|
data.spec_id = this.detail.info.id; |
|
data.number = this.detail.number; |
|
data.address_id = this.address.id; |
|
if(!data.address_id){ |
|
this.modalContent = '请选择地址'; |
|
return false; |
|
} |
|
submitGoodsOrder(data).then(res => { |
|
if(res.code === 200){ |
|
uni.getStorageSync('detailInfo'); |
|
this.navTo('/pages/Order/done?id='+res.data.goods_order_id); |
|
}else{ |
|
uni.$u.toast(res.msg) |
|
} |
|
}) |
|
}, |
|
getDefaultAddress() { |
|
let cacheAddress = uni.getStorageSync('address'); |
|
if (cacheAddress) { |
|
console.log('hasCacheAddress') |
|
console.log(cacheAddress) |
|
this.address = cacheAddress; |
|
} else { |
|
userAddrList({}).then(res => { |
|
res.data.forEach(item => { |
|
if (item.is_default === 1) { |
|
console.log('itemAddress') |
|
this.address = item; |
|
} |
|
}); |
|
}) |
|
console.log(this.address) |
|
} |
|
} |
|
}, |
|
onPageScroll(res) { |
|
|
|
}, |
|
created() { |
|
|
|
}, |
|
onShow() { |
|
this.getDefaultAddress() |
|
}, |
|
mounted() { |
|
this.getDefaultAddress(); |
|
this.userInfo = this.$store.userInfo |
|
if (!this.userInfo) { |
|
this.userInfo = uni.getStorageSync('user'); |
|
} |
|
|
|
console.log(this.userInfo) |
|
if (this.userInfo) { |
|
this.model.order.name = this.userInfo.name; |
|
this.model.order.id_card = this.userInfo.id_card; |
|
this.model.order.phone = this.userInfo.phone; |
|
} |
|
}, |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
@import './components/confirm.scss'; |
|
</style> |