<template>
  <view class="select_warehouse">
    <view class="wrapper flex_a_c_j_sb">
      <block v-for="item in goodsData" :key="item.name">
        <view class="select_item select_item1" @click="navigato(item.type)" :class="'select_item'+item.type">
          <view class="title">{{ item.name }}</view>
          <!-- <view class="iconfont icon-jiantou"></view> -->
          <image class="img" :src="item.src"></image>
        </view>
      </block>
    </view>
    <view v-if="pageType==1" class="list-box-put">
      <view class="item" v-for="(item, index) in goods" :key="index">
        <view class="top">
          <view class="pictrue">
            <!-- <easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage> -->
            <image class="img" :src="item.image||defaultImageSRC" :lazy-load="true" @click="clickImg(item, 1, 0)"></image>
            <view class="swiper">
              <image :src="item.slider_image[0]||defaultImageSRC" :lazy-load="true" @click="clickImg(item, 2, 0)"></image>
              <image :src="item.slider_image[1]||defaultImageSRC" :lazy-load="true" @click="clickImg(item, 2, 1)"></image>
              <image :src="item.slider_image[2]||defaultImageSRC" :lazy-load="true" @click="clickImg(item, 2, 2)"></image>
            </view>
            <view v-if="item.update" class="btn" @click="updateItemImage(item)">保存修改</view>
          </view>
          <view class="text-info">
            <view class="title">
              <view class="text_item_title">名称:</view>
              <view style="color: #419aff;">{{ item.store_name }}</view>
            </view>
            <view class="text">
              <view class="text_item">
                <view class="text_item_title">规格: </view>
                <view v-if="item.spec" v-html="item.spec"></view>
                <view v-else>无</view>
              </view>
              <view class="text_item">
                <view class="text_item_title">参考价格: </view>
                <view>{{item.price||'0.00'}}(元)</view>
              </view>
            </view>
            <view class="text">
              <view class="text_item">
                <view class="text_item_title">品牌: </view>
                <view>{{item.trademark||'无'}}</view>
              </view>
              <view class="text_item">
                <view class="text_item_title">分类: </view>
                <view>{{item.goods_type||'无'}}</view>
              </view>
            </view>
            <view class="text">
              <view class="text_item">
                <view class="text_item_title">厂商: </view>
                <view>{{item.manu_name||'无'}}</view>
              </view>
            </view>
            <view class="text">
              <view class="text_item">
                <view class="text_item_title">厂商地址: </view>
                <view>{{item.manu_address||'无'}}</view>
              </view>
            </view>
            <view class="text">
              <view class="text_item">
                <view class="text_item_title">备注: </view>
                <u-read-more v-if="item.note" class="more" showHeight="50" :toggle="true" :fontSize="12"
                  :shadowStyle="shadowStyle" textIndent="0em" closeText="展开">
                  <text style="font-size: 24rpx;color: #333;" v-html="item.note"></text>
                </u-read-more>
                <text style="font-size: 24rpx;color: #333;" v-else>无</text>
              </view>
            </view>

          </view>
        </view>
        <u-line></u-line>
        <view class="bottom">
          <view></view>
          <view class="add-btn" @click="addGoods(item)">加入店铺</view>
        </view>
      </view>
    </view>
    <view v-if="pageType==2" class="photo-box">
      <view class="card">
        <view class="card-head">
          <view class="text">请选择产品图片:</view>
          <view>刷新: 3次</view>
        </view>
        <view class="img-list">
          <image class="img" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/saoma.png" v-for="item in 6" :key="item"></image>
        </view>
      </view>
      <view class="card">
        <view class="card-head">
          <view class="text">请选择产品图片:</view>
        </view>
        <view class="img-list img-list2">
          <image class="img" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/saoma.png" v-for="item in 2" :key="item"></image>
        </view>
      </view>
      <view class="card">
        <view class="card-head">
          <view class="text">请选择产品图片:</view>
        </view>
        <view class="img-list">
          <image class="img" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/saoma.png" v-for="item in 3" :key="item"></image>
        </view>
      </view>
    </view>
    
    
    <u-popup :show="editGoodsShow" @close="editGoodsClose" :round="18" mode="center">
      <view class="edit_goods_box">
        <view class="edit_name flex_a_c edit_name_no">
          <text>商品条码：</text><input type="text" disabled placeholder="请输入商品条码" v-model="editGoodsCode">
        </view>
        <view class="edit_name flex_a_c edit_name_no">
          <text>商品名称：</text> <input type="text" disabled placeholder="请输入商品名称" v-model="editGoodsName">
        </view>
        <view class="edit_name flex_a_c">
          编辑商品价格：<input type="text" placeholder="请输入商品名称" v-model="editGoodsPrice">
        </view>
        <view class="edit_store flex_a_c">
          编辑商品库存：<input type="text" placeholder="请输入库存" v-model="editGoodsStore">
        </view>
        <view class="edit_goods_btn">
          <u-button type="error" text="取消" class="edit_btn" @click="editGoodsShow=false">
          </u-button>
          <u-button type="primary" text="保存" class="edit_btn" @click="editGoodsClose">
          </u-button>
        </view>
      </view>
    </u-popup>
    <!-- <u-modal :show="addGoodsShow" content='是否添加到你的仓库中?' @cancel="addGoodsclose()" @close="addGoodsclose()"
			@confirm="addGoodsopen()" :closeOnClickOverlay="true" :showCancelButton="true"></u-modal> -->
    <u-popup :show="addGoodsShow" @close="searchGoodsClose" :round="18" mode="center">
      <view class="search_goods_box">
        <view style="text-align: center;font-weight: bold;">完善商品信息</view>
        <view style="display: flex;align-items: center;margin-top: 16rpx;">
          <view style="margin-right: 20rpx;">名称:</view>
          <input style="flex: 1;" type="text" v-model="putGoods.store_name" class="putGoods" placeholder="请输入商品名称">
        </view>
        <view style="display: flex;align-items: center;margin-top: 16rpx;">
          <view style="margin-right: 20rpx;">价格:</view>
          <input style="flex: 1;" type="text" v-model="putGoods.price" class="putGoods" :placeholder="`请输入商品价格`">
        </view>
        <view style="display: flex;align-items: center;margin-top: 16rpx;">
          <view style="margin-right: 20rpx;">库存:</view>
          <input style="flex: 1;" type="text" v-model="putGoods.stock" class="putGoods" placeholder="请输入商品库存">
        </view>
        <view v-if="showPutGoodsInput.spec" style="display: flex;align-items: center;margin-top: 16rpx;">
          <view style="margin-right: 20rpx;">规格:</view>
          <input style="flex: 1;" type="text" v-model="putGoods.spec" class="putGoods" placeholder="请输入商品规格">
        </view>
        <view v-if="showPutGoodsInput.trademark" style="display: flex;align-items: center;margin-top: 16rpx;">
          <view style="margin-right: 20rpx;">品牌:</view>
          <input style="flex: 1;" type="text" v-model="putGoods.trademark" class="putGoods" placeholder="请输入商品品牌">
        </view>
        <view class="search_goods_btn">
          <view class="cancel edit_btn" @click="addGoodsclose()">取消</view>
          <view class="search edit_btn" @click="$u.throttle(addGoodsopen, 1500)">确定</view>
        </view>
      </view>
    </u-popup>
    <u-popup :show="searchGoodsShow" @close="searchGoodsClose" :round="18" mode="center">
      <view class="search_goods_box">
        <input type="text" v-model="searchGoodsName" class="searchGoods" placeholder="请输入商品名称">
        <view class="search_goods_btn">
          <view class="cancel edit_btn" @click="searchGoodsShow=false">取消</view>
          <view class="search edit_btn" @click="searchGoodsClose">搜索</view>
        </view>
      </view>
    </u-popup>
    <u-modal :show="showModel" title="提示" content="没有找到该商品,是否手动添加?" show-cancel-button @cancel="showModel = false" @confirm="navToAdd"></u-modal>

  </view>
