优选订单完成

src/pages/recommend/spec.vue

@@ -1,407 +1,414 @@
 <template>
-  <div class="g-spec" v-if="show" :class="{ page_red: theme === 1 }">
-    <div
-      class="g-spec__content"
-      :class="{ 'g-spec__content--iphoneX': iphoneX }"
-    >
-      <div class="g-info">
-        <div class="g-info__content">
-          <img class="g-info__img" :src="goods.pictureUrls[0]" alt="" />
-          <div class="g-info__right">
-            <div class="g-info__title">
-              {{ goods.name }}
+    <div class="g-spec" v-if="show" :class="{ page_red: theme === 1 }">
+        <div
+            class="g-spec__content"
+            :class="{ 'g-spec__content--iphoneX': iphoneX }"
+        >
+            <div class="g-info">
+                <div class="g-info__content">
+                    <img
+                        class="g-info__img"
+                        :src="goods.pictureUrls[0]"
+                        alt=""
+                    />
+                    <div class="g-info__right">
+                        <div class="g-info__title">
+                            {{ goods.name }}
+                        </div>
+                        <div class="g-info__price">
+                            ¥{{ spec.price | minuteToRmb2 }}
+                        </div>
+                    </div>
+                    <div class="g-info__close" @click="close">
+                        <i class="iconfont iconclose g-info__close-icon"></i>
+                    </div>
+                </div>
+            </div>
+            <ul class="g-list">
+                <li class="g-list__item">
+                    <div class="g-list__title">规格</div>
+                    <ul class="g-specification">
+                        <li
+                            class="g-specification__item"
+                            :class="{
+                                'g-specification__item--active': value.active,
+                            }"
+                            v-for="(value, key) in specList"
+                            :key="key"
+                            @click="selectSpec(value, index)"
+                        >
+                            {{ value.properties }}
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+            <div class="g-entrepot">
+                <div class="g-entrepot__left">
+                    <div class="g-entrepot__title">购买数量：</div>
+                    <div class="g-entrepot__num">
+                        {{
+                            "剩余" +
+                            (spec ? spec.inventory : goods.totalInventory) +
+                            "件"
+                        }}
+                    </div>
+                </div>
+                <f-input-number
+                    v-model="num"
+                    :max="spec.inventory || goods.totalInventory"
+                ></f-input-number>
+            </div>
+            <ul class="g-nav" v-if="type === 'spec'">
+                <li class="g-nav__item" @click="addCart">加入购物车</li>
+                <li class="g-nav__item" @click="buy">立即购买</li>
+            </ul>
+            <div class="g-bottom" v-if="type !== 'spec'">
+                <div class="g-bottom__btn" @click="affirm">确定</div>
             </div>
-            <div class="g-info__price">¥{{ spec.price | minuteToRmb2 }}</div>
-          </div>
-          <div class="g-info__close" @click="close">
-            <i class="iconfont iconclose g-info__close-icon"></i>
-          </div>
-        </div>
-      </div>
-      <ul class="g-list">
-        <li class="g-list__item">
-          <div class="g-list__title">规格</div>
-          <ul class="g-specification">
-            <li
-              class="g-specification__item"
-              :class="{
-                'g-specification__item--active': value.active,
-              }"
-              v-for="(value, key) in specList"
-              :key="key"
-              @click="selectSpec(value, index)"
-            >
-              {{ value.properties }}
-            </li>
-          </ul>
-        </li>
-      </ul>
-      <div class="g-entrepot">
-        <div class="g-entrepot__left">
-          <div class="g-entrepot__title">购买数量：</div>
-          <div class="g-entrepot__num">
-            {{ "剩余" + (spec ? spec.inventory : goods.totalInventory) + "件" }}
-          </div>
         </div>
