|
@@ -1,184 +1,301 @@
|
|
|
<template>
|
|
|
<zj-page-layout :hasFooter="true">
|
|
|
- <view class="address-container" @tap="$navPage(`/pages/mine/address/list?isChoose=1`)">
|
|
|
- <view class="left">
|
|
|
- <view class="icon"><text class="iconfont icon-dingwei1"></text></view>
|
|
|
- <view class="nodata" v-if="!hasAddress">选择收货地址</view>
|
|
|
- <view class="hasdata" v-else>
|
|
|
- <view class="name">{{addressInfo.name}}<text>{{addressInfo.phone}}</text></view>
|
|
|
- <view class="address ellipsis-2">{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.area}}{{addressInfo.street}}{{addressInfo.address}}{{addressInfo.houseNo}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <text class="right iconfont icon-jinru"></text>
|
|
|
+ <view class="address-container" @tap="goAddress">
|
|
|
+ <view class="left">
|
|
|
+ <view class="icon"><text class="iconfont icon-dingwei1"></text></view>
|
|
|
+ <view class="nodata" v-if="!hasAddress">选择收货地址</view>
|
|
|
+ <view class="hasdata" v-else>
|
|
|
+ <view class="name">{{addressInfo.name}}<text>{{addressInfo.phone}}</text></view>
|
|
|
+ <view class="address ellipsis-2">
|
|
|
+ {{addressInfo.province}}{{addressInfo.city}}{{addressInfo.area}}{{addressInfo.street}}{{addressInfo.address}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <text class="right iconfont icon-jinru"></text>
|
|
|
</view>
|
|
|
|
|
|
<view class="goods-container">
|
|
|
<view class="goods">
|
|
|
- <image src="@/static/user/other_book.png"></image>
|
|
|
+ <image v-if="goodsDetail.goodsPicUrl" :src="imageUrl + goodsDetail.goodsPicUrl||''"></image>
|
|
|
<view class="main">
|
|
|
- <view class="name">商品名称</view>
|
|
|
- <view class="des">商品描述</view>
|
|
|
+ <view class="name">{{goodsDetail.title||''}}</view>
|
|
|
+ <view class="des">{{goodsDetail.content||''}}</view>
|
|
|
<view class="bottom">
|
|
|
- <view class="price">¥1200.00</view>
|
|
|
- <u-number-box
|
|
|
- @tap.stop
|
|
|
- v-model="num"
|
|
|
- :min="1"
|
|
|
- :buttonSize="26"
|
|
|
- iconStyle="font-size: 12px;"
|
|
|
- :disabled="!hasAddress"
|
|
|
- @change="changeCount($event, index)">
|
|
|
- </u-number-box>
|
|
|
+ <view class="price">¥{{goodsDetail.amount||''}}</view>
|
|
|
+ <!-- <u-number-box @tap.stop v-model="num" :min="1" :buttonSize="26" iconStyle="font-size: 12px;"
|
|
|
+ :disabled="!hasAddress" @change="changeCount($event, index)">
|
|
|
+ </u-number-box> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="total">订单总金额<text>¥1200.00</text></view>
|
|
|
+ <view class="total">订单总金额<text>¥{{goodsDetail.amount||''}}</text></view>
|
|
|
</view>
|
|
|
-
|
|
|
<template slot="footer">
|
|
|
<view class="bottom-container">
|
|
|
- <view class="left">
|
|
|
- 实付款:<text>¥1200.00</text>
|
|
|
- </view>
|
|
|
- <u-button type="primary" text="提交订单" @click="submitOrder"></u-button>
|
|
|
+ <view class="left">
|
|
|
+ 实付款:<text>¥{{goodsDetail.amount||''}}</text>
|
|
|
+ </view>
|
|
|
+ <u-button type="primary" :disabled="!hasAddress" text="提交订单" @click="submitOrder"></u-button>
|
|
|
</view>
|
|
|
</template>
|
|
|
-
|
|
|
</zj-page-layout>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import api from '@/common/http/'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ imageUrl: this.$imageUrl,
|
|
|
+ addressInfo: {},
|
|
|
+ hasAddress: false,
|
|
|
+ pam: {},
|
|
|
+ goodsDetail: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(pam) {
|
|
|
+ this.pam = pam
|
|
|
+ this.getGoods()
|
|
|
+ uni.$on("chooseAddress", (data) => {
|
|
|
+ this.hasAddress = true
|
|
|
+ this.addressInfo = data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+ uni.$off("chooseAddress")
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ submitOrder() {
|
|
|
+ api.post('/orderPay/buy', {
|
|
|
+ goodsId: this.pam.id,
|
|
|
+ userAddress: this.addressInfo
|
|
|
+ }, false).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ uni.requestPayment({
|
|
|
+ provider: 'wxpay',
|
|
|
+ timeStamp: res.data.timeStamp,
|
|
|
+ nonceStr: res.data.nonceStr,
|
|
|
+ package: res.data.package,
|
|
|
+ signType: res.data.signType,
|
|
|
+ paySign: res.data.paySign,
|
|
|
+ success: () => {
|
|
|
+ uni.showModal({
|
|
|
+ title: '支付查询',
|
|
|
+ content: '等待支付结果,或直接去订单管理',
|
|
|
+ showCancel: false,
|
|
|
+ confirmText: "订单管理",
|
|
|
+ success: function() {
|
|
|
+ if (this.timeId) {
|
|
|
+ clearTimeout(this.timeId)
|
|
|
+ }
|
|
|
+ this.$navToPage({
|
|
|
+ url: '/pages/mine/myBuy/list'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ var getList = () => {
|
|
|
+ if (this.timeId) {
|
|
|
+ clearTimeout(this.timeId)
|
|
|
+ }
|
|
|
+ api.postJson('/orderPay/detail', {
|
|
|
+ orderId: res.data.id,
|
|
|
+ }, false).then(res2 => {
|
|
|
+ if (res2.data.payStatus === "WAIT") {
|
|
|
+ if (this.timeId) {
|
|
|
+ clearTimeout(this.timeId)
|
|
|
+ }
|
|
|
+ this.$navToPage({
|
|
|
+ url: '/pages/mine/myBuy/list'
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.timeId = setTimeout(getList, 1000)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ getList()
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+
|
|
|
+ },
|
|
|
+ complete: () => {
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getGoods() {
|
|
|
+ if (!this.pam.id) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ api.postJson('/goods/detail', {
|
|
|
+ id: this.pam.id,
|
|
|
+ }, false).then(res => {
|
|
|
+ console.log(res.data)
|
|
|
+ this.goodsDetail = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goAddress(item) {
|
|
|
+ this.$navToPage({
|
|
|
+ url: '/pages/mine/address/list?isChoose=1'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.address-container {
|
|
|
- background: #FFFFFF;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- height: 150rpx;
|
|
|
- padding: 0 20rpx;
|
|
|
- margin-top: 30rpx;
|
|
|
- .right {
|
|
|
- font-size: 36rpx;
|
|
|
- flex-shrink: 0;
|
|
|
- color: $sec-font;
|
|
|
- }
|
|
|
- .left {
|
|
|
+ .address-container {
|
|
|
+ background: #FFFFFF;
|
|
|
display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- margin-right: 20rpx;
|
|
|
- .icon {
|
|
|
- width: 52rpx;
|
|
|
- height: 52rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background: $theme-color;
|
|
|
- display: flex;
|
|
|
+ height: 150rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
+
|
|
|
+ .right {
|
|
|
+ font-size: 36rpx;
|
|
|
flex-shrink: 0;
|
|
|
- justify-content: center;
|
|
|
+ color: $sec-font;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
align-items: center;
|
|
|
margin-right: 20rpx;
|
|
|
- .iconfont {
|
|
|
- font-size: 36rpx;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
- .nodata {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- .hasdata {
|
|
|
- .name {
|
|
|
- font-size: 32rpx;
|
|
|
- color: #333333;
|
|
|
- text {
|
|
|
- color: #999999;
|
|
|
- font-size: 28rpx;
|
|
|
- margin-left: 16rpx;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 52rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: $theme-color;
|
|
|
+ display: flex;
|
|
|
+ flex-shrink: 0;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 20rpx;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
- .address {
|
|
|
+
|
|
|
+ .nodata {
|
|
|
font-size: 28rpx;
|
|
|
- color: #666666;
|
|
|
- line-height: 34rpx;
|
|
|
- margin-top: 10rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hasdata {
|
|
|
+ .name {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .address {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 34rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.goods-container {
|
|
|
- background: #ffffff;
|
|
|
- margin-top: 30rpx;
|
|
|
- padding: 0 30rpx;
|
|
|
- .goods {
|
|
|
- display: flex;
|
|
|
- padding: 30rpx 0;
|
|
|
- image {
|
|
|
- width: 120rpx;
|
|
|
- height: 120rpx;
|
|
|
- }
|
|
|
- .main {
|
|
|
- flex: 1;
|
|
|
- margin-left: 20rpx;
|
|
|
- .name {
|
|
|
- font-size: 32rpx;
|
|
|
+ .goods-container {
|
|
|
+ background: #ffffff;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+
|
|
|
+ .goods {
|
|
|
+ display: flex;
|
|
|
+ padding: 30rpx 0;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
}
|
|
|
- .des {
|
|
|
- margin-top: 12rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: $reg-font;
|
|
|
+
|
|
|
+ .main {
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 20rpx;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .des {
|
|
|
+ margin-top: 12rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: $reg-font;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 12rpx;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ color: $assist-color;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .u-number-box {
|
|
|
+
|
|
|
+ .u-number-box__minus,
|
|
|
+ .u-number-box__plus {
|
|
|
+ width: 26px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .bottom {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-top: 12rpx;
|
|
|
- .price {
|
|
|
- color: $assist-color;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 32rpx;
|
|
|
- text {
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- ::v-deep .u-number-box {
|
|
|
- .u-number-box__minus, .u-number-box__plus {
|
|
|
- width: 26px;
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ .total {
|
|
|
+ border-top: 1px solid #eaeaea;
|
|
|
+ height: 80rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: end;
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ margin-left: 12rpx;
|
|
|
+ color: $assist-color;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .total {
|
|
|
- border-top: 1px solid #eaeaea;
|
|
|
- height: 80rpx;
|
|
|
+
|
|
|
+ .bottom-container {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: end;
|
|
|
- font-size: 28rpx;
|
|
|
- text {
|
|
|
- margin-left: 12rpx;
|
|
|
- color: $assist-color;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: $assist-color;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.bottom-container {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 20rpx 30rpx;
|
|
|
- .left {
|
|
|
- flex-shrink: 0;
|
|
|
- font-size: 28rpx;
|
|
|
- text {
|
|
|
- color: $assist-color;
|
|
|
+
|
|
|
+ ::v-deep .u-button {
|
|
|
+ width: 180rpx;
|
|
|
+ margin: 0;
|
|
|
}
|
|
|
}
|
|
|
- ::v-deep .u-button {
|
|
|
- width: 180rpx;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+</style>
|