</template>

<script>
  import {
  	TOKENNAME,
  	HTTP_REQUEST_URL
  } from '@/config/app.js';
  import {
    productCreate
  } from '@/api/product.js'
  import {
    microSeachBarCode,
    microEadtProduct,
    microProductAdd,
    microProductEdit
  } from '@/api/store.js'
  import {
    seachBarCodeAPI,
    micro_product_import
  } from '@/api/api.js'
  import {
    chooseImage,
    Toast,
    getStorage,
    navigateTo
  } from '@/libs/uniApi'
  export default {
    data() {
      return {
        pageType: 1, // 当前页面显示的类型, 1为商品列表, 2为手动选择图片进行添加
        goodsData: [
          {
            name: '搜索名称入库',
            type: 1,
            // src: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/mingcheng.png'
            src: '/static/images/SMRK/name.png'
          },
          {
            name: '标品扫码入库',
            type: 2,
            // src: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/saoma.png'
            src: '/static/images/SMRK/bar.png'
          },
          {
            name: '非标手动入库',
            type: 3,
            // src: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/saoma.png'
            src: '/static/images/SMRK/img.png'
          }
        ],
        shadowStyle: {
          backgroundImage: "none",
          paddingTop: "0",
          marginTop: "0",
        },
        defaultImageSRC: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/uploads/20230130/00ebcfdf75684f5494c0193075055d1.png',
        product_id: '',
        editGoodsCode: '',
        editGoodsName: '',
        editGoodsPrice: '',
        editGoodsStore: '',
        editGoodsShow: false, // 扫码修改商品信息
        mer_id: 0,
        searchGoodsShow: false,
        searchGoodsName: '',
        showModel: false,
        showModelCode: '',
        goods: [
           // {
           //                  "id": 35,
           //                                 "store_name": "DT15150（箱装）心相印茶语丝享系列150抽24包装三层塑装纸面巾（电商）",
           //                                 "bar_code": "6903244675314",
           //                                 "manu_address": "",
           //                                 "price": "0.00",
           //                                 "stock": 9999999,
           //                                 "image": "https://lihai001.oss-cn-chengdu.aliyuncs.com/uploads/20230130/00ebcfdf75684f5494c0193075055d1.png",
           //                                 "slider_image": [],
           //                                 "spec": "1包",
           //                                 "trademark": "心相印",
           //                                 "manu_name": null,
           //                                 "note": "备注：经查，该厂商识别代码已在中国物品编码中心注册，但编码信息未按规定通报"
           //             },

        ],
        putGoods: { // 加入店铺信息
          id: '',
          price: '',
          stock: '',
          store_name: '',
          images: [],
        },
        uploadImgInfo:{ // 上传图片类型信息
          id: '',
          type: 1,
          index: 0
        },
        uploadImgIdList: new Map(),//用于存储照片是否原本就存在,原本就有的照片不可更改
        showPutGoodsInput: {
          spec: false,
          trademark: false,
        },
        item: [],
        addGoodsShow: false,
      }
    },
    onLoad(e) {
      this.mer_id = e.mer_id
    },
    onShow() {

    },
    methods: {
      addGoods(item) {
        if(this.isNullImage(item.image)||
        ( this.isNullImage(item.slider_image[0]) && this.isNullImage(item.slider_image[1]) && this.isNullImage(item.slider_image[2]) )){
           return Toast('请先上传商品图片后再加入店铺');
        }
        if(item.update) return Toast('请保存修改后再添加');
        this.putGoods.id = item.id;
        this.putGoods.price = '';
        this.putGoods.stock = '';
        this.putGoods.store_name = item.store_name;
        Object.keys(this.showPutGoodsInput).forEach((key)=>{
          if(item[key]==null||item[key]==undefined||item[key]==''){
            this.showPutGoodsInput[key] = true;
            this.putGoods[key] = '';
          }
          else {
            this.showPutGoodsInput[key]=false;
            this.putGoods[key] = item[key];
          }
        })

        this.addGoodsShow = true
        this.item = item
      },
      isNullImage(src){
        let flag = false;
        if(src==this.defaultImageSRC||!src)flag =true;
        return flag;
      },
      clickImg(data, type, index){
        if(!data.update&&!this.uploadImgIdList.get(data.id)){
          let arr = [];
          if(this.isNullImage(data.image))arr.push(-1);
          if(this.isNullImage(data.slider_image[0]))arr.push(0);
          if(this.isNullImage(data.slider_image[1]))arr.push(1);
          if(this.isNullImage(data.slider_image[2]))arr.push(2);
          this.uploadImgIdList.set(data.id, arr)
        }
        let obj = this.uploadImgIdList.get(data.id) || [];
        if(type==1&&!obj.includes(-1)) return ;
        if(type==2&&!obj.includes(index)) return ;
        this.uploadImgInfo.id = data.id;
        this.uploadImgInfo.type = type;
        this.uploadImgInfo.index = index;
        if(data.image==this.defaultImageSRC||(type==2&&this.isNullImage(data.slider_image[index]))){
          this.chooseImg()
        }else if(data.update){
          this.chooseImg()
        }
      },
      chooseImg(){
        let that = this;
        uni.chooseImage({
        	count: 1,
        	sizeType: ['original'],
          crop:{
            width: 1024,
            height: 1024,
            resize: false
          },
        	success: (res) => {
        		let tempFilePaths = res.tempFilePaths[0]
        		//#ifdef APP-PLUS
        		if (uni.getSystemInfoSync().platform == 'ios') {
        			that.doUpload(tempFilePaths)
        		} else {
        			let size = res.tempFiles[0].size / 1024
        			if (size >= 1) {
        				uni.compressImage({
        					src: tempFilePaths,
        					quality: 80, // 仅对jpg有效
        					success: res => {
                    that.doUpload(res.tempFilePath)
        					},
        					fail: err => {
                    that.doUpload(tempFilePaths)
        					}
        				})
        			} else {
                that.doUpload(tempFilePaths)
        			}
        		}
        		//#endif
        		//#ifndef APP-PLUS
            that.doUpload(tempFilePaths)
        		//#endif
        	}
        })
      },
      doUpload(rsp) {
      	let that = this
      	uni.showLoading({
      		title: '上传中',
      		mask: true
      	})
      	uni.uploadFile({
      		url: HTTP_REQUEST_URL + '/api/upload/image/field',
      		filePath: rsp,
      		name: 'field',
      		header: {
      			// #ifdef MP
      			"Content-Type": "multipart/form-data",
      			// #endif
      			[TOKENNAME]: 'Bearer ' + that.$store.state.app.token
      		},
      		success: (uploadFileRes) => {
      			let imgData = JSON.parse(uploadFileRes.data)
            if(this.uploadImgInfo.type==1){
              this.goods.forEach(item=>{
                if(item.id==this.uploadImgInfo.id){
                  item.image = imgData.data.path;
                  item.update = true;
                }
              })
              this.putGoods.image = imgData.data.path;
            }else if(this.uploadImgInfo.type==2){
              this.goods = this.goods.map(item=>{
                if(item.id==this.uploadImgInfo.id){
                  item.slider_image[this.uploadImgInfo.index] = imgData.data.path;
                  item.update = true;
                }
                return item;
              })
              this.putGoods.slider_image[this.uploadImgInfo.index] = imgData.data.path;
            }
      		},
      		complete(res) {
      			let data = JSON.parse(res.data)
      			that.$util.Tips({
      				title: data.message
      			});
      		}
      	});
      },
      // 更新图片
      updateItemImage(item){
        microProductEdit({
          id: item.id,
          image: item.image,
          slider_image: item.slider_image.join(',')
        }).then((res)=>{
          this.goods = this.goods.map(e=>{
            if(e.id==item.id)e.update = false;
            return e;
          })
          Toast('更新成功')
        }).catch(err=>{
          Toast(err||'更新失败')
        })
      },
      // 加入店铺
      async addGoodsopen() {
        let good = this.goods.find(item=>item.id==this.putGoods.id);
        if (this.putGoods.id&&good) {
          // 判断商品是否需要审核
          let auditFlag = false;
          Object.keys(this.showPutGoodsInput).forEach((key)=>{
            if(this.showPutGoodsInput[key]){
              auditFlag = true;
            }
          })
          if(auditFlag){
            let obj = Object.assign({}, good, this.putGoods);
            obj.product_library_id = obj.id;
            obj.slider_image = obj.slider_image.join(',')
            // 拷贝并且合并对象, 防止出现浅拷贝
            microProductAdd(obj).then(e => {
                console.log(e);
              if (e.status == 200) {
                Toast(e.message)
                this.goods = this.goods.filter(item => {
                  return item.id != this.putGoods.id
                })
                this.addGoodsShow = false;
              } else {
                Toast(e.message)
                this.addGoodsShow = false;
              }
            }).catch(err => {
              Toast(err || '导入出错');
              console.log('导入出错', err);
              this.addGoodsShow = false;
            });
          }
          else micro_product_import(this.putGoods).then(e => {
            console.log('导入错误', e);
            if (e.status == 200) {
              Toast(e.data.msg)
              this.goods = this.goods.filter(item => {
                return item.id != this.putGoods.id
              })
              this.addGoodsShow = false;
            } else {
              // console.log(e);
              Toast(e.message)
              this.addGoodsShow = false
            }
          }).catch(err => {
            Toast(err || '导入出错');
            console.log('导入出错', err);
            this.addGoodsShow = false
          })
        }
        this.item = []
      },
      addGoodsclose() {
        this.addGoodsShow = false
      },
      openSearch() {},
      async searchGoodsClose() {
        if (this.searchGoodsName == '') {
          this.searchGoodsShow = false
          this.$nextTick(() => {
            Toast('请输入商品名称')
          })
          return;
        }
        this.searchGoodsShow = false
        await this.$nextTick();
        uni.showLoading({
          title: '加载中',
          mask: true
        })
        const rq = {
          mer_id: this.mer_id,
          name: this.searchGoodsName
        }
        const {
          data
        } = await seachBarCodeAPI(rq).catch(err => Toast(err))
        uni.hideLoading()
        if (data.list.length < 1) {
          this.searchGoodsShow = false
          Toast("暂无搜索商品,请添加！")
          setTimeout(() => {
            uni.navigateTo({
              url: `/pages/product/addGoods/index?mer_id=${rq.mer_id}`
            })
          }, 2000)
          return
        }
        this.goods = data.list
      },
      async editGoodsClose() {
        const data = {
          price: this.editGoodsPrice,
          stock: this.editGoodsStore,
          id: this.product_id
        }
        try {
          const res = await microEadtProduct(data)
          Toast("更新成功")
          this.editGoodsShow = false
        } catch (e) {
          Toast("更新失败")
          this.editGoodsShow = false
        }
      },
      navigato(type) {
        if (type === 1) {
          this.searchGoodsName = '';
          this.searchGoodsShow = true;
          this.pageType = 1;
        } else if(type==2) {
          this.scanCode();
          this.pageType = 1;
        }else {
          // this.photograph();
          // this.pageType = 2;
          this.jumpAddGoods();
        }
      },
      // 扫码
      scanCode() {
        const self = this
        uni.scanCode({
          scanType: ["qrCode", "barCode", "datamatrix", "pdf417"],
          success(res) {
            self.seachBarCode(res.result)
          },
          fail(res) {
            // console.log(res);
          },
        })
      },
      isStartsWith6Or06(str) {
        const regex = /^(6|06)/;
        return regex.test(str);
      },
      async seachBarCode(code) {
        if(code.length<12){
          return Toast('条形码长度不正确, 请重试!')
        }
        this.showModelCode = code;
        console.log('扫码的值', code);
        if(!this.isStartsWith6Or06(code)) {
          Toast('暂不支持进口商品!');
          this.$u.sleep(1200).then(()=>{
            this.showModel = true;
          })
          return ;
        }
        uni.showLoading({
          title: '加载中',
          mask: true
        })
        await seachBarCodeAPI({
          code: code,
          mer_id: this.mer_id
        }).then(res => {
          console.log(res);
          uni.hideLoading()
          if (!res.data) {
            uni.showToast({
              title: res.message,
              duration: 3000,
              icon: 'none',
            });
          } else {
            if (res.data.list.length < 1) {
              this.showModel = true;
              return
            }
            this.goods = JSON.parse(JSON.stringify(res.data.list));
            // if (res.data.list[0] && res.data.list[0].store_name == '') {
            //   this.goods = [];
            //   Toast('名字为空')
            // } else this.goods = JSON.parse(JSON.stringify(res.data.list));
          }
        }).catch((err) => {
          console.log('错误', err);
          Toast(err);
          this.$u.sleep(1200).then(()=>{
            this.showModel = true;
          })
        })

      },
      // 拍照
      photograph(){
        uni.chooseImage({
          count: 1,
          crop:{
            width: 1024,
            height: 1024,
            resize: false
          },
          success: (res) => {
            console.log(res.tempFilePaths[0]);
          }
        })
      },
      navToAdd(){
        let url;
        if(this.showModelCode) url = `/pages/product/addGoods/index?mer_id=${this.mer_id}&code=${this.showModelCode}`;
        else url = `/pages/product/addGoods/index?mer_id=${this.mer_id}`;
        uni.navigateTo({
          url:url,
          success:()=> {
            this.showModel = false;
          }
        })
      },
      // 跳转添加商品界面
      jumpAddGoods() {
      	const data = getStorage('addGoodsFormData');
      	if (data && data.product_id) {
      		let waitDeleteData = ['addGoodsFormData', 'singleSpecification', 'attrValue', 'modifyPriceData',
      			'addGoodsSecoundData', 'goodsDis', 'editGoodsDetils'];
      		waitDeleteData.forEach(item => {
      			if (getStorage(item)) {
      				removeStorage(item);
      			}
      		})
      	}
      	navigateTo(1, '/pages/product/addGoods/index', {
      		mer_id: this.mer_id
      	});
      },
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    },
  }