-        <f-input-number
-          v-model="num"
-          :max="spec.inventory || goods.totalInventory"
-        ></f-input-number>
-      </div>
-      <ul class="g-nav" v-if="type === 'spec'">
-        <li class="g-nav__item" @click="addCart">加入购物车</li>
-        <li class="g-nav__item" @click="buy">立即购买</li>
-      </ul>
-      <div class="g-bottom" v-if="type !== 'spec'">
-        <div class="g-bottom__btn" @click="affirm">确定</div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
 import FInputNumber from "../../components/form/inputNumber";
 
 export default {
-  name: "GSpec",
-  components: { FInputNumber },
-  props: {
-    // 内容
-    goods: {
-      type: Object,
-    },
-  },
-
-  // 数据
-  data() {
-    return {
-      show: false,
-      specList: [],
-      num: 1,
-      type: "",
-      callBack: "",
-    };
-  },
-
-  // 函数
-  methods: {
-    // 打开
-    open(type, callBack) {
-      const self = this;
-
-      self.show = true;
-      self.type = type || "sepc";
-      self.callBack = callBack;
+    name: "GSpec",
+    components: { FInputNumber },
+    props: {
+        // 内容
+        goods: {
+            type: Object,
+        },
     },
 
-    // 关闭
-    close() {
-      const self = this;
-
-      self.show = false;
+    // 数据
+    data() {
+        return {
+            show: false,
+            specList: [],
+            num: 1,
+            type: "",
+            callBack: "",
+        };
     },
 
-    // 选择规格
-    selectSpec(val, index) {
-      const self = this;
-      for (let item of self.specList) {
-        if (item.skuNo === val.skuNo) {
-          item.active = true;
-        } else {
-          item.active = false;
-        }
-      }
-      this.specList = [...this.specList];
-    },
-
-    // 加入购物车
-    addCart() {
-      const self = this;
-
-      if (self.specList.length && !self.spec) {
-        self.fn.showToast("请选择商品规格");
-      } else {
-        self.api
-          .post("/Order/AddCart", {
-            productId: self.goods.pid,
-            count: self.num,
-            skuId: self.spec.skuNo,
-            productSource: 1,
-          })
-          .then((res) => {
-            self.close();
-            if (self.fn.getType(self.callBack) === "function") {
-              self.callBack(res);
+    // 函数
+    methods: {
+        // 打开
+        open(type, callBack) {
+            const self = this;
+
+            self.show = true;
+            self.type = type || "sepc";
+            self.callBack = callBack;
+        },
+
+        // 关闭
+        close() {
+            const self = this;
+
+            self.show = false;
+        },
+
+        // 选择规格
+        selectSpec(val, index) {
+            const self = this;
+            for (let item of self.specList) {
+                if (item.skuNo === val.skuNo) {
+                    item.active = true;
+                } else {
+                    item.active = false;
+                }
             }
-          });
-      }
-    },
-
-    // 立即购买
-    buy() {
-      const self = this;
-
-      if (self.specList.length && !self.spec) {
-        self.fn.showToast("请选择商品规格");
-      } else {
-        self.api
-          .post("/Order/BuyNow", {
-            productId: self.goods.itemInfo.itemId,
-            count: self.num,
-            price:
-              parseFloat(self.spec.priceFmt) ||
-              parseFloat(self.goods.priceInfo.nowPrice),
-            skuId: self.spec.skuId,
-            roomId: self.roomId || "",
-            videoId: Number(self.videoId) || 0,
-          })
-          .then((res) => {
-            self.close();
-            if (self.fn.getType(self.callBack) === "function") {
-              self.callBack(res);
+            this.specList = [...this.specList];
+        },
+
+        // 加入购物车
+        addCart() {
+            const self = this;
+
+            if (self.specList.length && !self.spec) {
+                self.fn.showToast("请选择商品规格");
+            } else {
+                self.api
+                    .post("/Order/AddCart", {
+                        productId: self.goods.pid,
+                        count: self.num,
+                        skuId: self.spec.skuNo,
+                        productSource: 1,
+                    })
+                    .then((res) => {
+                        self.close();
+                        if (self.fn.getType(self.callBack) === "function") {
+                            self.callBack(res);
+                        }
+                    });
             }
-          });
-      }
-    },
+        },
+
+        // 立即购买
+        buy() {
+            const self = this;
+
+            if (self.specList.length && !self.spec) {
+                self.fn.showToast("请选择商品规格");
+            } else {
+                self.api
+                    .post("/Order/BuyNow", {
+                        productId: self.goods.pid,
+                        count: self.num,
+                        price: parseFloat(self.spec.price / 100),
+                        skuId: self.spec.skuNo,
+                        productSource: 1,
+                    })
+                    .then((res) => {
+                        self.close();
+                        if (self.fn.getType(self.callBack) === "function") {
+                            self.callBack(res);
+                        }
+                    });
+            }
+        },
 
-    // 确认处理
-    affirm() {
-      const self = this;
+        // 确认处理
+        affirm() {
+            const self = this;
 
-      if (self.type === "cart") {
-        self.addCart();
-      } else if (self.type === "buy") {
-        self.buy();
-      }
+            if (self.type === "cart") {
+                self.addCart();
+            } else if (self.type === "buy") {
+                self.buy();
+            }
+        },
     },
-  },
 
-  // 数据计算
-  computed: {
-    // 判断主题  1:红色  2：绿色
-    theme() {
-      return this.$store.state.common.theme;
-    },
+    // 数据计算
+    computed: {
+        // 判断主题  1:红色  2：绿色
+        theme() {
+            return this.$store.state.common.theme;
+        },
 
-    spec() {
-      const self = this;
+        spec() {
+            const self = this;
 
-      let result = "";
+            let result = "";
 
-      if (self.goods) {
-        for (let item of this.specList) {
-          if (item.active) {
-            result = item;
-          }
-        }
-      }
+            if (self.goods) {
+                for (let item of this.specList) {
+                    if (item.active) {
+                        result = item;
+                    }
+                }
+            }
 
-      self.$emit("update:spec", result);
-      return result;
+            self.$emit("update:spec", result);
+            return result;
+        },
     },
-  },
 
-  // 数据监听
-  watch: {
-    goods(val) {
-      const self = this;
+    // 数据监听
+    watch: {
+        goods(val) {
+            const self = this;
 
-      if (val) {
-        self.specList = val.skuList;
-      }
+            if (val) {
+                self.specList = val.skuList;
+            }
+        },
     },
-  },
 };
 </script>
 
 <style lang="scss" scoped>
 .g-spec {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 996;
-  background-color: rgba(0, 0, 0, 0.4);
-
-  &__content {
-    position: absolute;
+    position: fixed;
+    top: 0;
     bottom: 0;
     left: 0;
     right: 0;
-    z-index: 1;
-    background-color: #fff;
-
-    &--iphoneX {
-      padding-bottom: px(30);
+    z-index: 996;
+    background-color: rgba(0, 0, 0, 0.4);
+
+    &__content {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 1;
+        background-color: #fff;
+
+        &--iphoneX {
+            padding-bottom: px(30);
+        }
     }
-  }
 }
 
 .g-info {
-  padding-left: px(55);
+    padding-left: px(55);
 
-  &__content {
-    display: flex;
-    height: px(300);
-    border-bottom: solid px(3) #fafafa;
-  }
-
-  &__img {
-    width: px(300);
-    height: px(300);
-    margin-top: px(-40);
-    border-radius: px(10);
-  }
-
-  &__right {
-    flex: 1;
-    padding: px(35);
-  }
-
-  &__title {
-    @include omits(2);
-    width: px(500);
-    font-size: px(36);
-    color: #000;
-  }
-
-  &__price {
-    margin-top: px(30);
-    font-size: px(34);
-    color: #000;
-  }
-
-  &__close {
-    position: absolute;
-    top: px(-115);
-    right: px(55);
-    z-index: 1;
-    height: px(115);
-
-    &:after {
-      content: "";
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      z-index: 1;
-      width: px(2);
-      height: px(34);
-      transform: translateX(-50%);
-      background-color: #fff;
+    &__content {
+        display: flex;
+        height: px(300);
+        border-bottom: solid px(3) #fafafa;
+    }
+
+    &__img {
+        width: px(300);
+        height: px(300);
+        margin-top: px(-40);
+        border-radius: px(10);
+    }
+
+    &__right {
+        flex: 1;
+        padding: px(35);
     }
-  }
 
-  &__close-icon {
-    font-size: px(84);
-    color: #fff;
-  }
+    &__title {
+        @include omits(2);
+        width: px(500);
+        font-size: px(36);
+        color: #000;
+    }
+
+    &__price {
+        margin-top: px(30);
+        font-size: px(34);
+        color: #000;
+    }
+
+    &__close {
+        position: absolute;
+        top: px(-115);
+        right: px(55);
+        z-index: 1;
+        height: px(115);
+
+        &:after {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            z-index: 1;
+            width: px(2);
+            height: px(34);
+            transform: translateX(-50%);
+            background-color: #fff;
+        }
+    }
+
+    &__close-icon {
+        font-size: px(84);
+        color: #fff;
+    }
 }
 
 .g-list {
-  padding: 0 px(55) px(60);
-  border-bottom: solid px(3) #fafafa;
+    padding: 0 px(55) px(60);
+    border-bottom: solid px(3) #fafafa;
 
-  &__item {
-    padding-top: px(40);
-  }
+    &__item {
+        padding-top: px(40);
+    }
 
-  &__title {
-    font-size: px(44);
-    color: #333;
-  }
+    &__title {
+        font-size: px(44);
+        color: #333;
+    }
 }
 
 .g-specification {
-  display: flex;
-  flex-wrap: wrap;
-
-  &__item {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    height: px(85);
-    padding: 0 px(30);
-    margin: px(30) px(30) 0 0;
-    font-size: px(34);
-    color: #333;
-    border-radius: px(10);
-    background-color: #f8f8f8;
-
-    &--active {
-      color: #fff;
-      background-color: #262626;
+    flex-wrap: wrap;
+
+    &__item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: px(85);
+        padding: 0 px(30);
+        margin: px(30) px(30) 0 0;
+        font-size: px(34);
+        color: #333;
+        border-radius: px(10);
+        background-color: #f8f8f8;
+
+        &--active {
+            color: #fff;
+            background-color: #262626;
+        }
     }
-  }
 }
 
 .g-entrepot {
-  display: flex;
-  justify-content: space-between;
-  padding: px(35) px(55);
-
-  &__title {
-    padding-top: px(15);
-    font-size: px(38);
-    color: #333;
-  }
-
-  &__num {
-    margin-top: px(35);
-    font-size: px(34);
-    color: #9e9e9e;
-  }
+    display: flex;
+    justify-content: space-between;
+    padding: px(35) px(55);
+
+    &__title {
+        padding-top: px(15);
+        font-size: px(38);
+        color: #333;
+    }
+
+    &__num {
+        margin-top: px(35);
+        font-size: px(34);
+        color: #9e9e9e;
+    }
 }
 
 .g-nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 px(55);
-  height: px(165);
-  border-top: solid px(3) #fafafa;
-
-  &__item {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    width: px(470);
-    height: px(110);
-    font-size: px(38);
-    color: #262626;
-    border-radius: px(55);
-    background-color: #e5e5e5;
-
-    &:last-child {
-      color: #fff;
-      background-color: #fe6661;
+    padding: 0 px(55);
+    height: px(165);
+    border-top: solid px(3) #fafafa;
+
+    &__item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: px(470);
+        height: px(110);
+        font-size: px(38);
+        color: #262626;
+        border-radius: px(55);
+        background-color: #e5e5e5;
+
+        &:last-child {
+            color: #fff;
+            background-color: #fe6661;
+        }
     }
-  }
 }
 
 .g-bottom {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0 px(55);
-  height: px(165);
-  border-top: solid px(3) #fafafa;
-
-  &__btn {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100%;
-    height: px(110);
-    font-size: px(38);
-    color: #fff;
-    border-radius: px(55);
-    background-color: #27a34f;
-  }
+    padding: 0 px(55);
+    height: px(165);
+    border-top: solid px(3) #fafafa;
+
+    &__btn {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: px(110);
+        font-size: px(38);
+        color: #fff;
+        border-radius: px(55);
+        background-color: #27a34f;
+    }
 }
 .page_red {
-  .g-bottom__btn {
-    background-color: #fe6661;
-  }
+    .g-bottom__btn {
+        background-color: #fe6661;
+    }
 }
 </style>