123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899 |
- <template>
- <div class="col-box">
- <div class="col" :class="showT ? 'tuck' : 'cancel'" @click="collect">
- <div v-if="showT"><img src="@/assets/col.png" alt="" />收藏</div>
- <div v-else><img src="@/assets/cancelcol.png" alt="" />取消收藏</div>
- </div>
- </div>
- </template>
- <script>
- export default {
- props: {
- showT: {
- type: Boolean,
- default: true,
- },
- param: {
- type: Object,
- default: () => {
- return {};
- },
- },
- },
- data() {
- return {};
- },
- methods: {
- collect() {
- if (this.showT) {
- let { questionId, goodsId, orderGoodsId, examId, doMode } = this.param;
- this.$request
- .collectQuestion({
- examId,
- questionId,
- goodsId,
- orderGoodsId,
- doMode
- })
- .then((res) => {
- this.$message.success("收藏成功");
- this.$emit("sumit");
- });
- } else {
- this.$request
- .deleteCollectQuestion(this.param.collectQuestionId)
- .then((res) => {
- this.$message.success("取消收藏成功");
- this.$emit("sumit");
- });
- }
- },
- },
- };
- </script>
- <style scoped lang="scss">
- .col-box {
- width: 970px;
- position: absolute;
- bottom: 0;
- padding: 12px 0;
- border-top: 1px solid #eeeeee;
- }
- .col {
- width: 100%;
- display: flex;
- justify-content: center;
- margin-left: 32px;
- border-radius: 4px;
- cursor: pointer;
- div {
- height: 30px;
- line-height: 30px;
- display: flex;
- align-items: center;
- font-size: 13px;
- }
- img {
- margin-right: 4px;
- }
- }
- .tuck {
- width: 68px;
- border: 1px solid #3f8dfd;
- color: #3f8dfd;
- background: #f2f7ff;
- }
- .cancel {
- width: 86px;
- color: #ffffff;
- background: #f9c03c;
- }
- </style>
|