Compare commits
6 Commits
e03aed53a5
...
c9270f2cb6
| Author | SHA1 | Date | |
|---|---|---|---|
|
c9270f2cb6 | ||
|
|
8e62a47125 | ||
|
|
b3a65335db | ||
|
|
00c5364e19 | ||
|
|
fdd5900c99 | ||
|
|
76ba1351e0 |
1056
packages/advertising/goodsDetail/index.css
Normal file
1056
packages/advertising/goodsDetail/index.css
Normal file
File diff suppressed because it is too large
Load Diff
821
packages/advertising/goodsDetail/index.vue
Normal file
821
packages/advertising/goodsDetail/index.vue
Normal file
@ -0,0 +1,821 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="header">
|
||||
<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||
<view class="searchBox_left" @click="back">
|
||||
<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiper">
|
||||
<view class="tag2 tag-img" v-if="
|
||||
currentGG.is_same_day
|
||||
">当日达</view>
|
||||
<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" @change="changeIndex">
|
||||
<swiper-item v-for="(item, index) in currentGG.commodity_pic" :key="index">
|
||||
<image :src="picUrl + item"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view class="NumDot" v-if="currentGG.goods_carousel && currentGG.goods_carousel.length > 0">
|
||||
{{ currentIndex }} /{{ currentGG.goods_carousel.length }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="Money">
|
||||
<view class="MoneyMark">￥</view>
|
||||
{{ currentGG.sales_price }}
|
||||
<view class="MoneyUnit">/{{ currentGG.goods_unit }}</view>
|
||||
<view class="num">已售{{ soldOutNum }} | 剩余{{ currentGG.stock_quantity }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 规格 -->
|
||||
<!-- @click="changeGG2(item, index)" :class="index == currentGGIndex ? 'active' : ''"> -->
|
||||
<view class="GGBox">
|
||||
<view class="GG_left">
|
||||
<view class="GG_Item" v-for="(item, index) in info.commodity_goods_info_list" :key="item.id"
|
||||
@click="changeGG(item, index)" :class="index == currentGGIndex ? 'active' : ''">
|
||||
{{ item.goods_spec }} / {{ item.goods_unit }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="GG_rigth" v-if="info.commodity_goods_info_list && info.commodity_goods_info_list.length > 0">
|
||||
共{{ info.commodity_goods_info_list.length }}款
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="Tit">
|
||||
<view class="tag tag-text" v-if="
|
||||
currentGG.is_same_day
|
||||
">当日达</view>
|
||||
{{ currentGG.goods_name }}
|
||||
</view>
|
||||
<view class="Msg">{{ currentGG.commodity_brief }}</view>
|
||||
|
||||
<view class="fenge"></view>
|
||||
|
||||
<!-- 已购买区域 -->
|
||||
<view>
|
||||
<view class="purchase-area">
|
||||
<view class="purchase-count">{{ totalCount }}人已购买</view>
|
||||
<view class="view-more" @click="showPurchaseRecords">查看更多 ></view>
|
||||
</view>
|
||||
<view class="record-list">
|
||||
<view class="record-item" v-for="(record, index) in purchaseRecords" :key="index">
|
||||
<view class="record-user">
|
||||
<image :src="record.avatar" class="user-avatar"></image>
|
||||
<view class="user-name">{{ record.nick_name }}</view>
|
||||
</view>
|
||||
<view class="record-amount">
|
||||
{{ formatDate(record.buy_time) }}买了{{ record.count }}件
|
||||
</view>
|
||||
<view class="record-time">
|
||||
<button class="buy-btn" @click="goSubmit">去下单</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fenge"></view>
|
||||
|
||||
<h3 class="GoodsMsg">商品详情</h3>
|
||||
|
||||
<view class="Msg_Item">
|
||||
<view class="Msg_ItemTit">货号</view>
|
||||
<view class="Msg_ItemCon" @click="copys(currentGG.goods_no)">
|
||||
{{ currentGG.goods_no }}
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_copy.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="Msg_Item">
|
||||
<view class="Msg_ItemTit">规格说明</view>
|
||||
<view class="Msg_ItemCon">{{ currentGG.goods_spec }}</view>
|
||||
</view>
|
||||
<view class="Msg_Item">
|
||||
<view class="Msg_ItemTit">售卖单位</view>
|
||||
<view class="Msg_ItemCon">{{ currentGG.goods_unit }}</view>
|
||||
</view>
|
||||
|
||||
<view class="GoosMsg">
|
||||
<image v-for="item in currentGG.goods_detail_pic" :src="picUrl + item" :key="item" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<view class="priceInfo">
|
||||
<h3 class="priceInfo-title">价格说明</h3>
|
||||
<view class="priceInfo-content">
|
||||
<view>
|
||||
<text class="priceInfo-content-title">划线价格：</text>
|
||||
指商品的厂商指导价、正品零售价、市面常见价或该商品曾经展示过的销售价等，并非原价。仅供参考。
|
||||
</view>
|
||||
<view>
|
||||
<text class="priceInfo-content-title">未划线价格：</text>
|
||||
指商品的实时价格，不因表述的差异改变性质，具体成交价格根据商品参加活动，或使用优惠券等发生变化最终以订单结算价格为准。
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部购物车 -->
|
||||
<view class="Car">
|
||||
<view class="car_left">
|
||||
<view class="share" @click="share">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share.png"
|
||||
mode="widthFix"></image>
|
||||
分享
|
||||
</view>
|
||||
<view class="cars" @click="car">
|
||||
<u-badge numberType="limit" :type="type" max="99" :value="carNum"></u-badge>
|
||||
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car.png"
|
||||
mode="widthFix"></image>
|
||||
购物车
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="car_right2" v-if="info.commodity_goods_info_list[currentGGIndex].stock_quantity < 1">
|
||||
已售罄
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- 分享 -->
|
||||
<view class="shadow" @click.stop="changeShadow" v-if="boxshadow1">
|
||||
<view class="shadowBox1">
|
||||
<view class="shadowBox1Item" @click="shareFriend">
|
||||
<button class="shadowBox1Item_btn" open-type="share" bindtap="onShareButtonClick">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_WX.png"
|
||||
mode="aspectFill"></image>
|
||||
微信好友
|
||||
</button>
|
||||
</view>
|
||||
<view class="shadowBox1Item" @click="openSave">
|
||||
<button class="shadowBox1Item_btn">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_saveImg.png"
|
||||
mode="aspectFill"></image>
|
||||
生成海报
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 海报 -->
|
||||
<view class="shadow" @click="changeShadow2" v-if="boxshadow2">
|
||||
<view class="shadowBox2">
|
||||
<view class="shadowBox_img">
|
||||
<view class="boxshadow_tit">今日商品推荐</view>
|
||||
<view class="boxshadow_img">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png">
|
||||
</image>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="shadowBoxInfo">
|
||||
<view class="shadowboxInfo_left">二维码</view>
|
||||
<view class="shadowboxInfo_right">
|
||||
<view class="shadowboxInfo_right_1">正鲜生</view>
|
||||
<view class="shadowboxInfo_right_2">
|
||||
长按识别小程序 <br />
|
||||
数量有限马上抢购
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shadowBox_btn" @click.stop="saveImg">保存海报</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 评价 查看详情 -->
|
||||
<!-- <u-popup :show="show" round="20rpx" mode="bottom" @close="close" @open="open" :z-index="10070">
|
||||
<view class="reviews-section">
|
||||
<view class="popup-header">
|
||||
<h3 class="popup-header-h3">评价</h3>
|
||||
<view class="popup-header-view" @click="close">取消</view>
|
||||
</view>
|
||||
<view class="temp">
|
||||
<view class="temp1">
|
||||
<img class="temp_img" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/pingjia.png" />
|
||||
为你展示真实评价
|
||||
</view>
|
||||
<view class="temp1" @click="showSizePopup">
|
||||
款式
|
||||
<img class="temp_img1" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/kuanshi.png" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="reviews-list" v-if="comments.length > 0">
|
||||
<view class="review-item" v-for="(comment, index) in comments" :key="index">
|
||||
<view class="review-user">
|
||||
<image :src="comment.avatar" class="user-avatar"></image>
|
||||
<view class="user-info">
|
||||
<view class="user-name">{{ comment.username }}</view>
|
||||
</view>
|
||||
<view class="review-time">{{ comment.time }}</view>
|
||||
</view>
|
||||
<view class="user-purchase">已购 {{ comment.product }}</view>
|
||||
<view class="review-content">{{ comment.content }}</view>
|
||||
<view class="review-images" v-if="comment.images.length > 0">
|
||||
<image :src="img" class="review-img" v-for="(img, idx) in comment.images" :key="idx"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup> -->
|
||||
|
||||
<!-- 团购记录弹窗 -->
|
||||
<u-popup :show="showPurchase" round="20rpx" mode="bottom" @close="closePurchase">
|
||||
<view class="purchase-popup">
|
||||
<view class="popup-header">
|
||||
<h3 class="popup-header-h3">团购记录</h3>
|
||||
<view class="popup-header-view" @click="closePurchase">取消</view>
|
||||
</view>
|
||||
<view class="purchase-records">
|
||||
<view class="record-header">
|
||||
<view class="record-header-item">买家</view>
|
||||
<view class="record-header-item">数量</view>
|
||||
<view class="record-header-item">购买时间</view>
|
||||
</view>
|
||||
<view class="record-list">
|
||||
<view class="record-item" v-for="(record, index) in purchaseRecords" :key="index">
|
||||
<view class="record-user">
|
||||
<image :src="record.avatar" class="user-avatar"></image>
|
||||
<view class="user-name">{{ record.nick_name }}</view>
|
||||
</view>
|
||||
<view class="record-amount">+{{ record.count }}</view>
|
||||
<view class="record-time">{{ record.buy_time }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<!-- 选择款式 -->
|
||||
<u-popup :show="showSize" round="20rpx" mode="bottom" @close="closeSize">
|
||||
<view class="popup-header">
|
||||
<h3 class="popup-header-h3">选择款式</h3>
|
||||
<view class="popup-header-view" @click="closeSize">取消</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 }}/袋</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>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { apiArr } from "../../../api/shop";
|
||||
import { apiArr as apiArr2 } from "../../../api/groupPurchase";
|
||||
import { picUrl, menuButtonInfo, request, NavgateTo } from "../../../utils";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
itemObj: {},
|
||||
|
||||
picUrl,
|
||||
top: "",
|
||||
localHeight: "",
|
||||
carNum: "",
|
||||
prevCarNum: "",
|
||||
currentNum: "0", //当前商品的数量
|
||||
type: "error",
|
||||
boxshadow1: false,
|
||||
boxshadow2: false,
|
||||
id: "",
|
||||
groupById: "",
|
||||
info: "",
|
||||
currentIndex: "1", //当前轮播图
|
||||
|
||||
currentGG: "", //当前选中规格
|
||||
currentGGIndex: "", //当前规格index
|
||||
|
||||
carOrderList: [],
|
||||
// 新增评论数据
|
||||
showReviewPopup: false,
|
||||
soldOutNum: 0,
|
||||
|
||||
show: false,
|
||||
showSize: false,
|
||||
showPurchase: false,
|
||||
purchaseRecords: [],
|
||||
totalCount: 0,
|
||||
changeImg: "",
|
||||
changeName: "",
|
||||
changePrice: "",
|
||||
|
||||
endTime: "",
|
||||
endTheCountdownDay: '',
|
||||
endTheCountdownHour: '',
|
||||
endTheCountdownMinute: '',
|
||||
endTheCountdownSecond: '',
|
||||
timer: null, // 定时器ID
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 显示团购记录
|
||||
showPurchaseRecords() {
|
||||
if (this.purchaseRecords.length > 0) {
|
||||
this.showPurchase = true;
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '没有更多数据',
|
||||
icon: 'none'
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭团购记录
|
||||
closePurchase() {
|
||||
this.showPurchase = false;
|
||||
},
|
||||
|
||||
//去下单
|
||||
goSubmit() {
|
||||
NavgateTo('/packages/shop/groupPurchaseSubmit/index')
|
||||
},
|
||||
|
||||
changeIndex(e) {
|
||||
this.currentIndex = e.detail.current + 1;
|
||||
},
|
||||
|
||||
back() {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
},
|
||||
// 分享给微信好友方法 - 触发分享给好友的聊天框
|
||||
shareFriend() {
|
||||
this.boxshadow1 = false; // 关闭分享弹窗
|
||||
|
||||
// 获取当前商品的分享信息
|
||||
const shareInfo = {
|
||||
title: this.currentGG.goods_name || '商品分享', // 分享标题
|
||||
desc: this.currentGG.commodity_brief || '快来看看这款商品吧', // 分享描述
|
||||
link: `${window.location.origin}/pages/goodsDetail/index?id=${this.id}`, // 商品详情页链接
|
||||
imageUrl: this.picUrl + (this.currentGG.goods_carousel && this.currentGG.goods_carousel[0] || '') // 分享图片
|
||||
};
|
||||
|
||||
// 判断环境是否支持微信分享
|
||||
if (typeof WeixinJSBridge === 'undefined') {
|
||||
// 尝试使用uni的分享API作为备选方案
|
||||
if (typeof uni.share !== 'undefined') {
|
||||
uni.share({
|
||||
provider: 'weixin',
|
||||
scene: 'WXSceneSession',
|
||||
type: 0,
|
||||
title: shareInfo.title,
|
||||
summary: shareInfo.desc,
|
||||
href: shareInfo.link,
|
||||
imageUrl: shareInfo.imageUrl,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '分享成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('分享失败', err);
|
||||
uni.showToast({
|
||||
title: '分享失败，请重试',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请在微信客户端打开',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 主动触发微信分享给好友聊天框
|
||||
WeixinJSBridge.invoke('sendAppMessage', {
|
||||
title: shareInfo.title,
|
||||
desc: shareInfo.desc,
|
||||
link: shareInfo.link,
|
||||
img_url: shareInfo.imageUrl,
|
||||
img_width: '120',
|
||||
img_height: '120',
|
||||
type: 'link',
|
||||
data_url: ''
|
||||
}, (res) => {
|
||||
if (res.err_msg === 'sendAppMessage:ok') {
|
||||
uni.showToast({
|
||||
title: '分享成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
} else if (res.err_msg === 'sendAppMessage:cancel') {
|
||||
uni.showToast({
|
||||
title: '已取消分享',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
} else {
|
||||
console.error('分享失败', res);
|
||||
uni.showToast({
|
||||
title: '分享失败，请重试',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('调用微信分享接口失败', error);
|
||||
// 降级处理：使用wx.ready方式作为备选
|
||||
if (typeof wx !== 'undefined') {
|
||||
wx.ready(() => {
|
||||
// 设置分享给微信好友的回调
|
||||
wx.onMenuShareAppMessage({
|
||||
title: shareInfo.title,
|
||||
desc: shareInfo.desc,
|
||||
link: shareInfo.link,
|
||||
imgUrl: shareInfo.imageUrl,
|
||||
type: 'link',
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '分享成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
},
|
||||
cancel: () => {
|
||||
uni.showToast({
|
||||
title: '已取消分享',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('分享失败', err);
|
||||
uni.showToast({
|
||||
title: '分享失败，请重试',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
});
|
||||
// 提示用户点击右上角分享
|
||||
uni.showToast({
|
||||
title: '请点击右上角分享按钮',
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
|
||||
wx.error((err) => {
|
||||
console.error('微信JS-SDK初始化失败', err);
|
||||
uni.showToast({
|
||||
title: '分享功能加载失败',
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
changeShadow() {
|
||||
this.boxshadow1 = false;
|
||||
},
|
||||
openSave() {
|
||||
this.boxshadow1 = false;
|
||||
this.boxshadow2 = true;
|
||||
},
|
||||
// 保存海报
|
||||
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);
|
||||
},
|
||||
});
|
||||
},
|
||||
changeShadow2() {
|
||||
this.boxshadow2 = false;
|
||||
},
|
||||
|
||||
// 点分享按钮
|
||||
share() {
|
||||
this.boxshadow1 = true;
|
||||
},
|
||||
//商品详情
|
||||
getGoodsInfo() {
|
||||
const params = {
|
||||
id: this.id,
|
||||
}
|
||||
request(apiArr.getGoodsInfo, "POST", params).then((res) => {
|
||||
// 分割图片
|
||||
res.commodity_goods_info_list.forEach((item) => {
|
||||
item.goods_detail_pic = item.goods_detail_pic ? item.goods_detail_pic.split(",") : [];
|
||||
item.goods_carousel = item.goods_carousel ? item.goods_carousel.split(",") : [];
|
||||
item.commodity_pic = item.commodity_pic ? item.commodity_pic.split(",") : [];
|
||||
});
|
||||
|
||||
//根据购物车列表 和 当前商品列表 来更新当前商品列表在购物车中的数量
|
||||
if (this.carOrderList) {
|
||||
this.carOrderList.forEach((items) => {
|
||||
res.commodity_goods_info_list.forEach((item) => {
|
||||
if (items.goods_id == item.id) {
|
||||
item.cart_count = { count: 0 };
|
||||
item.cart_count.count = items.count;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const currentTime = new Date().getTime();
|
||||
|
||||
this.info = res;
|
||||
|
||||
// 确保商品列表不为空
|
||||
if (this.info && this.info.commodity_goods_info_list && this.info.commodity_goods_info_list.length > 0) {
|
||||
// 根据itemObj在商品列表中找到对应的索引
|
||||
this.currentGGIndex = this.itemObj && this.info.commodity_goods_info_list
|
||||
? this.info.commodity_goods_info_list.findIndex(item => item.id === this.itemObj.id)
|
||||
: 0;
|
||||
|
||||
// 如果没找到匹配项，默认为0
|
||||
if (this.currentGGIndex === -1) {
|
||||
this.currentGGIndex = 0;
|
||||
}
|
||||
|
||||
// 使用完整的商品数据对象，而不是itemObj
|
||||
this.currentGG = this.info.commodity_goods_info_list[this.currentGGIndex];
|
||||
|
||||
// 设置相关属性
|
||||
this.changeImg = this.currentGG.commodity_pic[0];
|
||||
this.changeName = this.currentGG.goods_alias;
|
||||
this.changePrice = this.currentGG.sales_price;
|
||||
} else {
|
||||
// 商品列表为空时的处理
|
||||
this.currentGG = null;
|
||||
this.currentGGIndex = 0;
|
||||
this.changeImg = '';
|
||||
this.changeName = '';
|
||||
this.changePrice = '';
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
copys(e) {
|
||||
uni.setClipboardData({
|
||||
data: e,
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "复制成功",
|
||||
icon: "success",
|
||||
duration: 2000,
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// 切换规格
|
||||
changeGG(item, index) {
|
||||
this.currentGG = item;
|
||||
this.currentGGIndex = index;
|
||||
if (this.currentGG.cart_count) {
|
||||
this.currentNum = this.currentGG.cart_count.count;
|
||||
} else {
|
||||
this.currentGG.cart_count = { count: 0 };
|
||||
}
|
||||
this.changeImg = item.commodity_pic[0]
|
||||
this.changeName = item.goods_alias
|
||||
this.changePrice = item.sales_price
|
||||
},
|
||||
car() {
|
||||
const item = {
|
||||
is_adver: 1,
|
||||
}
|
||||
NavgateTo("../shopCar/index?item=" + JSON.stringify(item));
|
||||
},
|
||||
|
||||
getShopCarList() {
|
||||
const params = {
|
||||
is_adver: 1,
|
||||
}
|
||||
return request(apiArr.getCar, "POST", params).then((res) => {
|
||||
// 合并当日达和普通商品数据
|
||||
this.carOrderList = [].concat(res.same_day_cart_list, res.normal_cart_list)
|
||||
.flatMap(supplier => supplier.commodity_cart_and_goods_model);
|
||||
this.carNum = res.total;
|
||||
return res;
|
||||
});
|
||||
},
|
||||
|
||||
addCar() {
|
||||
let that = this;
|
||||
this.info.commodity_goods_info_list[this.currentGGIndex].cart_count = {
|
||||
count: this.info.commodity_goods_info_list[this.currentGGIndex].min_order_quantity,
|
||||
};
|
||||
// this.info.commodity_goods_info_list.forEach((item) => {
|
||||
// console.log(item.cart_count);
|
||||
// goods_id_and_count.push({
|
||||
// goods_id: item.id,
|
||||
// count: item.cart_count ? item.cart_count.count : 0,
|
||||
// });
|
||||
// });
|
||||
|
||||
let countVal = this.info.commodity_goods_info_list[this.currentGGIndex].min_order_quantity
|
||||
|
||||
const params = {
|
||||
goods_id_and_count: [
|
||||
{
|
||||
goods_id:
|
||||
this.info.commodity_goods_info_list[this.currentGGIndex].id,
|
||||
count: countVal,
|
||||
},
|
||||
],
|
||||
group_buy_id: this.info.commodity_goods_info_list[this.currentGGIndex].group_buy_activity_id,
|
||||
}
|
||||
request(apiArr.updateCar, "POST", params).then((res) => {
|
||||
that.getShopCar();
|
||||
that.getShopCarList();
|
||||
});
|
||||
},
|
||||
|
||||
// 购物车更改
|
||||
changeCar() {
|
||||
// 获取当前商品的购物车数量，如果不存在则设为0
|
||||
const currentCount = this.info.commodity_goods_info_list[this.currentGGIndex].cart_count?.count;
|
||||
// 新的数量为当前数量加一
|
||||
const newCount = currentCount + 1;
|
||||
|
||||
const params = {
|
||||
user_id: uni.getStorageSync("userId"),
|
||||
goods_id_and_count: [
|
||||
{
|
||||
goods_id: this.info.commodity_goods_info_list[this.currentGGIndex].id,
|
||||
count: newCount,
|
||||
},
|
||||
],
|
||||
group_buy_id: this.info.commodity_goods_info_list[this.currentGGIndex].group_buy_activity_id,
|
||||
};
|
||||
|
||||
request(apiArr.updateCar, "POST", params).then((res) => {
|
||||
this.getShopCarList();
|
||||
uni.showToast({
|
||||
title: "操作成功！",
|
||||
success() { },
|
||||
});
|
||||
this.getGoodsInfo();
|
||||
});
|
||||
},
|
||||
|
||||
showPopup() {
|
||||
this.show = true;
|
||||
},
|
||||
|
||||
showSizePopup() {
|
||||
this.showSize = true;
|
||||
},
|
||||
|
||||
close() {
|
||||
this.show = false;
|
||||
},
|
||||
|
||||
closeSize() {
|
||||
this.showSize = false;
|
||||
},
|
||||
|
||||
// 购买记录
|
||||
getBuyRecord() {
|
||||
const params = {
|
||||
activity_id: 47,
|
||||
goods_id: this.id
|
||||
}
|
||||
request(apiArr2.groupBuyRecord, 'POST', params).then(res => {
|
||||
const record = res.group_buy_record.map(item => {
|
||||
return {
|
||||
...item,
|
||||
avatar: picture + item.avatar
|
||||
}
|
||||
})
|
||||
this.purchaseRecords = record
|
||||
this.totalCount = res.total_count
|
||||
// 计算所有item.count的总和并赋值给soldOutNum
|
||||
this.soldOutNum = record.reduce((total, item) => total + (item.count || 0), 0)
|
||||
})
|
||||
},
|
||||
formatDate(dateStr) {
|
||||
if (!dateStr) return '';
|
||||
const date = new Date(dateStr);
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${month}月${day}日`;
|
||||
},
|
||||
|
||||
// 计算距离结束日期的剩余时间
|
||||
getEndTheCountdown(endTime) {
|
||||
// 获取当前时间和结束时间的时间戳
|
||||
const now = new Date().getTime();
|
||||
const end = new Date(endTime).getTime();
|
||||
|
||||
// 计算时间差（毫秒）
|
||||
let diff = end - now;
|
||||
|
||||
// 如果已经结束，返回提示
|
||||
if (diff <= 0) {
|
||||
return '团购已结束';
|
||||
}
|
||||
|
||||
// 计算距离结束时间
|
||||
this.endTheCountdownDay = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||
diff -= this.endTheCountdownDay * (1000 * 60 * 60 * 24);
|
||||
this.endTheCountdownHour = Math.floor(diff / (1000 * 60 * 60));
|
||||
diff -= this.endTheCountdownHour * (1000 * 60 * 60);
|
||||
this.endTheCountdownMinute = Math.floor(diff / (1000 * 60));
|
||||
diff -= this.endTheCountdownMinute * (1000 * 60);
|
||||
this.endTheCountdownSecond = Math.floor(diff / (1000));
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.itemObj = JSON.parse(decodeURIComponent(options.item));
|
||||
const meun = menuButtonInfo();
|
||||
this.top = meun.top;
|
||||
this.localHeight = meun.height;
|
||||
this.id = this.itemObj.commodity_id ? this.itemObj.commodity_id : this.itemObj.id;
|
||||
this.groupById = this.itemObj.groupById
|
||||
this.getBuyRecord()
|
||||
this.getEndTheCountdown(this.endTime)
|
||||
|
||||
// 启动定时器，每秒更新一次倒计时
|
||||
this.timer = setInterval(() => {
|
||||
this.getEndTheCountdown(this.endTime)
|
||||
}, 1000)
|
||||
},
|
||||
onReachBottom() { },
|
||||
onShow() {
|
||||
// 确保getShopCarList完成后再执行getGoodsInfo
|
||||
this.getShopCarList().then(() => {
|
||||
this.getGoodsInfo();
|
||||
});
|
||||
},
|
||||
|
||||
//离开页面的时候直接更新购物车数量(目前接口是 传入商品id 数量。如果有当前商品就更新数量。如果没有就增加商品。如果删除某个商品 count 为0 就删除)
|
||||
onHide() {
|
||||
// 清除定时器
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
|
||||
let goods_id_and_count = [];
|
||||
this.info.commodity_goods_info_list.forEach((item) => {
|
||||
goods_id_and_count.push({
|
||||
goods_id: item.id,
|
||||
count: item.cart_count ? item.cart_count.count : 0,
|
||||
});
|
||||
});
|
||||
|
||||
// request(apiArr.updateCar, "POST", {
|
||||
// goods_id_and_count,
|
||||
// }).then((res) => {
|
||||
// console.log("Cart updated on hide");
|
||||
// });
|
||||
return;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./index.css");
|
||||
</style>
|
||||
608
packages/advertising/goodsSubmit/index.css
Normal file
608
packages/advertising/goodsSubmit/index.css
Normal 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;
|
||||
}
|
||||
468
packages/advertising/goodsSubmit/index.vue
Normal file
468
packages/advertising/goodsSubmit/index.vue
Normal file
@ -0,0 +1,468 @@
|
||||
<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">添加新地址 ></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 }}</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 => {
|
||||
// 如果图片URL不是以https开头，则拼接picUrl
|
||||
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--
|
||||
|
||||
// 当数量减到0时，从carList中删除该商品
|
||||
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;
|
||||
});
|
||||
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;
|
||||
}
|
||||
|
||||
// 检查是否存在isafterSale属性且值为true
|
||||
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
|
||||
|
||||
// 如果存在isafterSale属性且为true，则跳过createOrder接口调用
|
||||
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'),
|
||||
// 先判断shopCarList数据中是否包含isAdver且为true
|
||||
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-app的复制API
|
||||
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>
|
||||
@ -116,6 +116,9 @@
|
||||
color: #ffffff;
|
||||
background-color: #fc5d15;
|
||||
border-radius: 15rpx 0 0 15rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.group-price2{
|
||||
|
||||
@ -137,11 +137,11 @@ export default {
|
||||
});
|
||||
},
|
||||
toDetail(itemObj) {
|
||||
// const item = {
|
||||
// ...itemObj,
|
||||
// groupById: itemObj.group_buy_activity_info ? itemObj.group_buy_activity_info.id : ''
|
||||
// };
|
||||
// NavgateTo(`/packages/shop/groupPurchaseDetail/index?item=${JSON.stringify(item)}`)
|
||||
const item = {
|
||||
...itemObj,
|
||||
groupById: itemObj.group_buy_activity_info ? itemObj.group_buy_activity_info.id : ''
|
||||
};
|
||||
NavgateTo(`/packages/advertising/goodsDetail/index?item=${JSON.stringify(item)}`)
|
||||
},
|
||||
// 增加商品数量
|
||||
increaseQuantity(index) {
|
||||
@ -222,7 +222,7 @@ export default {
|
||||
const item = {
|
||||
is_adver: 1,
|
||||
}
|
||||
NavgateTo("/packages/shop/shopCar/index?item=" + JSON.stringify(item));
|
||||
NavgateTo("/packages/advertising/shopCar/index?item=" + JSON.stringify(item));
|
||||
},
|
||||
// 计算距离结束日期的剩余时间
|
||||
getEndTheCountdown(endTime) {
|
||||
|
||||
258
packages/advertising/shopCar/index.css
Normal file
258
packages/advertising/shopCar/index.css
Normal file
@ -0,0 +1,258 @@
|
||||
.main {
|
||||
height: 77vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.searchBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.searchBox_mid {
|
||||
font-size: 40rpx;
|
||||
color: #222222;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.searchBox_left {
|
||||
box-sizing: border-box;
|
||||
padding-left: 20rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.searchBox_right {
|
||||
opacity: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.isDay {
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
|
||||
.tag {
|
||||
background-color: #ff7d00;
|
||||
color: white;
|
||||
font-size: 22rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 20rpx 0 20rpx 20rpx;
|
||||
}
|
||||
|
||||
.tag-img {
|
||||
position: absolute;
|
||||
/* top: 1; */
|
||||
bottom: 1;
|
||||
left: 10;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.is_day {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-top: 160rpx;
|
||||
}
|
||||
|
||||
.empty image {
|
||||
width: 500rpx;
|
||||
height: 500rpx;
|
||||
}
|
||||
|
||||
.empty div {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
margin-top: -40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.deleteIcon {
|
||||
margin: 0 40rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top: 36rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.goodsItem_supplier {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 20rpx;
|
||||
}
|
||||
|
||||
.goodsItem_tit {
|
||||
font-size: 35rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.goodsItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 20rpx;
|
||||
padding: 30rpx 0;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1rpx solid #EBEBEB;
|
||||
}
|
||||
|
||||
.goodsItem_left {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.goodsItem_right {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.goodsItem_msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.goodsItem_msg_right {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.goodsItem_msg_img {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.goodsItem_msg_right {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.goodsItem_msg_right_msg_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 34rpx;
|
||||
color: #FF370B;
|
||||
margin-top: 26rpx;
|
||||
}
|
||||
|
||||
.goodsItem_msg_right_tit {
|
||||
font-size: 30rpx;
|
||||
color: #000000;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.goodsItem_msg_right_subTit {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.goodsItem_msg_right_msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.goodsItem_msg_right_msg_left span {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
|
||||
.goodsItem_msg_right_msg_right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.minus {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-width: 1px;
|
||||
border-color: #E6E6E6;
|
||||
border-style: solid;
|
||||
border-top-left-radius: 100px;
|
||||
border-top-right-radius: 100px;
|
||||
border-bottom-left-radius: 100px;
|
||||
border-bottom-right-radius: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.plus {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-color: #FF0000;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.footer {
|
||||
width: 750rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 3rpx -3rpx 15rpx 0rpx rgba(255, 27, 27, 0.05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 40rpx 20rpx;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.footer_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer_all {
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer_all image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.footer_total {
|
||||
font-weight: bold;
|
||||
font-size: 40rpx;
|
||||
color: #FF370B;
|
||||
margin-left: 90rpx;
|
||||
}
|
||||
|
||||
.footer_total span {
|
||||
font-size: 32rpx;
|
||||
color: #222222;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.footer_right {
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
font-weight: 700;
|
||||
width: 230rpx;
|
||||
height: 70rpx;
|
||||
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
|
||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
769
packages/advertising/shopCar/index.vue
Normal file
769
packages/advertising/shopCar/index.vue
Normal file
@ -0,0 +1,769 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="header">
|
||||
<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||
<view class="searchBox_left" @click="back">
|
||||
<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
|
||||
</view>
|
||||
<view class="searchBox_mid">购物车({{ shopCarTotal }})</view>
|
||||
<view class="searchBox_right">
|
||||
<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="empty" v-if="shopCarTotal == 0">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/shopCar_no.png"></image>
|
||||
</view>
|
||||
<view class="main" v-else>
|
||||
<view class="deleteIcon" @click="deleteItem">
|
||||
<u-icon name="trash" size="50rpx"></u-icon>
|
||||
</view>
|
||||
<view class="is_day " v-if="isDayshow">
|
||||
<view class="footer_all" @click="is_day_checked"
|
||||
style="color: orange; font-size: 35rpx; font-weight: bolder;">
|
||||
<image v-if="!isDaychecked"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png">
|
||||
</image>
|
||||
<image v-if="isDaychecked"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png">
|
||||
</image>
|
||||
当日达
|
||||
</view>
|
||||
<view class="goodsList">
|
||||
<view v-for="(carItem, carIndex) in isDayCarList" :key="carItem.id" :index="carIndex">
|
||||
<view class="goodsItem_supplier">
|
||||
<view class="goodsItem_left" @click="supplierCheck(carItem, true)">
|
||||
<image v-if="!carItem.supplierChecked"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png">
|
||||
</image>
|
||||
<image v-if="carItem.supplierChecked"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png">
|
||||
</image>
|
||||
</view>
|
||||
<view class="goodsItem_tit">
|
||||
{{ carItem.supplier_name }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="goodsItem" v-for="(item, index) in carItem.commodity_cart_and_goods_model"
|
||||
:key="item.id">
|
||||
<view class="goodsItem_left" @click="DayChecked(item)">
|
||||
<image v-if="!item.checked"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png">
|
||||
</image>
|
||||
<image v-if="item.checked"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png">
|
||||
</image>
|
||||
</view>
|
||||
<view class="goodsItem_right">
|
||||
<view class="goodsItem_msg">
|
||||
<view class="goodsItem_msg_img">
|
||||
<view class="tag tag-img">当日达</view>
|
||||
<image :src="picUrl + item.commodity_goods_info.commodity_pic">
|
||||
</image>
|
||||
</view>
|
||||
<view class="goodsItem_msg_right">
|
||||
<view class="goodsItem_msg_right_tit">
|
||||
{{ item.commodity_goods_info.goods_name }}
|
||||
</view>
|
||||
<view class="goodsItem_msg_right_subTit">
|
||||
{{ item.commodity_goods_info.goods_intro }}
|
||||
</view>
|
||||
<view class="goodsItem_msg_right_msg">
|
||||
<view class="goodsItem_msg_right_msg_left">
|
||||
<span>￥</span>{{ getPrice(item) }}
|
||||
<!-- {{ item.commodity_goods_info.group_buy_price ?
|
||||
item.commodity_goods_info.group_buy_price :
|
||||
item.commodity_goods_info.sales_price }} -->
|
||||
<span>/{{ item.commodity_goods_info.goods_unit }}</span>
|
||||
</view>
|
||||
<view class="goodsItem_msg_right_msg_right">
|
||||
<u-number-box v-model="item.count" :asyncChange="true" min="0">
|
||||
<template #minus>
|
||||
<view class="minus"
|
||||
@click="minus(carItem, index, carItem.commodity_cart_and_goods_model)">
|
||||
<u-icon name="minus" size="32" bold></u-icon>
|
||||
</view>
|
||||
</template>
|
||||
<template #input><text style="width: 80rpx; text-align: center"
|
||||
class="input">{{ item.count }}</text>
|
||||
</template>
|
||||
<template #plus>
|
||||
<view class="plus" @click="add(carItem, index)">
|
||||
<u-icon name="plus" color="#FFFFFF" size="32" bold></u-icon>
|
||||
</view>
|
||||
</template>
|
||||
</u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="is_day" v-if="parcelPostshow" style="margin-top: 20rpx;">
|
||||
<view class="footer_all" @click="parcel_post_checked"
|
||||
style="color: orange; font-size: 35rpx; font-weight: bolder;">
|
||||
<image v-if="!isParcelPostchecked"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png">
|
||||
</image>
|
||||
<image v-if="isParcelPostchecked"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png">
|
||||
</image>
|
||||
包邮
|
||||
</view>
|
||||
<view class="goodsList">
|
||||
<view v-for="(carItem, carIndex) in shopCarList" :key="carItem.id" :index="carIndex">
|
||||
<view class="goodsItem_supplier">
|
||||
<view class="goodsItem_left" @click="supplierCheck(carItem, false)">
|
||||
<image v-if="!carItem.supplierChecked"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png">
|
||||
</image>
|
||||
<image v-if="carItem.supplierChecked"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png">
|
||||
</image>
|
||||
</view>
|
||||
<view class="goodsItem_tit">
|
||||
{{ carItem.supplier_name }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="goodsItem" v-for="(item, index) in carItem.commodity_cart_and_goods_model"
|
||||
:key="item.id">
|
||||
<view class="goodsItem_left" @click="changeChecked(item)">
|
||||
<image v-if="!item.checked"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png">
|
||||
</image>
|
||||
<image v-if="item.checked"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png">
|
||||
</image>
|
||||
</view>
|
||||
<view class="goodsItem_right">
|
||||
<view class="goodsItem_msg">
|
||||
<view class="goodsItem_msg_img">
|
||||
<image :src="picUrl + item.commodity_goods_info.commodity_pic">
|
||||
</image>
|
||||
</view>
|
||||
<view class="goodsItem_msg_right">
|
||||
<view class="goodsItem_msg_right_tit">
|
||||
{{ item.commodity_goods_info.goods_name }}
|
||||
</view>
|
||||
<view class="goodsItem_msg_right_subTit">
|
||||
{{ item.commodity_goods_info.goods_intro }}
|
||||
</view>
|
||||
<view class="goodsItem_msg_right_msg">
|
||||
<view class="goodsItem_msg_right_msg_left">
|
||||
<span>￥</span>{{ getPrice(item) }}
|
||||
<!-- {{ item.commodity_goods_info.group_buy_price ?
|
||||
item.commodity_goods_info.group_buy_price :
|
||||
item.commodity_goods_info.sales_price }} -->
|
||||
<span>/{{ item.commodity_goods_info.goods_unit }}</span>
|
||||
</view>
|
||||
<view class="goodsItem_msg_right_msg_right">
|
||||
<u-number-box v-model="item.count" :asyncChange="true" min="0">
|
||||
<template #minus>
|
||||
<view class="minus"
|
||||
@click="minus(item, index, carItem.commodity_cart_and_goods_model)">
|
||||
<u-icon name="minus" size="32" bold></u-icon>
|
||||
</view>
|
||||
</template>
|
||||
<template #input>
|
||||
<text style="width: 80rpx; text-align: center"
|
||||
class="input">{{
|
||||
item.count }}</text>
|
||||
</template>
|
||||
<template #plus>
|
||||
<view class="plus" @click="add(item, index)">
|
||||
<u-icon name="plus" color="#FFFFFF" size="32" bold></u-icon>
|
||||
</view>
|
||||
</template>
|
||||
</u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="footer">
|
||||
<view class="footer_left">
|
||||
<view class="footer_all" @click="allChecked">
|
||||
<image v-if="!isAllchecked"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png">
|
||||
</image>
|
||||
<image v-if="isAllchecked"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png">
|
||||
</image>
|
||||
全选
|
||||
</view>
|
||||
<view class="footer_total">
|
||||
<span>合计</span>
|
||||
￥{{ shopMoney }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer_right" @click="submitOrder">结算</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
apiArr
|
||||
} from "../../../api/shop";
|
||||
import {
|
||||
picUrl,
|
||||
menuButtonInfo,
|
||||
request,
|
||||
NavgateTo
|
||||
} from "../../../utils";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
picUrl,
|
||||
top: "",
|
||||
localHeight: "",
|
||||
value: 3,
|
||||
type: "error",
|
||||
shopCarList: [],
|
||||
isDayCarList: [],
|
||||
shopCarTotal: 0,
|
||||
shopMoney: 0,
|
||||
isAllchecked: false, // 全选
|
||||
isDaychecked: false, // 当日达
|
||||
isDayshow: false,
|
||||
isParcelPostchecked: false,
|
||||
parcelPostshow: false,
|
||||
is_group_buy: '',
|
||||
is_adver: ''
|
||||
};
|
||||
},
|
||||
// watch: {
|
||||
// // console.log(this.isDaychecked);
|
||||
// isDaychecked(e) {
|
||||
// console.log('当日达状态', e);
|
||||
// },
|
||||
// isParcelPostchecked(e) {
|
||||
// console.log('包邮状态', e);
|
||||
// }
|
||||
// isAllchecked(e) {
|
||||
// console.log('全选状态', e);
|
||||
// }
|
||||
// },
|
||||
methods: {
|
||||
back() {
|
||||
NavgateTo("1");
|
||||
},
|
||||
|
||||
// 商家单选框全选/取消全选
|
||||
supplierCheck(carItem, isDay) {
|
||||
carItem.supplierChecked = !carItem.supplierChecked;
|
||||
carItem.commodity_cart_and_goods_model.forEach(goods => {
|
||||
goods.checked = carItem.supplierChecked;
|
||||
});
|
||||
this.calcTotal();
|
||||
|
||||
// 更新当日达或包邮全选状态
|
||||
if (isDay) {
|
||||
this.isDaychecked = this.isDayCarList.every(item =>
|
||||
item.commodity_cart_and_goods_model.every(goods => goods.checked)
|
||||
);
|
||||
} else {
|
||||
this.isParcelPostchecked = this.shopCarList.every(item =>
|
||||
item.commodity_cart_and_goods_model.every(goods => goods.checked)
|
||||
);
|
||||
}
|
||||
|
||||
// 更新全选状态
|
||||
this.isAllchecked = this.isDaychecked && this.isParcelPostchecked;
|
||||
},
|
||||
|
||||
// 结算
|
||||
submitOrder() {
|
||||
let arr = [];
|
||||
// 收集包邮购物车中选中的商品
|
||||
this.shopCarList.forEach((item) => {
|
||||
item.commodity_cart_and_goods_model.forEach((ite) => {
|
||||
if (ite.checked) {
|
||||
ite.supplier_name = item.supplier_name;
|
||||
arr.push(ite);
|
||||
}
|
||||
})
|
||||
});
|
||||
// 收集当日达购物车中选中的商品
|
||||
this.isDayCarList.forEach((item) => {
|
||||
item.commodity_cart_and_goods_model.forEach((ite) => {
|
||||
if (ite.checked) {
|
||||
ite.supplier_name = item.supplier_name;
|
||||
arr.push(ite);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
if (arr.length == 0) {
|
||||
this.$u.toast("请选择商品");
|
||||
return;
|
||||
}
|
||||
// 给每个商品添加isAdver=true参数
|
||||
const updatedArr = arr.map(item => ({
|
||||
...item,
|
||||
isAdver: item.adver_id ? true : ''
|
||||
}));
|
||||
// NavgateTo(`../submitOrder/index?shopCarList=${JSON.stringify(arr)}`);
|
||||
NavgateTo(`../goodsSubmit/index?shopCarList=${JSON.stringify(updatedArr)}`);
|
||||
},
|
||||
|
||||
// 获取购物车列表
|
||||
getShopCar() {
|
||||
const params = {
|
||||
is_group_buy: this.is_group_buy,
|
||||
is_adver: this.is_adver
|
||||
}
|
||||
request(apiArr.getCar, "POST", params).then((res) => {
|
||||
if (res.normal_cart_list.length > 0) {
|
||||
res.normal_cart_list.forEach((item) => {
|
||||
item.checked = false;
|
||||
item.supplierChecked = false;
|
||||
})
|
||||
this.parcelPostshow = true;
|
||||
this.shopCarList = res.normal_cart_list
|
||||
} else {
|
||||
res.normal_cart_list.forEach((item) => {
|
||||
item.checked = false;
|
||||
item.supplierChecked = false;
|
||||
})
|
||||
this.parcelPostshow = false;
|
||||
this.shopCarList = []
|
||||
}
|
||||
|
||||
if (res.same_day_cart_list.length > 0) {
|
||||
res.same_day_cart_list.forEach((item) => {
|
||||
item.checked = false;
|
||||
item.supplierChecked = false;
|
||||
})
|
||||
this.isDayshow = true;
|
||||
this.isDayCarList = res.same_day_cart_list
|
||||
} else {
|
||||
res.normal_cart_list.forEach((item) => {
|
||||
item.checked = false;
|
||||
item.supplierChecked = false;
|
||||
})
|
||||
this.isDayshow = false;
|
||||
this.isDayCarList = []
|
||||
}
|
||||
|
||||
// res.normal_cart_list.forEach((item) => {
|
||||
// if (item.is_support_same_day == false) {
|
||||
// this.isDayshow = false;
|
||||
// this.parcelPostshow = true;
|
||||
// this.shopCarList = item.commodity_cart_and_goods_model;
|
||||
// item.checked = false;
|
||||
// } else {
|
||||
// this.isDayshow = true;
|
||||
// this.parcelPostshow = false;
|
||||
// this.isDayCarList = item.commodity_cart_and_goods_model;
|
||||
// item.checked = false;
|
||||
// }
|
||||
// });
|
||||
|
||||
this.shopCarTotal = res.total;
|
||||
});
|
||||
},
|
||||
|
||||
// 单个修改
|
||||
changeChecked(item) {
|
||||
item.checked = !item.checked;
|
||||
this.calcTotal();
|
||||
|
||||
// 找到对应的商家并更新商家选中状态
|
||||
this.shopCarList.forEach(carItem => {
|
||||
if (carItem.commodity_cart_and_goods_model.includes(item)) {
|
||||
carItem.supplierChecked = carItem.commodity_cart_and_goods_model.every(goods => goods.checked);
|
||||
}
|
||||
});
|
||||
|
||||
// 检查当日达是否全选
|
||||
this.isDaychecked = this.isDayCarList.every(carItem =>
|
||||
carItem.commodity_cart_and_goods_model.every(goods => goods.checked)
|
||||
);
|
||||
// 检查包邮是否全选
|
||||
this.isParcelPostchecked = this.shopCarList.every(carItem =>
|
||||
carItem.commodity_cart_and_goods_model.every(goods => goods.checked)
|
||||
);
|
||||
// 检查全选状态
|
||||
this.isAllchecked = this.isDaychecked && this.isParcelPostchecked;
|
||||
},
|
||||
DayChecked(item) {
|
||||
item.checked = !item.checked;
|
||||
this.calcTotal();
|
||||
|
||||
// 找到对应的商家并更新商家选中状态
|
||||
this.isDayCarList.forEach(carItem => {
|
||||
if (carItem.commodity_cart_and_goods_model.includes(item)) {
|
||||
carItem.supplierChecked = carItem.commodity_cart_and_goods_model.every(goods => goods.checked);
|
||||
}
|
||||
});
|
||||
|
||||
// 检查当日达是否全选
|
||||
this.isDaychecked = this.isDayCarList.every(carItem =>
|
||||
carItem.commodity_cart_and_goods_model.every(goods => goods.checked)
|
||||
);
|
||||
// 检查包邮是否全选
|
||||
this.isParcelPostchecked = this.shopCarList.every(carItem =>
|
||||
carItem.commodity_cart_and_goods_model.every(goods => goods.checked)
|
||||
);
|
||||
// 检查全选状态
|
||||
this.isAllchecked = this.isDaychecked && this.isParcelPostchecked;
|
||||
},
|
||||
// 全选
|
||||
allChecked() {
|
||||
this.isAllchecked = !this.isAllchecked;
|
||||
this.isDaychecked = this.isAllchecked;
|
||||
this.isParcelPostchecked = this.isAllchecked;
|
||||
|
||||
// 设置当日达购物车商品和商家选中状态
|
||||
this.isDayCarList.forEach(carItem => {
|
||||
carItem.supplierChecked = this.isAllchecked;
|
||||
carItem.commodity_cart_and_goods_model.forEach(goods => {
|
||||
goods.checked = this.isAllchecked;
|
||||
});
|
||||
});
|
||||
|
||||
// 设置包邮购物车商品和商家选中状态
|
||||
this.shopCarList.forEach(carItem => {
|
||||
carItem.supplierChecked = this.isAllchecked;
|
||||
carItem.commodity_cart_and_goods_model.forEach(goods => {
|
||||
goods.checked = this.isAllchecked;
|
||||
});
|
||||
});
|
||||
|
||||
this.calcTotal();
|
||||
},
|
||||
|
||||
// 全选当日达
|
||||
is_day_checked() {
|
||||
this.isDaychecked = !this.isDaychecked;
|
||||
|
||||
// 设置当日达购物车商品和商家选中状态
|
||||
this.isDayCarList.forEach(carItem => {
|
||||
carItem.supplierChecked = this.isDaychecked;
|
||||
carItem.commodity_cart_and_goods_model.forEach(goods => {
|
||||
goods.checked = this.isDaychecked;
|
||||
});
|
||||
});
|
||||
|
||||
// 更新全选状态
|
||||
this.isAllchecked = this.isDaychecked && this.isParcelPostchecked;
|
||||
|
||||
this.calcTotal();
|
||||
},
|
||||
|
||||
// 全选包邮
|
||||
parcel_post_checked() {
|
||||
this.isParcelPostchecked = !this.isParcelPostchecked;
|
||||
|
||||
// 设置包邮购物车商品和商家选中状态
|
||||
this.shopCarList.forEach(carItem => {
|
||||
carItem.supplierChecked = this.isParcelPostchecked;
|
||||
carItem.commodity_cart_and_goods_model.forEach(goods => {
|
||||
goods.checked = this.isParcelPostchecked;
|
||||
});
|
||||
});
|
||||
|
||||
// 更新全选状态
|
||||
this.isAllchecked = this.isDaychecked && this.isParcelPostchecked;
|
||||
|
||||
this.calcTotal();
|
||||
},
|
||||
|
||||
// 计算金额
|
||||
calcTotal() {
|
||||
let total = 0;
|
||||
const currentTime = new Date().getTime();
|
||||
|
||||
// 计算当日达购物车金额
|
||||
this.isDayCarList.forEach(carItem => {
|
||||
carItem.commodity_cart_and_goods_model.forEach(goods => {
|
||||
if (goods.checked) {
|
||||
// 团购活动时间判断
|
||||
const startTime = new Date(goods.commodity_goods_info.group_buy_activity_info?.start_time).getTime();
|
||||
const endTime = new Date(goods.commodity_goods_info.group_buy_activity_info?.end_time).getTime();
|
||||
if (currentTime >= startTime && currentTime <= endTime) {
|
||||
total += goods.commodity_goods_info.group_buy_price * goods.count;
|
||||
} else {
|
||||
total += goods.commodity_goods_info.sales_price * goods.count;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 计算包邮购物车金额
|
||||
this.shopCarList.forEach(carItem => {
|
||||
carItem.commodity_cart_and_goods_model.forEach(goods => {
|
||||
if (goods.checked) {
|
||||
// 团购活动时间判断
|
||||
const startTime = new Date(goods.commodity_goods_info.group_buy_activity_info?.start_time).getTime();
|
||||
const endTime = new Date(goods.commodity_goods_info.group_buy_activity_info?.end_time).getTime();
|
||||
if (currentTime >= startTime && currentTime <= endTime) {
|
||||
total += goods.commodity_goods_info.group_buy_price * goods.count;
|
||||
} else {
|
||||
total += goods.commodity_goods_info.sales_price * goods.count;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this.shopMoney = total.toFixed(2);
|
||||
},
|
||||
|
||||
// 减少数量
|
||||
// 删除商品的通用方法
|
||||
deleteCarItem(carItem, goodsIndex, item) {
|
||||
const that = this;
|
||||
request(apiArr.deleteCar, "POST", {
|
||||
ids: [carItem.id],
|
||||
}).then((res) => {
|
||||
// 从商品列表中移除该商品
|
||||
item.splice(goodsIndex, 1);
|
||||
|
||||
// 如果商家没有商品了，移除该商家
|
||||
if (item.length === 0) {
|
||||
// 分别检查并移除当日达和普通购物车中的商家
|
||||
const dayCarIndex = that.isDayCarList.findIndex(dayItem =>
|
||||
dayItem.commodity_cart_and_goods_model === item
|
||||
);
|
||||
const normalCarIndex = that.shopCarList.findIndex(normalItem =>
|
||||
normalItem.commodity_cart_and_goods_model === item
|
||||
);
|
||||
|
||||
if (dayCarIndex !== -1) {
|
||||
that.isDayCarList.splice(dayCarIndex, 1);
|
||||
// 如果当日达购物车为空，更新显示状态
|
||||
if (that.isDayCarList.length === 0) {
|
||||
that.isDayshow = false;
|
||||
}
|
||||
}
|
||||
if (normalCarIndex !== -1) {
|
||||
that.shopCarList.splice(normalCarIndex, 1);
|
||||
// 如果普通购物车为空，更新显示状态
|
||||
if (that.shopCarList.length === 0) {
|
||||
that.parcelPostshow = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
that.calcTotal();
|
||||
}).catch(error => {
|
||||
console.error('删除商品失败:', error);
|
||||
uni.showToast({
|
||||
title: '删除失败，请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 减少商品数量
|
||||
minus(carItem, goodsIndex, item) {
|
||||
const that = this;
|
||||
const currentTime = new Date().getTime();
|
||||
|
||||
// 检查商品是否有团购活动且在活动时间内
|
||||
const isGroupBuyActive = carItem.commodity_goods_info.group_buy_activity_info &&
|
||||
currentTime >= new Date(carItem.commodity_goods_info.group_buy_activity_info?.start_time).getTime() &&
|
||||
currentTime <= new Date(carItem.commodity_goods_info.group_buy_activity_info?.end_time).getTime();
|
||||
|
||||
if (carItem.count > 0) {
|
||||
if (isGroupBuyActive && carItem.count === carItem.commodity_goods_info.min_order_quantity) {
|
||||
// 团购商品达到最小购买数量，提示用户并删除商品
|
||||
uni.showToast({
|
||||
title: '最少购买' + carItem.commodity_goods_info.min_order_quantity + '件',
|
||||
icon: 'none'
|
||||
});
|
||||
// 更新购物车总数
|
||||
that.shopCarTotal = Math.max(0, that.shopCarTotal - carItem.commodity_goods_info.min_order_quantity);
|
||||
// 删除商品
|
||||
that.deleteCarItem(carItem, goodsIndex, item);
|
||||
} else {
|
||||
// 正常减少数量
|
||||
this.shopCarTotal = Math.max(0, this.shopCarTotal - 1);
|
||||
carItem.count = carItem.count - 1;
|
||||
this.handleQuantityChange(carItem.count, carItem);
|
||||
|
||||
// 如果数量减为0，删除商品
|
||||
if (carItem.count === 0) {
|
||||
that.deleteCarItem(carItem, goodsIndex, item);
|
||||
} else {
|
||||
// 只在数量不为0时计算总价
|
||||
this.calcTotal();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 添加数量
|
||||
add(carItem, goodsIndex) {
|
||||
const currentTime = new Date().getTime();
|
||||
|
||||
const isGroupBuyActive = carItem.commodity_goods_info.group_buy_activity_info &&
|
||||
currentTime >= new Date(carItem.commodity_goods_info.group_buy_activity_info?.start_time).getTime() &&
|
||||
currentTime <= new Date(carItem.commodity_goods_info.group_buy_activity_info?.end_time).getTime();
|
||||
if (isGroupBuyActive) {
|
||||
if (carItem.count == 0) {
|
||||
carItem.count = carItem.commodity_goods_info.min_order_quantity
|
||||
this.shopCarTotal += carItem.commodity_goods_info.min_order_quantity;
|
||||
} else {
|
||||
if (carItem.count == carItem.commodity_goods_info.total_stock) {
|
||||
uni.showToast({
|
||||
title: '库存不足',
|
||||
icon: 'none'
|
||||
});
|
||||
return
|
||||
}
|
||||
if (carItem.count == carItem.commodity_goods_info.max_limit_quantity) {
|
||||
uni.showToast({
|
||||
title: '一次最多购买' + carItem.commodity_goods_info.max_limit_quantity + '件',
|
||||
icon: 'none'
|
||||
});
|
||||
return
|
||||
}
|
||||
carItem.count++;
|
||||
this.shopCarTotal++;
|
||||
}
|
||||
} else {
|
||||
if (carItem.count >= carItem.commodity_goods_info.stock_quantity) {
|
||||
uni.showToast({
|
||||
title: '库存不足',
|
||||
icon: 'none'
|
||||
});
|
||||
return
|
||||
}
|
||||
carItem.count++;
|
||||
this.shopCarTotal++;
|
||||
}
|
||||
|
||||
const item = carItem.commodity_cart_and_goods_model;
|
||||
this.handleQuantityChange(carItem.count, carItem);
|
||||
this.calcTotal();
|
||||
},
|
||||
|
||||
// 删除
|
||||
deleteItem() {
|
||||
let that = this;
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "确定删除所选商品吗",
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
let ids = [];
|
||||
|
||||
// 收集当日达购物车中选中的商品ID
|
||||
that.isDayCarList.forEach(carItem => {
|
||||
carItem.commodity_cart_and_goods_model.forEach(goods => {
|
||||
if (goods.checked) {
|
||||
ids.push(goods.id);
|
||||
goods.checked = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 收集包邮购物车中选中的商品ID
|
||||
that.shopCarList.forEach(carItem => {
|
||||
carItem.commodity_cart_and_goods_model.forEach(goods => {
|
||||
if (goods.checked) {
|
||||
ids.push(goods.id);
|
||||
goods.checked = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (ids.length === 0) {
|
||||
uni.showToast({
|
||||
title: "请选择要删除的商品",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
request(apiArr.deleteCar, "POST", {
|
||||
ids,
|
||||
})
|
||||
.then((res) => {
|
||||
uni.showToast({
|
||||
title: "删除成功",
|
||||
duration: 2000,
|
||||
});
|
||||
that.getShopCar();
|
||||
that.calcTotal();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
} else if (res.cancel) {
|
||||
console.log("用户点击取消");
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
//商品数量变化
|
||||
handleQuantityChange(val, item) {
|
||||
const params = {
|
||||
user_id: uni.getStorageSync("userId"),
|
||||
goods_id_and_count: [{
|
||||
goods_id: item.goods_id,
|
||||
count: val,
|
||||
},],
|
||||
};
|
||||
request(apiArr.updateCar, "POST", params).then((res) => {
|
||||
console.log(res);
|
||||
uni.showToast({
|
||||
title: "操作成功！",
|
||||
success() { },
|
||||
});
|
||||
return Promise.resolve();
|
||||
});
|
||||
},
|
||||
//获取价格 - 该显示团购价还是正常价
|
||||
getPrice(item) {
|
||||
const currentTime = new Date().getTime();
|
||||
const startTime = new Date(item.commodity_goods_info.group_buy_activity_info?.start_time).getTime();
|
||||
const endTime = new Date(item.commodity_goods_info.group_buy_activity_info?.end_time).getTime();
|
||||
if (currentTime >= startTime && currentTime <= endTime) {
|
||||
return item.commodity_goods_info.group_buy_price;
|
||||
} else {
|
||||
return item.commodity_goods_info.sales_price;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
const meun = menuButtonInfo();
|
||||
this.top = meun.top;
|
||||
this.localHeight = meun.height;
|
||||
this.is_group_buy = options.item ? JSON.parse(options.item).is_group_buy : ''
|
||||
this.is_adver = options.item ? JSON.parse(options.item).is_adver : ''
|
||||
this.getShopCar();
|
||||
},
|
||||
onShow() {
|
||||
this.getShopCar();
|
||||
// 取消所有选中状态并重置金额
|
||||
this.isAllchecked = false;
|
||||
this.isDaychecked = false;
|
||||
this.isParcelPostchecked = false;
|
||||
this.shopMoney = 0.00;
|
||||
},
|
||||
onReachBottom() { },
|
||||
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./index.css");
|
||||
</style>
|
||||
@ -522,8 +522,15 @@ export default {
|
||||
order_pay_id: res.id,
|
||||
}
|
||||
request(apiArr.tradeQuery, "POST", params).then(res => {
|
||||
this.getRoomSelect();
|
||||
this.getUserGovenmentMoney();
|
||||
if (res && res.pay_status == 1) {
|
||||
uni.showToast({
|
||||
title: '支付成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
this.getRoomSelect();
|
||||
this.getUserGovenmentMoney();
|
||||
}
|
||||
})
|
||||
});
|
||||
} else if (res.cancel) {
|
||||
|
||||
@ -304,7 +304,11 @@ export default {
|
||||
isAdver: item.adver_id ? true : ''
|
||||
}));
|
||||
// NavgateTo(`../submitOrder/index?shopCarList=${JSON.stringify(arr)}`);
|
||||
NavgateTo(`../groupPurchaseSubmit/index?shopCarList=${JSON.stringify(updatedArr)}`);
|
||||
if(this.is_group_buy){
|
||||
NavgateTo(`../groupPurchaseSubmit/index?shopCarList=${JSON.stringify(updatedArr)}`);
|
||||
}else{
|
||||
NavgateTo(`/packages/advertising/groupPurchaseSubmit/index?shopCarList=${JSON.stringify(updatedArr)}`);
|
||||
}
|
||||
},
|
||||
|
||||
// 获取购物车列表
|
||||
|
||||
21
pages.json
21
pages.json
@ -1012,6 +1012,27 @@
|
||||
"navigationBarTitleText": "推荐商品",
|
||||
"navigationBarBackgroundColor": "#ffffff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "shopCar/index",
|
||||
"style": {
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "goodsSubmit/index",
|
||||
"style": {
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "提交团单"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "goodsDetail/index",
|
||||
"style": {
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user