cxc/sphc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Initial Commit

Browse Source
This commit is contained in:
quantulr
2024-05-06 15:34:15 +08:00
commit e3a0666d5a
307 changed files with 28969 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
pages/chuxiao/cx_details/goodsDetails.js Normal file
View File

@ -0,0 +1,296 @@
// pages/goodsDetails/goodsDetails.js
const app = getApp()
const WxParse = require('../../../wxParse/wxParse.js');
Page({
data: {
ip: app.globalData.ipUrl,
contents: '',//富文本
standardNum: 1,//商品数量
minusStatus: 'disabled',
goodsList: [],
bnrUrl: [],//轮播图
specsIndex: 0,//选择规格
specs: '',//规格
integral: 0,//积分商城进入
login: true
},
// 页面加载时
onLoad: function (options) {
console.log(options.goodsId)
//商品ID进入
if (options.goodsId) {
this.setData({
goodsId: options.goodsId
})
this.goodDtail()
}
//上级id
if (options.pId) {
wx.setStorage({
data: options.pId,
key: 'pId',
})
}
//判断登录
wx.getStorage({
key: 'user',
success: s => {
this.setData({
login: true
})
}, fail: f => {
this.setData({
login: false
})
}
})
},
// 商品详情
goodDtail() {
wx.showLoading({
title: '加载中',
mask: true,
})
wx.request({
url: app.globalData.ip + '/wisdommining/api/goods/getGoodsDetail',
method: 'GET',
header: {
"content-type": "application/x-www-form-urlencoded",
},
data: {
goodsId: this.data.goodsId,
userId: app.globalData.userId
},
success: res => {
wx.hideLoading();
console.log(res)
if (res.data.code == 1) {
let goods = res.data.value;
WxParse.wxParse('contents', 'html', goods.goodsInfo, this, 20);
this.setData({
goodsList: goods,
bnrUrl: goods.goodsBanner.split(',')
})
} else {
wx.showModal({
title: '提示!',
content: res.data.message,
showCancel: false,
})
}
}
})
},
// 轮播
onSlideChange(e) {
this.setData({
lunboindex: e.detail.current + 1
})
},
//点击显示底部弹窗
choose: function (e) {
var choose = e.currentTarget.dataset.choose
if(choose==1){
wx.showToast({
title: '促销商品无法加入购物车',
icon:'none'
})
return
}
this.setData({
choose: choose,
})
this.showModal();
},
//选择规格
showModal: function () {
// 显示遮罩层
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation
animation.translateY(300).step()
this.setData({
animationData: animation.export(),
showModalStatus: true
})
setTimeout(function () {
animation.translateY(0).step()
this.setData({
animationData: animation.export()
})
}.bind(this), 200)
},
//隐藏对话框
hideModal(e) {
console.log(this.data.goodsList.wisdGoodsSpecList[this.data.specsIndex].specStock)
if(this.data.goodsList.wisdGoodsSpecList[this.data.specsIndex].specStock==0){
wx.showToast({
title: '库存不足!',
icon:'none'
})
return
}
let hide = e.currentTarget.dataset.hide;
let goodsList = this.data.goodsList
let goods = [{
isDiscount:goodsList.isDiscount,//判断是否为会员折扣
goodsPhoto: goodsList.goodsPhoto,
goodsName: goodsList.goodsName,
goodsId: goodsList.id,
num: this.data.standardNum,
specs: goodsList.wisdGoodsSpecList[this.data.specsIndex]
}]
if (hide == 1) {
// 加入购物车
wx.showToast({
title: '促销商品无法加入购物车~',
icon:'none'
})
} else if (hide == 2) {
//普通商品
wx.navigateTo({
url: '/pages/chuxiao/cartPay/cartPay?goods=' + JSON.stringify(goods),
})
}
// 隐藏遮罩层
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation
animation.translateY(300).step()
this.setData({
animationData: animation.export(),
})
setTimeout(function () {
animation.translateY(0).step()
this.setData({
animationData: animation.export(),
showModalStatus: false
})
}.bind(this), 200)
},
// 加入购物车
carAdd(e) {
wx.request({
url: app.globalData.ip + '/wisdommining/api/goods/addCart',
method: 'POST',
header: {
"content-type": "application/x-www-form-urlencoded",
"token": app.globalData.token
},
data: {
userId: app.globalData.userId,
goodsId: this.data.goodsId,
goodsNum: this.data.standardNum,
specId: this.data.goodsList.wisdGoodsSpecList[this.data.specsIndex].id,
},
success: res => {
wx.hideLoading();
console.log(res)
if (res.data.code == 1) {
wx.showToast({
title: '添加成功,快去购物车中查看~',
icon: 'none',
success: s => {
setTimeout(() => {
this.goodDtail()
}, 1000);
}
})
} else {
wx.showModal({
title: '提示!',
content: res.data.message,
showCancel: false,
})
}
}
})
},
// 输入数量
standardNum(e) {
console.log('form发生了submit事件，携带数据为：', e.detail.value)
var standardNum = e.detail.value;
this.setData({
standardNum: standardNum,
});
},
//点击数量减少
clickReduce: function () {
var num = this.data.standardNum;
if (num > 1) {
num--;
}
var minusStatus = num <= 1 ? 'disabled' : 'normal';
this.setData({
standardNum: num,
minusStatus: minusStatus
});
},
clickAdd: function () {
var num = this.data.standardNum;
num++;
var minusStatus = num < 1 ? 'disabled' : 'normal';
this.setData({
standardNum: num,
minusStatus: minusStatus
})
},
//选择规格
specsClick: function (e) {
let index = e.target.dataset.index;
this.setData({
specsIndex: index
})
},
// 跳转首页
toIndex() {
wx.reLaunch({
url: '/pages/index/index',
})
},
// 跳转购物车
toCar() {
wx.reLaunch({
url: '/pages/cart/cart',
})
},
//去登录
login() {
wx.navigateTo({
url: '/pages/login/login?goodsId=' + this.data.goodsId,
})
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
app.share();
return {
path: '/pages/goodsDetails/goodsDetails?goodsId=' + this.data.goodsId + '&pId=' + app.globalData.userId,
title: '三品慧采小程序等你来~'
}
}
})

