kubbo/temu-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【新增】支付弹窗和修复bug

Browse Source
This commit is contained in:
yanran200830
2024-10-30 17:29:21 +08:00
parent 4b6e221369
commit 4bfb4c2d1a
5 changed files with 250 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

287
src/components/LablesMember.vue
View File

@@ -8,65 +8,128 @@
<img src="../assets/images/avatar.png" />
<div class="top-right">
<div class="top-user">
<h2>用户：嫣然</h2>
<span>正式版</span>
<h2>用户：{{ $store.state.userInfo.name }}</h2>
<span></span>
</div>
<p>开通SVIP，享黑胶VIP、数字专辑、有声书等特权</p>
<p>会员中心</p>
</div>
</div>
<div class="middle">
<div class="left">
<div class="middle-top">
<div class="tab">
<div @click="tabIndex = 0" :class="[tabIndex === 0 ? 'active' : '']">
<div @click="tabIndex = 0, currIndex = 0, getPriceList(1)" :class="[tabIndex === 0 ? 'active' : '']">
<span>金币充值</span>
</div>
<div @click="tabIndex = 1" :class="[tabIndex === 1 ? 'active' : '']">
<div @click="tabIndex = 1, currIndex = 0" :class="[tabIndex === 1 ? 'active' : '']">
<span>基础功能</span>
</div>
<div @click="tabIndex = 2" :class="[tabIndex === 2 ? 'active' : '']">
<div @click="tabIndex = 2, currIndex = 0, getPriceList(2)" :class="[tabIndex === 2 ? 'active' : '']">
<span>高级功能</span>
</div>
</div>
<div class="tab-content"
:class="[tabIndex === index ? 'active' : '']"
v-for="(item, index) in 3"
:key="index">
<div
class="tab-content__item"
:class="[currIndex === i ? 'active' : '']"
v-for="(price, i) in priceList"
:key="i"
@click="currIndex = i, getQrcode(price)">
<h3>{{ price.remark }}</h3>
<div class="price">
<i>¥</i>
<span>{{ price.price }}</span>
<div class="tab-content" v-if="tabIndex === 1">
<div class="title">金币充值</div>
<div class="tab-content__item--wrapper">
<el-form :model="form" label-position="top" ref="form" label-width="100px" class="form" style="width: 100%;">
<el-form-item
prop="mallName"
label="当前绑定店铺"
style="width: 100%;"
:rules="[{ required: true, message: '请先登录拼多多跨境卖家中心', trigger: 'blur' }]">
<el-input readonly placeholder="请先登录拼多多跨境卖家中心" v-model="form.mallName"></el-input>
</el-form-item>
<el-form-item
prop="mallId"
v-show="false"
style="width: 100%;"
:rules="[{ message: '请输入店铺ID', trigger: 'blur' }]">
<el-input placeholder="请输入店铺ID" v-model="form.mallId"></el-input>
</el-form-item>
<el-form-item
prop="code"
label="激活码"
:rules="[{ required: true, message: '请输入激活码', trigger: 'blur' }]">
<el-input placeholder="请输入激活码" v-model="form.code"></el-input>
</el-form-item>
</el-form>
</div>
</div>
<div class="tab-content" v-if="tabIndex === 0">
<div class="title">基础功能</div>
<div class="tab-content__item--wrapper">
<div
class="tab-content__item"
:class="[currIndex === i ? 'active' : '']"
v-for="(price, i) in priceList"
:key="i"
@click="currIndex = i, getQrcode(price)">
<h3>{{ price.remark }}</h3>
<div class="price">
<i>¥</i>
<span>{{ price.price }}</span>
</div>
<div class="original-price">
<i>¥</i>
<span>{{ price.originPrice }}</span>
</div>
<p>{{ price.coin }}金币</p>
</div>
<div class="original-price">
<i>¥</i>
<span>{{ price.originPrice }}</span>
</div>
</div>
<div class="tab-content" v-if="tabIndex === 2">
<div class="title">标签合成</div>
<div class="tab-content__item--wrapper">
<div
class="tab-content__item"
:class="[currIndex === i ? 'active' : '']"
v-for="(price, i) in priceList"
:key="i"
@click="currIndex = i, getQrcode(price)">
<h3>{{ price.remark }}</h3>
<div class="price">
<i>¥</i>
<span>{{ price.price }}</span>
</div>
<div class="original-price">
<i>¥</i>
<span>{{ price.originPrice }}</span>
</div>
<p>{{ price.coin }}条/每年</p>
</div>
</div>
</div>
</div>
<div class="right">
<div class="right-price">
<i>¥</i>
<span class="price">88</span>
<div class="title" v-if="tabIndex !== 1">支付方式</div>
<div class="bottom" v-if="tabIndex !== 1">
<div class="bottom-left">
<div class="code">
<vue-qr v-if="qrcode" :text="qrcode" :size="110" :margin="0" :logoSrc="wechatLogo"/>
</div>
<div class="paytype">
<svg width="13" height="13" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
<path d="M12.11 0H.89A.89.89 0 0 0 0 .89v11.22c0 .491.399.89.89.89h11.22a.89.89 0 0 0 .89-.89V.89a.89.89 0 0 0-.89-.89zM6.5 10.65a5.592 5.592 0 0 1-1.848-.311c-.364.241-.975.639-1.215.75-.352.162-.25-.188-.25-.188L3.395 9.7C2.24 8.895 1.499 7.654 1.499 6.26c0-2.426 2.239-4.392 5-4.392 1.693 0 3.188.74 4.093 1.869l-4.905 2.27s-.4.152-.75-.062c-.35-.213-.813-.564-.813-.564s-.538-.458-.25.376l.751 1.756s.089.524.687.189c.468-.262 4.103-2.454 5.666-3.397a3.94 3.94 0 0 1 .523 1.954c0 2.425-2.239 4.391-5.001 4.391z" fill="#09BB07" fill-rule="nonzero"></path>
</svg>
<span>微信支付</span>
</div>
</div>
<div class="code">
<!-- <img src="../assets/code.png" /> -->
<vue-qr v-if="qrcode" :text="qrcode" :size="120" :margin="8" :logoSrc="wechatLogo"/>
<div class="bottom-right">
<div class="right-price">
<i>¥</i>
<span class="price">{{ currGoods.price || '' }}</span>
</div>
<div class="pay-btn">
<el-button round size="mini" style="margin-right: 10px;" @click="isShow = false">取消支付</el-button>
<el-button round size="mini" type="warning" @click="$store.dispatch('getUserInfo'), isShow = false">我已支付</el-button>
</div>
</div>
<div class="paytype">
<svg width="13" height="13" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
<path d="M12.11 0H.89A.89.89 0 0 0 0 .89v11.22c0 .491.399.89.89.89h11.22a.89.89 0 0 0 .89-.89V.89a.89.89 0 0 0-.89-.89zM6.5 10.65a5.592 5.592 0 0 1-1.848-.311c-.364.241-.975.639-1.215.75-.352.162-.25-.188-.25-.188L3.395 9.7C2.24 8.895 1.499 7.654 1.499 6.26c0-2.426 2.239-4.392 5-4.392 1.693 0 3.188.74 4.093 1.869l-4.905 2.27s-.4.152-.75-.062c-.35-.213-.813-.564-.813-.564s-.538-.458-.25.376l.751 1.756s.089.524.687.189c.468-.262 4.103-2.454 5.666-3.397a3.94 3.94 0 0 1 .523 1.954c0 2.425-2.239 4.391-5.001 4.391z" fill="#09BB07" fill-rule="nonzero"></path>
</svg>
<span>微信支付</span>
</div>
<div class="bottom" v-else>
<div class="bottom-left">
</div>
<div class="pay-btn">
<el-button round size="mini" style="margin-right: 10px;" @click="isShow = false">取消支付</el-button>
<el-button round size="mini" type="warning">我已支付</el-button>
<div class="bottom-right">
<div class="pay-btn">
<el-button round size="mini" type="warning" @click="onConfirm">确定</el-button>
</div>
</div>
</div>
</div>
@@ -76,9 +139,19 @@
</template>
<script>
import VueQr from 'vue-qr'
export default {
components: {
VueQr
},
data() {
return {
form: {
mallId: this.$store.state.mallId,
mallName: this.$store.state.mallName,
code: ''
},
isShow: false,
tabIndex: 0,
currIndex: 0,
@@ -87,15 +160,30 @@
}
},
computed: {
wechatLogo: () => require(`../assets/wechat_logo.png`),
currGoods () {
if (!this.priceList.length || this.tabIndex === 1) {
return {}
}
return this.priceList[this.currIndex]
}
},
mounted() {
this.getPriceList()
this.getPriceList(1)
},
methods: {
getPriceList() {
this.$http.post(`/api/priceConfig/page?module=2`).then(res => {
getPriceList(type) {
this.$http.post(`/api/priceConfig/page?module=${type}`).then(res => {
if (res.code === 0) {
this.priceList = res.data.records
if (res.data.records.length) {
this.getQrcode(res.data.records[0])
}
}
})
},
@@ -121,6 +209,39 @@
hide () {
this.isShow = false
},
onConfirm () {
this.$refs.form.validate((valid) => {
if (valid) {
this.$http.post(`/api/coupon/getDetail`, null, {
params: {
code: this.form.code
}
}).then(res => {
if (res.code == 0) {
let msg = this.getMessage(res.data.type);
this.$confirm(msg, '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'info'
}).then(() => {
this.$http.post(`/api/order/upgradeByCode`, null, {
params: {
...this.form
}
}).then(res => {
if (res.code == 0) {
this.$message.success('激活成功')
this.$store.dispatch('getUserInfo')
this.isShow = false
}
})
})
}
})
}
})
}
}
}
@@ -135,6 +256,15 @@
width: 100%;
height: 100%;
.title {
margin: 20px 0 10px 40px;
font-size: 16px;
text-align: left;
font-weight: 600;
color: #2a2b2e;
font-weight: normal;
}
.mask {
position: absolute;
left: 0;
@@ -150,9 +280,9 @@
top: 50%;
left: 50%;
z-index: 11;
width: 1100px;
height: 560px;
padding: 40px 60px;
min-width: 840px;
// height: 620px;
padding: 40px 40px;
transform: translate(-50%, -50%);
border-radius: 12px;
overflow: hidden;
@@ -161,7 +291,7 @@
.top {
display: flex;
align-items: center;
margin-bottom: 60px;
margin-bottom: 20px;
img {
width: 40px;
@@ -169,7 +299,6 @@
margin-right: 10px;
}
p {
color: #632e2e;
opacity: 0.8;
@@ -210,22 +339,20 @@
}
.middle {
display: flex;
height: 380px;
padding-bottom: 20px;
border-radius: 20px;
overflow: hidden;
background-color: #fff;
box-shadow: 0 0 20px 0 hsla(0, 39%, 56%, .1), 0 0 16px 0 rgba(0, 0, 0, .08);
.left {
.middle-top {
flex: 1;
padding: 0 0;
border-radius: 20px;
overflow: hidden;
background-color: #fff;
box-shadow: 0 0 20px 0 hsla(0, 39%, 56%, .1), 0 0 16px 0 rgba(0, 0, 0, .08);
.tab {
display: flex;
align-items: center;
height: 50px;
margin-bottom: 40px;
background: #fff3ee;
div {
@@ -263,12 +390,17 @@
}
.tab-content {
display: none;
align-items: center;
padding: 0 20px;
display: flex;
flex-direction: column;
padding: 0 40px;
&.active {
.title {
margin-left: 0;
}
&__item--wrapper {
display: flex;
align-items: center;
}
&__item {
@@ -276,9 +408,9 @@
align-items: center;
flex-direction: column;
width: 140px;
height: 190px;
height: 170px;
margin-right: 14px;
padding-top: 40px;
padding-top: 20px;
background-color: #fff;
border-radius: 10px;
cursor: pointer;
@@ -299,6 +431,11 @@
font-weight: 600;
}
p {
margin-top: 10px;
color: #d9451e;
}
.original-price {
display: flex;
align-items: center;
@@ -323,17 +460,30 @@
}
}
.right {
.bottom {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-left: 40px;
padding: 20px 0 20px 0;
justify-content: flex-end;
padding: 0 40px;
.bottom-right {
display: flex;
flex-direction: column;
align-items: center;
}
.bottom-left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-right: 20px;
}
.paytype {
display: flex;
align-items: center;
margin-top: 6px;
span {
margin-left: 8px;
@@ -364,9 +514,8 @@
}
.code {
width: 150px;
height: 150px;
margin: 14px 0;
width: 110px;
height: 110px;
}
}
}

13
src/components/print/Print.vue
View File

@@ -248,15 +248,10 @@
"name": 1,
"height": 200,
"width": 200,
"paperHeader": 0,
"paperFooter": 547,
"printElements": [],
"paperNumberLeft": 500,
"paperNumberTop": 530,
"paperNumberDisabled": true,
"paperNumberContinue": true,
"fontFamily": "Microsoft YaHei",
"scale": 1,
"watermarkOptions": {}
}]
}
@@ -586,8 +581,12 @@
// js打印（不显示设计界面）
toPrint (template, printData) {
this.hiprintTemplate.update(template)
this.hiprintTemplate.print(printData)
this.hiprintTemplate = newHiprintPrintTemplate('temulables')
setTimeout(() => {
this.hiprintTemplate.update(template)
this.hiprintTemplate.print(printData)
}, 100)
},
elementToString(el) {

19
src/store/index.js
View File

@@ -15,7 +15,8 @@ export default new Vuex.Store({
activeDlgShow: false,
showSheinAlert: false,
showTemuAlert: false,
userInfo: {}
userInfo: {},
labelInfo: {}
},
mutations: {
@@ -54,6 +55,9 @@ export default new Vuex.Store({
},
setTemuAlertShow(state, flag) {
state.showTemuAlert = flag
},
setLabelInfo(state, info) {
state.info = info
}
},
@@ -66,8 +70,21 @@ export default new Vuex.Store({
resolve(res.data)
}
})
this.getLabelInfo()
})
},
getLabelInfo(store) {
return new Promise(resolve => {
request.post('/api/userExtend/getLabelDetail').then(res => {
if (res.code === 0) {
store.commit('setLabelInfo', res.data)
resolve(res.data)
}
})
})
},
SignOut(store, isClear) {
if (isClear) {
store.commit('logout')

8
src/view/lables/AddTemplate.vue
View File

@@ -72,10 +72,10 @@
mounted() {
this.printData = {
labelCode: 96778555251,
productSkuId: 6606980005,
skuExtCode: 'AAA1100mWh-orange',
skuSpecName: '8pcs'
labelCode: 123456789,
productSkuId: `XXXXXXXXXXXXXX`,
skuExtCode: 'XXXXXXXXXXXXXX',
skuSpecName: 'XXXXX'
}
if (this.$route.query.id) {

29
src/view/lables/Print.vue
View File

@@ -53,20 +53,6 @@
clearable
suffix-icon="iconfont iconSearch">
</el-input>
<el-select
clearable
v-model="search.templateId"
placeholder="请选择模板"
size="small"
@change="getList"
style="margin-left: 10px;">
<el-option
v-for="item in templateList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<el-button style="margin-left: 10px;" @click="getList" size="small" :loading="isLoading">查询</el-button>
</div>
</div>
@@ -93,7 +79,7 @@
width="890px"
@confirm="onConfirm">
<el-form class="ai-form" :model="form" ref="form" label-width="100px">
<el-form-item label="标签名称" style="width: 100%;" prop="count" :rules="[{ required: true, message: '请输入打印数量', trigger: 'change' }]">
<el-form-item label="打印数量" style="width: 100%;" prop="count" :rules="[{ required: true, message: '请输入打印数量', trigger: 'change' }]">
<el-input-number v-model="form.count" :min="1" :max="500" label="请输入打印数量"></el-input-number>
</el-form-item>
</el-form>
@@ -159,21 +145,12 @@
},
mounted() {
this.getTemplateList()
this.$nextTick(() => {
this.height = document.querySelector('.ai-list__content--right').clientHeight - 140
})
},
methods: {
getTemplateList () {
this.$http.post('/api/template/getPage?size=-1').then(res => {
if (res.code === 0) {
this.templateList = res.data.records
}
})
},
toPrint(row) {
this.isLoading = true
if (this.addType === '1') {
@@ -184,7 +161,6 @@
}
this.$http.post(`/api/template/detail?id=${res.data.records[0].id}`).then(res => {
this.isLoading = false
if (res.code === 0) {
const params = JSON.parse(res.data.params)
const getValue = v => params.filter(e => e.fieldValue === v)[0].fieldName
@@ -194,7 +170,10 @@
}
})
this.isLoading = false
this.$refs.printRef.toPrint(JSON.parse(res.data.content), new Array(row.deliveryNum).fill(row))
} else {
this.isLoading = false
}
})
})