|
@@ -0,0 +1,410 @@
|
|
|
|
+<template>
|
|
|
|
+ <view class="cart">
|
|
|
|
+
|
|
|
|
+ <!-- 购物车列表 -->
|
|
|
|
+ <view class="goods-list">
|
|
|
|
+ <view class="top" style="padding: 24rpx 0;">
|
|
|
|
+ <uni-row justify="space-between" customStyle="margin-bottom: 10px">
|
|
|
|
+ <uni-col :span="6">
|
|
|
|
+ 全部({{cartList.length}})
|
|
|
|
+ </uni-col>
|
|
|
|
+ <uni-col :span="18" v-if="cartList.length>0">
|
|
|
|
+ <view @click="isManage=true" v-if="!isManage" class="smtitle" style="position: relative;top: -3px;text-align: right;">管理</view>
|
|
|
|
+ <view @click="isManage=false" v-else class="smtitle" style="position: relative;top: -3px;text-align: right;color: #106DFF;">退出管理</view>
|
|
|
|
+ </uni-col>
|
|
|
|
+ </uni-row>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view v-if="cartList.length>0" class="card_list">
|
|
|
|
+ <view class="item" v-for="(row, index) in cartList">
|
|
|
|
+ <view @click="selected(index, row)" class="checkbox">
|
|
|
|
+ <view v-if="row.checked==true"> <image src="../../static/jf/btn_select_color@2x.png" style="width: 32rpx;height: 32rpx;"></image></view>
|
|
|
|
+ <view v-else> <image src="../../static/jf/btn_select@2x.png" style="width: 32rpx;height: 32rpx;"></image></view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="img">
|
|
|
|
+ <image style="width:128rpx" class="icon" mode="widthFix" :src="row.spzp"></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view>
|
|
|
|
+ <view class="smtitle" style="position: relative;top: -3px;">
|
|
|
|
+ {{row.spmc}}
|
|
|
|
+ </view>
|
|
|
|
+ <view class="control">
|
|
|
|
+ <view class="num">
|
|
|
|
+ <text class="count">{{row.dhsxjf}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view><uni-number-box v-model="row.count" :min="1" @change="changeValue(row)" /></view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <u-empty v-else
|
|
|
|
+ mode="car"
|
|
|
|
+ icon="http://cdn.uviewui.com/uview/empty/car.png"
|
|
|
|
+ >
|
|
|
|
+ </u-empty>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <view v-if="cartList.length>0">
|
|
|
|
+ <view class="bottom">
|
|
|
|
+ <view class="select" @click="selectAll" v-if="checkAll!=true">
|
|
|
|
+ <view class="checkbox">
|
|
|
|
+ <view class="img" v-if="checkAll==true"> <image src="../../static/jf/btn_select_color@2x.png" style="width: 32rpx;height: 32rpx;top: 6px;"></image></view>
|
|
|
|
+ <view class="img" v-else><image src="../../static/jf/btn_select@2x.png" style="width: 32rpx;height: 32rpx;top: 3px;"></image></view>
|
|
|
|
+ </view> 全选
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <view class="select" @click="noselectAll" v-else>
|
|
|
|
+ <view class="checkbox">
|
|
|
|
+ <view> <image class="img" src="../../static/jf/btn_select_color@2x.png" style="width: 32rpx;height: 32rpx;"></image></view>
|
|
|
|
+ </view> 取消全选
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <view class="info">
|
|
|
|
+ <view v-if="!isManage">已选 <text>{{allCount}}</text> 件 共<text>{{allMoney}}</text>元</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="coustbottom" v-if="!isManage" @click="toBuy">
|
|
|
|
+ <view>结算</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="coustbottom_del" v-else @click="deleteData">
|
|
|
|
+ <view>删除</view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import { resolve } from 'path';
|
|
|
|
+import { jwtdSpglDhjl,jwtdGwcList,jwtdGwcRemove} from '@/api/jfsc.js'
|
|
|
|
+import { userInfo } from 'os';
|
|
|
|
+ export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ checkGroup: [],
|
|
|
|
+ checkAll: false,
|
|
|
|
+ isManage:false,
|
|
|
|
+ allMoney:0,
|
|
|
|
+ allCount:0,
|
|
|
|
+ cartList:[]
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+
|
|
|
|
+ this.inits()
|
|
|
|
+ },
|
|
|
|
+ watch:{
|
|
|
|
+ checkGroup: {
|
|
|
|
+ handler(newVal, oldVal) {
|
|
|
|
+ this.allMoney = 0
|
|
|
|
+ this.allCount = 0
|
|
|
|
+ this.cartList.forEach(v=>{
|
|
|
|
+ if(v.checked==true){
|
|
|
|
+ this.allMoney += v.count * v.dhsxjf
|
|
|
|
+ this.allCount+=v.count
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ if(newVal.length == this.cartList.length){
|
|
|
|
+ this.checkAll = true
|
|
|
|
+ }else{
|
|
|
|
+ this.checkAll = false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ deep: true
|
|
|
|
+ },
|
|
|
|
+ cartList: {
|
|
|
|
+ handler(newVal, oldVal) {
|
|
|
|
+ this.allMoney = 0
|
|
|
|
+ this.allCount = 0
|
|
|
|
+ this.cartList.forEach(v=>{
|
|
|
|
+ if(v.checked==true){
|
|
|
|
+ this.allMoney += v.count * v.dhsxjf
|
|
|
|
+ this.allCount+=v.count
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ deep: true
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods:{
|
|
|
|
+ inits(){
|
|
|
|
+ jwtdGwcList(this.userInfo.user_id).then(res=>{
|
|
|
|
+ let dds = res.data.records
|
|
|
|
+ dds.forEach(v=>{
|
|
|
|
+ v.checked = false
|
|
|
|
+ v.count = 1
|
|
|
|
+ })
|
|
|
|
+ this.cartList = dds
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ toBuy(){
|
|
|
|
+ let clist = []
|
|
|
|
+ let buyList =[]
|
|
|
|
+ let ids
|
|
|
|
+ if(this.checkGroup.length==0){
|
|
|
|
+ this.$u.func.showToast({title:'请选择结算商品'})
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ this.checkGroup.forEach(vv=>{
|
|
|
|
+ ids = this.cartList.filter(v=>v.spId==vv)
|
|
|
|
+ clist = clist.concat(ids)
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ let pp = new Promise((resolve, reject)=>{
|
|
|
|
+ clist.forEach((v,k)=>{
|
|
|
|
+ buyList.push({spId:v.spId,spsl:v.count,xhjf:v.dhsxjf})
|
|
|
|
+ })
|
|
|
|
+ resolve('ok')
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ pp.then(res=>{
|
|
|
|
+ jwtdSpglDhjl(buyList).then(res=>{
|
|
|
|
+ this.$u.func.showToast({title:res.msg})
|
|
|
|
+ this.$u.func.refreshPage()
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ deleteData(){
|
|
|
|
+ if(this.checkGroup.length==0){
|
|
|
|
+ this.$u.func.showToast({title:'请选择商品'})
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ let dlist = []
|
|
|
|
+ //this.cartList = this.cartList.filter(item => item.checked);
|
|
|
|
+ this.cartList.forEach(v=>{
|
|
|
|
+ if(v.checked==true){
|
|
|
|
+ dlist.push({userId:this.userInfo.user_id,spId:v.spId})
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ jwtdGwcRemove(dlist).then(res=>{
|
|
|
|
+ this.$u.func.showToast({title:res.msg})
|
|
|
|
+ this.$u.func.refreshPage()
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ back(){
|
|
|
|
+ uni.navigateBack({
|
|
|
|
+ delta: 1
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ changeValue(row){
|
|
|
|
+ console.log(row);
|
|
|
|
+ this.allMoney = row.count * row.dhsxjf
|
|
|
|
+ },
|
|
|
|
+ async selected(index,row){
|
|
|
|
+ var _this = this
|
|
|
|
+ // 判断 checkGroup的长度,是否等于good_list长度
|
|
|
|
+ if (this.checkGroup.length == this.cartList.length) {
|
|
|
|
+ this.checkAll = true
|
|
|
|
+ } else {
|
|
|
|
+ this.checkAll = false
|
|
|
|
+ }
|
|
|
|
+ var spId = row.spId
|
|
|
|
+ var i = this.checkGroup.indexOf(spId)
|
|
|
|
+ if (i > -1) {
|
|
|
|
+ // 取消当前商品选中状态
|
|
|
|
+ _this.$set(_this.cartList[index], 'checked', false);
|
|
|
|
+ // 移除选中列表中的当前商品
|
|
|
|
+ return _this.checkGroup.splice(i,1)
|
|
|
|
+ }
|
|
|
|
+ // 选中
|
|
|
|
+ _this.$set(_this.cartList[index], 'checked', true);
|
|
|
|
+ _this.checkGroup.push(spId)
|
|
|
|
+ console.log(_this.checkGroup);
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //全选
|
|
|
|
+ selectAll(){
|
|
|
|
+ /* 方法一 */
|
|
|
|
+ this.checkGroup=[]/* 清空以前的全中的内容 */
|
|
|
|
+ this.cartList.map(v=>{
|
|
|
|
+ v.checked = true
|
|
|
|
+ this.checkGroup.push(v.spId)
|
|
|
|
+ })
|
|
|
|
+ this.checkAll = true
|
|
|
|
+ /* 方法二 */
|
|
|
|
+ /* state.selectedAll = state.list.map(v=>{
|
|
|
|
+ v.checked = true
|
|
|
|
+ return v.id
|
|
|
|
+ }) */
|
|
|
|
+ },
|
|
|
|
+ //全不选
|
|
|
|
+ noselectAll(){
|
|
|
|
+ this.checkAll = false
|
|
|
|
+ this.cartList.map(v=>{
|
|
|
|
+ v.checked = false
|
|
|
|
+ })
|
|
|
|
+ this.checkGroup = []
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss">
|
|
|
|
+ /deep/ .uni-navbar__content{
|
|
|
|
+ border-bottom: none !important;
|
|
|
|
+ }
|
|
|
|
+ .bottom{
|
|
|
|
+ position: fixed;
|
|
|
|
+ background: #FFF;
|
|
|
|
+ padding: 12rpx 12rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ left: 0;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ right:0;
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: grid;
|
|
|
|
+ grid-template-columns: 25% 45% 30%;
|
|
|
|
+ .select{
|
|
|
|
+ display: flex;
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ color: #666666;
|
|
|
|
+ line-height: 80rpx;
|
|
|
|
+ text-align: left;
|
|
|
|
+ font-style: normal;
|
|
|
|
+ .checkbox{
|
|
|
|
+ width: 32rpx;
|
|
|
|
+ height: 32rpx;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ margin-right: 12rpx;
|
|
|
|
+ .img{
|
|
|
|
+ position: relative;
|
|
|
|
+ top: 3px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ .info{
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ color: #666666;
|
|
|
|
+ line-height: 80rpx;
|
|
|
|
+ text-align: left;
|
|
|
|
+ font-style: normal;
|
|
|
|
+ text{
|
|
|
|
+ color: #FF1D1D;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .coustbottom{
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ line-height:80rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-style: normal;
|
|
|
|
+ background: linear-gradient( to top, #65CBFF 0%, #0260FE 100%);
|
|
|
|
+ border-radius: 64rpx;
|
|
|
|
+ }
|
|
|
|
+ .coustbottom_del{
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ line-height: 80rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-style: normal;
|
|
|
|
+ background: linear-gradient( to top, #FFD452 0%, #FF9700 100%);
|
|
|
|
+ border-radius: 64rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .cart{
|
|
|
|
+ padding: 0 24rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ background: #F8F8F8;
|
|
|
|
+ position: relative;
|
|
|
|
+ min-height: 100vh;
|
|
|
|
+ .goods-list{
|
|
|
|
+ .card_list{
|
|
|
|
+ border-radius: 24rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ .item{
|
|
|
|
+ margin-bottom: 12rpx;
|
|
|
|
+ background: #FFF;
|
|
|
|
+ padding: 24rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ border-radius: 24rpx;
|
|
|
|
+ display: grid;
|
|
|
|
+ grid-template-columns: 40rpx 150rpx calc(100% - 190rpx);
|
|
|
|
+ .control{
|
|
|
|
+ display: grid;
|
|
|
|
+ grid-template-columns: 50% 50%;
|
|
|
|
+ .num{
|
|
|
|
+ height: 44rpx;
|
|
|
|
+ font-family: DIN, DIN;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
+ color: #FF1D1D;
|
|
|
|
+ line-height: 44rpx;
|
|
|
|
+ text-align: left;
|
|
|
|
+ font-style: normal;
|
|
|
|
+ padding-left: 10rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .img{
|
|
|
|
+ text-align: center;
|
|
|
|
+ .icon{
|
|
|
|
+ height: 128rpx;
|
|
|
|
+ border-radius: 16rpx;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ .smtitle{
|
|
|
|
+ height: 80rpx;
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ color: #111111;
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
+ text-align: justify;
|
|
|
|
+ font-style: normal;
|
|
|
|
+ padding-left: 10rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ display: -webkit-box;
|
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ }
|
|
|
|
+ .checkbox{
|
|
|
|
+ width: 32rpx;
|
|
|
|
+ height: 32rpx;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ margin-top: 23px;
|
|
|
|
+ }
|
|
|
|
+ .isSelect{
|
|
|
|
+ background: linear-gradient(to bottom,#0260FE,#61C6FF);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .top{
|
|
|
|
+ view{
|
|
|
|
+ height: 40rpx;
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ color: #111111;
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
+ text-align: left;
|
|
|
|
+ font-style: normal;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|