完成积分商城模块
This commit is contained in:
赵毅
parent
0a8c876ba8
commit
0b7d4dbc47
10
api/pointShop.js
Normal file
10
api/pointShop.js
Normal file
@ -0,0 +1,10 @@
|
||||
export const apiArr = {
|
||||
pointShopTab: "/api/v2/wechat/points-mall/tab", //积分商城tab
|
||||
pointShopPage: "/api/v2/wechat/points-mall/page", //积分商城列表分页
|
||||
platformPointsRule: "/api/v2/wechat/points-mall/platform-points-rule", //平台积分规则
|
||||
pointShopRecord: "/api/v2/wechat/points-mall/order/record", //积分商城兑换记录
|
||||
pointShopPay: "/api/v2/wechat/points-mall/order/pay", //积分商城订单支付
|
||||
pointOrderInfo: "/api/v2/wechat/points-mall/order/info", //积分商城订单详情
|
||||
pointShopAdd: "/api/v2/wechat/points-mall/order/add", //积分商城创建订单
|
||||
pointGoodInfo: "/api/v2/wechat/points-mall/info", //积分商城商品详情
|
||||
};
|
||||
362
packages/jfShop/detail/index.css
Normal file
362
packages/jfShop/detail/index.css
Normal file
@ -0,0 +1,362 @@
|
||||
/* 全局样式重置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 商品详情页容器 */
|
||||
.detail-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
padding-bottom: 100rpx;
|
||||
}
|
||||
|
||||
/* 轮播图容器 */
|
||||
.swiper-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 600rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.swiper-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.swiper-indicator {
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
right: 20rpx;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
/* 商品信息 */
|
||||
.product-info {
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 20rpx;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.price-number {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
color: #ff4d4f;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.price-unit {
|
||||
font-size: 28rpx;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 48rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.exchange-info {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 商品详情 */
|
||||
.product-details {
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1rpx solid #e8e8e8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.line {
|
||||
flex: 1;
|
||||
height: 1rpx;
|
||||
background-color: #000000;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.detail-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 底部操作栏 */
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
background-color: #fff;
|
||||
border-top: 1rpx solid #e8e8e8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.points-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.points-label {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.points-number {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #ff6262;
|
||||
}
|
||||
|
||||
.insufficient-points {
|
||||
width: 60%;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
background-color: #f0f0f0;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
border-radius: 35rpx;
|
||||
font-size: 28rpx;
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
.exchange-btn {
|
||||
width: 200rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
background-color: #ff4d4f;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 25rpx;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
position: absolute;
|
||||
right: 100rpx;
|
||||
}
|
||||
|
||||
/* 规格选择弹窗 */
|
||||
.spec-popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
padding: 30rpx;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.spec-price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.spec-price-number {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
color: #ff4d4f;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.spec-price-unit {
|
||||
font-size: 28rpx;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.spec-selected {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
font-size: 48rpx;
|
||||
color: #999;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
right: 30rpx;
|
||||
}
|
||||
|
||||
.spec-image {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.spec-image-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.spec-section {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.spec-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.spec-options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.spec-option {
|
||||
padding: 20rpx 30rpx;
|
||||
border: 1rpx solid #e8e8e8;
|
||||
border-radius: 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.spec-option.active {
|
||||
border-color: #ff4d4f;
|
||||
color: #ff4d4f;
|
||||
background-color: #fff2f0;
|
||||
}
|
||||
|
||||
.quantity-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 50rpx 30rpx;
|
||||
}
|
||||
|
||||
.quantity-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.quantity-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.quantity-btn {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
border: 1rpx solid #e8e8e8;
|
||||
background-color: #fafafa;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.quantity-btn:disabled {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.quantity-input {
|
||||
width: 80rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
border-top: 1rpx solid #e8e8e8;
|
||||
border-bottom: 1rpx solid #e8e8e8;
|
||||
}
|
||||
|
||||
.popup-footer {
|
||||
margin: 30rpx;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
background-color: #ff4d4f;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 40rpx;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 适配不同屏幕尺寸 */
|
||||
@media screen and (max-width: 375px) {
|
||||
|
||||
.price-number,
|
||||
.spec-price-number {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.exchange-btn,
|
||||
.confirm-btn {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
208
packages/jfShop/detail/index.vue
Normal file
208
packages/jfShop/detail/index.vue
Normal file
@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<view class="detail-container">
|
||||
<!-- 商品轮播图 -->
|
||||
<view class="swiper-container">
|
||||
<swiper indicator-dots :autoplay="false" :interval="3000" :duration="1000" indicator-active-color="#ff4d4f"
|
||||
style="height: 100%;">
|
||||
<swiper-item v-for="(item, index) in carouselImages" :key="index" style="height: 100%;">
|
||||
<image :src="item" mode="aspectFill" class="swiper-image"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="swiper-indicator">{{ currentImageIndex + 1 }}/{{ carouselImages.length }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<view class="product-info">
|
||||
<view class="product-price">
|
||||
<view>
|
||||
<text class="price-number">{{ selectedGoodsInfo.points }}</text>
|
||||
<text class="price-unit">积分</text>
|
||||
</view>
|
||||
<view class="exchange-info">已兑{{ productInfo.exchange_count }}件</view>
|
||||
</view>
|
||||
<view class="product-name">{{ productInfo.commodity_name }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品详情 -->
|
||||
<view class="product-details">
|
||||
<view class="detail-title">
|
||||
<view class="line"></view>
|
||||
<view>商品详情</view>
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
<view class="detail-content">
|
||||
<image v-for="(item, index) in detailImages" :key="index" :src="item" mode="widthFix"
|
||||
class="detail-image" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="bottom-bar">
|
||||
<view class="points-info">
|
||||
<text class="points-number">{{ selectedGoodsInfo.points }}积分</text>
|
||||
<text class="points-label">当前积分{{ userPoints }}</text>
|
||||
</view>
|
||||
<view v-if="userPoints < selectedGoodsInfo.points" class="insufficient-points">
|
||||
积分不足，还差{{ selectedGoodsInfo.points - userPoints }}积分哦
|
||||
</view>
|
||||
<button v-else class="exchange-btn" @click="showSpecPopup = true">立即兑换</button>
|
||||
<!-- <button class="exchange-btn" @click="showSpecPopup = true">立即兑换</button> -->
|
||||
</view>
|
||||
|
||||
<!-- 规格选择弹窗 -->
|
||||
<view v-if="showSpecPopup" class="spec-popup" @click.self="showSpecPopup = false">
|
||||
<view class="popup-content">
|
||||
<view class="close-btn" @click="showSpecPopup = false">×</view>
|
||||
<view class="popup-header">
|
||||
<view class="spec-image">
|
||||
<image :src="selectedGoodsInfo.goods_info.commodity_pic" class="spec-image-item">
|
||||
</image>
|
||||
</view>
|
||||
<view class="spec-info">
|
||||
<view class="spec-price">
|
||||
<text class="spec-price-number">{{ selectedGoodsInfo.points }}</text>
|
||||
<text class="spec-price-unit">积分</text>
|
||||
</view>
|
||||
<view class="spec-change">
|
||||
<view class="spec-selected">已选：{{ selectedGoodsInfo.goods_info.goods_name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="spec-section">
|
||||
<view class="spec-title">规格</view>
|
||||
<view class="spec-options">
|
||||
<view v-for="(spec, index) in productInfo.goods_info_list" :key="index"
|
||||
:class="['spec-option', { active: selectedSpecId === spec.id }]" @click="selectSpec(spec)">
|
||||
{{ spec.goods_info.goods_name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="quantity-section">
|
||||
<view class="quantity-title">数量</view>
|
||||
<view class="quantity-control">
|
||||
<button class="quantity-btn" @click="decreaseQuantity" :disabled="quantity <= 1">-</button>
|
||||
<view class="quantity-input">{{ quantity }}</view>
|
||||
<button class="quantity-btn" @click="increaseQuantity">+</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="popup-footer">
|
||||
<button class="confirm-btn" @click="confirmExchange">立即兑换</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request, picUrl, NavgateTo } from "../../../utils";
|
||||
import { apiArr } from "../../../api/pointShop";
|
||||
import { apiArr as apiArr2 } from '../../../api/v2User';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
productInfo: {},
|
||||
userPoints: 0,
|
||||
currentImageIndex: 0,
|
||||
showSpecPopup: false,
|
||||
selectedSpecId: 1,
|
||||
selectedSpec: '',
|
||||
quantity: 1,
|
||||
selectedGoodsInfo: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 处理轮播图数据
|
||||
carouselImages() {
|
||||
if (this.productInfo.commodity_carousel) {
|
||||
return this.productInfo.commodity_carousel.split(',').map(item => picUrl + item);
|
||||
}
|
||||
return [];
|
||||
},
|
||||
// 处理详情图片数据
|
||||
detailImages() {
|
||||
if (this.productInfo.commodity_detail_pic) {
|
||||
return this.productInfo.commodity_detail_pic.split(',').map(item => picUrl + item);
|
||||
}
|
||||
return [];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 选择规格
|
||||
selectSpec(spec) {
|
||||
this.selectedSpecId = spec.id;
|
||||
this.selectedSpec = spec.goods_info.goods_name;
|
||||
this.selectedGoodsInfo = {
|
||||
...spec,
|
||||
goods_info: {
|
||||
...spec.goods_info,
|
||||
commodity_pic: picUrl + spec.goods_info.commodity_pic
|
||||
}
|
||||
};
|
||||
this.quantity = 1;
|
||||
},
|
||||
// 减少数量
|
||||
decreaseQuantity() {
|
||||
if (this.quantity > 1) {
|
||||
this.quantity--;
|
||||
}
|
||||
},
|
||||
// 增加数量
|
||||
increaseQuantity() {
|
||||
if (this.quantity < this.selectedGoodsInfo.goods_info.stock && this.quantity < this.selectedGoodsInfo.goods_info.limit_buy) {
|
||||
this.quantity++;
|
||||
}
|
||||
},
|
||||
// 确认兑换
|
||||
confirmExchange() {
|
||||
const orderInfo = {
|
||||
productId: this.productInfo.id,
|
||||
specId: this.selectedSpecId,
|
||||
specName: this.selectedSpec,
|
||||
quantity: this.quantity,
|
||||
price: this.selectedGoodsInfo.points,
|
||||
goodsInfo: this.selectedGoodsInfo,
|
||||
}
|
||||
this.showSpecPopup = false;
|
||||
NavgateTo('/packages/jfShop/submitOrder/index?orderInfo=' + JSON.stringify(orderInfo));
|
||||
},
|
||||
// 获取用户积分
|
||||
getPointNum() {
|
||||
request(apiArr2.getUserInfo, 'POST', {}, { silent: false }).then(res => {
|
||||
this.userPoints = res.points;
|
||||
});
|
||||
},
|
||||
},
|
||||
onshow() {
|
||||
this.getPointNum();
|
||||
},
|
||||
onLoad(options) {
|
||||
this.getPointNum();
|
||||
const orderInfo = JSON.parse(options.product);
|
||||
const params = {
|
||||
id: orderInfo.id
|
||||
}
|
||||
request(apiArr.pointGoodInfo, 'POST', params, { silent: false }, false).then(res => {
|
||||
this.productInfo = res;
|
||||
// 默认选择第一个规格
|
||||
if (res.goods_info_list && res.goods_info_list.length > 0) {
|
||||
this.selectedSpecId = res.goods_info_list[0].id;
|
||||
this.selectedSpec = res.goods_info_list[0].goods_info.goods_name;
|
||||
this.selectedGoodsInfo = {
|
||||
...res.goods_info_list[0],
|
||||
goods_info: {
|
||||
...res.goods_info_list[0].goods_info,
|
||||
commodity_pic: picUrl + res.goods_info_list[0].goods_info.commodity_pic
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
@import url('./index.css');
|
||||
</style>
|
||||
169
packages/jfShop/index/index.css
Normal file
169
packages/jfShop/index/index.css
Normal file
@ -0,0 +1,169 @@
|
||||
.header {
|
||||
padding: 20rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header_top {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.header_sum {
|
||||
font-size: 55rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header_dec {
|
||||
font-size: 20rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.center{
|
||||
padding: 20rpx 70rpx;
|
||||
display: flex;
|
||||
justify-content: space-between ;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.center_item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image_item{
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
background-color: #f0f7ff;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 10rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image_item image{
|
||||
width: 45rpx;
|
||||
height: 45rpx;
|
||||
}
|
||||
|
||||
/* 分类导航样式 */
|
||||
.category-nav {
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.category-scroll {
|
||||
white-space: nowrap;
|
||||
padding: 0 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
display: inline-block;
|
||||
padding: 20rpx 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.category-item.active {
|
||||
color: #1e88e5;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.category-item.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100rpx;
|
||||
height: 4rpx;
|
||||
background-color: #1e88e5;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
|
||||
/* 商品列表样式 */
|
||||
.product-list {
|
||||
padding: 20rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.product-title {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
margin-bottom: 12rpx;
|
||||
width: 100%;
|
||||
line-height: 32rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.product-points {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #ff4444;
|
||||
}
|
||||
|
||||
.product-sold {
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.exchange-btn {
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
background-color: #ff4444;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
border-radius: 30rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 加载状态样式 */
|
||||
.loading, .no-more {
|
||||
text-align: center;
|
||||
padding: 30rpx 0;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
162
packages/jfShop/index/index.vue
Normal file
162
packages/jfShop/index/index.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="header">
|
||||
<image class="header_top" src="https://static.hshuishang.com/point_top.png" mode="" />
|
||||
<view class="header_sum">{{ pointsNum }}</view>
|
||||
<view class="header_dec">当前可用积分</view>
|
||||
</view>
|
||||
<view class="center">
|
||||
<view class="center_item" @click="toPage('mx')">
|
||||
<view class="image_item">
|
||||
<image class="header_top" src="https://static.hshuishang.com/point_mx.png" mode="" />
|
||||
</view>
|
||||
<view>积分明细</view>
|
||||
</view>
|
||||
<view class="center_item">
|
||||
<view class="image_item" @click="toPage('gz')">
|
||||
<image class="header_top" src="https://static.hshuishang.com/point_gz.png" mode="" />
|
||||
</view>
|
||||
<view>积分规则</view>
|
||||
</view>
|
||||
<view class="center_item">
|
||||
<view class="image_item" @click="toPage('jl')">
|
||||
<image class="header_top" src="https://static.hshuishang.com/point_jl.png" mode="" />
|
||||
</view>
|
||||
<view>兑换记录</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 分类导航 -->
|
||||
<view class="category-nav">
|
||||
<scroll-view scroll-x="true" class="category-scroll">
|
||||
<view v-for="(category, index) in categories" :key="index" class="category-item"
|
||||
:class="{ active: activeCategory === category.id }" @click="activeCategory = category.id">
|
||||
{{ category.category_name }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 商品列表 -->
|
||||
<scroll-view scroll-y="true" class="product-list" @scrolltolower="loadMore" style="height: calc(100vh - 300rpx);">
|
||||
<view v-for="(product, index) in products" :key="index" class="product-item">
|
||||
<image class="product-image" :src="product.commodity_pic" mode="aspectFill"></image>
|
||||
<view class="product-title">{{ product.commodity_name }}</view>
|
||||
<view class="product-info">
|
||||
<view class="product-points">{{ product.goods_info_list[0].points }} 积分</view>
|
||||
<view class="product-sold">已兑换{{ product.exchange_count }}件</view>
|
||||
</view>
|
||||
<view class="exchange-btn" @click="toDetail(product)">立即兑换</view>
|
||||
</view>
|
||||
<!-- 加载更多提示 -->
|
||||
<view v-if="loading" class="loading">加载中...</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request, picUrl, NavgateTo } from "../../../utils";
|
||||
import { apiArr } from "../../../api/pointShop";
|
||||
import { apiArr as apiArr2 } from '../../../api/v2User';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pointsNum: 0,
|
||||
activeCategory: '',
|
||||
categories: [],
|
||||
products: [],
|
||||
page_num: 1,
|
||||
page_size: 20,
|
||||
loading: false,
|
||||
noMore: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeCategory(newVal) {
|
||||
// 切换分类时重置数据
|
||||
this.page_num = 1;
|
||||
this.products = [];
|
||||
this.noMore = false;
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.getNum()
|
||||
this.getTab()
|
||||
this.page_num = 1;
|
||||
this.products = [];
|
||||
this.noMore = false;
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getNum() {
|
||||
request(apiArr2.getUserInfo, 'POST', {}, { silent: false }).then(res => {
|
||||
this.pointsNum = res.points;
|
||||
});
|
||||
},
|
||||
getTab() {
|
||||
request(apiArr.pointShopTab, 'POST', {}, { silent: false }, false).then(res => {
|
||||
this.categories = [{ id: '', category_name: '全部' }, ...res.tabs];
|
||||
});
|
||||
},
|
||||
getList() {
|
||||
if (this.loading || this.noMore) return;
|
||||
|
||||
this.loading = true;
|
||||
const params = {
|
||||
category_id: this.activeCategory,
|
||||
page_num: this.page_num,
|
||||
page_size: this.page_size
|
||||
}
|
||||
request(apiArr.pointShopPage, 'POST', params, { silent: false }, false).then(res => {
|
||||
this.loading = false;
|
||||
|
||||
const newProducts = res.row.map(item => {
|
||||
return {
|
||||
...item,
|
||||
commodity_pic: picUrl + item.commodity_pic,
|
||||
}
|
||||
});
|
||||
|
||||
// 如果是第一页，直接替换数据，否则追加
|
||||
if (this.page_num === 1) {
|
||||
this.products = newProducts;
|
||||
} else {
|
||||
this.products = [...this.products, ...newProducts];
|
||||
}
|
||||
|
||||
// 判断是否还有更多数据
|
||||
if (newProducts.length < this.page_size) {
|
||||
this.noMore = true;
|
||||
}
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
loadMore() {
|
||||
if (!this.loading && !this.noMore) {
|
||||
this.page_num++;
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
toPage(data) {
|
||||
if (data == 'mx') {
|
||||
request(apiArr2.getUserInfo, 'POST', {}, { silent: false }).then(res => {
|
||||
NavgateTo('/packages/user/wallet/index?type=1&item=' + JSON.stringify(res));
|
||||
});
|
||||
} else if (data == 'gz') {
|
||||
uni.navigateTo({
|
||||
url: '/packages/jfShop/rule/index'
|
||||
})
|
||||
} else if (data == 'jl') {
|
||||
NavgateTo('/packages/jfShop/record/index');
|
||||
}
|
||||
},
|
||||
toDetail(product) {
|
||||
NavgateTo('/packages/jfShop/detail/index?product=' + JSON.stringify(product) + '&pointNum=' + this.pointsNum);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./index.css");
|
||||
</style>
|
||||
223
packages/jfShop/myOrder/index.css
Normal file
223
packages/jfShop/myOrder/index.css
Normal file
@ -0,0 +1,223 @@
|
||||
page {
|
||||
background-color: #F5F7FA;
|
||||
}
|
||||
|
||||
/* 订单详情页面样式 */
|
||||
.order-detail-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 通用区块样式 */
|
||||
.section {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
margin: 10rpx 20rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 商品信息 */
|
||||
.goods-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.goods-image {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-bottom: 10rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.goods-quantity {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* 价格信息 */
|
||||
.price-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 0;
|
||||
border-bottom: 1rpx solid #F0F0F0;
|
||||
}
|
||||
|
||||
.price-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.price-label {
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.total-price .price-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.total-price .price-value {
|
||||
font-weight: 600;
|
||||
color: #FF5000;
|
||||
}
|
||||
|
||||
/* 收货地址 */
|
||||
.address-info {
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.consignee {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.address-detail {
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
/* 订单信息 */
|
||||
.order-info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 0;
|
||||
border-bottom: 1rpx solid #F0F0F0;
|
||||
}
|
||||
|
||||
.order-info-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: #4A6CF7;
|
||||
font-size: 24rpx;
|
||||
margin-left: 16rpx;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 门店信息卡片 */
|
||||
.store-card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.store-info {
|
||||
flex: 1;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
.store-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.store-address {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: #ff4d4f;
|
||||
font-size: 24rpx;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-image {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 375px) {
|
||||
.section {
|
||||
margin: 16rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.goods-image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.price-item,
|
||||
.order-info-item {
|
||||
padding: 14rpx 0;
|
||||
}
|
||||
|
||||
.price-label,
|
||||
.price-value,
|
||||
.info-label,
|
||||
.info-value {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
160
packages/jfShop/myOrder/index.vue
Normal file
160
packages/jfShop/myOrder/index.vue
Normal file
@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<view class="order-detail-container">
|
||||
<!-- 商品信息 -->
|
||||
<view class="section">
|
||||
<h2 class="section-title">兑换商品</h2>
|
||||
<view class="goods-item" @click="viewGoodsDetail">
|
||||
<img :src="orderInfo.commodity_order_item_list[0].commodity_pic" alt="商品图片" class="goods-image">
|
||||
<view class="goods-info">
|
||||
<h3 class="goods-name">{{ orderInfo.commodity_order_item_list[0].goods_name }}</h3>
|
||||
<p class="goods-quantity">共{{ orderInfo.commodity_order_item_list[0].count }}件</p>
|
||||
</view>
|
||||
<uni-icons type="arrowright" size="24rpx" color="#999999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 价格信息 -->
|
||||
<view class="section">
|
||||
<view class="price-item">
|
||||
<span class="price-label">商品总价</span>
|
||||
<span class="price-value">{{ orderInfo.total_amount }}积分</span>
|
||||
</view>
|
||||
<view class="price-item">
|
||||
<span class="price-label">运费</span>
|
||||
<span class="price-value">{{ orderInfo.freight }}积分</span>
|
||||
</view>
|
||||
<view class="price-item total-price">
|
||||
<span class="price-label">商品实付</span>
|
||||
<span class="price-value">{{ orderInfo.total_amount + orderInfo.freight }}积分</span>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 收货地址 -->
|
||||
<view class="section">
|
||||
<h2 class="section-title">收货地址</h2>
|
||||
<view class="address-info">
|
||||
<p class="consignee">{{ orderInfo.receiving_name }}，{{ orderInfo.receiving_phone }}</p>
|
||||
<p class="address-detail">{{ orderInfo.receiving_address }}</p>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<view class="section">
|
||||
<view class="order-info-item">
|
||||
<span class="info-label">订单编号</span>
|
||||
<view class="info-value">
|
||||
<span>{{ orderInfo.order_no }}</span>
|
||||
<view class="copy-btn" @click="copyOrderNo">复制</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-info-item">
|
||||
<span class="info-label">提交时间</span>
|
||||
<span class="info-value">{{ orderInfo.order_time }}</span>
|
||||
</view>
|
||||
<view class="order-info-item">
|
||||
<span class="info-label">成交时间</span>
|
||||
<span class="info-value">{{ orderInfo.order_time }}</span>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 门店信息 -->
|
||||
<view class="section">
|
||||
<view class="store-card">
|
||||
<view class="store-info">
|
||||
<h2 class="store-name">{{ orderInfo.merchant_info.merchant_name }}</h2>
|
||||
<p class="store-address">{{ orderInfo.merchant_info.address }}</p>
|
||||
</view>
|
||||
<view class="nav-btn" @click="navigateToStore">
|
||||
<image class="nav-image" src="https://static.hshuishang.com/jfNav.png" mode="" />
|
||||
<span>导航</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request, NavgateTo, picUrl } from "../../../utils";
|
||||
import { apiArr } from "../../../api/pointShop";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderInfo: {}
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.order_id) {
|
||||
this.order_id = options.order_id;
|
||||
const params = {
|
||||
order_id: this.order_id
|
||||
}
|
||||
request(apiArr.pointOrderInfo, "POST", params).then(res => {
|
||||
// 处理商品图片路径
|
||||
if (res.commodity_order_item_list && res.commodity_order_item_list.length > 0) {
|
||||
res.commodity_order_item_list.forEach(item => {
|
||||
if (item.commodity_pic) {
|
||||
item.commodity_pic = picUrl + item.commodity_pic;
|
||||
}
|
||||
});
|
||||
}
|
||||
this.orderInfo = res;
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 查看商品详情
|
||||
viewGoodsDetail() {
|
||||
const product = {
|
||||
id: this.orderInfo.commodity_order_item_list[0].commodity_id,
|
||||
}
|
||||
NavgateTo(`/packages/jfShop/detail/index?product=${JSON.stringify(product)}`);
|
||||
},
|
||||
|
||||
// 复制订单编号
|
||||
copyOrderNo() {
|
||||
uni.setClipboardData({
|
||||
data: this.orderInfo.order_no,
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 导航到门店
|
||||
navigateToStore() {
|
||||
const store = this.orderInfo.merchant_info;
|
||||
if (store && store.latitude && store.longitude) {
|
||||
uni.openLocation({
|
||||
latitude: parseFloat(store.latitude),
|
||||
longitude: parseFloat(store.longitude),
|
||||
name: store.merchant_name,
|
||||
address: store.address,
|
||||
success: function () {
|
||||
console.log('打开地图成功');
|
||||
},
|
||||
fail: function (err) {
|
||||
console.log('打开地图失败', err);
|
||||
uni.showToast({
|
||||
title: '打开地图失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '门店位置信息不完整',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url('./index.css');
|
||||
</style>
|
||||
160
packages/jfShop/orderDetail/index.css
Normal file
160
packages/jfShop/orderDetail/index.css
Normal file
@ -0,0 +1,160 @@
|
||||
/* 兑换成功页面样式 */
|
||||
.success-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40rpx 20rpx;
|
||||
min-height: 100vh;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* 成功图标和标题 */
|
||||
.success-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #E6F7EF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.success-icon image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.points-consumed {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
/* 门店信息卡片 */
|
||||
.store-card {
|
||||
width: 90%;
|
||||
background-color: #f7f8fa;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.store-info {
|
||||
flex: 1;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
.store-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.store-address {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: #ff4d4f;
|
||||
font-size: 24rpx;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
/* 提示信息 */
|
||||
.reminder {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.action-buttons {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
background-color: #ff4d4f;
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
border: 1rpx solid #E5E7EB;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 375px) {
|
||||
.success-icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.store-name {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.primary-btn,
|
||||
.secondary-btn {
|
||||
height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
101
packages/jfShop/orderDetail/index.vue
Normal file
101
packages/jfShop/orderDetail/index.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<view class="success-container">
|
||||
<!-- 成功图标和标题 -->
|
||||
<view class="success-header">
|
||||
<view class="success-icon">
|
||||
<image class="header_top" src="https://static.hshuishang.com/jf_order_sucess.png" mode="" />
|
||||
</view>
|
||||
<h1 class="success-title">兑换成功</h1>
|
||||
<p class="points-consumed">消耗 {{ storeInfo.total_amount }} 积分</p>
|
||||
</view>
|
||||
|
||||
<!-- 门店信息卡片 -->
|
||||
<view class="store-card">
|
||||
<view class="store-info">
|
||||
<h2 class="store-name">{{ storeInfo.merchant_info.merchant_name }}</h2>
|
||||
<p class="store-address">{{ storeInfo.receiving_address }}</p>
|
||||
</view>
|
||||
<view class="nav-btn" @click="navigateToStore">
|
||||
<image class="nav-image" src="https://static.hshuishang.com/jfNav.png" mode="" />
|
||||
<span>导航</span>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提示信息 -->
|
||||
<p class="reminder">请前往线下门店兑换商品</p>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-buttons">
|
||||
<button class="primary-btn" @click="viewOrder">查看订单</button>
|
||||
<button class="secondary-btn" @click="backToHome">返回首页</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request, NavgateTo } from "../../../utils";
|
||||
import { apiArr } from "../../../api/pointShop";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
storeInfo: {},
|
||||
order_id: ''
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.order_id) {
|
||||
this.order_id = options.order_id;
|
||||
const params = {
|
||||
order_id: this.order_id
|
||||
}
|
||||
request(apiArr.pointOrderInfo, "POST", params).then(res => {
|
||||
this.storeInfo = res;
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 导航到门店
|
||||
navigateToStore() {
|
||||
// 检查是否有经纬度信息
|
||||
if (this.storeInfo.merchant_info.latitude && this.storeInfo.merchant_info.longitude) {
|
||||
uni.openLocation({
|
||||
latitude: Number(this.storeInfo.merchant_info.latitude),
|
||||
longitude: Number(this.storeInfo.merchant_info.longitude),
|
||||
name: this.storeInfo.merchant_info.merchant_name,
|
||||
address: this.storeInfo.receiving_address,
|
||||
success: (res) => {
|
||||
console.log('导航成功', res);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('导航失败', err);
|
||||
uni.showToast({
|
||||
title: '导航失败，请检查位置权限',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '暂无门店位置信息',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 查看订单
|
||||
viewOrder() {
|
||||
NavgateTo(`/packages/jfShop/myOrder/index?order_id=${this.order_id}`);
|
||||
},
|
||||
|
||||
// 返回首页
|
||||
backToHome() {
|
||||
NavgateTo('/pages/index/index');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url('./index.css');
|
||||
</style>
|
||||
99
packages/jfShop/record/index.css
Normal file
99
packages/jfShop/record/index.css
Normal file
@ -0,0 +1,99 @@
|
||||
page {
|
||||
background-color: #f6f7fbbe;
|
||||
}
|
||||
|
||||
/* 积分兑换记录页面样式 */
|
||||
.record-container {
|
||||
padding: 16rpx;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 月份分组 */
|
||||
.month-group {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
/* 月份头部 */
|
||||
.month-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 0;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.month-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.month-count {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* 记录项 */
|
||||
.record-item {
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.item-left {
|
||||
display: flex;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.item-image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.item-data {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
margin-bottom: 8rpx;
|
||||
line-height: 36rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-weight: bold;
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
width: 150rpx;
|
||||
padding: 0 30rpx;
|
||||
border: 1rpx solid #ddddddc7;
|
||||
border-radius: 40rpx;
|
||||
background-color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
position: relative;
|
||||
right: -250rpx;
|
||||
}
|
||||
|
||||
.nav-btn:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
105
packages/jfShop/record/index.vue
Normal file
105
packages/jfShop/record/index.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<view class="record-container">
|
||||
<!-- 动态渲染月份分组 -->
|
||||
<view v-for="group in records" :key="group.time" class="month-group">
|
||||
<view class="month-header">
|
||||
<text class="month-title">{{ group.time }}</text>
|
||||
<text class="month-count">{{ group.total }}单兑换商品</text>
|
||||
</view>
|
||||
|
||||
<!-- 动态渲染每个记录项 -->
|
||||
<view v-for="item in group.orders" :key="item.id" class="record-item">
|
||||
<view class="item-left">
|
||||
<image class="item-image" :src="item.commodity_order_item_list[0].commodity_pic" mode="aspectFill">
|
||||
</image>
|
||||
<view class="item-info">
|
||||
<text class="item-name">{{ item.commodity_order_item_list[0].goods_name }}</text>
|
||||
<view class="item-data">
|
||||
<view class="item-label">订单号：</view>
|
||||
<view>{{ item.order_no }}</view>
|
||||
</view>
|
||||
<view class="item-data">
|
||||
<view class="item-label">积分变动：</view>
|
||||
<view>{{ item.total_amount }}积分</view>
|
||||
</view>
|
||||
<view class="item-data">
|
||||
<view class="item-label">交易日期：</view>
|
||||
<view>{{ item.order_time }}</view>
|
||||
</view>
|
||||
<view class="item-data">
|
||||
<view class="item-label">交易地点：</view>
|
||||
<view>{{ item.receiving_address }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<button class="nav-btn" @click="navigateToStore(item)">导航</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request, picUrl, NavgateTo } from "../../../utils";
|
||||
import { apiArr } from "../../../api/pointShop";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
records: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
request(apiArr.pointShopRecord, 'POST', {}, { silent: false }).then(res => {
|
||||
// 处理商品图片路径
|
||||
res.rows.forEach(item => {
|
||||
item.orders.forEach(ite => {
|
||||
if (ite.commodity_order_item_list && ite.commodity_order_item_list.length > 0) {
|
||||
ite.commodity_order_item_list.forEach(parm => {
|
||||
if (parm.commodity_pic) {
|
||||
parm.commodity_pic = picUrl + parm.commodity_pic;
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
this.records = res.rows;
|
||||
});
|
||||
},
|
||||
navigateToStore(item) {
|
||||
// 检查是否有经纬度信息
|
||||
if (item.merchant_info.latitude && item.merchant_info.longitude) {
|
||||
uni.openLocation({
|
||||
latitude: Number(item.merchant_info.latitude),
|
||||
longitude: Number(item.merchant_info.longitude),
|
||||
name: item.merchant_info.merchant_name,
|
||||
address: item.receiving_address,
|
||||
success: (res) => {
|
||||
console.log('导航成功', res);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('导航失败', err);
|
||||
uni.showToast({
|
||||
title: '导航失败，请检查位置权限',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '暂无门店位置信息',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getList();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
@import url('./index.css');
|
||||
</style>
|
||||
55
packages/jfShop/rule/index.css
Normal file
55
packages/jfShop/rule/index.css
Normal file
@ -0,0 +1,55 @@
|
||||
page{
|
||||
background-color: #f6f6fa;
|
||||
}
|
||||
|
||||
.rule-container {
|
||||
margin: 20rpx;
|
||||
padding: 30rpx 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.rule-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.rule-tip {
|
||||
font-size: 24rpx;
|
||||
color: #ff4444;
|
||||
text-align: center;
|
||||
margin-bottom: 20rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.rule-details {
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 30rpx 20rpx;
|
||||
}
|
||||
|
||||
.rule-item {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.rule-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.rule-item-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.rule-item-content {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 36rpx;
|
||||
text-align: justify;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
47
packages/jfShop/rule/index.vue
Normal file
47
packages/jfShop/rule/index.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<view class="rule-container">
|
||||
<!-- 标题 -->
|
||||
<view class="rule-title">{{ ruleData.title }}</view>
|
||||
|
||||
<!-- 核心提示语 -->
|
||||
<view class="rule-tip">{{ ruleData.tip }}</view>
|
||||
|
||||
<!-- 详情列表 -->
|
||||
<view class="rule-details">
|
||||
<view v-for="(item, index) in ruleData.detail" :key="index" class="rule-item">
|
||||
<view class="rule-item-title">{{ index + 1 }}.{{ item.sub_title }}</view>
|
||||
<view class="rule-item-content">{{ item.sub_detail }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request, picUrl, NavgateTo } from "../../../utils";
|
||||
import { apiArr } from "../../../api/pointShop";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ruleData: {
|
||||
title: '',
|
||||
tip: '',
|
||||
detail: []
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getContent()
|
||||
},
|
||||
methods: {
|
||||
getContent() {
|
||||
request(apiArr.platformPointsRule, 'POST', {}, { silent: false }, false).then(res => {
|
||||
this.ruleData = res;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import url('./index.css');
|
||||
</style>
|
||||
244
packages/jfShop/submitOrder/index.css
Normal file
244
packages/jfShop/submitOrder/index.css
Normal file
@ -0,0 +1,244 @@
|
||||
page{
|
||||
background-color: #F6F6FA;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 收货地址部分 */
|
||||
.address-section {
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
margin: 15rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.address-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.address-main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.address-name-phone {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.phone {
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.address-detail {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.address-arrow {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 分隔线 */
|
||||
.divider {
|
||||
height: 10rpx;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 兑换商品部分 */
|
||||
.exchange-section {
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
margin: 15rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 25rpx;
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
display: flex;
|
||||
margin-bottom: 25rpx;
|
||||
}
|
||||
|
||||
.goods-image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
margin-right: 20rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.goods-image image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: 30rpx;
|
||||
margin-bottom: 15rpx;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.goods-quantity {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.goods-points {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.total-section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.total-points {
|
||||
font-size: 32rpx;
|
||||
color: #f03d0e;
|
||||
font-weight: 600;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
/* 积分计算部分 */
|
||||
.points-calculation {
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
margin: 15rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.calculation-item {
|
||||
height: 50rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.calculation-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 底部确认兑换部分 */
|
||||
.bottom-section {
|
||||
height: 100rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-top: 1rpx solid #e5e5e5;
|
||||
}
|
||||
|
||||
.points-consumption {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.consumption-points {
|
||||
font-size: 34rpx;
|
||||
color: #f03d0e;
|
||||
font-weight: 600;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 280rpx;
|
||||
height: 80rpx;
|
||||
background-color: #f03d0e;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: 50rpx;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.name {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.phone {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.address-detail {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.goods-quantity {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.goods-points {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.total-section {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.total-points {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.calculation-item {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.points-consumption {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.consumption-points {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 260rpx;
|
||||
height: 76rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
142
packages/jfShop/submitOrder/index.vue
Normal file
142
packages/jfShop/submitOrder/index.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 收货地址部分 -->
|
||||
<view class="address-section">
|
||||
<view class="address-info" @click="chooseAddress">
|
||||
<view class="address-main">
|
||||
<view class="address-name-phone">
|
||||
<text class="name">{{ defAddress.name }}</text>
|
||||
<text class="phone">{{ defAddress.phone }}</text>
|
||||
</view>
|
||||
<view class="address-detail">
|
||||
{{ defAddress.address }}{{ defAddress.house_number }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="address-arrow"><u-icon name="arrow-right" size="25"></u-icon></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 兑换商品信息 -->
|
||||
<view class="exchange-section">
|
||||
<view class="section-title">兑换商品</view>
|
||||
<view class="goods-item">
|
||||
<view class="goods-image">
|
||||
<image :src="goodsInfo.goodsInfo.goods_info.commodity_pic" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-name">{{ goodsInfo.specName }}</view>
|
||||
<view class="goods-quantity">{{ goodsInfo.quantity }}件</view>
|
||||
</view>
|
||||
<view class="goods-points">{{ goodsInfo.price }}积分</view>
|
||||
</view>
|
||||
<view class="total-section">
|
||||
<text>共{{ goodsInfo.quantity }}件商品 共计:</text>
|
||||
<text class="total-points">{{ goodsInfo.price * goodsInfo.quantity }}积分</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 积分计算部分 -->
|
||||
<view class="points-calculation">
|
||||
<view class="calculation-item">
|
||||
<text>商品小计</text>
|
||||
<text>{{ goodsInfo.price * goodsInfo.quantity }}积分</text>
|
||||
</view>
|
||||
<view class="calculation-item">
|
||||
<text>运费抵扣</text>
|
||||
<text>0积分</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部确认兑换按钮 -->
|
||||
<view class="bottom-section">
|
||||
<view class="points-consumption">
|
||||
<text>消耗积分:</text>
|
||||
<text class="consumption-points">{{ goodsInfo.price * goodsInfo.quantity }}积分</text>
|
||||
</view>
|
||||
<button class="confirm-btn" @click="confirmExchange">确认兑换</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request, NavgateTo } from "../../../utils";
|
||||
import { apiArr } from "../../../api/shop";
|
||||
import { apiArr as apiArr2 } from "../../../api/pointShop";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
defAddress: {},
|
||||
goodsInfo: {}
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.orderInfo) {
|
||||
this.goodsInfo = JSON.parse(options.orderInfo);
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// 检查是否有选中的地址
|
||||
const selectedAddress = uni.getStorageSync('selectedAddress');
|
||||
if (selectedAddress && Object.keys(selectedAddress).length > 0) {
|
||||
this.defAddress = selectedAddress;
|
||||
// 清除选中状态，避免重复应用
|
||||
uni.removeStorageSync('selectedAddress');
|
||||
} else {
|
||||
// 如果没有选中的地址，则获取默认地址
|
||||
this.getUserAddress();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取用户默认地址
|
||||
getUserAddress() {
|
||||
request(apiArr.getUserDefAddress, "POST", {}).then(res => {
|
||||
this.defAddress = res.default_address;
|
||||
});
|
||||
},
|
||||
// 选择地址
|
||||
chooseAddress() {
|
||||
NavgateTo('/packages/shop/address/index');
|
||||
},
|
||||
// 确认兑换
|
||||
confirmExchange() {
|
||||
// 检查是否有收货地址
|
||||
if (!this.defAddress || Object.keys(this.defAddress).length === 0) {
|
||||
uni.showToast({
|
||||
title: '请选择收货地址',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const params = {
|
||||
user_id: uni.getStorageSync('userId'),
|
||||
mch_id: this.goodsInfo.goodsInfo.mch_id,
|
||||
receiving_name: this.defAddress.name,
|
||||
receiving_phone: this.defAddress.phone,
|
||||
receiving_address: this.defAddress.address + this.defAddress.house_number,
|
||||
goods_item: {
|
||||
goods_id: this.goodsInfo.goodsInfo.goods_id,
|
||||
count: this.goodsInfo.quantity,
|
||||
price: this.goodsInfo.price,
|
||||
freight: this.goodsInfo.goodsInfo.freight || 0
|
||||
}
|
||||
}
|
||||
request(apiArr2.pointShopAdd, "POST", params).then(res => {
|
||||
const params = {
|
||||
order_id: res.order_id
|
||||
}
|
||||
request(apiArr2.pointShopPay, "POST", params).then(res => {
|
||||
setTimeout(() => {
|
||||
NavgateTo('/packages/jfShop/orderDetail/index?order_id=' + params.order_id);
|
||||
}, 300);
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url('./index.css');
|
||||
</style>
|
||||
@ -144,6 +144,10 @@ page {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.order-footer-text view {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
@ -47,8 +47,11 @@
|
||||
|
||||
<!-- 订单底部信息 -->
|
||||
<view class="order-footer">
|
||||
<view class="order-footer-text" @click="toDetails(item)">共{{ item.total_count }}件商品，共计
|
||||
<view class="order-footer-text" @click="toDetails(item)">
|
||||
共{{ item.total_count }}件商品，共计
|
||||
<text> {{ item.total_amount }}</text>
|
||||
<view v-if="item.order_cate === 1"> 元</view>
|
||||
<view v-if="item.order_cate === 4"> 积分</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="btn-group" v-if="item.order_status === 1">
|
||||
@ -67,7 +70,8 @@
|
||||
</view>
|
||||
<view class="btn-group" v-if="item.order_status === 5">
|
||||
<!-- <text class="afterSaleNum">{{ item.commodity_order_item_list.length }}笔售后</text> -->
|
||||
<button class="cancel-btn" @click="afterSale(item)" v-if="item.after_sales_status === 2">退换/售后</button>
|
||||
<button class="cancel-btn" @click="afterSale(item)"
|
||||
v-if="item.after_sales_status === 2 && item.order_cate === 1">退换/售后</button>
|
||||
<button class="pay-btn" @click="orderEvaluate(item)" :disabled="item.evauate_status === 1">评价</button>
|
||||
</view>
|
||||
<view class="btn-group" v-if="item.order_status === 6">
|
||||
@ -323,6 +327,10 @@ export default {
|
||||
NavgateTo(`/packages/shop/goodsSubmit/index?shopCarList=${JSON.stringify(transformedItems)}`)
|
||||
},
|
||||
toDetails(item) {
|
||||
if (item.order_cate == 4) {
|
||||
NavgateTo(`/packages/jfShop/myOrder/index?order_id=${item.id}`);
|
||||
return
|
||||
}
|
||||
NavgateTo(
|
||||
`/packages/myOrders/orderDetails/index?item=${JSON.stringify(item)}`
|
||||
);
|
||||
@ -369,7 +377,7 @@ export default {
|
||||
good.commodity_pic = picUrl + good.commodity_pic;
|
||||
})
|
||||
})
|
||||
this.orderData = res.order_list.filter(item => item.order_cate == 1);
|
||||
this.orderData = res.order_list.filter(item => item.order_cate == 1 || item.order_cate == 4);
|
||||
this.getAfterSaleList();
|
||||
});
|
||||
},
|
||||
|
||||
@ -37,10 +37,18 @@
|
||||
<view class="overlay" v-if="isDropdownOpen" />
|
||||
<!-- 车辆选择区域 -->
|
||||
<view class="changeCar">
|
||||
<view class="car-selector" @tap="toggleCarDropdown">
|
||||
<view v-if="!isLogin" class="car-selector" @tap="goLogin">
|
||||
<text class="selected-car-text">请登录后查看</text>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view v-if="cars.length > 0" class="car-selector" @tap="toggleCarDropdown">
|
||||
<text class="selected-car-text">{{ selectedCar || '选择车辆' }}</text>
|
||||
<u-icon :name="isCarDropdownOpen ? 'arrow-up' : 'arrow-down'" size="28"></u-icon>
|
||||
</view>
|
||||
<view v-else class="car-selector" @tap="goAddCar">
|
||||
<text class="selected-car-text">请先添加车辆</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 车辆下拉列表 -->
|
||||
<view v-if="isCarDropdownOpen" class="car-dropdown">
|
||||
@ -70,8 +78,7 @@
|
||||
<view v-if="showCost1">
|
||||
<view v-if="payStatus === 1" class="cost-container">
|
||||
<view>
|
||||
<image class="cost-image"
|
||||
src="https://static.hshuishang.com/park/park_orderLoading.png"
|
||||
<image class="cost-image" src="https://static.hshuishang.com/park/park_orderLoading.png"
|
||||
mode="aspectFit" />
|
||||
</view>
|
||||
<view class="cost-header">
|
||||
@ -103,8 +110,7 @@
|
||||
<view class="payment-item" :class="{ 'selected': paymentMethod === 'wechat' }"
|
||||
@tap="selectPayment('wechat')">
|
||||
<view class="payment-item-content">
|
||||
<image
|
||||
src="https://static.hshuishang.com/property-img-file/com_wechat.png"
|
||||
<image src="https://static.hshuishang.com/property-img-file/com_wechat.png"
|
||||
mode="aspectFit" class="payment-icon"></image>
|
||||
<text class="payment-name">微信支付</text>
|
||||
</view>
|
||||
@ -115,8 +121,7 @@
|
||||
</view>
|
||||
<view v-else class="cost-container notice-text2">
|
||||
<view>
|
||||
<image class="cost-image"
|
||||
src="https://static.hshuishang.com/park/park_orderLoading.png"
|
||||
<image class="cost-image" src="https://static.hshuishang.com/park/park_orderLoading.png"
|
||||
mode="aspectFit" />
|
||||
</view>
|
||||
<span v-if="!isTimeout">⚠️ 支付成功，请于{{ countdownTime }}内离场否则将加收停车费</span>
|
||||
@ -196,11 +201,21 @@ export default {
|
||||
payStatus: 0,
|
||||
payTime: '',
|
||||
countdownTime: '',
|
||||
isTimeout: false
|
||||
isTimeout: false,
|
||||
isLogin: uni.getStorageSync('ctoken') ? true : false
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
if (this.isLogin) {
|
||||
this.getParkList();
|
||||
}
|
||||
},
|
||||
|
||||
onShow() {
|
||||
if (this.isLogin) {
|
||||
this.getParkList();
|
||||
}
|
||||
},
|
||||
|
||||
// 在组件卸载时清除定时器
|
||||
@ -211,6 +226,9 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goLogin() {
|
||||
NavgateTo(`/pages/login/login`);
|
||||
},
|
||||
// 切换下拉列表显示状态
|
||||
toggleDropdown() {
|
||||
this.isCarDropdownOpen = false
|
||||
@ -330,6 +348,11 @@ export default {
|
||||
this.isCarDropdownOpen = !this.isCarDropdownOpen;
|
||||
},
|
||||
|
||||
// 去添加车辆
|
||||
goAddCar() {
|
||||
NavgateTo('/packages/park/addCar/index')
|
||||
},
|
||||
|
||||
// 选择车辆
|
||||
selectCar(car) {
|
||||
this.selectedCar = car.car_number;
|
||||
@ -533,7 +556,7 @@ export default {
|
||||
},
|
||||
// 获取停车场列表
|
||||
getParkList() {
|
||||
request(apiArr.parkList, "POST", {}).then((res) => {
|
||||
request(apiArr.parkList, "POST", {}, {}, false).then((res) => {
|
||||
// 计算每个停车场的距离并添加到对象中
|
||||
this.parkingLots = res.parking_list.map(park => {
|
||||
try {
|
||||
@ -577,9 +600,6 @@ export default {
|
||||
});
|
||||
})
|
||||
},
|
||||
},
|
||||
onShow() {
|
||||
this.getCarList();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -29,7 +29,7 @@ export default {
|
||||
methods: {
|
||||
handleButtonClick(val) {
|
||||
if(val == 1){
|
||||
NavgateTo(`/packages/park/temporaryOrder/index`);
|
||||
NavgateTo(`/packages/park/temporaryOrder/index`, { isLogin: false });
|
||||
}else if(val == 2){
|
||||
NavgateTo(`/packages/park/parkOrder/index`);
|
||||
}else if(val == 3){
|
||||
|
||||
54
pages.json
54
pages.json
@ -1160,6 +1160,60 @@
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "packages/jfShop",
|
||||
"pages": [
|
||||
{
|
||||
"path": "index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "积分商城",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "rule/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "积分规则",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "record/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "兑换记录",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "detail/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "积分兑换详情页",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "submitOrder/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提交订单",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "orderDetail/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "兑换详情",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "myOrder/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的订单",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
||||
@ -119,10 +119,11 @@ page {
|
||||
}
|
||||
|
||||
.search2 {
|
||||
padding: 10rpx 0;
|
||||
width: 55%;
|
||||
position: relative;
|
||||
left: -190rpx;
|
||||
padding: 20rpx;
|
||||
/* width: 100%; */
|
||||
/* position: relative;
|
||||
left: -190rpx; */
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.function-nav {
|
||||
@ -189,7 +190,7 @@ page {
|
||||
width: 710rpx;
|
||||
height: 300rpx;
|
||||
margin: 0 auto;
|
||||
margin-top: 10rpx;
|
||||
/* margin-top: 10rpx; */
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user