hly
/
hotel-tablecloth-uniapp-24-08-29
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

修改规格

master
chenkun 1 year ago
parent
cdea1be247
commit
f1530e2665
1 changed files with 513 additions and 462 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +513
    -462
      pages/index/cart.vue

+ 513
- 462
pages/index/cart.vue View File

@ -1,470 +1,521 @@
<template>
<view class="page">
<navbar/>
<view class="user">
<uv-checkbox-group shape="circle" v-model="checkboxValue">
<uv-swipe-action>
<view v-for="(item, index) in list.records" :key="index">
<view style="margin-top: 20rpx;"></view>
<uv-swipe-action-item :options="options" @click="delCart(item, index)">
<view class="item">
<view class="checkbox">
<uv-checkbox :name="item.goodsId" activeColor="#FA5A0A" size="40rpx"
icon-size="35rpx"></uv-checkbox>
</view>
<image class="image"
:src="item.pic || 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg'"
mode=""></image>
<view class="info">
<view class="title">
<view>{{ item.name }}</view>
<view>
<uv-number-box v-model="item.num"
@change="e => valChange(item, e)"></uv-number-box>
</view>
</view>
<view class="unit" @click="toggleDropdown(item)">
规格：{{ item.title }}
<uv-icon name="arrow-down"></uv-icon>
</view>
<view class="price">
￥
<text>{{ item.price }}</text>
元
</view>
</view>
</view>
</uv-swipe-action-item>
</view>
</uv-swipe-action>
</uv-checkbox-group>
<view class="action">
<view class="icon">
<image src="/static/image/cart/1.png" mode=""></image>
<view class="num">{{ checkboxValue.length }}</view>
</view>
<view class="price">
<view class="count">
合计
<view>
￥
<text>{{ totalPrice }}</text>
</view>
</view>
<view class="text">
共{{ checkboxValue.length }}件，已享受更低优惠
</view>
</view>
<view class="btn" @click="goCleaning">去结算</view>
</view>
</view>
<!-- 地址弹框 -->
<uv-popup ref="addressPopup" :round="30">
<addressList ref="addressList" height="60vh" @select="selectAddress"/>
</uv-popup>
<tabber select="3"/>
</view>
<view class="page">
<navbar />
<view class="user">
<uv-checkbox-group shape="circle" v-model="checkboxValue">
<uv-swipe-action>
<view v-for="(item, index) in list.records" :key="index">
<view style="margin-top: 20rpx;"></view>
<uv-swipe-action-item :options="options" @click="delCart(item, index)">
<view class="item">
<view class="checkbox">
<uv-checkbox :name="item.goodsId" activeColor="#FA5A0A" size="40rpx"
icon-size="35rpx"></uv-checkbox>
</view>
<image class="image"
:src="item.pic || 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg'"
mode=""></image>
<view class="info">
<view class="title">
<view>{{ item.name }}</view>
<view>
<uv-number-box v-model="item.num"
@change="e => valChange(item, e)"></uv-number-box>
</view>
</view>
<view class="unit" @click="toggleDropdown(item)">
规格：{{ item.title }}
<uv-icon name="arrow-down"></uv-icon>
</view>
<view class="price">
￥
<text>{{ item.price }}</text>
元
</view>
</view>
</view>
</uv-swipe-action-item>
</view>
</uv-swipe-action>
</uv-checkbox-group>
<view class="action">
<view class="icon">
<image src="/static/image/cart/1.png" mode=""></image>
<view class="num">{{ checkboxValue.length }}</view>
</view>
<view class="price">
<view class="count">
合计
<view>
￥
<text>{{ totalPrice }}</text>
</view>
</view>
<view class="text">
共{{ checkboxValue.length }}件，已享受更低优惠
</view>
</view>
<view class="btn" @click="goCleaning">去结算</view>
</view>
</view>
<!-- 地址弹框 -->
<uv-popup ref="addressPopup" :round="30">
<addressList ref="addressList" height="60vh" @select="selectAddress" />
</uv-popup>
<!-- 规格 -->
<uv-popup ref="skuPopup" :round="30" closeable>
<view class="submit-unit">
<view class="title">
规格选择
</view>
<view class="list">
<view :class="{act : unitIndex == index}" v-for="(item, index) in skuList"
@click="selectUnit(item, index)" :key="index">
{{ item.title }}
</view>
</view>
</view>
</uv-popup>
<tabber select="3" />
</view>
</template>
<script>
import tabber from '@/components/base/tabbar.vue'
import addressList from '@/components/address/addressList.vue'
export default {
components: {
tabber,
addressList,
},
data() {
return {
queryParams: {
pageNo: 1,
pageSize: 10,
},
list: [],
addressTotal: 0,
address: {
name: '请选择联系人',
addressDetail: ''
},
skuList: [],
editSkuForm: {
id: '', //购物车id
goodsId: '', //商品id
skuId: '', //规格id
},
value: 0,
checkboxValue: [],
options: [{
text: '删除',
style: {
backgroundColor: '#FA5A0A'
}
},],
}
},
computed: {
totalPrice() {
if (!this.checkboxValue.length) {
return 0
}
let price = 0
this.list.records.forEach(n => {
if (this.checkboxValue.includes(n.id)) {
price += n.price * n.num
}
})
return price
},
},
onShow() {
this.getData()
this.getAddressListA()
},
//滚动到屏幕底部
onReachBottom() {
if (this.queryParams.pageSize < this.list.total) {
this.queryParams.pageSize += 10
this.getData()
}
},
methods: {
// 修改商品规格弹框
toggleDropdown(item) {
this.editSkuForm.id = item.id
this.editSkuForm.goodsId = item.goodsId
// 根据商品id获取规格
this.$api('goodsSku', {
id: item.goodsId
}, res => {
if (res.code == 200) {
this.skuList = res.result
// 打开规格下拉框待完善 TODO
}
})
},
// 规格下拉框选中后的回调
changeCartProductSku(e) {
console.log(e, "e");
this.editSkuForm.skuId = e.aaa //TODO
return
this.$api('editSku', this.editSkuForm, res => {
if (res.code == 200) {
this.getData()
}
})
},
// 去结算按钮
goCleaning() {
if (this.checkboxValue.length < 1) {
uni.showToast({
title: "请勾选商品",
icon: 'none'
})
return
}
// 打开地址弹框
this.$refs.addressPopup.open('bottom')
},
// 选择地址
selectAddress(e) {
this.address = e
this.$refs.addressPopup.close()
this.ordersPay()
},
//商品下单
ordersPay() {
var self = this
var deleteCartIds = this.checkboxValue.join(",") //待删除的购物车id
let data = []
let records = this.list.records
for (var i = 0; i < records.length; i++) {
if (this.checkboxValue.includes(records[i].goodsId)) {
data.push({
id: records[i].goodsId, //商品id
skuId: records[i].skuId, //规格id
addressId: this.address.id, //地址id
sku: records[i].title, //规格
num: records[i].num,
})
}
}
this.$api('orderCreate', {
req: JSON.stringify(data)
}, res => {
if (res.code == 200) {
let form = {
id: res.result.id
}
this.$api('orderPay', form, res => {
if (res.code == 200) {
uni.requestPayment({
provider: 'wxpay', // 服务提提供商
timeStamp: res.result.timeStamp, // 时间戳
nonceStr: res.result.nonceStr, // 随机字符串
package: res.result.packageValue,
signType: res.result.signType, // 签名算法
paySign: res.result.paySign, // 签名
success: function (res) {
console.log('支付成功', res);
// 清除购物车数据
self.$api('cartDel', {
id: deleteCartIds
}, res => {
if (res.code == 200) {
self.getData()
}
})
uni.redirectTo({
url: '/pages/index/order'
})
},
fail: function (err) {
console.log('支付失败', err);
// self.$refs.confirmationPopup.close()
uni.showToast({
icon: 'none',
title: "支付失败"
})
}
});
}
})
}
})
},
// 修改购物车里面商品的规格
unitChange(item, e) {
// TODO 查询商品规格
// this.$api('goodsOne', this.queryParams, res => {
// if (res.code == 200) {
// this.list = res.result
// }
// })
},
// 获取地址列表
getAddressListA() {
this.$refs.addressList.getAddressList().then(res => {
this.addressTotal = res.total
if (this.addressTotal != 0) {
this.address = res.records[0]
}
})
},
valChange(item, e) {
console.log(e.value);
this.$api('cartNum', {
id: item.id,
num: e.value,
})
},
// 购物车分页
getData() {
this.$api('cartPage', this.queryParams, res => {
if (res.code == 200) {
this.list = res.result
}
})
},
// 删除购物车
delCart(item, index) {
this.$api('cartDel', {
id: item.id
}, res => {
if (res.code == 200) {
this.getData()
uni.showToast({
title: '删除成功',
});
}
})
},
}
}
import tabber from '@/components/base/tabbar.vue'
import addressList from '@/components/address/addressList.vue'
export default {
components: {
tabber,
addressList,
},
data() {
return {
queryParams: {
pageNo: 1,
pageSize: 10,
},
list: [],
addressTotal: 0,
address: {
name: '请选择联系人',
addressDetail: ''
},
skuList: [],
editSkuForm: {
id: '', //购物车id
goodsId: '', //商品id
skuId: '', //规格id
},
value: 0,
checkboxValue: [],
options: [{
text: '删除',
style: {
backgroundColor: '#FA5A0A'
}
}, ],
unit: {},
unitIndex: 0,
}
},
computed: {
totalPrice() {
if (!this.checkboxValue.length) {
return 0
}
let price = 0
this.list.records.forEach(n => {
if (this.checkboxValue.includes(n.id)) {
price += n.price * n.num
}
})
return price
},
},
onShow() {
this.getData()
this.getAddressListA()
},
//滚动到屏幕底部
onReachBottom() {
if (this.queryParams.pageSize < this.list.total) {
this.queryParams.pageSize += 10
this.getData()
}
},
methods: {
// 修改商品规格弹框
toggleDropdown(item) {
this.editSkuForm.id = item.id
this.editSkuForm.goodsId = item.goodsId
// 根据商品id获取规格
this.$api('goodsSku', {
id: item.goodsId
}, res => {
if (res.code == 200) {
this.skuList = res.result
// 打开规格弹框
this.$refs.skuPopup.open('bottom')
}
})
},
// 选择规格
selectUnit(item, index) {
this.unit = item
this.unitIndex = index
this.editSkuForm.skuId = item.id
this.$api('editSku', this.editSkuForm, res => {
if (res.code == 200) {
this.$refs.skuPopup.close()
this.getData()
}
})
},
// 去结算按钮
goCleaning() {
if (this.checkboxValue.length < 1) {
uni.showToast({
title: "请勾选商品",
icon: 'none'
})
return
}
// 打开地址弹框
this.$refs.addressPopup.open('bottom')
},
// 选择地址
selectAddress(e) {
this.address = e
this.$refs.addressPopup.close()
this.ordersPay()
},
//商品下单
ordersPay() {
var self = this
var deleteCartIds = this.checkboxValue.join(",") //待删除的购物车id
let data = []
let records = this.list.records
for (var i = 0; i < records.length; i++) {
if (this.checkboxValue.includes(records[i].goodsId)) {
data.push({
id: records[i].goodsId, //商品id
skuId: records[i].skuId, //规格id
addressId: this.address.id, //地址id
sku: records[i].title, //规格
num: records[i].num,
})
}
}
this.$api('orderCreate', {
req: JSON.stringify(data)
}, res => {
if (res.code == 200) {
let form = {
id: res.result.id
}
this.$api('orderPay', form, res => {
if (res.code == 200) {
uni.requestPayment({
provider: 'wxpay', // 服务提提供商
timeStamp: res.result.timeStamp, // 时间戳
nonceStr: res.result.nonceStr, // 随机字符串
package: res.result.packageValue,
signType: res.result.signType, // 签名算法
paySign: res.result.paySign, // 签名
success: function(res) {
console.log('支付成功', res);
// 清除购物车数据
self.$api('cartDel', {
id: deleteCartIds
}, res => {
if (res.code == 200) {
self.getData()
}
})
uni.redirectTo({
url: '/pages/index/order'
})
},
fail: function(err) {
console.log('支付失败', err);
// self.$refs.confirmationPopup.close()
uni.showToast({
icon: 'none',
title: "支付失败"
})
}
});
}
})
}
})
},
// 修改购物车里面商品的规格
unitChange(item, e) {
// TODO 查询商品规格
// this.$api('goodsOne', this.queryParams, res => {
// if (res.code == 200) {
// this.list = res.result
// }
// })
},
// 获取地址列表
getAddressListA() {
this.$refs.addressList.getAddressList().then(res => {
this.addressTotal = res.total
if (this.addressTotal != 0) {
this.address = res.records[0]
}
})
},
valChange(item, e) {
console.log(e.value);
this.$api('cartNum', {
id: item.id,
num: e.value,
})
},
// 购物车分页
getData() {
this.$api('cartPage', this.queryParams, res => {
if (res.code == 200) {
this.list = res.result
}
})
},
// 删除购物车
delCart(item, index) {
this.$api('cartDel', {
id: item.id
}, res => {
if (res.code == 200) {
this.getData()
uni.showToast({
title: '删除成功',
});
}
})
},
}
}
</script>
<style scoped lang="scss">
.page {
/deep/ .uv-swipe-action {
width: 100%;
}
}
.user {
.item {
background-color: #fff;
display: flex;
padding: 30rpx;
.checkbox {
display: flex;
justify-content: center;
align-items: center;
}
.image {
width: 200rpx;
height: 200rpx;
border-radius: 20rpx;
}
.info {
flex: 1;
.title {
display: flex;
padding: 10rpx 20rpx;
justify-content: space-between;
}
.unit {
font-size: 24rpx;
padding: 10rpx 20rpx;
color: #717171;
display: flex;
align-items: center;
}
.price {
color: $uni-color;
font-size: 28rpx;
padding: 10rpx 20rpx;
text {
font-size: 36rpx;
font-weight: 900;
}
}
}
}
.action {
width: 700rpx;
position: fixed;
bottom: 220rpx;
left: 25rpx;
background-color: #fff;
height: 100rpx;
border-radius: 50rpx;
box-shadow: 0 0 6rpx 6rpx #00000010;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
.icon {
position: relative;
width: 80rpx;
height: 80rpx;
margin: 0 20rpx;
image {
width: 80rpx;
height: 80rpx;
}
.num {
position: absolute;
right: 10rpx;
top: 0rpx;
background-color: $uni-color;
color: #fff;
font-size: 18rpx;
border-radius: 50%;
height: 30rpx;
width: 30rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
.price {
.count {
display: flex;
font-size: 26rpx;
align-items: center;
view {
color: $uni-color;
margin-left: 10rpx;
text {
font-size: 32rpx;
font-weight: 900;
}
}
}
.text {
font-size: 20rpx;
color: #717171;
}
}
.btn {
margin-left: auto;
background-color: $uni-color;
height: 100%;
padding: 0 50rpx;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.example-body {
padding: 12px;
background-color: #FFFFFF;
}
.result-box {
text-align: center;
padding: 20px 0px;
font-size: 16px;
}
.text {
font-size: 12px;
color: #666;
margin-top: 5px;
}
.uni-px-5 {
padding-left: 10px;
padding-right: 10px;
}
.uni-pb-5 {
padding-bottom: 10px;
}
.page {
/deep/ .uv-swipe-action {
width: 100%;
}
}
.user {
.item {
background-color: #fff;
display: flex;
padding: 30rpx;
.checkbox {
display: flex;
justify-content: center;
align-items: center;
}
.image {
width: 200rpx;
height: 200rpx;
border-radius: 20rpx;
}
.info {
flex: 1;
.title {
display: flex;
padding: 10rpx 20rpx;
justify-content: space-between;
}
.unit {
font-size: 24rpx;
padding: 10rpx 20rpx;
color: #717171;
display: flex;
align-items: center;
}
.price {
color: $uni-color;
font-size: 28rpx;
padding: 10rpx 20rpx;
text {
font-size: 36rpx;
font-weight: 900;
}
}
}
}
.action {
width: 700rpx;
position: fixed;
bottom: 220rpx;
left: 25rpx;
background-color: #fff;
height: 100rpx;
border-radius: 50rpx;
box-shadow: 0 0 6rpx 6rpx #00000010;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
.icon {
position: relative;
width: 80rpx;
height: 80rpx;
margin: 0 20rpx;
image {
width: 80rpx;
height: 80rpx;
}
.num {
position: absolute;
right: 10rpx;
top: 0rpx;
background-color: $uni-color;
color: #fff;
font-size: 18rpx;
border-radius: 50%;
height: 30rpx;
width: 30rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
.price {
.count {
display: flex;
font-size: 26rpx;
align-items: center;
view {
color: $uni-color;
margin-left: 10rpx;
text {
font-size: 32rpx;
font-weight: 900;
}
}
}
.text {
font-size: 20rpx;
color: #717171;
}
}
.btn {
margin-left: auto;
background-color: $uni-color;
height: 100%;
padding: 0 50rpx;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.example-body {
padding: 12px;
background-color: #FFFFFF;
}
.result-box {
text-align: center;
padding: 20px 0px;
font-size: 16px;
}
.text {
font-size: 12px;
color: #666;
margin-top: 5px;
}
.uni-px-5 {
padding-left: 10px;
padding-right: 10px;
}
.uni-pb-5 {
padding-bottom: 10px;
}
.submit-unit {
padding: 30rpx;
background-color: #fff;
.title {
font-size: 28rpx;
font-weight: 600;
}
.list {
display: flex;
flex-wrap: wrap;
font-size: 22rpx;
.act {
color: $uni-color;
border: 1px solid $uni-color;
background-color: #F9E7DE;
}
view {
border-radius: 15rpx;
width: 320rpx;
background-color: #F3F3F3;
border: 1px solid #F3F3F3;
margin: 10rpx;
display: flex;
justify-content: center;
padding: 15rpx 0;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save