647 lines
17 KiB
Vue
647 lines
17 KiB
Vue
<!-- 单个商品购买页面 -->
|
||
<template>
|
||
<view class="flex-col page">
|
||
<view class="flex-col justify-start">
|
||
<view class="flex-col group">
|
||
<view class="flex-col section">
|
||
<view class="flex-row justify-between">
|
||
<view class="flex-col">
|
||
<text class="self-center font text">{{ addressRealInfo.region }}</text>
|
||
<view class="flex-row items-center self-stretch">
|
||
<image
|
||
class="shrink-0 image_2"
|
||
:src="dingwei"
|
||
/>
|
||
<text class="font_2 text_2 ml-7">{{ addressRealInfo.detailAddress }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-row self-start group_2" @click="loadPop()">
|
||
<image
|
||
class="image_3"
|
||
:src="you_cheng"
|
||
/>
|
||
<text class="font_3 text_3">更换地址</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-row items-baseline group_3 mt-4">
|
||
<text class="font_2 text_4">{{ addressRealInfo.name }}</text>
|
||
<text class="font_2 text_5">{{ addressRealInfo.phone }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col section_2 mt-8">
|
||
<view class="flex-row">
|
||
<image
|
||
class="image_4"
|
||
:src="productObject.goodImg" />
|
||
<view class="flex-col self-start group_4 ml-17">
|
||
<view class="flex-row self-stretch">
|
||
<text class="font">{{ productObject.name }}</text>
|
||
<text class="font ml-4">【{{ productObject.type }}】</text>
|
||
</view>
|
||
<!-- <text class="self-start font_2 text_6 mt-12">已选种类：{{ item.selected_style }}</text> -->
|
||
<view class="flex-row self-stretch mt-12" >
|
||
<view class="flex-col justify-start items-center text-wrapper" v-for="(item , index) in labelList" :key="index">
|
||
<text class="font_2 text_7">#{{ labelList[index] }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex-row justify-between items-center group_5">
|
||
<view class="flex-row items-center group_6">
|
||
<text class="text_10">{{ productObject.price }}</text>
|
||
<image
|
||
class="shrink-0 image_7 image_8"
|
||
:src="rmb_32"
|
||
/>
|
||
<text class="font text_11">.00</text>
|
||
</view>
|
||
<view class="flex-row">
|
||
<image
|
||
class="image_5"
|
||
:src="short" />
|
||
<view class="flex-col justify-start items-center text-wrapper_4 ml-2">
|
||
<text class="font text_12">1</text>
|
||
</view>
|
||
<image
|
||
class="image_6 ml-2"
|
||
:src="add"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="flex-row justify-end items-center group_7">
|
||
<view class="group_8">
|
||
<text class="font_2 text_13">注：购买商品均视为同意</text>
|
||
<text class="font_2 text_14">用户须知</text>
|
||
</view>
|
||
<image
|
||
class="shrink-0 image_9 ml-2"
|
||
:src="yiwen"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col section_3 mt-8">
|
||
<view class="flex-row justify-between items-center group_9">
|
||
<view class="flex-row">
|
||
<text class="font_4 text_15">商品总价</text>
|
||
<text class="font_5 text_16 ml-7">共 {{ num }} 件商品</text>
|
||
</view>
|
||
<view class="flex-row items-center">
|
||
<image
|
||
class="shrink-0 image_10"
|
||
:src="rmb_36px"
|
||
/>
|
||
<text class="font_6">{{ productObject.price }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col mt-25">
|
||
<view class="flex-row justify-between group_10">
|
||
<text class="font_4 text_17">优惠券</text>
|
||
<view class="flex-row group_11">
|
||
<image
|
||
class="image_7 image_11"
|
||
:src="you_hei"
|
||
/>
|
||
<text class="font_5 text_18">{{ youhuijuan_num }}张优惠券可用</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col mt-9">
|
||
<view class="flex-row justify-between items-center group_12">
|
||
<text class="font_4 text_19">满{{ manjian }}减{{ manjian1 }}优惠</text>
|
||
<view class="flex-row items-center">
|
||
<image
|
||
class="shrink-0 image_10 image_12"
|
||
:src="rmb_cheng"
|
||
/>
|
||
<text class="font_3 text_20">减</text>
|
||
<text class="font_6 text_21"> {{ manjian1 }}.00 </text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-row justify-between items-center group_13">
|
||
<text class="font_4 text_22">合计</text>
|
||
<view class="flex-row items-center">
|
||
<image
|
||
class="shrink-0 image_10"
|
||
:src="rmb_36px"
|
||
/>
|
||
<text class="font_6">{{ productObject.price - 50 }}.00</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col section_1 mt-8">
|
||
<text class="self-start font_7">订单备注</text>
|
||
<textarea class="text-wrapper_5 mt-11" placeholder="备注建议提前协商(250字以内)"></textarea>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex-row justify-between items-center section_4 mt-194" >
|
||
<view class="flex-row items-center">
|
||
<image
|
||
class="shrink-0 image_10 image_13"
|
||
:src="rmb_huang"
|
||
/>
|
||
<text class="font_7 text_24">应付：</text>
|
||
<text class="text_25">{{ sumprice }}.</text>
|
||
<text class="font_6 text_27">00</text>
|
||
</view>
|
||
<!-- <view class="flex-col justify-start items-center text-wrapper_6" @click="jump_pay"><text class="font_4 text_26">微信支付</text></view> -->
|
||
<view class="flex-col justify-start items-center text-wrapper_6" @click="createOrder"><text class="font_4 text_26">微信支付</text></view>
|
||
</view>
|
||
</view>
|
||
<uni-popup ref="popup" background-color="#fff" @change="change">
|
||
<view class="popup-content">
|
||
<addressComponentVue></addressComponentVue>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {onMounted, ref} from 'vue'
|
||
import emitter from '../../../utils/emitter'
|
||
import { onLoad , onShow } from "@dcloudio/uni-app";
|
||
import { userStore } from '../../../store/userStore'; //暂时使用
|
||
//图片暂时存在本地
|
||
import addressComponentVue from '../component/addressComponent.vue'; //带入组件
|
||
import add from '@/pages/order/product-waitpay/img/add.png';
|
||
import dingwei from '@/pages/order/product-waitpay/img/dingwei.png';
|
||
import product from '@/pages/order/product-waitpay/img/product.png';
|
||
import rmb_32 from '@/pages/order/product-waitpay/img/rmb_32.png';
|
||
import rmb_36px from '@/pages/order/product-waitpay/img/rmb_36px.png';
|
||
import rmb_cheng from '@/pages/order/product-waitpay/img/rmb_cheng.png';
|
||
import rmb_huang from '@/pages/order/product-waitpay/img/rmb_huang.png';
|
||
import short from '@/pages/order/product-waitpay/img/short.png';
|
||
import yiwen from '@/pages/order/product-waitpay/img/yiwen.png';
|
||
import you_cheng from '@/pages/order/product-waitpay/img/you_cheng.png';
|
||
import you_hei from '@/pages/order/product-waitpay/img/you_hei.png';
|
||
import { baseUrl } from '../../../api/request';
|
||
//一些暂时变量
|
||
const num = ref(1)
|
||
const price = ref(138)
|
||
const youhuijuan_num = ref(1)
|
||
const manjian = ref(120)
|
||
const manjian1 = ref(50)
|
||
const sumprice = ref(88)
|
||
//11.4开发 不应该删掉的
|
||
const popup = ref(null) //弹窗对象
|
||
const addressRealInfo = ref({
|
||
detailAddress: '请选择/添加地址'
|
||
}) //地址页 选择地址传过来的值 进入页面首先是默认地址，若无默认地址，则为空
|
||
const productObject = ref({}) //商品对象
|
||
const labelList = ref([]) //老套路，商品标签
|
||
const userInfo = ref({}) //用户信息
|
||
const totalAmount = ref(0) //总实付价格
|
||
const orderItemList = ref([ //订单中各种商品的详细信息
|
||
{
|
||
// orderId : 0,
|
||
goodSnapshot : { },
|
||
priceSnapshot: 0, //实付金额
|
||
quantity: 0,
|
||
itemTotalAmount: 0
|
||
}
|
||
])
|
||
onMounted(() => {
|
||
emitter.on('close', () => {
|
||
close()
|
||
})
|
||
//获取地址信息
|
||
emitter.on('addressInfo', (val) =>{
|
||
addressRealInfo.value = val
|
||
})
|
||
})
|
||
onLoad((options)=>{
|
||
productObject.value = JSON.parse(options.product)
|
||
labelList.value = productObject.value.label.split(";") //切割商品标签的老套路
|
||
labelList.value = labelList.value.filter((s)=>{ //使用filter将最后一个空值去掉
|
||
return s
|
||
})
|
||
totalAmount.value = productObject.value.price //11.4 单个商品这么写 未写单个商品多数量购买 需要改 记住
|
||
orderItemList.value[0].goodSnapshot = { //待优化 11.4
|
||
name : productObject.value.name,
|
||
type : productObject.value.type,
|
||
price : productObject.value.price,
|
||
goodImg : productObject.value.goodImg,
|
||
festivalOrder : productObject.value.festivalOrder,
|
||
reserveDate: productObject.value.reserveDate
|
||
}
|
||
orderItemList.value[0].priceSnapshot = productObject.value.price
|
||
orderItemList.value[0].quantity = 1 //单个商品购买，先买一个实现
|
||
//如果这里涉及到多个商品，肯定要for循环遍历 现在是单个商品
|
||
orderItemList.value[0].itemTotalAmount = orderItemList.value[0].quantity * orderItemList.value[0].priceSnapshot
|
||
})
|
||
onShow(()=>{
|
||
userInfo.value = wx.getStorageSync('userInfo') //从微信缓存中获取用户信息
|
||
getDefaultAddress()
|
||
})
|
||
//关闭弹窗
|
||
const close = () => {
|
||
popup.value.close()
|
||
}
|
||
//加载弹窗。默认从底部弹出
|
||
const loadPop =() =>{
|
||
popup.value.open('bottom')
|
||
}
|
||
//跳转支付
|
||
const jump_pay =()=> {
|
||
uni.navigateTo({
|
||
url: '../../../pages/order/paysuccess/paysuccess'
|
||
})
|
||
}
|
||
//获取用户默认地址
|
||
const getDefaultAddress = async () =>{
|
||
const res = await uni.request({
|
||
url: baseUrl + '/address/list',
|
||
method: 'POST',
|
||
data: { id: userInfo.value.id }
|
||
})
|
||
//根据for循环遍历默认地址
|
||
for(let key in res.data.data) {
|
||
if(res.data.data[key].isDefault === 1) {
|
||
addressRealInfo.value = res.data.data[key]
|
||
}
|
||
}
|
||
}
|
||
//创建待支付订单
|
||
const createOrder = async () => {
|
||
// console.log('商品对象==>',productObject.value)
|
||
// console.log('地址对象==>',addressRealInfo.value);
|
||
// console.log('用户信息==>',userInfo.value);
|
||
// console.log('订单明细-->',orderItemList.value);
|
||
//先添加订单
|
||
const resOrder = await uni.request({
|
||
url: baseUrl + '/order/add',
|
||
method: 'POST',
|
||
data: {
|
||
userId: userInfo.value.id,
|
||
userName: userInfo.value.userName,
|
||
orderNumber: "null", //订单编号暂存为null
|
||
addressSnapshot: {...addressRealInfo.value}, //地址信息快照
|
||
contactsSnapshot: {name:"null",phone:"null"},
|
||
couponSnapshot: {name:"null",conditionAmount:"null"}, //优惠卷信息快照
|
||
totalAmount: totalAmount.value, //总价
|
||
orderStatus: "待支付" ,//订单状态
|
||
orderItemList: orderItemList.value
|
||
}
|
||
})
|
||
// console.log('后台返回订单响应==>',resOrder);
|
||
if(resOrder.data.code === 1) {
|
||
uni.navigateTo({
|
||
url: '/pages/order/paysuccess/paysuccess'
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'error',
|
||
title: "购买失败，请求错误"
|
||
})
|
||
return;
|
||
}
|
||
}
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.popup-content {
|
||
height: 392px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #fff;
|
||
}
|
||
.ml-17 {
|
||
margin-left: 31.88rpx;
|
||
}
|
||
.ml-7 {
|
||
margin-left: 13.13rpx;
|
||
}
|
||
.mt-25 {
|
||
margin-top: 46.88rpx;
|
||
}
|
||
.mt-9 {
|
||
margin-top: 16.88rpx;
|
||
}
|
||
.mt-11 {
|
||
margin-top: 20.63rpx;
|
||
}
|
||
.mt-194 {
|
||
margin-top: 363.75rpx;
|
||
}
|
||
.page {
|
||
padding-bottom: 65.63rpx;
|
||
background-color: #fffaf0;
|
||
width: 100%;
|
||
// overflow-y: auto;
|
||
overflow-x: hidden;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
}
|
||
.group {
|
||
padding: 16.88rpx 15rpx 0 16.88rpx;
|
||
}
|
||
.section {
|
||
padding: 20.81rpx 13.26rpx 15.07rpx 18.62rpx;
|
||
background-color: #fffef8;
|
||
border-radius: 18.75rpx;
|
||
border: solid 1.88rpx #818181;
|
||
}
|
||
.font {
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 24.43rpx;
|
||
color: #323232;
|
||
}
|
||
.text {
|
||
line-height: 24.39rpx;
|
||
}
|
||
.image_2 {
|
||
width: 43.13rpx;
|
||
height: 43.13rpx;
|
||
}
|
||
.font_2 {
|
||
font-size: 22.5rpx;
|
||
font-family: Open Sans;
|
||
line-height: 22.16rpx;
|
||
color: #818181;
|
||
}
|
||
.text_2 {
|
||
line-height: 20.83rpx;
|
||
}
|
||
.group_2 {
|
||
margin-right: 3.77rpx;
|
||
margin-top: 35.31rpx;
|
||
width: 130.05rpx;
|
||
}
|
||
.image_3 {
|
||
margin-left: 105.67rpx;
|
||
width: 24.38rpx;
|
||
height: 24.38rpx;
|
||
}
|
||
.font_3 {
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 24.43rpx;
|
||
color: #fb8b05;
|
||
}
|
||
.text_3 {
|
||
margin-left: -130.05rpx;
|
||
line-height: 24.23rpx;
|
||
}
|
||
.group_3 {
|
||
padding: 0 58.2rpx;
|
||
}
|
||
.text_4 {
|
||
color: #5a5a5a;
|
||
line-height: 20.38rpx;
|
||
}
|
||
.text_5 {
|
||
line-height: 16.54rpx;
|
||
}
|
||
.section_2 {
|
||
padding: 20.49rpx 18.64rpx 18.88rpx 22.37rpx;
|
||
background-color: #fffef8;
|
||
border-radius: 18.75rpx;
|
||
border: solid 1.88rpx #818181;
|
||
}
|
||
.image_4 {
|
||
border-radius: 9.38rpx;
|
||
width: 146.25rpx;
|
||
height: 165rpx;
|
||
}
|
||
.group_4 {
|
||
margin-top: 4.07rpx;
|
||
}
|
||
.text_6 {
|
||
margin-left: 2.1rpx;
|
||
line-height: 20.79rpx;
|
||
}
|
||
.text-wrapper {
|
||
padding: 9.22rpx 0 7.56rpx;
|
||
background-color: #ffad4a78;
|
||
border-radius: 5.63rpx;
|
||
width: 84.38rpx;
|
||
height: 37.5rpx;
|
||
}
|
||
.text_7 {
|
||
line-height: 20.72rpx;
|
||
}
|
||
.text-wrapper_2 {
|
||
padding: 9.07rpx 0 7.59rpx;
|
||
background-color: #ffad4a78;
|
||
border-radius: 5.63rpx;
|
||
width: 121.88rpx;
|
||
height: 37.5rpx;
|
||
}
|
||
.text_8 {
|
||
line-height: 20.83rpx;
|
||
}
|
||
.text-wrapper_3 {
|
||
padding: 9.22rpx 0 7.56rpx;
|
||
background-color: #ffad4a78;
|
||
border-radius: 5.63rpx;
|
||
width: 114.38rpx;
|
||
height: 37.5rpx;
|
||
}
|
||
.text_9 {
|
||
line-height: 20.72rpx;
|
||
}
|
||
.group_5 {
|
||
margin-top: 15rpx;
|
||
padding: 0 5.87rpx;
|
||
}
|
||
.group_6 {
|
||
margin-left: 172.26rpx;
|
||
}
|
||
.text_10 {
|
||
margin-left: 25.03rpx;
|
||
color: #323232;
|
||
font-size: 33.75rpx;
|
||
font-family: Open Sans;
|
||
font-weight: 600;
|
||
line-height: 24.88rpx;
|
||
}
|
||
.image_7 {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
.image_8 {
|
||
margin-left: -90.66rpx;
|
||
}
|
||
.text_11 {
|
||
margin-left: 61.14rpx;
|
||
font-weight: 600;
|
||
line-height: 19.29rpx;
|
||
}
|
||
.image_5 {
|
||
border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
}
|
||
.text-wrapper_4 {
|
||
padding: 12.39rpx 0 13.88rpx;
|
||
background-color: #fbf8dc;
|
||
width: 58.13rpx;
|
||
height: 45rpx;
|
||
}
|
||
.text_12 {
|
||
line-height: 18.73rpx;
|
||
}
|
||
.image_6 {
|
||
border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
}
|
||
.group_7 {
|
||
margin-top: 30rpx;
|
||
padding: 0 125.87rpx;
|
||
}
|
||
.group_8 {
|
||
line-height: 20.94rpx;
|
||
height: 20.94rpx;
|
||
}
|
||
.text_13 {
|
||
line-height: 20.79rpx;
|
||
}
|
||
.text_14 {
|
||
color: #ed4845;
|
||
line-height: 20.94rpx;
|
||
}
|
||
.image_9 {
|
||
width: 26.25rpx;
|
||
height: 26.25rpx;
|
||
}
|
||
.section_3 {
|
||
padding: 29.87rpx 7.39rpx 3.88rpx 11.12rpx;
|
||
background-color: #fffef8;
|
||
border-radius: 18.75rpx;
|
||
border: solid 1.88rpx #818181;
|
||
}
|
||
.group_9 {
|
||
padding-left: 24.54rpx;
|
||
padding-right: 12.52rpx;
|
||
}
|
||
.font_4 {
|
||
font-size: 30rpx;
|
||
font-family: Open Sans;
|
||
line-height: 27.69rpx;
|
||
color: #323232;
|
||
}
|
||
.text_15 {
|
||
line-height: 27.84rpx;
|
||
}
|
||
.font_5 {
|
||
font-size: 30rpx;
|
||
font-family: Open Sans;
|
||
line-height: 27.69rpx;
|
||
color: #818181;
|
||
}
|
||
.text_16 {
|
||
line-height: 27.6rpx;
|
||
}
|
||
.image_10 {
|
||
width: 33.75rpx;
|
||
height: 33.75rpx;
|
||
}
|
||
.font_6 {
|
||
font-size: 30rpx;
|
||
font-family: Open Sans;
|
||
line-height: 22.16rpx;
|
||
color: #323232;
|
||
}
|
||
.group_10 {
|
||
padding-left: 23.59rpx;
|
||
padding-right: 7.74rpx;
|
||
}
|
||
.text_17 {
|
||
line-height: 27.71rpx;
|
||
}
|
||
.group_11 {
|
||
width: 227.91rpx;
|
||
}
|
||
.image_11 {
|
||
margin-left: 197.91rpx;
|
||
}
|
||
.text_18 {
|
||
margin-left: -227.91rpx;
|
||
line-height: 27.81rpx;
|
||
}
|
||
.group_12 {
|
||
padding: 26.25rpx 15.19rpx 28.13rpx 23.74rpx;
|
||
border-bottom: solid 1.88rpx #dfdfdf;
|
||
}
|
||
.text_19 {
|
||
line-height: 27.64rpx;
|
||
}
|
||
.image_12 {
|
||
margin-left: 23.44rpx;
|
||
}
|
||
.text_20 {
|
||
margin-left: -57.19rpx;
|
||
line-height: 24.17rpx;
|
||
}
|
||
.text_21 {
|
||
margin-left: 27.24rpx;
|
||
color: #fb8b05;
|
||
}
|
||
.group_13 {
|
||
padding: 26.25rpx 13.73rpx 28.13rpx 23.49rpx;
|
||
}
|
||
.text_22 {
|
||
line-height: 27.54rpx;
|
||
}
|
||
.section_1 {
|
||
padding: 17.74rpx 21.99rpx 20.76rpx;
|
||
background-color: #fffef8;
|
||
border-radius: 18.75rpx;
|
||
border: solid 1.88rpx #818181;
|
||
}
|
||
.font_7 {
|
||
font-size: 30rpx;
|
||
font-family: Open Sans;
|
||
line-height: 27.69rpx;
|
||
color: #000000;
|
||
}
|
||
.text-wrapper_5 {
|
||
align-self: stretch;
|
||
margin-left: 4.13rpx;
|
||
margin-right: 4.39rpx;
|
||
}
|
||
.section_4 {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 16.88rpx 25.46rpx 25rpx;
|
||
background-color: #ffffff;
|
||
}
|
||
.image_13 {
|
||
margin-left: 85.16rpx;
|
||
}
|
||
.text_24 {
|
||
margin-left: -118.91rpx;
|
||
line-height: 28.05rpx;
|
||
}
|
||
.text_25 {
|
||
margin-left: 24.62rpx;
|
||
color: #fbb612;
|
||
font-size: 37.5rpx;
|
||
font-family: Open Sans;
|
||
font-weight: 700;
|
||
line-height: 27.62rpx;
|
||
}
|
||
.text_27 {
|
||
color: #fbb612;
|
||
font-weight: 700;
|
||
line-height: 22.05rpx;
|
||
}
|
||
.text-wrapper_6 {
|
||
padding: 21.56rpx 0 21.99rpx;
|
||
background-color: #fbb612;
|
||
border-radius: 75rpx;
|
||
width: 204.38rpx;
|
||
height: 71.25rpx;
|
||
}
|
||
.text_26 {
|
||
color: #ffffff;
|
||
}
|
||
@import url(../../../common/css/global.css);
|
||
</style>
|