易购商品改为配送

This commit is contained in:
赵毅 2025-10-08 17:04:12 +08:00
parent 13a271d806
commit 60cf499f38
4 changed files with 1085 additions and 1 deletions

View File

@ -0,0 +1,608 @@
page {
background-color: #f5f7fb;
}
.container {
padding: 0;
margin: 0;
font-size: 28rpx;
color: #333;
}
/* 顶部切换栏 */
.tab-bar {
display: flex;
background-color: #fff;
padding: 20rpx 0;
}
.tab-item {
width: 180rpx;
height: 70rpx;
line-height: 70rpx;
text-align: center;
border-radius: 15rpx;
margin: 0 20rpx;
font-size: 28rpx;
border: 1rpx solid #ddd;
}
.tab-item.active {
background-color: #ff370b;
color: #fff;
}
/* 分隔线 */
.divider {
height: 20rpx;
background-color: #f5f5f5;
}
/* 公共标题样式 */
.section-title {
font-size: 32rpx;
color: #333;
font-weight: bold;
padding: 20rpx 30rpx;
}
/* 收货地址区域 */
.info-section {
background: repeating-linear-gradient(to right,
#fe5355,
#fe5355 20px,
#549aff 20px,
#549aff 40px);
padding: 10rpx 0;
}
.address-section {
background-color: #fff;
}
.address-info {
padding: 30rpx;
display: flex;
justify-content: space-between;
align-items: flex-start;
border-bottom: 1rpx solid #eee;
}
.address-main {
flex: 1;
}
.address-name-phone {
display: flex;
align-items: center;
margin-bottom: 10rpx;
}
.name {
font-size: 32rpx;
margin-right: 20rpx;
}
.phone {
font-size: 30rpx;
color: #666;
}
.address-detail {
font-size: 28rpx;
color: #666;
line-height: 40rpx;
display: flex;
align-items: center;
}
.address-arrow {
color: #333;
}
.addNewAddress {
font-size: 32rpx;
color: #999999;
float: right;
}
/* 商品信息区域 */
.goods-section {
background-color: #fff;
margin-bottom: 20rpx;
}
.goods-item {
border-radius: 10rpx;
padding: 15rpx;
display: flex;
background-color: #fff;
}
.goods-image {
width: 140rpx;
height: 140rpx;
border-radius: 15rpx;
overflow: hidden;
margin-right: 15rpx;
}
.goods-image image {
width: 100%;
height: 100%;
object-fit: cover;
}
.goods-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
}
.goods-name {
font-size: 28rpx;
font-weight: bold;
margin-bottom: 8rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.goods-desc {
font-size: 22rpx;
color: #666;
margin-bottom: 10rpx;
}
.price-container {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10rpx;
}
.group-price {
font-size: 28rpx;
color: #e63946;
margin-right: 10rpx;
border-radius: 4rpx;
/* display: flex; */
}
.group-price-box {
display: flex;
}
.group-price1 {
width: 100rpx;
padding: 10rpx 15rpx;
color: #ffffff;
background-color: #fc5d15;
border-radius: 15rpx 0 0 15rpx;
}
.group-price2 {
width: auto;
padding: 10rpx 15rpx;
background: linear-gradient(to bottom, #fef6d6, #fee8a9);
border-radius: 0 15rpx 15rpx 0;
}
.original-price {
font-size: 26rpx;
color: #999;
}
.countdown {
width: 250rpx;
font-size: 22rpx;
padding: 10rpx 15rpx;
color: #ffffff;
margin-bottom: 15rpx;
border-radius: 50rpx;
background-color: #fe2f01;
position: absolute;
top: 150rpx;
right: 0;
}
.quantity-control {
display: flex;
align-items: center;
justify-content: flex-end;
}
.decrease-btn {
width: 40rpx;
height: 40rpx;
background-color: #f5f5f5;
border: 1rpx solid #ccc;
border-radius: 50%;
line-height: 33rpx;
text-align: center;
font-size: 28rpx;
color: #333;
}
.increase-btn {
width: 40rpx;
height: 40rpx;
background-color: #ff502a;
border-radius: 50%;
line-height: 33rpx;
text-align: center;
font-size: 28rpx;
color: #ffffff;
}
.quantity {
margin: 0 15rpx;
font-size: 24rpx;
width: 40rpx;
text-align: center;
}
/* 运费和总金额区域 */
.fee-section,
.total-section {
background-color: #fff;
padding: 30rpx;
display: flex;
justify-content: space-between;
border-bottom: 1rpx solid #eee;
}
.fee-name,
.total-name {
font-size: 30rpx;
}
.fee-value,
.total-value {
font-size: 30rpx;
color: #333;
}
.total-value {
font-weight: bold;
color: #FF7658;
}
/* 复制 */
.copy-icon {
width: 30rpx;
height: 30rpx;
background-image: url('https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png');
background-size: cover;
margin-left: 10rpx;
}
/* 支付方式区域 */
.payment-section {
background-color: #fff;
margin-bottom: 20rpx;
margin-top: 15rpx;
}
.payment-item {
padding: 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1rpx solid #eee;
}
.payment-icon {
width: 60rpx;
height: 60rpx;
margin-right: 20rpx;
}
.payment-icon image {
width: 100%;
height: 100%;
}
.payment-content {
flex: 1;
}
.payment-name {
font-size: 32rpx;
margin-bottom: 5rpx;
}
.payment-desc {
font-size: 26rpx;
color: #333;
}
.payment-select {
color: #FF7658;
}
/* 立即支付按钮 */
.pay-button {
height: 100rpx;
line-height: 100rpx;
text-align: center;
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
color: #fff;
font-size: 36rpx;
font-weight: bold;
border-radius: 50rpx;
position: fixed;
bottom: 50rpx;
left: 15%;
width: 70%;
/* z-index: 99; */
}
/* 自提样式 */
.pickup-info {
padding: 30rpx;
background-color: #fff;
}
.pickup-address {
font-size: 30rpx;
margin-bottom: 10rpx;
}
.pickup-time {
font-size: 28rpx;
color: #999;
}
/* 弹窗 */
.shadow {
background: rgba(0, 0, 0, 0.4);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 9;
}
.shadowBox2 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: auto;
height: auto;
}
.shadowBox_img {
width: 600rpx;
height: 800rpx;
background-color: #fff;
border-radius: 20rpx;
position: relative;
}
.boxshadow_tit {
font-size: 32rpx;
color: #222222;
padding-top: 40rpx;
display: flex;
justify-content: center;
align-items: center;
}
.boxshadow_tit_img {
width: 70rpx;
height: 70rpx;
margin-right: 10rpx;
}
.boxshadow_img {
/* width: 300rpx;
height: 300rpx; */
margin: 0 auto;
margin-top: 40rpx;
text-align: center;
}
.wealBoxTit {
display: flex;
align-items: flex-end;
margin-top: 30rpx;
margin-left: 20rpx;
}
.wealBoxTit1 {
color: #fe1535;
font-size: 32rpx;
font-weight: bold;
}
.wealBoxTit2 {
color: #fe1535;
font-size: 26rpx;
margin-left: 15rpx;
}
.wealBox {
width: 93%;
height: 170rpx;
margin: 15rpx auto;
display: flex;
}
.wealBoxItem {
width: 150rpx;
height: 150rpx;
margin: 0 10rpx;
border-radius: 15rpx;
padding: 20rpx 10rpx;
text-align: center;
display: flex;
/* 添加 flex 布局 */
flex-direction: column;
/* 设置主轴为垂直方向 */
justify-content: space-between;
/* 垂直方向上平均分布 */
align-items: center;
/* 水平方向居中 */
}
.wealBoxItem1 {
background-color: #fff4f1;
}
.wealBoxItem2 {
background-color: #fff7f1;
}
.wealBoxItem3 {
background-color: #fffaf0;
}
.wealBoxItemTop {
display: flex;
align-items: center;
justify-content: center;
}
.wealBoxItemTop image {
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
.wealBoxItemBottom {
font-size: 26rpx;
color: #999999;
}
.bottom {
width: 100%;
position: absolute;
bottom: 30rpx;
}
.boxbottom1 {
margin: 0 auto;
}
.boxbottom {
width: 100%;
margin-bottom: 50rpx;
display: flex;
justify-content: center;
align-items: center;
}
.line1 {
width: 80rpx;
height: 1rpx;
margin: 0 10rpx;
background: linear-gradient(to left, #333, #fff);
}
.line2 {
width: 80rpx;
height: 1rpx;
margin: 0 10rpx;
background: linear-gradient(to right, #333, #fff);
}
.shadowBox1 {
width: 100%;
display: flex;
margin-bottom: 30rpx;
}
.shadowBox1Item_btn {
width: 110rpx;
height: 150rpx;
border: 1rpx solid red;
position: absolute;
left: 100rpx;
opacity: 0;
}
.shadowBox2Item_btn {
width: 110rpx;
height: 150rpx;
border: 1rpx solid red;
position: absolute;
right: 100rpx;
opacity: 0;
}
.shadowBox1Item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #000000;
}
.shadowBox1Item image {
width: 100rpx;
height: 100rpx;
margin-bottom: 26rpx;
}
.shadowBoxInfo {
display: flex;
align-items: center;
margin-left: 62rpx;
margin-top: 11rpx;
}
.shadowboxInfo_left {
width: 130rpx;
height: 130rpx;
background: #EFEFEF;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-right: 36rpx;
}
.shadowboxInfo_right_1 {
font-size: 32rpx;
color: #222222;
margin-bottom: 10rpx;
}
.shadowboxInfo_right_2 {
font-size: 26rpx;
color: #999999;
}
.shadowBox_btn {
font-size: 36rpx;
color: #FFFFFF;
width: 600rpx;
height: 90rpx;
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
margin-top: 60rpx;
}
.empty-tip {
height: 200rpx;
font-size: 28rpx;
color: #999999;
text-align: center;
line-height: 200rpx;
background-color: #fff;
}

View File

@ -0,0 +1,469 @@
<template>
<view class="container">
<!-- 顶部切换栏 -->
<view class="tab-bar">
<view :class="{ active: activeTab === 'delivery' }" class="tab-item" @click="switchTab('delivery')">配送
</view>
</view>
<!-- 分隔线 -->
<view class="divider"></view>
<!-- 配送信息 -->
<view class="info-section" v-if="activeTab === 'delivery'">
<view class="address-section">
<view class="section-title">
收货地址
<view v-if="!defAddress" class="addNewAddress" @click="chooseAddress">添加新地址 &gt;</view>
</view>
<view class="address-info" @click="chooseAddress" v-if="defAddress">
<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 class="copy-icon" @click.stop="copyAddress" />
</view>
</view>
<view class="address-arrow"><u-icon name="arrow-right" size="25"></u-icon></view>
</view>
</view>
</view>
<!-- 分隔线 -->
<view class="divider"></view>
<!-- 商品信息 -->
<view v-if="activeTab === 'delivery' && orderList.length > 0">
<view class="goods-list">
<view class="goods-item" v-for="(item, index) in orderList" :key="index">
<view class="goods-image">
<image :src="item.commodity_goods_info.commodity_pic" mode="aspectFill"></image>
</view>
<view class="goods-info">
<view class="goods-name">{{ item.commodity_goods_info.goods_name }}</view>
<view class="goods-desc">{{ item.commodity_goods_info.goods_spec }}</view>
<view class="price-container">
<view class="group-price">
<view>{{ item.commodity_goods_info.sales_price }}/{{
item.commodity_goods_info.goods_unit
}}</view>
<!-- 运费 -->
<view class="goods-desc" style="margin-top: 10rpx;">运费 {{
item.commodity_goods_info.freight ? item.commodity_goods_info.freight : 0
}}</view>
</view>
<view class="quantity-control">
<view class="decrease-btn" @tap.stop="decreaseQuantity(item)">-</view>
<view class="quantity">{{ item.count }}</view>
<view class="increase-btn" @tap.stop="increaseQuantity(item)">+</view>
</view>
</view>
</view>
</view>
</view>
<!-- 总金额 -->
<view class="total-section">
<view class="total-name">总金额</view>
<view class="total-value">{{ calculateTotal() }}</view>
</view>
<!-- 支付方式 -->
<view class="payment-section">
<view class="payment-item" @click="selectPayment('wechat')">
<view class="payment-icon">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
mode="aspectFit"></image>
</view>
<view class="payment-content">
<view class="payment-name">微信支付</view>
<view class="payment-desc"><text
style="color: #f03d0e;margin-right: 15rpx;">可用优惠券</text>单笔支付限额:¥10000.00</view>
</view>
<view class="payment-select" v-if="selectedPayment === 'wechat'">
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png"
mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
</view>
<view class="payment-select" v-else>
<image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png"
mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
</view>
</view>
</view>
</view>
<view v-if="activeTab === 'delivery' && orderList.length == 0" class="empty-tip">
暂无商品数据
</view>
<!-- 立即支付按钮 -->
<view class="pay-button" @click="submitPayment">立即支付</view>
<!-- 弹窗 - 支付成功 -->
<view class="shadow" @click="changeShadow" v-if="boxshadow1">
<view class="shadowBox2">
<view class="shadowBox_img">
<view class="boxshadow_tit">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/af_√.png"
class="boxshadow_tit_img">
</image>
已支付成功
</view>
<view class="boxshadow_img">
<view v-if="verifyCode">核销码{{ verifyCode }}</view>
</view>
<view>
<view class="wealBoxTit">
<view class="wealBoxTit1">下单福利</view>
<view class="wealBoxTit2">已获得</view>
</view>
<view class="wealBox">
<view class="wealBoxItem wealBoxItem1">
<view class="wealBoxItemTop">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/activity_fen.png"
mode="aspectFit">
</image>
<view>石榴分</view>
</view>
<view>
{{ slFen }}
</view>
<view class="wealBoxItemBottom">
可抵扣 {{ slFen }}
</view>
</view>
<view class="wealBoxItem wealBoxItem2">
<view class="wealBoxItemTop">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/activity_zi.png"
mode="aspectFit">
</image>
<view>石榴籽</view>
</view>
<view>
{{ slZi }}
</view>
<view class="wealBoxItemBottom">
可抵扣 {{ slZi }}
</view>
</view>
<view class="wealBoxItem wealBoxItem3">
<view class="wealBoxItemTop">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/activity_jin.png"
mode="aspectFit" />
<view>石榴金</view>
</view>
<view>
{{ slJin }}
</view>
<view class="wealBoxItemBottom">
可抵扣 {{ slJin }}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { picUrl, menuButtonInfo, request, NavgateTo } from "../../../utils";
import { apiArr } from "../../../api/shop";
export default {
data() {
return {
activeTab: 'delivery', //
quantity: 1, //
selectedPayment: 'wechat',
boxshadow1: false,
boxshadow2: false,
defAddress: {},
orderList: [],
carList: [],
slJin: 0,
slFen: 0,
slZi: 0,
//
verifyCode: '',
};
},
onLoad(options) {
this.carList = JSON.parse(options.shopCarList)
},
onShow() {
this.getUserAddress()
this.getGoodsList()
},
onUnload() {
uni.removeStorageSync('changeZTAddress')
},
methods: {
switchTab(tab) {
this.activeTab = tab;
},
//
getUserAddress() {
request(apiArr.getUserDefAddress, "POST", {}).then(res => {
this.defAddress = res.default_address
})
},
//
getGoodsList() {
this.orderList = []
this.carList.forEach(item => {
// URLhttpspicUrl
if (item.commodity_goods_info.commodity_pic && item.commodity_goods_info.commodity_pic.indexOf('https') !== 0) {
item.commodity_goods_info.commodity_pic = picUrl + item.commodity_goods_info.commodity_pic
}
this.orderList.push(item)
})
},
chooseAddress() {
NavgateTo('/packages/shop/address/index')
},
decreaseQuantity(item) {
if (item.count > 0) {
item.count--
// 0carList
if (item.count === 0) {
const index = this.carList.findIndex(carItem => carItem.goods_id === item.goods_id);
if (index > -1) {
this.carList.splice(index, 1);
//
this.getGoodsList();
}
}
this.changeCart(item)
}
},
increaseQuantity(item) {
if (item.count >= item.commodity_goods_info.stock_quantity) {
uni.showToast({
title: '库存不足',
icon: 'none'
});
return
}
item.count++;
this.changeCart(item);
},
//
changeCart(item) {
const params = {
goods_id_and_count: [
{
goods_id: item.goods_id,
count: item.count,
},
],
}
request(apiArr.updateCar, "POST", params).then(res => {
uni.showToast({
title: "操作成功!",
success() { },
});
})
},
//
calculateTotal() {
let total = 0;
this.orderList.forEach(goods => {
total += goods.commodity_goods_info.sales_price * goods.count + (goods.commodity_goods_info.freight || 0);
});
return total.toFixed(2);
},
selectPayment(payment) {
this.selectedPayment = payment;
},
submitPayment() {
//
if (!this.defAddress || Object.keys(this.defAddress).length === 0) {
uni.showToast({
title: '请选择收货地址',
icon: 'none'
});
return;
}
// isafterSaletrue
const hasAfterSaleItem = this.carList.some(item => item.isafterSale === true);
const orderIdFromAfterSale = hasAfterSaleItem ? this.carList.find(item => item.isafterSale === true)?.orderId : null;
// trans_type
// : 71, App: 51
const systemInfo = uni.getSystemInfoSync();
let trans_type = 51; // App
//
if (systemInfo.platform === 'devtools' || systemInfo.platform === 'unknown') {
trans_type = 71; //
}
//
// #ifdef MP
trans_type = 71; //
// #endif
// #ifdef APP-PLUS
trans_type = 51; // App
// #endif
// isafterSaletruecreateOrder
if (hasAfterSaleItem && orderIdFromAfterSale) {
const param = {
order_id: orderIdFromAfterSale,
user_id: uni.getStorageSync('userId'),
trans_type: trans_type
}
request(apiArr.mergePreorder, "POST", param).then(res => {
this.handleMergePreorderResponse(res, orderIdFromAfterSale);
})
} else {
//
const params = {
user_id: uni.getStorageSync('userId'),
// shopCarListisAdvertrue
order_cate: this.carList.some(item => item.isAdver === true) ? 3 : 1,
goods_list: [{
supplier_id: this.orderList[0].supplier_id,
supplier_name: this.orderList[0].supplier_name || '',
is_same_day: this.orderList[0].commodity_goods_info.is_same_day,
receiving_name: this.defAddress.name,
receiving_phone: this.defAddress.phone,
receiving_address: this.defAddress.address + this.defAddress.house_number,
merchant_id: this.defAddress.address_id,
goods_and_count: this.orderList.map(item => ({
goods_id: item.goods_id,
count: item.count,
price: item.commodity_goods_info.sales_price,
freight: item.commodity_goods_info.freight,
}))
}]
}
request(apiArr.createOrder, "POST", params).then(resVal => {
const param = {
order_id: resVal.order_id,
user_id: uni.getStorageSync('userId'),
trans_type: trans_type
}
request(apiArr.mergePreorder, "POST", param).then(res => {
this.handleMergePreorderResponse(res, resVal.order_id);
})
})
}
},
// mergePreorder
handleMergePreorderResponse(res, orderId) {
if (res && res.timeStamp && res.nonceStr && res.package && res.signType && res.paySign) {
//
uni.requestPayment({
timeStamp: res.timeStamp,
nonceStr: res.nonceStr,
package: res.package,
signType: res.signType,
paySign: res.paySign,
success: (payRes) => {
const params = {
order_id: orderId,
from: this.carList.some(item => item.isAdver === true) ? 3 : 1,
adver_id: this.carList.some(item => item.isAdver === true) ? this.carList.find(item => item.isAdver === true).adver_id : ''
}
request(apiArr.queryOrder, "POST", params).then(res => {
this.verifyCode = res.verification_code
this.slJin = res.shiliu_money
this.boxshadow1 = true
})
},
fail: (payErr) => {
uni.showToast({
title: payErr.errMsg == 'requestPayment:fail cancel' ? '已取消支付' : '支付失败',
icon: 'none'
})
const params = {
order_ids: orderId,
}
request(apiArr.cancelPay, "POST", params).then(res => {
})
},
complete: () => {
//
}
})
} else {
console.error("获取支付参数失败,缺少必要参数")
uni.showToast({
title: '获取支付信息失败',
icon: 'none'
})
}
},
//
copyAddress() {
// 使uni-appAPI
uni.setClipboardData({
data: this.defAddress.address + this.defAddress.house_number,
success: () => {
uni.showToast({
title: '复制成功',
icon: 'success'
});
},
fail: () => {
uni.showToast({
title: '复制失败',
icon: 'none'
});
}
});
},
openSave() {
this.boxshadow1 = false;
this.boxshadow2 = true;
},
changeShadow() {
this.boxshadow1 = false;
},
changeShadow2() {
this.boxshadow2 = false;
},
//
saveImg() {
this.boxshadow2 = false;
//
uni.downloadFile({
url: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png",
success: (res) => {
if (res.statusCode === 200) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: (res) => {
uni.showToast({
title: "保存成功",
icon: "success",
duration: 2000,
});
},
fail: (err) => {
console.log("保存失败", err);
},
});
}
},
fail: (err) => {
console.log("下载失败", err);
},
});
},
}
};
</script>
<style>
@import url('./index.css');
</style>

View File

@ -307,7 +307,7 @@ export default {
if(this.is_group_buy){
NavgateTo(`../groupPurchaseSubmit/index?shopCarList=${JSON.stringify(updatedArr)}`);
}else{
NavgateTo(`/packages/advertising/goodsSubmit/index?shopCarList=${JSON.stringify(updatedArr)}`);
NavgateTo(`../goodsSubmit/index?shopCarList=${JSON.stringify(updatedArr)}`);
}
},

View File

@ -724,6 +724,13 @@
"navigationStyle": "custom"
}
},
{
"path": "goodsSubmit/index",
"style": {
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "提交团单"
}
},
{
"path": "groupPurchaseSubmit/index",
"style": {