364 lines
9.6 KiB
Vue
364 lines
9.6 KiB
Vue
<template>
|
||
<!-- 确认订单 页面 -->
|
||
<view class="content">
|
||
<HeaderTop page_title='确认订单'></HeaderTop>
|
||
<view class="detail bg_F2F2F2">
|
||
<view class="x-bg-white margin-bottom22">
|
||
<!-- 传参地址 -->
|
||
<view class="padding-30" v-if="option_address!==''">
|
||
<view class="goods_info d-flex j-sb w-50">
|
||
<view class="font_28">{{address.consignee}}</view>
|
||
<view class="">{{address.tel}}</view>
|
||
</view>
|
||
<view class="goods_info d-flex j-sb a-center" @click="to_addAdress()">
|
||
<view class="font_28 w-90">
|
||
{{address.address}}</view>
|
||
<image src="../../static/shoppingCart/right.png" mode="" class="p_right"></image>
|
||
</view>
|
||
</view>
|
||
<!-- 接口地址 -->
|
||
<view class="padding-30" v-if="address!='' && option_address==''">
|
||
<view class="goods_info d-flex j-sb w-50">
|
||
<view class="font_28">{{address.consignee}}</view>
|
||
<view class="">{{address.tel}}</view>
|
||
</view>
|
||
<view class="goods_info d-flex j-sb a-center" @click="to_addAdress()">
|
||
<view class="font_28 w-90">
|
||
{{address.address}}</view>
|
||
<image src="../../static/shoppingCart/right.png" mode="" class="p_right"></image>
|
||
</view>
|
||
</view>
|
||
<!-- 没有地址 -->
|
||
<view class="padding-30" v-if="(address.address=='' || address.address==null) && option_address==''">
|
||
<view class="goods_info d-flex j-sb a-center" @click="to_addAdress()">
|
||
<view class="font_28 w-90">
|
||
暂无地址</view>
|
||
<image src="../../static/shoppingCart/right.png" mode="" class="p_right"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="list x-bg-white margin-bottom22 padding-sx30">
|
||
<view class="list_items" v-if='goods_list' v-for="(item,index) in goods_list" :key="item.index">
|
||
<view class=" d-flex a-center">
|
||
<view class="d-flex goods_items a-center w-100">
|
||
<view class="shixiao" v-if='item.is_buy==0'>失效</view>
|
||
<view class="box_img">
|
||
<image :src="item.app_thumb" mode="" class="h-100 w-100"></image>
|
||
|
||
</view>
|
||
<view class="goods_txt flex-1 padding-zy30">
|
||
<view class="font-weight">{{item.goods_name}}</view>
|
||
<view class="">{{item.manufacturer_name}}</view>
|
||
<view class="">{{item.spec_desc}} {{item.unit}}</view>
|
||
<view class="d-flex j-sb">
|
||
<view class="x-text-159">￥ {{item.unit_price}}</view>
|
||
<view class="">X {{item.goods_number}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="list_items" v-for="(item,index) in extend" :key="item.index">
|
||
<view class=" d-flex a-center">
|
||
<view class="d-flex goods_items a-center w-100">
|
||
<view class="shixiao" v-if='item.is_buy==0'>失效</view>
|
||
<view class="box_img">
|
||
<image :src="item.app_thumb" mode="" class="h-100 w-100"></image>
|
||
|
||
</view>
|
||
<view class="goods_txt flex-1 padding-zy30">
|
||
<view class="font-weight">{{item.goods_name}}</view>
|
||
<view class="">{{item.manufacturer_name}}</view>
|
||
<view class="">{{item.spec_desc}} {{item.unit}}</view>
|
||
<view class="d-flex j-sb">
|
||
<view class="x-text-159">￥ {{item.unit_price}}</view>
|
||
<view class="">X {{item.goods_number}}</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bg-white margin-bottom22 padding-30">
|
||
<view class="d-flex j-sb">
|
||
<view>商品总额</view>
|
||
<view class="x-text-159">￥ {{list.goods_amount}}</view>
|
||
</view>
|
||
<view class="d-flex j-sb">
|
||
<view>运费</view>
|
||
<view class="x-text-159">￥ {{list.shipping_fee}}</view>
|
||
</view>
|
||
<view class="d-flex j-sb">
|
||
<view class="x_text_hui" style="margin-bottom: 30upx;">{{list.shipping_fee_text}}</view>
|
||
</view>
|
||
<view class="d-flex j-sb a-center ">
|
||
<view class="">订单备注</view>
|
||
<input type="text" value="" class="the_remarks flex-1" v-model="remark" placeholder="如有其他备注内容，请在此填写"/>
|
||
<!-- <textarea placeholder-style="color:#989898" placeholder="如有其他备注内容，请在此填写" v-model="remark"class="the_remarks" /> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom_menu shadow d-flex">
|
||
<view class="flex-1 x_textRight padding-zy30">
|
||
<text class="x_text_hui">共{{list.total_number}}件,</text>
|
||
<text class="x_text_hei2828 margin-zy20 font-weight" @click="shishi" >合计:</text>
|
||
<text class="x-text-159">￥ {{list.total_amount}}</text>
|
||
</view>
|
||
<view class="buy sameBtn x-text-white text-center" v-if="list.is_buy==0" style="background-color: #a9a1a1;">提交订单</view>
|
||
<view class="buy sameBtn x-text-white text-center" v-if="list.is_buy!==0" @click="submitOrder()">提交订单</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import store from '@/store/index.js'
|
||
// import Vuex from "vuex"
|
||
import X_goods from '../../utils/models/goods.js'
|
||
import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
|
||
export default {
|
||
data() {
|
||
return {
|
||
goods_num: 10, // 商品的当前数量
|
||
Stock: 100, //当前商品的总库存
|
||
sales_type: 10, //销售类型
|
||
is_collection: false, //判断是否收藏商品 是:true ; 否:false
|
||
is_pop_show: false, // 判断购物车遮挡层的状态 显示:true ; 隐藏:false
|
||
Which_one: '', //判断用户点击了哪一个按钮 1：加入购物车； 2：立即购买
|
||
car_GoodsNum: 0 ,//购物车的商品数量
|
||
goods_id:'', // 购物车ID（传过来的参数）
|
||
address:'',
|
||
goods_list:'',
|
||
extend:'',
|
||
list:'',
|
||
remark:'' ,//备注
|
||
option_address:'', //从地址列表页传参
|
||
goods_ids:'' // 订单id的集合
|
||
}
|
||
},
|
||
comments: {
|
||
HeaderTop
|
||
},
|
||
created() {
|
||
|
||
},
|
||
onShow() {
|
||
this.sure_order()
|
||
},
|
||
onLoad(option) {
|
||
|
||
this.goods_id = option.goods_id
|
||
|
||
if(option.address){
|
||
this.option_address = option.address
|
||
|
||
|
||
}else{
|
||
this.address = ''
|
||
}
|
||
|
||
|
||
},
|
||
|
||
methods: {
|
||
//添加收货地址
|
||
goodid(){
|
||
this.$store.commit('goodid',this.goods_id)
|
||
},
|
||
to_addAdress(){
|
||
this.goodid();
|
||
uni.redirectTo({
|
||
url:'../my/user-path-list?goods_id='+this.goods_id
|
||
})
|
||
},
|
||
|
||
// shishi(){
|
||
// console.log(this.$store.state.goods_id)
|
||
// },
|
||
//确认订单 X_orderPreview
|
||
async sure_order() {
|
||
this.goods_id = this.$store.state.goods_id
|
||
let res = await X_goods.X_orderPreview(this.goods_id)
|
||
this.handleError(res, res => {
|
||
|
||
if(res.data.address){
|
||
|
||
if(this.option_address){
|
||
|
||
this.address = JSON.parse(this.option_address)
|
||
}else{
|
||
|
||
this.address = res.data.address
|
||
}
|
||
}
|
||
|
||
this.goods_list = res.data.goods_list.plat
|
||
this.extend = res.data.goods_list.extend
|
||
this.list = res.data
|
||
if(!this.address){
|
||
uni.showToast({
|
||
title: '请选择收货地址',
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
})
|
||
},
|
||
//提交订单 (创建订单)
|
||
async submitOrder(){
|
||
this.goodid();
|
||
if(this.list.is_buy==1){
|
||
this.goods_ids = ''
|
||
if(this.goods_list){
|
||
this.goods_list.forEach(item=>{
|
||
this.goods_ids+=item.id+','
|
||
})
|
||
}
|
||
if(this.extend){
|
||
this.extend.forEach(item=>{
|
||
this.goods_ids+=item.id+','
|
||
})
|
||
}
|
||
this.goods_ids = this.goods_ids.substr(0, this.goods_ids.length - 1);
|
||
let res = await X_goods.X_create_order(this.goods_ids,this.address.address,this.address.consignee,this.address.tel,this.remark,this.address.id)
|
||
if(res.code==200){
|
||
if(res.data.errcode){
|
||
uni.showToast({
|
||
title: res.data.errmsg,
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
setTimeout(function() {
|
||
uni.switchTab({
|
||
url: './shoppingCart'
|
||
})
|
||
}, 1500);
|
||
}else{
|
||
uni.redirectTo({
|
||
url:'../my/pay_type?order_id='+res.data.order_id
|
||
})
|
||
}
|
||
}
|
||
this.handleError(res, res => {
|
||
})
|
||
}else{
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
.the_remarks{
|
||
font-size: 28upx;
|
||
}
|
||
overflow-y: auto;
|
||
.detail {
|
||
background-color: #F2F2F2;
|
||
height: calc(100% - 249upx);
|
||
overflow-y: auto;
|
||
.list {
|
||
|
||
.list_items {
|
||
position: relative;
|
||
.shixiao{
|
||
position: absolute;
|
||
right:6%;
|
||
top:0;
|
||
padding:5upx 10upx;
|
||
border-radius: 20upx;
|
||
background-color: #a9a1a1;
|
||
color: #FFFFFF;
|
||
}
|
||
.box_img {
|
||
height: 153.3upx;
|
||
width: 270upx;
|
||
background-color: #F2F2F2;
|
||
padding: 10upx 20upx;
|
||
margin: 0 10upx;
|
||
}
|
||
|
||
.goods_items {
|
||
position: relative;
|
||
|
||
.goods_count {
|
||
position: absolute;
|
||
bottom: -14upx;
|
||
right: 8upx;
|
||
}
|
||
}
|
||
.line {
|
||
height: 4upx;
|
||
background-color: #F2F2F2;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.goods_txt {
|
||
.txt_info {
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
|
||
.time {
|
||
padding: 0 15upx;
|
||
border-radius: 10upx;
|
||
margin: 0 15upx;
|
||
}
|
||
|
||
.zhuyi_title {
|
||
margin: 20upx 0 20upx 0;
|
||
}
|
||
}
|
||
|
||
.bottom_menu {
|
||
height: 100upx;
|
||
overflow: hidden;
|
||
line-height: 100upx;
|
||
.car_img {
|
||
height: 41upx;
|
||
width: 46upx;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.car_txt {
|
||
font-size: 20upx;
|
||
color: #989898;
|
||
line-height: 22upx;
|
||
margin-top: -4px;
|
||
}
|
||
|
||
.car_GoodsNum {
|
||
position: absolute;
|
||
top: -8upx;
|
||
left: 108upx;
|
||
color: #EB5159;
|
||
}
|
||
|
||
.sameBtn {
|
||
line-height: 81.5upx;
|
||
width: 38%;
|
||
}
|
||
|
||
.the_car {
|
||
flex: 1;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.add_shopping_car {
|
||
background-color: #EDCA4A;
|
||
}
|
||
|
||
.buy {
|
||
background-color: #EB5159;
|
||
line-height: 100upx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|