第一次上传
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 428 KiB |
@@ -0,0 +1,464 @@
|
||||
<template>
|
||||
<view class="order-confirm-page">
|
||||
<!-- 全新方案：纯 CSS 手动构建的骨架屏 -->
|
||||
<view v-if="loading" class="skeleton-wrapper">
|
||||
<view class="skeleton-card" style="height: 180rpx;"></view>
|
||||
<view class="skeleton-card" style="height: 220rpx;"></view>
|
||||
<view class="skeleton-card" style="height: 150rpx;"></view>
|
||||
<view class="skeleton-card" style="height: 200rpx;"></view>
|
||||
</view>
|
||||
|
||||
<!-- 页面实际内容 -->
|
||||
<view v-else class="page-content">
|
||||
|
||||
<scroll-view class="page-scroll" scroll-y>
|
||||
<view class="page-container">
|
||||
<!-- 1. 收货地址 -->
|
||||
<view class="card address-card" @click="selectAddress">
|
||||
<view v-if="orderInfo.address==''" class="no-address">
|
||||
<up-icon name="plus" color="#fa6400" size="20"></up-icon>
|
||||
<text>请选择收货地址</text>
|
||||
</view>
|
||||
<view v-else class="has-address">
|
||||
<view class="user-info">
|
||||
<text class="name">{{ getAddInfo().name}}</text>
|
||||
<text class="phone">{{ getAddInfo().phone }}</text>
|
||||
</view>
|
||||
<text class="address-text">{{ getAddInfo().province}}{{ getAddInfo().city}}{{ getAddInfo().region}}{{ getAddInfo().address}}</text>
|
||||
</view>
|
||||
<up-icon name="arrow-right" color="#999" size="16"></up-icon>
|
||||
</view>
|
||||
|
||||
<!-- 2. 商品信息 -->
|
||||
<view class="card product-card">
|
||||
<view class="image-placeholder product-image">
|
||||
<image :src="orderInfo.img" style="width: 100%; height: 100%; border-radius: 10rpx;" mode=""></image>
|
||||
</view>
|
||||
<view class="product-info">
|
||||
<text class="name">{{ orderInfo.goodsName }}</text>
|
||||
<text class="quantity" style="margin-top: 10rpx;">数量: x{{ orderInfo.count }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 3. 配送与备注 -->
|
||||
<!-- <view class="card options-card" style="padding: 20rpx 0;">
|
||||
<view class="" style="width: 100%; border: solid 1rpx black; height: 40rpx;">
|
||||
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 4. 费用明细 -->
|
||||
<view class="card price-card">
|
||||
<view class="price-row">
|
||||
<text class="label">商品总计</text>
|
||||
<text class="value">{{ orderInfo.amount }} 积分</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="bottom-bar">
|
||||
<view class="total-summary">
|
||||
<text class="total-points">{{ orderInfo.amount }} 积分</text>
|
||||
</view>
|
||||
<button class="submit-btn" @click="submitOrder">提交订单</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-popup :show="show" @close="show = false" closeable>
|
||||
<view class="" style="width: 100%; height: 800rpx;">
|
||||
<view class=""
|
||||
style="width: 100; text-align: center; font-size: 28rpx; flex-wrap: 600; height: 80rpx; line-height: 80rpx;">
|
||||
|
||||
</view>
|
||||
<view class="" style="width: 90%; margin: 0 auto; margin-top: 20rpx;">
|
||||
<view style="width:100%; padding: 5rpx; border: solid 1rpx #e7e7e7; border-radius: 10rpx; margin-bottom: 20rpx; padding: 20rpx;"
|
||||
v-for="(item, index) in addList" :key="index" :style="addressID==item.addressId?'border: solid 1rpx var(--nav-mian);':''" @click="GxorderAdd(item.addressId)">
|
||||
<view class="has-address">
|
||||
<view class="user-info">
|
||||
<text class="name">{{item.name}}</text>
|
||||
<text class="phone">{{ item.phone }}</text>
|
||||
</view>
|
||||
<text class="address-text">{{ item.province}}{{ item.city}}{{ item.region}}{{ item.address}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import { Service } from "@/Service/Service";
|
||||
import { vpGoodsService } from '@/Service/vp/vpGoodsService'
|
||||
import { vpAddressService } from '@/Service/vp/vpAddressService'
|
||||
|
||||
|
||||
|
||||
|
||||
const loading = ref<boolean>(true);
|
||||
|
||||
let orderId = ref<string>('')
|
||||
|
||||
let orderInfo = ref<any>({
|
||||
goodsName: '',
|
||||
img: '',
|
||||
count: 1,
|
||||
amount: 0,
|
||||
|
||||
address: '',
|
||||
way: '',
|
||||
wayName: ''
|
||||
})
|
||||
|
||||
let addList = ref<Array<any>>([])
|
||||
|
||||
let addressID = ref<string>('')
|
||||
|
||||
let show = ref<boolean>(false)
|
||||
|
||||
onLoad((options) => {
|
||||
orderId.value = options.orderId
|
||||
GetData()
|
||||
|
||||
});
|
||||
onShow(() => {
|
||||
|
||||
getAddList()
|
||||
|
||||
});
|
||||
|
||||
// 获取收货地址
|
||||
const getAddList = () => {
|
||||
vpAddressService.GetUserAddressList().then(res => {
|
||||
if (res.code == 0) {
|
||||
addList.value = res.data.list
|
||||
if(orderInfo.value.address== '' && addList.value.length>0){
|
||||
|
||||
GxorderAdd(addList.value[0].addressId)
|
||||
}
|
||||
} else {
|
||||
Service.Msg(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 获取数据
|
||||
const GetData = () => {
|
||||
vpGoodsService.GetOrderInfo(orderId.value).then(res => {
|
||||
if (res.code == 0) {
|
||||
loading.value = false;
|
||||
orderInfo.value = res.data.orderInfo
|
||||
if(orderInfo.value.address != ''){
|
||||
addressID.value = JSON.parse(orderInfo.value.address).addressId
|
||||
}
|
||||
getAddList()
|
||||
} else {
|
||||
Service.Msg(res.msg)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
// 选择收货地址
|
||||
const selectAddress = () => {
|
||||
if(orderInfo.value.address==''){
|
||||
|
||||
Service.GoPage('/pages/userFunc/addAddress')
|
||||
}else{
|
||||
show.value = true
|
||||
}
|
||||
};
|
||||
|
||||
// 修改收货地址
|
||||
const GxorderAdd = (addId:string) =>{
|
||||
|
||||
addressID.value = addId
|
||||
vpGoodsService.UpdateOrderAddress(orderId.value,addId).then(res=>{
|
||||
if(res.code==0){
|
||||
orderInfo.value.address = JSON.stringify(addList.value.find(data => data.addressId == addressID.value))
|
||||
}else{
|
||||
Service.Msg(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const getAddInfo = () =>{
|
||||
let obj = {
|
||||
address:'',
|
||||
province:'',
|
||||
city:'',
|
||||
region:'',
|
||||
name:'',
|
||||
phone:'',
|
||||
addressId:''
|
||||
}
|
||||
|
||||
if(orderInfo.value.address != ''){
|
||||
return JSON.parse(orderInfo.value.address)
|
||||
}else if(addressID.value!=''){
|
||||
obj = addList.value.find(data => data.addressId == addressID.value)
|
||||
return obj
|
||||
}else{
|
||||
return obj
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const submitOrder = () => {
|
||||
|
||||
vpGoodsService.PayOrder(orderId.value).then(res=>{
|
||||
if(res.code==0){
|
||||
Service.Msg('下单成功！')
|
||||
}else{
|
||||
Service.Msg(res.msg)
|
||||
}
|
||||
})
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@keyframes skeleton-blink {
|
||||
0% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-item {
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-blink 1.5s infinite linear;
|
||||
}
|
||||
|
||||
.skeleton-rect {
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.skeleton-text {
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.skeleton-wrapper {
|
||||
padding: 24rpx;
|
||||
background-color: #f7f7f7;
|
||||
|
||||
.skeleton-card {
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.order-confirm-page {
|
||||
background-color: #f7f7f7;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page-scroll {
|
||||
flex: 1;
|
||||
padding-bottom: 140rpx;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 8rpx 30rpx rgba(220, 220, 230, 0.3);
|
||||
}
|
||||
|
||||
.address-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.no-address {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.has-address {
|
||||
flex: 1;
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
|
||||
.name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.phone {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.address-text {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
margin-top: 12rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-card {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
|
||||
.product-image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.spec,
|
||||
.quantity {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.options-card,
|
||||
.price-card {
|
||||
padding: 10rpx 30rpx;
|
||||
|
||||
:deep(.up-cell) {
|
||||
.up-cell__body {
|
||||
padding: 28rpx 0;
|
||||
}
|
||||
|
||||
.up-cell__title-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price-card {
|
||||
.price-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 0;
|
||||
font-size: 28rpx;
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
padding: 20rpx 30rpx;
|
||||
padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
z-index: 100;
|
||||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
|
||||
.total-summary {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8rpx;
|
||||
|
||||
.total-points {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #fa6400;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
background-color: #fa6400;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
border-radius: 44rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
font-size: 30rpx;
|
||||
margin: 0;
|
||||
padding: 0 80rpx;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,104 @@
|
||||
import { Service } from '@/Service/Service';
|
||||
/*****社区*****/
|
||||
class vpMerchService {
|
||||
private static GetMerchListPath: string = '/Merch/GetMerchList';
|
||||
/*****商家列表*****/
|
||||
static GetMerchList(assId: string,serch:string,lon:number,lat:number ,sort:number,codeSort:number ,page:number) {
|
||||
var result = Service.Request(this.GetMerchListPath, 'GET', {assId,serch,lon,lat,sort,codeSort,page});
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
private static GetMerchInfoPath: string = '/Merch/GetMerchInfo';
|
||||
/*****店铺详情*****/
|
||||
static GetMerchInfo(merchId: string ,lon:number ,lat:number,page:number) {
|
||||
var result = Service.Request(this.GetMerchInfoPath, 'GET', {merchId,lon,lat,page});
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
private static GetGoodsInfoPath: string = '/Merch/GetGoodsInfo';
|
||||
/*****商品详情*****/
|
||||
static GetGoodsInfo(goodsId: string,page:number) {
|
||||
var result = Service.Request(this.GetGoodsInfoPath, 'GET', {goodsId,page});
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
private static GetMyMerchInfoPath: string = '/Merch/GetMyMerchInfo';
|
||||
/*****获取用户个人绑定商家*****/
|
||||
static GetMyMerchInfo() {
|
||||
var result = Service.Request(this.GetMyMerchInfoPath, 'GET', {});
|
||||
return result;
|
||||
}
|
||||
|
||||
private static UpdateMerchPath: string = '/Merch/UpdateMerch';
|
||||
/*****修改用户个人绑定商家*****/
|
||||
static UpdateMerch( assortId:string, logo:string, comId:string,name:string,showImg:string,phone:string,price:number,province:string,city:string,county:string,address:string,lon:number,lat:number,busTime:string,tag:string) {
|
||||
var result = Service.Request(this.UpdateMerchPath, 'POST', {assortId,logo,comId,name,showImg,phone,price,province,city,county,address,lon,lat,busTime,tag});
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
private static GetMerchGoodsPath: string = '/Merch/GetMerchGoods';
|
||||
/*****获取商家商品列表*****/
|
||||
static GetMerchGoods(page:number) {
|
||||
var result = Service.Request(this.GetMerchGoodsPath, 'GET', {page});
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
private static UpdateGoodsStatusPath: string = '/Merch/UpdateGoodsStatus';
|
||||
/*****修改商品上下架*****/
|
||||
static UpdateGoodsStatus(goodsId:string) {
|
||||
var result = Service.Request(this.UpdateGoodsStatusPath, 'POST', {goodsId});
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
private static UpdateMerchGoodsPath: string = '/Merch/UpdateMerchGoods';
|
||||
/*****修改商品*****/
|
||||
static UpdateMerchGoods(goodsId:string,name:string,img:string,price:number,brief:string,status:number) {
|
||||
var result = Service.Request(this.UpdateMerchGoodsPath, 'POST', {goodsId,name,img,price,brief,status});
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
private static DelGoodsPath: string = '/Merch/DelGoods';
|
||||
/*****删除商品*****/
|
||||
static DelGoods(goodsId:string) {
|
||||
var result = Service.Request(this.DelGoodsPath, 'POST', {goodsId});
|
||||
return result;
|
||||
}
|
||||
|
||||
private static GetUnitMerchInfoPath: string = '/Order/GetUnitMerchInfo';
|
||||
/*****商家详情*****/
|
||||
static GetUnitMerchInfo(merchId:string) {
|
||||
var result = Service.Request(this.GetUnitMerchInfoPath, 'GET', {merchId});
|
||||
return result;
|
||||
}
|
||||
|
||||
private static GetMerchOrderListPath: string = '/Merch/GetMerchOrderList';
|
||||
/*****获取商家订单列表*****/
|
||||
static GetMerchOrderList(time:string,page:number) {
|
||||
var result = Service.Request(this.GetMerchOrderListPath, 'GET', {time,page});
|
||||
return result;
|
||||
}
|
||||
private static GetMerchAssortPath: string = '/Merch/GetMerchAssort';
|
||||
/*****获取商家分类*****/
|
||||
static GetMerchAssort() {
|
||||
var result = Service.Request(this.GetMerchAssortPath, 'GET', {});
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
|
||||
private static GetMerchAccInfoPath: string = '/Merch/GetMerchAccInfo';
|
||||
/*****获取商家积分详情*****/
|
||||
static GetMerchAccInfo(page:number) {
|
||||
var result = Service.Request(this.GetMerchAccInfoPath, 'GET', {page});
|
||||
return result;
|
||||
}
|
||||
|
||||
}
|
||||
export { Service, vpMerchService };
|
||||
10661
.svn/pristine/39/39b8e7d2b5fa559692b43fcaf6bcae3ac88317ea.svn-base
Normal file
10661
.svn/pristine/39/39b8e7d2b5fa559692b43fcaf6bcae3ac88317ea.svn-base
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user