兑换专柜

src/api/commodity.js

@@ -206,3 +206,13 @@ export function productExport(data) {
     responseType: 'blob'
   })
 }
+
+
+//  选品库商品
+export function getlLibraryList(data) {
+  return request({
+    url: '/banziSelect/getApiLocalityList',
+    method: 'POST',
+    data
+  })
+}

src/api/threeSelection.js

@@ -0,0 +1,154 @@
+import request from '@/utils/request'
+
+//  获取所有选品数据
+export function getlLibraryList(data) {
+    return request({
+      url: '/banziSelect/getApiLocalityList',
+      method: 'POST',
+      data
+    })
+  }
+
+  // 加入购物车
+  export function addShopCar(data) {
+    return request({
+      url: '/banziSelect/addShopCart',
+      method: 'POST',
+      data
+    })
+  }  
+
+  //  获取购物车列表
+  export function getShopCarList(params) {
+    return request({
+      url: '/banziSelect/getShopCart',
+      method: 'GET',
+      params
+    })
+  }
+
+  // 修改购物车商品数量
+  export function updateShopCar(data) {
+    return request({
+      url: '/banziSelect/updateNumber',
+      method: 'POST',
+      data
+    })
+  }
+
+  //  删除所选商品
+  export function deleteShopCar(data) {
+    return request({
+      url: '/banziSelect/deleteCart',
+      method: 'POST',
+      data
+    })
+  }
+
+  // 清空购物车
+  export function clearShopCar(data) {
+    return request({
+      url: '/banziSelect/deleteAll',
+      method: 'POST',
+      data
+    })
+  }
+
+  // 结算商品
+  export function getSettlement(data) {
+    return request({
+      url: '/banziSelect/getSettlement',
+      method: 'POST',
+      data
+    })
+  }
+
+  // 代金券支付
+  export function voucherPay(data) {
+    return request({
+      url: '/banziSelect/submit',
+      method: 'POST',
+      data
+    })
+  }
+
+  //  商家代金券数量
+export function requertVoucher(params) {
+  return request({
+    url: '/banziSelect/getVoucher',
+    method: 'GET',
+    params
+  })
+}
+
+//  请求店铺信息
+export function shopSysGetById(data) {
+  return request({
+    url: '/shop/getById',
+    method: 'post',
+    data
+  })
+}
+
+//  获取商家自己的采购单
+export function getPurchaseOrder(data) {
+  return request({
+    url: '/banziSelect/getApiShopOrderList',
+    method: 'post',
+    data
+  })
+}
+
+//  确认收货
+export function getConfirm(data) {
+  return request({
+    url: '/banziSelect/confirm',
+    method: 'post',
+    data
+  })
+}
+
+
+//  获取地址列表
+export function getAddress(params) {
+  return request({
+    url: '/receive/getAll',
+    method: 'get',
+    params
+  })
+}
+
+//  根据地区 id 查询地址
+export function searchParentId(params){
+  return request({
+    url: '/cityManageArea/getTreeOne',
+    method: 'get',
+    params
+  })
+}
+
+// 添加地址
+export function addAddress(data) {
+  return request({
+    url: '/receive/save',
+    method: 'post',
+    data
+  })
+}
+//  编辑地址
+export function editAddress(data) {
+  return request({
+    url: '/receive/update',
+    method: 'post',
+    data
+  })
+}
+
+//  删除地址
+export function deleteAddress(data) {
+  return request({
+    url: '/receive/delete',
+    method: 'post',
+    data
+  })
+}

src/utils/request.js

