支付成功提示更改

pages2/order/confirm_success.vue

@@ -1,272 +1,294 @@
 <template>
-	<view>
-		<nav-bar title="支付成功"></nav-bar>
-		<view>
-			<view style="padding: 8rpx;">
-				<view class="box1">
-					<view class="box1_t1">
-						<u-icon name="checkmark-circle" color="#34C759" size="32"></u-icon><text style="margin-left: 8rpx;">您的订单已支付成功！</text>
-					</view>
-					
-					<view class="tip">*您可在“我的＞我的订单”中查询</view>
-					<view style="display: flex;align-items: center;justify-content: center;" v-if="isBK === '1'">
-						<view class="btn1" @click="backMyStudent">
-							返回我的网课
-						</view>
-						<view class="btn2" @click="gots">
-							继续本次的考试预约
-						</view>
-					</view>
-					<view style="display: flex;align-items: center;justify-content: center;" v-else>
-						<view class="btn1" @click="goCourse">
-							继续选课
-						</view>
-						<view class="btn2" @click="goOrder">
-							立即学习
-						</view>
-					</view>
-				</view>
-				
-				<view class="box2">
-					<view class="title2">订单信息</view>
-					<u-line color="#D6D6DB" />
-					<view style="padding:10rpx 30rpx;" v-for="(item,index) in shoppingCartList" :key="index">
-						<view class="list_item">
-							<view class="txt_left">商品名称</view>
-							<view class="txt_right">{{item.goodsName}}</view>
-						</view>
-						<view class="list_item">
-							<view class="txt_left">应付金额</view>
-							<view class="txt_right_price">¥ {{item.standPrice}}</view>
-						</view>
-						<view class="list_item">
-							<view class="txt_left">订单编号</view>
-							<view class="txt_right_sn">{{sn}}</view>
-						</view>
-					</view>
-					<u-line color="#D6D6DB" />
-				</view>
-			</view>
-		</view>
-	</view>
-	
+  <view>
+    <nav-bar title="支付成功"></nav-bar>
+    <view>
+      <view>
+        <view class="box1">
+          <view class="box1_t1">
+            <!-- <u-icon name="checkmark-circle" color="#34C759" size="32"></u-icon
+            > -->
+            <image src="../static/icon-succecc.png" mode="" />
+            <text>订单支付成功</text>
+          </view>
+
+          <view class="tip">您可在“我的＞我的订单”中查询</view>
+          <view class="fl_c" v-if="isBK === '1'">
+            <view class="btn1" @click="backMyStudent"> 返回我的网课 </view>
+            <view class="btn2" @click="gots"> 继续本次的考试预约 </view>
+          </view>
+          <view class="fl_c" v-else>
+            <view class="btn1" @click="goCourse"> 继续选课 </view>
+            <view class="btn2" @click="goOrder"> 立即学习 </view>
+          </view>
+        </view>
+		<!-- #ifdef H5 -->
+        <view class="collect">
+          <view class="fl" v-if="config.gzhImage">
+            <image :src="$method.splitImgHost(config.gzhImage)" mode="" />
+            <text>长按二维码，关注公众号
+				<br>方便下次进入学习哦</br>
+			</text>
+          </view>
+          <view class="fl" v-else>
+            <image src="../static/icon-collect.png" mode="" />
+            <text>收藏链接，方便下次进入学习哦</text>
+          </view>
+        </view>
+		<!-- #endif -->
+        <view class="box2">
+          <view class="title2">订单信息</view>
+          <view
+            style="padding: 10rpx 0"
+            v-for="(item, index) in shoppingCartList"
+            :key="index"
+          >
+            <view class="list_item">
+              <view class="txt_left">商品名称</view>
+              <view class="txt_right u-line-1">{{ item.goodsName }}</view>
+            </view>
+            <view class="list_item">
+              <view class="txt_left">应付金额</view>
+              <view class="txt_right_price">¥ {{ item.standPrice }}</view>
+            </view>
+            <view class="list_item">
+              <view class="txt_left">订单编号</view>
+              <view class="txt_right_sn">{{ sn }}</view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-
-import { mapGetters } from 'vuex';
+import { mapGetters } from "vuex";
 export default {
-	components: {
-		
-	},
-	data() {
-		return {
-			list:[
-				{
-					name: '网课'
-				},
-				{
-					name: '题库通'
-				}
-			],
-			array:['全部','建设工程施工管理','机电全科','机电工程管理与实','机电全科','全科'],
-			current:0,
-			menuIndex:0,
-			sn:'',
-			isBK:'',//1补考商品
-			getDatas:{}
-		};
-	},
-	onPullDownRefresh(){
-	},
-	onLoad(option) {
-		this.sn = option.sn
-		this.isBK = option.isBk
-		if(option.isBk === '1'){
-			this.getDatas = this.$store.getters.getBackPageApplyData
-			console.log(this.isBK === '1',this.getDatas)
-		}
-	},
-	onShow() {
-		/* if(this.current === 2 && this.$method.isLogin()){
+  components: {},
+  data() {
+    return {
+      list: [
+        {
+          name: "网课",
+        },
+        {
+          name: "题库通",
+        },
+      ],
+      array: [
+        "全部",
+        "建设工程施工管理",
+        "机电全科",
+        "机电工程管理与实",
+        "机电全科",
+        "全科",
+      ],
+      current: 0,
+      menuIndex: 0,
+      sn: "",
+      isBK: "", //1补考商品
+      getDatas: {},
+    };
+  },
+  onPullDownRefresh() {},
+  onLoad(option) {
+    this.sn = option.sn;
+    this.isBK = option.isBk;
+    if (option.isBk === "1") {
+      this.getDatas = this.$store.getters.getBackPageApplyData;
+    }
+  },
+  onShow() {
+	console.log(this.config.gzhImage)
+    /* if(this.current === 2 && this.$method.isLogin()){
 			this.$refs.refMy.init();
 		} */
-	},
-	methods: {
-		// 返回我的网课
-		backMyStudent(){
-			uni.redirectTo({
-			    url: '/pages2/wd/class'
-			});
-		},
-		// 继续本次的考试预约
-		gots(){
-			uni.redirectTo({
-			    url: `/pages2/appointment/index?goodsId=${this.getDatas.goodsId}&gradeId=${this.getDatas.gradeId}&orderGoodsId=${this.getDatas.orderGoodsId}&applyId=${this.getDatas.applyId}`
-			});
-		},
-		goCourse(){
-			uni.switchTab({
-			    url: '/pages/course/index'
-			});
-		},
-		goOrder(){
-			// uni.redirectTo({
-			//     url: '/pages2/order/index?current=1'
-			// });
-			uni.switchTab({
-				url:'/pages/learn/index'
-			})
-		},
-		radioChange(e) {
-			// console.log(e);
-		},
-		// 选中任一radio时，由radio-group触发
-		radioGroupChange(e) {
-			// console.log(e);
-		},
-		cMenu(index){
-			this.menuIndex = index;
-		},
-		change(index){
-			this.current = index;
-		}
-	},
-	onReachBottom() {},
-	computed: { ...mapGetters(['userInfo','shoppingCartList']) }
+  },
+  methods: {
+    // 返回我的网课
+    backMyStudent() {
+      uni.redirectTo({
+        url: "/pages2/wd/class",
+      });
+    },
+    // 继续本次的考试预约
+    gots() {
+      uni.redirectTo({
+        url: `/pages2/appointment/index?goodsId=${this.getDatas.goodsId}&gradeId=${this.getDatas.gradeId}&orderGoodsId=${this.getDatas.orderGoodsId}&applyId=${this.getDatas.applyId}`,
+      });
+    },
+    goCourse() {
+      uni.switchTab({
+        url: "/pages/course/index",
+      });
+    },
+    goOrder() {
+      // uni.redirectTo({
+      //     url: '/pages2/order/index?current=1'
+      // });
+      uni.switchTab({
+        url: "/pages/learn/index",
+      });
+    },
+    radioChange(e) {
+      // console.log(e);
+    },
+    // 选中任一radio时，由radio-group触发
+    radioGroupChange(e) {
+      // console.log(e);
+    },
+    cMenu(index) {
+      this.menuIndex = index;
+    },
+    change(index) {
+      this.current = index;
+    },
+  },
+  onReachBottom() {},
+  computed: { ...mapGetters(["userInfo", "shoppingCartList", "config"]) },
 };
 </script>
