|
|
@@ -2,52 +2,40 @@
|
|
|
<div style="position: relative">
|
|
|
<el-image style="width: 100%" :src="url" fit="contain"></el-image>
|
|
|
<div class="area">
|
|
|
- <el-radio-group
|
|
|
+ <!-- <el-radio-group
|
|
|
style="width: 100%"
|
|
|
v-model="radioTreaty"
|
|
|
@change="radioChange"
|
|
|
- >
|
|
|
- <el-radio
|
|
|
+ > -->
|
|
|
+ <!-- <el-radio
|
|
|
v-for="(item, index) in arr"
|
|
|
:key="index"
|
|
|
:value="item.valuable"
|
|
|
:label="item.valuable"
|
|
|
- ><span
|
|
|
- style="
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- left: 30px;
|
|
|
- background: #1c1817;
|
|
|
- padding: 0 4%;
|
|
|
- font-weight: 900;
|
|
|
- font-size: 22px;
|
|
|
- color: #fec629;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- height: 80%;
|
|
|
- "
|
|
|
- >{{ item.valuable / 100 }}</span
|
|
|
- >
|
|
|
- <span class="content">{{ item.content }}</span
|
|
|
- ><span class="ck" @click="goDetails(item)">详情</span></el-radio
|
|
|
- >
|
|
|
- </el-radio-group>
|
|
|
+ > -->
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in arr"
|
|
|
+ :key="index"
|
|
|
+ class="block"
|
|
|
+ @click="goDetails(index)"
|
|
|
+ >
|
|
|
+ <span class="money">{{ item.valuable / 100 }}</span>
|
|
|
+ <span class="content">{{ item.content }}</span
|
|
|
+ ><span class="ck">详情</span>
|
|
|
+ </div>
|
|
|
+ <!-- </el-radio> -->
|
|
|
+ <!-- </el-radio-group> -->
|
|
|
</div>
|
|
|
- <div class="pay_area">
|
|
|
+ <!-- <div class="pay_area">
|
|
|
<div class="pay_btn" @click="pay">立即购买</div>
|
|
|
<div style="display: flex; justify-content: center">
|
|
|
- <!-- <el-checkbox
|
|
|
- v-model="checked"
|
|
|
- @change="checkboxChange"
|
|
|
- style="margin-top: 2px"
|
|
|
- /> -->
|
|
|
<div class="xy" @click="goXy()">
|
|
|
点击购买即代表同意<span style="color: #fff; font-weight: 900"
|
|
|
>《平台用户服务协议》</span
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -60,110 +48,111 @@ export default {
|
|
|
return {
|
|
|
url: require("../assets/huiyuan_bj.jpg"),
|
|
|
arr: [],
|
|
|
- radioTreaty: "",
|
|
|
- payOptions: {
|
|
|
- appId: "", //公众号名称，由商户传入
|
|
|
- timeStamp: "", //时间戳，自1970年以来的秒数
|
|
|
- nonceStr: "", //随机串
|
|
|
- package: "", //prepay_id用等式的格式
|
|
|
- signType: "", //微信签名方式：
|
|
|
- paySign: "", //微信签名
|
|
|
- },
|
|
|
+ // radioTreaty: "",
|
|
|
+ // payOptions: {
|
|
|
+ // appId: "", //公众号名称，由商户传入
|
|
|
+ // timeStamp: "", //时间戳，自1970年以来的秒数
|
|
|
+ // nonceStr: "", //随机串
|
|
|
+ // package: "", //prepay_id用等式的格式
|
|
|
+ // signType: "", //微信签名方式：
|
|
|
+ // paySign: "", //微信签名
|
|
|
+ // },
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- goXy() {
|
|
|
- this.$router.push("/xy");
|
|
|
- },
|
|
|
- goDetails(item) {
|
|
|
- console.log(item);
|
|
|
+ // goXy() {
|
|
|
+ // this.$router.push("/xy");
|
|
|
+ // },
|
|
|
+ goDetails(index) {
|
|
|
+ console.log(index);
|
|
|
this.$router.push({
|
|
|
name: "payDetails",
|
|
|
query: {
|
|
|
- contentImg: item.contentImg,
|
|
|
- valuable: item.valuable,
|
|
|
- title: item.title,
|
|
|
+ index: index,
|
|
|
+ // contentImg: item.contentImg,
|
|
|
+ // valuable: item.valuable,
|
|
|
+ // title: item.title,
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
- radioChange: (val) => {
|
|
|
- console.log(val);
|
|
|
- },
|
|
|
- jsSdk() {
|
|
|
- // 判断微信的WeixinJSBridge
|
|
|
- console.log(typeof WeixinJSBridge);
|
|
|
- if (typeof WeixinJSBridge == "undefined") {
|
|
|
- if (document.addEventListener) {
|
|
|
- document.addEventListener(
|
|
|
- "WeixinJSBridgeReady",
|
|
|
- this.onBridgeReady,
|
|
|
- false
|
|
|
- );
|
|
|
- } else if (document.attachEvent) {
|
|
|
- document.attachEvent("WeixinJSBridgeReady", this.onBridgeReady);
|
|
|
- document.attachEvent("onWeixinJSBridgeReady", this.onBridgeReady);
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.onBridgeReady();
|
|
|
- }
|
|
|
- },
|
|
|
- // 支付sdk准备完成
|
|
|
- onBridgeReady() {
|
|
|
- // 触发微信支付
|
|
|
- WeixinJSBridge.invoke(
|
|
|
- "getBrandWCPayRequest",
|
|
|
- this.payOptions,
|
|
|
- function (res) {
|
|
|
- console.log(res);
|
|
|
- if (res.err_msg == "get_brand_wcpay_request:ok") {
|
|
|
- // 支付成功 返回成功页
|
|
|
- let tempUrl = "https://yuehe.hellevil.com/mp/#/paySuccess";
|
|
|
- location.href = tempUr;
|
|
|
- } else {
|
|
|
- // 取消支付或者其他情况 get_brand_wcpay_request:cancel get_brand_wcpay_request:fail
|
|
|
- let tempUrl = "https://yuehe.hellevil.com/mp/#/";
|
|
|
- location.href = tempUrl;
|
|
|
- }
|
|
|
- }
|
|
|
- );
|
|
|
- },
|
|
|
- async pay() {
|
|
|
- if (!this.radioTreaty) {
|
|
|
- this.$message({
|
|
|
- message: "至少选择一种权益哦",
|
|
|
- type: "warning",
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
- console.log(this.radioTreaty);
|
|
|
- let params = {};
|
|
|
- for (let i = 0; i < this.arr.length; i++) {
|
|
|
- console.log(this.arr[i].valuable);
|
|
|
- if (this.arr[i].valuable == this.radioTreaty) {
|
|
|
- params = {
|
|
|
- body: this.arr[i].title,
|
|
|
- outTradeNo: new Date().getTime(),
|
|
|
- totalFee: this.arr[i].valuable,
|
|
|
- spbillCreateIp: "127.0.0.1",
|
|
|
- notifyUrl: "https://yuehe.hellevil.com/pay/notify/order",
|
|
|
- tradeType: "JSAPI",
|
|
|
- // openid: "oyp646XW37eIqrv3XisVWQ3xq3BQ",
|
|
|
- openid: window.localStorage.getItem("openId"),
|
|
|
- };
|
|
|
- }
|
|
|
- }
|
|
|
- console.log(params);
|
|
|
- const result = await getPay(params);
|
|
|
- console.log(result);
|
|
|
- this.payOptions.appId = result.appId; //公众号名称，由商户传入
|
|
|
- this.payOptions.timeStamp = result.timeStamp; //时间戳，自1970年以来的秒数
|
|
|
- this.payOptions.nonceStr = result.nonceStr; //随机串
|
|
|
- this.payOptions.package = result.packageValue; //prepay_id用等式的格式
|
|
|
- this.payOptions.signType = result.signType; //微信签名方式：
|
|
|
- this.payOptions.paySign = result.paySign; //微信签名
|
|
|
- console.log(this.payOptions);
|
|
|
- this.jsSdk();
|
|
|
- },
|
|
|
+ // radioChange: (val) => {
|
|
|
+ // console.log(val);
|
|
|
+ // },
|
|
|
+ // jsSdk() {
|
|
|
+ // // 判断微信的WeixinJSBridge
|
|
|
+ // console.log(typeof WeixinJSBridge);
|
|
|
+ // if (typeof WeixinJSBridge == "undefined") {
|
|
|
+ // if (document.addEventListener) {
|
|
|
+ // document.addEventListener(
|
|
|
+ // "WeixinJSBridgeReady",
|
|
|
+ // this.onBridgeReady,
|
|
|
+ // false
|
|
|
+ // );
|
|
|
+ // } else if (document.attachEvent) {
|
|
|
+ // document.attachEvent("WeixinJSBridgeReady", this.onBridgeReady);
|
|
|
+ // document.attachEvent("onWeixinJSBridgeReady", this.onBridgeReady);
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // this.onBridgeReady();
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // // 支付sdk准备完成
|
|
|
+ // onBridgeReady() {
|
|
|
+ // // 触发微信支付
|
|
|
+ // WeixinJSBridge.invoke(
|
|
|
+ // "getBrandWCPayRequest",
|
|
|
+ // this.payOptions,
|
|
|
+ // function (res) {
|
|
|
+ // console.log(res);
|
|
|
+ // if (res.errMsg == "get_brand_wcpay_request:ok") {
|
|
|
+ // // 支付成功 返回成功页
|
|
|
+ // let tempUrl = "https://yuehe.hellevil.com/mp/#/payList";
|
|
|
+ // location.href = tempUrl;
|
|
|
+ // } else {
|
|
|
+ // // 取消支付或者其他情况 get_brand_wcpay_request:cancel get_brand_wcpay_request:fail
|
|
|
+ // let tempUrl = "https://yuehe.hellevil.com/mp/#/";
|
|
|
+ // location.href = tempUrl;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // );
|
|
|
+ // },
|
|
|
+ // async pay() {
|
|
|
+ // if (!this.radioTreaty) {
|
|
|
+ // this.$message({
|
|
|
+ // message: "至少选择一种权益哦",
|
|
|
+ // type: "warning",
|
|
|
+ // });
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ // console.log(this.radioTreaty);
|
|
|
+ // let params = {};
|
|
|
+ // for (let i = 0; i < this.arr.length; i++) {
|
|
|
+ // console.log(this.arr[i].valuable);
|
|
|
+ // if (this.arr[i].valuable == this.radioTreaty) {
|
|
|
+ // params = {
|
|
|
+ // body: this.arr[i].title,
|
|
|
+ // outTradeNo: new Date().getTime(),
|
|
|
+ // totalFee: this.arr[i].valuable,
|
|
|
+ // spbillCreateIp: "127.0.0.1",
|
|
|
+ // notifyUrl: "https://yuehe.hellevil.com/pay/notify/order",
|
|
|
+ // tradeType: "JSAPI",
|
|
|
+ // // openid: "oyp646XW37eIqrv3XisVWQ3xq3BQ",
|
|
|
+ // openid: window.localStorage.getItem("openId"),
|
|
|
+ // };
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // console.log(params);
|
|
|
+ // const result = await getPay(params);
|
|
|
+ // console.log(result);
|
|
|
+ // this.payOptions.appId = result.appId; //公众号名称，由商户传入
|
|
|
+ // this.payOptions.timeStamp = result.timeStamp; //时间戳，自1970年以来的秒数
|
|
|
+ // this.payOptions.nonceStr = result.nonceStr; //随机串
|
|
|
+ // this.payOptions.package = result.packageValue; //prepay_id用等式的格式
|
|
|
+ // this.payOptions.signType = result.signType; //微信签名方式：
|
|
|
+ // this.payOptions.paySign = result.paySign; //微信签名
|
|
|
+ // console.log(this.payOptions);
|
|
|
+ // this.jsSdk();
|
|
|
+ // },
|
|
|
async findArr(openId) {
|
|
|
let params = {
|
|
|
openId: openId,
|
|
|
@@ -177,131 +166,158 @@ export default {
|
|
|
async mounted() {
|
|
|
openId.getOpenId(() => {
|
|
|
let openId = window.localStorage.getItem("openId");
|
|
|
+ // let openId = "oyp646WEKT5tK5AgiEhYrtW7pmq8";
|
|
|
this.findArr(openId);
|
|
|
});
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped lang="less">
|
|
|
-.pay_area {
|
|
|
+// .pay_area {
|
|
|
+// width: 100%;
|
|
|
+// height: 10%;
|
|
|
+// position: absolute;
|
|
|
+// bottom: 8%;
|
|
|
+// left: 0;
|
|
|
+// }
|
|
|
+// .pay_btn {
|
|
|
+// height: 85%;
|
|
|
+// width: 100%;
|
|
|
+// color: #fff;
|
|
|
+// font-weight: 900;
|
|
|
+// font-size: 30px;
|
|
|
+// display: flex;
|
|
|
+// align-items: center;
|
|
|
+// justify-content: center;
|
|
|
+// }
|
|
|
+.block {
|
|
|
+ margin-top: 6%;
|
|
|
+ position: relative;
|
|
|
width: 100%;
|
|
|
- height: 10%;
|
|
|
- position: absolute;
|
|
|
- bottom: 8%;
|
|
|
- left: 0;
|
|
|
+ background: #feb800;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 28%;
|
|
|
+ // border: 1px solid red;
|
|
|
}
|
|
|
-.pay_btn {
|
|
|
- height: 85%;
|
|
|
- width: 100%;
|
|
|
- color: #fff;
|
|
|
- font-weight: 900;
|
|
|
- font-size: 30px;
|
|
|
+.money {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
+ left: 20px;
|
|
|
+ background: #1c1817;
|
|
|
+ padding: 0 12px;
|
|
|
+ font-weight: 900;
|
|
|
+ font-size: 21px;
|
|
|
+ color: #fec629;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ height: 80%;
|
|
|
}
|
|
|
.el-image {
|
|
|
display: block;
|
|
|
}
|
|
|
.area {
|
|
|
- display: flex;
|
|
|
+ // display: flex;
|
|
|
width: 80%;
|
|
|
position: absolute;
|
|
|
- top: 30%;
|
|
|
+ top: 38%;
|
|
|
left: 10%;
|
|
|
height: 30%;
|
|
|
+ // border: 1px solid red;
|
|
|
}
|
|
|
-.el-radio-group .el-radio {
|
|
|
- display: block;
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-.el-radio /deep/ .el-radio__input {
|
|
|
- margin-top: 11%;
|
|
|
- margin-left: 10px;
|
|
|
-}
|
|
|
+// .el-radio-group .el-radio {
|
|
|
+// display: block;
|
|
|
+// color: #fff;
|
|
|
+// }
|
|
|
+// .el-radio /deep/ .el-radio__input {
|
|
|
+// margin-top: 11%;
|
|
|
+// margin-left: 10px;
|
|
|
+// }
|
|
|
.content {
|
|
|
position: absolute;
|
|
|
top: 18%;
|
|
|
- left: 41%;
|
|
|
+ left: 38%;
|
|
|
font-size: 16px;
|
|
|
font-weight: 600;
|
|
|
width: 55%;
|
|
|
word-break: break-all;
|
|
|
white-space: normal;
|
|
|
+ color: #fff;
|
|
|
+ // border:1px solid red
|
|
|
// border: 1px solid red;
|
|
|
}
|
|
|
-.el-radio-group
|
|
|
- .el-radio
|
|
|
- /deep/
|
|
|
- .el-radio__input.is-checked
|
|
|
- + .el-radio__label {
|
|
|
- color: #fff !important;
|
|
|
-}
|
|
|
-.el-radio-group .el-radio /deep/ .el-radio__label {
|
|
|
- color: #fff !important;
|
|
|
- font-size: 13px !important;
|
|
|
- padding-left: 4px !important;
|
|
|
- width: 80% !important;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-.el-radio-group
|
|
|
- .el-radio
|
|
|
- /deep/
|
|
|
- .el-radio__input.is-checked
|
|
|
- /deep/
|
|
|
- .el-radio__inner::after {
|
|
|
- content: "";
|
|
|
- width: 10px !important;
|
|
|
- height: 5px !important;
|
|
|
- border: 2px solid #1c1817 !important;
|
|
|
- border-top: transparent !important;
|
|
|
- border-right: transparent !important;
|
|
|
- text-align: center !important;
|
|
|
- display: block !important;
|
|
|
- position: absolute !important;
|
|
|
- top: 2px !important;
|
|
|
- left: 0px !important;
|
|
|
- vertical-align: middle !important;
|
|
|
- transform: rotate(-45deg) !important;
|
|
|
- border-radius: 0px !important;
|
|
|
- background: none !important;
|
|
|
-}
|
|
|
-.el-radio-group .el-radio /deep/ .el-radio__input.is-checked .el-radio__inner {
|
|
|
- border-color: #fff;
|
|
|
- background: #fff;
|
|
|
- width: 15px;
|
|
|
- height: 15px;
|
|
|
-}
|
|
|
-.el-radio-group .el-radio /deep/ .el-radio__input .el-radio__inner {
|
|
|
- width: 15px;
|
|
|
- height: 15px;
|
|
|
-}
|
|
|
-.el-radio-group .el-radio {
|
|
|
- margin-top: 6%;
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- background: #feb800;
|
|
|
- overflow: hidden;
|
|
|
- height: 28%;
|
|
|
- .el-radio__input {
|
|
|
- display: none;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- &.is-checked {
|
|
|
- position: relative;
|
|
|
- &:after {
|
|
|
- content: "";
|
|
|
- display: block;
|
|
|
- height: 15px;
|
|
|
- width: 15px;
|
|
|
- background-size: 100%;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+
|
|
|
+// .el-radio-group
|
|
|
+// .el-radio
|
|
|
+// /deep/
|
|
|
+// .el-radio__input.is-checked
|
|
|
+// + .el-radio__label {
|
|
|
+// color: #fff !important;
|
|
|
+// }
|
|
|
+// .el-radio-group .el-radio /deep/ .el-radio__label {
|
|
|
+// color: #fff !important;
|
|
|
+// font-size: 13px !important;
|
|
|
+// padding-left: 4px !important;
|
|
|
+// width: 80% !important;
|
|
|
+// overflow: hidden;
|
|
|
+// }
|
|
|
+// .el-radio-group
|
|
|
+// .el-radio
|
|
|
+// /deep/
|
|
|
+// .el-radio__input.is-checked
|
|
|
+// /deep/
|
|
|
+// .el-radio__inner::after {
|
|
|
+// content: "";
|
|
|
+// width: 10px !important;
|
|
|
+// height: 5px !important;
|
|
|
+// border: 2px solid #1c1817 !important;
|
|
|
+// border-top: transparent !important;
|
|
|
+// border-right: transparent !important;
|
|
|
+// text-align: center !important;
|
|
|
+// display: block !important;
|
|
|
+// position: absolute !important;
|
|
|
+// top: 2px !important;
|
|
|
+// left: 0px !important;
|
|
|
+// vertical-align: middle !important;
|
|
|
+// transform: rotate(-45deg) !important;
|
|
|
+// border-radius: 0px !important;
|
|
|
+// background: none !important;
|
|
|
+// }
|
|
|
+// .el-radio-group .el-radio /deep/ .el-radio__input.is-checked .el-radio__inner {
|
|
|
+// border-color: #fff;
|
|
|
+// background: #fff;
|
|
|
+// width: 15px;
|
|
|
+// height: 15px;
|
|
|
+// }
|
|
|
+// .el-radio-group .el-radio /deep/ .el-radio__input .el-radio__inner {
|
|
|
+// width: 15px;
|
|
|
+// height: 15px;
|
|
|
+// }
|
|
|
+// .el-radio-group .el-radio {
|
|
|
+// margin-top: 6%;
|
|
|
+// position: relative;
|
|
|
+// width: 100%;
|
|
|
+// background: #feb800;
|
|
|
+// overflow: hidden;
|
|
|
+// height: 28%;
|
|
|
+// .el-radio__input {
|
|
|
+// display: none;
|
|
|
+// color: #fff;
|
|
|
+// }
|
|
|
+// &.is-checked {
|
|
|
+// position: relative;
|
|
|
+// &:after {
|
|
|
+// content: "";
|
|
|
+// display: block;
|
|
|
+// height: 15px;
|
|
|
+// width: 15px;
|
|
|
+// background-size: 100%;
|
|
|
+// position: absolute;
|
|
|
+// right: 0;
|
|
|
+// top: 0;
|
|
|
+// color: #000;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
.ck {
|
|
|
font-size: 13px;
|
|
|
margin-top: 11px;
|
|
|
@@ -314,10 +330,10 @@ export default {
|
|
|
bottom: 5%;
|
|
|
right: 2%;
|
|
|
}
|
|
|
-.xy {
|
|
|
- font-size: 13px;
|
|
|
- color: #fff;
|
|
|
- margin-left: 5px;
|
|
|
- margin-top: 10%;
|
|
|
-}
|
|
|
+// .xy {
|
|
|
+// font-size: 13px;
|
|
|
+// color: #fff;
|
|
|
+// margin-left: 5px;
|
|
|
+// margin-top: 10%;
|
|
|
+// }
|
|
|
</style>
|
houwei