4
pages/chuxiao/cx_details/goodsDetails.json Normal file
View File

@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "商品详情"
}

122
pages/chuxiao/cx_details/goodsDetails.wxml Normal file
View File

@ -0,0 +1,122 @@
<import src="../../../wxParse/wxParse.wxml" />
<!--轮播图-->
<view class="content">
<swiper class='u-wrp-bnr' autoplay='true' interval='3000' duration='1000' circular='true' bindchange="onSlideChange">
<block wx:for="{{bnrUrl}}" wx:key="index">
<swiper-item>
<image src='{{item}}' class='u-img-slide'></image>
</swiper-item>
</block>
</swiper>
</view>
<view class="num display_J_C display_A_C" style="{{flash==1?'top:426rpx':''}}" wx:if="{{lunboindex>1}}">
<image src="/icon/goods-xj.png"></image>{{lunboindex}} / {{bnrUrl.length}}张
</view>
<view class="num display_J_C display_A_C" style="{{flash==1?'top:426rpx':''}}" wx:else>
<image src="/icon/goods-xj.png"></image>1 / {{bnrUrl.length}}张
</view>
<view class="detail-block">
<!-- 普通 -->
<view class="detail-title display_A_C">
<view class="detail-text">
<text>￥</text>{{goodsList.wisdGoodsSpecList[0].specPromotionPrice}}
</view>
<view class="exchange-num-two">
<text>￥</text>{{goodsList.wisdGoodsSpecList[0].originalPrice}}
</view>
</view>
<view class="detail-price">{{goodsList.goodsName}}</view>
<view class="detail-bottom display_J_B">
<view class="detail-bottom-l display_J_S">
<view class="detail-bottom-l__1">满￥{{goodsList.freightPrice}}包邮</view>
<view class="detail-bottom-l__2">分享得积分
<button open-type="share"></button>
</view>
</view>
<view class="detail-bottom-r">销量 {{goodsList.goodsSales}}</view>
</view>
</view>
<!-- 加入购物车弹窗 -->
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
<text class="iconfont icon-icon- hideModal" bindtap="hideModal"></text>
<view class="choose-img display_A_C">
<image src="{{goodsList.goodsPhoto}}" />
<view class="choose-right">
<view class="detail-title display_A_C">
<!-- 普通商城 -->
<view class="exchange-num-one">
￥{{goodsList.wisdGoodsSpecList[specsIndex].specPromotionPrice}}
</view>
</view>
<view>库存{{goodsList.wisdGoodsSpecList[specsIndex].specStock}}</view>
<view>{{goodsList.goodsName}}</view>
</view>
</view>
<scroll-view scroll-y="true" style="height: 400rpx;">
<view class="standard-title ">规格</view>
<view class="standard-box display_J_S">
<view class="standard-text {{specsIndex==index?'active':''}}" wx:for="{{goodsList.wisdGoodsSpecList}}"
wx:key="index" data-index="{{index}}" bindtap='specsClick'>{{item.specName}}</view>
</view>
</scroll-view>
<view class="standard-num-box">
<view>
<text class="num-title">数量</text>
</view>
<view class="standard-num display_J_A display_A_C">
<text class="reduce {{minusStatus}}" bindtap="clickReduce">-</text>
<input bindinput="standardNum" type="number" value="{{standardNum}}" disabled></input>
<text class="add" bindtap="clickAdd">+</text>
</view>
</view>
<view class="cart">
<text wx:if="{{choose==1}}" bindtap="hideModal" data-hide="1">加入购物车</text>
<text wx:if="{{choose==2}}" bindtap="hideModal" data-hide="2">立即购买</text>
</view>
</view>
<!-- 商品详情 -->
<view class="detImg-header">
<image src="/icon/goods_1.png" />
</view>
<view class="detImg-header" style="margin-top:30rpx;">
<image src="/icon/goods_2.png" />
</view>
<view class="detail-img">
<template is="wxParse" data="{{wxParseData:contents.nodes}}" />
</view>
<!-- 立即购买 -->
<view wx:if="{{login}}">
<view>
<view class="cartshop-block display_J_B">
<view class="cartshop-img-box" catchtap="toIndex">
<view class="display_J_C">
<image class="cartshop-img" src="/icon/goods-index.png" />
</view>
<view class="cartshop-img-name">首页</view>
</view>
<view class="cartshop-img-box" catchtap="toCar">
<view class="display_J_C">
<image class="cartshop-img" src="/icon/goods-cart.png" />
</view>
<view class="cartshop-img-name">购物车</view>
<text class="cartshop-img-num">{{goodsList.cartNum}}</text>
</view>
<view class="cartshop-img-box" catchtap="">
<view class="display_J_C">
<image class="cartshop-img" src="/icon/goods-fx.png" />
</view>
<view class="cartshop-img-name">分享</view>
<button plain="true" open-type="share"> </button>
</view>
<view class="cart-add">
<text bindtap="choose" data-choose="1">加入购物车</text>
<text bindtap="choose" data-choose="2">立即支付</text>
</view>
</view>
</view>
</view>
<view class="wLogin" catchtap="login" wx:if="{{!login}}">授权登录</view>
<view class="height100"></view>

