Skip to content

Y
yongxinda-h5
提交 5728bdc6 authored 作者: 刘旭's avatar 刘旭
浏览文件
操作

完成下单收尾

上级 123cd46e
显示空白字符变更
内嵌 并排
正在显示 包含 912 行增加 和 142 行删除
src/api/index.ts
浏览文件 @ 5728bdc6
......@@ -8,3 +8,21 @@ export const indexDetails = (data: any) => request('/wx/goods/detail', 'GET', da
// 加入购物车
export const addCart = (data: any) => request('/wx/cart/add', 'POST', data)
// 立即购买
export const fastaddCart = (data: any) => request('/wx/cart/fastadd', 'POST', data)
// 获取购买页面信息，地址，规格
export const checkoutCart = (data: any) => request('/wx/cart/checkout', 'GET', data)
// 地址
export const addressList = () => request('/wx/address/list', 'GET')
// 设置地址
export const cartCheckout = (data: any) => request('/wx/cart/checkout', 'GET', data)
// 提交订单
export const orderSubmit = (data: any) => request('/wx/order/submit', 'POST', data)
// 提交订单详细信息
export const orderDetail = (data: any) => request('/wx/order/detail', 'POST', data)
\ No newline at end of file
src/api/login.ts
浏览文件 @ 5728bdc6
import { request } from '@/utils/request'
// 登录
export const login = (data: any) => request('/wx/auth/login', 'POST', data)
\ No newline at end of file
export const login = (data: any) => request('/wx/auth/login_by_mobile', 'POST', data)
\ No newline at end of file
src/pages.json
浏览文件 @ 5728bdc6
......@@ -65,6 +65,24 @@
"navigationBarBackgroundColor": "#fff",
"onReachBottomDistance": 55
}
}, {
"path": "pages/order/checkout",
"style": {
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#fff"
}
}, {
"path": "pages/profile/address",
"style": {
"navigationBarTitleText": "用户地址",
"navigationBarBackgroundColor": "#fff"
}
}, {
"path": "pages/profile/addSite",
"style": {
"navigationBarTitleText": "添加用户地址",
"navigationBarBackgroundColor": "#fff"
}
}
],
"tabBar": {
......
src/pages/cart/index.vue
浏览文件 @ 5728bdc6
......@@ -236,6 +236,7 @@ const valChange = (e: any, item: any) => {
const initCartIndex = () => {
toLogin();
getCartIndex().then((res: any) => {
console.log(res);
cartList.value = res.data.data.cartList;
totalPrice.value = res.data.data.cartTotal.checkedGoodsAmount.toFixed(2);
allGoods.value = getAllList();
......
src/pages/goods/index.vue
浏览文件 @ 5728bdc6
<template>
<view class="goods-detail">
<!-- 轮播图 -->
<view class="wrap"><u-swiper :list="detailData?.info.gallery" img-mode="scaleToFill" height="700"></u-swiper></view>
<view class="wrap">
<u-swiper :list="detailData?.info.gallery" img-mode="scaleToFill" height="700"></u-swiper>
</view>
<!-- 商品详情 -->
<view class="goods-info">
......@@ -32,8 +34,10 @@
</view>
<u-cell-group style="margin-top: 20rpx;">
<u-cell-item v-if="!selectedGoodsItem.specName" icon="" title="规格" value="请选择" :index="0" @tap="clickGroup"></u-cell-item>
<u-cell-item v-else icon="" :title="'已选：' + selectedGoodsItem.specName + '*' + selectedGoodsItem.num" :arrow="false" :index="0" @click="clickGroup"></u-cell-item>
<u-cell-item v-if="!selectedGoodsItem.specName" icon="" title="规格" value="请选择" :index="0" @tap="clickGroup">
</u-cell-item>
<u-cell-item v-else icon="" :title="'已选：' + selectedGoodsItem.specName + '*' + selectedGoodsItem.num"
:arrow="false" :index="0" @click="clickGroup"></u-cell-item>
<u-cell-item icon="" title="属性" :index="1" @tap="clickGroup"></u-cell-item>
<u-cell-item icon="" title="运费" value="满88免邮费" :arrow="false" :border-bottom="false"></u-cell-item>
</u-cell-group>
......@@ -53,20 +57,28 @@
</text>
<text class="goods-selected">
<text>已选：</text>
<text v-if="selectedGoodsItem.specName">{{ selectedGoodsItem.specName }} * {{ selectedGoodsItem.num }}</text>
<text v-if="selectedGoodsItem.specName">{{ selectedGoodsItem.specName }} *
{{ selectedGoodsItem.num }}</text>
</text>
</view>
</view>
<uni-section v-for="item in detailData?.specificationList" :key="item.id" class="mb-10" :title="item.name">
<view class="goods-spec"><uni-data-checkbox mode="tag" :value="radioValue" :localdata="item.valueList" @change="changeColor" /></view>
<uni-section v-for="item in detailData?.specificationList" :key="item.id" class="mb-10"
:title="item.name">
<view class="goods-spec">
<uni-data-checkbox mode="tag" :value="item.id" :localdata="item.valueList"
@change="changeColor" />
</view>
</uni-section>
<uni-section class="mb-10" title="数量">
<view class="goods-spec"><uni-number-box :min="1" :max="99" @change="changeBuyNum" /></view>
<view class="goods-spec">
<uni-number-box :min="1" :max="99" @change="changeBuyNum" />
</view>
</uni-section>
</view>
<view class="popup-bottom-button">
<view v-if="showPopupButton === 0" class="add-to-cart" @click="addToCart"><text>确定</text></view>
<view v-if="showPopupButton === 0" class="add-to-cart" @click="addToCart"><text>确定</text>
</view>
<view v-else class="buy-now" @click="buyNow"><text>购买</text></view>
</view>
</uni-popup>
......@@ -83,17 +95,22 @@
</view> -->
<view class="goods-intro">
<uni-segmented-control :current="current" :values="tabButtons" @clickItem="onClickItem" styleType="text" activeColor="#e43d33"></uni-segmented-control>
<uni-segmented-control :current="current" :values="tabButtons" @clickItem="onClickItem" styleType="text"
activeColor="#e43d33"></uni-segmented-control>
<view class="content">
<view v-show="current === 0">
<u-parse v-if="detailData?.info.detail" :html="detailData?.info.detail" :show-with-animation="true" lazy-load style="font-size: 0" />
<u-parse v-if="detailData?.info.detail" :html="detailData?.info.detail" :show-with-animation="true"
lazy-load style="font-size: 0" />
<u-empty v-else text="暂无数据" mode="data" />
</view>
<view v-show="current === 1">选项卡2的内容</view>
</view>
</view>
<!-- 提交订单栏 -->
<view class="bottom-bar"><uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="onClick" @buttonClick="buttonClick" /></view>
<view class="bottom-bar">
<uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="onClick"
@buttonClick="buttonClick" />
</view>
<!-- 属性弹窗 -->
<u-popup v-model="attrPopup" mode="bottom" height="50%" closeable>
......@@ -106,77 +123,51 @@
<u-line v-show="detailData?.attribute.length - 1 !== index" />
</view>
</view>
<view v-else><u-empty text="暂无属性" mode="data" /></view>
<view v-else>
<u-empty text="暂无属性" mode="data" />
</view>
</view>
</u-popup>
</view>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { indexDetails, addCart } from '@/api/index';
const attrPopup = ref(false);
const detailData = ref();
const popup = ref();
const tabButtons = ref(['商品详情']);
let current = ref(0);
const goodsInfo = ref({
import {
ref
} from 'vue';
import {
onLoad
} from '@dcloudio/uni-app';
import {
indexDetails,
addCart,
fastaddCart
} from '@/api/index';
import _ from 'lodash';
const attrPopup = ref(false);
const detailData = ref();
const popup = ref();
const tabButtons = ref(['商品详情']);
let current = ref(0);
const goodsInfo = ref({
id: 1,
title: 'Iphone 13 Pro Max 256G 全网通 国行正品',
price: '5000.00',
star: true,
detail: '<img style="max-width: 100%; height: auto" src="https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/detail.png" mode="widthFix"/>',
imgList: [
{
id: 1,
img: `https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_1.jpg`
},
{
id: 2,
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_2.jpg'
},
{
id: 3,
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_3.jpg'
}
],
spec: [
{
value: 1,
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_1.jpg',
text: '石墨色',
price: '5000.00'
},
{
value: 2,
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_2.jpg',
text: '远峰蓝',
price: '5100.00'
},
{
value: 3,
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_3.jpg',
text: '银色',
price: '5099.00'
}
]
});
});
const selectedGoodsItem = ref({
const selectedGoodsItem = ref({
id: '',
specName: '',
img: '',
price: '',
num: 1
});
});
const radioValue = ref(selectedGoodsItem.value.id);
const radioValue = ref(selectedGoodsItem.value.id);
const options = ref([
{
const options = ref([{
icon: 'chat',
text: '客服'
},
......@@ -188,10 +179,9 @@ const options = ref([
icon: goodsInfo.value.star ? 'star-filled' : 'star',
text: '收藏'
}
]);
]);
const buttonGroup = ref([
{
const buttonGroup = ref([{
text: '加入购物车',
backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
color: '#fff'
......@@ -201,18 +191,18 @@ const buttonGroup = ref([
backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
color: '#fff'
}
]);
]);
const detailId = ref()
const detailId = ref()
onLoad((options: any) => {
onLoad((options: any) => {
console.log(options);
detailId.value = options.id
initDetails(options.id)
});
});
// 点击分组
const clickGroup = (index: number) => {
// 点击分组
const clickGroup = (index: number) => {
switch (index) {
case 0:
popup.value.open('bottom');
......@@ -221,21 +211,26 @@ const clickGroup = (index: number) => {
case 1:
attrPopup.value = true;
}
};
};
// 添加checkoutbox属性
const specificationList = () => {
// 添加checkoutbox属性
const specificationList = () => {
detailData.value?.specificationList.map((item: any, i: number) => {
item.valueList.map((key: any, k: number) => {
if(key.value !== key.id) {
if (key.value !== key.id) {
detailData.value!.specificationList[i].valueList[k]['text'] = key.value
detailData.value!.specificationList[i].valueList[k]['value'] = key.id
}
})
})
}
// detailData.value?.productList.map((item: any, i: number) => {
// detailData.value!.productList[i]['text'] = item.specifications[0]
// detailData.value!.productList[i]['value'] = item.id
// })
// console.log(detailData.value?.productList, '456');
}
const onClick = (e: any) => {
const onClick = (e: any) => {
if (e.index === 0) {
console.log('客服');
}
......@@ -253,50 +248,112 @@ const onClick = (e: any) => {
icon: 'none'
});
}
};
};
/**
/**
* popup中按钮展示状态
*/
const showPopupButton = ref(0);
const showPopupButton = ref(0);
const buttonClick = (e: any) => {
if (e.index === 0) {
console.log('加入购物车');
const buttonClick = (e: any) => {
if (e.index === 0)
showPopupButton.value = 0;
}
if (e.index === 1) {
console.log('立即购买');
if (e.index === 1)
showPopupButton.value = 1;
}
openPopup();
};
};
// 打开规格选择
const openPopup = () => {
// 打开规格选择
const openPopup = () => {
popup.value.open('bottom');
resetSelected();
};
};
// 添加购物车
const addToCart = () => {
console.log('添加至购物车', selectedGoodsItem.value);
// 添加购物车
const addToCart = () => {
if (!selectedGoodsItem.value.specName) return uni.showToast({
title: '请先选择' + detailData.value?.specificationList[0].name,
icon: 'none'
})
let productId: any = getProductIdByOne(selectedGoodsItem.value.id)
console.log(productId, productId);
addCart({
goodsId: detailId.value,
number: selectedGoodsItem.value.num,
productId: productId
}).then((res: any) => {
if (res.data.errno !== 711) {
initDetails(detailId.value)
popup.value.close();
uni.showToast({
title: '已添加至购物车',
icon: 'success'
icon: 'none'
});
};
} else {
uni.showToast({
title: res.data.errmsg,
icon: 'none'
});
}
})
};
// 立即购买
const buyNow = () => {
console.log('立即购买', selectedGoodsItem.value);
// 立即购买
const buyNow = () => {
if (!selectedGoodsItem.value.specName) return uni.showToast({
title: '请先选择' + detailData.value?.specificationList[0].name,
icon: 'none'
})
let productId: any = getProductIdByOne(selectedGoodsItem.value.id)
let data: object = {
goodsId: Number(detailId.value),
number: selectedGoodsItem.value.num,
productId: productId
}
fastaddCart(data).then((res: any) => {
if (res.data.errno !== 711) {
uni.navigateTo({
url: `../order/checkout`,
success() {
uni.setStorage({
data: res.data.data,
key: 'buyNowId'
})
if(!uni.getStorageSync('addressId')) {
uni.setStorage({
key: 'addressId',
data: 0
})
}
let storage: any = {
cartId: 0,
couponId: 0,
userCouponId: 0,
grouponRulesId: 0
}
Object.keys(storage).forEach((prop: any) => {
const el: any = storage[prop];
uni.setStorage({
key: prop,
data: el
})
});
popup.value.close();
};
}
})
} else {
uni.showToast({
title: res.data.errmsg,
icon: 'none'
});
}
console.log(res);
})
};
// 初始产品规格数据
const resetSelected = () => {
// 初始产品规格数据
const resetSelected = () => {
specificationList()
selectedGoodsItem.value.id = detailData.value?.id;
selectedGoodsItem.value.img = detailData.value?.productList[0].url;
......@@ -304,39 +361,40 @@ const resetSelected = () => {
selectedGoodsItem.value.specName = '';
selectedGoodsItem.value.num = 1;
radioValue.value = detailData.value?.specificationList[0].valueList[0].value;
};
};
// 修改商品规格
const changeColor = (e: any) => {
// 修改商品规格
const changeColor = (e: any) => {
const selected = e.detail.data;
console.log('选择产品规格', selected);
selectedGoodsItem.value.id = selected.id;
selectedGoodsItem.value.img = selected.picUrl;
selectedGoodsItem.value.price = detailData.value?.productList[0].price;
selectedGoodsItem.value.specName = selected.text;
};
};
// 购买数量
const changeBuyNum = (value: number) => {
// 购买数量
const changeBuyNum = (value: number) => {
selectedGoodsItem.value.num = value;
};
};
// 选择选项卡
const onClickItem = (e: any) => {
// 选择选项卡
const onClickItem = (e: any) => {
if (current.value != e.currentIndex) {
current.value = e.currentIndex;
}
};
};
// 初始化商品详情数据
const initDetails = (id: number) => {
indexDetails({ id }).then((res: any) => {
if (res.data.code === 200) {
}
// 初始化商品详情数据
const initDetails = (id: number) => {
indexDetails({
id
}).then((res: any) => {
if (res.data.code === 200) {}
// 去除数据 换行符
for (let s in res.data.data?.attribute) {
const value = res.data.data?.attribute[s].value.split('\n')
if(value.length > 1) {
if (value.length > 1) {
let str: string = ''
value.forEach((item: string) => {
str += ' ' + item
......@@ -347,11 +405,33 @@ const initDetails = (id: number) => {
detailData.value = res.data.data;
console.log(detailData.value, '商品详情数据');
});
}
}
const getProductIdByOne = (s1: any) => {
console.log(s1);
let productId;
let s1Name: string;
_.each(detailData.value?.specificationList, (specification: any) => {
_.each(specification.valueList, (specValue: any) => {
if (specValue.id === s1) {
s1Name = specValue.text;
return;
}
});
});
_.each(detailData.value?.productList, (v: any) => {
let result = _.without(v.specifications, s1Name);
if (result.length === 0) {
productId = v.id;
}
});
return productId;
}
</script>
<style lang="scss" scoped>
.goods-detail {
.goods-detail {
//height: 800rpx;
//background-color: #FFFFFF;
......@@ -391,6 +471,7 @@ const initDetails = (id: number) => {
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.goods-sub {
font-size: 12px;
color: #ccc;
......@@ -401,6 +482,7 @@ const initDetails = (id: number) => {
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.goods-price {
color: #dd524d;
//position: absolute;
......@@ -416,6 +498,7 @@ const initDetails = (id: number) => {
font-weight: bold;
}
}
.goods-cost-price {
color: #ccc;
text-decoration: line-through;
......@@ -423,10 +506,12 @@ const initDetails = (id: number) => {
margin-left: 10rpx;
}
}
.cell-group {
margin-top: 20rpx;
border-radius: 30rpx;
}
.goods-detail-item {
margin-top: 20rpx;
background-color: #ffffff;
......@@ -444,6 +529,7 @@ const initDetails = (id: number) => {
padding: 40rpx;
display: flex;
border-bottom: 1px solid #ebeef5;
//position: absolute;
.goods-mini-img {
width: 100rpx;
......@@ -455,32 +541,39 @@ const initDetails = (id: number) => {
.goods-text {
margin-top: 10rpx;
margin-left: 50rpx;
.goods-price {
color: #dd524d;
display: flex;
.unit {
font-size: 10px;
}
.price {
font-size: 16px;
font-weight: bold;
}
}
.goods-selected {
margin-top: 20rpx;
display: flex;
}
}
}
.goods-spec {
margin-left: 30rpx;
}
}
.popup-bottom-button {
height: 80rpx;
display: flex;
flex: 1;
color: rgb(255, 255, 255);
.add-to-cart {
display: flex;
flex: 1;
......@@ -491,6 +584,7 @@ const initDetails = (id: number) => {
border-radius: 50rpx;
background: linear-gradient(90deg, rgb(255, 205, 30), rgb(255, 138, 24));
}
.buy-now {
display: flex;
flex: 1;
......@@ -510,12 +604,14 @@ const initDetails = (id: number) => {
margin-top: 20rpx;
border-radius: 30rpx;
display: flex;
.shop-logo-box {
padding: 30rpx;
height: 100rpx;
width: 100rpx;
border-radius: 10rpx;
overflow: hidden;
.shop-logo {
width: 100%;
height: 100%;
......@@ -525,15 +621,18 @@ const initDetails = (id: number) => {
.shop-desc {
flex: 1;
.shop-name {
font-weight: bold;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
line-height: 160rpx;
}
}
.shop-enter-button {
line-height: 160rpx;
padding-right: 30rpx;
text {
color: rgb(255, 138, 24);
font-size: 24rpx;
......@@ -543,6 +642,7 @@ const initDetails = (id: number) => {
}
}
}
.goods-intro {
//height: 160rpx;
background-color: #ffffff;
......@@ -568,25 +668,29 @@ const initDetails = (id: number) => {
background-color: #ffffff;
padding-bottom: env(safe-area-inset-bottom);
}
}
}
.attr-content {
.attr-content {
padding: 32rpx 40rpx;
.title {
text-align: center;
margin-bottom: 100rpx;
}
.details {
width: 100%;
font-size: 14px;
.left {
display: inline-block;
width: 40%;
padding: 20rpx 0;
}
.right {
padding: 20rpx 0;
}
}
}
}
</style>
src/pages/login/login.vue
浏览文件 @ 5728bdc6
......@@ -20,7 +20,7 @@ import { reactive } from 'vue';
import { login } from '@/api/login';
import inputLogin from '@/components/inputLogin.vue';
let inputData = reactive({
inputValue: 'user123' as any,
inputValue: '15616168157' as any,
iconfont: 'icon-a-ziyuan16',
placeholder: '手机号码',
type: 'text',
......@@ -63,8 +63,8 @@ let clickNextStep = () => {
};
// user123
let initLogin = async (username: number, password: string) => {
let res: any = await login({ username, password });
let initLogin = async (mobile: number, password: string) => {
let res: any = await login({ mobile, password });
if (res.data.errno == 0) {
uni.setStorage({
key: 'token',
......@@ -74,7 +74,7 @@ let initLogin = async (username: number, password: string) => {
url: '../profile/index',
success() {
uni.setStorage({
key: 'username',
key: 'mobile',
data: inputData.inputValue,
success() {
uni.showToast({
......
src/pages/order/checkout.vue 0 → 100644
浏览文件 @ 5728bdc6
<template>
<view class="container">
<!-- 收货地址 -->
<view class="address" @tap="tapAddresss">
<view class="top">
<text>收货地址</text>
<u-icon name="arrow-right"></u-icon>
</view>
<view class="bottom">
<view class="">
<text style="margin-right: 10rpx;">{{ buyNowData?.checkedAddress.name }}</text>
<text>{{ buyNowData?.checkedAddress.tel }}</text>
</view>
<text>{{ buyNowData?.checkedAddress.addressDetail }}</text>
</view>
</view>
<!-- 商品详情 -->
<view v-for="(item, index) in buyNowData?.checkedGoodsList" class="details">
<u-image width="140rpx" height="200rpx" :src="item.picUrl" class="img"></u-image>
<view class="right">
<view class="name">
{{ item.goodsName }}
</view>
<view class="tag" v-for="(item1, index1) in item.specifications.length" :key="index1">
<u-tag :text="item.specifications[index1]" type="info" size="mini" style="margin-right: 2rpx;" />
</view>
<view class="sum-price">
<text>￥{{ item.price.toFixed(2) }}</text>
<text style="color: #969799; font-size: 12px;">x{{ item.number }}</text>
</view>
</view>
</view>
<!-- list -->
<view class="list">
<view class="item-list">
<view class="label">商品金额</view>
<view class="item-price">￥{{ buyNowData?.goodsTotalPrice.toFixed(2) }}</view>
</view>
<view class="item-list">
<view class="label">邮费</view>
<view class="item-price">￥{{ buyNowData?.freightPrice.toFixed(2) }}</view>
</view>
<!-- <view class="item-list">
<view class="label">优惠券</view>
<view class="item-price">￥12</view>
</view> -->
<view class="item-list-end">
<view class="label">订单备注</view>
<u-input v-model="remarks" />
</view>
</view>
<!-- 提交订单 -->
<view class="footer">
<view>
<text style="font-size: 30rpx;">总计</text>
<text
style="margin-right: 24rpx; color: #ee0a24; font-size: 30rpx; font-weight: 600;">￥{{ buyNowData?.orderTotalPrice.toFixed(2) }}</text>
<u-button type="error" size="medium" shape="circle" @tap="onsubmit">结算</u-button>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import {
onLoad,
onShow
} from '@dcloudio/uni-app';
import {
ref
} from 'vue'
import {
checkoutCart,
orderDetail,
orderSubmit
} from '@/api/index'
const buyNowId = ref(uni.getStorageSync('buyNowId'))
const buyNowData = ref()
const remarks = ref() // 订单备注
// onLoad(() => {
// initCheckoutCart(buyNowId.value)
// })
// 设置地址
const tapAddresss = () => {
uni.navigateTo({
url: `../profile/address?cartId=${buyNowId.value}`
})
}
// 结算
const onsubmit = () => {
let data: object = {
addressId: uni.getStorageSync('addressId'),
cartId: uni.getStorageSync('cartId'),
couponId: uni.getStorageSync('couponId'),
grouponLinkId: 0,
grouponRulesId: uni.getStorageSync('grouponRulesId'),
message: remarks.value,
userCouponId: 0
}
// 提交订单
orderSubmit(data).then((res: any) => {
console.log(res);
orderDetail({
orderId: res.data.data.orderId
}).then((res1: any) => {
console.log(res1, '订单详情信息');
uni.switchTab({
url: '../profile/index'
})
})
})
}
// 初始化数据
const initCheckoutCart = (cartId: number) => {
let couponId = uni.getStorageSync('couponId')
let userCouponId = uni.getStorageSync('userCouponId')
let grouponRulesId = uni.getStorageSync('grouponRulesId')
let addressId = uni.getStorageSync('addressId')
checkoutCart({
cartId,
couponId,
userCouponId,
grouponRulesId,
addressId
}).then((res: any) => {
buyNowData.value = res.data.data
let storage: any = {
addressId: res.data.data.addressId,
cartId: res.data.data.cartId,
couponId: res.data.data.couponId,
userCouponId: res.data.data.userCouponId,
grouponRulesId: res.data.data.grouponRulesId
}
Object.keys(storage).forEach((prop: any) => {
const el: any = storage[prop];
uni.setStorage({
key: prop,
data: el
})
});
console.log(buyNowData.value, '购买数据');
})
}
onShow(() => {
initCheckoutCart(buyNowId.value)
})
</script>
<style lang="scss" scoped>
.container {
.address {
width: 100%;
padding: 20rpx 32rpx;
border-top: 2rpx solid #e8e8e8;
background-color: #fff;
margin-bottom: 20rpx;
.top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10rpx;
}
.bottom {
font-size: 24rpx;
color: #969799;
line-height: 36rpx;
}
}
.details {
width: 100%;
padding: 16rpx 32rpx;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
background-color: #fff;
.img {
margin-right: 20rpx;
}
.tag {
margin-top: 1%;
margin-bottom: 13%;
}
.right {
width: 80%;
.sum-price {
display: flex;
justify-content: space-between;
}
}
}
.list {
width: 100%;
display: flex;
background-color: #fff;
flex-direction: column;
.item-list {
width: 100%;
padding: 20rpx 32rpx;
display: flex;
justify-content: space-between;
.label {
width: 30%;
}
.item-price {
color: #db3d3c;
}
}
.item-list-end {
padding: 20rpx 32rpx;
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
.label {
width: 30%;
}
}
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 100rpx;
background-color: #fff;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0 32rpx;
}
}
</style>
src/pages/profile/addSite.vue 0 → 100644
浏览文件 @ 5728bdc6
<template>
<view class="wrap">
<view class="top">
<view class="item">
<view class="left">收货人</view>
<input type="text" placeholder-class="line" placeholder="请填写收货人姓名" />
</view>
<view class="item">
<view class="left">手机号码</view>
<input type="text" placeholder-class="line" placeholder="请填写收货人手机号" />
</view>
<view class="item" @tap="showRegionPicker">
<view class="left">所在地区</view>
<input disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" />
</view>
<view class="item address">
<view class="left">详细地址</view>
<textarea type="text" placeholder-class="line" placeholder="街道、楼牌等" />
</view>
<!-- <view class="site-clipboard">
<textarea placeholder-class="line" value="" placeholder="粘贴文本,可自动识别姓名和地址等" />
<view class="clipboard">
地址粘贴板
<u-icon name="arrow-down" class="icon" :size="20"></u-icon>
</view>
</view> -->
</view>
<view class="bottom">
<view class="tag">
<view class="left">标签</view>
<view class="right">
<text class="tags">家</text>
<text class="tags">公司</text>
<text class="tags">学校</text>
<view class="tags plus">
<u-icon size="22" name="plus"></u-icon>
</view>
</view>
</view>
<view class="default">
<view class="left">
<view class="set">设置默认地址</view>
<view class="tips">提醒：每次下单会默认推荐该地址</view>
</view>
<view class="right">
<switch color="red" @change="setDefault" />
</view>
</view>
</view>
<u-picker mode="region" ref="uPicker" v-model="show" />
</view>
</template>
<script setup lang="ts">
import {
ref
} from 'vue'
import { cartCheckout } from '@/api/index'
const show = ref(false)
const setDefault = () => {}
const showRegionPicker = () => {
show.value = true;
}
</script>
<style lang="scss" scoped>
::v-deep .line {
color: $u-light-color;
font-size: 28rpx;
}
.wrap {
background-color: #f2f2f2;
.top {
background-color: #ffffff;
border-top: solid 2rpx $u-border-color;
padding: 22rpx;
.item {
display: flex;
font-size: 32rpx;
line-height: 100rpx;
align-items: center;
border-bottom: solid 2rpx $u-border-color;
.left {
width: 180rpx;
}
input {
text-align: left;
}
}
.address {
padding: 20rpx 0;
textarea {
// width: 100%;
height: 150rpx;
background-color: #f7f7f7;
line-height: 60rpx;
margin: 40rpx auto;
padding: 20rpx;
}
}
.site-clipboard {
padding-right: 40rpx;
textarea {
// width: 100%;
height: 150rpx;
background-color: #f7f7f7;
line-height: 60rpx;
margin: 40rpx auto;
padding: 20rpx;
}
.clipboard {
display: flex;
justify-content: center;
align-items: center;
font-size: 26rpx;
color: $u-tips-color;
height: 80rpx;
.icon {
margin-top: 6rpx;
margin-left: 10rpx;
}
}
}
}
.bottom {
margin-top: 20rpx;
padding: 40rpx;
padding-right: 0;
background-color: #ffffff;
font-size: 28rpx;
.tag {
display: flex;
.left {
width: 160rpx;
}
.right {
display: flex;
flex-wrap: wrap;
.tags {
width: 140rpx;
padding: 16rpx 8rpx;
border: solid 2rpx $u-border-color;
text-align: center;
border-radius: 50rpx;
margin: 0 10rpx 20rpx;
display: flex;
font-size: 28rpx;
align-items: center;
justify-content: center;
color: $u-content-color;
line-height: 1;
}
.plus {
//padding: 10rpx 0;
}
}
}
.default {
margin-top: 50rpx;
display: flex;
justify-content: space-between;
border-bottom: solid 2rpx $u-border-color;
line-height: 64rpx;
.tips {
font-size: 24rpx;
}
.right {}
}
}
}
</style>
src/pages/profile/address.vue
浏览文件 @ 5728bdc6
<template>
<view>
<view class="item" v-for="(res, index) in siteList" :key="res.id" @tap="setAddress(res.id)">
<view class="top">
<view class="name">{{ res.name }}</view>
<view class="phone">{{ res.tel }}</view>
<!-- <view class="tag">
<text v-for="(item, index) in res.tag" :key="index" :class="{red:item.tagText=='默认'}">{{ item.tagText }}</text>
</view> -->
</view>
<view class="bottom">
{{ res.province + res.city + res.county + res.addressDetail }}
<!-- <u-icon name="edit-pen" :size="40" color="#999999"></u-icon> -->
</view>
</view>
<view class="addSite" @tap="toAddSite">
<view class="add">
<u-icon name="plus" color="#ffffff" class="icon" :size="30"></u-icon>新建收货地址
</view>
</view>
</view>
</template>
<script>
<script setup lang="ts">
import {
onLoad
} from '@dcloudio/uni-app';
import {
ref
} from 'vue'
import {
addressList,
cartCheckout
} from '@/api/index'
const siteList = ref([] as any)
const cartId = ref()
onLoad((options: any) => {
cartId.value = JSON.parse(options.cartId)
console.log(cartId.value);
})
// 新增地址
const toAddSite = () => {
uni.navigateTo({
url: './addSite'
});
}
// 设置地址
const setAddress = (id: any) => {
if(uni.getStorageSync('123')) {
console.log('有');
} else {
console.log('无');
}
setTimeout(() => {
uni.setStorage({
key: 'addressId',
data: id
})
uni.navigateBack({
delta: 1
})
}, 50);
}
const getData = () => {
siteList.value = [{
id: 1,
tag: [{
tagText: '默认'
},
{
tagText: '家'
}
],
site: '广东省深圳市宝安区 自由路66号'
}];
}
const initAddressLit = () => {
addressList().then((res: any) => {
siteList.value = res.data.data.list
})
}
initAddressLit()
</script>
<style>
<style lang="scss" scoped>
page {
background-color: #fff;
padding: 0 20rpx;
}
.item {
padding: 40rpx 20rpx;
.top {
display: flex;
font-weight: bold;
font-size: 34rpx;
.phone {
margin-left: 60rpx;
}
.tag {
display: flex;
font-weight: normal;
align-items: center;
text {
display: block;
width: 60rpx;
height: 34rpx;
line-height: 34rpx;
color: #ffffff;
font-size: 20rpx;
border-radius: 6rpx;
text-align: center;
margin-left: 30rpx;
background-color: rgb(49, 145, 253);
}
.red {
background-color: red
}
}
}
.bottom {
display: flex;
margin-top: 20rpx;
font-size: 28rpx;
justify-content: space-between;
color: #999999;
}
}
.addSite {
position: fixed;
bottom: 30rpx;
left: 80rpx;
display: flex;
justify-content: space-around;
width: 600rpx;
line-height: 100rpx;
// position: absolute;
background-color: red;
border-radius: 60rpx;
font-size: 30rpx;
.add {
display: flex;
align-items: center;
color: #ffffff;
.icon {
margin-right: 10rpx;
}
}
}
</style>
src/utils/config.ts
浏览文件 @ 5728bdc6
......@@ -2,7 +2,7 @@ const CONFIG: any = {
// 开发环境配置
development: {
assetsPath: 'http://192.168.2.210:8080', // 静态资源路径
baseUrl: 'http://193.112.67.73:81', // 后台接口请求地址
baseUrl: 'http://192.168.0.23:80', // 后台接口请求地址
hostUrl: 'http://192.168.2.210:8080', // H5地址(前端运行地址)
websocketUrl: '', // websocket服务端地址
},
......
src/utils/request.ts
浏览文件 @ 5728bdc6
import config from './config';
import { nextTick } from 'vue';
const baseUrl = config.baseUrl;
// 封装公共申请办法
......@@ -8,7 +9,7 @@ function request(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', data?:
if (uni.getStorageSync('token') !== undefined && uni.getStorageSync('token') !== '') {
header = {
'content-type': 'application/json',
'X-Litemall-Token': uni.getStorageSync('token')
'X-Litemall-Token': uni.getStorageSync('token'),
};
} else {
let pages = getCurrentPages();
......@@ -32,13 +33,30 @@ function request(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', data?:
header: header,
success(res: any) {
uni.hideLoading();
if (res.statusCode == 200) {
if (res.data.code == 200) {
resolve(res);
} else if (res.data.code == 501) {
console.log(res);
nextTick(() => {
uni.reLaunch({
url: '/pages/login/login',
success() {
uni.showToast({
title: res.data.msg,
icon: 'none',
});
},
fail(err) {
console.log(err);
}
});
});
} else {
console.log(res);
//其余异样
uni.showToast({
title: res.data.errmsg,
icon: 'none'
title: res.data.error,
icon: 'none',
});
reject(res);
}
......@@ -48,10 +66,10 @@ function request(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', data?:
//申请失败
uni.showToast({
title: '连接服务器失败',
icon: 'none'
icon: 'none',
});
reject(err);
}
},
});
});
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论