|
|
@@ -1,144 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="item-cmd_bx">
|
|
|
- <view class="img_bx">
|
|
|
- <app-img
|
|
|
- src="https://img.huaml.com/uploads/12358/202005/29/de74c55596d304b85e79154958e8bf57_small.jpeg"
|
|
|
- alt="商品图"
|
|
|
- mode="aspectFit"
|
|
|
- :height="160"
|
|
|
- />
|
|
|
- </view>
|
|
|
- <view class="cmd-info_bx">
|
|
|
- <view class="tit">天使美人</view>
|
|
|
- <view class="kc">B级</view>
|
|
|
- <view class="num-open_bx">
|
|
|
- <view class="price"><text class="unit">¥</text><text>42</text></view>
|
|
|
- <template v-if="isEdit">
|
|
|
- <view class="open-bx" v-if="type == COMMODITY_TYPE.COMMON">
|
|
|
- <i class="iconfont iconjianqu" @click="subtractEvent"></i>
|
|
|
- <text class="num" @click="customNum">5/2</text>
|
|
|
- <i class="iconfont icontianjia" @click="addEvent"></i>
|
|
|
- </view>
|
|
|
- <view class="open-bx" v-else-if="type == COMMODITY_TYPE.CHANGE">
|
|
|
- <input class="change-input" type="text" placeholder="自动调价" />
|
|
|
- <i class="iconfont icondelete" @click="delEvent"></i>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { COMMODITY_TYPE } from "@/utils/declare";
|
|
|
-import AppImg from "@/components/app-img";
|
|
|
-export default {
|
|
|
- name: "Commodity",
|
|
|
- components: {
|
|
|
- AppImg
|
|
|
- },
|
|
|
- props: {
|
|
|
- type: {
|
|
|
- type: String,
|
|
|
- default: COMMODITY_TYPE.COMMON
|
|
|
- },
|
|
|
- isEdit: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- COMMODITY_TYPE
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- customNum() {
|
|
|
- this.$emit("customNum");
|
|
|
- },
|
|
|
- addEvent() {
|
|
|
- this.$emit("add");
|
|
|
- },
|
|
|
- subtractEvent() {
|
|
|
- this.$emit("subtract");
|
|
|
- },
|
|
|
- delEvent() {
|
|
|
- this.$emit("del");
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.item-cmd_bx {
|
|
|
- position: relative;
|
|
|
- margin-bottom: 20px;
|
|
|
- .img_bx {
|
|
|
- height: 160px;
|
|
|
- width: 160px;
|
|
|
- position: absolute;
|
|
|
- left: 0px;
|
|
|
- top: 0px;
|
|
|
- }
|
|
|
- .cmd-info_bx {
|
|
|
- padding-left: 177px;
|
|
|
- & .tit {
|
|
|
- font-size: 28px;
|
|
|
- font-weight: 400;
|
|
|
- color: #333333;
|
|
|
- padding-top: 10px;
|
|
|
- }
|
|
|
- & .kc {
|
|
|
- color: #999999;
|
|
|
- font-size: 24px;
|
|
|
- padding: 10px 0 24px;
|
|
|
- }
|
|
|
- & .num-open_bx {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- & .price {
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- font-size: 32upx;
|
|
|
- color: #333;
|
|
|
- .unit {
|
|
|
- font-size: 22upx;
|
|
|
- }
|
|
|
- }
|
|
|
- & .open-bx {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- & .iconfont {
|
|
|
- color: #3385ff;
|
|
|
- font-size: 40px;
|
|
|
- }
|
|
|
- .icondelete {
|
|
|
- margin: 0 10px 0 30px;
|
|
|
- color: #ccc;
|
|
|
- &.edit {
|
|
|
- color: #3385ff;
|
|
|
- }
|
|
|
- }
|
|
|
- & > .num {
|
|
|
- display: inline-block;
|
|
|
- margin: 0 8px;
|
|
|
- color: #333333;
|
|
|
- border-radius: 22px;
|
|
|
- background-color: #f5f5f5;
|
|
|
- padding: 5px 36px;
|
|
|
- }
|
|
|
- .change-input {
|
|
|
- width: 164px;
|
|
|
- height: 60px;
|
|
|
- line-height: 60px;
|
|
|
- text-align: center;
|
|
|
- background: #ffffff;
|
|
|
- border: 1px solid #dddddd;
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 28px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|