farming-business-shop-web/src/views/productNationwide/lookProduct.vue

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="20%"
    :before-close="closeDialog"
    custom-class="phone"
    :destroy-on-close="true"
  >
    <phoneView>
      <div slot="conts">
        <div>
          <el-carousel height="200px">
            <el-carousel-item v-for="(item, index) in headerImg" :key="index">
              <el-image
                v-if="item.type == 'img'"
                style="width: 100%; height: 200px"
                :src="item.src"
                :preview-src-list="[item.src]"
              >
              </el-image>
              <video
                v-if="item.type == 'video'"
                :key="index"
                controls
                :src="item.src"
                style="width: 100%; height: 200px"
              ></video>
            </el-carousel-item>
          </el-carousel>
        </div>
        <img
          style="width: 100%"
          src="https://bucket.sxdirectpurchase.com/fileUpload/test/47fc6132-0b3e-4b5c-b858-f78d363eba90.png"
          alt=""
        />
        <div class="card">
          <div class="spuName">{{ form ? form.title : "" }}</div>
          <div class="price_info">
            <div class="price_group">
              <span>￥</span
              ><span class="price"
                >{{
                  form.skuList
                    ? form.skuList[0].skuPriceList
                      ? form.skuList[0].skuPriceList[0].price
                      : 0
                    : 0
                }}元</span
              ><span>/{{ form.unit }}</span>
            </div>
            <span class="ys">已售 0</span>
          </div>
        </div>
        <div class="card" style="margin-top: 10px">
          <div class="spuName">规格/价格</div>
          <div v-for="(item, index) in form.skuList" :key="index">
            <div class="price_info">
              <span
                >{{ item.skuSpecsList ? item.skuSpecsList[0].specsName : "" }}
                {{ item.skuSpecsList ? item.skuSpecsList[0].specsValue : "" }}</span
              >
            </div>
            <div
              style="display: flex; flex-direction: row; justify-content: space-between"
            >
              <span style="font-size: 14px; color: red">
                <span>￥</span>
                <span>{{ item.skuPriceList ? item.skuPriceList[0].price : 0 }}元</span
                ><span>/{{ form.unit }}</span></span
              >
              <span style="font-size: 14px"
                >{{ item.skuPriceList ? item.skuPriceList[0].minPurchase : 0 }}/{{
                  form.unit
                }}起购</span
              >
              <span style="font-size: 14px">库存:{{ item.stock }}{{ form.unit }}</span>
            </div>
          </div>
        </div>
        <div class="card" style="margin-top: 10px">
          <el-form
            :model="form"
            ref="queryForm"
            size="small"
            :inline="true"
            label-width="80px"
            label-position="left"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item label="发货地" prop="spuName">
                  <div style="width: 185px">
                    {{ form.shippingAddrBean ? form.shippingAddrBean.addr : "" }}
                    {{ form.shippingAddrBean ? form.shippingAddrBean.addrDetail : "" }}
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="发货时间" prop="spuName">
                  {{ form.shippingTimeDesc }}
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="商品属性" prop="spuName">
                  <div>查看></div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="包装方式" prop="spuName">
                  {{ form.packing }}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="card" style="margin-top: 10px">
          <div
            style="
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
            "
          >
            <span class="spuName">商品评价</span>
            <span>好评率 <span style="color: red">100%</span></span>
          </div>
          <div
            style="
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            "
          >
            <img
              style="width: 40%"
              src="https://directpurchase-oss-dev.oss-cn-chengdu.aliyuncs.com/wx/static/images/kong.png"
              alt=""
            />
            <span>还没有评价~</span>
          </div>
        </div>
        <div class="card" style="margin-top: 10px">
          <div class="spuName">商品介绍</div>
          <div style="font-size: 14px; line-height: 25px">
            {{ form.spuDesc }}
          </div>
        </div>
        <div class="card" style="margin-top: 10px">
          <div class="spuName">商品详情</div>
          <div style="font-size: 14px; line-height: 25px">
            <el-image
              v-for="(item, index) in form.spuDetailList"
              :key="index"
              :src="item.fileUrl"
              fit="fill"
              :preview-src-list="[item.fileUrl]"
            >
            </el-image>
          </div>
          <div style="font-size: 14px; line-height: 25px">
            <el-image
              v-for="(item, index) in form.specialList"
              :key="index"
              :src="item.fileUrl"
              fit="fill"
              :preview-src-list="[item.fileUrl]"
            >
            </el-image>
          </div>
        </div>
      </div>
    </phoneView>
  </el-dialog>
</template>

<script>
import phoneView from "@/components/phoneView/index.vue";
export default {
  components: { phoneView },
  data() {
    return {
      dialogVisible: false,
      form: {},
      headerImg: [],
    };
  },
  methods: {
    openDialog(record) {
      this.form = record;
      this.headerImg = [];
      if (this.form.vid) {
        this.headerImg.push({
          type: "video",
          src: this.form.vid,
          sort: 1,
        });
      }
      if (this.form.pic) {
        this.headerImg.push({
          type: "img",
          src: this.form.pic,
          sort: 2,
        });
      }
      this.headerImg = this.unique(this.headerImg);
      if (this.form.bannerList) {
        this.form.bannerList.forEach((e, index) => {
          this.headerImg.push({
            type: "img",
            src: e.fileUrl,
            sort: index + 4,
          });
        });
      }
      this.headerImg.sort((a, b) => a.sort - b.sort); //排序 视频在最前面>封面>商品banner
      this.dialogVisible = true;
    },
    unique(arr) {
      const res = new Map();
      return arr.filter((arr) => !res.has(arr.src) && res.set(arr.src, 1));
    },
    closeDialog() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped>
/deep/ .el-dialog {
  background: transparent !important;
  /* margin: 0px !important; */
  box-shadow: none !important;
  padding: 0px !important;
}
/deep/ .el-dialog__body {
  margin: 0px !important;
  padding: 0px !important;
}
/deep/ .el-dialog__header {
  margin: 0px !important;
  padding: 0px !important;
}
/deep/ .phone {
  margin: auto;
}
/* .phone /deep/ .el-dialog__headerbtn {
  border-radius: 50%;
  width: 30px !important;
  height: 30px !important;
  background: #fff !important;
  top: -5px !important;
  right: 6px !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
} */
.card {
  /* height: 85px; */
  width: 95%;
  background: white;
  margin: auto;
  border-radius: 10px;
  line-height: 30px;
  padding: 10px;
}
.spuName {
  text-decoration: none;
  font-weight: bold;
  word-wrap: normal;
  font-size: 18px;
  color: #333333;
}
.price_group {
  color: #ff2f2f;
}
.price {
  text-decoration: none;
  font-weight: bold;
  word-wrap: normal;
  font-size: 25px;
  color: #ff2f2f;
}
.price_info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.ys {
  font-size: 14px;
}
</style>