wanghongjun
2 years ago
14 changed files with 1679 additions and 201 deletions
@ -0,0 +1,79 @@ |
|||
<template> |
|||
<view v-if="!isLoading" class="empty-content" :style="customStyle"> |
|||
<view class="empty-icon"> |
|||
<image class="image" src="/static/tabbar/cart_empty.jpg" mode="widthFix"></image> |
|||
</view> |
|||
<view class="tips">{{ tips }}</view> |
|||
<slot name="slot"></slot> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
/** |
|||
* 组件的属性列表 |
|||
* 用于组件自定义设置 |
|||
*/ |
|||
props: { |
|||
// 正在加载 |
|||
isLoading: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 自定义样式 |
|||
customStyle: { |
|||
type: Object, |
|||
default () { |
|||
return {} |
|||
} |
|||
}, |
|||
// 提示的问题 |
|||
tips: { |
|||
type: String, |
|||
default: '亲，暂无相关数据' |
|||
} |
|||
}, |
|||
|
|||
data() { |
|||
return {} |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.empty-content { |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
padding: 140rpx 50rpx; |
|||
text-align: center; |
|||
margin-top: calc(50% - 200rpx); |
|||
|
|||
.tips { |
|||
font-size: 28rpx; |
|||
color: gray; |
|||
margin: 50rpx 0; |
|||
} |
|||
.empty-icon { |
|||
padding: 0rpx; |
|||
width: 350rpx; |
|||
height: 350rpx; |
|||
border: #cfcfcf 1rpx solid; |
|||
border-radius: 50%; |
|||
margin-left: calc(50% - 175rpx); |
|||
z-index: 2; |
|||
background-color: #ffffff; |
|||
|
|||
} |
|||
.image { |
|||
z-index: 1; |
|||
width: 245rpx; |
|||
margin-top: 50rpx; |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,263 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<view class="item-pay"> |
|||
<view class="item-pay-con"> |
|||
<view class="item-pay-con-ti">选择支付方式</view> |
|||
<button class="item-pay-con-bu" :class="{'item-pay-con-bu-show': payType === items.value}" v-for="items in payTypeArr" @click="changePayType(items.value)">{{items.title}}</button> |
|||
</view> |
|||
|
|||
<view class="item-pay-con"> |
|||
<view class="item-pay-con-ti"> |
|||
认证缴费订单 |
|||
</view> |
|||
<view class="item-pay-con-tab"> |
|||
<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据"> |
|||
<uni-tr> |
|||
<uni-th width="140" align="center">订单号</uni-th> |
|||
<uni-th width="120" align="center">姓名</uni-th> |
|||
<uni-th align="center">订单金额</uni-th> |
|||
</uni-tr> |
|||
<uni-tr v-for="(item, index) in tableList" :key="index"> |
|||
<uni-td>{{ item.pay_no }}</uni-td> |
|||
<uni-td> |
|||
<view class="name">认证缴费订单</view> |
|||
</uni-td> |
|||
<uni-td align="center">{{ item.address }}</uni-td> |
|||
</uni-tr> |
|||
</uni-table> |
|||
<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="item-pay"> |
|||
<image class="item-pay-img" v-if="is_show_img" :src="pay_image"></image> |
|||
<text class="item-pay-prompt" v-if="is_show_img">请扫码支付！</text> |
|||
<button class="item-pay-sub" :disabled="isDisabled" @click="handlerPay">确认支付</button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import * as GoodsApi from '@/api/goods' |
|||
import uniTable from "@/uni_modules/uni-table/components/uni-table/uni-table" |
|||
import uniTr from "@/uni_modules/uni-table/components/uni-tr/uni-tr" |
|||
import uniTh from "@/uni_modules/uni-table/components/uni-th/uni-th" |
|||
import uniTd from "@/uni_modules/uni-table/components/uni-td/uni-td" |
|||
import uniPagination from "@/uni_modules/uni-pagination/components/uni-pagination/uni-pagination" |
|||
|
|||
export default { |
|||
name: "payment", |
|||
components: { |
|||
'uni-table': uniTable, |
|||
'uni-tr': uniTr, |
|||
'uni-th': uniTh, |
|||
'uni-td': uniTd, |
|||
'uni-pagination': uniPagination, |
|||
}, |
|||
data () { |
|||
return { |
|||
tableList: [], |
|||
payTypeArr: [ |
|||
{ |
|||
title: '网银支付', |
|||
value: 15 |
|||
},{ |
|||
title: '支付宝', |
|||
value: 12 |
|||
}, |
|||
], |
|||
payType: 15, |
|||
loading: false, |
|||
selectedIndexs: [], |
|||
pageSize: 10, // 每页数据量 |
|||
pageCurrent: 1, // 当前页 |
|||
total: 0, // 数据总量 |
|||
good_money: 0, // 交易金额 |
|||
isDisabled: false, // 按钮禁用 |
|||
is_show_img: false, // 显示图片 |
|||
pay_image: '', // 显示图片 |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.selectedIndexs = [] |
|||
this.getTableList() |
|||
}, |
|||
methods: { |
|||
// 切换支付类型 |
|||
changePayType(val) { |
|||
this.payType = val |
|||
}, |
|||
// 分页触发 |
|||
change(e) { |
|||
this.$refs.table.clearSelection() |
|||
this.selectedIndexs.length = 0 |
|||
this.getData(e.current) |
|||
}, |
|||
// 获取订单列表 |
|||
getTableList(pageNo = 1) { |
|||
const app = this |
|||
let param = { |
|||
userid : uni.getStorageSync("accountId"), |
|||
isok : 2, |
|||
} |
|||
return new Promise((resolve, reject) => { |
|||
GoodsApi.paymentList(param).then(res => { |
|||
if (res.resultCode === "00000000") { |
|||
app.tableList = res.data |
|||
//app.good_money = res.data[0].paysum |
|||
} else { |
|||
app.$error(res.errMsg); |
|||
} |
|||
resolve() |
|||
}).catch(reject) |
|||
}) |
|||
}, |
|||
// 确认支付 |
|||
handlerPay () { |
|||
const app = this |
|||
let shopnameArr = [] |
|||
let shop_price_arr = [] |
|||
app.tableList.forEach((item) => { |
|||
shopnameArr.push = item.pay_no |
|||
shop_price_arr.push = item.paysum |
|||
}) |
|||
let shopname = shopnameArr.join(',') |
|||
let shop_price = shop_price_arr.join(',') |
|||
let new_shop_Name = '' |
|||
let Merchant_id = uni.getStorageSync("Merchant_id") // 商户id |
|||
let accountId = uni.getStorageSync("accountId") // 用户isli |
|||
|
|||
//计算交易金额 |
|||
let manyMony = 0; |
|||
manyMony = (Number(app.good_money * 100)).toFixed(0); |
|||
|
|||
let payment = { |
|||
amount: manyMony, //交易金额 |
|||
app_id: Merchant_id, //发送请求的公司id |
|||
body: "认证缴费订单", //订单描述 |
|||
businesstype: 1001, //交易类型1001-销售收款，2001-消费付款 |
|||
ordernumber: shopname, //订单号 |
|||
paymenttypeid: app.payType, //12支付宝，13微信 15 网银支付 |
|||
subpaymenttypeid: app.payType, //12支付宝，13微信 15 网银支付 |
|||
businesstime: app.getDayTimer(new Date()), |
|||
buyer: accountId, //客户(买方) 用户isli |
|||
chargeuptype: 2, //收支类型1-收入2-支出, |
|||
goodsname: "认证缴费订单", //商品名称 |
|||
orderamount: manyMony, //订单金额(单位分) |
|||
payorderid: shopname, //交易流水号 |
|||
price: shop_price, //商品单价(单位分) |
|||
seller: accountId, //商户(卖方) |
|||
settlementamount: manyMony, //结算金额(分) |
|||
settlementtype: 2, //结算方式:1-转账充值;2-内部转账 |
|||
totalqty: 1 //商品数量 |
|||
} |
|||
|
|||
if (new_shop_Name == "") { |
|||
app.isDisabled = true |
|||
payment.body = encodeURIComponent(payment.body, "ut-8") |
|||
payment.goodsname = encodeURIComponent(payment.goodsname, "ut-8") |
|||
//确认支付接口 |
|||
let paramArr = ''; |
|||
for (let key in payment) { |
|||
paramArr.push(key + '=' + payment[key]) |
|||
} |
|||
let paramStr = '?' + paramArr.join('&') |
|||
GoodsApi.certificationPay(paramStr).then(res => { |
|||
if (res.resultCode == '00000000') { |
|||
if (app.payType != 15) { |
|||
app.is_show_img = true |
|||
app.pay_image = res.data.qrcodeurl |
|||
} else { |
|||
app.$success('支付成功') |
|||
this.getTableList() |
|||
} |
|||
} |
|||
}) |
|||
|
|||
} else { |
|||
app.$error(new_shop_Name + "无法购买") |
|||
} |
|||
}, |
|||
//转换时间 |
|||
getDayTimer (data) { |
|||
let date = new Date(data) |
|||
let y = date.getFullYear() |
|||
let m = date.getMonth() + 1 |
|||
m = m < 10 ? ('0' + m) : m |
|||
let d = date.getDate() |
|||
d = d < 10 ? ('0' + d) : d |
|||
let currentdate = y + '-' + m + '-' + d; |
|||
let hh = date.getHours() |
|||
hh = hh < 10 ? ('0' + hh) : hh |
|||
let mm = date.getMinutes() |
|||
mm = mm < 10 ? ('0' + mm) : mm |
|||
let ss = date.getSeconds() |
|||
ss = ss < 10 ? ('0' + ss) : ss |
|||
let time = hh + ':' + mm + ':' + ss; |
|||
return currentdate + " " + time |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.container { |
|||
width: 100%; |
|||
|
|||
.item-pay { |
|||
|
|||
|
|||
.item-pay-con { |
|||
margin-top: 30rpx; |
|||
padding-top: 30rpx; |
|||
|
|||
.item-pay-con-ti { |
|||
height: 50rpx; |
|||
margin-left: 20rpx; |
|||
padding-left: 10px; |
|||
border-left: #407ac4 10rpx solid; |
|||
display: flex; |
|||
align-items: center; |
|||
text-align: center; |
|||
} |
|||
|
|||
.item-pay-con-bu { |
|||
width: 200rpx; |
|||
margin-top: 30rpx; |
|||
margin-left: 50rpx; |
|||
border-radius: 15rpx; |
|||
display: inline-block; |
|||
border: #e5e5e5 1rpx solid; |
|||
background-color: #e5e5e5; |
|||
} |
|||
.item-pay-con-bu-show { |
|||
background-color: #defedc; |
|||
} |
|||
|
|||
} |
|||
|
|||
.item-pay-sub { |
|||
color: #ffffff; |
|||
margin-top: 200rpx; |
|||
background-color: #407ac4; |
|||
} |
|||
|
|||
.item-pay-img { |
|||
width: 200px; |
|||
height: 200px; |
|||
margin-top: 15%; |
|||
margin-left: 25%; |
|||
background-color: #eeeeee; |
|||
} |
|||
|
|||
.item-pay-prompt { |
|||
display: block; |
|||
text-align: center; |
|||
color: red; |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,167 @@ |
|||
<template> |
|||
<view class="privacy"> |
|||
<view class="prizone"> |
|||
<view class="pri_h">文化数据交易协议</view> |
|||
<text class="trade_p"> |
|||
本协议是被授权方/买方签订的交易（转让/授权）协议，对被授权方/买方购买/被授权授权方/卖方交易标的的行为作出规定。如果被授权方/买方通过全国文化大数据交易中心（以下简称“平台”）购买/被授权交易标的的，视为接受本协议的条款。依据《中华人民共和国著作权法》《中华人民共和国民法典》等有关法律法规和《国家文化大数据交易规则（试行）》及其他相关配套规定，现就文化大数据交易相关事宜达成如下协议，以咨共同遵守。 |
|||
</text> |
|||
<text class="trade_p"> |
|||
本协议中的部分条款仅针对特定的交易类别和交易方式（即转让或授权）适用，详见本协议具体条款标注说明，未作特定标注说明的适用于所有情形。 |
|||
</text> |
|||
<text class="trade_bold">一、转让/授权范围</text> |
|||
<text class="trade_p">1.1 转让情形适用</text> |
|||
<text class="trade_p"> |
|||
（1）转让范围包括但不限于复制权、发行权、出租权、展览权、表演权、放映权、广播权、信息网络传播权、摄制权、改编权、翻译权、汇编权、应当由著作权人享有的使用作品的其他权利的单个、组合或全部权利转让。 |
|||
</text> |
|||
<text class="trade_p"> |
|||
（2）转让分单一转让和批量转让。授权方/卖方采用哪种转让方式以平台最终展示的标的详情信息为准。 |
|||
</text> |
|||
<text class="trade_p">1.2授权情形适用</text> |
|||
<text class="trade_p"> |
|||
（1）授权方授权的一定时间和区域内包括但不限于复制权、发行权、出租权、展览权、表演权、放映权、广播权、信息网络传播权、摄制权、改编权、翻译权、汇编权、应当由著作权人享有的使用作品的其他权利及其他的单个、组合或全部权利授权。 |
|||
</text> |
|||
<text class="trade_p">（2）授权方式包括：</text> |
|||
<text class="trade_p">授权数量划分：授权分单一授权和批量授权。</text> |
|||
<text class="trade_p">按授权权益类型划分：授权分交易标的财产权的单一权益、组合权益与全部权益的授权。</text> |
|||
<text class="trade_p">按授权时限划分：阶段性授权、永久性授权。</text> |
|||
<text class="trade_p">按授权性质划分：普通授权、排他授权、独占授权。</text> |
|||
<text class="trade_p"> |
|||
（3）您可以选择使用上述授权方式进行交易，也可以同时使用上述几种组合授权方式，具体授权方式以平台最终展示的标的详情信息为准。当以单个或组合权利授权时，被授权方不得使用未获得授权的其他权利。未经授权方书面同意，被授权方无权将授权权利转授权第三方。 |
|||
</text> |
|||
<text class="trade_bold">二、交易方式及交易标的</text> |
|||
<text class="trade_p"> |
|||
2.1以授权方/卖方自主报价、被授权方/买方点选成交为主；同时当交易主体有指定匹配需求时，交易机构提供服务商评估价和撮合成交为辅的交易方式。 |
|||
</text> |
|||
<text class="trade_p"> |
|||
2.2<span class="trade_bold decora_line"> |
|||
被授权方/买方通过平台点选交易标的，并支付成功的，视为被授权方/买方已经对交易标的及其价格进行了尽调且予以认可，是被授权方/买方意愿的真实表示。被授权方/买方应承担操作及购买/被授权交易标的所带来的一切权利义务及风险，平台不对被授权方/买方的操作行为做任何承诺以及承担任何责任。 |
|||
</span> |
|||
</text> |
|||
<text class="trade_bold">三、标的价款与费用</text> |
|||
<text class="trade_p"> |
|||
3.1 转让/授权标的价款以点击支付为准，您同意并认可交易价款先行支付至平台结算账户，使用平台系统统一结算。 |
|||
</text> |
|||
<text class="trade_p"> |
|||
3.2 交易标的转让/授权中涉及的交易佣金、服务佣金，按照《国家文化大数据交易规则（试行）》及相关配套规定、相关收费标准及平台发布的管理规定等要求执行。 |
|||
</text> |
|||
<text class="trade_p"> |
|||
3.3 交易标的转让/授权中涉及的有关税费，按照国家有关法律规定缴纳。 |
|||
</text> |
|||
<text class="trade_bold">四、标的交割</text> |
|||
<text class="trade_p"> |
|||
被授权方/买方付款完成后可下载相关数据，<span class="trade_bold decora_line">7个自然日内</span>未下载完毕则系统默认交易成功并进行结算。 |
|||
</text> |
|||
<text class="trade_bold">五、承诺与保证</text> |
|||
<text class="trade_p"> |
|||
5.1 授权方/卖方承诺并保证您系文化数据中作品的权利人，享有该作品著作权权利或者您已获得处分文化数据所需的授权，有权处分或行使作品的相关权利而无需其他作品权利人同意。您承诺作品不存在抄袭、剽窃他人作品或侵犯任何其他第三人知识产权、智力成果及合法权益的情形。您所授权/转让的作品不存在可能被第三人主张权利的瑕疵。 |
|||
</text> |
|||
<text class="trade_p"> |
|||
5.2 被授权方/买方承诺并保证您的资金为合法、安全的自有资金，不存在不诚实经营、诈骗客户资金等违法经营行为所得或盗窃、受贿、侵占挪用公司财产、毒品犯罪、黑社会性质的组织犯罪、恐怖活动犯罪、走私犯罪、贪污贿赂犯罪、破坏金融管理秩序犯罪、金融诈骗犯罪等行为所得资金，不存在洗钱行为来掩饰其资金非法来源，获取不法收益的行为。不涉及与洗钱相关的大额现金交易、可疑交易、恐怖融资交易。 |
|||
</text> |
|||
<text class="trade_p"> |
|||
5.3 您承诺并保证有签订和履行本协议全部义务所必需的所有合法权利以及所有内部和外部的批准、授权和许可，具备签订和履行本协议的能力与资质。包括但不限于法律及公司章程规定的股东会、董事会批准，您提交的文件、资料等均是真实、全面和有效的。 |
|||
</text> |
|||
<text class="trade_p"> |
|||
5.4 您确认并承诺对交易各项内容均予以充分知晓和理解，本次交易属于交易双方真实意思表示，并经双方审慎决策完成本次交易。 |
|||
</text> |
|||
<text class="trade_p trade_bold"> |
|||
5.5您承诺并保证所有合作机构及其下属公司、关联公司的法定代表人、实际控制人及高管人员不得为平台约定不得从事的业务进行站台、背书，或进行业务关联。 |
|||
</text> |
|||
<text class="trade_p"> |
|||
5.6被授权方/买方承诺并保证不得以淫秽、诋毁性或其他非法形式或违反任何适用法规或行业规范的形式使用交易标的的内容。 |
|||
</text> |
|||
<text class="trade_bold">六、保密条款</text> |
|||
<text class="trade_p"> |
|||
6.1各方应当在对讨论、签订、履行本协议过程中所获悉的属于对方的无法从公开渠道获取的文件及资料（包括但不限于商业秘密、公司计划、运营活动、财务信息、技术信息、经营信息、数据信息、交易标的信息以及其他商业秘密等）予以保密。未经对方同意，另一方不得超出本协议约定的目的和范围使用上述信息，不得向任何第三方泄漏上述信息。 |
|||
</text> |
|||
<text class="trade_p"> |
|||
6.2 除本协议规定之工作所需外，未经对方事先书面同意，任何一方不得擅自使用、复制对方的商标、标志、商业信息、技术及其他资料。 |
|||
</text> |
|||
<text class="trade_p"> |
|||
6.3 本保密条款不因双方协议的终止而无效。在协议终止后，本保密条款对各方仍具有约束力。 |
|||
</text> |
|||
<text class="trade_bold">七、违约责任</text> |
|||
<text class="trade_p"> |
|||
7.1 因授权方/卖方作品权利存在瑕疵或者授权方/卖方处分权利存在瑕疵，导致被授权方/买方无法正常行使被授权或使用权利的，被授权方/买方有权解除本协议，并要求授权方/卖方赔偿因第三方索赔导致被授权方/买方支出的诉讼仲裁成本、向第三方支付的赔偿等全部损失。 |
|||
</text> |
|||
<text class="trade_p"> |
|||
7.2 任何一方有其他违反本协议情形的，应赔偿守约方全部损失，该损失包括但不限于对守约方所造成的直接损失、可得利益损失、守约方支付给第三方的赔偿费用/违约金/罚款、调查取证费用/公证费、诉讼费用、律师费用以及因此而支付的其他合理费用。 |
|||
</text> |
|||
<text class="trade_p"> |
|||
7.3在协议生效后，交易双方应按时履行付款义务或交割义务，非特殊情况不得随意撤销交易。任一方不按约履行付款义务或交割义务或随意撤销交易，另一方有权要求违约方赔偿全部损失。该损失包括但不限于对守约方所造成的直接损失、可得利益损失、守约方支付给第三方的赔偿费用/违约金/罚款、调查取证费用/公证费、诉讼费用、律师费用以及因此而支付的其他合理费用。 |
|||
</text> |
|||
<text class="trade_bold">八、争议解决</text> |
|||
<text class="trade_p trade_bold decora_line"> |
|||
本协议的签署地点为中华人民共和国深圳市福田区，因本协议以及本协议项下订单/附件/补充协议等（如有）引起或有关的任何争议，由协议各方协商解决，也可由有关部门调解。协商或调解不成的，任何一方可向深圳市福田区人民法院诉讼解决。 |
|||
</text> |
|||
<text class="trade_bold">九、协议生效</text> |
|||
<text class="trade_p">9.1本协议自您勾选确认后生效。</text> |
|||
<text class="trade_p trade_bold decora_line"> |
|||
9.2本协议生效，即表示您主动接受本协议的各项约定，并愿意就违反本协议约定承担相应的法律责任。现有的协议约定也不能保证完全符合未来发展的需求。因此，平台发布的文化大数据交易规则及相关配套规定、管理制度及相关声明均为本协议的补充约定，与本协议不可分割且具有同等法律效力，经平台公布即生效。如您使用平台服务或参与文化大数据交易活动，视为被授权方/买方同意上述补充约定。 |
|||
</text> |
|||
<text class="trade_p"> |
|||
9.3您须知本协议中任何条款被废止、无效或因任何理由不可执行，不影响任何其它条款的有效性和可执行性。 |
|||
</text> |
|||
<text class="trade_p"> |
|||
9.4平台保留在法律框架下对本协议的解释权和修订权。 |
|||
</text> |
|||
<text class="trade_bold decora_line"> |
|||
特别提示：您在进行交易之前，请您务必审慎阅读并充分理解本协议各条款内容，特别是涉及免除或者限制责任的条款、对权利进行限制的条款、争议解决条款等。其中，免除或者限制责任条款将以加粗、加下划线等形式提示您注意，您应重点阅读。 |
|||
</text> |
|||
<text class="trade_bold decora_line"> |
|||
如您自主选择进行交易的，即视为您已充分理解本协议，完全同意本协议各项内容，并同意作为本协议的一方当事人接受本协议及相关协议和规则的约束。 |
|||
</text> |
|||
<text class="trade_p"> |
|||
（以下无正文） |
|||
</text> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.privacy{ |
|||
width: 100%; |
|||
// min-height: 100vh; |
|||
overflow-y: auto; |
|||
|
|||
.prizone{ |
|||
padding: 12rpx; |
|||
line-height: 1.6; |
|||
text-indent: 32rpx; |
|||
|
|||
text{ |
|||
display: block; |
|||
} |
|||
|
|||
.pri_h{ |
|||
font-size: 42rpx; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.trade_p{ |
|||
font-size: 32rpx; |
|||
} |
|||
.trade_bold{ |
|||
font-size: 34rpx; |
|||
font-weight: 600; |
|||
} |
|||
.trade_p_nobold{ |
|||
padding-left: 12rpx; |
|||
text-indent: 36rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,543 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<!-- 购物车商品列表 --> |
|||
<view v-if="list.length" class="cart-list"> |
|||
<view class="cart-item" v-for="(item, index) in list" :key="index"> |
|||
<view class="goods-name"> |
|||
<label class="item-radio" @click.stop="handleCheckItem(item.goods_isli)"> |
|||
<radio class="radio" color="#fa2209" :checked="inArray(item.goods_isli, checkedIds)" /> |
|||
</label> |
|||
<view class="item-title" @click="handleGoodsList(item.username)"> |
|||
<text class="item-title-name">委托方：{{item.username}}</text> |
|||
</view> |
|||
<uni-icons class="item-del-inco" type="trash" size="30" @click="onClearCart(item.goods_isli)"></uni-icons> |
|||
</view> |
|||
<view class="item-content" @click="handleGoodsDetail(item.goods_islicode)"> |
|||
<view class="goods-image"> |
|||
<image class="image" :src="item.detail.goods_image" mode="scaleToFill"></image> |
|||
</view> |
|||
<view class="goods-title" @click="onTargetGoods(item.goods_id)"> |
|||
<text class="goods-title-name">{{ item.detail.goods_name }}</text> |
|||
<text class="goods-title-content">交易方式：{{ item.detail.goods_entrust?'转让':'授权' }}</text> |
|||
<text class="goods-title-content">购买年限：{{ item.use_years }}年</text> |
|||
<text class="goods-title-content">单价：￥{{ item.goods_price }}</text> |
|||
</view> |
|||
<view class="item-foot"> |
|||
<view class="goods-price"> |
|||
<text>合计：</text> |
|||
<text class="unit">￥</text> |
|||
<text class="value">{{ item.use_years * item.goods_price }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 购物车数据为空 --> |
|||
<empty-cart v-if="!list.length" :isLoading="isLoading" :custom-style="{ padding: '180rpx 50rpx' }" tips="购物车暂无标的"> |
|||
<view slot="slot" class="empty-ipt" @click="onTargetIndex"> |
|||
<text>去首页逛逛</text> |
|||
</view> |
|||
</empty-cart> |
|||
<!-- 底部操作栏 --> |
|||
<view v-if="list.length" class="footer-fixed"> |
|||
<label class="all-radio" @click="handleCheckAll"> |
|||
<radio class="radio" color="#fa2209" :checked="checkedIds.length > 0 && checkedIds.length === list.length" /> |
|||
<text>全选</text> |
|||
</label> |
|||
<view class="total-info"> |
|||
<text>合计：</text> |
|||
<view class="goods-price"> |
|||
<text class="unit">￥</text> |
|||
<text class="value">{{ totalPrice }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="cart-action"> |
|||
<view class="btn-wrapper"> |
|||
<!-- dev:下面的disabled条件使用checkedIds.join方式判断 --> |
|||
<!-- dev:通常情况下vue项目使用checkedIds.length更合理, 但是length属性在微信小程序中不起作用 --> |
|||
<view v-if="mode == 'normal'" class="btn-item btn-main" :class="{ disabled: checkedIds.join() == '' && is_shop }" @click="handleOrder()"> |
|||
<text>去结算 {{ checkedIds.length > 0 ? `(${checkedIds.length})` : '' }}</text> |
|||
</view> |
|||
<!-- <view v-if="mode == 'edit'" class="btn-item btn-main" :class="{ disabled: !checkedIds.length }" @click="handleDelete()">--> |
|||
<!-- <text>删除</text>--> |
|||
<!-- </view>--> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { inArray, arrayIntersect, debounce } from '@/utils/util' |
|||
import { checkLogin, setCartTotalNum, setCartTabBadge } from '@/core/app' |
|||
import * as UserApi from '@/api/user' |
|||
import EmptyCart from '@/components/empty-cart' |
|||
import uniIcons from '../../../uni_modules/uni-icons/components/uni-icons/uni-icons' |
|||
import {createOrder, delShopCart} from "../../../api/user"; |
|||
|
|||
const CartIdsIndex = 'CartIds' |
|||
|
|||
export default { |
|||
components: { |
|||
"empty-cart": EmptyCart, |
|||
"uni-icons": uniIcons, |
|||
}, |
|||
data() { |
|||
return { |
|||
inArray, |
|||
// 正在加载 |
|||
isLoading: true, |
|||
// 当前模式: normal正常 edit编辑 |
|||
mode: 'normal', |
|||
// 购物车商品列表 |
|||
list: [], |
|||
// 购物车商品总数量 |
|||
total: null, |
|||
// 选中的商品ID记录 |
|||
checkedIds: [], |
|||
// 选中的商品总金额 |
|||
totalPrice: '0.00', |
|||
// 是否禁用按钮 |
|||
is_shop: false, |
|||
} |
|||
}, |
|||
watch: { |
|||
// 监听选中的商品 |
|||
checkedIds: { |
|||
handler(val) { |
|||
// 计算合计金额 |
|||
this.onCalcTotalPrice() |
|||
// 记录到缓存中 |
|||
uni.setStorageSync(CartIdsIndex, val) |
|||
}, |
|||
immediate: false |
|||
}, |
|||
// 监听购物车商品总数量 |
|||
total(val) { |
|||
// 缓存并设置角标 |
|||
setCartTotalNum(val) |
|||
setCartTabBadge() |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow(options) { |
|||
// 获取购物车商品列表 |
|||
checkLogin() ? this.getCartList() : this.isLoading = false |
|||
// 获取缓存中的选中记录 |
|||
this.checkedIds = uni.getStorageSync(CartIdsIndex) ? uni.getStorageSync(CartIdsIndex) : [] |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
// 计算合计金额 (根据选中的商品) |
|||
onCalcTotalPrice() { |
|||
const app = this |
|||
// 选中的商品记录 |
|||
const checkedList = app.list.filter(item => inArray(item.goods_isli, app.checkedIds)) |
|||
// 计算总金额 |
|||
let tempPrice = 0; |
|||
checkedList.forEach(item => { |
|||
// 商品单价, 为了方便计算先转换单位为分 (整数) |
|||
const unitPrice = item.total_money * 100 |
|||
tempPrice += unitPrice |
|||
}) |
|||
app.totalPrice = (tempPrice / 100).toFixed(2) |
|||
}, |
|||
|
|||
// 获取购物车商品列表 |
|||
getCartList() { |
|||
const app = this |
|||
app.isLoading = true |
|||
let param = { |
|||
user_isli: uni.getStorageSync("isliCode") |
|||
} |
|||
UserApi.getShopCart(param) |
|||
.then(result => { |
|||
if (result.code == '200') { |
|||
app.list = result.data |
|||
app.total = result.data.length |
|||
} |
|||
// 清除checkedIds中无效的ID |
|||
app.onClearInvalidId() |
|||
}) |
|||
.finally(() => app.isLoading = false) |
|||
}, |
|||
|
|||
// 清除checkedIds中无效的ID |
|||
onClearInvalidId() { |
|||
const app = this |
|||
const listIds = app.list.map(item => item.id) |
|||
app.checkedIds = arrayIntersect(listIds, app.checkedIds) |
|||
}, |
|||
|
|||
// 切换当前模式 |
|||
handleToggleMode() { |
|||
this.mode = this.mode == 'normal' ? 'edit' : 'normal' |
|||
}, |
|||
|
|||
// 跳转到商品详情页 |
|||
onTargetGoods(goodsId) { |
|||
this.$navTo('pages/goods/detail', { goodsId }) |
|||
}, |
|||
|
|||
// 点击去逛逛按钮, 跳转到首页 |
|||
onTargetIndex() { |
|||
this.$navTo('pages/index/index') |
|||
}, |
|||
|
|||
// 选中商品 |
|||
handleCheckItem(cartId) { |
|||
const { checkedIds } = this |
|||
const index = checkedIds.findIndex(id => id === cartId) |
|||
index < 0 ? checkedIds.push(cartId) : checkedIds.splice(index, 1) |
|||
}, |
|||
|
|||
// 全选事件 |
|||
handleCheckAll() { |
|||
const { checkedIds, list } = this |
|||
this.checkedIds = checkedIds.length === list.length ? [] : list.map(item => item.goods_isli) |
|||
}, |
|||
|
|||
// 结算选中的商品 |
|||
handleOrder() { |
|||
const app = this |
|||
if (app.checkedIds.length) { |
|||
let user_isli = uni.getStorageSync("isliCode") |
|||
let userType = uni.getStorageSync("userType") |
|||
if (user_isli) { |
|||
if (userType === "0") { |
|||
app.$toast('个人认证账号不能提交订单！') |
|||
} else { |
|||
|
|||
let paramArr = { |
|||
manyislicode: [], |
|||
manyYears: [], |
|||
new_shop_Name: [], |
|||
new_userName: [], |
|||
new_company: [] |
|||
} |
|||
|
|||
for (let attr in app.list) { |
|||
let item = app.list[attr] |
|||
if (inArray(item.goods_isli, app.checkedIds)) { |
|||
paramArr.manyislicode.push(item.goods_islicode) |
|||
paramArr.manyYears.push(item.use_years) |
|||
//拼接撤销数据的名称 |
|||
if (item.goods_status != 1 && item.goods_status != 5) { |
|||
paramArr.new_shop_Name.push(item.detail.goods_name) |
|||
} |
|||
paramArr.new_userName.push(item.username) |
|||
if (item.username == "北京玖扬博文文化发展有限公司" && item.detail.charges_type == "1") { |
|||
paramArr.new_company.push(item.username) |
|||
} |
|||
} |
|||
} |
|||
|
|||
let manyislicode = paramArr.manyislicode.join(",");//购买方用户委托关联编码 用，拼接 |
|||
let manyYears = paramArr.manyYears.join(","); |
|||
let new_shop_Name = paramArr.new_shop_Name.join(","); |
|||
let new_userName = paramArr.new_userName.join(","); //判断是不是中国数字文化集团有限公司,国家图书馆出版社有限公司,深圳国夏文化数字科技有限公司 |
|||
let new_company = paramArr.new_company.join(","); //北京玖扬博文文化发展有限公司 |
|||
|
|||
//判断是不是北京玖扬博文文化发展有限公司 |
|||
let company_Number = null; |
|||
if (new_company.split(",").includes("北京玖扬博文文化发展有限公司")) { |
|||
company_Number = 1; |
|||
} else { |
|||
company_Number = null |
|||
} |
|||
//判断是不是中国数字文化集团有限公司和国家图书馆出版社有限公司、深圳国夏文化数字科技有限公司 |
|||
let china_Number = null; |
|||
if (new_userName.split(",").includes("中国数字文化集团有限公司") || new_userName.split(",").includes("国家图书馆出版社有限公司") || new_userName.split(",").includes("深圳国夏文化数字科技有限公司")) { |
|||
china_Number = 1; |
|||
} else { |
|||
china_Number = null |
|||
} |
|||
if (company_Number == null) { |
|||
if (china_Number == null) { //判断数据中是否有中国数字文化集团有限公司，国家图书馆出版社有限公司，深圳国夏文化数字科技有限公司 的委托数据 |
|||
if (new_shop_Name == "") { |
|||
app.is_shop = false |
|||
let data = { |
|||
goods_isli: manyislicode, //委托数据委托关联编码 |
|||
is_car: 1, //1：购物车商品；2：不是购物车商品 |
|||
use_years: manyYears, //委托数据购买使用年限 |
|||
user_isli: user_isli //购买方用户委托关联编码 |
|||
} |
|||
UserApi.createOrder(data).then(res => { |
|||
if (res.resultCode === "00000000") { |
|||
app.$success('订单提交成功') |
|||
// 延时2秒跳转 |
|||
setTimeout(function () { |
|||
uni.reLaunch({url: "/pages/goods/payment/orderPayment?batchcode="+res.data.batchcode}) |
|||
},1000) |
|||
app.getCartList(); |
|||
app.onClearInvalidId() |
|||
} else { |
|||
app.is_shop = true |
|||
app.$error(res.resultMsg); |
|||
} |
|||
}) |
|||
} else { |
|||
app.$toast('无法购买') |
|||
} |
|||
} else { |
|||
app.$toast('可议价商品暂不支持线上购买，如需议价请拨打电话:0755-88266899') |
|||
} |
|||
} else { |
|||
app.$toast('如需申领使用，请拨打电话 0755-88266899') |
|||
} |
|||
} |
|||
} else { |
|||
app.$toast('账号未认证，请进行认证！') |
|||
setTimeout(app.jumpMycertinfoUrl,3000) |
|||
} |
|||
} else { |
|||
app.$toast('请选择商品！') |
|||
} |
|||
}, |
|||
|
|||
// 跳转至认证 |
|||
jumpMycertinfoUrl () { |
|||
uni.navigateTo({ |
|||
url:'/pages/user/mycertinfo/mycertinfo' |
|||
}) |
|||
}, |
|||
|
|||
// 标的详情 |
|||
handleGoodsDetail(gislicode) { |
|||
// this.$toast(goodsId) |
|||
this.$navTo('pages/goods/detail', {gislicode}) |
|||
}, |
|||
|
|||
// 店铺详情 |
|||
handleGoodsList(spname) { |
|||
// this.$toast(goodsId) |
|||
this.$navTo("pages/goods/list?k="+spname+'&dt='+new Date().getTime()) |
|||
}, |
|||
|
|||
// 删除选中的商品弹窗事件 |
|||
// 确认删除商品 |
|||
onClearCart(goods_isli) { |
|||
const app = this |
|||
let param = { |
|||
user_isli: uni.getStorageSync("isliCode"), |
|||
goods_isli: goods_isli |
|||
} |
|||
UserApi.delShopCart(param).then(result => { |
|||
if (result.resultCode == '00000000') { |
|||
app.$success("删除成功！") |
|||
app.getCartList() |
|||
} |
|||
}) |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page { |
|||
background: #f5f5f5; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
|
|||
// 购物车列表 |
|||
.cart-list { |
|||
padding: 25rpx 16rpx 110rpx 16rpx; |
|||
} |
|||
|
|||
.cart-item { |
|||
background: #fff; |
|||
border-radius: 12rpx; |
|||
display: block; |
|||
align-items: center; |
|||
padding: 0rpx 16rpx 40rpx 16rpx; |
|||
margin-bottom: 24rpx; |
|||
|
|||
.goods-name { |
|||
width: 100%; |
|||
height: 78rpx; |
|||
padding: 0rpx 0rpx; |
|||
|
|||
.item-radio { |
|||
font-size: 66rpx; |
|||
|
|||
.radio { |
|||
transform: scale(0.76) |
|||
} |
|||
} |
|||
|
|||
.item-title { |
|||
width: 80%; |
|||
display: inline-block; |
|||
white-space: nowrap; /* 防止文本换行 */ |
|||
overflow: hidden; /* 超出部分隐藏 */ |
|||
text-overflow: ellipsis; /* 使用省略符号 */ |
|||
|
|||
|
|||
.item-title-name { |
|||
margin-left: 10rpx; |
|||
font-size: 32rpx; |
|||
} |
|||
} |
|||
|
|||
.item-del-inco { |
|||
float: right; |
|||
margin-top: 10rpx; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
.item-content { |
|||
width: 100%; |
|||
flex: 1; |
|||
padding-left: 24rpx; |
|||
|
|||
.goods-image { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
margin-top: 50rpx; |
|||
display: inline-block; |
|||
|
|||
.image { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 8rpx; |
|||
} |
|||
} |
|||
|
|||
.goods-title { |
|||
width: 66%; |
|||
margin-top: 0rpx; |
|||
font-size: 28rpx; |
|||
margin-left: 20rpx; |
|||
display: inline-block; |
|||
|
|||
.goods-title-name { |
|||
height: 70rpx; |
|||
margin-top: -125rpx; |
|||
float: left; |
|||
text-overflow: ellipsis; /* 使用省略符号 */ |
|||
|
|||
|
|||
} |
|||
.goods-title-content { |
|||
display: block; |
|||
color: #969493; |
|||
margin-top: 5rpx; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
.item-foot { |
|||
text-align: right; |
|||
|
|||
.goods-price { |
|||
margin-top: 40rpx; |
|||
vertical-align: bottom; |
|||
color: $uni-text-color-active; |
|||
font-size: 32rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
// 空数据按钮 |
|||
.empty-ipt { |
|||
width: 300rpx; |
|||
margin: 0 auto; |
|||
font-size: 28rpx; |
|||
height: 74rpx; |
|||
line-height: 74rpx; |
|||
text-align: center; |
|||
color: #fff; |
|||
border-radius: 50rpx; |
|||
background: linear-gradient(to right, #1c223b, #1c223b); |
|||
} |
|||
|
|||
// 底部操作栏 |
|||
.footer-fixed { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 96rpx; |
|||
background: #fff; |
|||
padding: 0 30rpx; |
|||
position: fixed; |
|||
bottom: var(--window-bottom); |
|||
left: 0; |
|||
right: 0; |
|||
z-index: 11; |
|||
|
|||
.all-radio { |
|||
width: 140rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.radio { |
|||
margin-bottom: -4rpx; |
|||
transform: scale(0.76) |
|||
} |
|||
} |
|||
|
|||
.total-info { |
|||
flex: 1; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
padding-right: 30rpx; |
|||
|
|||
.goods-price { |
|||
vertical-align: bottom; |
|||
color: #fa2209; |
|||
|
|||
.unit { |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.value { |
|||
font-size: 32rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.cart-action { |
|||
width: 200rpx; |
|||
|
|||
.btn-wrapper { |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.btn-item { |
|||
flex: 1; |
|||
font-size: 28rpx; |
|||
height: 72rpx; |
|||
line-height: 72rpx; |
|||
text-align: center; |
|||
color: #fff; |
|||
border-radius: 50rpx; |
|||
} |
|||
|
|||
// 立即购买按钮 |
|||
.btn-main { |
|||
background: linear-gradient(to right, #1c223b, #1c223b); |
|||
|
|||
// 禁用按钮 |
|||
&.disabled { |
|||
background: #9F9F9F; |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 11 KiB |
Loading…
Reference in new issue