@@ -48,7 +48,7 @@ service.interceptors.response.use(
     if (response.config.responseType === 'blob') {
       return response.data
     }
-    if (res.code !== '') {
+    if (res.code !== "" || res.code == 200) {
       Message({
         message: res.message || 'Error',
         type: 'error',

src/views/finance/account/index.vue

@@ -346,10 +346,10 @@ export default {
     },
     // 更换账户
     async changeBank() {
-      var regExp = /^([1-9]{1})(\d{15}|\d{18})$/
+      var regExp = /^([1-9]{1})(\d{8,17})$/
       if (!regExp.test(this.card.cardNumber)) {
         this.$message({
-          message: '请输入正确银行卡号！',
+          message: '请输入正确银行卡号，卡号必须为以数字开头，10~19位的卡号！！！',
           type: 'warning'
         })
         return false
@@ -366,10 +366,10 @@ export default {
     },
     // 绑定账户
     async addBank() {
-      var regExp = /^([1-9]{1})(\d{15}|\d{18})$/
+      var regExp = /^([1-9]{1})(\d{8,17})$/
       if (!regExp.test(this.form.cardNumber)) {
         this.$message({
-          message: '请输入正确银行卡号！',
+          message: '请输入正确银行卡号，卡号必须为以数字开头，10~19位的卡号！！！',
           type: 'warning'
         })
         return false

src/views/shop/exchange/index.vue

@@ -0,0 +1,329 @@
+<template>
+    <div class="storeCode">
+        <div class="paymentCode-left">
+            <div class="paymentCode-title">店铺兑换商品二维码</div>
+            <template v-if="canvasImg == ''">
+                <!-- v-if="canvasImg == ''" -->
+                <div ref="paymentCodeCanvas" id="paymentCodeCanvas">
+                    <div class="paymentCode-img" ref="businessCardCanvas" id="businessCardCanvas">
+                        <div class="paymentCode-img-live">兑换专区</div>
+                        <div class="paymentCode-img-title">扫码兑换商品</div>
+                        <div class="img-box">
+                            <img :src="codeInfo.shopCode" alt="">
+                        </div>
+                        <div class="img-button">{{ codeInfo.shopName }}</div>
+                    </div>
+                </div>
+            </template>
+            <template v-else>
+                <div class="paymentCode-img-box">
+                    <el-image style="width: 463px; height: 595px" :src="canvasImg" :preview-src-list="srcList">
+                    </el-image>
+                </div>
+            </template>
+            <div class="paymentCode-open">
+                <div class="open-icon">
+                    <img src="@/assets/images/scan.png" alt="">
+                </div>
+                <div class="open-text">打开微信扫一扫即可进入兑换专区</div>
+            </div>
+            <div class="paymentCode-btn" @click="downloadCode">下载兑换二维码</div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { shopSysGetById } from "@/api/shopSys"
+import QRCode from 'qrcode';
+//  引入 cookie 的库
+import Cookies from 'js-cookie'
+import html2canvas from 'html2canvas'
+export default {
+    created() {
+        this.generateCode()
+    },
+    data() {
+        return {
+            codeInfo: {
+                shopName: '',
+                shopCode: ''
+            },
+            canvasImg: '',
+            srcList: [],
+            //  支持支付方式数据
+            payList: [
+                {
+                    url: require('@/assets/images/mode-img/1.png'),
+                    text: '团蜂佣金'
+                },
+                {
+                    url: require('@/assets/images/mode-img/2.png'),
+                    text: '团蜂代金券'
+                },
+                {
+                    url: require('@/assets/images/mode-img/3.png'),
+                    text: '建行支付'
+                },
+                {
+                    url: require('@/assets/images/mode-img/4.png'),
+                    text: '团蜂消费金'
+                },
+                {
+                    url: require('@/assets/images/mode-img/5.png'),
+                    text: '微信支付'
+                },
+                {
+                    url: require('@/assets/images/mode-img/6.png'),
+                    text: '支付宝'
+                },
+            ],
+            //  没有 logo 的二维码图片
+            qCodeImg: '',
+            shopLogo: ''
+        }
+    },
+    // updated() {
+    // },
+    methods: {
+        //  生成二维码
+        async setQRcode() {
+            //  https://www.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/shop/shop-detail?shopId=494
+            //  获取本地存储的商家 id
+            let shopId = Cookies.get('shopID');
+            // let urlCode = `https://www.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/exchange/index?shopId=${shopId}&shopName=${this.codeInfo.shopName}`
+            // let urlCode = `http://192.168.0.151:8988/TFShop_Uni_H5/#/another-tf/another-user/exchange/index?shopId=${shopId}&shopName=${this.codeInfo.shopName}`
+            let urlCode = `http://test.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/exchange/index?shopId=${shopId}&shopName=${this.codeInfo.shopName}`
+            //  根据 qcode 生成二维码链接
+            // let imgCode = await QRCode.toDataURL(`https://www.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/shop/shop-detail?shopId=${shopId}`)
+            // console.log(imgCode);
+            const qrCodeCanvas = document.createElement('canvas');
+            qrCodeCanvas.width = 300; // 根据需要调整二维码尺寸
+            qrCodeCanvas.height = 300; // 根据需要调整二维码尺寸
+            await QRCode.toCanvas(qrCodeCanvas, urlCode);
+            const ctx = qrCodeCanvas.getContext('2d');
+            const logo = new Image();
+            //  本地头像
+            logo.src = this.shopLogo;
+            //  解决跨域 重要
+            logo.setAttribute('crossOrigin', 'anonymous');
+            logo.onload = () => {
+                const logoSize = qrCodeCanvas.width * 0.26; // 根据需要调整logo尺寸
+                const logoX = (qrCodeCanvas.width - logoSize) / 2;
+                const logoY = (qrCodeCanvas.height - logoSize) / 2;
+                // 绘制二维码
+                ctx.drawImage(logo, logoX, logoY, logoSize, logoSize);
+                // 将生成的二维码插入到页面中
+                this.codeInfo.shopCode = qrCodeCanvas.toDataURL();
+                this.$nextTick(() => {
+                    this.generateImage()
+                })
+            };
+        },
+        async generateCode() {
+            const res = await shopSysGetById({})
+            this.codeInfo.shopName = res.data.shopName
+            this.shopLogo = res.data.shopLogo
+            //  生成 qCode 二维码
+            this.setQRcode()
+        },
+        generateImage() {
+            html2canvas(this.$refs.paymentCodeCanvas, {
+                dpi: 300,
+                useCORS: false,
+                allowTaint: true,
+                logging: false,
+                scale: 1,
+                windowHeight: this.$refs.businessCardCanvas?.offsetHeight,
+                width: this.$refs.businessCardCanvas?.offsetWidth,
+                height: this.$refs.businessCardCanvas?.offsetHeight
+            }).then((canvas) => {
+                this.canvasImg = canvas.toDataURL('image/png');
+                this.srcList.push(this.canvasImg)
+            }).catch(() => {
+                console.log("生成图片错误");
+            });
+        },
+        downloadCode() {
+            this.$confirm('您确定需要下载商家二维码吗?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.setImgSize(463, 595)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '取消下载成功'
+                });
+            });
+        },
+        //  设置图片大小
+        setImgSize(width, height) {
+            const canvas = document.createElement('canvas')
+            const ctx = canvas.getContext('2d')
+
+            // 设置canvas尺寸
+            canvas.width = width
+            canvas.height = height
+
+            // 绘制图片到canvas上
+            const img = new Image()
+            img.src = this.canvasImg
+            img.onload = () => {
+                ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+
+                // 将canvas内容转换为base64格式的图片数据
+                const imageData = canvas.toDataURL('image/png')
+
+                // 创建下载链接并设置文件名
+                const filename = `${this.codeInfo.shopName}的店铺二维码.png`
+                const link = document.createElement('a')
+                link.href = imageData
+                link.download = filename
+
+                // 将下载链接添加到页面并点击下载
+                document.body.appendChild(link)
+                link.click()
+                document.body.removeChild(link)
+            }
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+* {
+    margin: 0;
+    padding: 0;
+}
+
+img {
+    margin: 0;
+    padding: 0;
+}
+
+.storeCode {
+    display: flex;
+    justify-content: center;
+    gap: 117px;
+    padding-top: 50px;
+
+    .paymentCode-left {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+
+        .paymentCode-title {
+            font-size: 28px;
+            color: #000;
+            font-weight: 500;
+            margin-bottom: 20px;
+        }
+
+        .paymentCode-img {
+            width: 463px;
+            height: 595px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background-color: #EF530E;
+            border-radius: 10px;
+            position: relative;
+
+            .paymentCode-img-live {
+                font-size: 28px;
+                color: #fff;
+                font-weight: 700;
+                font-style: italic;
+                margin-top: 15px;
+            }
+
+            .paymentCode-img-title {
+                display: block !important;
+                width: 100%;
+                height: 56px !important;
+                color: #fff !important;
+                font-size: 50px !important;
+                margin: 20px 0 24px !important;
+                font-weight: 700 !important;
+                font-style: italic !important;
+                box-sizing: border-box;
+                text-align: center;
+                line-height: 56px;
+            }
+
+            .img-box {
+                width: 300px;
+                height: 300px;
+
+                img {
+                    width: 100% !important;
+                    height: 100% !important;
+                }
+            }
+
+
+            .img-button {
+                width: 100% !important;
+                height: 88px !important;
+                background-color: #fff;
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                border-radius: 0 0 9px 9px !important;
+                text-align: center !important;
+                line-height: 88px !important;
+                font-size: 24px !important;
+            }
+        }
+
+        .paymentCode-img-box {
+            width: 463px;
+            height: 595px;
+
+            img {
+                width: 100% !important;
+                height: 100% !important;
+            }
+        }
+
+        .paymentCode-open {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            margin-top: 30px;
+
+            .open-icon {
+                width: 50px;
+                height: 50px;
+
+                img {
+                    width: 100% !important;
+                    height: 100% !important;
+                }
+            }
+
+            .open-text {
+                font-size: 28px;
+                color: #3D3D3D;
+            }
+        }
+
+        .paymentCode-btn {
+            width: 315px;
+            height: 67px;
+            background-color: #EF530E;
+            color: #fff;
+            border-radius: 10px;
+            text-align: center;
+            line-height: 67px;
+            margin-top: 32px;
+            font-size: 28px;
+            cursor: pointer;
+        }
+    }
+
+
+}
+</style>

src/views/threeSelection/platformSelect/addCommodity.vue

@@ -0,0 +1,644 @@
+<template>
+  <div>
+    <el-card class="box-card">
+      <div slot="header">
+        <span v-if="!productId" class="addTitle">新增商品</span>
+        <span v-else class="addTitle">编辑商品</span>
+        <el-button v-if="active" class="btnList" @click="back">取消</el-button>
+        <el-button v-if="active" type="primary" class="btnList" @click="next">下一步</el-button>
+        <el-button v-if="!active" class="btnList" @click="last">上一步</el-button>
+      </div>
+      <!-- 步骤条 -->
+      <div class="stepsColor common">
+        <div class="stepsOne common">
+          <div :class="active ? 'one_class common' : 't_class common'">1</div>
+          <div :class="active ? 'two_class' : 'w_class'">基本属性&商品描述</div>
+        </div>
+        <div class="line" />
+        <div class="stepsTwo common">
+          <div :class="active ? 't_class common' : 'one_class common'">2</div>
+          <div :class="active ? 'w_class' : 'two_class'">基本属性&商品描述</div>
+        </div>
+      </div>
+    </el-card>
+    <!-- 商品 -->
+    <div class="addCom common">
+      <div v-if="active">
+        <el-form ref="form" :model="form" :disabled="true" :rules="rules" label-width="100px" style="padding: 40px 40px;">
+          <div class="leftCom">
+            <el-form-item label="商品名称" prop="productName">
+              <el-input v-model="form.productName" maxlength="40" show-word-limit />
+            </el-form-item>
+            <el-form-item label="卖点简介">
+              <el-input v-model="form.productBrief" maxlength="50" show-word-limit />
+            </el-form-item>
+            <el-form-item
+              label="商品排序值" prop="sortId"
+            >
+              <el-input v-model.number="form.sortId" show-word-limit />
+            </el-form-item>
+            <el-form-item>
+              <Tinymce v-if="showTinymce" ref="content" v-model="form.productText" class="tinymce-wrap" :height="200" />
+            </el-form-item>
+          </div>
+          <div class="rightCom">
+            <el-form-item label="官方分类" prop="classifyId">
+              <el-cascader
+                v-model="form.classifyId" :options="classifyList" clearable :props="{
+                  checkStrictly: false,
+                  label: 'categoryName',
+                  value: 'id',
+                  children: 'childs'
+                }"
+                @change="handleChangeCascader"
+              />
+            </el-form-item>
+
+            <el-form-item label="商品分组" prop="shopGroupId">
+              <el-cascader
+                v-model="form.shopGroupId" :options="groupList" clearable :props="{
+                  checkStrictly: false,
+                  label: 'groupName',
+                  value: 'shopGroupId',
+                  children: 'childs',
+                  checkStrictly: true,
+                  emitPath: false
+                }"
+              />
+            </el-form-item>
+            <el-form-item label="品牌">
+              <el-select v-model="form.brandId" clearable placeholder="请选择品牌">
+                <el-option v-for="item in brandList" :key="item.id" :label="item.brandName" :value="item.id" />
+              </el-select>
+            </el-form-item>
+            <el-form-item class="form-item-long" label="供应商">
+              <el-input v-model="form.supplierName" maxlength="20" show-word-limit placeholder="请输入供应商名称" />
+            </el-form-item>
+            <el-form-item class="form-item-long" label="商品型号">
+              <el-input v-model.trim="form.productMarque" placeholder="请输入商品型号" />
+            </el-form-item>
+            <el-form-item label="需要物流" prop="ifLogistics">
+              <el-radio-group v-model="form.ifLogistics">
+                <el-radio :label="1">是</el-radio>
+                <el-radio :label="0">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="上架状态" prop="shelveState">
+              <el-radio-group v-model="form.shelveState">
+                <el-radio :label="1">上架</el-radio>
+                <el-radio :label="0">下架</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="允许超卖" prop="ifOversold">
+              <el-radio-group v-model="form.ifOversold">
+                <el-radio :label="1">允许</el-radio>
+                <el-radio :label="0">不允许</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="积分兑换" prop="ifCredit">
+              <el-radio-group v-model="form.ifCredit">
+                <el-radio :label="1">允许</el-radio>
+                <el-radio :label="0">不允许</el-radio>
+              </el-radio-group>
+              <p style="color: #cf0f0f">开启积分兑换后，积分所抵扣的金额由商户承担</p>
+            </el-form-item>
+            <el-form-item v-if="form.ifCredit" class="form-item-long" label="单笔最大抵扣" prop="creditLimit">
+              <!-- <el-input v-model="form.creditLimit" type="number" placeholder="请输入单笔最大抵扣" /> -->
+              <el-input-number
+                v-model="form.creditLimit" :controls="false" :max="999999999" :min="0"
+                :precision="0"
+                placeholder="请输入单笔最大抵扣"
+              />
+              <p style="color: #cf0f0f; height: 25px; line-height: 25px;margin-top: 10px">限制一笔订单中该商品最多抵扣多少积分</p>
+              <p style="color: #cf0f0f; height: 25px; line-height: 25px">( 注：1积分 = {{ integralProportion }}元 请输入整数 )</p>
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+      <div v-if="!active" class="centerCom">
+        <el-form ref="form" :model="params" label-width="80px">
+          <StyleInformation @cancel="cancel" v-bind="$props" :form="params" @syncVoucherPrice="handleSyncVoucherPrice" @syncVoucherId="handleSyncVoucherId" />
+        </el-form>
+      </div>
+    </div>
+
+    <!-- 弹窗 -->
+    <el-dialog :visible.sync="dialogVisible" class="check-image-dialog" title="查看图片" center="center">
+      <img width="100%" :src="dialogImageUrl" alt>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Tinymce from '@/components/Tinymce'
+import {
+  getGroupSelect,
+  getClassify,
+  getClassifyAdd,
+  getClassifyGetById,
+  getClassifyUpdate,
+  getBrandList
+} from '@/api/commodity'
+import {
+  getSelect
+} from '@/api/account'
+import { uploadUrl } from '@/utils/request'
+import StyleInformation from './addComponent'
+export default {
+  name: 'Bugyellow',
+  components: {
+    Tinymce,
+    StyleInformation
+  },
+  props: {
+    productId: {
+      type: Number,
+      default: 0
+    },
+    showTinymce: {
+      type: Boolean
+    },
+    voucherList: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+      brandList: [],
+      active: 1,
+      action: uploadUrl,
+      form: {
+        brandId: null, // 品牌ID
+        productName: '', // 商品名称
+        productBrief: '', // 商品简介
+        shopGroupId: '', // 商品分组id
+        classifyId: '', // 分类id
+        sortId: 0, // 排序值
+        productMarque: '', // 商品型号
+        supplierName: '', // 供应商名称
+        ifLogistics: '', // 是否需要物流 1-是 0-否
+        shelveState: '', // 是否上架 1-上架 0-不上架
+        ifOversold: '', // 是否允许超卖 1-是 0-否
+        ifCredit: '', // 是否支持积分兑换 1-是 0-否
+        ifSelection: -1,
+        creditLimit: '', // 单笔订单限制使用多少积分
+        ifHuabei: 1, // 是否支持花呗分期 1-是 0-否
+        productText: '', // 商品描述（富文本）
+        images: [], // "图片地址"
+        deletes: [], // 删除的规格id数组
+        names: [
+          {
+            code: '', // 级别
+            skuName: '', // 规格名
+            values: [
+              {
+                valueCode: '', // 级别
+                skuValue: '', // 规格值
+                image: '' // 图片
+              }
+            ]
+          }
+        ],
+        skus: [
+          {
+            skuName: '', // 规格名称
+            skuValue: '', // 规格值
+            price: '', // 售价
+            originalPrice: '', // 原价
+            stockNumber: '', // 库存数量
+            weight: '', // 重量
+            skuImage: '', // 配图地址
+            style: '', // 款式  1-单款式 2-多款式
+            voucherId: '', // 允许使用的代金券ID
+            voucherPrice: '' // 代金券最大的使用限额
+          }
+        ]
+      },
+      params: {
+        applyPrice: 0,
+        attrStyle: 0,
+        categoryId: '',
+        oversold: 1,
+        collects: 0,
+        groupId: '',
+        imgs: [],
+        deletes: [], // 删除规格数据
+        isDelete: 0,
+        limitCount: 0,
+        minusStock: '',
+        needLogistics: 1,
+        platform: '',
+        price: 0,
+        productCode: '',
+        productName: '',
+        sellCount: 0,
+        sellDesc: '',
+        sellType: '',
+        shortName: '',
+        skuAttrList: [
+          {
+            code: '',
+            skuName: '',
+            needImg: false,
+            values: [
+              {
+                skuValue: '',
+                valueCode: '',
+                image: ''
+              }
+            ]
+          }
+        ],
+        skuList: [
+          {
+            originalPrice: 0,
+            price: 0,
+            productId: '',
+            skuAttrCodeDTOList: [
+              {
+                code: '',
+                valueCode: ''
+              }
+            ],
+            skuId: '',
+            skuImage: '',
+            stockNumber: 0,
+            voucherId: 0,
+            voucherPrice: 0,
+            weight: 0
+          }
+        ],
+        sortOrder: '',
+        status: '',
+        stock: '',
+        supplierName: '',
+        views: '',
+        weight: ''
+      },
+      imgList: [],
+      groupList: [],
+      classifyList: [],
+      dialogImageUrl: '',
+      dialogVisible: false,
+      rules: {
+        productName: [ { required: true, message: '请输入商品名称', trigger: 'blur' } ],
+        sortId: [{ required: false, message: '请输入排序值', trigger: 'blur' }, { type: 'number', message: '排序值必须为数字' }],
+        shopGroupId: [ { required: true, message: '请选择商品分组', trigger: 'change' } ],
+        classifyId: [ { required: true, message: '请选择商品分类', trigger: 'change' } ],
+        ifLogistics: [ { required: true, message: '请选择是否需要物流', trigger: 'change' } ],
+        shelveState: [ { required: true, message: '请选择是否上架', trigger: 'change' } ],
+        ifOversold: [ { required: true, message: '请选择是否允许超卖', trigger: 'change' } ],
+        ifCredit: [ { required: true, message: '请选择是否支持积分兑换', trigger: 'change' } ],
+        creditLimit: [ { required: true, message: '请输入单笔最大抵扣', trigger: 'blur' } ]
+      },
+      integralList: [],
+      integralProportion: '' // 积分兑换金额比例
+    }
+  },
+  watch: {
+    productId: {
+      handler(nVal, oVal) {
+        if (nVal) {
+          // this.details()
+        }
+      }
+    }
+  },
+  mounted() {
+    // console.log(this.voucherList)
+    this.groups()
+    this.selectList()
+    this.getBrandList()
+    // if (this.productId) {
+    //   this.details()
+    // }
+    this.getCredit()
+  },
+  methods: {
+    //  向上一级传递事件
+    cancel(){
+      this.$emit("cancel")
+    },
+    handleChangeCascader() {
+      console.log(this.form.classifyId)
+    },
+    async getBrandList() {
+      const { data } = await getBrandList()
+      this.brandList = data
+    },
+    async getCredit() {
+      const res = await getSelect({ dictName: 'CREDIT_CONFIG' })
+      this.integralList = res.data
+      this.integralList.forEach((item) => {
+        if (item.dictName === 'credit_exchange_rate') {
+          this.integralProportion = item.dictDescribe
+        }
+      })
+    },
+    handleImageSuccess(response) {
+      const { url } = response.data
+      this.imgList.push(url)
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.imgPath
+      this.dialogVisible = true
+    },
+    // 移除图片
+    handleRemove(file) {
+      const { imgPath } = file
+      this.form.imgs = this.form.imgs.filter((item) => item.imgPath !== imgPath)
+    },
+    // 下一步
+    next() {
+      this.$refs.form.validate((valid) => {
+        console.log('val', valid)
+        if (valid) {
+          if (this.active === 1) {
+            this.active = 0
+            // console.log(this.form);
+            sessionStorage.setItem('form', JSON.stringify(this.form.skus))
+          }
+        } else {
+          this.$message({
+            message: '请填写正确的信息',
+            type: 'warning'
+          })
+          return false
+        }
+      })
+    },
+    // 同步代金券抵扣额度
+    handleSyncVoucherPrice() {
+      this.params.skuList.forEach((element) => {
+        element.voucherPrice = element.price
+      })
+    },
+    // 统一选择代金券
+    handleSyncVoucherId(e) {
+      this.params.skuList.forEach((element) => {
+        element.voucherId = e
+      })
+    },
+    // 点击新增商品时表单数据重置
+    reset() {
+      // this.form.productText = ''
+      this.form = {
+        productName: '',
+        productBrief: '',
+        shopGroupId: '',
+        classifyId: '',
+        supplierName: '',
+        ifLogistics: '',
+        shelveState: ' ',
+        ifOversold: '',
+        ifCredit: '',
+        ifSelection: -1,
+        creditLimit: '',
+        ifHuabei: 1,
+        productText: '',
+        images: [],
+        deletes: [],
+        names: [
+          {
+            code: '',
+            skuName: '',
+            values: [
+              {
+                valueCode: '',
+                skuValue: '',
+                image: ''
+              }
+            ]
+          }
+        ],
+        skus: [
+          {
+            skuName: '',
+            skuValue: '',
+            price: '',
+            originalPrice: '',
+            stockNumber: '',
+            weight: '',
+            skuImage: '',
+            style: ''
+          }
+        ]
+      }
+      this.params = {
+        applyPrice: 0,
+        attrStyle: 0,
+        categoryId: '',
+        oversold: 1,
+        collects: 0,
+        groupId: '',
+        imgs: [],
+        deletes: [],
+        isDelete: 0,
+        limitCount: 0,
+        minusStock: '',
+        needLogistics: 1,
+        platform: '',
+        price: 0,
+        productCode: '',
+        productName: '',
+        sellCount: 0,
+        sellDesc: '',
+        sellType: '',
+        shortName: '',
+        skuAttrList: [
+          {
+            code: '',
+            skuName: '',
+            needImg: false,
+            values: [
+              {
+                skuValue: '',
+                valueCode: '',
+                image: ''
+              }
+            ]
+          }
+        ],
+        skuList: [
+          {
+            originalPrice: 0,
+            price: 0,
+            productId: '',
+            skuAttrCodeDTOList: [
+              {
+                code: '',
+                valueCode: ''
+              }
+            ],
+            skuId: '',
+            skuImage: '',
+            stockNumber: 0,
+            voucherId: 0,
+            voucherPrice: 0,
+            weight: 0
+          }
+        ],
+        sortOrder: '',
+        status: '',
+        stock: '',
+        supplierName: '',
+        views: '',
+        weight: ''
+      }
+      this.imgList = []
+      this.dialogImageUrl = ''
+      this.dialogVisible = false
+      this.active = 1
+    },
+    // 返回
+    back() {
+      this.active = 1
+      this.$emit('cancel')
+    },
+    // 上一步
+    last() {
+      if (this.active !== 1) {
+        this.active = 1
+      }
+    },
+    // 获取商品分组
+    async groups() {
+      const res = await getGroupSelect({
+      })
+      this.groupList = res.data
+    },
+    // 获取详情
+    async details() {
+      const res = await getClassifyGetById({ productId: this.productId })
+      this.form = res.data
+      this.$set(this.form, 'productText', res.data.productText)
+      // this.form.productText = res.data.productText
+      // console.log(this.form.productText, 'productText')
+      if (res.data.names.length !== 0) {
+        this.params.skuAttrList = res.data.names
+      }
+      // this.params.skuAttrList.forEach((item) => {
+      //   var data = {}
+      //   var arr = Object.keys(res.data)
+      //   if (arr.length === 0) {
+      //     item.needImg = false
+      //   }
+      // })
+      this.params.skuList = this.form.skus
+      this.params.attrStyle = res.data.skus[0]?.style
+      this.params.imgs = res.data.images
+    },
+    async selectList() {
+      const res = await getClassify()
+      this.classifyList = this.filterList(res.data)
+    },
+    filterList(data) {
+      data.forEach((i) => {
+        if (i.childs.length) {
+          this.filterList(i.childs)
+        } else {
+          i.childs = null
+        }
+      })
+      return data
+    }
+  }
+}
+</script>
+
+<style scoped lang='scss'>
+@import url("../../../styles/elDialog.scss");
+
+.btnList {
+  float: right;
+  padding: 3px 0;
+  width: 100px;
+  height: 40px;
+  border-radius: 4px;
+  margin-right: 30px;
+}
+
+.addTitle {
+  font-size: 20px;
+  color: #333333;
+  line-height: 50px;
+}
+
+.stepsColor {
+  font-size: 20px;
+  line-height: 40px;
+
+  .one_class {
+    width: 40px;
+    background: #3a68f2;
+    border-radius: 50%;
+    color: #ffffff;
+    margin: 0 10px;
+  }
+
+  .two_class {
+    color: #3a68f2;
+  }
+
+  .line {
+    width: 230px;
+    height: 2px;
+    background: #e0e5eb;
+    margin: 0 20px;
+  }
+
+  .t_class {
+    width: 40px;
+    background: #dddddd;
+    border-radius: 50%;
+    color: #333333;
+    margin: 0 10px;
+  }
+
+  .w_class {
+    color: #666666;
+  }
+}
+
+.common {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.addCom {
+  margin: 10px 0;
+  justify-content: space-around;
+  align-items: unset;
+
+  .el-form {
+    display: flex;
+    padding: 40px 0;
+  }
+
+  .leftCom {
+    width: 65%;
+    background: #ffffff;
+  }
+
+  .rightCom {
+    width: 35%;
+    background: #ffffff;
+    margin-left: 80px;
+  }
+}
+
+.centerCom {
+  width: 1660px;
+  background: #ffffff;
+  box-shadow: 0px 5px 20px 0px rgba(51, 51, 51, 0.15);
+  border-radius: 4px;
+}
+</style>
+
+<style scoped>
+.form-item-long>>>.el-input {
+  width: 100%;
+}
+</style>

src/views/threeSelection/platformSelect/addComponent.vue

@@ -0,0 +1,808 @@
+<template>
+  <div class="style-information-component">
+    <el-form-item label="商品图片" />
+    <div class="upload-wrap">
+      <el-upload ref="upImagesFiles" list-type="picture-card" :on-preview="handlePictureCardPreview"
+        :on-remove="handleRemove" :headers="headers" :data="dataObj" :file-list="form.imgs" :limit="20"
+        :on-success="handleImageSuccess" :action="action" :before-upload="changeFiles" :disabled="true">
+        <i slot="default" class="el-icon-plus" />
+        <div slot="file" slot-scope="{ file }">
+          <img v-if="!isVideo(file.imgPath)" class="el-upload-list__item-thumbnail" :src="file.imgPath">
+          <video v-else class="el-upload-list__item-thumbnail" style="width: 148px;height: 148px;"
+            :src="file.imgPath"></video>
+          <span class="el-upload-list__item-actions">
+            <span v-if="!isVideo(file.imgPath)" class="el-upload-list__item-preview"
+              @click="handlePictureCardPreview(file)">
+              <i class="el-icon-zoom-in" />
+            </span>
+            <span @click="playVideo(file.imgPath)">
+              <i class="el-icon-video-play"></i>
+            </span>
+          </span>
+        </div>
+      </el-upload>
+    </div>
+    <el-form-item label="款式设置">
+      <el-radio-group v-model="form.attrStyle" :disabled="true">
+        <el-radio :label="0">单款式</el-radio>
+        <el-radio :label="1">多款式</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <div class="style-container">
+      <div v-if="form.attrStyle === 0" class="single-style">
+        <el-table :data="skuList" style="width: 100%" :header-cell-style="{ background: '#EEF3FF', color: '#333333' }">
+          <el-table-column label="规格">
+            <template slot-scope="scope">
+              <el-input v-model="singleStyle.skuValue" :sss="scope" maxlength="20" />
+            </template>
+          </el-table-column>
+          <el-table-column label="售价">
+            <template slot-scope="scope">
+              <el-input-number v-model="scope.row.price" :controls="false" :max="999999999" :min="0" :precision="2"
+                :step="0.01" style="width: auto;" />
+            </template>
+          </el-table-column>
+          <el-table-column label="原价">
+            <template slot-scope="scope">
+              <el-input-number v-model="scope.row.originalPrice" :controls="false" :max="999999999" :min="0"
+                :precision="2" :step="0.01" style="width: auto;" />
+            </template>
+          </el-table-column>
+          <el-table-column label="库存">
+            <template slot-scope="scope">
+              <el-input-number v-model="scope.row.stockNumber" :controls="false" :max="999999999" :min="0"
+                :precision="0" style="width: auto;" />
+            </template>
+          </el-table-column>
+          <el-table-column label="重量(KG)">
+            <template slot-scope="scope">
+              <el-input-number v-model="scope.row.weight" :controls="false" :max="999" :min="0" :precision="2"
+                :step="0.01" style="width: auto;" />
+            </template>
+          </el-table-column>
+          <el-table-column label="赠送代金券">
+            <template slot-scope="scope">
+              <el-input-number v-model="scope.row.presenterVoucher" :controls="false" :min="0" :precision="2"
+                :step="0.01" style="width: auto;" />
+            </template>
+          </el-table-column>
+          <el-table-column label="代金券最大抵扣额度(一般设置全额抵扣)">
+            <template slot-scope="scope">
+              <el-input-number v-model="scope.row.voucherPrice" :controls="false" :min="0" :precision="6" :step="0.01"
+                style="width: auto;" />
+            </template>
+          </el-table-column>
+          <el-table-column label="商品绑定的代金券">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.voucherId" placeholder="请选择商品绑定的代金券">
+                <el-option v-for="item in voucherList" :key="item.id" :label="item.voucherName" :value="item.id">
+                </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="国际条码">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.sku" maxlength="20" />
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-else class="multiple-styles">
+        <div v-for="(skuAttr, index) in form.skuAttrList" :key="index" class="sku-attr-list">
+          <el-form-item label="规格名">
+            <el-input v-model="skuAttr.skuName" maxlength="20" :disabled="true" />
+          </el-form-item>
+          <el-form-item label="规格值">
+            <div class="attr-value-list">
+              <div v-for="(sku, index1) in skuAttr.values" :key="index + '-' + index1" class="main-diagram m-8">
+                <!-- 去除了长度限制 -->
+                <el-input v-model="sku.skuValue" :disabled="true" />
+                <div v-if="skuAttr.needImg && index === 0" class="upload-wrap diagram-upload">
+                  <div class="span-wrap">
+                    <el-upload list-type="picture-card" :show-file-list="false" :on-preview="handlePictureCardPreview"
+                      :on-remove="handleRemove" :headers="headers" :data="dataObj" :file-list="[sku]"
+                      :multiple="false" :on-success="handleImageSuccess1" :action="action" :disabled="true">
+                      <i v-if="!sku.image" slot="trigger" class="el-icon-plus" />
+                      <div v-else class="attr-value-img">
+                        <img class="attr-thumbnail" :src="sku.image">
+                      </div>
+                    </el-upload>
+                    <div v-if="sku.image" class="attr-actions">
+                      <span class="attr-preview" @click="handlePictureCardPreview({ imgPath: sku.image })">
+                        <i class="el-icon-zoom-in" />
+                      </span>
+                      <span class="attr-delete" @click="handleRemove1(sku)">
+                        <i class="el-icon-delete" />
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </el-form-item>
+        </div>
+      </div>
+      <el-table highlight-current-row  @current-change="handleRowChange" :data="skuList" style="width: 100%" :header-cell-style="{ background: '#EEF3FF', color: '#333333' }">
+        <!--  单选框 -->
+        <el-table-column label="选择" align="center">
+          <template slot-scope="scope">
+            <div class="next-box">
+              <div class="select-box" :class="addToCartParams.skuId == scope.row.skuId?'selectAct':''">
+              <i class="el-icon-check" color=""></i>
+            </div>
+            </div>
+           
+          </template>
+        </el-table-column>
+        <el-table-column v-for="(skuAttr, index) in skuAttrName" :key="index" :label="skuAttr.skuName">
+          <template slot-scope="scope">
+            <el-tooltip class="item" effect="dark"
+              :content="scope.row.skuAttrCodeDTOList && scope.row.skuAttrCodeDTOList[index] | attrValueFilter(form.skuAttrList)"
+              placement="top-start">
+              <div class="tipsView">
+                {{ scope.row.skuAttrCodeDTOList && scope.row.skuAttrCodeDTOList[index] |
+        attrValueFilter(form.skuAttrList) }}
+              </div>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column label="优惠价">
+          <template slot-scope="scope">
+            <el-input-number v-model="scope.row.price" :controls="false" :max="999999999" :min="0" :precision="2"
+              :step="0.01" style="width: auto;" :disabled="true" />
+          </template>
+        </el-table-column>
+        <el-table-column label="市场价">
+          <template slot-scope="scope">
+            <el-input-number v-model="scope.row.originalPrice" :controls="false" :max="999999999" :min="0"
+              :precision="2" :step="0.01" style="width: auto;" :disabled="true" />
+          </template>
+        </el-table-column>
+        <el-table-column label="供货价">
+          <template slot-scope="scope">
+            <el-input-number v-model="scope.row.manufacturerBasePrice" :controls="false" :max="999999999" :min="0"
+              :precision="2" :step="0.01" style="width: auto;" :disabled="true" />
+          </template>
+        </el-table-column>
+        <el-table-column label="渠道价">
+          <template slot-scope="scope">
+            <el-input-number v-model="scope.row.manufacturerGuidePrice" :controls="false" :max="999999999" :min="0"
+              :precision="2" :step="0.01" style="width: auto;" :disabled="true" />
+          </template>
+        </el-table-column>
+        <el-table-column label="库存">
+          <template slot-scope="scope">
+            <el-input-number v-model="scope.row.stockNumber" :controls="false" :max="999999999" :min="0" :precision="0"
+              style="width: auto;" :disabled="true" />
+          </template>
+        </el-table-column>
+        <el-table-column label="重量(KG)">
+          <template slot-scope="scope">
+            <el-input-number v-model="scope.row.weight" :controls="false" :max="999" :min="0" :precision="6"
+              :step="0.01" style="width: auto;" :disabled="true" />
+          </template>
+        </el-table-column>
+        <el-table-column label="赠送代金券">
+          <template slot-scope="scope">
+            <el-input-number v-model="scope.row.presenterVoucher" :controls="false" :min="0" :precision="6" :step="1"
+              style="width: auto;" :disabled="true" />
+          </template>
+        </el-table-column>
+        <el-table-column label="代金券最大抵扣额度(一般设置全额抵扣)">
+          <template slot-scope="scope">
+            <el-input-number v-model="scope.row.voucherPrice" :controls="false" :min="0" :precision="6" :step="0.01"
+              style="width: auto;" :disabled="true" />
+          </template>
+        </el-table-column>
+        <el-table-column label="国际条码">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.sku" maxlength="20" :disabled="true" />
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="number-box">
+      <el-input-number v-model="addToCartParams.number" size="large" :min="0" :max="numberAll"  label="请选择数量"></el-input-number>
+      <span>选择的SKU商品库存数量如果是0，不能增加购买商品数量，需注意！！！！！</span>
+    </div>
+    <div class="btn-list">
+      <el-button type="info" plain @click="cancel">取消</el-button>
+      <el-button type="primary" @click="addCart">加入购物车</el-button>
+    </div>
+    <el-dialog :append-to-body="true" :visible.sync="dialogVisible" class="check-image-dialog" title="查看图片"
+      center="center">
+      <img width="100%" :src="dialogImageUrl" alt>
+    </el-dialog>
+
+    <el-dialog width="30%" :append-to-body="true" :visible.sync="previewVideoVisible" class="check-image-dialog"
+      title="预览视频" center="center">
+      <div style="display: flex; align-items: center; justify-content: center;">
+        <video controls autoplay muted style="width: 400px; height: 400px;" :src="dialogVideoUrl"></video>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { uploadUrl } from '@/utils/request'
+import { getToken } from '@/utils/auth'
+import { isVideo } from '@/utils/index'
+import { addShopCar } from '@/api/threeSelection'
+export default {
+  name: 'addComponent',
+  filters: {
+    attrValueFilter(map, list) {
+      const hasChilds =
+        list &&
+        list.filter((skuAttr) => {
+          const hasChild = skuAttr.values.some((attr) => attr.skuValue)
+          return skuAttr.skuName && hasChild
+        })
+      if (!map) {
+        return ''
+      }
+      const { code, valueCode } = map
+      let codeStr = ''
+      // eslint-disable-next-line array-callback-return
+      hasChilds.map((item) => {
+        const { values } = item
+        values &&
+          values.some((attr) => {
+            const isSome = item.code === code && attr.valueCode === valueCode
+            if (isSome) {
+              codeStr = attr.skuValue
+            }
+            return isSome
+          })
+      })
+      return codeStr
+    }
+  },
+  props: {
+    form: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    voucherList: {
+      type: Array,
+      // eslint-disable-next-line vue/require-valid-default-prop
+      default: []
+    }
+  },
+  data() {
+    return {
+      dialogImageUrl: '',
+      dialogVideoUrl: '',
+      dialogVisible: false,
+      previewVideoVisible: false,
+      headers: {
+        'Authorization-business': getToken(),
+        'tenant': 'MDAwMA=='
+      },
+      action: uploadUrl,
+      dataObj: {
+        folderId: 1
+      },
+      fileList: [],
+      //  记录当前是哪里增加或者删除的
+      idx: null,
+      //  添加到购物车的参数
+      addToCartParams: {
+        skuId: '',
+        number:''
+      },
+      //  数量库存判断
+      numberAll:0
+    }
+  },
+  computed: {
+    skuAttrName() {
+      return (
+        this.form.skuAttrList &&
+        this.form.skuAttrList.filter((skuAttr) => {
+          const hasChilds = skuAttr.values.some((attr) => attr.skuValue)
+          return skuAttr.skuName && hasChilds
+        })
+      )
+    },
+    singleStyle() {
+      if (this.form.skuAttrList && this.form.skuAttrList[0]) {
+        return this.form.skuAttrList && this.form.skuAttrList[0].values[0]
+      }
+      return {
+        skuValue: ''
+      }
+    },
+    skuList() {
+      // console.log(this.form)
+      if (this.form.attrStyle === 0) {
+        return this.form.skuList.slice(0, 1)
+      }
+      return this.form.skuList
+    }
+
+  },
+  watch: {
+    'form.skuAttrList': {
+      handler(newVal, oldVal) {
+        // 判断是否有规格值
+        const hasChilds =
+          this.form.skuAttrList &&
+          this.form.skuAttrList.filter((skuAttr) => {
+            const hasChild = skuAttr.values.some((attr) => attr.skuValue)
+            return skuAttr.skuName && hasChild
+          })
+        // console.log(hasChilds);
+        if (this.form.attrStyle === 1 && hasChilds.length) {
+          this.skuFormat()
+        }
+      },
+      deep: true
+    },
+    'form.skuList': {
+      handler(newVal, oldVal) {
+        // console.log(newVal)
+        // console.log(oldVal)
+        // 修复因为添加规格导致的价格归零的问题
+        oldVal.forEach((item, index) => {
+          // newVal[index] = Object.assign(item, newVal[index])
+          for (const key in newVal[index]) {
+            if (item[key]) {
+              newVal[index][key] = item[key]
+            }
+          }
+        })
+        // console.log(newVal)
+      },
+      deep: true
+    }
+  },
+  methods: {
+    //  添加到购物车
+    async addCart(){
+      if(this.addToCartParams.skuId == ""){
+        this.$message.warning("请选择你要加入购物车的商品")
+        return
+      }
+      if(!this.addToCartParams.number){
+        this.$message.warning("请选择要加入购物车的商品数量")
+        return
+      }
+      console.log("添加到购物车",this.addToCartParams);
+      let res = await addShopCar(this.addToCartParams);
+      if(res.code == ""){
+        this.$message.success("加入购物车成功")
+        this.cancel()
+      }
+    },
+    //  取消按钮
+    cancel(){
+      this.addToCartParams = {
+        skuId: '',
+        number:''
+      }
+      this.numberAll = 0
+      this.$emit("cancel")
+    },
+          //  表格选择
+    handleRowChange(val) {
+      this.numberAll = val.stockNumber
+      //  表格选择
+      this.addToCartParams.skuId = val.skuId
+    },
+    isVideo,
+    playVideo(url) {
+      this.dialogVideoUrl = url
+      this.previewVideoVisible = true
+    },
+    handleImageSuccess(response) {
+      const url = response.data.url
+      // eslint-disable-next-line vue/no-mutating-props
+      this.form.imgs.push({
+        imgPath: url
+      })
+    },
+    // 移除图片
+    handleRemove(file) {
+      const { imgPath } = file
+      // eslint-disable-next-line vue/no-mutating-props
+      this.form.imgs = this.form.imgs.filter((item) => item.imgPath !== imgPath)
+    },
+    handleRemove1(file) {
+      file.image = ''
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.imgPath
+      this.dialogVisible = true
+    },
+    handleImageSuccess1(response, file, fileList) {
+      const url = response.data.url
+      fileList[0].image = url
+    },
+    addAttrValue(index) {
+      // eslint-disable-next-line vue/no-mutating-props
+      this.form.skuAttrList[index].values.push({
+        skuId: '',
+        valueCode: '',
+        skuValue: '',
+        image: ''
+      })
+      if (this.idx == index) {
+        this.form.deletes.splice(this.form.deletes.length - 1, 1)
+      }
+    },
+    // 删除规格值
+    delValue(index, index1) {
+      if (index1 < this.form.skuAttrList[index].values.length - 1) return
+      this.idx = index
+      const newList = JSON.parse(JSON.stringify(this.form.skuAttrList[index]))
+      const valueObj = {
+        code: newList.code,
+        skuId: newList.skuId,
+        valueCode: newList.values[index1].valueCode
+      }
+      // eslint-disable-next-line vue/no-mutating-props
+      this.form.deletes.push(valueObj)
+      console.log(this.form.deletes, '删除')
+      // console.log(this.valueObj)
+      this.form.skuAttrList[index].values.splice(index1, 1)
+      // console.log(this.form.skuAttrList[index].values);
+    },
+    // 删除规格名
+    delSkuAttrList(index) {
+      const newList = JSON.parse(JSON.stringify(this.form.skuAttrList[index]))
+      newList.values.forEach((item) => {
+        const valueObj = {
+          code: newList.code,
+          skuId: newList.skuId,
+          valueCode: ''
+        }
+        valueObj.valueCode = item.valueCode
+        // eslint-disable-next-line vue/no-mutating-props
+        this.form.deletes.push(valueObj)
+      })
+      // eslint-disable-next-line vue/no-mutating-props
+      this.form.skuAttrList.splice(index, 1)
+    },
+    delAttrValue1(row, index, arr) { },
+    skuFormat() {
+      const skuListArray = []
+      const result = {
+        originalPrice: 0,
+        price: 0,
+        productId: '',
+        skuAttrCodeDTOList: [
+          {
+            code: '',
+            valueCode: ''
+          }
+        ],
+        skuId: '',
+        skuImage: '',
+        stockNumber: 0,
+        voucherId: 0,
+        voucherPrice: 0,
+        weight: 0
+      }
+      const doExchange = (arr, depth) => {
+        const map = {
+          arr: []
+        }
+        for (var i = 0; i < arr[depth].length; i++) {
+          map.arr.push(arr[depth][i])
+          const { code, valueCode, attrId } = arr[depth][i]
+          result.skuAttrCodeDTOList[depth] = {
+            code,
+            valueCode,
+            attrId
+          }
+          if (depth !== arr.length - 1) {
+            doExchange(arr, depth + 1)
+          } else {
+            skuListArray.push(JSON.parse(JSON.stringify(result)))
+          }
+        }
+      }
+      // this.form.skuList  = skuListArray
+      // 获取规格值的所有组合
+      const values = []
+      // eslint-disable-next-line array-callback-return
+      this.form.skuAttrList.map((skuItem, index) => {
+        const attrList = []
+        skuItem.code = skuItem.code || 'attr_code_' + index
+        const { code } = skuItem
+        skuItem.values &&
+          // eslint-disable-next-line array-callback-return
+          skuItem.values.map((attrItem, index1) => {
+            attrItem.valueCode = skuItem.valueCode || code + '_value_' + index1
+            const skuId = attrItem.skuId
+            const attrId = attrItem.attrId
+            if (attrItem.skuValue) {
+              attrList.push({
+                skuId,
+                attrId,
+                code,
+                valueCode: attrItem.valueCode
+              })
+            }
+          })
+        if (attrList.length) {
+          values.push(attrList)
+        }
+      })
+      // 相互组合
+      if (values.length) {
+        doExchange(values, 0)
+      }
+      // console.log(this.form.skuList)
+      // eslint-disable-next-line vue/no-mutating-props
+      this.form.skuList = skuListArray.map((sku1) => {
+        const { skuAttrList, skuAttrCodeDTOList } = sku1
+        const skuAttrList1 = skuAttrCodeDTOList || skuAttrList
+        const skuMap = this.form.skuList.filter((sku2) => {
+          const skuAttrList2 = sku2.skuAttrList
+          sku2.skuAttrCodeDTOList = skuAttrList2
+          if (!skuAttrList2) return false
+          const ids = []
+          skuAttrList1.filter((item) => ids.push(item.id))
+          const result = skuAttrList2.every((item) => ids.indexOf(item.attrValueId) !== -1)
+          return result
+        })
+        let selectMap = sku1
+        if (skuMap && skuMap.length) {
+          selectMap = JSON.parse(JSON.stringify(skuMap[0]))
+          selectMap.skuAttrCodeDTOList = skuAttrCodeDTOList
+        }
+        return selectMap
+      })
+    },
+    changeFiles(file, fileList) {
+      // console.log(file)
+      // console.log(fileList)
+      // eslint-disable-next-line prefer-const
+      let uid = file.uid
+      const isLt =
+        file.size / 1024 / 5 >= 1 && file.size / 1024 / 1024 / 5 <= 1
+      if (!isLt) {
+        // this.$refs.upImagesFiles.abort()
+        this.$message.error('上传文件大小不得小于5KB,不得大于5MB!')
+        return false
+      }
+      // console.log(fileList)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import url("../../../styles/elDialog.scss");
+
+.tipsView {
+  width: 110px;
+  height: 46px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  /*行数*/
+}
+
+.style-information-component {
+  width: 100%;
+  min-height: 300px;
+  padding: 24px;
+  background-color: rgb(255, 255, 255);
+
+  .el-form-item {
+    margin-bottom: 10px;
+  }
+
+  .attr-value-list {
+    display: flex;
+    flex-wrap: wrap;
+
+    .main-diagram {
+      position: relative;
+      width: 180px;
+
+      .span-wrap {
+        position: relative;
+        display: inline-block;
+        margin-top: 10px;
+
+        .attr-actions {
+          line-height: 100px;
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          top: 0;
+          cursor: default;
+          text-align: center;
+          color: #fff;
+          opacity: 0;
+          font-size: 20px;
+          background-color: rgba(0, 0, 0, 0.5);
+          -webkit-transition: opacity 0.3s;
+          transition: opacity 0.3s;
+          z-index: 1;
+
+          &:hover {
+            opacity: 1;
+
+            .attr-preview {
+              display: inline-block;
+            }
+
+            i {
+              color: #fff;
+              font-size: 20px;
+            }
+          }
+        }
+
+        .attr-preview {
+          display: none;
+          cursor: pointer;
+          font-size: 20px;
+          color: #fff;
+        }
+
+        .attr-delete {
+          margin-left: 15px;
+          color: #fff;
+        }
+      }
+
+      .attr-value-img {
+        width: 100%;
+        height: 100%;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+    }
+  }
+
+  .m-8 {
+    margin-right: 8px;
+  }
+
+  .upload-btn {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 110px;
+    cursor: pointer;
+    border: 2px dashed #2e60f8;
+    border-radius: 2px;
+    background-color: #f8f9fb;
+    text-align: center;
+    font-size: 20px;
+    color: #2e60f8;
+
+    i {
+      color: #2e60f8;
+      font-size: 20px;
+    }
+
+    .upload-title {
+      margin-left: 10px;
+      font-size: 14px;
+    }
+  }
+
+  .upload-wrap {
+    margin-bottom: 25px;
+
+    .el-upload-list__item {
+      transition: none !important;
+    }
+
+    .el-upload,
+    .el-upload-list__item {
+      width: 100px;
+      height: 100px;
+      line-height: 100px;
+    }
+
+    .el-progress,
+    .el-progress-circle {
+      width: 80px !important;
+      height: 80px !important;
+    }
+  }
+
+  .sku-attr-list {
+    .el-input {
+      width: 180px;
+    }
+  }
+
+  .single-style {
+    .el-input {
+      max-width: 180px;
+    }
+  }
+
+  .add-attr-btn {
+    margin-bottom: 25px;
+  }
+
+  .check-image-dialog {
+    .el-dialog {
+      margin-top: 25px;
+
+      .el-dialog__body {
+        img {
+          max-width: 100%;
+          max-height: 100%;
+          height: 500px;
+          object-fit: contain;
+        }
+      }
+    }
+  }
+
+  .delImg {
+    position: absolute;
+    top: 12px;
+    margin-left: -24px
+  }
+
+  .delImg:hover {
+    border-radius: 50%;
+    color: #ffffff;
+    background: #2e60f8;
+    cursor: pointer;
+  }
+}
+
+
+.next-box{
+  display:flex;
+  align-items: center;
+  justify-content: center;
+}
+/* 选框选中 */
+.select-box{
+  width: 25px;
+  height: 25px;
+  border: 1px solid #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+.selectAct{
+  background-color: #2e60f8;
+  border:0;
+}
+.number-box{
+  margin-top:30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 30px;
+  span{
+    color:red;
+    font-weight: 600;
+    font-size:18px;
+  }
+}
+.btn-list{
+  margin:40px 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 30px;
+}
+</style>

src/views/threeSelection/platformSelect/index.vue

@@ -0,0 +1,331 @@
+<template>
+  <div>
+    <div class="pending">
+      <!-- 搜索 -->
+      <div class="formSearch">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-form-item label="商品名称">
+            <el-input v-model="formInline.search" maxlength="20" placeholder="请输入商品名称" />
+          </el-form-item>
+          <el-form-item label="商品型号">
+            <el-input v-model="formInline.productMarque" placeholder="请输入商品型号" />
+          </el-form-item>
+          <el-form-item label="上架状态">
+            <el-select v-model="formInline.shelveState" placeholder="请选择上架状态">
+              <el-option label="全部" :value="null" />
+              <el-option label="上架" value="1" />
+              <el-option label="下架" value="0" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="官方分类">
+            <el-cascader v-model="formInline.classifyId" :options="categoryList" clearable :props="{
+          checkStrictly: true,
+          expandTrigger: 'hover',
+          label: 'categoryName',
+          value: 'id',
+          children: 'childs'
+        }" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" plain @click="handleSearch">查询</el-button>
+            <el-button plain @click="clear">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!-- 表格 -->
+      <div class="tableBox">
+        <el-table ref="multipleTable" :data="tableData" border
+          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
+          v-loading="loading">
+          <el-table-column prop="productId" label="商品id" show-overflow-tooltip />
+          <el-table-column label="商品主图" width="150" align="center">
+            <template slot-scope="scope">
+              <!-- 修复图片不能正常显示的问题 -->
+              <img height="80" width="80" :src="scope.row.productImage.replace(/http:\/\//, 'https://')" alt srcset>
+            </template>
+          </el-table-column>
+          <el-table-column prop="productName" label="商品名称" width="220" />
+          <el-table-column prop="section" label="售价区间" show-overflow-tooltip />
+          <el-table-column prop="memberSection" label="会员价" show-overflow-tooltip />
+          <el-table-column prop="ifCredit" label="积分兑换" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span v-if="scope.row.ifCredit == 1">允许</span>
+              <span v-if="scope.row.ifCredit == 0">不允许</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="stockNumber" label="库存" show-overflow-tooltip />
+          <el-table-column prop="volume" label="销量" show-overflow-tooltip />
+          <el-table-column prop="volume" label="上架状态" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span v-if="scope.row.shelveState == 0">未上架</span>
+              <span v-if="scope.row.shelveState == 1">已上架</span>
+              <span v-if="scope.row.shelveState == 2">待审核</span>
+              <span v-if="scope.row.shelveState == 3">审核失败</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="reject" label="驳回原因" show-overflow-tooltip />
+          <el-table-column :formatter="row => getBrandName(row)" label="品牌" show-overflow-tooltip />
+          <el-table-column prop="createTime" label="创建时间" width="180" />
+          <el-table-column label="操作" width="200">
+            <template slot-scope="scope">
+              <div class="btnList">
+                <el-button type="text" @click="edit(scope.row)">选择商品</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="fenye">
+          <el-pagination :current-page="formInline.page" :page-sizes="[10, 20, 50, 100]" :page-size="10"
+            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange" />
+        </div>
+      </div>
+    </div>
+    <!-- 新增/修改商品弹窗 -->
+    <el-dialog :title="!commId ? '新增商品' : '编辑商品'" :visible.sync="commidyVisible" width="74%" center top="10vh"
+      :close-on-click-modal="false" @before-close="closeModal" @close="closeModal">
+      <CommAdd  ref="child"  :voucher-list="voucherList" :show-tinymce="showTinymce" :product-id="commId"
+        @cancel="cancelForm" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import CommAdd from '@/views/threeSelection/platformSelect/addCommodity.vue'
+import { getBtnList, getToken, getShopId } from '@/utils/auth'
+import { uploadUrl } from '@/utils/request'
+import {
+  getClassify,
+  getBrandList,
+} from '@/api/commodity'
+
+import {
+  getlLibraryList,
+} from '@/api/threeSelection'
+// import { shopSelectionAddShopLibrary } from '@/api/selectionCenter/selectionCenter'
+export default {
+  name: 'CommoditySystem',
+  components: {
+    CommAdd
+  },
+  data() {
+    // 这里存放数据
+    return {
+      showTinymce: false,
+      btnList: '',
+      activeName: 'first',
+      formInline: {
+        productMarque: '', // 商品型号
+        search: '', // 搜索字段
+        shelveState: '', // 上架状态 1-上架 0-不上架 null-全部
+        stock: '', // 库存状态 1-有库存 0-无库存 null-全部
+        classifyId: '', // 最下级分类id
+        page: 1, // 当前页
+        pageSize: 10
+      },
+      batchAdd: false,
+      batchFileList: [],
+      total: 1,
+      tableData: [],
+      categoryList: [],
+      UploadUrl: uploadUrl,
+      headers: {
+        'Authorization-business': getToken()
+      },
+      vipPriceVisible: false,
+      productId: 0,
+      mode: 1,
+      productData: [],
+      gradeList: [],
+      commidyVisible: false,
+      commId: 0,
+      brandList: [],
+      voucherList: [],
+      //  控制加载
+      loading: false
+    }
+  },
+  computed: {
+    getBrandName() {
+      return (row) => {
+        const find = this.brandList.find((item) => item.id === row.brandId)
+        if (find) return find.brandName
+        return '-'
+      }
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.getBrandList()
+    this.getAll(this.formInline)
+    this.queryAllCategory()
+    this.btnList = getBtnList()
+  },
+  // 方法集合
+  methods: {
+    async getBrandList() {
+      const { data } = await getBrandList()
+      this.brandList = data
+    },
+    //  编辑
+    edit(row) {
+      this.showTinymce = true
+      this.commidyVisible = true
+      this.commId = row.productId
+      this.$nextTick(() => {
+        this.$refs.child?.details()
+      })
+    },
+    cancelForm() {
+      this.commidyVisible = false
+      this.getAll(this.formInline)
+      this.closeModal()
+    },
+    closeModal() {
+      this.showTinymce = false
+      this.$refs.child.last()
+      this.$refs.child.reset()
+    },
+    handleSizeChange(val) {
+      this.formInline.pageSize = val
+      this.getAll(this.formInline)
+    },
+    handleCurrentChange(val) {
+      this.formInline.page = val
+      this.getAll(this.formInline)
+    },
+    //  查询
+    handleSearch() {
+      this.total = 1
+      this.formInline.page = 1
+      this.getAll(this.formInline)
+    },
+    // 重置
+    clear() {
+      this.formInline = {
+        search: '', // 搜索字段
+        shelveState: '', // 上架状态 1-上架 0-不上架 null-全部
+        stock: '', // 库存状态 1-有库存 0-无库存 null-全部
+        classifyId: '', // 最下级分类id
+        page: 1, // 当前页
+        pageSize: 10
+      }
+    },
+    // 初始化查询所有数据
+    async getAll(formInline) {
+      this.formInline.classifyId =
+        this.formInline.classifyId[2] ||
+        this.formInline.classifyId[1] ||
+        this.formInline.classifyId[0] ||
+        this.formInline.classifyId
+      this.loading = true
+      try {
+        const res = await getlLibraryList(formInline)
+        this.total = res.data.total
+        this.tableData = res.data.list
+      } finally {
+        this.loading = false
+      }
+
+    },
+    // 初始化查询所有分类
+    async queryAllCategory() {
+      const res = await getClassify()
+      this.categoryList = res.data
+      this.handleRemoveEmptyChild(this.categoryList)
+    },
+    handleRemoveEmptyChild(arr) {
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i].childs && Array.isArray(arr[i].childs)) {
+          this.handleRemoveEmptyChild(arr[i].childs)
+        }
+        if (arr[i].childs && Array.isArray(arr[i].childs) && arr[i].childs.length === 0) {
+          delete arr[i].childs
+        }
+      }
+    },
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+@import url("../../../styles/elDialog.scss");
+
+.pending {
+  padding: 30px;
+}
+
+.fenye {
+  margin-top: 20px;
+}
+
+.clickMe {
+  color: #3a68f2;
+  cursor: pointer;
+}
+
+.uploadDialog {
+
+  // display: flex;
+  // flex-direction: column;
+  // justify-content: center;
+  >>>.el-upload__tip {
+    display: inline-block;
+    width: 360px;
+    margin: auto;
+  }
+}
+
+.vipDialog {
+  .priceTable {
+    table {
+      width: 100%;
+      text-align: center;
+      border-left: 1px solid #EBEEF5;
+      border-bottom: 1px solid #EBEEF5;
+      font-size: 14px;
+      color: #606266;
+      border-collapse: collapse;
+
+      tr {
+        border-top: 1px solid #EBEEF5;
+
+        th {
+          padding: 12px 0;
+          background: #EEF3FF;
+          color: #333;
+          border-right: 1px solid #EBEEF5;
+        }
+
+        td {
+          padding: 12px 0;
+          border-right: 1px solid #EBEEF5;
+
+          &.td-input {
+            .el-input {
+              width: 80px;
+              margin-right: 0;
+            }
+          }
+
+          &:nth-child(1),
+          &:nth-child(2) {
+            width: 80px;
+          }
+
+          .el-input {
+            width: 100px;
+            margin-right: 10px;
+          }
+        }
+      }
+    }
+  }
+
+  .clearBtn {
+    margin-top: 20px;
+  }
+}
+</style>

src/views/threeSelection/selfOrder/components/changePrice.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="updatePrice">
+    <el-dialog :visible.sync="visible" :close-on-click-modal="false" title="商品改价" width="600px">
+      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
+        <el-form-item label="订单应付价格" prop="price">
+          <el-input v-model="ruleForm.price" disabled />
+        </el-form-item>
+        <el-form-item label="修改价格" prop="newPrice">
+          <el-input
+            v-model="ruleForm.newPrice" maxlength="9" @change="(val) => {
+              scope.row.newPrice = parseFloat(val) ? parseFloat(val) : 1;
+            }
+            "
+          />
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" :loading="loading" @click="changeOrderPrice('ruleForm')">确 定</el-button>
+        <el-button @click="cancel('ruleForm')">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { updateOrderPrice } from '@/api/order'
+export default {
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      ruleForm: {
+        orderId: null,
+        price: 0,
+        newPrice: 0
+      },
+      rules: {
+        newPrice: [
+          { required: true, message: '请输入修改后的价格', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    show(row) {
+      this.visible = true
+      this.ruleForm.orderId = row.orderId
+      this.ruleForm.price = row.price
+    },
+    cancel(ref) {
+      this.$refs[ref].resetFields()
+      this.visible = false
+    },
+    changeOrderPrice(ref) {
+      this.$refs[ref].validate((valid) => {
+        if (valid && !this.loading) {
+          this.loading = true
+          updateOrderPrice({
+            orderId: this.ruleForm.orderId,
+            price: this.ruleForm.newPrice
+          }).then((res) => {
+            if (res.code === '') {
+              this.$message.success('修改成功')
+              this.visible = false
+              this.$emit('success')
+            }
+          })
+            .catch((err) => {
+              console.log(err)
+            })
+            .finally(() => {
+              this.loading = false
+            })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import url("../../../../styles/elDialog.scss");
+</style>

src/views/threeSelection/selfOrder/index.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="pending">
+    <div class="tab_show">
+      <el-tabs v-model="formInline.state" @tab-click="handleClick">
+        <el-tab-pane label="全部" name="" />
+        <!-- <el-tab-pane label="待付款" name="1" /> -->
+        <el-tab-pane label="待发货" name="2" />
+        <el-tab-pane label="已发货" name="3" />
+        <el-tab-pane label="已完成" name="4" />
+        <el-tab-pane label="已关闭" name="5" />
+      </el-tabs>
+      <!-- 搜索 -->
+      <div class="formSearch">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-form-item>
+            <div>
+              <el-input v-model="formInline.search" maxlength="20" placeholder="请输入内容">
+                <el-select slot="prepend" v-model="formInline.searchType" style="width:130px" placeholder="请选择">
+                  <el-option label="订单id" value="1" />
+                  <el-option label="买家账户" value="2" />
+                  <el-option label="收件人姓名" value="3" />
+                  <el-option label="收件人手机号" value="4" />
+                  <el-option label="下单号码" value="6" />
+                  <!-- <el-option label="商品ID" value="5" /> -->
+                </el-select>
+              </el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="下单时间">
+            <el-date-picker v-model="formInline.dates" type="daterange" range-separator="至" start-placeholder="开始日期"
+              end-placeholder="结束日期" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" plain @click="search">查询</el-button>
+
+          </el-form-item>
+        </el-form>
+      </div>
+      <!-- 表格 -->
+      <div class="tableBox">
+        <el-table ref="multipleTable" v-loading="loading" :data="tableData" border
+          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%">
+          <el-table-column label="订单id" width="220">
+            <template slot-scope="scope">{{ scope.row.orderId }}</template>
+          </el-table-column>
+          <el-table-column prop="orderFormid" label="订单编号" width="220" />
+          <el-table-column prop="customerPhone" label="下单号码" width="220" />
+          <el-table-column prop="scanType" label="订单类型" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span v-if="scope.row.scanType == 1">常规订单</span>
+              <span v-if="scope.row.scanType == 2">收款码订单</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="price" label="支付金额（元）" width="220" />
+          <el-table-column prop="number" label="商品数量（件）" show-overflow-tooltip />
+          <el-table-column label="订单状态" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span v-if="scope.row.state == 1">待付款</span>
+              <span v-else-if="scope.row.state == 2">待发货</span>
+              <span v-else-if="scope.row.state == 3">待收货</span>
+              <span v-else-if="scope.row.state == 4">已完成</span>
+              <span v-else-if="scope.row.state == 5">交易关闭（已取消）</span>
+              <span v-else-if="scope.row.state == 6">待成团</span>
+              <span v-else-if="scope.row.state == 7">待售后</span>
+              <span v-else-if="scope.row.state == 8">待核销（未付款）</span>
+              <span v-else-if="scope.row.state == 9">待核销（已付款）</span>
+              <span v-else-if="scope.row.state == 10">已核销</span>
+              <span v-else>--</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="customerName" label="下单账户" show-overflow-tooltip />
+          <el-table-column prop="createTime" label="下单时间" show-overflow-tooltip />
+          <el-table-column label="操作" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <div class="btnList">
+                <el-button type="text" @click="view(scope.row)">查看</el-button>
+                <template v-if="scope.row.state == 3">
+                  <el-button type="text" @click="confirmGoods(scope.row.orderId)">确认收货</el-button>
+                </template>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="fenye">
+          <el-pagination :current-page="formInline.page" :page-sizes="[10, 20, 50, 100]" :page-size="10"
+            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange" />
+        </div>
+      </div>
+    </div>
+    <PendDetails ref="pendDetails" @confirmGoods="confirmGoods" />
+    <ChangePrice ref="changePrice" @success="getAll(formInline)" />
+  </div>
+</template>
+
+<script>
+import { orderExport } from '@/api/order'
+import { getPurchaseOrder, getConfirm } from '@/api/threeSelection'
+import PendDetails from './pendDetails'
+import ChangePrice from './components/changePrice.vue'
+export default {
+  components: {
+    PendDetails,
+    ChangePrice
+  },
+  data() {
+    // 这里存放数据
+    return {
+      loading: false,
+      activeName: 'first',
+      formInline: {
+        searchType: '1',
+        search: '', // 搜索字段
+        state: '',
+        afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
+        dates: [], // 下单时间数组
+        page: 1,
+        pageSize: 10,
+        procureType: 1
+      },
+      total: 1,
+      tableData: [],
+      currentPage: 1
+    }
+  },
+  mounted() {
+    this.getAll(this.formInline)
+    this.handleClick({ name: '' })
+  },
+  // 方法集合
+  methods: {
+    handleSizeChange(val) {
+      this.formInline.pageSize = val
+      this.getAll(this.formInline)
+    },
+    handleCurrentChange(val) {
+      this.formInline.page = val
+      this.getAll(this.formInline)
+    },
+    handleClick(tab, event) {
+      // console.log(tab)
+      this.formInline.page = 1
+      this.formInline.state = tab.name
+      this.getAll(this.formInline)
+    },
+    //  查询
+    search() {
+      this.total = 1
+      this.formInline.page = 1
+      this.getAll(this.formInline)
+    },
+    view(row) {
+      this.$refs.pendDetails.show(row.orderId)
+    },
+    changePrice(row) {
+      this.$refs.changePrice.show(row)
+    },
+    // 初始化查询所有数据
+    async getAll(formInline) {
+      try {
+        this.loading = true
+        // console.log(formInline, 'formInline')
+        const res = await getPurchaseOrder(formInline)
+        console.log(res, '初始化')
+        this.total = res.data.total
+        this.tableData = res.data.list
+      } finally {
+        this.loading = false
+      }
+    },
+    // 确认收货
+    async confirmGoods(orderId) {
+      this.$confirm('此操作是将该商品确认收货，请确认是否收货?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        try {
+          let res = await getConfirm({ orderId, noticeId: 0 })
+          this.getAll(this.formInline)
+          if (res.code == "" || res.code == 200) {
+            this.$message({
+              type: 'success',
+              message: '确认收货成功!'
+            })
+            this.getAll(this.formInline)
+          }
+        } catch (error) {
+        }
+      })
+
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+@import url("../../../styles/elDialog.scss");
+
+.tab_show {
+  padding: 50px;
+  box-sizing: border-box;
+}
+</style>

src/views/threeSelection/selfOrder/pendDetails.vue

@@ -0,0 +1,454 @@
+<template>
+  <el-dialog :close-on-click-modal="false" title="详情" width="80%" :visible.sync="visible">
+    <div v-loading="loading" class="order_details">
+      <!--      <el-button icon="el-icon-close" class="close" @click="close" /> -->
+      <div class="cotent">
+        <div class="left_part">
+          <div class="order_info">
+            <h2>订单信息</h2>
+            <ul>
+              <li>
+                <p>
+                  <span>订单ID:</span>
+                  <span>{{ order.orderId }}</span>
+                </p>
+                <p>
+                  <span>支付单号:</span>
+                  <span>{{ order.transactionId }}</span>
+                </p>
+              </li>
+              <li>
+                <p>
+                  <span>订单编号:</span>
+                  <span>{{ order.orderFormid }}</span>
+                </p>
+              </li>
+              <li>
+                <p>
+                  <span>订单状态:</span>
+                  <span v-if="order.state == 1">待付款</span>
+                  <span v-else-if="order.state == 2">待发货</span>
+                  <span v-else-if="order.state == 3">待收货</span>
+                  <span v-else-if="order.state == 4">已完成</span>
+                  <span v-else-if="order.state == 5">交易关闭（已取消）</span>
+                  <span v-else-if="order.state == 6">待成团</span>
+                  <span v-else-if="order.state == 7">待售后</span>
+                  <span v-else-if="order.state == 8">待核销（未付款）</span>
+                  <span v-else-if="order.state == 9">待核销（已付款）</span>
+                  <span v-else-if="order.state == 10">已核销</span>
+                  <span v-else>--</span>
+                </p>
+                <p>
+                  <span>售后状态:</span>
+                  <span>{{ order.afterStateName }}</span>
+                </p>
+              </li>
+              <li>
+                <p>
+                  <span>支付方式:</span>
+                  <span v-if="order.paymentMode === 1">微信</span>
+                  <span v-else-if="order.paymentMode === 2">支付宝</span>
+                  <span v-else-if="order.paymentMode === 3">花呗分期</span>
+                  <span v-else-if="order.paymentMode === 4">通联支付</span>
+                  <span v-else-if="order.paymentMode === 5">平台余额支付</span>
+                  <span v-else-if="order.paymentMode === 6">商家余额支付</span>
+                  <span v-else-if="order.paymentMode === 7">佣金支付</span>
+                  <span v-else-if="order.paymentMode === 8">消费金支付</span>
+                  <span v-else-if="order.paymentMode === 9">惠市宝支付</span>
+                  <span v-else>--</span>
+                </p>
+                <p>
+                  <span>物流方案:</span>
+                  <span>{{ order.logisticsName }}</span>
+                </p>
+              </li>
+              <li>
+                <p>
+                  <span>创建时间:</span>
+                  <span>{{ order.createTime }}</span>
+                </p>
+                <p>
+                  <span>支付时间:</span>
+                  <span>{{ order.paymentTime }}</span>
+                </p>
+              </li>
+              <li>
+                <p>备注:{{ order.remark }}</p>
+              </li>
+            </ul>
+          </div>
+          <div class="goods_info">
+            <h2>商品信息</h2>
+            <div v-for="(item, index) in order.products" :key="index" class="goods_list">
+              <div class="good_price">
+                <ul>
+                  <li>
+                    <p>商品总价: ¥{{ order.orderPrice }}</p>
+                    <p>支付金额: ¥{{ order.price }}</p>
+                  </li>
+                  <li>
+                    <p>物流费用: ￥{{ order.logisticsPrice }}</p>
+                  </li>
+                </ul>
+              </div>
+              <div class="good_details">
+                <ul>
+                  <li>
+                    <img :src="item.image">
+                    <div class="details">
+                      <p>{{ item.productName }}</p>
+                      <p class="skuDetails">
+                        <span
+                          v-for="(detailsItem, detailsindex) in item.skuDetails" :key="detailsindex"
+                          class="detail_span"
+                        >
+                          {{ detailsItem.skuName }}: {{ detailsItem.skuValue }}
+                        </span>
+                      </p>
+                      <p>SKU: {{ item.skuId }}</p>
+                    </div>
+                  </li>
+                  <li class="cen">
+                    ¥{{ `${item.productPrice} * ${item.number}` }}
+                  </li>
+                  <li>
+                    {{ order.orderPrice }}
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="right_part">
+          <div class="pay_order_info">
+            <h2>下单人信息</h2>
+            <p>下单账户: {{ order.customerName }}</p>
+            <p>历史订单总数: {{ order.total }}个</p>
+            <p>下单备注: {{ order.remark }}</p>
+          </div>
+          <div class="take_goods_info">
+            <h2>收货信息</h2>
+            <p>姓名: {{ order.receiveName }}</p>
+            <p>手机号: {{ order.receivePhone }}</p>
+            <p>地址: {{ order.receiveAdress }} {{ order.address }}</p>
+          </div>
+        </div>
+      </div>
+      <div class="comfing">
+        <template v-if="order.state == 3">
+          <el-button type="primary" @click="confirmGoods">确认收货</el-button>
+        </template>
+      </div>
+      <!-- 发货 -->
+      <el-dialog :visible.sync="isVisible" title="发货" append-to-body :close-on-click-modal="false">
+        <el-form ref="sendGoodsForm" :model="form" :rules="rules" label-width="80px">
+          <el-form-item label="快递公司" prop="express">
+            <el-select v-model="form.express" filterable>
+              <el-option v-for="(item, index) in companyList" :key="index" :label="item.dictName" :value="item.dictId" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="快递单号" prop="deliverFormid">
+            <el-input
+              v-model="form.deliverFormid" maxlength="20"
+              oninput="value = value.replace(/[^\a-\z\A-\Z0-9]/g,'')"
+            />
+          </el-form-item>
+          <!-- <el-form-item label="快递公司编号" prop="shipperCode" v-if="false">
+            <el-input v-model="form.shipperCode" />
+            </el-form-item> -->
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="confirm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { orderGetById, orderGetSelect, orderDilevery } from '@/api/order'
+export default {
+  name: 'PendDetails',
+  data() {
+    return {
+      loading:false,
+      visible: false,
+      order: {},
+      form: {
+        orderId: this.orderId,
+        express: '',
+        deliverFormid: ''
+      },
+      isVisible: false,
+      rules: {
+        logisticsName: [
+          { required: false, message: '请输入快递公司名称', trigger: 'blur' }
+        ],
+        deliverFormid: [
+          { required: true, message: '请输入快递单号', trigger: 'blur' }
+        ],
+        express: [
+          { required: true, message: '请选择快递公司', trigger: 'blur' }
+        ]
+      },
+      companyList: [],
+      orderId: 0
+    }
+  },
+  methods: {
+    show(id) {
+      this.visible = true
+      this.orderId = id
+      this.form = {
+        orderId: this.orderId,
+        express: '',
+        deliverFormid: ''
+      }
+      this.getProductList()
+    },
+    async getProductList() {
+      try {
+        this.loading = true
+        const res = await orderGetById({ orderId: this.orderId })
+        this.order = res.data
+      } finally {
+        this.loading = false
+      }
+    },
+    close() {
+      this.visible = false
+    },
+    confirm() {
+      this.$refs.sendGoodsForm.validate((valid) => {
+        if (valid) {
+          this.form.orderId = this.orderId
+          orderDilevery(this.form).then((res) => {
+            if (res.code === '') {
+              this.$message({
+                message: '发货成功',
+                type: 'success'
+              })
+              this.isVisible = false
+              this.$router.go(-1)
+            }
+          })
+        }
+      })
+    },
+    cancel() {
+      this.isVisible = false
+    },
+    async getCompanyList() {
+      const res = await orderGetSelect()
+      if (res.code === '') {
+        this.companyList = res.data
+      }
+    },
+    send() {
+      this.getCompanyList()
+      this.isVisible = true
+    },
+    confirmGoods(){
+      this.$emit('confirmGoods',this.form.orderId)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import url("../../../styles/elDialog.scss");
+
+ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.order_details {
+	h3 {
+		// margin-left: 20px;
+		margin: 20px 0 20px 20px;
+		font-weight: 700;
+	}
+
+	.close {
+		// float: right;
+		position: absolute;
+		right: 20px;
+
+		&:hover {
+			cursor: pointer;
+		}
+	}
+
+	.cotent {
+		margin: 20px;
+		overflow: hidden;
+		font-size: 14px;
+
+		.goods_info,
+		.order_info,
+		.logistics_info,
+		.pay_order_info,
+		.take_goods_info {
+			background: #fff;
+			margin-bottom: 10px;
+			padding: 10px 20px;
+		}
+
+		.pay_order_info,
+		.take_goods_info {
+			p {
+				line-height: 30px;
+			}
+		}
+
+		h2 {
+			margin: 0;
+			font-weight: 400;
+			height: 40px;
+			line-height: 40px;
+			font-size: 18px;
+			text-align: -10px;
+		}
+
+		.left_part {
+			float: left;
+			width: calc(70% - 10px);
+			margin-right: 10px;
+
+			.order_info {
+				box-sizing: border-box;
+
+				ul {
+					padding: 10px 30px;
+
+					li {
+						overflow: hidden;
+
+						p {
+							width: 50%;
+							float: left;
+							font-size: 14px;
+							line-height: 30px;
+
+							span {
+								&:nth-child(2) {
+									margin-left: 10px;
+								}
+							}
+						}
+					}
+				}
+
+				.remarks {
+					margin-left: 30px !important;
+				}
+			}
+
+			.goods_info {
+				.goods_list {
+					padding: 15px;
+
+					.good_price {
+						ul {
+							li {
+								&:nth-child(1) {
+									p {
+										width: 50%;
+										float: left;
+									}
+								}
+
+								p {
+									line-height: 30px;
+								}
+							}
+						}
+
+						border-bottom: 1px gray solid;
+					}
+
+					.good_details {
+						ul {
+							display: flex;
+							margin-top: 20px;
+
+							li {
+								flex: 3;
+								display: flex;
+								justify-content: space-around;
+								align-items: center;
+
+								.details {
+									margin: 0 30px;
+									width: 180px;
+									line-height: 20px;
+
+									.skuDetails {
+										margin-top: 8px;
+										margin-bottom: 8px;
+										margin-right: 10px;
+										line-height: 1;
+										color: #9e9e9e;
+
+										.detail_span {
+											margin-right: 8px;
+										}
+									}
+								}
+
+								img {
+									width: 50px;
+									height: 50px;
+								}
+							}
+						}
+					}
+				}
+			}
+
+			.logistics_info {
+				.send_good {
+					display: block;
+					margin: 20px auto !important;
+
+					&:hover {
+						cursor: pointer;
+					}
+				}
+
+				.logistics_content {
+					padding: 0 10%;
+
+					.logistics_title {
+						span {
+							margin: 20px 0;
+							display: inline-block;
+							width: 45%;
+						}
+					}
+
+					.logistics_item {
+						span {
+							display: inline-block;
+							width: 30%;
+						}
+					}
+				}
+			}
+		}
+
+		.right_part {
+			float: left;
+			width: 30%;
+		}
+	}
+  .comfing{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>

src/views/threeSelection/shoppingCart/components/addressCom.vue

@@ -0,0 +1,313 @@
+<template>
+    <div class="addressCom">
+        <div class="btn-list">
+            <el-button type="primary" @click="newlyAddress">新增地址</el-button>
+        </div>
+        <div class="table">
+            <el-table border ref="singleTable" :data="tableData" highlight-current-row style="width: 100%"
+                @current-change="handleCurrentChange">
+                <el-table-column label="选中" width="70" align="center">
+                    <template slot-scope="scope">
+                        <div class="radio-box" :class="scope.row.receiveId == activeId ? 'active' : ''">
+                            <i class="el-icon-check"></i>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="地址ID" prop="receiveId" align="center">
+                </el-table-column>
+                <el-table-column label="地址标签" prop="label" align="center">
+                </el-table-column>
+                <el-table-column label="收货人姓名" prop="receiveName" align="center">
+                </el-table-column>
+                <el-table-column label="收货人电话号码" prop="receivePhone" align="center">
+                </el-table-column>
+                <el-table-column label="收货地址" prop="receiveAdress" align="center">
+                </el-table-column>
+                <el-table-column label="详细地址" prop="address" align="center">
+                </el-table-column>
+                <el-table-column label="操作" align="center">
+                    <template slot-scope="scope">
+                        <el-button type="text" @click="edit(scope.row)">编辑地址</el-button>
+                        <el-button type="text" @click="deleteClick(scope.row.receiveId)">删除地址</el-button>
+                    </template>
+                </el-table-column>
+
+            </el-table>
+        </div>
+        <div class="select-info">
+            <template v-if="Object.keys(addressObj).length > 0">
+                <el-descriptions title="选择的地址信息（用于购物车的发货）">
+                    <el-descriptions-item label="收货人姓名">{{ addressObj.receiveName }}</el-descriptions-item>
+                    <el-descriptions-item label="收货人电话号码">{{ addressObj.receivePhone }}</el-descriptions-item>
+                    <el-descriptions-item label="地址标签">
+                        <el-tag size="small">{{ addressObj.label }}</el-tag>
+                    </el-descriptions-item>
+                    <el-descriptions-item label="是否是默认地址">
+                        {{ addressObj.ifDefault == 1?'是':'否' }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="收货地址">{{ addressObj.receiveAdress }}{{ addressObj.address }}</el-descriptions-item>
+                </el-descriptions>
+            </template>
+            <template v-else>
+                <el-empty :image-size="200" description="暂未选择你的收货地址" :imageSize="100">
+                    <!-- <el-button type="primary">去选择收货地址</el-button> -->
+                </el-empty>
+            </template>
+        </div>
+        <el-dialog :close-on-click-modal="false" title="地址详情" width="50%" :visible.sync="visible" @close="closeDialog">
+            <el-form class="formList" ref="form" :rules="rules" :model="form" label-width="150px">
+                <el-form-item label="收货人姓名" prop="receiveName">
+                    <el-input v-model="form.receiveName"></el-input>
+                </el-form-item>
+
+                <el-form-item label="收货人电话号码" prop="receivePhone">
+                    <el-input v-model="form.receivePhone"></el-input>
+                </el-form-item>
+
+                <el-form-item label="地址标签" prop="label">
+                    <el-input v-model="form.label"></el-input>
+                </el-form-item>
+                <el-form-item label="收货地址" prop="receiveAdress">
+                    <el-cascader :props="props" v-model="form.receiveAdress"></el-cascader>
+                </el-form-item>
+                <el-form-item label="详细地址" prop="address">
+                    <el-input type="textarea" v-model="form.address"></el-input>
+                </el-form-item>
+                <el-form-item label="设置默认地址">
+                    <el-radio-group v-model="form.ifDefault">
+                        <el-radio :label="0">否</el-radio>
+                        <el-radio :label="1">是</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+            </el-form>
+            <div class="dialog-list">
+                <el-button type="info" plain @click="cancel">取消</el-button>
+                <el-button type="primary" @click="preser">保存</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { getAddress, searchParentId, addAddress, deleteAddress,editAddress } from '@/api/threeSelection'
+
+let resetForm = {
+    "receiveName": "",
+    "receivePhone": "",
+    "receiveAdress": "",
+    "areaId": "",
+    "communityId": "",
+    "address": "",
+    "label": "",
+    "ifDefault": 0
+}
+
+export default {
+    created() {
+        this.getList()
+    },
+    props: {
+        addressObj: {
+            type: Object,
+        },
+    },
+    data() {
+        return {
+            name: "dsadkajshdjkashdjkashjd",
+            queryData: {
+                page: 1,
+                pageSize: 10
+            },
+            tableData: [],
+            currentRow: null,
+            // 控制弹框
+            visible: false,
+            form: { ...resetForm },
+            props: {
+                lazy: true,
+                label: "name",
+                value: "name",
+                lazyLoad(node, resolve) {
+                    const { level, data } = node;
+                    if (level == 0) {
+                        searchParentId({ parentId: 0 }).then(res => {
+                            resolve(res.data)
+                        })
+                    } else {
+                        searchParentId({ parentId: data.id }).then(res => {
+                            resolve(res.data)
+                        })
+                    }
+                }
+            },
+            //  表单的正则校验
+            rules: {
+                receiveName: [{ required: true, message: '收货人姓名不能为空', trigger: 'blur' }],
+                receivePhone: [{ pattern: /^1[3456789]\d{9}$/, message: '收货的手机号码必须以1开头的11位手机号', trigger: 'blur' }, { required: true, message: '收货的手机号码不能为空', trigger: 'blur' }],
+                label: [{ required: true, message: '地址标签不能为空', trigger: 'blur' }, { min: 1, max: 5, message: '地址标签长度必须在 1 到 5 个字符', trigger: 'blur' }],
+                receiveAdress: [{ required: true, message: '收货地址不能为空', trigger: 'blur' }],
+                address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
+            },
+            //  判断是编辑还是新增
+            isEdit: 0, // 0表示新增 1表示编辑
+            //  列表地址的激活态
+            activeId: ''
+        }
+    },
+    methods: {
+        //  单选地址
+        handleCurrentChange(val) {
+            this.activeId = val.receiveId;
+            this.$emit('selectAddress', val)
+        },
+        async getList() {
+            let res = await getAddress(this.queryData)
+            this.tableData = res.data.list
+            res.data.list.forEach(item => {
+                if (item.ifDefault == 1) {
+                    this.activeId = item?.receiveId
+                    let obj = {...item}
+                    obj.receiveAdress.join('-')
+                    this.$emit('selectAddress', obj)
+                }
+            })
+        },
+        //  新增地址
+        newlyAddress() {
+            this.visible = true
+            this.isEdit = 0
+        },
+        // 保存按钮
+        preser() {
+            this.$refs['form'].validate((valid) => {
+                if (valid) {
+                    this.preserAddress()
+                } else {
+                    return false;
+                }
+            });
+        },
+        //  删除地址
+        async deleteClick(id) {
+            this.$confirm('是否将该地址从你的地址列表中删除?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(async () => {
+                let res = await deleteAddress({ receiveId: id })
+                if (res.code == "") {
+                    this.$message({
+                        type: 'success',
+                        message: '删除成功!'
+                    });
+                }
+            })
+
+        },
+        // 编辑地址
+        async edit(row) {
+            this.form = row
+            this.isEdit = 1
+            this.form.receiveAdress = row.receiveAdress.split('-')
+            this.visible = true
+        },
+        //  添加地址
+        async preserAddress() {
+            //  走到这里表示通过了验证
+            let obj = { ...this.form }
+            // 对数据进行处理
+            obj.receiveAdress = obj.receiveAdress.join('-')
+            let res = null
+            if (this.isEdit == 0) {
+                res = await addAddress(obj);
+
+            } else if (this.isEdit == 1) {
+                res = await editAddress(obj);
+            }
+            if (res.code == "") {
+                this.$message({
+                    message: '更新添加地址成功',
+                    type: 'success'
+                })
+                console.log("走到这里来了");
+                this.visible = false
+                this.getList()
+            }
+
+        },
+        // 取消按钮
+        cancel() {
+            this.visible = false
+        },
+        // 关闭弹框的回调
+        closeDialog() {
+            this.form = { ...resetForm }
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.addressCom {
+    .btn-list {
+        margin: 20px 0px;
+    }
+
+    .radio-box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 16px;
+        width: 20px;
+        height: 20px;
+        margin: 0 auto;
+        border: 1px solid #000;
+        color: #FFFFFF
+    }
+
+    .active {
+        background-color: #409eff;
+        color: #FFFFFF;
+    }
+
+    .formList {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    ::v-deep .el-form-item {
+        width: 50%;
+    }
+
+    .dialog-list {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 20px 0 10px;
+        gap: 20px;
+    }
+
+    ::v-deep .el-cascader {
+        width: 100%;
+    }
+
+    ::v-deep .el-table__body tr.current-row>td.el-table__cell,
+    .el-table__body tr.selection-row>td.el-table__cell {
+        background-color: #fffc86;
+    }
+}
+
+.select-info {
+    margin: 30px 0;
+
+    ::v-deep .el-descriptions__body {
+        padding: 20px;
+        box-sizing: border-box;
+    }
+
+    ::v-deep .el-descriptions-item {
+        margin-top: 20px;
+    }
+}
+</style>

src/views/threeSelection/shoppingCart/index.vue

@@ -0,0 +1,472 @@
+<template>
+  <div class="shoppingCart">
+    <el-tabs v-model="listIdx">
+      <el-tab-pane label="购物车列表" name="1">
+        <template>
+          <div class="top">
+            <div class="btn-list">
+              <el-button type="primary" @click="openBox"
+                >删除所选商品</el-button
+              >
+              <el-button type="info" @click="removeCart">清空购物车</el-button>
+            </div>
+            <div class="select-info">
+            <template v-if="Object.keys(addressObj).length > 0">
+              <el-descriptions title="选择的地址信息（用于购物车的发货）">
+                <el-descriptions-item label="收货人姓名">{{
+                  addressObj.receiveName
+                }}</el-descriptions-item>
+                <el-descriptions-item label="收货人电话号码">{{
+                  addressObj.receivePhone
+                }}</el-descriptions-item>
+                <el-descriptions-item label="地址标签">
+                  <el-tag size="small">{{ addressObj.label }}</el-tag>
+                </el-descriptions-item>
+                <el-descriptions-item label="是否是默认地址">
+                  {{ addressObj.ifDefault == 1 ? "是" : "否" }}
+                </el-descriptions-item>
+                <el-descriptions-item label="收货地址"
+                  >{{ addressObj.receiveAdress
+                  }}{{ addressObj.address }}</el-descriptions-item
+                >
+              </el-descriptions>
+            </template>
+            <template v-else>
+              <el-empty
+                :image-size="50"
+                description="暂未选择你的收货地址"
+              >
+                <el-button type="primary" @click="gpAddress"
+                  >去选择收货地址</el-button
+                >
+              </el-empty>
+            </template>
+          </div>
+          </div>
+
+          <el-table
+            v-loading="loading"
+            ref="multipleTable"
+            border
+            :data="tableData"
+            tooltip-effect="dark"
+            style="width: 100%"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column type="selection" width="55" align="center">
+            </el-table-column>
+            <el-table-column
+              label="商品名称"
+              align="center"
+              prop="productName"
+              width="200"
+            ></el-table-column>
+            <el-table-column label="商品图片" align="center">
+              <template slot-scope="scope">
+                <img :src="scope.row.image" style="width: 50px; height: 50px" />
+              </template>
+            </el-table-column>
+            <el-table-column label="商品价格" align="center">
+              <template slot-scope="scope">
+                ￥{{ scope.row.price || 0 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="商品库存" prop="stockNumber" align="center">
+            </el-table-column>
+
+            <el-table-column label="商品数量" align="center">
+              <template #header="scope">
+                <div class="number-box">
+                  <p>商品数量</p>
+                  <span style="color: red; font-size: 12px"
+                    >最大商品数量不得超过商品库存且最小数量为1</span
+                  >
+                </div>
+              </template>
+              <template slot-scope="scope">
+                <el-input-number
+                  size="mini"
+                  :min="1"
+                  :max="scope.row.stockNumber"
+                  v-model="scope.row.number"
+                  @change="changeNum(scope.row)"
+                ></el-input-number>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="商品规格"
+              align="center"
+              prop="value"
+            ></el-table-column>
+            <el-table-column label="该商品总价" align="center">
+              <template slot-scope="scope">
+                ￥{{ scope.row.price * scope.row.number }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center">
+              <template slot-scope="scope">
+                <el-button type="text" @click="clearnShop(scope.row)"
+                  >删除该商品</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="settlement">
+              <div class="txt-price">
+                <p>总价：￥{{ allPrice }}</p>
+                <p>剩余代金券金额：{{ voucherNum.toFixed(2) }}</p>
+              </div>
+
+              <el-button type="danger" @click="settleShop">结算商品</el-button>
+            </div>
+         
+        </template>
+      </el-tab-pane>
+      <el-tab-pane label="地址列表" name="2">
+        <AddressCom :addressObj="addressObj" @selectAddress="selectAddress" />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import {
+  getShopCarList,
+  updateShopCar,
+  deleteShopCar,
+  clearShopCar,
+  getSettlement,
+  requertVoucher,
+  shopSysGetById,
+  voucherPay,
+} from "@/api/threeSelection";
+import { getShopId } from "@/utils/auth";
+import AddressCom from "./components/addressCom.vue";
+export default {
+  created() {
+    this.getList();
+    this.getVoucher();
+    this.getShopInfo();
+    //  拿到商铺 id
+    // this.settlementQuery.shopId = getShopId();
+  },
+  components: {
+    AddressCom,
+  },
+  data() {
+    return {
+      //  传递给 地址组件的数据
+      addressObj: {},
+      //  tab 切换
+      listIdx: "1",
+      tableData: [],
+      multipleSelection: [],
+      //  加载状态
+      loading: false,
+      settlementQuery: {
+        type: "1",
+        shopId: null,
+        shops: [],
+        receiveId: "",
+        voucherTotalAll: "",
+        isVoucher: false,
+        voucherId: "",
+      },
+      //  代金券数量
+      voucherNum: 0,
+      //  店铺信息
+      shopInfo: {},
+    };
+  },
+  computed: {
+    allPrice() {
+      let price = this.multipleSelection.reduce((prev, item) => {
+        prev = item.price * item.number;
+        return prev;
+      }, 0);
+      return price.toFixed(2);
+    },
+  },
+  methods: {
+    //  选中的地址
+    selectAddress(val) {
+      this.addressObj = val;
+    },
+    async getList() {
+      this.loading = true;
+      try {
+        let res = await getShopCarList();
+        this.tableData = res.data[0]?.skus;
+      } finally {
+        this.loading = false;
+      }
+    },
+    // 请求店铺信息
+    async getShopInfo() {
+      let res = await shopSysGetById({});
+      this.shopInfo = res.data;
+    },
+    //  获取代金券数量
+    async getVoucher() {
+      let res = await requertVoucher();
+      // console.log(res);
+      if (res.code == "") {
+        this.voucherNum = res.data;
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    //  修改商品数量
+    async changeNum(item) {
+      let { skuId, number } = item;
+      let res = await updateShopCar({ skuId, number });
+      if (res.code == "") {
+        this.$message({
+          message: "修改数量成功",
+          type: "success",
+        });
+      }
+      // console.log(res);
+    },
+    //  删除所选商品
+    async delShopCar() {
+      if (this.multipleSelection.length <= 0) {
+        this.$message({
+          message: "请选择你要删除购物车的商品",
+          type: "warning",
+        });
+        return;
+      }
+      let skuIdList = this.multipleSelection.map((item) => {
+        return item.skuId;
+      });
+      let res = await deleteShopCar({ ids: skuIdList });
+      if (res.code == "") {
+        this.$message({
+          message: "删除商品成功",
+          type: "success",
+        });
+        this.getList();
+      }
+    },
+    openBox() {
+      this.$confirm("请确定是否需要删除购物车中所选择的商品？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        this.delShopCar();
+      });
+    },
+    //  删除所选商品
+    async clearnShop(row) {
+      this.$confirm("请确定是否需要该商品？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(async () => {
+        let res = await deleteShopCar({ ids: [row.skuId] });
+        if (res.code == "") {
+          this.$message({
+            message: "删除商品成功",
+            type: "success",
+          });
+          this.getList();
+        }
+      });
+    },
+    //  清空购物车
+    removeCart() {
+      this.$confirm("此操作将清空购物车, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          let res = await clearShopCar();
+          if (res.code == "") {
+            this.$message({
+              message: "清空成功",
+              type: "success",
+            });
+            this.getList();
+          }
+        })
+        .catch(() => {});
+    },
+    // 结算
+    async settleShop() {
+      if (this.multipleSelection.length <= 0) {
+        this.$message({
+          message: "请选择要结算的商品",
+          type: "warning",
+        });
+        return;
+      }
+      if (!this.addressObj.receiveId) {
+        this.$message({
+          message: "请选择收货地址",
+          type: "warning",
+        });
+        return;
+      }
+      this.settlementQuery.shops = this.multipleSelection.reduce(
+        (prev, item) => {
+          console.log(item.shopId);
+          let obj = {
+            ifWork: 0,
+            shopId: item.shopId,
+            shopName: item.shopName,
+            shopDiscountId: "",
+            shopSeckillId: "",
+            skus: [
+              {
+                productId: item.productId,
+                skuId: item.skuId,
+                productName: item.productName,
+                image: item.image,
+                price: item.price,
+                number: item.number,
+                weight: item.weight,
+                SKU: "",
+                total: item.total,
+                ifLogistics: item.ifLogistics,
+              },
+            ],
+          };
+          prev.push(obj);
+          return prev;
+        },
+        []
+      );
+      this.settlementQuery.shopId = this.multipleSelection[0].shopId
+      console.log(this.settlementQuery);
+      let res = await getSettlement(this.settlementQuery);
+      // console.log("到这里了");
+      // let res2 = await voucherPay(res.data)
+      this.$confirm("是否使用代金券支付该产品, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.pay(res.data);
+        })
+        .catch(() => {});
+    },
+    //  下单
+    async pay(data) {
+    // console.log(data);
+    // return
+      let skusData = data.shops.reduce((prev, item) => {
+        prev.push(...item.skus);
+        return prev;
+      }, []);
+
+      let queryData = {
+        procureType: 1,
+        shopDiscountId: null,
+        collageId: 0,
+        type: "",
+        shopGroupWorkId: 0,
+        receiveId: null,
+        areaId: 0,
+        communityId: "",
+        couponId: 0,
+        remark: "",
+        discountPrice: 0,
+        shopSeckillId: null,
+        voucherTotalAll: 0,
+        isVoucher: false,
+        voucherId: 0,
+        communityPhone: "",
+        franchiseeRule: [],
+        paymentMode: 4,
+        _isShowToast: false,
+        shops: [
+          {
+            shopId: 186,
+            distribution: {
+              distributionPrice: 0,
+              distributionName: "结算类型-拼团商品单独立即购买",
+            },
+            skus: [],
+          },
+        ],
+      };
+      queryData.receiveId = this.addressObj.receiveId;
+      queryData.shops[0].skus = skusData;
+      let res = await voucherPay(queryData);
+      if (res.code == "") {
+        this.$message({
+          message: "支付成功",
+          type: "success",
+        });
+        this.getVoucher();
+        this.getList();
+      }
+    },
+    //  去选择收货地址
+    gpAddress() {
+      this.listIdx = "2";
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.shoppingCart {
+  padding: 50px;
+  .top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .btn-list {
+    margin: 20px 0;
+    flex:1;
+  }
+  .select-info {
+  margin: 30px 0;
+  flex:2;
+
+  ::v-deep .el-descriptions__body {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+
+  ::v-deep .el-descriptions-item {
+    margin-top: 20px;
+  }
+}
+
+  
+  }
+  .settlement {
+    margin: 30px 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 30px;
+    box-sizing: border-box;
+
+    .txt-price {
+      p {
+        font-size: 32px;
+        color: red;
+        font-weight: 700;
+        margin-top: 10px;
+      }
+    }
+  }
+
+}
+
+.number-box {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 5px;
+}
+
+</style>

vue.config.js

@@ -40,8 +40,8 @@ module.exports = {
     },
     proxy: {
       '/businessapi': {
-        // target: 'http://192.168.0.91:9104',
-        target: 'https://nsbusinessapitest.tuanfengkeji.cn',
+        target: 'http://192.168.0.91:9104',
+        // target: 'https://nsbusinessapitest.tuanfengkeji.cn',
         // target: 'https://nsbusinessapi.tuanfengkeji.cn',
         changeOrigin: true,
         pathRewrite: {