完成易购商品的立即购买功能
This commit is contained in:
赵毅
parent
70b747bcd0
commit
804579f19f
@ -271,24 +271,6 @@ image {
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.car_right {
|
||||
width: 470rpx;
|
||||
height: 70rpx;
|
||||
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
|
||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 26rpx;
|
||||
}
|
||||
|
||||
.car_right_disabled {
|
||||
background: #CCCCCC;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.cars {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -311,13 +293,6 @@ image {
|
||||
top: -10rpx;
|
||||
}
|
||||
|
||||
.car_right .input {
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
.shadow {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
position: fixed;
|
||||
@ -569,7 +544,6 @@ image {
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
padding-left: 80rpx;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
@ -623,8 +597,12 @@ image {
|
||||
border-radius: 40rpx;
|
||||
padding: 10rpx 15rpx;
|
||||
white-space: nowrap;
|
||||
margin: 20rpx 30rpx;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
.itemSize_active {
|
||||
background: #FF370B;
|
||||
color: #fff;
|
||||
@ -640,6 +618,7 @@ image {
|
||||
.itemSize_top {
|
||||
display: flex;
|
||||
margin-left: 30rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.itemSize_info {
|
||||
@ -657,4 +636,201 @@ image {
|
||||
font-weight: 500;
|
||||
margin-top: 10rpx;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.car_right_box {
|
||||
display: flex;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.car_right {
|
||||
width: 220rpx;
|
||||
height: 70rpx;
|
||||
/* background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%); */
|
||||
background: #ff712c;
|
||||
border-radius: 20rpx 0 0 20rpx;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 26rpx;
|
||||
}
|
||||
|
||||
.seckill {
|
||||
width: 220rpx;
|
||||
height: 70rpx;
|
||||
background: #ff3b31;
|
||||
border-radius: 0 20rpx 20rpx 0;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 26rpx;
|
||||
}
|
||||
|
||||
.car_right2 {
|
||||
width: 470rpx;
|
||||
height: 70rpx;
|
||||
background: #ffb1a5;
|
||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 26rpx;
|
||||
}
|
||||
|
||||
/* 立即购买弹窗样式 */
|
||||
.address-section {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.address-info {
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.address-main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.address-name-phone {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.phone {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.address-detail {
|
||||
color: #666;
|
||||
line-height: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.copy-icon {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
background: url('https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_copy.png') no-repeat center;
|
||||
background-size: contain;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.address-arrow {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.quantity-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
right: 40rpx;
|
||||
}
|
||||
|
||||
.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 {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin: 0 20rpx;
|
||||
min-width: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.payment-icon image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.payment-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.payment-name {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.payment-desc {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.payment-select {
|
||||
color: #FF7658;
|
||||
}
|
||||
|
||||
.pay-button {
|
||||
width: 50%;
|
||||
height: 70rpx;
|
||||
margin: 0 auto;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
|
||||
color: #fff;
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
|
||||
.car_right_buy {
|
||||
width: 220rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
@ -175,23 +175,29 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="car_right" v-if="
|
||||
info.commodity_goods_info_list[currentGGIndex].stock_quantity > 0 &&
|
||||
(!info.commodity_goods_info_list[currentGGIndex].cart_count ||
|
||||
info.commodity_goods_info_list[currentGGIndex].cart_count.count == 0)
|
||||
" @click="addCar">
|
||||
加入购物车
|
||||
<view class="car_right_box">
|
||||
<view class="car_right" v-if="
|
||||
info.commodity_goods_info_list[currentGGIndex].stock_quantity > 0 &&
|
||||
(!info.commodity_goods_info_list[currentGGIndex].cart_count ||
|
||||
info.commodity_goods_info_list[currentGGIndex].cart_count.count == 0)
|
||||
" @click="addCar">
|
||||
加入购物车
|
||||
</view>
|
||||
|
||||
<view class="car_right" @click="changeCar" v-if="
|
||||
info.commodity_goods_info_list[currentGGIndex].cart_count.count > 0
|
||||
&& info.commodity_goods_info_list[currentGGIndex].stock_quantity > 0
|
||||
">
|
||||
加入购物车
|
||||
</view>
|
||||
|
||||
<view class="seckill" v-if="info.commodity_goods_info_list[currentGGIndex].stock_quantity != 0"
|
||||
@click="showBuyPopup">
|
||||
立即购买
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="car_right" @click="changeCar" v-if="
|
||||
info.commodity_goods_info_list[currentGGIndex].cart_count.count > 0
|
||||
&& info.commodity_goods_info_list[currentGGIndex].stock_quantity > 0
|
||||
">
|
||||
加入购物车
|
||||
</view>
|
||||
|
||||
<view class="car_right car_right_disabled"
|
||||
v-if="info.commodity_goods_info_list[currentGGIndex].stock_quantity < 1">
|
||||
<view class="car_right2" v-if="info.commodity_goods_info_list[currentGGIndex].stock_quantity < 1">
|
||||
已售罄
|
||||
</view>
|
||||
</view>
|
||||
@ -298,7 +304,7 @@
|
||||
<view class="itemSize_name" style="display: flex;">
|
||||
<view v-if="currentGG.is_same_day" class="isDay">当日达</view>{{ changeName }}
|
||||
</view>
|
||||
<view class="itemSize_price">￥{{ changePrice }}/袋</view>
|
||||
<view class="itemSize_price">￥{{ changePrice }}/{{ goodsUnit }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="itemSizeBox" v-for="(item, index) in info.commodity_goods_info_list" :key="item.id"
|
||||
@ -307,6 +313,75 @@
|
||||
{{ item.goods_spec }} / {{ item.goods_unit }}</text>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<!-- 立即购买 -->
|
||||
<u-popup :show="showBuy" round="20rpx" mode="bottom" @close="closeBuy">
|
||||
<view class="popup-header">
|
||||
<h3 class="popup-header-h3">立即购买</h3>
|
||||
<view class="popup-header-view" @click="closeBuy">取消</view>
|
||||
</view>
|
||||
<view class="address-section">
|
||||
<view class="address-info" @click="editAddress()">
|
||||
<view class="address-main" v-if="defAddress && Object.keys(defAddress).length > 0">
|
||||
<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-main" v-else>
|
||||
<view class="address-name-phone">
|
||||
<text class="name">请选择收货地址</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="address-arrow"><u-icon name="arrow-right" size="25"></u-icon></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="itemSize_top">
|
||||
<image :src="changeImg" class="itemSize-img"></image>
|
||||
<view class="itemSize_info">
|
||||
<view class="itemSize_name">{{ changeName }}</view>
|
||||
<view class="itemSize_price">￥{{ changePrice }}/{{ goodsUnit }}</view>
|
||||
</view>
|
||||
<view class="quantity-control">
|
||||
<view class="decrease-btn" @tap.stop="decreaseQuantity()">-</view>
|
||||
<view class="quantity">{{ changeCount }}</view>
|
||||
<view class="increase-btn" @tap.stop="increaseQuantity()">+</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="itemSize" v-for="(item, index) in info.commodity_goods_info_list" :key="item.id"
|
||||
@click="changeGG(item, index)" :class="index == currentGGIndex ? 'itemSize_active' : ''">
|
||||
{{ item.goods_name }} {{ item.goods_spec }} / {{ item.goods_unit }}
|
||||
</view>
|
||||
<view class="fenge"></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>
|
||||
<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: 30rpx; height: 30rpx;"></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: 30rpx; height: 30rpx;"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pay-button" @click="submitBuyOrder">立即支付</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -345,10 +420,16 @@ export default {
|
||||
comments: [],
|
||||
show: false,
|
||||
showSize: false,
|
||||
// 立即购买相关
|
||||
showBuy: false,
|
||||
changeCount: 0,
|
||||
defAddress: {},
|
||||
selectedPayment: 'wechat', // 默认微信支付
|
||||
|
||||
changeImg: "",
|
||||
changeName: "",
|
||||
changePrice: "",
|
||||
goodsUnit: "",
|
||||
selectedGoods: null, // 保存传入的商品规格信息
|
||||
qrcodePath: null, // 存储当前页面的二维码路径
|
||||
};
|
||||
@ -478,6 +559,7 @@ export default {
|
||||
this.changeImg = picUrl + this.currentGG.commodity_pic[0]
|
||||
this.changeName = this.currentGG.goods_alias
|
||||
this.changePrice = this.currentGG.sales_price
|
||||
this.goodsUnit = this.currentGG.goods_unit
|
||||
});
|
||||
},
|
||||
|
||||
@ -508,8 +590,73 @@ export default {
|
||||
this.changeImg = picUrl + item.commodity_pic[0]
|
||||
this.changeName = item.goods_alias
|
||||
this.changePrice = item.sales_price
|
||||
this.goodsUnit = item.goods_unit
|
||||
this.getComment(item.goods_id)
|
||||
},
|
||||
// 立即购买相关方法
|
||||
showBuyPopup() {
|
||||
this.changeCount = 1;
|
||||
this.showBuy = true;
|
||||
// 检查是否有选中的地址
|
||||
const selectedAddress = uni.getStorageSync('selectedAddress');
|
||||
if (selectedAddress && Object.keys(selectedAddress).length > 0) {
|
||||
this.defAddress = selectedAddress;
|
||||
// 清除选中状态，避免重复应用
|
||||
uni.removeStorageSync('selectedAddress');
|
||||
} else {
|
||||
// 如果没有选中的地址，则获取默认地址
|
||||
this.getUserAddress();
|
||||
}
|
||||
},
|
||||
closeBuy() {
|
||||
this.showBuy = false;
|
||||
uni.removeStorageSync('selectedAddress');
|
||||
this.changeCount = 1;
|
||||
},
|
||||
editAddress() {
|
||||
NavgateTo('/packages/shop/address/index');
|
||||
},
|
||||
// 数量加减
|
||||
decreaseQuantity() {
|
||||
if (this.changeCount > 1) {
|
||||
this.changeCount--;
|
||||
}
|
||||
},
|
||||
increaseQuantity() {
|
||||
const stock = this.info.commodity_goods_info_list[this.currentGGIndex].stock_quantity;
|
||||
if (this.changeCount < stock) {
|
||||
this.changeCount++;
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '库存不足',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
// 获取默认收货地址
|
||||
getUserAddress() {
|
||||
request(apiArr.getUserDefAddress, "POST", {}).then(res => {
|
||||
this.defAddress = res.default_address;
|
||||
});
|
||||
},
|
||||
// 选择支付方式
|
||||
selectPayment(type) {
|
||||
this.selectedPayment = type;
|
||||
},
|
||||
// 复制收货地址
|
||||
copyAddress() {
|
||||
if (this.defAddress && Object.keys(this.defAddress).length > 0) {
|
||||
uni.setClipboardData({
|
||||
data: this.defAddress.address + this.defAddress.house_number,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '地址复制成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
car() {
|
||||
NavgateTo("../shopCar/index");
|
||||
},
|
||||
@ -627,6 +774,69 @@ export default {
|
||||
closeSize() {
|
||||
this.showSize = false;
|
||||
},
|
||||
// 提交立即购买订单
|
||||
submitBuyOrder() {
|
||||
// 检查是否选择了收货地址
|
||||
if (!this.defAddress || !this.defAddress.address) {
|
||||
uni.showToast({
|
||||
title: '请选择收货地址',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 根据平台设置不同的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
|
||||
|
||||
// 原始逻辑：创建订单后再进行支付
|
||||
const params = {
|
||||
user_id: uni.getStorageSync('userId'),
|
||||
// 固定设置为1
|
||||
order_cate: 1,
|
||||
goods_list: [{
|
||||
supplier_id: this.info.supplier_id,
|
||||
supplier_name: this.currentGG.supplier_name || '',
|
||||
is_same_day: this.currentGG.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: [{
|
||||
goods_id: this.currentGG.id,
|
||||
count: this.changeCount,
|
||||
price: this.currentGG.sales_price
|
||||
}]
|
||||
}]
|
||||
}
|
||||
console.log("🚀 ~ params:", params)
|
||||
|
||||
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);
|
||||
})
|
||||
})
|
||||
},
|
||||
// 获取评论
|
||||
getComment(id) {
|
||||
let params = {}
|
||||
|
||||
@ -909,7 +909,6 @@ image {
|
||||
}
|
||||
|
||||
.itemSize {
|
||||
width: 30%;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
background: #F6F7FB;
|
||||
@ -917,6 +916,8 @@ image {
|
||||
padding: 10rpx 15rpx;
|
||||
white-space: nowrap;
|
||||
margin: 20rpx 30rpx;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.itemSize_active {
|
||||
|
||||
@ -324,7 +324,7 @@
|
||||
<image :src="changeImg" class="itemSize-img"></image>
|
||||
<view class="itemSize_info">
|
||||
<view class="itemSize_name">{{ changeName }}</view>
|
||||
<view class="itemSize_price">￥{{ changePrice }}/袋</view>
|
||||
<view class="itemSize_price">￥{{ changePrice }}/{{ goodsUnit }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="itemSize" v-for="(item, index) in info.commodity_goods_info_list" :key="item.id"
|
||||
@ -382,7 +382,7 @@
|
||||
<image :src="changeImg" class="itemSize-img"></image>
|
||||
<view class="itemSize_info">
|
||||
<view class="itemSize_name">{{ changeName }}</view>
|
||||
<view class="itemSize_price">￥{{ changePrice }}/袋</view>
|
||||
<view class="itemSize_price">￥{{ changePrice }}/{{ goodsUnit }}</view>
|
||||
</view>
|
||||
<view class="quantity-control">
|
||||
<view class="decrease-btn" @tap.stop="decreaseQuantity()">-</view>
|
||||
@ -557,6 +557,7 @@ export default {
|
||||
changeImg: "",
|
||||
changeName: "",
|
||||
changePrice: "",
|
||||
goodsUnit: "",
|
||||
|
||||
endTime: "",
|
||||
endTheCountdownDay: '',
|
||||
@ -1043,6 +1044,7 @@ export default {
|
||||
this.changeImg = this.currentGG.commodity_pic[0];
|
||||
this.changeName = this.currentGG.goods_alias;
|
||||
this.changePrice = this.currentGG.sales_price;
|
||||
this.goodsUnit = this.currentGG.goods_unit;
|
||||
} else {
|
||||
// 商品列表为空时的处理
|
||||
this.currentGG = null;
|
||||
@ -1050,6 +1052,7 @@ export default {
|
||||
this.changeImg = '';
|
||||
this.changeName = '';
|
||||
this.changePrice = '';
|
||||
this.goodsUnit = '';
|
||||
}
|
||||
});
|
||||
},
|
||||
@ -1079,6 +1082,7 @@ export default {
|
||||
this.changeImg = item.commodity_pic[0]
|
||||
this.changeName = item.goods_alias
|
||||
this.changePrice = item.sales_price
|
||||
this.goodsUnit = item.goods_unit;
|
||||
},
|
||||
car() {
|
||||
const item = {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user