Compare commits

...

8 Commits

Author SHA1 Message Date
2bdbe5c962 2025-10-24
细节修改
2025-10-24 16:55:40 +08:00
e51649e559 2025-10-24
金融修改
2025-10-24 16:44:01 +08:00
b4ece2d3d5 2025-10-24
我的页面添加刷新
2025-10-24 16:02:33 +08:00
5769349d08 2025-10-24
我的订单修改
2025-10-24 15:56:41 +08:00
81dba82be3 2025-10-24
我的订单
2025-10-24 15:10:06 +08:00
d283a1cc58 2025-10-24
多商品支付页面修改
2025-10-24 09:54:23 +08:00
19e4c8bf08 2025-10-24
购物车
2025-10-23 17:25:39 +08:00
0e2dbdb9db 2025-10-23
商品搜索
2025-10-23 13:49:19 +08:00
18 changed files with 1329 additions and 634 deletions

View File

@@ -9,11 +9,20 @@ export const mallAPI = {
getCategory: () => http.get(baseUrl + '/api/category'),
getMallDetail: (id) => http.get(baseUrl + '/api/products/' + id),
getRecommended: (id) => http.get(baseUrl + `/api/products/${id}/recommended`), // 推荐商品
addCart: (data) => http.post(baseUrl +"/api/cart/add", data), // 添加购物车
createOrder: (data) => http.post(baseUrl + `/api/orders/create-from-cart`,data), // 创建订单
getOrder: (orderId) => http.get(baseUrl + `/api/orders/pending-payment/${orderId}`), // 获取订单
payment: (data) => http.post(baseUrl + "/api/orders/confirm-payment", data), // 支付订单
getCouponList: (uid) => http.get(baseUrl + `/api/coupon/user/${uid}`)
getCouponList: (uid) => http.get(baseUrl + `/api/coupon/user/${uid}`), // 获取优惠券列表
// 购物车
getCartList: () => http.get(baseUrl + "/api/cart"), // 获取购物车列表
addCart: (data) => http.post(baseUrl + "/api/cart/add", data), // 添加购物车
editCartQuantity: (item) => http.put(baseUrl + `/api/cart/${item.id}`, {quantity: item.quantity}), // 修改数量
deleteCart: (id) => http.delete(baseUrl + `/api/cart/${id}`), // 删除
getOrderList: (params) => http.get(baseUrl + "/api/orders", params), // 获取订单列表
createOrder: (data) => http.post(baseUrl + `/api/orders/create-from-cart`, data), // 创建订单
getOrder: (orderId) => http.get(baseUrl + `/api/orders/pending-payment/${orderId}`), // 获取订单
cancelOrder: (orderId) => http.put(baseUrl + `/api/orders/${orderId}/cancel`), // 取消订单
confirmOrder: (orderId) => http.put(baseUrl + `/orders/${orderId}/confirm`), // 收货
}
export default {

View File

@@ -55,7 +55,7 @@
},
{
"path": "pages/finance/service",
"path": "pages/my/commonProblem",
"style": {
"navigationBarTitleText": "客服中心",
"navigationStyle": "custom"
@@ -76,13 +76,6 @@
"navigationStyle": "custom"
}
},
{
"path": "pages/mall/mall",
"style": {
"navigationBarTitleText": "商城",
"navigationStyle": "custom"
}
},
{
"path": "pages/message/chat",
"style": {
@@ -138,41 +131,38 @@
}
},
{
"path" : "pages/home/pay",
"style" :
{
"navigationBarTitleText" : "确认订单",
"path": "pages/home/pay",
"style": {
"navigationBarTitleText": "确认订单",
"backgroundColor": "#E4ECFF",
"enablePullDownRefresh": true
}
},
{
"path" : "pages/my/order",
"style" :
{
"navigationBarTitleText" : "我的订单"
}
},
{
"path" : "pages/home/mallSearch",
"style" :
{
"navigationBarTitleText" : "搜索商品",
"path": "pages/my/order",
"style": {
"navigationBarTitleText": "我的订单",
"navigationStyle": "custom"
}
},
{
"path" : "pages/my/getCoupons",
"style" :
{
"navigationBarTitleText" : "领券中心"
"path": "pages/home/mallSearch",
"style": {
"navigationBarTitleText": "搜索商品",
"navigationStyle": "custom"
}
},
{
"path" : "pages/my/car",
"style" :
{
"navigationBarTitleText" : "购物车"
"path": "pages/my/getCoupons",
"style": {
"navigationBarTitleText": "领券中心"
}
},
{
"path": "pages/my/car",
"style": {
"navigationBarTitleText": "购物车",
"navigationStyle": "custom"
}
}
],

View File

@@ -1,6 +1,7 @@
<template>
<view class="finance-container">
<u-navbar :is-back="false" title="金融理财" :background="{ background: 'transparent' }" title-color="#FFFFFF"></u-navbar>
<u-navbar :is-back="false" title="金融理财" :border-bottom="false" :background="{ background: 'transparent' }"
title-color="#FFFFFF"></u-navbar>
<!-- 可滚动的内容区域 -->
<view class="content-container" :style="'height:'+height+'px'">
<view class="searchFilter" id="searchFilterId">
@@ -11,19 +12,18 @@
</view>
<view class="product-list" :style="'height:'+scrollHeight+'px'">
<scroll-view scroll-y="true" style="height: 100%;" v-if="productList.length!=0" @scrolltolower="loadData">
<view class="product-item" v-for="item in productList" :key="item.id">
<scroll-view scroll-y="true" style="height: 100%;" v-if="productList.length!=0"
@scrolltolower="loadData">
<view class="product-item" v-for="item in productList" :key="item.id"
@click="handleproduction(item)">
<view class="product-name">
{{item.name}}
{{item.productName}}
</view>
<view class="product-rate">
利率{{item.rate}}%
利率{{item.expectedReturnRate}}%
</view>
<view class="product-intro">
产品简介{{item.introduction}}
</view>
<view class="product-detail-link" @click="handleproduction(item)">
查看详情
公司{{item.company}}
</view>
</view>
<u-loadmore color="#666" :status="status" />
@@ -53,10 +53,10 @@
uni.getSystemInfo({
success(res) {
let screenHeight = res.screenHeight
uni.createSelectorQuery().in(instance?.proxy).select("#tabbarId").boundingClientRect((data: any) => {
uni.createSelectorQuery().in(instance?.proxy).select("#tabbarId").boundingClientRect((data : any) => {
height.value = screenHeight - data.height
}).exec()
uni.createSelectorQuery().in(instance?.proxy).select("#searchFilterId").boundingClientRect((data: any) => {
uni.createSelectorQuery().in(instance?.proxy).select("#searchFilterId").boundingClientRect((data : any) => {
scrollHeight.value = height.value - data.height
}).exec()
}
@@ -78,60 +78,29 @@
if (status.value == 'nomore') return
financeAPI.getList(params.value).then(res => {
console.log('API返回数据:', res)
if (res.data && res.data.list) {
// 检查数据结构并映射字段
const mappedList = res.data.list.map((item: any, index: number) => ({
id: item.id || index,
name: item.productName || item.name || '未知产品',
rate: item.interestRate || item.rate || '0',
introduction: item.desc || item.introduction || item.productDesc || '暂无简介'
}))
productList.value = productList.value.concat(mappedList)
console.log('当前产品列表:', productList.value)
productList.value = productList.value.concat(res.data.list)
}
status.value = 'nomore'
uni.stopPullDownRefresh()
}).catch(err => {
console.error('API调用失败:', err)
status.value = 'nomore'
uni.stopPullDownRefresh()
})
}
// 查看详情 - 传递完整产品数据
const handleproduction = (item: any) => {
console.log('点击查看详情,产品数据:', item)
// 确保数据包含必要的字段
const productData = {
name: item.name || '未知产品',
rate: item.rate || '0',
introduction: item.introduction || '暂无简介'
}
console.log('准备传递的产品数据:', productData)
// 将产品数据转换为JSON字符串传递
const encodedData = encodeURIComponent(JSON.stringify(productData))
console.log('编码后的数据:', encodedData)
const handleproduction = (item : any) => {
uni.navigateTo({
url: `/pages/finance/production?productData=${encodedData}`
url: `/pages/finance/production?id=${item.id}`
})
}
// 查询
const handleSearch = () => {
params.value = {
page: 1,
size: defaultSize,
keyword: params.value.keyword
}
params.value.page = 1
productList.value = []
status.value = 'loadmore'
loadData()
}
@@ -199,12 +168,12 @@
// 移除产品简介显示 */
.product-intro {
font-size: 26rpx;
color: #666;
line-height: 1.5;
margin-bottom: 20rpx;
display: block; // 确保显示
}
font-size: 26rpx;
color: #666;
line-height: 1.5;
margin-bottom: 20rpx;
display: block; // 确保显示
}
.product-detail-link {
font-size: 24rpx;

View File

@@ -4,166 +4,95 @@
back-icon-color="#fff" title-color="#fff">
</u-navbar>
<!-- 产品头部信息 -->
<view class="product-header">
<view class="product-name">
{{ productInfo.name }}
{{ productInfo.productName }}
</view>
<view class="product-date">
开始时间{{ productInfo.startDate }}
产品代码{{ productInfo.productCode }}
</view>
<view class="product-date">
开始时间{{ productInfo.createDate }}
</view>
<view class="profit-info">
近期盈亏{{ productInfo.recentProfit }}
近期盈亏{{ productInfo.expectedReturnRate }}
</view>
</view>
<!-- 基本信息卡片 -->
<view class="card">
<u-row class="u-m-b-20">
<u-col span="6" class="card-name">所在地</u-col>
<u-col span="6" class="card-value">{{ productInfo.location }}</u-col>
<u-col span="6" class="card-name">风险等级</u-col>
<u-col span="6" class="card-value">{{ productInfo.riskLevel }}</u-col>
</u-row>
<u-row class="u-m-b-20">
<u-col span="6" class="card-name">详细地址</u-col>
<u-col span="6" class="card-value">{{ productInfo.detailAddress }}</u-col>
<u-col span="6" class="card-name">产品类型</u-col>
<u-col span="6" class="card-value">{{ productInfo.productType }}</u-col>
</u-row>
<u-row class="u-m-b-20">
<u-col span="6" class="card-name">联系人</u-col>
<u-col span="6" class="card-value">{{ productInfo.contactPerson }}</u-col>
</u-row>
<u-row class="u-m-b-20">
<u-col span="6" class="card-name">结算方式</u-col>
<u-col span="6" class="card-value">{{ productInfo.settlementMethod }}</u-col>
</u-row>
<u-row>
<u-col span="6" class="card-name">产品企业</u-col>
<u-col span="6" class="card-value">{{ productInfo.company }}</u-col>
</u-row>
<u-row v-if="productInfo.user">
<u-col span="6" class="card-name">联系人</u-col>
<u-col span="6" class="card-value">{{ productInfo.user.username }}</u-col>
</u-row>
</view>
<!-- 产品需求 -->
<view class="card">
<view class="card-title">
产品需求<span>4</span>
<view class="icon">
<image style="width: 100%;height: 100%;" src="/static/icon/card-title-icon.png" mode=""></image>
</view>
项目介绍<span></span>
</view>
<view class="card-body">
<u-row class="sub-title u-m-b-20">
<u-col span="12">需求名称</u-col>
</u-row>
<u-row class="u-m-b-20">
<u-col span="6" text-align="left" class="card-name">产品简介</u-col>
<u-col span="6" class="card-value">{{ productInfo.introduction }}</u-col>
</u-row>
<u-row class="u-m-b-20">
<u-col span="6" text-align="left" class="card-name">限价</u-col>
<u-col span="6" class="card-value">详情</u-col>
</u-row>
<u-row class="u-m-b-20">
<u-col span="6" text-align="left" class="card-name">时间</u-col>
<u-col span="6" class="card-value">详情</u-col>
</u-row>
<u-row class="u-m-b-20">
<u-col span="6" text-align="left" class="card-name">其他要求</u-col>
<u-col span="6" class="card-value">详情</u-col>
</u-row>
</view>
</view>
<!-- 产品动态 -->
<view class="card">
<view class="card-title">
产品动态
</view>
<view class="card-body">
<u-row class="u-m-b-20">
<u-col span="6" text-align="left" class="card-name">发布时间</u-col>
<u-col span="6" class="card-value">{{ productInfo.publishDate }}</u-col>
</u-row>
<u-row>
<u-col span="6" text-align="left" class="card-name">年化增长</u-col>
<u-col span="6" class="card-value">{{ productInfo.rate }}%</u-col>
</u-row>
<view class="u-m-t-10 editor-content-view">
<view v-html="productInfo.introduction"></view>
</view>
</view>
<!-- 底部按钮 -->
<view class="bottom-actions">
<u-button class="consult-btn" @click="handleConsult">立即咨询</u-button>
<u-button hover-class="none" class="consult-btn" @click="handleConsult">立即咨询</u-button>
</view>
</view>
<u-toast ref="msgToast"></u-toast>
</template>
<script setup lang="ts">
import { ref } from 'vue';
<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import { financeAPI } from '../../api/finnancial';
const msgToast = ref()
// 产品信息响应式数据
const productInfo = ref({
name: '理财产品名称',
startDate: '2025/09/13',
recentProfit: 'XXXX',
location: '浙江-宁波',
detailAddress: 'xx区xx路xxx号',
contactPerson: 'XXX',
settlementMethod: '按月结算次月支付50%',
company: 'xxxx公司',
publishDate: '2025-09-13',
rate: '0',
introduction: '暂无简介'
})
// 立即咨询
const handleConsult = () => {
uni.navigateTo({
url: '/pages/finance/service'
});
msgToast.value.show({
title: '暂未开发,请耐心等待~'
})
}
onLoad((options) => {
console.log('=== 详情页面开始加载 ===')
console.log('接收到的参数:', options)
// 产品信息响应式数据
const productInfo = ref({})
const id = ref()
// 解析传递过来的产品数据
if (options.productData) {
try {
console.log('原始 productData:', options.productData)
const loadData = () => {
financeAPI.getProgram(id.value).then(res => {
productInfo.value = res.data
})
}
// 解码数据
const decodedData = decodeURIComponent(options.productData)
console.log('解码后的数据:', decodedData)
onLoad((val) => {
id.value = val.id
})
// 解析JSON
const receivedData = JSON.parse(decodedData)
console.log('解析后的数据对象:', receivedData)
console.log('接收到的产品名称:', receivedData.name)
console.log('接收到的产品利率:', receivedData.rate)
console.log('接收到的产品简介:', receivedData.introduction)
// 直接更新产品信息
if (receivedData.name) {
productInfo.value.name = receivedData.name
}
if (receivedData.rate) {
productInfo.value.rate = receivedData.rate
}
if (receivedData.introduction) {
productInfo.value.introduction = receivedData.introduction
}
console.log('=== 更新后的产品信息 ===')
console.log('产品名称:', productInfo.value.name)
console.log('产品利率:', productInfo.value.rate)
console.log('产品简介:', productInfo.value.introduction)
} catch (error) {
console.error('解析产品数据失败:', error)
console.log('错误详情:', error.message)
}
} else {
console.log('未接收到 productData 参数')
}
onMounted(() => {
loadData()
})
</script>

View File

@@ -5,7 +5,7 @@
refresher-enabled="true" @refresherrefresh="reflash">
<view class="header-search">
<u-search :action-style="searchBtn" shape="square" bg-color="#CADBFF" placeholder="输入商品名称或商品种类"
v-model="keyword"></u-search>
v-model="keyword" @search="handleSearch" @custom="handleSearch"></u-search>
</view>
<view class="menu-list">
@@ -139,6 +139,7 @@
</scroll-view>
</view>
<Tabbar id="tabbarId"></Tabbar>
<u-toast ref="msgToast" duration="6000" />
</template>
<script setup lang="ts">
import {
@@ -146,6 +147,9 @@
} from 'vue';
import { mallAPI } from '../../api/mall';
import { getImageUrl } from '../../util/common';
const msgToast = ref()
const instance = getCurrentInstance();
const height = ref(0)
@@ -171,6 +175,20 @@
}
const iconWidth = "65%"
const handleSearch = () => {
if (!keyword.value) {
msgToast.value.show({
title: '请输入搜索词',
type: 'warning'
})
return
}
uni.navigateTo({
url: '/pages/home/mallSearch?search=' + keyword.value
})
keyword.value = ''
}
const handleCategory = () => {
uni.navigateTo({
url: '/pages/home/mallCategory'

View File

@@ -15,7 +15,7 @@
</view>
</view>
<view class="menu-level2" v-if="categoryList[currentCate]?.relative.length!=0">
<view class="menu-item" v-for="item in categoryList[currentCate]?.relative">
<view class="menu-item" v-for="item in categoryList[currentCate]?.relative" @click="handleSearchCategory(item)">
<u-image v-if="item.img" :fade="false" :src="getImageUrl(item.img)" :width="iconWidth"
mode="widthFix"></u-image>
<view class="menu-text">
@@ -117,6 +117,12 @@
currentCate.value = index
}
const handleSearchCategory = (item) => {
uni.navigateTo({
url: '/pages/home/mallSearch?cate=' + item.name
})
}
const params = ref({
keyword: '',
page: 1,

View File

@@ -118,11 +118,11 @@
</view>
</view>
<u-popup v-model="showSure" mode="bottom" length="70%" :closeable="true" blur="90%">
<u-popup v-model="showSure" mode="bottom" length="70%" :closeable="true">
<scroll-view scroll-y="true" style="height: 100%;">
<view class="sure-popup">
<view class="title">{{popTitle}}</view>
<view class="address">
<!-- <view class="address">
<view class="text">
<image style="width: 40rpx;height: 40rpx;" src="/static/icon/Map pin2.png" mode=""></image>
<view class="u-m-l-10">张三 | </view>
@@ -132,7 +132,7 @@
<image style="width: 100%;height: 100%;" src="/static/icon/Chevron right Menu.png" mode="">
</image>
</view>
</view>
</view> -->
<view class="count-select u-p-l-10 u-p-r-10">
<view class="pre-view">
<u-image :src="getImageUrl(dataInfo.image_url)" height="100%" width="100%">
@@ -167,15 +167,15 @@
</view>
</view>
</view>
<view class="spec-option">
<!-- <view class="spec-option">
<view class="title">
订单备注
</view>
<view class="">
<u-input type="textarea" :border="true" :height="100" v-model="order.orderNote"></u-input>
</view>
</view>
<view class="spec-option">
</view> -->
<view class="submit-btn">
<u-button @click="handleSubmit">{{popTitle}}</u-button>
</view>
</view>
@@ -199,7 +199,8 @@
mallAPI
} from '../../api/mall';
import {
getImageUrl, arrayContainsAll
getImageUrl,
arrayContainsAll
} from '../../util/common.js';
const instance = getCurrentInstance();
@@ -351,7 +352,7 @@
if (res.success) {
msgRef.value.show({
title: '已加入购物车',
type: 'error'
type: 'success'
})
} else {
msgRef.value.show({
@@ -679,6 +680,7 @@
.sure-popup {
background: #F5F8FF;
padding-bottom: 20rpx;
height: 100%;
.title {
font-weight: 274;
@@ -763,5 +765,12 @@
}
}
}
.submit-btn {
padding: 0 20rpx;
position: absolute;
bottom: 20rpx;
width: 100%;
}
}
</style>

View File

@@ -1,15 +1,261 @@
<template>
<view class="search-container">
<u-navbar id="navBar" title="" :background="{ background: '#E4ECFF' }">
<view class="slot-wrap">
<u-search :show-action="false" placeholder="输入商品名称或商品种类" v-model="params.search" bgColor="#CADBFF"
@search="handleSearch"></u-search>
</view>
<template v-slot:right>
<u-icon class="more-dot-fill" name="more-dot-fill"></u-icon>
</template>
</u-navbar>
<view class="filter" id="filterFixed">
<view class="sort-menu">
<u-tabs :show-bar="false" :list="sortList" :is-scroll="false" v-model="currentSort"
@change="changeSort"></u-tabs>
</view>
<view class="icon" @click="viewType=!viewType">
<image style="width: 100%;height: 100%;" src="/static/icon/view-change.png" mode=""></image>
</view>
</view>
<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px'" class="scroll-view" @scrolltolower="loadData">
<view :class="viewType?'mall-list':'mall-list2'">
<view class="mall-item" v-for="item in mallList" @click="handleCheck(item)">
<view class="item-img">
<u-lazy-load style="width: 100%;height: 100%;" img-mode="widthFix"
:image="getImageUrl(item.image)" threshold="-450" border-radius="10"></u-lazy-load>
</view>
<view class="item-info">
<view>{{item.name}}</view>
<view>积分{{item.points_price}}</view>
<view>融豆{{item.rongdou_price}}</view>
</view>
</view>
</view>
<u-loadmore margin-top="20" :status="loadStatus"></u-loadmore>
<view class="box-div"></view>
</scroll-view>
</view>
<u-toast ref="msgToast" duration="6000" />
</template>
<script setup>
import {
ref,
computed,
getCurrentInstance,
onMounted,
reactive
} from 'vue';
import {
getImageUrl
} from '../../util/common.js'
import {
mallAPI
} from '../../api/mall';
import {
onLoad
} from '@dcloudio/uni-app'
const msgToast = ref()
const instance = getCurrentInstance();
const scrollHeight = ref(0)
const loadHeight = () => {
uni.getSystemInfo({
success(res) {
let screenHeight = res.screenHeight
uni.createSelectorQuery().in(instance.proxy).select("#navBar").boundingClientRect((data) => {
scrollHeight.value = screenHeight - data.height
}).exec()
uni.createSelectorQuery().in(instance.proxy).select("#filterFixed").boundingClientRect((
data) => {
scrollHeight.value = scrollHeight.value - data.height
}).exec()
}
})
}
const viewType = ref(true)
const params = ref({
page: 1,
limit: 10,
category: '',
search: '',
sort: ''
})
const handleSearch = () => {
params.value.page = 1
loadStatus.value = 'loadmore'
mallList.value = []
loadData()
}
const sortList = reactive([{
name: '默认'
}, {
name: '价格高到低'
}, {
name: '价格低到高',
}, {
name: '销量',
}])
const currentSort = ref(0)
const changeSort = (val) => {
// sortprice_desc价格升序price_asc价格降序sales_desc销量升序
console.log(val);
switch (val) {
case 0:
params.value.sort = ''
break
case 1:
params.value.sort = 'price_desc'
break
case 2:
params.value.sort = 'price_asc'
break
case 2:
params.value.sort = 'sales_desc'
break
}
params.value.page = 1
loadStatus.value = 'loadmore'
mallList.value = []
loadData()
}
const handleCheck = (item) => {
uni.navigateTo({
url: '/pages/home/mallDetail?id=' + item.id
})
}
const mallList = ref([])
const loadStatus = ref('loadmore') // nomore
const maxPage = ref(1)
const loadData = () => {
if (loadStatus.value == 'nomore') return
mallAPI.getMallList(params.value).then((res) => {
mallList.value = mallList.value.concat(res.data.products)
maxPage.value = res.data.pagination.pages
params.value.page++
if (maxPage.value < params.value.page) {
loadStatus.value = 'nomore'
}
})
}
onLoad((val) => {
params.value.category = val.cate || ''
params.value.search = val.search || ''
})
onMounted(() => {
loadHeight()
loadData()
})
</script>
<style scoped lang="scss">
.search-container{
.search-container {
width: 100%;
height: 100%;
background: var(--Color, #E4ECFF);
.more-dot-fill {
width: 48rpx;
height: 48rpx;
margin-right: 24rpx;
}
.filter {
display: flex;
background: #fff;
align-items: center;
padding-right: 20rpx;
.sort-menu {
flex: 1;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
width: 24rpx;
height: 24rpx;
}
}
.scroll-view {
.mall-list {
display: flex;
flex-wrap: wrap;
.mall-item {
width: 100%;
display: flex;
background: #F5F8FF;
margin: 8rpx 0;
padding: 20rpx;
.item-img {
width: 220rpx;
height: 220rpx;
margin-right: 66rpx;
}
.item-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
}
}
.mall-list2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 20rpx;
.mall-item {
width: 47%;
display: flex;
background: #F5F8FF;
margin: 8rpx 4rpx;
padding: 20rpx;
flex-direction: column;
align-items: center;
justify-content: center;
.item-img {
width: 100%;
}
.item-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
}
}
.box-div {
padding: 10rpx 0rpx;
}
}
}
</style>

View File

@@ -56,12 +56,11 @@
<view class="u-m-t-10" style="font-weight: 500;font-size: 20rpx;">选择优惠券后自动换算扣除</view>
</view>
<view class="box-bg pay-method u-m-t-20" v-if="dataInfo.items?.length && dataInfo.items.length!=0">
<view class="box-bg pay-method u-m-t-20" v-if="supportMethod.length!=0">
<view class="title u-m-b-20">
支付方式
</view>
<view class="item" v-if="dataInfo?.items[0].payment_methods.includes('rongdou')"
@click="handleChangeMethod(0)">
<view class="item" v-if="supportMethod.includes('rongdou')" @click="handleChangeMethod(0)">
<view class="title">
融豆
</view>
@@ -69,8 +68,7 @@
<u-checkbox v-model="rongdouChecked" shape="circle" active-color="#305def"></u-checkbox>
</view>
</view>
<view class="item" v-if="dataInfo?.items[0].payment_methods.includes('points')"
@click="handleChangeMethod(1)">
<view class="item" v-if="supportMethod.includes('points')" @click="handleChangeMethod(1)">
<view class="title">
积分
</view>
@@ -78,8 +76,7 @@
<u-checkbox v-model="pointsChecked" shape="circle" active-color="#305def"></u-checkbox>
</view>
</view>
<view class="item" v-if="dataInfo?.items[0].payment_methods.includes('mixed')"
@click="handleChangeMethod(2)">
<view class="item" v-if="supportMethod.includes('mixed')" @click="handleChangeMethod(2)">
<view class="title">
融豆+积分
</view>
@@ -87,8 +84,7 @@
<u-checkbox v-model="rpChecked" shape="circle" active-color="#305def"></u-checkbox>
</view>
</view>
<view class="item" v-if="dataInfo?.items[0].payment_methods.includes('alipay')"
@click="handleChangeMethod(3)">
<view class="item" v-if="supportMethod.includes('alipay')" @click="handleChangeMethod(3)">
<view class="title">
支付宝
</view>
@@ -96,8 +92,7 @@
<u-checkbox v-model="alipayChecked" shape="circle" active-color="#305def"></u-checkbox>
</view>
</view>
<view class="item" v-if="dataInfo?.items[0].payment_methods.includes('wechatpay')"
@click="handleChangeMethod(4)">
<view class="item" v-if="supportMethod.includes('wechatpay')" @click="handleChangeMethod(4)">
<view class="title">
微信
</view>
@@ -113,8 +108,8 @@
<view class="text">
实际支付
<image v-if="rpChecked || pointsChecked" src="/static/icon/jifen.png" class="icon" mode=""></image>
<image v-else-if="rongdouChecked || wechatpayChecked || alipayChecked" src="/static/icon/rongdou.png"
class="icon" mode=""></image>
<image v-else-if="rongdouChecked" src="/static/icon/rongdou.png" class="icon" mode=""></image>
<span v-else></span>
{{allPayNum}}
</view>
<view class="btn">
@@ -174,20 +169,6 @@
uni.navigateBack();
}
const instance = getCurrentInstance();
const scrollHeight = ref(0)
const loadHeight = () => {
uni.getSystemInfo({
success(res) {
let screenHeight = res.screenHeight
uni.createSelectorQuery().in(instance.proxy).select("#boxBottom").boundingClientRect((
data) => {
scrollHeight.value = screenHeight - data.height
}).exec()
}
})
}
// 收获地址
const showSelectAddress = ref(false)
const addressOptions = ref([])
@@ -281,8 +262,11 @@
// 计算实际支付
const calculateAllPay = () => {
allPayNum.value = 0
if (rongdouChecked.value) { // 融豆
allPayNum.value = dataInfo.value.items[0].rongdou_price * dataInfo.value.items[0].quantity
dataInfo.value.items.forEach(item => {
allPayNum.value += item.rongdou_price * item.quantity
})
// 选择优惠券
if (couponRecordId.value) {
let couponInfo = couponList.value.filter(item => item.couponInfo.id == couponRecordId.value)[0]
@@ -290,7 +274,9 @@
handle1to1(couponInfo)
}
} else if (pointsChecked.value) { // 积分
allPayNum.value = dataInfo.value.items[0].points_price * dataInfo.value.items[0].quantity
dataInfo.value.items.forEach(item => {
allPayNum.value += item.points_price * item.quantity
})
// 选择优惠券
if (couponRecordId.value) {
let couponInfo = couponList.value.filter(item => item.couponInfo.id == couponRecordId.value)[0]
@@ -298,7 +284,9 @@
handle1to10000(couponInfo)
}
} else if (rpChecked.value) { // 融豆+积分
allPayNum.value = dataInfo.value.items[0].points_price * dataInfo.value.items[0].quantity
dataInfo.value.items.forEach(item => {
allPayNum.value += item.points_price * item.quantity
})
// 选择优惠券
if (couponRecordId.value) {
let couponInfo = couponList.value.filter(item => item.couponInfo.id == couponRecordId.value)[0]
@@ -306,7 +294,9 @@
handle1to10000(couponInfo)
}
} else if (alipayChecked.value) { // 支付宝
allPayNum.value = dataInfo.value.items[0].price * dataInfo.value.items[0].quantity
dataInfo.value.items.forEach(item => {
allPayNum.value += item.price * item.quantity
})
// 选择优惠券
if (couponRecordId.value) {
let couponInfo = couponList.value.filter(item => item.couponInfo.id == couponRecordId.value)[0]
@@ -314,7 +304,9 @@
handle1to1(couponInfo)
}
} else if (wechatpayChecked.value) { // 微信
allPayNum.value = dataInfo.value.items[0].price * dataInfo.value.items[0].quantity
dataInfo.value.items.forEach(item => {
allPayNum.value += item.price * item.quantity
})
// 选择优惠券
if (couponRecordId.value) {
let couponInfo = couponList.value.filter(item => item.couponInfo.id == couponRecordId.value)[0]
@@ -325,6 +317,7 @@
if (allPayNum.value < 0) allPayNum.value = 0
}
// 折扣计算
const handle1to1 = (couponInfo) => {
if (couponInfo.type == 'discount_for_a_amount') { // 满减
if (allPayNum.value > couponInfo.for_a_amount) {
@@ -337,6 +330,7 @@
}
}
// 折扣计算
const handle1to10000 = (couponInfo) => {
if (couponInfo.type == 'discount_for_a_amount') { // 满减
if (allPayNum.value > (couponInfo.for_a_amount * 10000)) {
@@ -425,6 +419,19 @@
const dataInfo = ref({})
const couponList = ref({})
const supportMethod = ref([])
function getCommonPaymentMethods(data) {
if (!data.items || data.items.length === 0) {
return [];
}
return data.items
.map(item => item.payment_methods)
.reduce((common, current) =>
common.filter(method => current.includes(method))
);
}
const loadData = async () => {
// 订单信息
@@ -434,6 +441,7 @@
if (item.payment_methods.includes('rongdou') && item.payment_methods.includes(
'points')) item.payment_methods.push('mixed')
})
supportMethod.value = getCommonPaymentMethods(dataInfo.value)
})
uni.stopPullDownRefresh()
}
@@ -487,7 +495,6 @@
})
onMounted(() => {
loadHeight()
userId.value = uni.getStorageSync("user").id
loadData()
loadCoupon()

View File

@@ -1,336 +0,0 @@
<template>
<view class="mall-container">
<u-navbar :is-fixed="false" title="商城好物" :background="{background: 'transparent' }" :border-bottom="false"
back-icon-color="#fff" title-color="#fff">
<template v-slot:right>
<image src="/static/icon/zhu.png" style="width: 50rpx;height: 50rpx;margin-right: 24rpx;" mode=""></image>
</template>
</u-navbar>
<view class="search">
<u-search @search="reloadMallData" placeholder="点击查询商品" v-model="params.keyword" :show-action="false"
bg-color="#FEEFCE" </u-search>
</view>
<view class="menu-list">
<view class="menu-item" v-for="(item, index) in menuList" @click="handleMenuChange(index)">
<view class="img-box">
<image class="img" :src="'/static/mall/'+(index+1)+'.png'" mode=""></image>
</view>
<view class="menu-text" :class="currentMenu==index?'menu-text-actice':''">
<view class="text" :class="currentMenu==index?'text-actice':''">
{{item}}
</view>
</view>
</view>
</view>
<view class="mall-list">
<u-waterfall v-model="mallList" ref="mallListRef">
<template v-slot:left="{leftList}">
<view class="mall-item u-m-r-10" v-for="(item, index) in leftList" :key="index">
<u-lazy-load threshold="-450" border-radius="10" :image="getImageUrl(item.image_url)"
:index="index"></u-lazy-load>
<view class="mall-title u-m-l-5 u-m-r-5">
{{item.name}}
</view>
<del class="u-m-l-5 u-m-r-5" style="white-space: nowrap;">{{item.price}}</del>
<view class="mall-price u-m-l-5 u-m-r-5" v-if="RDType(item.payment_methods)">
<image src="/static/icon/rongdou.png" class="icon" mode=""></image>
{{item.rongdou_price}}
</view>
<view class="mall-price u-m-l-5 u-m-r-5" v-if="pointsType(item.payment_methods)">
<u-icon name="integral"></u-icon>
{{item.points_price}}
</view>
<view class="mall-tag u-m-l-5 u-m-r-5">
<view class="mall-tag-text" v-if="RDType(item.payment_methods)">
融豆
</view>
<view class="mall-tag-owner" v-if="pointsType(item.payment_methods)">
积分
</view>
</view>
<view class="mall-shop u-m-l-5 u-m-r-5">
{{item.category}}
</view>
</view>
</template>
<template v-slot:right="{rightList}">
<view class="mall-item u-m-l-10" v-for="(item, index) in rightList" :key="index">
<u-lazy-load threshold="-450" border-radius="10" :image="getImageUrl(item.image_url)"
:index="index"></u-lazy-load>
<view class="mall-title u-m-l-5 u-m-r-5">
{{item.name}}
</view>
<del class="u-m-l-5 u-m-r-5" style="white-space: nowrap;">{{item.price}}</del>
<view class="mall-price u-m-l-5 u-m-r-5" v-if="RDType(item.payment_methods)">
<image src="/static/icon/rongdou.png" class="icon" mode=""></image>
{{item.rongdou_price}}
</view>
<view class="mall-price u-m-l-5 u-m-r-5" v-if="pointsType(item.payment_methods)">
<u-icon name="integral"></u-icon>
{{item.points_price}}
</view>
<view class="mall-tag u-m-l-5 u-m-r-5">
<view class="mall-tag-text" v-if="RDType(item.payment_methods)">
融豆
</view>
<view class="mall-tag-owner" v-if="pointsType(item.payment_methods)">
积分
</view>
</view>
<view class="mall-shop u-m-l-5 u-m-r-5">
{{item.category}}
</view>
</view>
</template>
</u-waterfall>
<u-loadmore margin-top="20" :status="loadStatus"></u-loadmore>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { onReachBottom } from '@dcloudio/uni-app'
import { mallAPI } from '../../api/mall';
import { getImageUrl } from '../../util/common';
const params = ref({
keyword: '',
page: 1,
size: 5,
category: ''
})
const mallList = ref([])
const mallListRef = ref()
const loadStatus = ref('loadmore') // nomore
const maxPage = ref(1)
// 积分兑换
const pointsType = (val : any) => {
if (val && val.indexOf("points") >= 0) return true
return false
}
// 融豆兑换
const RDType = (val : any) => {
if (val && val.indexOf("rongdou") >= 0) return true
return false
}
// 加载数据
const loadMallData = () => {
if (loadStatus.value == 'nomore') return
mallAPI.getMallList(params.value).then((res) => {
mallList.value = mallList.value.concat(res.data.products)
maxPage.value = res.data.pagination.pages
params.value.page++
if (maxPage.value < params.value.page) {
loadStatus.value = 'nomore'
}
})
}
// 清空选项
const clearData = () => {
params.value = {
keyword: params.value.keyword,
page: 1,
size: 5,
category: ''
}
menuCategoryMap(currentMenu.value)
maxPage.value = 1
mallList.value = []
mallListRef.value.clear()
loadStatus.value = 'loadmore'
}
// 重新加载
const reloadMallData = () => {
clearData()
loadMallData()
}
// 菜单映射
const menuCategoryMap = (val) => {
switch (val) {
case 0:
params.value.category = ''
break
case 1:
params.value.category = '服装配饰'
break
case 2:
params.value.category = '日用百货'
break
case 3:
params.value.category = '数码产品'
break
case 4:
params.value.category = '美妆饰品'
break
case 5:
params.value.category = '食品饮料'
break
}
}
// 菜单
const menuList = ["全部商品", "精美服饰", "日用百货", "电子数码", "美妆饰品", "食物饮品"]
const currentMenu = ref(0)
const handleMenuChange = (val : number) => {
currentMenu.value = val
menuCategoryMap(val)
reloadMallData()
}
// 上拉刷新
onReachBottom(() => {
loadMallData()
})
onMounted(() => {
loadMallData()
})
</script>
<style scoped lang="scss">
.mall-container {
width: 100%;
background: linear-gradient(180deg, #FFAE00 0%, #FFF0D0 40.87%, #FFFFFF 58.17%);
height: 100vh;
.search {
padding: 32rpx;
}
// 菜单
.menu-list {
display: flex;
margin: 0 30rpx;
overflow: hidden;
overflow-x: scroll;
.menu-item {
white-space: nowrap;
margin-right: 30rpx;
// border: 1px solid #FFAE00;
.img-box {
width: 100%;
display: flex;
justify-content: center;
.img {
width: 66rpx;
height: 66rpx;
}
}
.menu-text {
font-family: Work Sans;
font-weight: 700;
font-style: Bold;
font-size: 26rpx;
leading-trim: NONE;
line-height: 100%;
letter-spacing: -2%;
text-align: center;
color: #F7F7EF;
margin-top: 10rpx;
}
.menu-text-actice {
margin-top: 5rpx;
padding: 4rpx 10rpx 0;
color: #FA941F;
background-color: #fee9bb;
border-radius: 20rpx;
}
.text-actice {
padding: 2rpx 0rpx;
border-bottom: 4rpx solid #FA941F;
}
}
}
// 商城列表
.mall-list {
margin-top: 20rpx;
padding: 0 32rpx 20rpx;
.mall-item {
border-radius: 16rpx;
background-color: #ffffff;
position: relative;
margin-top: 20rpx;
box-shadow: 0px 4px 4px 0px #00000040;
padding-bottom: 10rpx;
.mall-title {
font-size: 30rpx;
margin-top: 10rpx;
color: $u-main-color;
}
.mall-price {
font-size: 30rpx;
color: $u-type-error;
margin-top: 10rpx;
.icon {
height: 30rpx;
width: 30rpx;
}
}
.mall-tag {
display: flex;
margin-top: 5px;
.mall-tag-owner {
background-color: $u-type-error;
color: #FFFFFF;
display: flex;
align-items: center;
padding: 4rpx 14rpx;
border-radius: 50rpx;
font-size: 20rpx;
line-height: 1;
}
.mall-tag-text {
margin-right: 10px;
border: 1px solid $u-type-primary;
color: $u-type-primary;
border-radius: 50rpx;
line-height: 1;
padding: 4rpx 14rpx;
display: flex;
align-items: center;
border-radius: 50rpx;
font-size: 20rpx;
}
}
.mall-shop {
font-size: 22rpx;
color: $u-tips-color;
margin-top: 5px;
}
}
}
}
</style>

View File

@@ -1,22 +1,297 @@
<template>
<view>
<view class="cart-container">
<u-navbar id="uNavbarId" back-text="购物车" :back-text-style="navBarTitle"
:background="{background: 'transparent' }" :border-bottom="false" back-icon-color="#000" title-color="#000">
<template v-slot:right>
<view class="right-menu">
<view @click="handleManage">
{{isManage?'退出管理':'管理'}}
</view>
</view>
</template>
</u-navbar>
<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px'">
<view class="cart-list">
<view class="cart-item" v-for="item in cartList">
<view class="left">
<u-checkbox v-model="item.isCheck" shape="circle" active-color="#305def"></u-checkbox>
<image style="height: 160rpx;width: 160rpx;" :src="getImageUrl(item.product.image_url)" mode="">
</image>
</view>
<u-row class="right">
<u-col :span="10">
<view>{{item.product.name}}</view>
<view>
<image class="icon" src="/static/icon/rongdou.png" mode=""></image>
{{item.product.rongdou_price}}
</view>
<view>
<image class="icon" src="/static/icon/jifen.png" mode=""></image>
{{item.product.points_price}}
</view>
<view>
<u-number-box bg-color="#E3ECFF" v-model="item.quantity"
@change="handleChangeQuantity(item)" :min="1"
:max="item.product.stock"></u-number-box>
</view>
</u-col>
<u-col :span="2" text-align="right">
<template v-if="!isManage">
x{{item.quantity}}
</template>
<template v-else>
<image @click="handleDeleteCart([item])" style="width: 40rpx;height: 40rpx;"
src="/static/icon/delete.png" mode="">
</image>
</template>
</u-col>
</u-row>
</view>
<view class="box-div">
</view>
</view>
</scroll-view>
<view class="box-bottom" id="boxBottom">
<u-checkbox v-model="isAllCheck" shape="circle" @change="handleSelectAll">全选</u-checkbox>
<view class="right">
合计
<image class="icon" src="/static/icon/rongdou.png" mode=""></image>
{{rongdou}}
<image class="icon" src="/static/icon/jifen.png" mode=""></image>
{{point}}
<u-button class="u-m-l-10" @click="handleSubmit">{{isManage?'删除':'结算'}}</u-button>
</view>
</view>
<!-- 确认是否删除 -->
<u-modal v-model="showDel" content="是否删除选中的商品" :show-cancel-button="true" @confirm="handleDel"></u-modal>
<!-- 提示 -->
<u-toast ref="msgRef" />
</view>
</template>
<script>
export default {
data() {
return {
<script setup>
import {
computed,
onMounted,
ref,
getCurrentInstance
} from 'vue';
import {
mallAPI
} from '../../api/mall.js';
import {
getImageUrl
} from '../../util/common.js';
import {
onShow
} from '@dcloudio/uni-app'
const msgRef = ref()
const instance = getCurrentInstance();
const scrollHeight = ref(0)
const loadHeight = () => {
uni.getSystemInfo({
success(res) {
let screenHeight = res.screenHeight
uni.createSelectorQuery().in(instance.proxy).select("#uNavbarId").boundingClientRect((
data) => {
scrollHeight.value = screenHeight - data.height
}).exec()
uni.createSelectorQuery().in(instance.proxy).select("#boxBottom").boundingClientRect((
data) => {
scrollHeight.value = scrollHeight - data.height
}).exec()
}
},
methods: {
})
}
const navBarTitle = {
fontWeight: '510',
fontStyle: 'Medium',
fontSize: '40rpx',
lineHeight: '52px'
}
const isManage = ref(false)
const handleManage = () => {
isManage.value = !isManage.value
}
const isAllCheck = computed(() => {
if (cartList.value.length == 0) return false
let tmpData = cartList.value.filter(item => item.isCheck)
calculate()
if (tmpData.length == cartList.value.length) return true
else return false
})
const handleSelectAll = () => {
if (isAllCheck.value) cartList.value.forEach(item => item.isCheck = false)
else cartList.value.forEach(item => item.isCheck = true)
calculate()
}
const handleChangeQuantity = (item) => {
mallAPI.editCartQuantity(item)
}
const showDel = ref(false)
const delItems = ref([])
const handleDeleteCart = (items) => {
delItems.value = items
showDel.value = true
}
const handleDel = async () => {
for (var i = 0; i < delItems.value.length; i++) {
await mallAPI.deleteCart(delItems.value[i].id)
}
loadData()
msgRef.value.show({
title: '删除成功',
type: 'success'
})
}
const handleSubmit = () => {
if (isManage.value) {
// 删除
delItems.value = cartList.value.filter(item => item.isCheck)
showDel.value = true
} else {
// 支付
const ids = cartList.value.map(item => item.id)
mallAPI.createOrder({
cart_item_ids: ids
}).then(response => {
if (response.success) {
// 进入支付页面
uni.navigateTo({
url: '/pages/home/pay?preOrderId=' + response.data.preOrderId
})
} else {
msgRef.value.show({
title: '操作失败',
type: 'error'
})
}
})
}
}
const rongdou = ref(0)
const point = ref(0)
const calculate = () => {
rongdou.value = 0
point.value = 0
cartList.value.forEach(item => {
if (item.isCheck) {
rongdou.value += item.quantity * item.product.rongdou_price
point.value += item.quantity * item.product.points_price
}
})
}
const cartList = ref([])
const loadData = () => {
mallAPI.getCartList().then(res => {
cartList.value = res.data.items
cartList.value.forEach(item => item.isCheck = false)
})
}
onShow(() => {
loadData()
})
onMounted(() => {
loadHeight()
})
</script>
<style>
<style lang="scss" scoped>
.cart-container {
width: 100%;
height: 100vh;
background: linear-gradient(180deg, #E3E8FF 0%, #FFFFFF 100%);
background-blend-mode: lighten;
.right-menu {
display: flex;
margin-right: 24rpx;
font-family: Work Sans;
font-weight: 500;
font-style: Medium;
font-size: 32rpx;
leading-trim: NONE;
line-height: 100%;
letter-spacing: -2%;
.del-text {
color: red;
}
.add-text {
color: #305DEF;
}
}
.cart-list {
.cart-item {
display: flex;
background: #E3ECFF;
padding: 20rpx;
margin-bottom: 10rpx;
.left {
display: flex;
justify-content: center;
}
.right {
flex: 1;
margin-left: 20rpx;
.icon {
width: 30rpx;
height: 30rpx;
}
}
}
.box-div {
padding: 60rpx 0;
}
}
.box-bottom {
width: 100%;
padding: 20rpx 40rpx;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
bottom: 0;
background: #F5F8FF;
.right {
display: flex;
justify-content: flex-end;
align-items: center;
.icon {
width: 30rpx;
height: 30rpx;
}
}
}
}
</style>

View File

@@ -1,6 +1,7 @@
<template>
<view class="my-container">
<scroll-view scroll-y="true" style="height: 100%;">
<scroll-view scroll-y="true" style="height: 100%;" :refresher-threshold="50" :refresher-triggered="isRefresher"
refresher-background="transparent" refresher-enabled="true" @refresherrefresh="reflash">
<view v-if="user!=null">
<view class="header">
<view class="header-user">
@@ -47,7 +48,7 @@
</view>
<view class="item" @click="shop_car">
<view class="count">
283
{{totalCartCount}}
</view>
<view class="title">
购物车
@@ -105,7 +106,7 @@
我的客户
</view>
</view>
<view class="menu-item">
<view class="menu-item" @click="navigatoCommonProblem">
<u-image src="/static/my/04.png" width="40%" mode="widthFix"></u-image>
<view class="menu-text">
常见问题
@@ -123,7 +124,7 @@
收货地址
</view>
</view>
<view class="menu-item">
<view class="menu-item" @click="handleOrder">
<u-image src="/static/my/07.png" width="40%" mode="widthFix"></u-image>
<view class="menu-text">
我的订单
@@ -138,6 +139,11 @@
</view>
<u-button class="u-m-t-20" @click="loginOut">退出登录</u-button>
<view class="box-div">
</view>
</view>
</scroll-view>
</view>
@@ -153,19 +159,41 @@
} from '../../api/auth.js';
import {
onShow
} from '@dcloudio/uni-app'
} from '@dcloudio/uni-app';
import {
mallAPI
} from '../../api/mall.js'
const user = ref()
const isRefresher = ref(false)
const reflash = () => {
isRefresher.value = true
loadData()
}
const handleShippingAddress = () => {
uni.navigateTo({
url: '/pages/my/shippingAddress'
})
}
const handleOrder = () => {
uni.navigateTo({
url: '/pages/my/order'
})
}
const totalCartCount = ref(0)
const loadData = () => {
authAPI.me().then(res => {
user.value = res.user
}).finally(() => {
isRefresher.value = false
})
mallAPI.getCartList().then(res => {
totalCartCount.value = res.data.items.length
})
}
@@ -182,17 +210,22 @@
url: '/pages/login/login'
})
}
const navigatorSrc = ()=>{
uni.navigateTo({
url:'/pages/my/getCoupons'
})
}
//购物车跳转
const shop_car = ()=>{
uni.navigateTo({
url:'/pages/my/car'
})
}
const navigatorSrc = () => {
uni.navigateTo({
url: '/pages/my/getCoupons'
})
}
//购物车跳转
const shop_car = () => {
uni.navigateTo({
url: '/pages/my/car'
})
}
const navigatoCommonProblem = () => {
uni.navigateTo({
url: '/pages/my/commonProblem'
})
}
</script>
<style scoped lang="scss">
@@ -356,5 +389,11 @@
}
}
}
.box-div {
padding: 60rpx 0rpx;
}
}
</style>

View File

@@ -1,13 +1,543 @@
<template>
<view>
<view class="order-container">
<u-navbar id="navBar" title="" :border-bottom="false" :background="{ background: '#F5F8FF' }">
<view class="slot-wrap">
<u-search :show-action="false" placeholder="搜索订单" v-model="params.search" bgColor="#CADBFF"
@search="handleSearch"></u-search>
</view>
<template v-slot:right>
<u-icon class="more-dot-fill" name="more-dot-fill"></u-icon>
</template>
</u-navbar>
<view class="box-tabs" id="tabsId">
<u-tabs bg-color="#F5F8FF" :show-bar="false" :list="tabList" :is-scroll="false"
v-model="currentTab"></u-tabs>
<view class="menu-list">
<!-- 'pending'待发货,'paid','shipped'已发货,'delivered','cancelled'已取消,'pre_order'预订单状态未选择地址和支付方式,'completed'已收货 -->
<view class="menu-item" :class="currentMenu==''?'active':''" @click="handleChangeMenu('')">全部订单</view>
<view class="menu-item" :class="currentMenu=='pending'?'active':''"
@click="handleChangeMenu('pending')">待发货</view>
<view class="menu-item" :class="currentMenu=='pre_order'?'active':''"
@click="handleChangeMenu('pre_order')">待支付</view>
<view class="menu-item" :class="currentMenu=='shipped'?'active':''"
@click="handleChangeMenu('shipped')">已发货</view>
<view class="menu-item" :class="currentMenu=='completed'?'active':''"
@click="handleChangeMenu('completed')">已完成</view>
<view class="menu-item" :class="currentMenu=='cancelled'?'active':''"
@click="handleChangeMenu('cancelled')">已取消</view>
</view>
</view>
<scroll-view scroll-y="true" class="scroll-view" :style="'height:'+scrollHeight+'px'" @scrolltolower="loadData">
<template v-if="currentTab==0">
111
</template>
<template v-if="currentTab==1">
<view class="order-list" v-for="orderItem in orderList">
<view class="u-m-l-20">订单号{{orderItem.order_no}}</view>
<view class="order-item" v-for="item in orderItem.items">
<view class="item-left">
<image style="width: 100%;height: 100%;" :src="getImageUrl(item.image_url)" mode="">
</image>
</view>
<view class="item-right">
<u-row>
<u-col :span="10">
<view>{{item.product_name}}</view>
<view style="display: flex;align-items: center;">
<image class="icon" src="/static/icon/rongdou.png" mode=""></image>
{{item.rongdou_price}}
</view>
<view style="display: flex;align-items: center;">
<image class="icon" src="/static/icon/jifen.png" mode=""></image>
{{item.points_price}}
</view>
</u-col>
<u-col :span="2" text-align="right">
<view>X{{item.quantity}}</view>
</u-col>
</u-row>
</view>
</view>
<view class="operate-btns">
<!-- 待发货 -->
<template v-if="orderItem.status=='pending'">
<u-button hover-class="none" class="operate-btn"
@click="handelCancel(orderItem)">取消订单</u-button>
</template>
<!-- 已支付 -->
<!-- <template v-if="orderItem.status=='paid'">
<u-button hover-class="none" class="operate-btn">取消订单</u-button>
</template> -->
<!-- 已发货 -->
<template v-if="orderItem.status=='shipped'">
<u-button hover-class="none" class="operate-btn"
@click="handleReceive(orderItem)">确认收货</u-button>
</template>
<!-- 已取消 -->
<!-- <template v-if="orderItem.status=='cancelled'">
<u-button hover-class="none" class="operate-btn">查看详情</u-button>
</template> -->
<!-- 待支付 -->
<template v-if="orderItem.status=='pre_order'">
<u-button hover-class="none" class="operate-btn"
@click="handelCancel(orderItem)">取消订单</u-button>
<u-button hover-class="none" class="operate-btn"
@click="handlePay(orderItem)">立即支付</u-button>
</template>
<!-- 完成 -->
<!-- <template v-if="orderItem.status=='completed'">
<u-button hover-class="none" class="operate-btn">评价</u-button>
</template> -->
<u-button hover-class="none" class="operate-btn"
@click="handleOrderDetail(orderItem)">查看详情</u-button>
</view>
</view>
<u-loadmore margin-top="20" :status="loadStatus"></u-loadmore>
<view class="box-view"></view>
</template>
<template v-if="currentTab==2">
222
</template>
</scroll-view>
</view>
<!-- 取消订单提示 -->
<u-modal @confirm="confirmCancel" v-model="showCancel" content="是否取消订单" :show-cancel-button="true"></u-modal>
<!-- 收货提示 -->
<u-modal @confirm="confirmReceive" v-model="showReceive" content="是否确认收到商品" :show-cancel-button="true"></u-modal>
<!-- 详情 -->
<u-modal v-model="showDetail" title="订单详情">
<view class="slot-content">
<view class="info-title">
订单信息
</view>
<view class="info-item">
<view class="info-name">订单号</view>
<view class="info-value">{{detailInfo.order_no}}</view>
</view>
<view class="info-item">
<view class="info-name">用户名</view>
<view class="info-value">{{detailInfo.username}}</view>
</view>
<view class="info-item">
<view class="info-name">下单时间</view>
<view class="info-value">{{detailInfo.created_at}}</view>
</view>
<view class="info-item">
<view class="info-name">更新时间</view>
<view class="info-value">{{detailInfo.updated_at}}</view>
</view>
<view class="info-item">
<view class="info-name">订单状态</view>
<!-- <view class="info-value">{{detailInfo.status}}</view> -->
<u-tag v-if="detailInfo.status=='pending'" text="待发货"></u-tag>
<u-tag v-if="detailInfo.status=='shipped'" text="已发货"></u-tag>
<u-tag v-if="detailInfo.status=='cancelled'" text="已取消"></u-tag>
<u-tag v-if="detailInfo.status=='pre_order'" text="预订单"></u-tag>
<u-tag v-if="detailInfo.status=='completed'" text="已收货"></u-tag>
</view>
<view class="info-item" v-if="detailInfo.address">
<view class="info-name">收货信息</view>
<view class="info-value">
{{detailInfo.address.recipient_name + " " + detailInfo.address.detail_address}}
</view>
</view>
<view class="info-title">
商品信息
</view>
<view class="order-item" v-for="item in detailInfo.items">
<view class="item-left">
<image style="width: 100%;height: 100%;" :src="getImageUrl(item.image_url)" mode="">
</image>
</view>
<view class="item-right">
<u-row>
<u-col :span="10">
<view>{{item.product_name}}</view>
<view style="display: flex;align-items: center;">
<image class="icon" src="/static/icon/rongdou.png" mode=""></image>
{{item.rongdou_price}}
</view>
<view style="display: flex;align-items: center;">
<image class="icon" src="/static/icon/jifen.png" mode=""></image>
{{item.points_price}}
</view>
</u-col>
<u-col :span="2" text-align="right">
<view>X{{item.quantity}}</view>
</u-col>
</u-row>
</view>
</view>
<view class="info-title">
费用明细
</view>
<view class="info-item">
<view class="info-name">商品总计</view>
<view class="info-value">
<image class="icon" src="/static/icon/rongdou.png" mode=""></image>
{{detailInfo.total_rongdou}}
</view>
</view>
<view class="info-item">
<view class="info-name">实付</view>
<view class="info-value" v-if="detailInfo.real_rongdou">
<image class="icon" src="/static/icon/rongdou.png" mode=""></image>
{{detailInfo.real_rongdou}}
</view>
<view class="info-value" v-else-if="detailInfo.real_points">
<image class="icon" src="/static/icon/jifen.png" mode=""></image>
{{detailInfo.real_points}}
</view>
</view>
</view>
</u-modal>
<!-- 消息提示 -->
<u-toast ref="msgRef" />
</template>
<script setup>
import {
ref,
onMounted,
getCurrentInstance,
computed,
watch
} from 'vue';
import {
onLoad,
onShow
} from '@dcloudio/uni-app'
import {
mallAPI
} from '../../api/mall';
import {
getImageUrl
} from '../../util/common.js'
const msgRef = ref()
const instance = getCurrentInstance();
const scrollHeight = ref(0)
const loadHeight = () => {
uni.getSystemInfo({
success(res) {
let screenHeight = res.screenHeight
uni.createSelectorQuery().in(instance.proxy).select("#navBar").boundingClientRect((data) => {
scrollHeight.value = screenHeight - data.height
}).exec()
uni.createSelectorQuery().in(instance.proxy).select("#tabsId").boundingClientRect((
data) => {
scrollHeight.value = scrollHeight.value - data.height
}).exec()
}
})
}
const navBarTitle = {
fontWeight: '510',
fontStyle: 'Medium',
fontSize: '40rpx',
lineHeight: '52px'
}
const handleSearch = () => {
msgRef.value.show({
title: '暂无功能,请期待~'
})
}
const tabList = ref([{
name: '项目订单'
}, {
name: '商品订单'
}, {
name: '理财产品',
}])
const currentTab = ref(1)
const currentMenu = ref(0)
watch(currentTab, (val) => {
if (val == 0 || val === 2) {
msgRef.value.show({
title: '暂无功能,请期待~'
})
currentTab.value = 1
return
}
loadData()
})
const handleChangeMenu = (val) => {
currentMenu.value = val
clearData()
params.value.status = val
loadData()
}
// 取消订单
const showCancel = ref(false)
const cancelId = ref()
const handelCancel = (item) => {
showCancel.value = true
cancelId.value = item.id
}
const confirmCancel = () => {
mallAPI.cancelOrder(cancelId.value).then(res => {
msgRef.value.show({
title: '取消成功',
type: 'success'
})
clearData()
loadData()
})
}
// 收货
const showReceive = ref(false)
const receiveId = ref()
const handleReceive = (item) => {
showReceive.value = true
receiveId.value = item.id
}
const confirmReceive = () => {
mallAPI.confirmOrder(receiveId.value).then(res => {
msgRef.value.show({
title: '收货成功',
type: 'success'
})
clearData()
loadData()
})
}
// 进入支付页面
const handlePay = (item) => {
uni.navigateTo({
url: '/pages/home/pay?preOrderId=' + item.id
})
}
// 详情
const showDetail = ref(false)
const detailInfo = ref({})
const allPay = computed(() => {
let data = 0
detailInfo.value.items.forEach(item => {
data += item.rongdou_price * item.quantity
})
return data
})
// 查看详情
const handleOrderDetail = (item) => {
showDetail.value = true
detailInfo.value = item
}
const params = ref({
page: 1,
limit: 10,
search: '',
status: ''
})
const loadStatus = ref('loadmore')
const maxPage = ref(1)
const orderList = ref([])
const loadData = () => {
if (currentTab.value == 0) {
// 项目订单
} else if (currentTab.value == 1) {
// 商品订单
if (loadStatus.value == 'nomore') return
mallAPI.getOrderList(params.value).then(res => {
orderList.value = orderList.value.concat(res.data.orders)
maxPage.value = res.data.pagination.pages
params.value.page++
if (maxPage.value < params.value.page) {
loadStatus.value = 'nomore'
}
console.log(orderList.value);
})
} else if (currentTab.value == 2) {
// 理财产品
}
}
const clearData = () => {
loadStatus.value = 'loadmore'
params.value.page = 1
params.value.search = ''
orderList.value = []
}
onShow(() => {
clearData()
loadData()
})
onMounted(() => {
loadHeight()
})
</script>
<style lang="scss">
<style lang="scss" scoped>
.order-container {
width: 100%;
height: 100vh;
background: var(--Color, #E4ECFF);
background-blend-mode: lighten;
.more-dot-fill {
width: 48rpx;
height: 48rpx;
margin-right: 24rpx;
}
.box-tabs {
background: #F5F8FF;
.menu-list {
display: flex;
font-weight: 400;
font-size: 26rpx;
line-height: 100%;
padding: 20rpx 20rpx;
overflow-x: auto;
white-space: nowrap;
.menu-item {
background: #DFDFDF;
border-radius: 12rpx;
padding: 12rpx 20rpx;
color: #676767;
margin: 0 10rpx;
}
.active {
background: #93B2FF80;
color: #305DEF;
}
}
}
.scroll-view {
.order-list {
background: #F5F8FF;
margin: 10rpx 0;
padding: 20rpx 0;
.order-item {
display: flex;
padding: 20rpx;
.item-left {
width: 160rpx;
height: 160rpx;
}
.item-right {
flex: 1;
.icon {
width: 30rpx;
height: 30rpx;
}
}
}
.operate-btns {
display: flex;
justify-content: flex-end;
.operate-btn {
margin: 10rpx;
width: 136rpx;
height: 52rpx;
background: #D4D9EA;
font-weight: 400;
font-size: 24rpx;
line-height: 100%;
border: none;
}
}
.box-view {
height: 20rpx;
}
}
}
}
.slot-content {
padding: 10rpx 20rpx 20rpx;
.icon {
width: 30rpx;
height: 30rpx;
}
.info-title {
font-weight: 400;
font-size: 30rpx;
line-height: 100%;
margin: 30prx 0;
}
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
margin: 20rpx 0;
.info-name {
font-weight: 400;
font-size: 24rpx;
line-height: 100%;
}
.info-value {
max-width: 50%;
font-weight: 400;
font-size: 24rpx;
line-height: 100%;
display: flex;
align-items: center;
}
}
.order-item {
display: flex;
padding: 20rpx;
.item-left {
width: 160rpx;
height: 160rpx;
}
.item-right {
flex: 1;
font-weight: 400;
font-size: 24rpx;
line-height: 100%;
}
}
}
</style>

View File

@@ -51,7 +51,7 @@
<view class="icon">
<image style="width: 100%;height: 100%;" src="/static/icon/card-title-icon.png" mode=""></image>
</view>
项目需求<span>4</span>
项目简介<span></span>
</view>
<view class="u-m-t-10 editor-content-view">
<view v-html="program.introduction"></view>

BIN
static/icon/delete.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 673 B

BIN
static/icon/view-change.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 260 B

View File

@@ -208,6 +208,10 @@ const handleError = (errorInfo) => {
})
// uToast.warning(data.message || '您的账户尚未激活,请完成支付后再使用')
}
} else if (!data.success) {
uni.redirectTo({
url: '/pages/login/login'
})
} else {
// uToast.error(data.message || '权限不足')
uni.showToast({