</script>

<style lang="scss">
  .select_warehouse {
    padding-top: 20px;
  }

  .wrapper {
    width: 694.74rpx;
    margin: 0 auto;
  }

  .goods-wrapper {
    .item {
      display: flex;
      height: 175.44rpx;
      width: 100%;
      background-color: #fff;
      margin-top: 21.05rpx;
      border-radius: 8px;
      padding: 12px;

      .l_cont {
        image {
          width: 133.33rpx;
          height: 133.33rpx;
          border-radius: 8px;
        }
      }

      .r_cont {
        margin-left: 17.54rpx;
      }
    }
  }

  .select_item {
    width: 220.84rpx;
    // width: 336rpx;
    height: 189.47rpx;
    border-radius: 8px;
    background-color: #eee;
    padding: 22rpx 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    background-size: cover;
    background-repeat: no-repeat;
    align-items: center;

    .title {
      font-size: 32.09rpx;
    }
    
    .img{
      width: 90rpx;
      height: 90rpx;
    }
  }
  
  .select_item1{
    background: linear-gradient(to right, #ffba00, #ff9000) !important;
  }
  .select_item2{
    background: linear-gradient(to right, #459eff, #0a60ff) !important;
  }
  .select_item3{
    background: linear-gradient(to right, #ff7245, #ff3f02) !important;
  }

  .search_goods_box {
    width: 694.74rpx;
    padding: 28.07rpx;
    font-size: 31.58rpx;

    .searchGoods {
      height: 87.72rpx;
      border: 1px solid #f5f5f5;
      border-radius: 8px;
      padding: 12px;
      margin: 21.05rpx 0;
    }

    .putGoods {
      height: 87.72rpx;
      border: 1px solid #f5f5f5;
      border-radius: 8px;
      padding: 12px;
    }

    .search_goods_btn {
      margin-top: 28.07rpx;
      display: flex;
      justify-content: space-between;

      .edit_btn {
        color: #fff;
        border-radius: 8px;
        text-align: center;
        line-height: 70.18rpx;
        height: 70.18rpx;
        width: 210.53rpx;
      }

      .cancel {
        background-color: $u-error;
      }

      .search {
        background-color: $u-primary;
      }
    }
  }

  // 扫码编辑商品
  .edit_goods_box {
    width: 694.74rpx;
    padding: 28.07rpx;
    font-size: 31.58rpx;

    text {
      color: '#f8f9f9';
    }

    .edit_name,
    .edit_store {
      height: 105.26rpx;
    }

    .edit_name_no {
      color: #a4a4a4;
    }

    .edit_store {
      // border-top: 1px solid #a4a4a4;
      margin-top: 21.05rpx;
    }

    /deep/.u-button {
      width: 300rpx;
    }

    .edit_goods_btn {
      margin-top: 28.07rpx;
      display: flex;
      justify-content: space-between;

      .edit_btn {
        width: 210.53rpx;
      }
    }
  }

  .list-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20rpx 28rpx 0;

    .item {
      width: 328rpx;
      margin-bottom: 20rpx;
      overflow: hidden;
      position: relative;
      border-radius: 8px;
      background-color: #fff;

      &.on {
        border-radius: 0;
      }

      .pictrue_log {
        width: 92rpx;
        height: 44rpx;
        font-size: 26rpx;
        line-height: 44rpx;
      }

      .pictrue,
      /deep/image,
      /deep/.easy-loadimage,
      /deep/uni-image {
        width: 100%;
        display: block;
        position: relative;

        .border-picture {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: center/cover no-repeat;
        }
      }

      .picture1,
      /deep/.picture1 image,
      /deep/.picture1 .easy-loadimage,
      /deep/.picture1 uni-image {
        height: 346rpx;
        position: relative;

        .border-picture {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: center/cover no-repeat;
        }

        .sell_out {
          display: flex;
          width: 150rpx;
          height: 150rpx;
          align-items: center;
          justify-content: center;
          border-radius: 100%;
          background: rgba(0, 0, 0, .6);
          color: #fff;
          font-size: 30rpx;
          position: absolute;
          top: 50%;
          left: 50%;
          margin: -75rpx 0 0 -75rpx;

          &::before {
            content: "";
            display: block;
            width: 140rpx;
            height: 140rpx;
            border-radius: 100%;
            border: 1px dashed #fff;
            position: absolute;
            top: 5rpx;
            left: 5rpx;
          }
        }
      }

      .cont1,
      /deep/.cont1 image,
      /deep/.cont1 .easy-loadimage,
      /deep/.cont1 uni-image,
      .cont1 .border-picture {
        border-radius: 16rpx;
      }

      .text-info {
        padding: 10rpx 20rpx 15rpx;
        display: flex;
        flex-direction: column;

        .center {
          display: flex;
          align-items: flex-end;

          .tip {
            padding: 5rpx 10rpx;
            background-color: #f84221;
            color: #fff;
            font-size: 20rpx;
            border-radius: 10rpx;
            margin-left: 12rpx;
          }

          .tip_green {
            padding: 5rpx 10rpx;
            background-color: #f84221;
            color: #fff;
            font-size: 20rpx;
            border-radius: 10rpx;
            margin-left: 12rpx;
          }
        }

        .add-btn {
          align-self: flex-end;
          text-align: center;
          width: 175.44rpx;
          color: #fff;
          margin-top: auto;
          padding: 7.02rpx 21.05rpx;
          border-radius: 100px;
          background: $uni-theme-bg-color;
        }

        .title {
          font-size: 31.58rpx;
          margin-bottom: 10.53rpx;
          color: #222222;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .old-price {
          margin-top: 4rpx;
          font-size: 26rpx;
          color: #999;
          text-decoration: line-through;

          text {
            margin-right: 2px;
            font-size: 20rpx;
          }
        }

        .price {
          display: flex;
          margin-top: 20rpx;
          font-size: 26rpx;
          align-items: center;

          text {
            font-size: 36rpx;
            font-weight: 550;
          }

          .ot-price {
            color: #aaa;
            font-size: 26rpx;
            text-decoration: line-through;
            margin-left: 6rpx;
            font-weight: normal;
            margin-top: 10rpx;
          }
        }
      }

      .pictrue {
        position: relative;
      }

      .border-picture {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 8rpx;
        background: center/cover no-repeat;
      }
    }



    .merchant_info {
      display: flex;
      align-items: center;
      margin-top: 20rpx;

      .merchant_type {
        color: #fff;
        line-height: 30rpx;
        padding: 0 10rpx;
        border-radius: 2rpx;
        font-size: 22rpx;
      }

      .txt {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56rpx;
        height: 28rpx;
        margin-left: 15rpx;
        border: 1px solid $theme-color;
        border-radius: 4rpx;
        font-size: 20rpx;
        font-weight: normal;

        &.delivery {
          margin-left: 0;
          color: #FF9000;
          border-color: #FF9000;
        }
      }
    }

    &.on {
      display: flex;
    }

    &.listA {
      .item {
        display: flex;
        width: 100%;

        .pictrue,
        /deep/image,
        /deep/.easy-loadimage,
        /deep/uni-image {
          width: 220rpx;
          height: 220rpx;
        }

        .sell_out {
          display: flex;
          width: 110rpx;
          height: 110rpx;
          align-items: center;
          justify-content: center;
          border-radius: 100%;
          background: rgba(0, 0, 0, .6);
          color: #fff;
          font-size: 24rpx;
          position: absolute;
          top: 50%;
          left: 50%;
          margin: -55rpx 0 0 -55rpx;

          &::before {
            content: "";
            display: block;
            width: 100rpx;
            height: 100rpx;
            border-radius: 100%;
            border: 1px dashed #fff;
            position: absolute;
            top: 5rpx;
            left: 5rpx;
          }
        }

        .text-info {
          width: 490rpx;
        }
      }
    }

    &.listB {
      justify-content: inherit;

      .item {
        width: 31.3%;
        margin-right: 3.05%;

        .pictrue,
        /deep/image,
        /deep/.easy-loadimage,
        /deep/uni-image {
          height: 220rpx;
        }

        .sell_out {
          display: flex;
          width: 110rpx;
          height: 110rpx;
          align-items: center;
          justify-content: center;
          border-radius: 100%;
          background: rgba(0, 0, 0, .6);
          color: #fff;
          font-size: 24rpx;
          position: absolute;
          top: 50%;
          left: 50%;
          margin: -55rpx 0 0 -55rpx;

          &::before {
            content: "";
            display: block;
            width: 100rpx;
            height: 100rpx;
            border-radius: 100%;
            border: 1px dashed #fff;
            position: absolute;
            top: 5rpx;
            left: 5rpx;
          }
        }

        &:nth-child(3n) {
          margin-right: 0;
        }

        .price {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20rpx;

          text {
            font-size: 28rpx;
          }
        }

        .text-info {
          padding: 10rpx 4rpx;
        }
      }
    }

    &.listC {
      .item {
        width: 100%;

        .pictrue,
        /deep/image,
        /deep/.easy-loadimage,
        /deep/uni-image {
          height: 320rpx;
        }

        .price {
          margin-top: 20rpx;
          font-size: 40rpx;
          display: flex;
          align-items: center;

          .old-price {
            font-weight: normal;
            font-size: 22rpx;
            margin-left: 10rpx;
          }
        }
      }
    }

    &.listS {
      .price {
        font-size: 40rpx;
        display: flex;
        align-items: baseline;

        .old-price {
          font-weight: normal;
          font-size: 22rpx;
          margin-left: 10rpx;
        }
      }
    }
  }

  .list-box-put {
    .item {
      width: 694rpx;
      margin: 0 auto;
      margin-top: 20rpx;
      background-color: #fff;
      border-radius: 14rpx;

      .top {
        display: flex;
        padding: 22rpx;

        .pictrue {
          margin-right: 16rpx;

          .img {
            width: 200rpx;
            height: 200rpx;
          }

          .swiper {
            width: 100%;
            display: flex;
            justify-content: space-between;

            image {
              width: 60rpx;
              height: 60rpx;
            }
          }
          .btn{
            font-size: 24rpx;
            margin: 0 auto;
            margin-top: 10rpx;
            width: 120rpx;
            height: 40rpx;
            background-color: #419aff;
            color: #fff;
            line-height: 40rpx;
            text-align: center;
            border-radius: 40rpx;
          }
        }

        .text-info {
          flex: 1;
          .title {
            display: flex;

            .text_item_title {
              flex-shrink: 0;
              margin-right: 10rpx;
            }
          }

          .text {
            display: flex;
            justify-content: space-between;
            font-size: 24rpx;
            padding-right: 10rpx;
            padding-top: 10rpx;

            .text_item {
              flex: 1;
              display: flex;

              .text_item_title {
                flex-shrink: 0;
                margin-right: 10rpx;
              }

              .more {
                // font-size: 24rpx;
                flex: 1;
                // height: auto;
              }
            }
          }
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        padding: 16rpx 22rpx;

        .add-btn {
          background-color: #419aff;
          color: #fff;
          height: 50rpx;
          width: 160rpx;
          line-height: 50rpx;
          text-align: center;
          border-radius: 50rpx;
        }
      }
    }
  }
  
  .photo-box{
    .card{
      width: 694rpx;
      margin: 0 auto;
      margin-top: 20rpx;
      background-color: #fff;
      padding: 20rpx;
      border-radius: 14rpx;
      .card-head{
        display: flex;
        justify-content: space-between;
        margin-bottom: 20rpx;
      }
      .img-list{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        .img{
          width: 210rpx;
          height: 210rpx;
          margin-bottom: 15rpx;
          border-radius: 14rpx;
          overflow: hidden;
        }
      }
      .img-list2{
        justify-content: left;
        .img{
          margin-right: 16rpx;
        }
      }
    }
  }
  
</style>