-<style >
-	::-webkit-scrollbar{
-	 width: 0;
-	 height: 0;
-	 color: transparent
-	}
-	page{
-		background-color: #EAEEF1;
-	}
+<style>
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+</style>
+<style lang="scss" scoped>
+page {
+  background-color: #ffffff;
+}
+.btn2 {
+  padding: 0rpx 30rpx;
+  height: 76rpx;
+  background: #007aff;
+  border-radius: 100rpx;
+  font-size: 28rpx;
+  color: #ffffff;
+  text-align: center;
+  line-height: 76rpx;
+}
+.btn1 {
+  padding: 0 30rpx;
+  height: 76rpx;
+  border-radius: 100rpx;
+  border: 1px solid #828282;
+  box-sizing: border-box;
+  font-size: 28rpx;
+  color: #222222;
+  line-height: 76rpx;
+  margin-right: 48rpx;
+}
+.pay_icon {
+  width: 64rpx;
+  height: 64rpx;
+  margin-right: 10rpx;
+}
+.box3 {
+  width: 100%;
+  background: #ffffff;
+  border-radius: 16rpx;
+  margin-top: 30rpx;
+}
+.tip {
+  text-align: center;
+  font-size: 28rpx;
+  color: #999999;
+  height: 40rpx;
+  line-height: 40rpx;
+  color: #7c7c7c;
+  margin: 24rpx 0 48rpx;
+}
+.collect {
+  width: 89%;
+  background: #e7f1ff;
+  padding: 30rpx 40rpx;
+  margin-left: 34rpx;
+  border-radius: 24rpx;
+  &:nth-of-type(2) {
+    image {
+      width: 112rpx;
+      height: 112rpx;
+    }
+  }
+  text {
+    margin-left: 32rpx;
+    color: #222222;
+    font-size: 30rpx;
+	line-height: 44rpx;
+  }
+}
+.txt_right_sn {
+  color: #666666;
+}
+.txt_right_price {
+  font-weight: bold;
+  color: #EB5757;
+}
+.txt_left {
+  color: #444444;
+}
+.txt_right {
+  width: 70%;
+  text-align: right;
+  color: #666666;
+}
+.list_item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 40rpx;
+}
+.title2 {
+  font-weight: bold;
+  color: #222222;
+}
+.box2 {
+  margin: 0 40rpx;
+  margin-top: 64rpx;
+  font-size: 32rpx;
+}
+.box1_t2 {
+  font-size: 24rpx;
+  color: #999999;
+  text-align: center;
+}
+.box1_t1 {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #333333;
+  height: 70rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  image {
+    width: 72rpx;
+    height: 72rpx;
+  }
+}
+.box1 {
+  width: 100%;
+  background: #ffffff;
+  border-radius: 16rpx;
+  padding: 56rpx 0 80rpx;
+  text {
+    margin-left: 8rpx;
+    font-weight: bold;
+    color: #222222;
+    font-size: 36rpx;
+  }
+}
+.bottomBtn {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 98rpx;
+  background: linear-gradient(0deg, #015eea, #00c0fa);
+  color: #ffffff;
+  text-align: center;
+  line-height: 98rpx;
+  font-weight: bold;
+  font-size: 30rpx;
+}
 </style>
-<style scoped>
-	.btn2{
-		/* width: 160rpx;		 */
-		padding: 0rpx 20rpx;
-		height: 56rpx;
-		background: #007AFF;
-		border-radius: 16rpx;
-		font-size: 30rpx;
-		color: #FFFFFF;
-		margin: 10rpx;
-		text-align: center;
-		line-height: 56rpx;
-	}
-	.btn1{
-		padding: 0rpx 20rpx;
-		/* width: 160rpx; */
-		height: 56rpx;
-		background: #F5F5F5;
-		border-radius: 16rpx;
-		font-size: 30rpx;
-		color: #007AFF;
-		margin: 10rpx;
-		text-align: center;
-		line-height: 56rpx;
-	}
-	.txt_left_pay{
-		display: flex;
-		align-items: center;
-		height: 64rpx;
-		font-size: 24rpx;
-		color: #666666;
-	}
-	.pay_icon{
-		width: 64rpx;
-		height: 64rpx;
-		margin-right: 10rpx;
-	}
-	.box3{
-		width: 100%;
-		background: #FFFFFF;
-		border-radius: 16rpx;
-		margin-top: 30rpx;
-	}
-	.tip{
-		text-align: center;
-		font-size: 24rpx;
-		color: #999999;
-		height: 40rpx;
-		line-height: 40rpx;
-	}
-	.txt_right_sn{
-		font-size: 30rpx;
-		font-weight: bold;
-		color: #666666;
-	}
-	.txt_right_price{
-		font-size: 30rpx;
-		font-weight: bold;
-		color: #FF2D55;
-	}
-	.txt_left{
-		font-size: 24rpx;
-		color: #666666;
-	}
-	.txt_right{
-		text-align: right;
-		color: #333333;
-		font-weight: bold;
-		width: 75%;
-	}
-	.list_item{
-		display: flex;
-		justify-content: space-between;
-		height: 80rpx;
-		align-items: center;
-	}
-	.title2{
-		font-size: 30rpx;
-		font-weight: bold;
-		color: #333333;
-		height: 80rpx;
-		line-height: 80rpx;
-		margin-left: 30rpx;
-	}
-	.box2{
-		width: 100%;
-		background: #FFFFFF;
-		border-radius: 16rpx;
-		margin-top: 16rpx;
-	}
-	.box1_t2{
-		font-size: 24rpx;
-		color: #999999;
-		text-align: center;
-	}
-	.box1_t1{
-		font-size: 30rpx;
-		font-weight: bold;
-		color: #333333;
-		height: 70rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-
-	}
-	.box1{
-		width: 100%;
-		background: #FFFFFF;
-		border-radius: 16rpx;
-		padding: 15rpx;
-	}
-	.bottomBtn{
-		position: fixed;
-		bottom: 0;
-		width: 100%;
-		height: 98rpx;
-		background: linear-gradient(0deg, #015EEA, #00C0FA);
-		color: #FFFFFF;
-		text-align: center;
-		line-height: 98rpx;
-		font-weight: bold;
-		font-size: 30rpx;
-	}
-</style>

static/style/index.scss

@@ -0,0 +1,16 @@
+.fl {
+  display: flex;
+  align-items: center;
+}
+
+.fl_b {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.fl_c {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

uni.scss

@@ -15,6 +15,8 @@
 	padding-bottom: constant(safe-area-inset-bottom);
 	padding-bottom: env(safe-area-inset-bottom);
 }
+// 通用样式
+@import "./static/style/index.scss";
 /* 颜色变量 */
 @import 'uview-ui/theme.scss';
 /* 行为相关颜色 */