fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by lea guo
Commit 4846c9c7d9083548393e096254ab78845600ea84 1 parent 5d375af2

订单中复制功能

Inline Side-by-side
Showing 5 changed files with 99 additions and 28 deletions
<template>
<div>
<div ref='copy' class="btn" @click="onClick">
<div ref="copy" class="btn" @click="onClick">
立即邀请
</div>
</div>
</template>
<script>
import {createNamespacedHelpers} from 'vuex';
import { get } from 'lodash';
import Clipboard from 'clipboard';
import { createNamespacedHelpers } from "vuex";
import { get } from "lodash";
import Clipboard from "clipboard";
const {mapActions} = createNamespacedHelpers('gain');
const { mapActions } = createNamespacedHelpers("gain");
export default {
name: 'GainFooter',
name: "GainFooter",
data() {
return {
isUnionType: false,
shareUrl: 'https://activity.yoho.cn/feature/5475.html?share_id=8169&title=新人礼遇'
shareUrl:
"https://activity.yoho.cn/feature/5475.html?share_id=8169&title=新人礼遇"
};
},
mounted() {
... ... @@ -30,24 +31,23 @@ export default {
}
});
this.copyBtn.on('success', function() {
this.copyBtn.on("success", function() {
if (vm.isUnionType) {
vm.$createToast({
txt: '邀请链接已复制，快去粘贴吧~',
type: 'txt'
txt: "邀请链接已复制，快去粘贴吧~",
type: "txt"
}).show();
}
});
this.copyBtn.on('error', function() {
});
this.copyBtn.on("error", function() {});
this.fetchUnionStatus().then(result => {
this.isUnionType = get(result, 'data.unionType', false);
this.isUnionType = get(result, "data.unionType", false);
});
},
methods: {
...mapActions(['fetchUnionStatus']),
...mapActions(["fetchUnionStatus"]),
async onClick() {
let vm = this;
... ... @@ -61,24 +61,24 @@ export default {
if (!vm.isUnionType) {
this.$yoho.goNewPage({
url: 'http://m.yohobuy.com/activity/have-gain/apply?title=有货有赚介绍&openby:yohobuy={"action":"go.h5","params":{"title":"有货有赚介绍","url":"http://m.yohobuy.com/activity/have-gain/apply"}}'
url:
'http://m.yohobuy.com/activity/have-gain/apply?title=有货有赚介绍&openby:yohobuy={"action":"go.h5","params":{"title":"有货有赚介绍","url":"http://m.yohobuy.com/activity/have-gain/apply"}}'
});
return;
}
},
}
}
};
</script>
<style lang="scss" scoped>
.btn {
font-size: 32px;
width: 100%;
height: 98px;
line-height: 98px;
color: white;
text-align: center;
background: #444;
}
.btn {
font-size: 32px;
width: 100%;
height: 98px;
line-height: 98px;
color: white;
text-align: center;
background: #444;
}
</style>
... ...
... ... @@ -48,6 +48,7 @@
<p>
<span class="label">订单编号:</span>
<span>{{ orderDetail.orderCode }}</span>
<i ref="copy" class="copy"></i>
</p>
<p v-if="orderDetail.paymentStr">
<span class="label">支付方式:</span>
... ... @@ -87,6 +88,7 @@
<script>
import { createNamespacedHelpers } from "vuex";
import { Button } from "cube-ui";
import Clipboard from "clipboard";
import AddressInfo from "./components/address-info";
import OrderItemInfo from "./components/order-detail-item";
... ... @@ -113,6 +115,19 @@ export default {
DetailHeader,
DetailFooter
},
activated() {
this.copyBtn = new Clipboard(this.$refs.copy, {
text: () => {
return this.orderDetail.orderCode;
}
});
this.copyBtn.on("success", () => {
this.$createToast({
txt: "复制成功",
type: "txt"
}).show();
});
},
asyncData({ store, router }) {
return store.dispatch(`${STORE_PATH}/fetchOrderDetail`, router.params);
},
... ... @@ -227,6 +242,15 @@ export default {
& > :first-child + p {
margin: 20px 0;
}
.copy {
width: 50px;
height: 25px;
display: inline-block;
background: url("~statics/image/order/copy@3x.png") no-repeat;
background-size: contain;
background-position: center;
}
}
.label {
... ...
... ... @@ -52,6 +52,7 @@
<p>
<span class="label">订单编号:</span>
<span>{{ orderDetail.orderCode }}</span>
<i ref="copy" class="copy"></i>
</p>
<p v-if="orderDetail.paymentStr">
<span class="label">支付方式:</span>
... ... @@ -96,6 +97,7 @@
<script>
import { createNamespacedHelpers } from "vuex";
import { Button } from "cube-ui";
import Clipboard from "clipboard";
import AddressInfo from "./components/address-info";
import OrderItemInfo from "./components/order-detail-item";
... ... @@ -125,6 +127,19 @@ export default {
asyncData({ store, router }) {
return store.dispatch(`${STORE_PATH}/fetchOrderDetail`, router.params);
},
activated() {
this.copyBtn = new Clipboard(this.$refs.copy, {
text: () => {
return this.orderDetail.orderCode;
}
});
this.copyBtn.on("success", () => {
this.$createToast({
txt: "复制成功",
type: "txt"
}).show();
});
},
computed: {
...mapState(["orderDetail"]),
...mapGetters([
... ... @@ -239,6 +254,15 @@ export default {
.trade-info {
font-size: 28px;
.copy {
width: 50px;
height: 25px;
display: inline-block;
background: url("~statics/image/order/copy@3x.png") no-repeat;
background-size: contain;
background-position: center;
}
& > p {
margin: 20px 0;
}
... ...
... ... @@ -23,6 +23,7 @@
<span>
{{ logisticInfo.wayBillCode }}
</span>
<i ref="copy" class="copy"></i>
</p>
</div>
</div>
... ... @@ -50,7 +51,6 @@
<li
v-for="(imgUrl, i) in miniFaultConfirm.imageUrls"
:key="i"
v-if="i < 3"
>
<ImageFormat
:data-secc="imgUrl"
... ... @@ -83,6 +83,7 @@ import TimeLine from "./components/time-line";
import { expressTypeEnum } from "constants/logistics-constants";
import CountDown from "./components/count-down";
import { Button } from "cube-ui";
import Clipboard from "clipboard";
const STORE_PATH = "order/logisticsInfo";
... ... @@ -129,7 +130,7 @@ export default {
title: supplementExpressInfoDetailTitle,
detailList: supplementExpressInfoDetailList
}
].filter(item => !!item.title);
].filter(item => item.detailList.length > 0);
}
},
... ... @@ -138,6 +139,19 @@ export default {
},
methods: {
...mapActions(["fetchLogisticInfo"])
},
activated() {
this.copyBtn = new Clipboard(this.$refs.copy, {
text: () => {
return this.logisticInfo.wayBillCode;
}
});
this.copyBtn.on("success", () => {
this.$createToast({
txt: "复制成功",
type: "txt"
}).show();
});
}
};
</script>
... ... @@ -244,6 +258,15 @@ export default {
align-items: center;
margin-bottom: 64px;
.copy {
width: 50px;
height: 25px;
display: inline-block;
background: url("~statics/image/order/copy@3x.png") no-repeat;
background-size: contain;
background-position: center;
}
.info {
margin-left: 20px;
... ...