302 lines
7.2 KiB
Vue
302 lines
7.2 KiB
Vue
<template>
|
||
<view class="page-content">
|
||
<nut-cell-group>
|
||
<nut-cell v-if="!form.address_info?.address_id" title="添加地址" is-link @click="chooseAddress"></nut-cell>
|
||
<nut-cell v-else :title="form.address_info.user_name + ' ' + form.address_info.tel_number" is-link
|
||
:sub-title="
|
||
form.address_info.province_name +
|
||
form.address_info.city_name +
|
||
form.address_info.county_name +
|
||
form.address_info.street_name +
|
||
form.address_info.detail_info_new
|
||
" @click="chooseAddress"></nut-cell>
|
||
</nut-cell-group>
|
||
|
||
<nut-cell-group>
|
||
<nut-cell v-for="(goods, index) in list" :key="index" center>
|
||
<!-- :title="item.goods_name"
|
||
:sub-title="'串号：' + item.goods_no" -->
|
||
<!-- @click="navigateTo('/pages/order/detail/index?id=' + order.order_id)" -->
|
||
|
||
<template #title>
|
||
<view class="goods-info-row">
|
||
<!-- 左侧文字区域 -->
|
||
<view class="left-text">
|
||
<view class="goods-name">
|
||
<nut-tag custom-color="#1a1a1a">{{ goods.degree.degree_name }}</nut-tag>
|
||
<text style="margin-left: 10rpx">{{ goods.goods_name }}</text>
|
||
</view>
|
||
<text class="goods-no">串号：{{ goods.goods_no }}</text>
|
||
</view>
|
||
<!-- 右侧价格区域 -->
|
||
</view>
|
||
</template>
|
||
<template #link>
|
||
<!-- <view class="price"> -->
|
||
<nut-price :price="goods.goods_price" size="small" :need-symbol="true" />
|
||
<!-- </view> -->
|
||
</template>
|
||
|
||
<!-- <view class="goods-item" @click="navigateTo('/pages/mall/item/index?id=' + item.goods_id)">
|
||
<view class="goods-item-left-inner">
|
||
<view class="goods-item-left-inner-top">
|
||
<image class="goods-item-left-inner-top-package" src="@/static/package.svg"></image>
|
||
<text class="goods-item-left-inner-title">{{item.goods_name}}</text>
|
||
</view>
|
||
<view>
|
||
<text>
|
||
{{item.content}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="goods-item-right-inner">
|
||
<text class="goods-item-right-inner-price-unit">￥</text>
|
||
<text class="goods-item-right-inner-price-value">{{item.goods_price}}</text>
|
||
</view>
|
||
</view> -->
|
||
</nut-cell>
|
||
</nut-cell-group>
|
||
|
||
<nut-cell-group>
|
||
<nut-cell>
|
||
<view class="total-price-inner">
|
||
<text>件数</text>
|
||
<text>{{ order_total_num }}件</text>
|
||
</view>
|
||
</nut-cell>
|
||
<nut-cell>
|
||
<view class="total-price-inner">
|
||
<text>商品总额</text>
|
||
<nut-price :price="order_total_price" :need-symbol="true" />
|
||
</view>
|
||
</nut-cell>
|
||
<!-- <nut-cell>
|
||
<view class="total-price-inner">
|
||
<view>
|
||
<text>邮费</text>
|
||
</view>
|
||
<view>
|
||
<text>￥</text>
|
||
<text>888</text>
|
||
</view>
|
||
</view>
|
||
</nut-cell> -->
|
||
</nut-cell-group>
|
||
|
||
<!-- <view class="bottom-submit-inner">
|
||
<view class="bottom-submit-inner-info">
|
||
<text>共计{{order_total_num}}件商品，合计：</text>
|
||
<text>￥</text>
|
||
<text>{{order_total_price}}</text>
|
||
</view>
|
||
<view class="bottom-submit-inner-btn">
|
||
<nut-button type="primary" @click="onSubmitClick">确认下单</nut-button>
|
||
</view>
|
||
</view> -->
|
||
|
||
<view class="bottom-submit-inner">
|
||
<view class="bottom-submit-inner-info">
|
||
<text>合计:</text>
|
||
<nut-price size="large" :price="order_total_price" :need-symbol="true" />
|
||
</view>
|
||
<view class="bottom-submit-inner-btn">
|
||
<nut-button type="primary" @click="onSubmitClick">确认下单</nut-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
|
||
import {
|
||
onLoad,
|
||
onShow,
|
||
onHide
|
||
} from '@dcloudio/uni-app';
|
||
import {
|
||
reactive,
|
||
ref
|
||
} from 'vue';
|
||
import {
|
||
fetchOrderbuyNow,
|
||
fetchOrderPreview
|
||
} from '@/api/order';
|
||
import {
|
||
navigateTo
|
||
} from '@/utils/helper';
|
||
|
||
|
||
|
||
|
||
const chooseAddress = () => {
|
||
uni.chooseAddress({
|
||
success(res) {
|
||
// console.log(res.userName)
|
||
// console.log(res.telNumber)
|
||
// console.log(res.provinceName + res.cityName + res.countyName + res.streetName + res.detailInfoNew)
|
||
// console.log(res.userName)
|
||
// console.log(res.postalCode)
|
||
// console.log(res.provinceName)
|
||
// console.log(res.cityName)
|
||
// console.log(res.countyName)
|
||
// console.log(res.detailInfo)
|
||
// console.log(res.nationalCode)
|
||
// console.log(res.telNumber)
|
||
console.log(res);
|
||
Object.assign(form, {
|
||
address_info: {
|
||
address_id: res.addressID || 1,
|
||
user_name: res.userName,
|
||
tel_number: res.telNumber,
|
||
city_name: res.cityName || '',
|
||
county_name: res.countyName || '',
|
||
detail_info: res.detailInfo || '',
|
||
detail_info_new: res.detailInfoNew || '',
|
||
national_code: res.nationalCode || '',
|
||
national_code_full: res.nationalCodeFull || '',
|
||
postal_code: res.postalCode || '',
|
||
province_name: res.provinceName || '',
|
||
street_name: res.streetName || '',
|
||
},
|
||
});
|
||
},
|
||
});
|
||
};
|
||
|
||
|
||
|
||
|
||
const ids = ref([]);
|
||
const list = reactive([]);
|
||
const order_total_price = ref(0);
|
||
const order_total_num = ref(0);
|
||
|
||
|
||
const form = reactive({
|
||
goods_id: 0,
|
||
address_info: {},
|
||
});
|
||
|
||
|
||
const fromStr = ref('');
|
||
|
||
|
||
|
||
onLoad(options => {
|
||
console.log('🚀 ~ from:', options.from);
|
||
fromStr.value = options.from;
|
||
console.log('🚀 ~ ids:', options.ids);
|
||
form.goods_id = options.ids;
|
||
});
|
||
|
||
|
||
|
||
|
||
onShow(() => {
|
||
console.log('🚀 ~ onShowfrom:', fromStr.value);
|
||
if (fromStr.value === 'list' || fromStr.value === 'item') {
|
||
fetchOrderPreview(form).then(res => {
|
||
Object.assign(list, res.goods_list);
|
||
Object.assign(form.address_info, res.address_info);
|
||
order_total_price.value = res.order_total_price;
|
||
order_total_num.value = res.order_total_num;
|
||
});
|
||
}
|
||
});
|
||
|
||
onHide(() => {
|
||
fromStr.value = '';
|
||
});
|
||
|
||
|
||
|
||
// 提交订单
|
||
const onSubmitClick = () => {
|
||
if (!form.address_info?.address_id) {
|
||
uni.showToast({
|
||
title: '请选择收货地址',
|
||
icon: 'none',
|
||
});
|
||
return;
|
||
}
|
||
fetchOrderbuyNow(form).then(res => {
|
||
console.log(res);
|
||
uni.redirectTo({
|
||
url: '/pages/order/detail?id=' + res.order_id,
|
||
success: res => {},
|
||
fail: () => {},
|
||
complete: () => {},
|
||
});
|
||
// navigateTo('/pages/order/detail/index?id=' + res.order_id)
|
||
});
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.page-content {
|
||
// min-height: 100vh;
|
||
min-height: calc(100vh - 60px); //100vh;
|
||
background-color: #f2f3f5;
|
||
padding: 20rpx;
|
||
padding-bottom: 140rpx;
|
||
}
|
||
|
||
/* 信息行布局 */
|
||
.goods-info-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-bottom: 10rpx;
|
||
// border-bottom: 2rpx solid #f2f3f5;
|
||
|
||
/* 左侧文字样式 */
|
||
.left-text {
|
||
flex: 1;
|
||
}
|
||
|
||
.goods-name {
|
||
font-size: 30rpx;
|
||
color: #000000;
|
||
display: block;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.goods-no {
|
||
font-size: 26rpx;
|
||
color: #000000;
|
||
display: block;
|
||
}
|
||
|
||
/* 右侧价格样式 */
|
||
.price {
|
||
margin-left: 20rpx;
|
||
align-self: center;
|
||
/* 垂直居中在两行文字之间 */
|
||
}
|
||
}
|
||
|
||
.bottom-submit-inner {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 120rpx;
|
||
background: #fff;
|
||
width: calc(100% - 40rpx);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 0 auto;
|
||
padding: 15rpx 20rpx;
|
||
}
|
||
|
||
.total-price-inner {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
view:nth-child(2) {
|
||
color: #fa2c19;
|
||
}
|
||
}
|
||
</style>
|