517
pages/chuxiao/cx_details/goodsDetails.wxss Normal file
View File

@ -0,0 +1,517 @@
.u-wrp-bnr {
width: 100%;
height: 750rpx;
display: block;
position: relative;
background: #f0f0f0;
z-index: 5
}
.u-img-slide {
width: 100%;
height: 750rpx;
}
.content{
position: relative
}
.num {
position: absolute;
top: 676rpx;
right: 30rpx;
color: #fff;
height: 40rpx;
background: #00000080;
border-radius: 20rpx;
line-height: 40rpx;
padding: 0 15rpx;
font-size: 22rpx;
z-index: 100;
}
.num image{
width: 22rpx;
height: 21rpx;
margin-right: 10rpx;
}
.flash-box{
position: absolute;
bottom: 0;
height: 100rpx;
width: 100%;
line-height: 100rpx;
}
.miao-back{
position: absolute;
top: 0;
width: 100%;
height: 100rpx;
z-index: 30;
}
.flash-common{
font-size: 32rpx;
color: #fefefe;
margin-left: 30rpx;
}
.flash-old{
font-size: 24rpx;
color: #fefefe;
margin-left: 30rpx;
text-decoration: line-through;
}
.flash-text{
font-size: 24rpx;
color: #fefefe;
margin-left: 36rpx;
}
.flash-right{
margin-right: 19rpx;
z-index: 50;
width: 174rpx;
}
.flash-top{
margin-top: 16rpx;
height: 28rpx;
}
.flash-top image{
width: 26rpx;
height: 28rpx;
}
.flash-top view{
font-size: 22rpx;
color: #212320;
}
.flash-time{
margin-top: 10rpx;
color: #fff;
font-size: 22rpx;
height: 36rpx;
margin-left: 10rpx
}
.flash-time view{
width: 36rpx;
height: 36rpx;
line-height: 36rpx;
text-align: center;
background-color: #212320;
border-radius: 2rpx;
}
.flash-time text{
margin: auto 5rpx;
line-height: 36rpx;
}
.num-title-flash{
color: #666;
font-size: 22rpx;
}
/* 商品 */
.detail-block {
padding: 27rpx 30rpx;
background-color: #ffffff;
}
.detail-title {
font-size: 30rpx;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.detail-title .exchange-num-one {
font-size: 28rpx !important;
color: #ee7b1e !important;
}
.exchange-num-juan {
font-size: 34rpx;
color: #999999;
}
.exchange-num-two {
font-size: 28rpx;
color: #999999;
text-decoration: line-through;
margin-left: 20rpx;
}
.exchange-num-three{
font-size: 30rpx;
color: #ff291e;
margin-left:40rpx;
}
.detail-text {
font-size: 40rpx;
color: #ee7b1e;
}
.detail-price {
font-size: 32rpx;
color: #333333;
margin-top: 29rpx;
}
.detail-bottom {
margin-top: 39rpx;
font-size: 24rpx;
color: #111111;
}
.detail-bottom-l__1,.detail-bottom-l__2{
height: 38rpx;
line-height: 38rpx;
background-color: #fdf2e8;
border-radius: 4rpx;
font-size: 24rpx;
color: #ee7b1e;
padding: 0 10rpx;
margin-right: 20rpx;
}
.detail-bottom-l__2{
position: relative;
}
.detail-bottom-l__2 button{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.detail-bottom-r{
font-size: 24rpx;
color: #999999;
}
.detail-choose {
display: flex;
align-items: center;
justify-content: space-between;
height: 100rpx;
line-height: 100rpx;
background-color: #ffffff;
border-radius: 20rpx;
margin-top: 14rpx;
padding: 0 30rpx;
}
.detail-choose text:first-child {
font-size: 28rpx;
font-weight: bold;
color: #333333;
}
.detail-choose text:nth-child(2) {
flex: 0.9;
font-size: 28rpx;
color: #999999;
margin-left: 47rpx;
}
/* 商品详情 */
.detImg-header {
width: 100%;
height: 100rpx;
}
.detImg-header image {
width: 100%;
height: 100rpx;
}
.detail-img {
/* padding-bottom: 28rpx; */
background-color: #ffffff;
/* margin-bottom: 120rpx; */
}
.detail-img image {
width: 100% !important;
display: block;
}
/* 加入购物车 */
.cartshop-block {
position: fixed;
bottom: 0;
width: 690rpx;
padding:0 30rpx;
display: flex;
align-items: center;
height: 100rpx;
background-color: #ffffff;
}
.cartshop-img {
width: 40rpx;
height: 40rpx;
}
.cartshop-img-box {
height: 64rpx;
margin: 18rpx 0;
position: relative;
}
.cartshop-img-box button{
width: 40rpx !important;
opacity: 0;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
left:0;
top: 0;
z-index: 10;
}
.cartshop-img-name{
font-size: 20rpx;
color: #333333;
line-height: 24rpx;
}
.cartshop-img-num {
position: absolute;
top: -8rpx;
right: -12rpx;
height: 30rpx;
line-height: 30rpx;
background-color: #ff0000;
border-radius: 18rpx;
color: #fff;
font-size: 20rpx;
text-align: center;
display: inline-block;
padding: 0 10rpx;
}
.cart-add text {
display: inline-block;
width: 180rpx;
height: 65rpx;
line-height: 65rpx;
font-size: 28rpx;
text-align: center;
}
.cart-add text:first-child {
background-color: #ee7b1e;
color: #fff;
border-radius: 40rpx 0rpx 0rpx 40rpx;
}
.cart-add text:last-child {
background-color: #ff291e;
border-radius: 0rpx 40rpx 40rpx 0rpx;
color: #fff;
}
.cart-share {
width: 180rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background-color: #ffb400;
border-radius: 40rpx;
font-size: 28rpx;
color: #ffffff;
margin-right: 12rpx;
}
/* 弹窗 */
.show {
display: block
}
.hide {
display: none
}
.commodity_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0,0,0,0.6);
opacity: 1;
z-index: 1000;
color: #fff;
}
.commodity_attr_box {
width: 100%;
background-color: #ffffff;
border-radius: 20rpx 20rpx 0rpx 0rpx;
position: fixed;
bottom: 0;
left: 0;
z-index: 2000;
}
.hideModal {
font-size: 49rpx;
color: rgba(183, 183, 183, 0.95);
position: absolute;
top: 26rpx;
right: 30rpx;
}
.choose-img {
margin-top: 40rpx;
padding: 0 30rpx 25rpx;
width: 690rpx;
border-bottom:solid 2rpx #c9c9c9;
}
.choose-img image {
width: 200rpx;
height: 200rpx;
}
.choose-right {
margin-left: 50rpx
}
.choose-right view {
margin-top: 20rpx
}
.choose-right view:nth-child(2) {
font-size: 24rpx;
color: #999999;
}
.choose-right view:last-child {
font-size: 24rpx;
color: #666666;
}
.choose-img text {
font-size: 36rpx;
color: #da0000;
margin-left: 20rpx;
margin-top: 120rpx
}
.standard-height {
height: 180rpx;
}
.standard-title {
font-size: 30rpx;
color: #333333;
padding: 44rpx 30rpx 0 30rpx;
}
.standard-box {
padding: 0 28rpx;
}
.standard-text:first-child {
margin-left: 0;
}
.standard-text {
font-size: 24rpx;
color: #333333;
padding: 14rpx 24rpx;
background-color: #e5e5e5;
border-radius: 10rpx;
margin-left: 50rpx;
border: solid 1rpx #e5e5e5;
margin-top: 38rpx;
}
.active {
color: #fff;
background-color: #ee7b1e;
}
.standard-num-box {
display: flex;
justify-content: space-between;
padding: 0 32rpx;
margin-top: 10rpx;
}
.num-title {
font-size: 30rpx;
color: #333333;
}
.standard-num {
display: flex;
border-radius: 5rpx;
height: 50rpx;
line-height: 50rpx;
font-size: 26rpx;
}
.standard-num text {
width: 42rpx;
height: 42rpx;
line-height: 42rpx;
display: lnline-block;
text-align: center;
border-radius: 50%;
}
.standard-num .reduce {
border: solid 1rpx #ee7b1e;
color: #ee7b1e;
}
.standard-num .add {
background-color: #ee7b1e;
color: #fff;
}
.standard-num input {
text-align: center;
margin: 0 10rpx;
width: 70rpx;
}
.cart {
margin:30rpx auto;
width: 690rpx;
height: 80rpx;
line-height: 80rpx;
background-image: linear-gradient(-90deg,
#ee7b1e 0%,
#fdae03 100%);
border-radius: 40rpx;
text-align: center;
font-size: 32rpx;
color: #ffffff;
}
.cart text {
width: 100%;
display: block;
}
.cart .cart_4{
background-color: #999999;
border-radius: 40rpx;
}
.wIntegral{
width: 750rpx;
height: 90rpx;
background-color: #fff;
position: fixed;
bottom: 0;
}
.wIntegral view{
background-color: #ee7b1e;
color: #fff;
font-size: 28rpx;
text-align: center;
line-height: 64rpx;
height: 64rpx;
width: 690rpx;
border-radius: 32rpx;
}
.wLogin{
width: 750rpx;
height: 90rpx;
text-align: center;
line-height: 90rpx;
background-color: #ee7b1e;
color: #fff;
font-size: 28rpx;
position: fixed;
bottom: 0;
}