jiangchengfeiyi-xiaochengxu/pages/order/product-waitpay/product-waitpay.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=""
	              />
	              <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=""
	            />
	            <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" v-for="(item , index) in productArr" :key="index">
	        <view class="flex-row">
	          <image 
			   class="image_4" 
			   :src="item.goodVO.goodImg" />
	          <view class="flex-col self-start group_4 ml-17">
	            <view class="flex-row self-stretch">
	              <text class="font">{{ item.goodVO.name }}</text>
	              <text class="font ml-4">【{{ item.goodVO.type }}】</text>
	            </view>
	            <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">￥{{ item.goodVO.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="" 
								@click="shortNum(index)"
								/>
	            <view class="flex-col justify-start items-center text-wrapper_4 ml-2">
	              <text class="font text_12">{{ item.quantity }}</text>
	            </view>
	            <image
	              class="image_6 ml-2"
	              src=""
								@click="addNum(index)"
	            />
	          </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=""
	          />
	        </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">共 {{ productArr.length }} 件商品</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=""
	                />
	                <text class="font_6">{{ sumprice }}.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" v-model="note"  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=""
	      />
	      <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, toRaw} from 'vue'
import  emitter  from '../../../utils/emitter'
import { onLoad , onShow } from "@dcloudio/uni-app"; 
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(0) //总价格
//11.4开发 不应该删掉的
const popup = ref(null) //弹窗对象
const addressRealInfo = ref({
	detailAddress: '请选择/添加地址'
}) //地址页  选择地址传过来的值  进入页面首先是默认地址，若无默认地址，则为空
const productArr = ref([])  //商品对象
const labelList = ref([])  //老套路，商品标签
const userInfo = wx.getStorageSync('userInfo')  //用户信息
const orderItemList = ref({})
const totalInfo = ref([]) //购物车传过来的批量商品
const note = ref('')
onMounted(() => {
	//将关闭弹窗方法传入弹窗页面，绑定弹窗按钮可关闭弹窗
	emitter.on('close', () => {
		close()
	})
	//获取地址信息
	emitter.on('addressInfo', (val) =>{
		addressRealInfo.value = val 
	})
})
onLoad((options)=>{
	totalInfo.value = JSON.parse(options.cartInfo)
	console.log('options.cartInfo-->',JSON.parse(options.cartInfo));
	console.log('totalInfo.value-->',toRaw(totalInfo.value) );
	getProduct()
})
onShow(()=>{
	userInfo.value = wx.getStorageSync('userInfo') //从微信缓存中获取用户信息
	getDefaultAddress()
	// computed()
})
//关闭弹窗
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',
		header: {
			cookie: wx.getStorageSync('cookie')
		},
		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('地址信息-->',addressRealInfo.value);
	const resOrder = await uni.request({   //向后端发送生成订单请求
		url: baseUrl + '/order/add',
		method: 'POST',
		header: {
			cookie: wx.getStorageSync('cookie')
		},
		data: {
			userId: userInfo.id,
			orderType: productArr.value[0].goodVO.isGoodType ? 'product' : 'service' ,
			userName: userInfo.userName,
			orderNumber: "null",
			addressId: addressRealInfo.value.id, //地址信息id
			// contactsId: null, //联系人信息id
			// couponId: null, //优惠卷id
			totalAmount: sumprice.value, //实付价格
			orderStatus: '待支付',
			note: note.value,
			orderItemMainInfoAddRequestList: toRaw(totalInfo.value)
		}
	})
	console.log('后台返回订单响应==>',resOrder);
	if(resOrder.data.code === 1) {
		uni.navigateTo({
			url: '/pages/mine/OrderDetails/OrderDetails'
		})
	} else {
		uni.showToast({
			icon: 'error',
			title: "购买失败，请求错误"
		})
		return;
	}
}
//根据商品id和购买数量获取商品信息
const getProduct = async ()=> {
	const res = await uni.request({
		url: baseUrl + '/cart/cart/list',
		method: 'POST',
		header: {
			cookie: wx.getStorageSync('cookie')
		},
		data: JSON.stringify(totalInfo.value)
	})
	if( res.data.code === 1 ) {
		productArr.value = res.data.data
		console.log('productArr--->',productArr.value);
		productArr.value.forEach((item)=>{
			sumprice.value += item.goodVO.price * item.quantity  //计算总金额
		})
	}
}
//减少当前商品数量
const shortNum =(index)=>{
	if(productArr.value[index].quantity > 1) {
		productArr.value[index].quantity -= 1
		//计算商品价格
		sumprice.value -= productArr.value[index].goodVO.price * 1
	}
}
//增加当前商品数量
const addNum =(index)=>{
	 if( productArr.value[index].quantity < productArr.value[index].goodVO.inventory ) { //数量肯定不能大于库存
		 productArr.value[index].quantity += 1
		 //计算商品价格
		 sumprice.value += productArr.value[index].goodVO.price * 1
	 }
}

</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;
	overflow-y: auto;
}
.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>